12. A HTML alapjai

By Karbonade

Bevezető

Ebben a leírásban megismerheted a HTML alapjait — mi az, mire jó, hogyan alakult ki, valamint hogyan épül fel egy HTML dokumentum szerkezete. A következő leírásokban majd részletesebben is megismerheted a HTML különböző részeit. Ebben a leírásban a következő témákról lesz szó:

Mi a HTML?

A legtöbb olyan asztali alkalmazás, amelyik fájlokat ír és olvas, egy bizonyos fájlkiterjesztést használ. A Microsoft Word például a „.doc” fájlokat érti meg, míg a Microsoft Excel az „.xls” fájlokat ismeri. Ezek a fájlok utasításokat tartalmaznak arra, hogy hogyan lehet felépíteni a dokumentumot a legközelebbi megnyitáskor, mit tartalmaz a dokumentum, valamint néhány „metaadatot” a dokumentumról, mint például a szerző vagy a legutolsó módosítás dátuma, sőt akár az utolsó módosítások is benne lehetnek, így vissza lehet állni a dokumentum egy korábbi verziójára.

A HTML („HyperText Markup Language”, azaz hiperszöveg-leíró nyelv) a webes dokumentumok leírására szolgáló nyelv. Olyan speciális jelöléseket (más szóval elemeket) tartalmaz, amelyek körülveszik dokumentum szövegeit, és megadják, hogy a kliens eszközök hogyan értelmezzék a dokumentum megjelölt részeit.

A „kliens eszközök” kifejezést használtuk itt a „webböngészők” helyett. Egy kliens eszköz lehet bármilyen szoftver, amely a felhasználó számára weboldalakat ér el. Fontos megemlítenünk még ezen a ponton, hogy az asztali böngészők (Internet Explorer, Opera, Firefox, Safari, stb.) és az alternatív böngészők (mint például a Wii Internet channel vagy a mobil böngészők, mint az Opera Mini vagy az iPhone WebKitje) egyaránt kliens eszközök, viszont nem minden kliens eszköz böngésző szoftver. Az olyan automata programok, mint amilyenekkel a Google és a Yahoo! indexeli a webet a keresőjük számára, ugyancsak kliens eszközök, viszont nem állnak közvetlen emberi irányítás alatt.

Hogyan néz ki a HTML?

A HTML a szövegek és az jelölések egyszerű szöveges megjelenítése. Például a fenti „Hogyan néz ki a HTML?” címsorhoz tartozó HTML kódrészlet a következő:

<h2 id="hogynezki">Hogyan néz ki a HTML?</h2>

A „<h2>” rész egy jelölő (amire „tag” — ejtsd teg — névvel hivatkozunk), és azt jelenti, hogy „a következő rész második szintű címsornak számít”. A „</h2>” ugyancsak egy tag, amely a második szintű címsor lezárását jelöli (éppen ezért „lezáró tagnek” is nevezik). A nyitó tag, a záró tag és minden, ami köztük van, együtt alkotja az „elemet”. Sokan a tag és elem kifejezéseket felcserélhetőként használják, pedig ez nem teljesen helyes. Az id="hogynezki" egy attribútum; ezekről a későbbiekben lesz szó.

A legtöbb böngészőben találhatsz egy „Forrás” vagy „Forráskód” pontot, legtöbbször a „Nézet” menü alatt. Ha megtalálod, válaszd ki most, és tölts egy kis időt ennek a lapnak a HTML forráskódját nézegetve.

A HTML története

Az internet és a web története leírásban már olvashattál arról, hogy hogyan alakult ki a modern web. Amikor Tim Berners-Lee megalkotta a World Wide Webet, akkor elkészítette az első webszervert, az első webböngészőt és a HTML első verzióját is.

Bár a HTML rengeteget változott az első napok óta, sok része az első HTML dokumentációnak még mindig érvényben van a modern verzióban is, és az akkor definiált „HTML tagek” több mint fele most is létezik.

Ahogy egyre többen kezdtek weblapokat és alternatív böngészőket írni, úgy bővült folyamatosan új funkciókkal a HTML is. Sokat általánosan adtak hozzá (mint például az img elemet egy kép beillesztéséhez, amelyet először az NCSA Mosaic valósított meg). Más elemek védettek voltak, és csak egy-két böngésző valósította meg őket. Egyre nőtt az igény a szabványosításra, hogy a böngésző szoftverek készítőinek legyen egy dokumentumuk (más néven specifikáció), amelynek alapján egyértelműen eldönthetik, hogy a HTML hogyan néz ki, és hogy egy HTML elemet helyesen valósítottak-e meg, vagy nem.

Az IETF (Internet Engineering Task Force — a szabványos alap elkészítésére az internet egészéhez) a HTML ajánlásának első vázlatát 1993-ban adta ki. Ez 1994-ben elavult anélkül, hogy szabvánnyá vált volna, de arra késztette az IETF-et, hogy indítson egy csoportot a HTML szabványosítására.

