HTML alapok - Elemek, címkék, attribútumok

A HTML (angolul: HyperText Markup Language, azaz hiperszöveges leírónyelv) egy leírónyelv, amivel weboldalakat tudunk készíteni.

A HTML valójában három nyelvi elemből építkezik: vannak benne elemek, címkék (angolul: tag, ejtse: teg) és attribútumok. Lássuk, hogyan néz ki a HTML kód!

<h1>Ez egy főcím</h1>

          <h2>Ez egy alcím</h2>

          <p>Ez egy bekezdés, ami után egy számozatlan lista következik.</p>

          <p>Ez még egy bekezdés.</p>

          <ul>

            <li>első listaelem</li>

            <li>második listaelem</li>

            <li>harmadik listaelem</li>

          </ul>

          <p>Ez egy link: <a href="http://www.w3.org/" title="A W3C honlapja">A W3C honlapja!</a><br>

            Egy bekezdésen<br>

            belül lehetnek<br>

            sortörések.</p>

        <p><img src="acid2.png" width="168" height="168" alt=":-)"></p>

A fenti kód így jelenik meg a böngészőben.

A legelső sor egy főcímet definiál, ami alapesetben nagyobb betűvel, vastagon szedve jelenik meg a böngészőben. Az egész <h1>Ez egy főcím</h1> sort nevezzük elemnek. A <h1> a nyitó címke (tag), a </h2> pedig a záró címke. A főcím szövege a nyitó- és a záró címke között áll. Egy címke tehát a kisebb (<) és a nagyobb (>) jelek között áll. A zárócímkét úgy tudjuk jelezni, hogy rögtön a kezdő < jel után egy / (perjelet) teszünk.

Az <ul>...</ul> címkék egy listát definiálnak, a <li>...</li> címkék pedig egy listaelemet fognak közre. A lista definiálásából látható, hogy a címkék egymásba ágyazhatók. Arra figyeljünk, hogy mindig azt a címkét kell előbb lezárni, amelyiket legutoljára nyitottunk ki.

Az <a>...</a> címkék közé írt szöveg linkként fog viselkedni, azaz a böngésző kék színnel aláhúzza, és a rajta való kattintáskor egy másik weboldalra tudunk eljutni. Azonban ehhez azt is meg kell mondanunk, hogy pontosan melyik weboldalra mutasson a link, különben honnan tudná a böngésző, hogy melyik oldalt kell betöltenie? Erre való a href nevű attribútum. Az attribútumokat mindig a kezdő címkébe kell írni, ha több attribútum van, akkor szóközzel választjuk el őket egymástól.

Az attribútum áll a nevéből, ez most a href, és az értékéből, a név és az érték közé egyenlőségjelet kell tenni. Az attribútum értékét pedig írógépi idézőjelek (" ") közé kell írni.

Az <a> címke tartalmaz egy másik attribútumot is, ezért a két attribútum szóközzel van elválasztva egymástól. A title attribútum értéke egy szöveg, ami akkor fog megjelenni, ha az egérmutatót a link felett pihentetjük; ez egyfajta segédszöveg, hogy merre is mutat a link.

tartalom" width="430" height="192">

<címke attribútum1="érték" attribútum2="érték">tartalom</címke>

Ezután következik a <br> címke, ami egy sortörést okoz. Ez egy úgynevezett üres elem, mert nem kell közé semmilyen szöveget írni. A <h1>...</h1> címkék egy szövegre vonatkoztak, míg a <br> egyszerűen csak van, nem vonatkozik semmilyen szövegre, ezért hívjuk üres elemnek. Ilyenkor a címke úgy viselkedik, mint egy nyitó címke, és nincsen lezáró párja.

Az üres elemeknek is lehetnek attribútumaik, ezeket ugyanúgy kell megadni, mint a nyitó címkéknél. Ezt rögtön láthatjuk is az <img> címkénél. Üres elem, mert nincsen záró címkéje, és nem fog közre semmilyen szöveget, csak egy képet szúr be. Az src a kép helyét jelöli meg. A width a kép szélessége, a height pedig a magassága. Az alt egy alternatív szöveget jelöl, amit akkor ír ki a böngésző, ha valamiért nem tudja megjeleníteni a képet. Egy üres elem általános szintaxisa:

<címke attribútum1="érték" attribútum2="érték">

A címkék és az attribútumok neveit kisbetűvel kell írni!

Amit minden HTML dokumentumnak tartalmaznia kell

