HTML bevezetés – az 1. óra

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:

html kód

És akkor jöhet egy kis magyarázat a különböző elemekről:

  1. <!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.
  2. <html> gyakorlatilag a dokumentum kezdete,
  3. <head> fejrész elem, ide kerülnek majd a meta információk a dokumentumról,
  4. <title> ez az elem meghatározza a dokumentum címét,
  5. <body> a dokumentum teste, gyakorlatilag a látható tartalom,
  6. <h1> Címsor a dokumentumon belül (a legnagyobb),
  7. <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!

forraskod
Oldal forráskód (nodepad++)

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!

firefox html dokumentum
HTML megjelenítése a Firefox böngészőben

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.

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..

%d blogger ezt szereti: