E weboldal egy W3C dokumentum alapján készült.
Az eredeti dokumentum az alábbi címen található: http://www.w3.org/MarkUp/Guide/.

HTML alapok | Stílusok használata

Haladó megoldások

A HTML alapok után haladóbb megoldásokkal is megismerkedhetünk. A következőkben megtanulhatjuk, hogyan lehet:

• sortörést kikényszeríteni
• nem törhető szóközöket bevezetni
• különleges karaktereket használni
• oldalak közepére hivatkozni
• előformázott szövegeket használni
• képeket körülfuttatni szöveggel
• képeken belül klikkelhető részeket definiálni
• táblázatokat létrehozni
• egérérzékeny felületeket létrehozni és egyéb trükköket alkalmazni

Ajánlom a HTML Tidy alkalmazását a jelölések hibamentessé tételéhez.

Hogyan kényszeríthetünk ki sortörést?

Igaz, csak néhanapján, de szükségünk lehet sortörés kikényszerítésére. Ezt a br elem használatával tehetjük meg, például ha egy postai címet adunk meg:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

A br elemet sohasem kell lezárni. Azokat az elemeket, melyeknek nincs lezáró tag-jük, általában üres elemeknek nevezzük.

Nem törhető szóközök bevezetése

A böngészők a szöveget automatikusan tördelik a margón belül. A sortörések bárhova kerülhetnek, ahol szóközök vannak a jelölésben. Néha azt szeretnénk, ha a böngészőt meg tudnánk akadályozni abban, hogy két meghatározott szó között tördelje a szöveget. Ilyen lehet például egy márkanév, mondjuk a "Coca Cola". A trükk az   használata a szóköz helyén, például:

Az édes szénsavas italok, mint a Coca Cola,
világraszóló népszerűséget értek el.

Rossz gyakorlat a nem törhető szóközök ismétlése a szöveg igazításához. Ehelyett az igazítást stílusszabályokkal célszerű megadni.

Speciális karakterek használata

Hivatkozás a weblapok közepére

Képzeljük el, hogy írtunk egy hosszú weblapot, melynek tartalomjegyzéke valahol a dokumentum elejéhez közel van. Hogyan tudjuk a tartalomjegyzék egyes pontjait hivatkozásokká változtatni úgy, hogy ezek a megfelelő dokumentum-részre hivatkozzanak?

Tegyük fel, hogy minden rész egy címsorral kezdődik, például:

<h2>Helybeli éjszakai helyek</h2>

A címsort egy hiperhivatkozás potenciális céljává úgy tehetjük, hogy tartalmát a <a name=azonosito> .... </a> közé zárjuk.

<h2><a name="ejszakai-helyek">Helybeli éjszakai helyek</a></h2>

A "name" (név) attribútum azt a nevet határozza meg, mellyel azonosítani akarjuk a hivatkozási célt, ebben az esetben: "ejszakai-helyek". A tartalomjegyzék most már tartalmazhat egy hiperhivatkozást, mely ezt a nevet használja, például:

<ul>
  ...
  <li><a href="#ejszakai-helyek">
                  Helybeli éjszakai helyek</a></li>
  ...
</ul>

A # karaktert a cél neve előtt kell szerepeltetni.

Ezekre példa: az e weboldal elején lévő, az oldal egyes főbb témáira ugrató hivatkozások sora. Ld.: itt!

De ilyen lapon belúli linkelt ugrásra szolgál ez az alábbi nyíl-kép is:

Ha a cél egy másik dokumentumban van, akkor ennek a dokumentumnak a webcíme meg kell, hogy előzze a # karaktert. Például ha a dokumentum a "http://www.bath.co.uk/index.html" oldalon található, akkor a link így egészül ki:

<a href="http://www.bath.co.uk/index.html#ejszakai-helyek">
      Helybeli éjszakai helyek</a>

A jövőben hivatkozásokat már <a> elemek nélkül is definiálhatunk. Az új módszer sokkal egyszerűbb, mert az egyetlen dolgunk az id attribútum hozzáadása a címsorhoz, például:

<h2 id="ejszakai-helyek">Helybeli éjszakai helyek</h2>

Ez a módszer nem működik a 4. generációs és korábbi böngészőkkel, tehát óvatosan kell használnunk, mert még ezek a böngészők is használatban vannak! E probléma kiküszöbölésére egy megoldás a kettő módszer vegyítése, így:

<h2 id="ejszakai-helyek"><a name="ejszakai-helyek">
                Helybeli éjszakai helyek</a></h2>

Utóbbira a példa: ugrás a Bevezetés a HTML programozásba című oldal "Oldalaink képekkel érdekesebbek..." részéhez itt próbálható ki!

Előformázott szöveg

A web egyik előnye, hogy a szöveg automatikusan olyan sorokra tördelődik, amelyek az aktuális ablakmérethez igazodnak. Bizonyos esetekben jó lenne letiltani ezt az eljárást. Például ha programkód-mintákat akarunk szerepeltetni az oldalon. Ezt a pre elem használatával tehetjük meg. Például:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

Ami valahogy így jelenik meg:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

A szöveg- és háttérszínek stíluslappal vannak beállítva. Megjegyzendő, hogy minden sortörés és szóköz pontosan úgy jelenik meg, ahogy azok a HTML-ben szerepelnek. Kivételt képez közvetlenül a kezdő <pre> tag utáni és közvetlenül a lezáró </pre> tag előtti újsor, melyeket figyelmen kívül hagy a böngésző. Ez azt jelenti, hogy a következő két példa megjelenítése azonos:

<pre>előformázott szöveg</pre>

<pre>
előformázott szöveg
</pre>

Az előformázott szövegek megjelenítése általában azonos szélességű betűket tartalmazó betűtípussal történik. Ha definiálunk egy stílusszabályt a pre elemhez, egyes böngészők elfelejtik használni az azonos szélességű betűket, szükségessé téve ezzel a font-family (betűtípus-család) tulajdonság használatát. Például ha minden pre elemet zölddel akarunk kiiratni, definiálhatjuk az alábbi stílus-szabályt:

<style type="text/css">
  pre { color: green; background: white; font-family: monospace; }
</style>

Ha a szöveghez megadunk előtér-színt, tanácsos a háttérszínt is meghatározni. Ezzel megelőzhetjük, hogy a háttérszín nehezen megkülönböztethető az előtértől. Ahelyett, hogy a háttérszínt a pre elemhez definiáljuk, jobb megoldás, ha a body-ra tesszük ezt, például:

<style type="text/css">
  body { color: black; background: white; }
  pre { color: green; font-family: monospace; }
</style>

Képek körülfolyatása szöveggel

A HTML-lel mi dönthetünk, hogy minden kép az aktuális szövegsor részeként legyen kezelve, vagy a bal, illetve jobb margóhoz legyen igazítva. Ezt az align attribútummal szabályozhatjuk. Ha az align attribútum left-re van állítva, a kép a bal margóhoz igazodik. Ha right -ra van állítva, akkor a kép a jobb margóhoz igazodik. Például:

<p><img src="nap.jpg" alt="napfény grafika"
width="32" height="21" align="left"> Ez a szöveg a képet 
annak jobb oldalánál folyja körül.</p>

Ami így jelenik meg:

Ez a szöveg a képet annak jobb oldalánál folyja körül.

Ez egy másik példa ugyanerre e webportál könyvelés oldaláról vett képpel és szöveggel:

"Rendezzük az Európai Unióval export-import kapcsolatban álló ügyfeleink speciális ÁFA-bevallási kötelezettségét is - ezt a bevallás bonyolultságához igazodó áron vállaljuk."

A következő példa align="right"-ot használ

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="right"> Ez a szöveg a 
képet annak bal oldalánál folyja körül.</p>

ami így jelenik meg:

Ez a szöveg a képet annak bal oldalánál folyja körül.

Ez a másik példa ugyanerre e portál könyvelés oldaláról vett tartalommal:

"Rendezzük az Európai Unióval export-import kapcsolatban álló ügyfeleink speciális ÁFA-bevallási kötelezettségét is - ezt a bevallás bonyolultságához igazodó áron vállaljuk."

A megjelenítésnél kikényszeríthetjük, hogy a szöveg a kép alatt folytatódjon. Ehhez a <br clear=all> elemet használhatjuk, például:

