Mi is az a HTML?
A HTML egy angol mozaikszó „HiperText Markup Language” azaz hiperszöveg jelölőnyelv. Szerencsére ez nem valami földöntúli kód, hanem egy egyszerű leíró nyelv, amely megmondja a böngészőknek, hogyan kell megjeleníteni a dokumentumokat. A weboldalak HTML elemekből épülnek fel. A HTML elemeket címkék jelölik. A címkéket idegen szóval „tag„-nek mondjuk. Ezekkel a címkékkel jelöljük a különböző típusú tartalmakat egy dokumentumban. Ilyen tartalom lehet a dokumentum fejrésze, egy táblázat vagy egy bekezdés. A webböngészők nem jelenítik meg ezeket a címkéket, de ezeket használjuk a tartalom elrendezésére az oldalon.
Nézzünk egy konkrét példát egy egyszerű HTML dokumentumra:
És akkor jöhet egy kis magyarázat a különböző elemekről:
- <!DOCTYPE html> minden HTML5 dokumentumot ezzel kezdünk. Ez a tag mondja el a böngészőnek, hogy ez egy HTML5 dokumentumot fog beolvasni.
- <html> gyakorlatilag a dokumentum kezdete,
- <head> fejrész elem, ide kerülnek majd a meta információk a dokumentumról,
- <title> ez az elem meghatározza a dokumentum címét,
- <body> a dokumentum teste, gyakorlatilag a látható tartalom,
- <h1> Címsor a dokumentumon belül (a legnagyobb),
- <p>bekezdés a dokumentumban.
Az oldal elemit nyitó és záró címkék közé helyezzük
<címkenév>tartalom…</címkenév>
Ahogy a fenti példában látható a zárótag abban különbözik a nyitótagtól, hogy egy / jelet is tartalmaz. Ahogy korábban említettük, a webböngészők beolvassák a HTML dokumentumot és megjelenítik a tartalmát, a címkéket kivéve. Azt hogy hogyan kell kialakítani a megjelenített oldal felépítését ezek a címkék mondják meg a böngészőnek.
HTML oldal szerkezete
Most nézzük meg egy egyszerű oldal szerkezetét!
A könnyebb olvashatóság érdekében a kód begépelésekor tabulátorokat és soremelést is használtunk. Később ez jó gyakorlat lehet számodra is mert így áttekinthetőbb a forráskód.
Most pedig nézzük, hogy jeleníti meg a böngésző a fenti kódot!
Ha összevetjük a kódot a megjelenített lappal, látható, hogy a böngésző csak a <body>…</body> elemcímkék közötti tartalmat jeleníti meg. Hamarosan azt is megtudjuk, mire való a többi terület.
HTML verziók, a <!DOCTYPE> címke
A WWW fejlődésével fejlődött a weboldalakon megjeleníthető tartalom is. Ahhoz hogy a böngészők helyesen tudják megjeleníteni a különböző verziójú HTML webhelyeket, fontos hogy valahol megmondjuk a böngészőnek, hogy most épp melyik verziót kell értelmeznie.
A különböző HTML verziókról olvashatsz a Wikipedián is. Ez a tanfolyam a HTML legújabb verziójával a HTML5-el foglalkozik. A <!DOCTYPE> címkét használjuk a HTML verzió meghatározásához. Rögtön a dokumentum elején egyetlen egyszer kell zárótag nélkül használni. A HTML5 dokumentum helyes címkézése:
<!DOCTYPE html>
Ha kíváncsi vagy a HTML fejlődésére a Wikipedián is olvashatsz róla.
Egy kis történelmi áttekintés:
- 1991 – HTML
- 1995 – HTML 2.0
- 1997 – HTML 3.2
- 1999 – HTML 4.01
- 2000 – XHTML
- 2014 – HTML5
A szabványosítást a W3C konzorcium végzi világszerte vannak irodái, többek között Magyarországon is.
Ennyi volt mára a Webprogramozás óra. A következő alkalommal beszélünk egy kicsit a munkakörnyezetről, a megfelelő szerkesztőprogramról és elkészítjük az első weboldalunkat is. Lehet hogy annak aki egy kicsit már ismeri a weboldalakat unalmas ez a néhány óra, de ahhoz hogy később el tudjátok hárítani a hibákat, fontos hogy az alapjaitól értsétek a weboldalak működését. Ha kérdésetek van, tegyétek fel bátran itt, vagy a Facebook oldalunkon! Ha szeretnétek, csatlakozhattok a tanulócsoportunkhoz is, amit <!DOCTYPE html> néven találtok meg a Facebookon. Ha tetszett a cikk, osszátok meg bátran – segítsétek vele a mi munkánkat – és reméljük mi is segíthetünk vele nektek. Ha véletlen hibát találtok azt is jelezzétek, igyekszünk minél hamarabb kijavítani.