A fenti példa csak egy része volt egy HTML oldalnak, egy teljes HTML oldal ennél többet tartalmaz.

A feladatunk az lesz, hogy írassuk ki a képernyőre a klasszikus „Helló világ!” szöveget. Ehhez az alább látható kódszöveget kell beírni kedvenc szövegszerkesztőnkbe (az ajánlott eszközt lásd az előző fejezetben), majd elmenteni művünket index.html fájlnévvel és kiterjesztéssel! Ne ijedjünk meg a példától, ténylegesen a <p>Helló világ!</p> rész jeleníti meg a kívánt szöveget. A körülötte lévő kód minden weboldalban meg kell, hogy jelenjen, ezért új weboldal írásakor egyszerűen ki kell másolnunk, majd beillesztenünk.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

          <html lang="hu">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          <title>A weboldal címét ne felejtsük ki!</title>

          </head>

          <body>

          <p>Helló világ!</p>

          </body>

        </html>

Ez a lehető legegyszerűbb HTML dokumentum, minden új weboldal készítésekor ezzel a szöveggel kell kezdenünk szóról szóra. Nem kell megijedni attól, hogy kicsit bonyolultnak tűnik, mert egyszerűen csak ki kell másolni és beilleszteni weboldalunk kódjának írásakor, még megjegyezni sem kell!

Valójában nem kötelező használni sem a html, sem a head, sem a body elemet, ezek elhagyhatók. Azonban praktikus kiírni őket, így áttekinthetőbb lesz az oldalunk.

Sőt HTML-ben nem is kell lezárni mindig a címkéket, illetve nagybetűvel is írhatjuk őket, továbbá nem kell mindig idézőjelbe tenni az attribútumok értékét. Szintén érdemes azonban ezeket a lehetőségeket elkerülni, és úgy használni a nyelvi elemeket, ahogyan ebben a leckében látjuk!

Menjünk szépen sorban az egyes sorokon!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ez az úgynevezett DTD (Document Type Definition = dokumentumtípus meghatározás). Arról a következő fejezetben lesz szó, hogy pontosan miért kell ez. Most jegyezzük meg, hogy ezzel a sorral indítsuk a HTML oldalunkat.

<html lang="hu">

          ...

        </html>

Az egész weboldalt a html elem fogja közre. A html címke lang attribútumával tudjuk megadni a weboldal elsődleges nyelvét, ami most hu, tehát magyar. Ha angolul írnánk, akkor a lang értéke en lenne.

A nyelvet nem kötelező megadni, de ajánlott, mert:

A keresőket segítjük vele. Egy keresőben (pl. Google) lehet választani a magyar nyelvű oldalakon vagy az egyéb nyelvű oldalakon való keresés között. Mivel beállítottuk a weboldalaink nyelvét, a kereső könnyebben fogja a magyar nyelvű oldalak közé sorolni őket.
Weboldalaink akadálymentesítése céljából. Aki nem látja a képernyőt, az képernyőfelolvasót használ, aminek tudnia kell, milyen nyelven olvasson fel egy weboldalt.

Minden esetben, amikor a fő nyelvtől eltérő nyelvet használunk, akkor ezt külön jelezni kell a lang attribútummal:

<p>Tudtad, hogy a <span lang="en">The quick brown fox jumps over the lazy dog</span> mondat tartalmazza az angol ábécé összes betűjét?</p>

Ezután következik dokumentumunk fejléce a <head>...</head> címkék között, ami nem jelenik meg a böngészőben, de fontos adatokat tartalmaz a dokumentum egészére vonatkozólag.

<head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          <title>A weboldal címét ne felejtsük ki!</title>

        </head>

Az első sor a karakterkódolást, a második a weboldal címét határozza meg. A karakterkódolásról bővebben a függelékben találhatunk leírást.

A charset=utf-8 részlet UTF-8-asra állítja be a kódolást. Az viszont egy dolog, hogy mi itt mit állítunk be, másik dolog, hogy ténylegesen milyen kódolással menti el a számítógép a HTML fájlt! Ezért nagyon fontos, hogyha beállítjuk az UTF-8 kódolást, akkor a szövegszerkesztő vagy weblapszerkesztő programban is állítsuk be, hogy a fájlainkat az UTF-8 kódolást használva mentse el és nyissa meg. A további példákban mindig UTF-8 kódolást fogunk használni.

<title>A weboldal címét ne felejtsük ki!</title>