<p><img src="nap.jpg" alt="napfény grafika"
width="32" height="21" align="left"> Ez a szöveg a 
képet annak jobb oldalánál folyja körül.<br clear="all">
Ez egy új sort kezd a körülfolyatott kép alatt.</p>

ami így jelenik meg:

Ez a szöveg a képet annak jobb oldalánál folyja körül.
Ez egy új sort kezd a körülfolyatott kép alatt.

És lássuk a már felhasznált másik példát - e webportál könyvelés oldaláról véve - ismét, de a legutóbbi megoldás szerint:

"Rendezzük az Európai Unióval export-import kapcsolatban álló ügyfeleink speciális ÁFA-bevallási kötelezettségét is - ezt a bevallás bonyolultságához
igazodó áron vállaljuk."

Klikkelhető részek a képeken belül

A következő kép weblapok egy csoportjának térképeként viselkedik. A körökre kattintva a megfelelő oldalra jutunk.

Ennek forrása:

<p align="center">
   <img src="pages.gif" width="384" height="245"
      alt="oldaltérkép" usemap="#sitemap" border="0">
   <map name="sitemap">
      <area shape="circle" coords="186,44,45" 
         href="wk02_html_bevezetes_hu.html" alt="HTML alapok">
      <area shape="circle" coords="42,171,45" 
         href="wk02_html_stilusok_hu.html" alt="Stílusok használata">
      <area shape="circle" coords="186,171,45"
         alt="Honlap-tervezés">
      <area shape="circle" coords="318,173,45"
         href="wk02_html_haladoknak_hu.html" alt="HTML haladóknak">
   </map>
</p>

Az img elem src attribútuma a "pages.gif" nevű képet határozza meg. A usemap attribútum egy map elemre hivatkozik. Egy webcímet használva teszi ezt, a # karakter után. A border attribútum "0"-ra van állítva, elrejtve ezzel a kép körül levő kék keretet.

A map elem határozza meg, a képen melyik részek viselkedjenek hiperhivatkozásként. A name attribútumhoz meg van adva egy usemap attribútum is, és nagyon hasonlóan viselkedik, mint az <a> elem name attribútuma. Gyakorlatilag a map elemnek ugyanabban a fájlban kell lennie, mint az img elemnek.

Az area elem arra használatos, hogy definiál a képen egy részt és összeköti azt egy webcímmel. A shape attribútum megadja, hogy a terület "rect", "circle" vagy "poly" (rect-rectangle = téglalap; circle = kör; poly-polygon = sokszög). A coords attribútum megadja a terület koordinátáit, az alak függvényében.

• rect: bal-x, felső-y, jobb-x, alsó-y
• circle: középpont-x, középpont-y, sugár
• poly: x₁,y₁, x₂,y₂, ... x_n,y_n

A felső bal képpont úgy lesz figyelembe véve, mint a kép kezdete (ahol mind az x, mind az y 0), x jobbra növekszik és y lefelé. A legtöbb képmanipuláló eszköz lehetővé teszi, hogy a kép bármely adott pontjának koordinátáit megtudjuk.

Ha kettő vagy több definiált képrész átfedi egymást, a dokumentumban először előforduló képrész-definiáló elem elsőbbséget élvez (pl. a felhasználói bemenetre érzékeny). Olyan összetett alakoknál, mint egy évgyűrű, egy terület egy részét inaktívvá tehetjük úgy, hogy egy másik területtel lefedjük. Ez a másik terület a nohref attribútumot használja, például:

      <area shape="circle" coords="186,44,50" nohref>
      <area shape="circle" coords="186,44,100" 
         href="wk02_html_bevezetes_hu.html" alt="HTML alapok">

ahol az első kör egy inaktív képrészt hoz létre a második area elemmel létrehozott nagyobb körön belül. Hogy legyen valami hatás, az inaktív alaknak elöl kell szerepelnie, különben az aktív alak elrejti azt.

Miért kell megadni az alt attribútumot?

Az alt attribútum az area elemen egy szövegcímkével látja el a linket. Enélkül a kép-térkép elérhetetlen az olyanok számára, akik nem láthatják a képet.

Még egy példa a klikkelhető részekkel rendelkező képekre:

További példa a klikkelhető részekkel rendelkező (azaz térkép jellegű) képekre e portálon itt található.

Táblázatok

A táblázatok funkciója a HTML fájlban

A HTML fájlban táblázatokat

1. adatok sorokba és/vagy oszlopokba rendezett bemutatására, vagy
2. szövegeknek és/vagy képeknek a képernyőn
   oszlopokba rendezett (hasábos tagolású) megjelenítésére, vagy
3. a képernyőn díszes keret megjelenítésére

szoktak használni.

Az 1. pontbeli esetre álljon itt egy egyszerű példa:

Ennek forrása a HTML fájlban az alábbi:

<table border="1">
<tr><th>Év</th><th>Eladások</th>
</tr>
<tr><td>2000</td><td>18M Ft</td></tr>
<tr><td>2001</td><td>25M Ft</td></tr>
<tr><td>2002</td><td>36M Ft</td></tr>
</table>

A 2. pontbeli eset egy egyszerű példja a következő:

Ennek a "láthatatlan" táblázatnak a forrása a HTML fájlban az alábbi:

<center>
<table border="0" cellpadding="10">

<tr>
<td>Bemutatkozás</td>
    <td>Székhelyünk térképen</td>
</tr>

<tr>
<td>Szolgáltatások</td>
    <td>Ügyfélfogadási rend</td>
</tr>

<tr>
<td>Elérhetőség</td>
    <td>Webtérkép</td>
</tr>

<tr>
<td>Látogatói statisztika</td>
    <td>Webkikötő hasznos linkekkel</td>
</tr>
</table>
</center>

Hogy a 2. pontbeli példa valóban egy táblázattal két hasábba rendezett szöveg, azt azonnal láthatjuk, ha a forrásbeli <table border="0" ... > "border" tulajdonságának értékét 0-ról 1-re állítjuk. Ekkor a kép ilyen:

Ez egyben példa a 3. esetre is, amikor a szövegelemek táblázatba foglalása nem csak annak rendezett tagolását, hanem a - mintegy - domború keret megjelenítésével annak díszítését is szolgálja.

És ilyen díszítő funkciója van annak az egyetlen cellából álló táblázatnak is, amely ennek a weboldalnak - melynek szövegét épp most olvassuk - a szürke szöveghátterét keretezi. (Ha megnézzük az oldal forrását ez jól látható.)

Példaként említem még, hogy díszítő jellegű látható, illetve láthatatlan táblázat "tartja helyén" a tartalom egyes részeit e portál kezdőlapján is.

És egy más webhelyről vett példa látható itt arra, hogy a láthatatlan táblázat hogyan rendezi hasábokba a képeket és a hozzájuk tartozó szöveget. Ez a lap forrásában ellenőrizhető.

A táblázatok alapelemei és fő jellegzetességeik

Amint láttuk tehát a táblázatok egy vagy több táblacellát tartalmaznak.

A táblázatokat széthúzhatjuk, hogy kitöltsék a margók közötti részt, megadhatunk velük egy fix szélességet vagy a böngészőre hagyhatjuk, hogy az automatikusan méretezze a táblázatot annak tartalmához.

A table elem a táblázat konténereként viselkedik. A border attribútum a keretszélességet adja meg pixelben. A tr elem az egyes táblázatsorok konténereként viselkedik. A th és a td elemek a címsorok, illetőleg az adatcellák konténerei (th - table heading = táblázat-címsor; td - table date cells = táblázat-adatcella).

"Cellatöltés" (Cell Padding)

Minden cellának növelhetjük a "töltését" a cellpadding attribútummal. (A Cell Padding a cellákon belül a cella tartalma és a cella széle közötti távolságot jelenti) Például, a töltés 10 pixelre történő beállítása:

<table border="1" cellpadding="10">

ennek eredménye:

Cella-térköz (Cell Spacing)

A cellspacing attribútum a cellák közötti távolságot adja meg. A cella-térköz beállítása 10-re:

<table border="1" cellpadding="10" cellspacing="10">

ennek eredménye:

Táblázat-szélesség

A táblázat szélességét a width attribútummal adhatjuk meg. A megadott érték egyaránt lehet képpontokban vagy százalékban (utóbbi a bal és jobb margó közötti hely százalékában értendő). Például a szélesség beállítása a margók 80%-ára:

