HTML oldal felépítése, struktúrája (Miből áll egy HTML dokumentum?)

Ebben a leckében megismerkedhettek a HTML oldalak felépítésével, struktúrájával.

0
HTML oldal felépítése, HTML dokumentum struktúrája

HTML oldal felépítése, struktúrája (Miből áll egy HTML dokumentum?)

A HTML oldalak felépítése nagy vonalakban megegyezik, minden oldalnak tartalmaznia kell ugyanazokat az elemeket. Hiszen ezek az elemek határozzák meg azt, hogy ez a dokumentum egy HTML-dokumentum, azaz egy weboldalt leíró kód.

Tartalomjegyzék

A HTML oldalak kötelező elemei

  • <!DOCTYPE html>: Ezzel kell kezdődnie a HTML dokumentumunknak. Ez mondja meg a böngészők számára, hogy ez egy HTML dokumentum. Ebből tudja a böngésző, hogy egy weboldalt kell megjelenítenie.
  • <HTML>…</HTML>: E két tag közé fogjuk írni az érdemi részeket.
  • <HEAD>…</HEAD>: Ebbe olyan információkat írunk, amelyek bár fontosak az oldal szempontjából, de konkrétan nem jelenítődnek meg az oldalon. Azaz itt határozhatjuk meg az oldal nyelvét, amely a böngésző számára egy fontos információ, de ennek az információnak nincs (átlagos) emberi szemmel látható kivetülése az oldalon.
  • <BODY>…</BODY>: E két tag közé viszont már olyan információkat írunk, amelyek ténylegesen meg is jelennek az oldalon. Például ide már írhatunk olyan szövegeket, amelyek megfognak jelenni az oldalon.

Hogy néz ki egy alap HTML dokumentum? Hogyan épül fel egy HTML oldal?

<!DOCTYPE html>
  <HTML>
    <HEAD> 
    </HEAD> 
    <BODY>
    </BODY>
  </HTML>
Code language: HTML, XML (xml)

Most pedig kiemelem, amit már valószínűleg mindenki észrevett tudat alatt, csak még nem biztos, hogy teljesen megfogalmazódott benne a dolog.

weboldal honlap html dokumentum felepitese struktura
A kép kattintásra nagyobbodik!

A különböző tag-ek úgy kapcsolódnak össze, ahogy a képen látható. Ebből leszűrhetünk pár alapvető következtetést:

  1. A dokumentumnak kötelező <!DOCTYPE html> elemmel kezdődnie.
  2. A <!DOCTYPE html> tag-nek nincs zárópárja.
  3. A <DOCTYPE html> részt mindig a <HTML> elem követi.
  4. Ezután mindig a <HEAD> szekció jön. Nem helyezhetjük a <BODY>-t a <HEAD> elé.
  5. A <HEAD> és a </HEAD> közé írhatunk utasításokat.
  6. Ha nincs több utasítás, akkor a <HEAD>-et mindig le kell zárnunk </HEAD>-del.
  7. Csak a </HEAD> után írhatunk <BODY> tag-et.
  8. A <BODY> és a </BODY> közé írhatunk utasításokat.
  9. Ha nincs több utasítás, akkor a <BODY>-t kötelező lezárnunk </BODY>-val.
  10. A </BODY> után a </HTML>-el lezárjuk az egész dokumentumot.

Összegzésképp elmondhatjuk, hogy: mindig azt a tag-et zárjuk le először, amelyiket utoljára megnyitottuk.

Példa

Nézzük az előző leckében már látott kódot. Továbbra is a bal oldalon láthatjuk azt, hogy hogyan néz ki konkrétan egy HTML alapú weboldal felépítése, a jobb oldalon viszont azt láthatjuk, hogy a bal oldalra beírt kód hogyan fog megjelenni a böngészőnkben.

HTML kód

<!DOCTYPE html>
<html>

<head>
<title>A weboldal címe</title>
</head>
<body>

<h1>Ez az első címsorom</h1>
<p>Ez az első bekezdésem.</p>

</body>
</html>
Code language: HTML, XML (xml)

Eredmény

Ez az első címsorom

Ez az első bekezdésem.

A fentebb látható kód elemzése:

  • <!DOCTYPE html>: Ez a sor határozza meg, hogy ez egy HTML dokumentum lesz, ezzel üzenve a böngészők számára.
  • <html>: Ez a HTML fájlunk gyökéreleme, kötelező ennek következnie a !DOCTYPE html rész után.
  • <head>: Ezt magyarul fejnek, fejszekciónak vagy fejrésznek hívjuk. Alapvető információkat tartalmaz a HTML oldalunkról. Például a következő szekciót.
  • <title>: Ez határozza meg a HTML oldal nevét. A böngésző innen olvassa ki a böngésző címsorában látható szöveget.
  • </title>: Ez az előző elem zárópárja. A nyitó és a záró tag közé kerül a HTML oldal címe.
  • <body>: Ez a dokumentum „test” része, ezután kell írni a weboldal tartalmát. Az e mögé írt tartalmak fognak megjelenni a böngészőben a weboldal részeként. Ezt követni fog majd még egy </body> tag. De ezt nem rakhatjuk ki még most. A záró tag-et csak akkor rakhatjuk ki, ha a weboldalunkat már feltöltöttük tartalommal.
  • <h1>: Ez egy címsor. A HTML nyelvben több címsor is létezik. (Például h1, h2, h3 stb.) A h1 a legnagyobb címsor, azaz a weboldalon ez lesz a legnagyobb szöveg.
  • </h1>: Ez a címsor záró tag-e. A <h1> és </h1> közé került szöveget fogja nagy betűkkel kiírni a weboldalra.
  • <p>: Ez a bekezdést jelöli. Az ezután írt szöveget normál méretben fogja megjeleníteni a böngésző.
  • </p>: Ez az bekezdés zárópárja.
  • </body>: Az elején írtuk a <body> nyitó tag-et. Ez a zárópárja. Ez jelzi a böngésző számára, hogy eddig tartott a megjelenítendő rész.
  • </html>: Ez pedig azt jelzi a böngészőnek, hogy itt ér véget teljesen a HTML dokumentum.

\n

\n\nEzekből és különböző HTML-elemekből épül fel egy HTML oldal."}},{"@type":"Question","name":"Hogy néz ki egy HTML oldal struktúrája?","acceptedAnswer":{"@type":"Answer","text":"Egy HTML oldal struktúrája az alábbi kötelező elemeket tartalmazza:\n\n\n\n

\n\n

\n

\n

\n\nEzekből és különböző HTML-elemekből épül fel egy HTML oldal."}}]}

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!

További leckék