Listák és a szövegtörzs formázása



HTML oldalunk szövegét kétféle módon formázhatjuk. Egyrészt közvetlenül, a tagek beírásával. Másrészt lehetőségünk van arra is, hogy az adott dokumentumra vonatkozóan alapértelmezett formázási utasításokat adjunk meg. Ezt a StyleSheet használatával tehetjük meg, mely nagymértékben megkönnyíti munkánkat. Erről a módszerről egy későbbi fejezetben még szót ejtünk.
Térjünk vissza a szövegformázó tagekhez! Legcélszerűbb, ha oldalunk legelején ( még a <BODY> tagben ) megadjuk a szöveg színét ( TEXT opció ). Emellet létezik külön parancs a betű típusának és méretének megadására is. A karaktertípus változtatásakor vegyük figyelembe azt, hogy honlapunk látogatója nem feltétlenül rendelkezik a mi betűtípusunkkal! Ezért igyekezzünk olyat megadni, mely a legnagyobb valószínűséggel a legtöbb gépen megtalálható. Ilyenek a Microsoft alapértelmezett betűi, mint például: Times New Roman, Arial, Courier New, Tahoma, MS Sans stb. Ha mégis a felhasználó számára ismeretlen karaktertípust adnánk meg, akkor a böngésző automatikusan az ő alapértelmezett készletét fogja használni.
A betűformázás parancsszava a <FONT>, melyet a formázott szövegrész végén a </FONT> tag zár le. Opciói lehetnek :


   FACE="betűnév" - A betű típusát határozza meg.
   SIZE="méret" - A karakterek méretét adja meg képpontban ( pixelben ).
   COLOR="#színkód" - Egy adott szövegrész színét lehet megváltoztatni vele, ahol a színt megadhatjuk angol nevével és hexadecimális kódjával is.


A karakterek tulajdonságait befolyásolják még a <B> ( bold - félkövér ), az <U> ( underline - aláhúzott ), az <I> ( italic - dőlt ) és az <S> ( striked - áthúzott ) tagek.
A betűk függőleges elhelyezkedését is változtathatjuk. A <SUP> parancs felső indexet, a <SUB> pedig alsó indexet eredményez. A felsoroltak mindegyike rendelkezik zárópárral.
Honlapunk szövegét bekezdésekre is tagolhatjuk. Ezen bekezdéseket a <P> és a </P> tag szegélyezi. A böngészők az egyes bekezdéseket mindig elkülönítik egymástól, köztük szünetet hagynak. Maga a <P> parancs az ALIGN="igazítás" opcióval rendelkezik. Értékei lehetnek: "left" - balra rendez ( alapértelmezett ), "center" - középre rendez, "right" - jobbra rendez és "justify" - sorkizártan rendez.
A jobb áttekinthetőség érdekében a <HR> tag segítségével egy egyszerű vonalat húzhatunk két elkülöníteni kívánt rész közé. A tag opciójaként megadható ALIGN="left/center/right" a vonal elhelyezkedéséért, a WIDTH="szélesség" pedig a vonal szélességéért felelős. Ez utóbbi értékét megadhatjuk pixelben és a böngészőablak szélességének százalékában. A NOSHADE tulajdonsággal a vonal árnyékolását kapcsolhatjuk ki.


A HTML nyelvben a listák szerkesztése is igen egyszerű. Létezik hozzá külön tag is, de listánkat elkészíthetjük úgy is, hogy magunk adjuk meg szóközönként a bal margótól mért távolságát az egyes listaelemeknek. Ez persze hosszadalmas, ezért érdemes a parancsszavas megoldást választani.
A listákat kétféle kategóriába sorolhatjuk: lehetnek rendezettek ( ordered ) és lehetnek rendezetlenek ( unordered ). A rendezetteket az <OL> vezeti be, míg a számozatlant ( rendezetlen - unordered ) az <UL> tag. Természetesen mindkét felsorolási mód rendelkezik zárópárral. Emellett mindkettőben az <LH> parancs adja meg a listafejlécet, melyet az </LH> zár. Az egyes listaelemeket az <LI> tag jelzi, zárópárja nincs: egy listaelem addig tart, amíg nem következik egy másik <LI> parancs. (A listáknál azonban már előjön a honlapkészítő legnagyobb problémája: a kompatibilitás. Habár az <LI> utasításnak "papíron" valóban nincs zárópárja, jobb azt kitenni.)
A rendezett listánál az elemek sorszámokat kapnak. A számozás kezdetét a SEQNUM="kezdő sorszám" opcióval adhatjuk meg. Ha egy már definiált lista számozását kívánjuk folytatni, akkor az újabbnál (természetesen az <OL> tagen belül) a CONTINUE tulajdonságot adjuk meg.
Egyes böngészők jobban szeretik a START="szám" tulajdonságot a kezdősorszám megadásakor. Ilyen az Internet Explorer is. Emellett a TYPE="jelzés típusa" opciót is megadhatjuk. Lehetséges értékei: 1 / a / A / i / I - arab számok, latin kis- és nagybetűk, római kis- és nagyméretű számok. A START utasítás értéke minden esetben szám, az ABC betűinél az angol ABC-ben elfoglalt hely számít. Az ugyanitt alkalmazható COMPACT beállítás a listaelem közötti üres teret tünteti el. Ez utóbbit nem szeretik a böngészők - a  W3C szabvány  (az Internet "szabványügyi" testülete) sem javasolja használatát.
A másik típus, melyet az <UL> tag vezet be, a TYPE="típus", az SRC="elérési út/ képnév.kiterjesztés" és a WRAP="irány" opciókkal formázható. A TYPE="disc / square / circle" tulajdonság a bajuszkaraktert adja meg, amely a listaelemek előtt szerepel (teli kör, teli négyzet, kör). Az SRC="elérési út/ képnév.kiterjesztés" paranccsal az elem előtt álló képecskét határozhatjuk meg. A WARP="irány" utasítással a többoszlopos listák igazítását változtathatjuk. Értékei lehetnek: "horiz" - vízszintesen és "vert" - függőlegesen. Itt is lehetőség van a COMPACT utasítás használatára, de nem javasolt.
Figyelem! Az egyes böngészők eltérhetnek listaértelmezésükben! A felsorolt opciók nem ismertek minden böngésző számára!
Mindezeken kívül használhatunk még könyvtárlistát és menülistát is. Ezen típusok a számozatlan ( unordered - rendezetlen ) lista speciális fajtái. A könyvtárlista a <DIR> taggel indul és </DIR> paranccsal zárul, míg a menülistát a <MENU> és a </MENU> utasítások keretezik. Ezek a normál számozatlan listától abban különböznek, hogy a könyvtárlista elemei 20 karakternél, a menülisták elemei pedig egy sorosnál nem lehetnek hosszabbak.
A listák ötödik fajtáját leíró listáknak nevezzük. Ezek a <DL> és a </DL> tagek közé kerülnek. A fejléc megadását a már ismert <LH> utasítás végzi. Az egyes elemeket a <DT> parancs vezeti be, a hozzájuk tartozó leírást a <DD> tag után kell beírnunk. A két utasítás egyike sem rendelkezik zárópárral. Az egyes listaelemek végét a leírást bevezető <DD> utasítás jelzi, ami a következő <DT> parancsig tart.


<html>
  <head>
   <title>Listák és a szövegtörzs formázása - Példa</title>

  </head>

<body bgcolor="black" text="lightyellow" link="lightblue" vlink="lightgreen" alink="red">
A normál szöveg színe a BODY tagben megadva.
<br><br>
<font face="arial" size="4" color="red">
FONT taggel formázott szöveg (méret, szín, betűtípus)
</font>
<br><br>
Normál szöveg <b>félkövéren</b>, <u>aláhúzva</u>, <i>döntve</i> és <s>áthúzva</s>.
<br><br>
3 m<sup> 3</sup> H<sub> 2</sub>O - <sup>felső index</sup> és <sub>alsó index</sub>
<br><br><br>
Rendezett lista kezdősorszámmal (34)
<ol type="1" start="34">
   <lh>Rendezett lista fejléce</lh>
   <li>Számozott listaelem
   <li>Számozott listaelem
   <ol type="A" start="5">
     <li>Számozott listaelem
     <li>Számozott listaelem
     <li>Számozott listaelem
   </ol>
   <li>Számozott listaelem
</ol>
<br><br>
Rendezett lista kezdősorszámmal (3)
<ol seqnum="3">
   <lh>Rendezett lista fejléce</lh>
   <li>Számozott listaelem
   <li>Számozott listaelem
   <li>Számozott listaelem
</ol>
<br>
Előző rendezett lista sorszámozásának folytatása
<ol continue>
   <lh>Rendezett lista fejléce</lh>
   <li>Számozott listaelem
   <li>Számozott listaelem
</ol>
<br>
Rendezetlen (számozatlan) lista
<ul type="square">
   <lh>Számozatlan lista fejléce</lh>
   <li>Számozatlan listaelem
   <li>Számozatlan listaelem
   <li>Számozatlan listaelem
   <ul warp="horiz">
     <lh>Beágyazott lista fejléce</lh>
     <li>Számozatlan listaelem
     <ul type="disc">
       <li>Számozatlan listaelem
       <li>Számozatlan listaelem
       <li>Számozatlan listaelem
     </ul>
     <li>Számozatlan listaelem
     <li>Számozatlan listaelem
   </ul>
   <li>Számozatlan listaelem
</ul>
<br>
Menülista
<menu>
   <lh>Menülista fejléce</lh>
   <li>Menülista eleme
   <li>Menülista eleme
   <li>Menülista eleme
</menu>
<br>
Könyvtárlista
<dir>
   <lh>Könyvtárlista fejléce</lh>
   <li>Könyvtárlista eleme
   <li>Könyvtárlista eleme
</dir>
<br>
Leíró lista
<dl>
   <lh>Leíró lista fejléce</lh>
   <dt>Első definiálandó elem
     <dd>Az első elem definíciója, amely lehet egy egysoros megjegyzés
     <br>vagy egy többsoros leírás
   <dt>Második definiálandó elem
     <dd>A második elem definíciója, amely lehet egy egysoros megjegyzés
     <br>vagy egy többsoros leírás
</dl>
<br>
Számozatlan lista formázott betűkkel
<ul>
   <lh><font color="green"><u>Listafejléc</u></font></lh>
   <li>1. elem
   <li><font size="4">2. elem</font>
     <ul>
       <li><i>1. alárendelt elem</i>
       <li><i>2. alárendelt elem</i>
     </ul>
   <li>3. elem
</ul>
<hr align="center" width="95%">
<br>
<font face="arial" size="3" color="red">
A listák formája eltérő böngészők esetén módosulhat!
</font>

</body>
</html>



 Példadokumentum 
 Következő fejezet 
 Vissza az előző oldalra 
 Vissza a főoldalra