1995-ben elkészült a „HTML 2.0”, amely sok ötletet merített az eredeti HTML ajánlásból. Dave Raggett készített egy alternatív javaslatot is HTML+ névvel, amely sok új elem fejlesztésének alapjául szolgált a böngészőkben (például a képek behelyezésének a módszere a dokumentumokba, amelyben az NCSA Mosaic volt az úttörő).

A HTML 3.0 ajánlása még ugyanebben az évben érkezett, de hamar befejezték vele a munkát, mivel a böngészőgyártók teljesen más irányokban kezdtek el fejleszteni. A HTML 3.2 sok funkciót elhagyott a HTML 3.0-ból, és helyettük beépítette a népszerűbb böngészők (mint a Mosaic és a Netscape Navigator) különböző fejlesztéseit.

1997-ben a W3C kiadta ajánlásként a HTML 4.0-át, amelyben még több böngésző-sepcifikus kiterjesztést próbáltak meg ésszerűsíteni és egyszerűbbé tenni. Ezt azzal érték el, hogy több elemet elavultként jelöltek meg — ez azt jelenti, hogy ezek az elemek még léteznek ebben a verzióban (elavultként megjelölve), de a következőben már teljesen törölve lesznek. Ezzel próbálták meg a fejlesztőket rávenni arra, hogy a HTML-t szemantikusabban használják (erről részletesebben A webes szabványok modellje leírásban olvashatsz).

A HTML 4.01 1999-ben jelent meg, majd néhány elírást javítottak benne 2001-ben. Ez az utolsó HTML verzió, bár jelenleg már elérhető a HTML 5 vázlata is.

2000-ben a W3C kiadta az XHTML 1.0 specifikációját is, amely a HTML átdolgozása volt érvényes XML dokumentumra.

A HTML dokumentum szerkezete

A lehető legkisebb érvényes HTML dokumentum valahogy így néz ki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Példa lap</title>
    </head>
    <body>
      <h1>Helló világ</h1>
    </body>
  </html>

A kód a dokumentum típusát megadó (doctype) elemmel kezdődik, erről részletesebben a Megfelelő doctype választása leírásban olvashatsz. Ez az elem adja meg, hogy melyik HTML változatot fogjuk használni, így a kliens eszközök tudni fogják, hogyan értelmezzék a dokumentumot, valamint hogy betartja-e a dokumentum az adott típus szabályait, vagy nem.

Ezután egy nyitó html elemet láthatsz. Ez közrefogja az egész dokumentumot. A záró html tag az utolsó a HTML dokumentumban.

A html elemen belül találjuk a head elemet. Ez a elem információkat tartalmaz a dokumentumról (a metaadatokat). Erről részletesebben a következő leírásban lesz szó. A head elemen belül találjuk a title elemet, amely a lap címét („Példa lap”) definiálja az ablak fejlécében.

A head elem után következik a body elem, amely a lap valódi tartalmát fogja közre — amely ebben az esetben csak egy első szintű címsor elemből (h1) áll, amely a „Helló világ” szöveget tartalmazza. Ez a teljes dokumentumunk.

Ahogy láthatod, az elemek gyakran tartalmaznak más elemeket. A dokumentum törzse mindig tartalmaz további beágyazott elemeket. Az oldal felosztása adja meg a dokumentum struktúráját, és tovább felosztásokat tartalmaz. Ebben lesznek a címsorok, a bekezdések, a listák, stb. A bekezdések ugyancsak több különböző elemet tartalmazhatnak: hivatkozásokat más dokumentumokra, idézőjeleket, kiemeléseket, stb. Ezekről az elemekről többet is meg fogsz tudni a későbbiekben.

A HTML elemek szintaxisa

Ahogy már láthattad, egy egyszerű elem a HTML-ben két jelölő tagből áll egy szövegblokk körül. Vannak olyan elemek is, amelyek nem fognak közre egy szöveget, és a legtöbb esetben az elemek további elemeket tartalmazhatnak (mint ahogy a fenti példában a html tartalmazza a head és a body elemeket).

Az elemek ezen kívül tartalmazhatnak attribútumokat is, amelyek módosíthatják az elem működését, vagy újabb értelmezést adhatnak az elemnek.

<div id="masthead">
  <h1>
    A <abbr title="Hypertext Markup Language">HTML</abbr> alapjai
  </h1>
</div>

Ebben a példa div elemben (amely a lap részeinek logikus blokkokba való felosztására szolgál) használtunk egy kiegészítő id attribútumot, amely a masthead értéket kapta. A div tartalmaz egy h1 elemet (első, vagyis legmagasabb szintű címsor), amely tartalmaz egy szöveget. A szöveg egy részét az abbr elem fogja közre (ezzel adhatjuk meg a rövidítések leírását), amely tartalmaz egy title attribútumot, ennek értéke a „Hypertext Markup Language” szöveg.

Sok attribútum a HTML-ben minden elemre használható, míg egyes attribútumokat csak bizonyos elemek mellett használhatunk. Mindig kulcsszó="érték" formában használjuk. Az értéket sima vagy dupla idézőjelbe kell tenni (bár egyes esetekben az idézőjeleket elhagyhatjuk, viszont ez nem jó módszer a előreláthatóság, az érhetőség és a világos, tiszta kód szempontjából — a legjobb, ha mindig kiteszed az idézőjeleket).

Az attribútumok és a lehetséges értékeik a HTML specifikációkban vannak megadva — nem hozhatsz létre saját attribútumokat anélkül, hogy érvénytelenné nem tennéd a HTML dokumentumodat, mivel ez összezavarná a kliens eszközöket és problémákat okozhat a weblap helyes értelmezésében. Az egyetlen kivétel az id és a class attribútumok — ezeknek a lehetséges értékei teljes mértékben a te kezedben vannak, mivel ezekkel tudod a saját értelmezésedet és szemantikádat hozzáadni a dokumentumhoz.

Egy elemre egy másik elemen belül az adott elem „gyerekeként” hivatkozunk. Így a fenti példában az abbr a h1 gyereke, ami viszont már a div gyereke. Fordítva, a div így a h1 elem „szülője” lesz. Ez a szülő/gyerek fogalom nagyon fontos, mivel ez biztosítja a CSS alapjait, és ezt használjuk majd a JavaScriptekben is.

Blokk szintű és inline elemek

A HTML elemeket általánosan két nagy kategóriára bonthatjuk, amelyek megfelelnek az elem által megjelenített tartalom és struktúra típusainak — ezek a blokk szintű és az inline elemek.

A blokk szintű (block level) elem egy felsőbb szintű elemet jelent, amely általában a dokumentum struktúráját jelzi. Úgy gondolhatsz ezekre az elemekre, mint amelyek egy új sort kezdenek, vagy elválasztanak valamit a korábbi tartalomtól. A leggyakoribb blokk szintű elemek a bekezdések (paragrafusok), listaelemek és táblázatok.

Az inline (azaz soron belüli) elemek ezzel szemben azok az elemek, amelyeket a blokk szintű elemek tartalmaznak, és csak a dokumentum kis részeit fogják közre, nem teljes bekezdéseket vagy csoportokat. Egy inline elem nem fog új sort generálni a dokumentumban; ezek azok az elemek, amelyek egy bekezdés szövegén belül találhatóak. A leggyakoribb inline elemek a hiperhivatkozások, a kiemelt szavak vagy mondatok és a rövid idézetek.

Karakter referenciák

Még van egy fontos pont a HTML dokumentumokkal kapcsolatban, mégpedig a speciális karakterek használata. A HTML-ben a <, > és & jelek speciálisak. Ezek adják meg HTML tagek elejét és végét, így a dokumentumon belül nem a kisebb, nagyobb és az és jeleket jelentik.

Az egyik legegyszerűbb hiba, amit egy webfejlesztő véthet, hogy az és jelet felhasználja a dokumentumban, így valami váratlan történik. Ha például azt írja, hogy „az angolszász jelölésben a tömeg stones&pounds”, akkor egyes böngészőkben ez úgy végződhet, hogy „…stones£s”.

Ez azért van, mert a „&pounds;” szövegrész valójában egy HTML karakter referencia. A karakter referencia egy módszer az olyan karakterek beillesztésére a dokumentumokba, amelyeket egyébként csak nehezen vagy sehogyan sem írhatunk be a billentyűzetet használva, vagy a dokumentum kódkészletében nem szerepel.

Az és jel (&) vezet be egy ilyen referenciát, és a pontosvessző (;) zárja le. Ennek ellenére sok kliens eszköz elég megbocsátó a HTML hibák iránt, és nem veszi figyelembe, hogy nincs lezáró pontosvessző, így a „&pound” kifejezést is karakter referenciaként értelmezi. A referenciák lehetnek számok (numerikus referenciák), vagy rövid szavak (egyedi referenciák).

Ha egy és jelet akarunk beírni a dokumentumba, akkor az „&” karakter referenciát kell használnunk, vagy a „&” numerikus referenciát. A karakter referenciák listáját az evolt.org oldalán találhatod meg.

Összefoglaló

Ebben a leírásban megismerhetted a HTML alapjait, hogy honnan fejlődött ki, és betekintést nyerhettél egy HTML dokumentum felépítésébe. A következő részben a HTML dokumentum <head> részével fogunk bővebben foglalkozni, majd rátérünk a <body> által közrefogott tartalomra.

A szerzőről

Fotó: Andy Budd.

Mark Norman Francis már azelőtt az internettel foglalkozott, hogy a web megszületett volna. Jelenleg a Yahoo!-nál a világ legnagyobb weboldalán dolgozik mint kezelőfelület-tervező, új módszereket és kódolási szabályokat dolgoz ki, valamint nemzetközi támogatást nyújt a minőségi webfejlesztéshez.

A Yahoo! előtt a Formula One Management, a Purple Interactive és a City University vállalatoknál dolgozott különböző minőségben, többek között mint webfejlesztő, CGI programozó és rendszertervező. A http://marknormanfrancis.com/ oldalon blogol.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.