<table border="1" cellpadding="10" width="80%">

ennek eredménye:

Szöveg igazítása cellákon belül

Alapból a böngészők a címsor-cellákat (th) középre, az adat-cellákat (td) balra igazítják. Az igazítást megváltoztathatjuk az align attribútummal, melyet minden cellához megadhatunk vagy a sorhoz is (tr elem). A "left", "center" vagy "right" értékekkel használható:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Year</th><th>Sales</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>

a következő eredménnyel:

A valign attribútum a cellatartalom függőleges igazításában hasonló szerepet játszik. A "top", "middle" vagy "bottom" értékekkel használható, és minden cellához vagy sorhoz megadható. Alapértelmezésben a címsor-cellák (th) pozíciója a cella közepe, míg az adat-cellák tartalma a cella felső részéhez igazodik.

Üres cellák

Táblázat-megismerésünkben hirtelen fordulatot jelent a böngészők üres cella-kezelése, hasonlítsuk össze ezt:

ezzel

Az első eltűnik, ha egy cella üres:

<td></td>

Ezt megelőzendő, szúrjunk be egy nem törhető szóközt:

<td>&nbsp;</td>

Több sornyi vagy oszlopnyi cellák

Bővítsük ki fenti példánkat az északi és déli régiók eladásaival:

Az "Év" címsor most két sornyi, míg az "Eladások" címsor három oszlopnyi. Ezt úgy értük el, hogy beállítottuk a rowspan, illetve a colspan attribútumokat. Ennek forrása a következő:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Év</th><th colspan="3">Eladások</th>
</tr>
<tr align="center"><th>Észak</th><th>Dél</th>
<th>Összesen</th></tr>
<tr align="center"><td>2000</td><td>10M Ft</td>
<td>8M Ft</td><td>18M Ft</td>
</tr>
<tr align="center"><td>2001</td><td>14M Ft</td>
<td>11M Ft</td><td>25M Ft</td>
</tr>
</table>

Ezt leegyszerűsíthetjük, ha kihasználjuk az az előnyt, hogy a böngészők nem igénylik a táblázat-cellák és -sorok lezáró tag-jeit:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Év<th colspan="3">Eladások
<tr align="center"><th>Észak<th>Dél<th>Összesen
<tr align="center"><td>2000<td>10M Ft<td>8M Ft<td>18M Ft
<tr align="center"><td>2001<td>14M Ft<td>11M Ft<td>25M Ft
</table>

Megjegyzés: az "Év" címsor két sornyi, az első th elem a második sorban a második és nem az első oszlopban jelenik meg.

Keret nélküli táblázatok

Ezek a táblázatok általában arra szolgálnak, hogy az oldalnak kockás stílusú megjelenést kölcsönözzenek. Az egyetlen dolog, amire szükség van, a border="0" és a cellspacing="0" hozzáadása a table elemhez:

Ezt az alábbi forrással értük el:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Év</th><th>Eladások</th>
</tr>
<tr><td>2000</td><td>18M Ft</td></tr>
<tr><td>2001</td><td>25M Ft</td></tr>
<tr><td>2002</td><td>36M Ft</td></tr>
</table>

Ha elhagyjuk a cellspacing attribútumot, egy kis rést kapunk a cellák között, mint itt látható:

Táblázataink színezése

Ez az oldal egy stíluslapot használ a táblázatok háttérszínének beállításához, különböző színt megadva a címsor- és az adatcelláknak. Az általam használt stílusszabályok a következők:

