| Vissza a dokkokhoz |



Budapesti helyi idő

(Kereséshez használja a "keresés ezen a lapon" menüpontot vagy a [Ctrl+F] billenytűkombinációt!)

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/.

Haladó megoldások

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

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.

vissza a tartalom felsorolásához

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 &nbsp; használata a szóköz helyén, például:

Az édes szénsavas italok, mint a Coca&nbsp;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.

vissza a tartalom felsorolásához

Speciális karakterek használata

Szerzői jogi megjegyzésekben vagy védjegyek megadásánál elterjedt a megfelelő jelölések használata:

a jel jelentése megadása
a HTML fájlban
példa képernyőn
megjelenő alkalmazására
© Szerzői jog jele &copy; Copyright © 1999 W3C
® Bejegyzett védjegy &reg; MagiCo ®
Védjegy &#8482; vagy &trade; Webfarer™

Megjegyzés: a HTML 4.0-ban definiálva van egy &trade; a védjegy jelölésére, de ez nem olyan széles körben támogatott megadás, mint az &#8482;

Sok más hasznos jelölést is alkalmazhatunk:

a szimbólum
jelentése
megadása
HTML fájlban
megjelenés
a képernyőn
Kisebb, mint &lt; <
Nagyobb, mint &gt; >
AND jel &amp; &
nem törhető szóköz &nbsp;
em dash &#8212;
quotation mark &quot; "

A Latin-1 karakterkészletben vannak ékezetes és egyéb szimbólumok is:

&nbsp; &#160; Ð &ETH; &#208;
¡ &iexcl; &#161; Ñ &Ntilde; &#209;
¢ &cent; &#162; Ò &Ograve; &#210;
£ &pound; &#163; Ó &Oacute; &#211;
¤ &curren; &#164; Ô &Ocirc; &#212;
¥ &yen; &#165; ő &Otilde; &#213;
¦ &brvbar; &#166; Ö &Ouml; &#214;
§ &sect; &#167; × &times; &#215;
¨ &uml; &#168; Ø &Oslash; &#216;
© &copy; &#169; Ù &Ugrave; &#217;
ª &ordf; &#170; Ú &Uacute; &#218;
« &laquo; &#171; Û &Ucirc; &#219;
¬ &not; &#172; Ü &Uuml; &#220;
­ &shy; &#173; Ý &Yacute; &#221;
® &reg; &#174; Þ &THORN; &#222;
¯ &macr; &#175; ß &szlig; &#223;
° &deg; &#176; à &agrave; &#224;
± &plusmn; &#177; á &aacute; &#225;
² &sup2; &#178; â &acirc; &#226;
³ &sup3; &#179; ã &atilde; &#227;
´ &acute; &#180; ä &auml; &#228;
µ &micro; &#181; å &aring; &#229;
&para; &#182; æ &aelig; &#230;
· &middot; &#183; ç &ccedil; &#231;
¸ &cedil; &#184; è &egrave; &#232;
¹ &sup1; &#185; é &eacute; &#233;
º &ordm; &#186; ê &ecirc; &#234;
» &raquo; &#187; ë &euml; &#235;
¼ &frac14; &#188; ì &igrave; &#236;
½ &frac12; &#189; í &iacute; &#237;
¾ &frac34; &#190; î &icirc; &#238;
¿ &iquest; &#191; ï &iuml; &#239;
À &Agrave; &#192; ð &eth; &#240;
Á &Aacute; &#193; ñ &ntilde; &#241;
 &Acirc; &#194; ò &ograve; &#242;
à &Atilde; &#195; ó &oacute; &#243;
Ä &Auml; &#196; ô &ocirc; &#244;
Å &Aring; &#197; ő &otilde; &#245;
Æ &AElig; &#198; ö &ouml; &#246;
Ç &Ccedil; &#199; ÷ &divide; &#247;
È &Egrave; &#200; ø &oslash; &#248;
É &Eacute; &#201; ù &ugrave; &#249;
Ê &Ecirc; &#202; ú &uacute; &#250;
Ë &Euml; &#203; û &ucirc; &#251;
Ì &Igrave; &#204; ü &uuml; &#252;
Í &Iacute; &#205; ý &yacute; &#253;
Î &Icirc; &#206; þ &thorn; &#254;
Ï &Iuml; &#207; ÿ &yuml; &#255;

Használhatunk numerikus karakter-megadásokat is a Unicode-ban definiált görög betűkhöz és a matematikai szimbólumokhoz. További részletekhez tekintse meg a HTML 4 specifikációban található listát! Megjegyzendő, hogy ez a karakter-megadás nem ismert a 4-es Netscape-ben.

vissza a tartalom felsorolásához

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:

vissza a tartalom felsorolásához

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!

vissza a tartalom felsorolásához

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>
vissza a tartalom felsorolásához

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:

napfény grafika 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:

napfény grafika 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:

napfény grafika 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."

vissza a tartalom felsorolásához

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.

honlaptérkép HTML alapok Stílusok használata Honlap-tervezés HTML haladóknak

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: x1,y1, x2,y2, ... xn,yn

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ó.

vissza a tartalom felsorolásához

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:

Év Eladások
2000 18M Ft
2001 25M Ft
2002 36M Ft

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ő:

BemutatkozásSzékhelyünk térképen
SzolgáltatásokÜgyfélfogadási rend
ElérhetőségWebtérkép
Látogatói statisztikaWebkikötő hasznos linkekkel

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:

BemutatkozásSzékhelyünk térképen
SzolgáltatásokÜgyfélfogadási rend
ElérhetőségWebtérkép
Látogatói statisztikaWebkikötő hasznos linkekkel

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ő. vissza a tartalom felsorolásához

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).

vissza a tartalom felsorolásához

"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:

Év Eladások
2000 18M Ft
2001 25M Ft
2002 36M Ft
vissza a tartalom felsorolásához

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:

Év Eladások
2000 18M Ft
2001 25M Ft
2002 36M Ft
vissza a tartalom felsorolásához

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:

Év Eladások
2000 18M Ft
2001 25M Ft
2002 36M Ft
vissza a tartalom felsorolásához

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:

Év Eladások
2000 18M Ft
2001 25M Ft
2002 36M Ft

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.

vissza a tartalom felsorolásához

Ü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:

Év Eladások
2000 18M Ft
2001 25M Ft
2002 36M Ft
2003

ezzel

Év Eladások
2000 18M Ft
2001 25M Ft
2002

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>
vissza a tartalom felsorolásához

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:

Év Eladások
Észak Dél Összesen
2000 10M Ft 8M Ft 18M Ft
2001 14M Ft 11M Ft 25M Ft

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.

vissza a tartalom felsorolásához

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:

Év Eladások
2000 18M Ft
2001 25M Ft
2002 36M Ft

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ó:

Év Eladások
2000 18M Ft
2001 25M Ft
2002 36M Ft
vissza a tartalom felsorolásához

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>
vissza a tartalom felsorolásához

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.

Tervezett eladási bevételek éves bontásban
Év Eladások
2000 18M Ft
2001 25M Ft

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:

Tervezett eladási bevételek éves bontásban
Év Eladások
2000 18M Ft
2001 25M Ft

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>
vissza a tartalom felsorolásához

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.

vissza a tartalom felsorolásához

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 ...

Lépj be, ha mersz!

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.

vissza a tartalom felsorolásához

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:

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.

vissza a tartalom felsorolásához

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.

vissza a tartalom felsorolásához

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.







| Vissza a dokktopra | Vissza a webkikötő elejére | Vissza a kezdőlapra | Webtérképre |

Figyelem! Ha valamelyik URL (webcím) tartósan nem elérhető, köszönettel vesszük, ha jelzi.


 e-mail: ginprofessional@mail.datanet.hu
Made: 2004.05.30. © GIN Professional Kft (www.ginprofessional.hu) / Gulyás István. All rights reserved.

 
  Látogatók száma:       




Budapesti helyi idő




Kattints a hirdetésre
Kattints ide



 










  


LINKTAR.HU eXTReMe Tracker
abo-service24.de

xtrastats free counter