Ez a sor azt mondja a böngészőnek, hogy a honlapunk címe a „A weboldal címét ne felejtsük ki!” szöveg legyen, ez jelenik meg a böngészőnk ablakának a címsorában.

A cím nagyon fontos része a weboldalnak, ezt mindig meg kell adni! Csak betűket, számokat, vagy különleges karaktereket (később lesz szó róluk) tartalmazhat, de más címkéket nem.

A címet erőteljesen figyelembe veszik a különböző keresőprogramok (pl. Google). Például tegyük fel, hogy a honlapunk a környezetvédelemről szól, ekkor a következő cím lehet megfelelő: A hatékony környezetvédelem alapelvei - szelektív hulladékgyűjtés, energiatakarékosság, hulladékkezelés, komposztálás, üvegvisszaváltás, hulladék csökkentése. Itt minél több környezetvédelemhez kapcsolódó kulcsszót beletettünk a címbe, hogy aki a téma iránt kutat a keresőben, az könnyebben rátaláljon a mi oldalunkra.

A cím másik fontos tulajdonsága, hogy amikor a látogató elteszi a kedvencek közé az oldalunkat, akkor a címe fogja képviselni az oldalt a listában. Nem baj, ha túl hosszú a cím, de az eleje legyen kifejező és a tartalomra jellemző.

<body>

          ...

        </body>

A <body>...</body> címkék közé kell írni az egész weboldal tartalmát. Arra figyeljünk, hogy ide nem szabad azonnal szöveget írni, mert ezt nem engedi meg a szabvány, hanem például egy bekezdést kell definiálni, és oda már írhatunk szöveget. De legegyszerűbb, ha a div címke általános tárolóelem közé kerül a weboldal tartalma:

<body>

          <div>

          Ide kerül a tartalom

          </div>

        </body>

Ikon társítása a honlaphoz

Biztosan észrevette már internetezés közben, hogy a legtöbb honlap címe mellett a böngészőben egy kis ikon jelenik meg, ami kifejezi a honlap tartalmát, stílusát. A Wikipedia például egy „W”-t ábrázoló ikont választott:

Ezt hívják faviconnak is. Az ikonnak a favicon.ico nevet kell adni, és egy 16×16-os méretű képfájlból kell létrehozni, valamilyen konvertáló programmal. A favicon.ico fájlt a honlapunkat tároló webszerver gyökérkönyvtárába kell elhelyezni. Ezt így tudjuk ellenőrizni: Írjuk be a böngészőnkbe a http://www.sajatoldalam.hu/favicon.ico címet, ahol cseréljük le a www.sajatoldalam.hu domaint az igazi domain nevünkre! Ha megjelent a favicon képe a böngészőben, akkor jó helyre tettük. Ezután a következő sort kell felvennünk a head, azaz fejrészbe legalább a kezdőoldalunkban, de inkább minden oldalunkban:

<head>
<link rel="shortcut icon" href="/favicon.ico">
</head>

Itt találhatunk egy galériát jó sok faviconnal.

A favicon a következő helyeken jelenik meg:

A böngésző címsorában
A böngésző kedvencek/könyvjelzők menüpontjában
A böngésző fülsorában (ha van neki)
A start menüben
Az asztalon
A tálcán
A hivatkozások között

Az Internet Explorer 6 kicsit trükkösen bánik a faviconnal a címsorban: úgy tűnik, mintha nem ismerné fel. De ha rányomunk egérrel a favicon helyén álló kék e betűt ábrázoló képre, és az egérgombot nyomva tartja a címsor szövegébe behúzzuk, akkor láthatóvá válik az ikon képe!

Most ismerkedjünk meg az alapvető HTML címkékkel!

Címsor

A címsorokat a <h1> ... <h6> címkék definiálják, a <h1> jelenti a legnagyobbat, a <h6> a legkisebbet. Általában csak <h3>-ig használjuk a címsorokat. Minden címsor elé és mögé automatikusan odakerül egy üres sor.

<h1>Ez egy címsor</h1>

          <h2>Ez egy címsor</h2>

          <h3>Ez egy címsor</h3>

          <h4>Ez egy címsor</h4>

          <h5>Ez egy címsor</h5>

        <h6>Ez egy címsor</h6>

Ez egy címsor

Bekezdés

Bekezdéseket a <p> címkével definiálunk. Automatikusan elé és mögé kerül egy üres sor.