table {
  margin-left: -4%;
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

Az utolsó két sor vörös/zöld/kék értékekkel adja meg a th és td cellák háttérszínét. Az értékek a 0-255 tartományban lehetnek (a 255 a teljesen telített színt jelenti).

A háttérszín beállításának másik módja a bgcolor attribútum használata. Ezt a megoldást a legtöbb böngésző preferálja, és nem szükséges hozzá a stíluslap-támogatottság. Az első lépés megállapítani a használni kívánt szín vörös, zöld és kék komponenseinek hexadecimális értékét. Egy konvertáló található a stíluslapokról szóló dokumentumban.

<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <th bgcolor="#CCCC99">Év</th>
    <th bgcolor="#CCCC99">Eladások</th>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2000</td>
    <td bgcolor="#FFFF66">18M Ft</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2001</td>
    <td bgcolor="#FFFF66">25M Ft</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2002</td>
    <td bgcolor="#FFFF66">36M Ft</td>
  </tr>
</table>

Táblázataink elérhetővé tétele

Ha valami miatt nem láthatjuk a táblázatot, meglehetősen nehéz megérteni, miről is szól az. Első lépésben olyan információkat mellékelünk, melyek leírják a táblázat célját és struktúráját. A caption elem lehetővé teszi felirat készítését, melyet mind a táblázat fölé, mind a táblázat alá elhelyezhetünk. A caption elemet az első sor tr eleme elé kell elhelyezni.

mely az alábbi forrás eredménye:

<table border="1" cellpadding="10" width="80%">
<caption>Tervezett eladási bevételek éves bontásban</caption>
<tr align="center">
  <th>Év</th><th>Eladások</th>
</tr>
<tr align="center"><td>2000</td><td>18M Ft</td></tr>
<tr align="center"><td>2001</td><td>25M Ft</td></tr>
</table>

Ugyanez a táblázat align="bottom"-os caption megadással:

A table elem summary attribútuma arra szolgál, hogy leírjuk a táblázat struktúráját az olyanoknak, akik nem látják a táblázatot. Például: "az első oszlop az évet adja meg, a második az adott évi bevételeket".

<table summary="az első oszlop az évet adja meg, a második 
az adott évi bevételeket">

A címsor- és az adatcellák közötti kapcsolat meghatározása

Ha egy táblázat hanggal vagy Braille írással vagy megjelenítve, hasznos, ha be lehet azonosítani, melyik címsorok írják le az egyes cellákat. Például egy akusztikai böngésző lehetővé teszi, hogy felfelé, lefelé, balra és jobbra celláról cellára mozogjunk, úgy, hogy a megfelelő címsorok beszélnek minden cella előtt.

Ennek eléréséhez magyarázatokkal kell ellátni a címsor- és/vagy adatcellákat. A legegyszerűbb megoldás, ha a scope attribútumot hozzáadjuk a címsorcellákhoz. Az alábbi értékekkel használható:

• row: az aktuális cella címsor-információt ad az őt tartalmazó sor nagy részének.
• col: az aktuális cella címsor-információt ad az őt tartalmazó oszlop nagy részének.

Ezt alkalmazva a példa-táblázatunkra:

<table border="1" cellpadding="10" width="80%">
<caption>Tervezett eladási bevételek éves bontásban</caption>
<tr align="center">
  <th scope="col">Év</th>
  <th scope="col">Eladások</th>
</tr>
<tr align="center"><td>2000</td><td>18M Ft</td></tr>
<tr align="center"><td>2001</td><td>25M Ft</td></tr>
</table>

Összetettebb táblázatoknál használhatjuk a headers attribútumot egyedi adatcellákon, melyekkel címsorcellák azonosítóinak szóközökkel tagolt listáját készíthetjük el. Minden ilyen címsorcellának tartalmaznia kell egy id attribútumot egy azonosítóval.

Utolsó pontban említjük, hogy érdemes gondokodni az abbr attribútum használatán, mellyel hosszú címsorokhoz adhatunk egy rövidítést. Így sokkal jobban hallható a minden cellához megadott címsorok listája, például:

<th abbr="W3C">World Wide Web Konzorcium</th>

Egérérzékeny felületek és egyéb trükkök

Egy kis JavaScript nagyon sokat segíthet oldalaink életre keltésében. Megmutatom Önnek, hogyan hozhatunk létre "egérérzékeny felületeket", ahol egy hivatkozás megjelenése megváltozik, ha az egeret fölé mozdítjuk. Azt is megtanulhatja, hogyan hozhatunk létre ismétlődő reklámcsíkokat, melyek segítenek látogatóinkat szponzoruk oldalára eljutni.

Egérérzékeny felületek

Általában egy egérérzékeny felület egy olyan képet tartalmaz, mely hiperhivatkozásként szolgál (ennek neve a magyar szakzsargonban "forró pont"). Amikor az egérkurzor a kép fölött van, annak megjelenése megváltozik, így hívva fel a hivatkozásra a figyelmet. Például megjelenítünk egy izzás-effektust, árnyékot vet a szöveg vagy egyszerűen csak megváltoztatjuk a háttérszínt. Itt van egy példa:

<script type="text/javascript">
if (document.images)
{
    image1 = new Image;
    image2 = new Image;
    image1.src = "enter1.bmp";
    image2.src = "enter2.bmp";
}

function chgImg(name, image)
{
    if (document.images)
    {
        document[name].src = eval(image+".src");
    }
}
</script>

...

<a href="/" onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'><img name="enter"
src="enter1.bmp" border="0" alt="Lépj be, ha mersz!"></a>

és itt látható, hogyan is néz ki ez ...

Az itt felhasznált képekhez hasonlóakat bármely ingyenes rajzolóprogrammal is el lehet készíteni. És a Weben sok ingyenes képet is találhatunk.

Dinamikus reklámképek készítése

Ha weblapunknak több támogatója is van, használhatunk egy olyan kép-hivatkozást, mely ciklikusan felvonultatja a támogatókat. Az első lépésben minden támogatónak létre kell hozni egy képet. Minden képnek ugyanakkorának kell lennie. A képnek és a weblapoknak adott URL-ek kicserélődnek az adImages és adURLs nevű tömbökkel, melyek a script elején lettek definiálva. A hivatkozás img elemét a tömb első elemére kell állítani. A ciklust a body elem onload eseményét felhasználva lehet elindítani.

<html>
<head>
<title>ismétlődő reklámcsíkok</title>
<script type="text/javascript">
if (document.images)
{
    adImages = new Array("/hosts/mit.gif",
                "/hosts/inria.gif", "/hosts/keio.gif");
    adURLs = new Array("www.lcs.mit.edu",
                "www.inria.fr", "www.keio.ac.jp");
    thisAd = 0;
}

function cycleAds()
{
    if (document.images)
    {
        if (document.adBanner.complete)
        {
            if (++thisAd == adImages.length)
                thisAd = 0;

            document.adBanner.src = adImages[thisAd];
        }
    }

    // váltás a következő támogatóra minden 2 másodpercben
    setTimeout("cycleAds()", 2000);
}

function gotoAd()
{
    document.location.href = "http://" + adURLs[thisAd];
}
</script>
</head>
<body onload="cycleAds()">
...

<a href="javascript:gotoAd()"><img name="adBanner"
src="/hosts/mit.gif" border="0" alt="Támogatóink"></a>

Támogatóink:

Megjegyzés: ajánlott megbizonyosodni róla, hogy az összes kép ugyanolyan széles és ugyanolyan magas. Egy másik lehetőség, hogy megadjuk az img elem width és height attribútumait, így biztosítva, hogy minden kép ugyanakkora méretben jelenjen meg.

Mi a teendő, ha a scripteket nem támogatja valamely böngésző?

A noscript elem tartalma csak akkor jelenik meg, ha a böngésző nem támogatja a scripteket. Ezt akkor kell használnunk, ha olyan felhasználóknak is szeretnénk biztosítani az információ elérését, akik történetesen nem rendelkeznek scriptet támogató böngészővel. Tegyük fel, hogy támogatóinkra való hivatkozásainkat szövegként szeretnénk elérhetővé tenni:

<noscript>
Támogatóink: <a href="http://www.lcs.mit.edu/">MIT</a>,
<a href="http://www.inria.fr/">INRIA</a>, and
<a href="http://www.keio.ac.jp/">Keio University</a>.
</noscript>

A scriptek használatáról számos szabadon felhasználható forrás áll rendelkezésre, melyeket a legtöbb keresőgéppel egyszerűen fellelhetünk.

További információk

A W3C HTML 4.0 ajánlása a HTML szerzői specifikációja, bár ez egy technikai specifikáció. Egy kevésbé technikai információforrás lehet, ha beszerez egyet a sokféle HTML-ről szóló könyv közül, például a "Raggett on HTML 4" címűt, melyet az Addison Wesley adott ki 1998-ban. Az XHTML 1.0 jelenleg egy W3C Ajánlás.

HTML alapok | Stílusok használata