Webszerkesztés

A HTML dokumentum részei

DOCTYPE

A DTD (Document Type Definition - dokumentum típus definíció) a HTML dokumentum első sora. A dokumentumtípus definíció mondja meg a böngészőnek, hogy a HTML-nek melyik verzióját fogjuk használni. Ez biztosítja számunkra, hogy a különböző böngészőkben a weblapunk látványa minél inkább hasonló legyen.

A dokumentumtípus meghatározás adja meg a weboldal nyelvtanát a böngésző számára. A megadás módja:

<!DOCTYPE html>

Ez biztosítja, hogy a böngésző szabálykövető üzemmódban értelmezze a HTML weboldalt. Ha hiányosan, hibásan, vagy egyáltalán nincs megadva a dokumentumtípus, akkor a böngésző magától próbálhatja értelmezni a kódolást – ez magában hordozza a hibás megjelenítés lehetőségét.

HTML

A dokumentumtípus meghatározás után egy <html> és </html> páros címkék közötti rész alkotja a böngésző által értelmezett és megjelenített weblapot. A böngésző számára a <html> kezdőcímkénél kezdődik, és a </html> zárócímkénél ér véget a megjelenítendő weboldal.

A keresőprogramok hatékonyságát elősegítendő javasolt a honlap fő nyelvének megadása is, mely magyar nyelvű weblapnál a kezdő html címke lang=”hu” jellemző/érték kiegészítését jelenti.

HEAD

A dokumentum fej tartalma nem jelenik meg a böngészőben. Technikai információkat és a dokumentummal kapcsolatos további információkat tartalmaz. Tehát ezeket az átlag felhasználó nem látja, de befolyásolják a tartalom megjelenítését.

A fej (head) az adott HTML-oldalra vonatkozó meta-adatokat tartalmazza. A metaadatok a fájllal kapcsolatos különféle jellemzők és utasítások tárolására szolgálnak. Néhány meta-adatnak saját címkéje van (pl. title=cím, link=kapocs, style=stílus) a többiek a meta címke jellemzőjeként adhatók meg.

Lehetőség van itt külső erőforrások illesztésére (pl. CSS, JavaScript, ikon ...), a böngésző vagy a keresők számára szükséges információk (metaadatok) megadására.

A karakterkészlet megadása

A legfontosabb metaelem a karakterkódolás. A karakterkészlet megadásának elmulasztása hibás megjelenítéshez vezet(het). Az UTF-8 kódkészlet alkalmazása tipikus magyar szöveg esetén a Latin2-höz (ISO 8859-2) képest kb. 10% fájlméret növekedést okoz.

A HTML5 minden nyelven az UTF-8 alkalmazását javasolja!

A weblap címének megadása

A <title> és a </title> címkék közé írt szöveg lesz a weboldal címe, ez jelenik meg a böngészők címsorában és a keresők találati listáján. A cím legyen rövid és utaljon az oldal tartalmára.

A cím tartalmazhat magyar ékezetes szavakat és nagybetűket is. A tartalmat jól kifejező cím segíti a keresők helyes találatát. A cím a böngésző címsorában, ill. a keresők találatainak felsorolásában és a Kedvencek/Könyvjelzők menüjében jelenik meg.

Link metaelem

A link (kapocs) páratlan címke. A link címke kapcsolatot teremt a weboldal és egy külső erőforrás (pl. stíluslap, ikon, stb... ) között.

Külső CSS stíluslap(ok) csatolása a HTML dokumentumhoz

A rel (relation=viszony) jellemző jelzi a böngészőnek, hogy a hivatkozott (CSS) dokumentum milyen viszonyban van a hivatkozó (HTML) dokumentummal. (A megadott érték szerint stíluslap viszonyban van vele.)

A href (hypertext reference =hiperszöveges hivatkozás) jellemző annak a CSS stíluslapnak a fájlnevét és helyét (elérhetőségi útját) adja meg, melyet a HTML dokumentumhoz akarunk kapcsolni.

A stíluslap név szabadon választható, kisbetűs, ékezetek és szóköz nélküli legyen. A kiterjesztés kötelezően .css.

Ikon megadása a weblaphoz

A type a cél-URL MIME-típusa. Értékei: text/css; text/javascript; image/gif

Külső script csatolása a HTML dokumentumhoz

Kliens oldali szkript beillesztése a HTML kódba. Páros címke.

A src jellemző annak a külső scriptnek a fájlnevét és helyét (elérhetőségi útját) adja meg, melyet a HTML dokumentumhoz akarunk kapcsolni.

A type jellemző adja meg a tartalom MIME típusát (pl: text=szöveg) és altípusát (pl: javascript).

BODY

<body> és </body> páros címkék közötti rész alkotja a böngésző által megjelenített weboldal tartalmát.

A dokumentumtörzs az, amit a böngésző megjelenít, a CSS stílussal való formázás is csak erre vonatkozik.

A weblap kódolt szerkezete

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" 
    href="stilus.css">
  <title>Az oldal címe</title>
<head>
<body>

	A weblap tartalma

</body>
</html>