<p>Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. </p>

        <p>Ez egy másik bekezdés, két bekezdés között van egy üres sor.</p>

Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés.

Ez egy másik bekezdés, két bekezdés között van egy üres sor.

Sortörés

Sortörést a <br> címke definiál.

<p>Ez<br>egy<br>bekezdés<br>sortörésekkel.<p>

Ez
egy
bekezdés
sortörésekkel.

Linkek

A linkek (vagy magyarul hivatkozások) kötik össze a honlapokat, az egész Internet linkekből áll. Az alábbi példa egy Google-ra mutató link:

<a href="http://www.google.hu/">Látogasd meg a Google-t!</a>

Látogasd meg a Google-t!

Az a (anchor, azaz horgony) címke segítségével hozhatunk létre linket. A kezdő címkébe mindössze a href attribútumot kell írni, aminek az értéke annak a webhelynek a címe, ahová a link mutat, a fenti példában ez a Google magyar webhelye. Az <a>...</a> címkék közé írt szöveg fog megjelenni a link szövegeként.

Képek

Képet a következő módon szúrhatunk be:

<img src="acid2.png" width="168" height="168" alt=":-)">

src: A kép fájlneve, és elérési útvonala
width és height: A kép szélessége és magassága pixelben
alt: Ez a szöveg fog megjelenni, ha akármilyen okból nem jeleníthető meg a kép

Megjegyzések a kódban

A kódban elhelyezhetunk megjegyzéseket a  jelek közé, amit a böngésző figyelmen kívül fog hagyni, tehát nem jeleníti meg. A megjegyzésekkel magyarázatokat fűzhetünk a kódhoz, így ha később elővesszük, emlékezni fogunk rá hogy mi volt a célunk egy kódrészlettel. Másik alkalmazása, hogy egy hosszabb-rövidebb kódrészletet megjegyzések közé teszünk, hogy a böngésző hagyja figyelmen kívül. Ezt teszteléskor szoktuk használni.

<!-- Ez egy megjegyzés -->

          <!-- <p>Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés. Ez egy bekezdés.</p>

          <p>Ez egy másik bekezdés, két bekezdés között van egy üres sor.</p> -->

        <p>Csak ez a sor fog megjelenni, a fenti két megjegyzés nem, hiába tartalmaz a második érvényes HTML kódot.</p>

Csak ez a sor fog megjelenni, a fenti két megjegyzés nem, hiába tartalmaz a második érvényes HTML kódot.

Szóközök kezelése

Fontos megérteni, hogy mi a különbség a forráskód kinézete és a megjelenített oldal kinézete között. Nézzük az alábbi példát!

<p>

          Tüzesen süt le a nyári nap sugára

          Az ég tetejéről a juhászbojtárra.

          Fölösleges dolog sütnie oly nagyon,

          A juhásznak úgyis nagy melege vagyon.

        </p>

Tüzesen süt le a nyári nap sugára Az ég tetejéről a juhászbojtárra. Fölösleges dolog sütnie oly nagyon, A juhásznak úgyis nagy melege vagyon.

Látható, hogy a böngésző egy sorban jelenítette meg a versszakot. Ez azért van, mert mindegy, hogy a HTML kódba hová teszünk sortörést, vagy üres sort, ezt nem fogja figyelembe venni a böngésző! A helyes kód a következő lenne:

<p>

          Tüzesen süt le a nyári nap sugára<br>

          Az ég tetejéről a juhászbojtárra.<br>

          Fölösleges dolog sütnie oly nagyon,<br>

          A juhásznak úgyis nagy melege vagyon.

        </p>

Tüzesen süt le a nyári nap sugára
Az ég tetejéről a juhászbojtárra.
Fölösleges dolog sütnie oly nagyon,
A juhásznak úgyis nagy melege vagyon.

Vegyük észre, hogy az utolsó sor után már felesleges sortörést tennünk.

Ugyanígy az is mindegy, hogy a HTML kódban hány üres sort írunk, és van-e sortörés vagy üres sor a nyitó és a záró címke között. A következő két példának ugyanaz az eredménye:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Honlap címe</title></head>

<head>

          

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          

          <title>Honlap címe</title>

          

        </head>

Persze célszerű ezt az utóbbi írásmódot használnunk, hiszen ez áttekinthetőbb.

A böngésző azt is figyelmen kívül hagyja, ha egynél több szóközt írunk egymás mellé a forráskódban. Nézzünk egy példát!

<p>Ez itt egy bekezdés.        Most jó sok szóközt tettünk ide,     hogy kihagyjunk egy kis helyet.     De hiába, ezt a böngésző nem veszi figyelembe, hanem csak    egyetlen    szóközt jelenít meg!</p>

Ez itt egy bekezdés. Most jó sok szóközt tettünk ide, hogy kihagyjunk egy kis helyet. De hiába, ezt a böngésző nem veszi figyelembe, hanem csak egyetlen szóközt jelenít meg!

Viszont néha célszerűbb lenne, ha a böngésző mégis úgy jeleníteni meg a honlap egy részét, ahogyan a forráskódban formáztuk sortörésekkel, üres sorokkal és szóközökkel. Erre a célra szolgál a <pre> címke:

<pre>

          Tüzesen süt le a nyári nap sugára

              Az ég tetejéről a juhászbojtárra

                  Fölösleges dolog sütnie oly nagyon,

                      A juhásznak úgyis nagy melege vagyon.

          Így       a                 szóközöket is       megjeleníti, pont ahogyan a forráskódban írtuk.

        </pre>

Tüzesen süt le a nyári nap sugára
    Az ég tetejéről a juhászbojtárra.
        Fölösleges dolog sütnie oly nagyon,
             A juhásznak úgyis nagy melege vagyon.
Így       a          szóközöket is       megjeleníti,
pont ahogyan a forráskódban írtuk.

Ezt a lehetőséget ne a <br>, <p> és egyéb címkék helyettesítésére használjuk, hanem ha a fentihez hasonló bonyolult formázást kívánunk, amihez túl sok címkét kéne leírnunk.

Tartsuk be a szabványt! Írjunk érvényes HTML és CSS kódot!

Mindig törekedjünk arra, hogy az általunk írt HTML és CSS kód érvényes legyen! Az érvényesség azt jelenti, hogy a DTD-ben leírt szabályokat betartjuk, csak létező címkéket és attribútumokat használunk, és csak a DTD által engedélyezetteket. Majd meg fogjuk látni, hogy ez egyáltalán nem nehéz.

A HTML kód helyességét a http://validator.w3.org/ címen, a CSS kód helyességét pedig a http://jigsaw.w3.org/css-validator/ címen található eszközzel tudjuk leellenőrizni. Hibás kódot ne adjunk ki a kezünkből!

Honlapunk minden egyes weboldalát külön le kell ellenőrizni, hiszen mindegyik különálló HTML kódot tartalmaz. Ha egy weboldalunk megfelelt a tesztnek, akkor azt mondjuk rá, hogy érvényes, angolul valid. Ekkor kitehetjük az alábbi két ikont a weboldalunkra, ami jelzi a helyes kódot.

Érvényes HTML 4.01:

Érvényes CSS 2:

Miután a validator érvényesnek fogadta el a weboldalunk kódját, fel fog ajánlani egy linket. Ha ezt a linket kitesszük a weboldalunkra, akkor meg fog jelenni a megfelelő kis ikon, amire ha rákattintunk, akkor bizonyítani fogja, hogy érvényes az adott weboldal. Persze ezeket az ikonokat ki lehet tenni hibás weboldalra is, csak akkor ha ráklikkelnek, akkor ki fogja írni a weboldal hibáit.

Ha hibás a weboldal kódja, akkor a böngésző hibajavítási módszereitől fog függeni a megjelenítése. Azaz nem tudhatjuk, hogy egy lezáratlan címkét vagy hiányzó attribútumot hogyan kezelnek az egyes böngészők. Még az is előfordulhat, hogy a keresőrobotok nem veszik figyelembe a hibás rész körül előforduló kifejezéseket. Továbbá a hibás kód megjelenítése több időbe kerül, mert a böngészőnek a hibajavítással is foglalkoznia kell. Ezért mindig ellenőrizzük weboldalaink HTML kódját érvényesség szempontjából!

Ajánlott linkek

Mik azok a webszabványok, és miért kell betartanunk őket? http://www.webstandards.org/learn/faq/

Bővebb információ a karakterkódolásról a Wikipédián: http://hu.wikipedia.org/wiki/Karakterk%C3%B3dol%C3%A1s

Favicon generátor: http://tools.dynamicdrive.com/favicon/

Miért írjunk érvényes kódot? http://validator.w3.org/docs/why.html

HTML validator: http://validator.w3.org/

CSS validator: http://jigsaw.w3.org/css-validator/