A HTML oldal struktúrája

Hogyan épül fel egy HTML oldal?

A <HEAD> rész egyik legtöbbet használt tag-je a <TITLE>...</TITLE> struktúra. E két tag közé szokás írni a weboldal címét. Ez fog megjelenni a böngésző címsorában is, tehát érdemes kitölteni, ne hagyjuk meg az alapértelmezett értéket, ami sokszor csupán a megnyitott fájl neve! | A HTML oldalakat a <HTML> tag-gel fogjuk közre. A fájl legelejére és legvégére tesszük. A HTML oldalak két fő részből állnak: a fejrészből és a törzsből. A fejrészt a <HEAD> tag-gel, a törzset a <BODY> tag-gel határoljuk. Ha azt mondom, határoljuk, abból rájöhetsz, hogy itt is van nyitó- és zárótag is. Bár a böngészők mindegyike megérti azt is, ha nem tesszük ki ezeket a struktúrajelző elemeket, mégis azt ajánlom, a szabvány kedvéért írjuk ki őket! Néhány elemet például csak bizonyos helyre lehet elhelyezni. Ilyenek például a META tag-ek, amelyek a <HEAD> részben érzik jól magukat. META tag-ek leírása
TITLE | Az oldalad címét adhatod meg benne. Használata: <META name="TITLE" content="Az oldal címe">
DESCRIPTION | Az oldal rövid leírását adhatod meg, a keresők sokszor ezt a szöveget írják ki a találati leírásban. Használata: <META name="DESCRIPTION" content="Ezt az oldalt én készítettem!">
KEYWORDS | A oldal tartalmára jellemző kulcsszavak, amiket a keresőkbe beírva a kereső oldalunkat is meg kell találja. Ne használj sok szót, max. párszáz karakternyit. Használata: <META name="KEYWORDS" content="meta tag gyakorlás">
CONTENT-TYPE | A kötelező META tag. Itt adhatjuk meg a weblap karakterkészletét. Ez biztosítja, hogy ékezethelyesen jelenjenek meg weboldalaink. Ennek hiányában egy esetleges idegen nyelvű környezetben ékezetes karaktereink furcsán (nem helyesen) jelenhetnek meg. Használata: <META http-equiv="CONTENT-TYPE" content="text/html; charset=iso-8859-2> Az előző példa a közép-európai (ISO) szabványt jelenti, de nem csak erre van lehetőségünk. A gyakrabban használt karakterkészletek: iso-8859-1 -> nyugat-európai [iso] iso-8859-2 -> közép-európai [iso] iso-8859-4 -> balti [iso] windows-1250 -> közép-európai [windows] utf-8 -> [UNICODE]
ROBOTS | Ez az elem a keresőrobotok oldalkövetését és oldalindexelését irányítja. Négy módon lehet ezt az elemet alkalmazni. index, - az oldal tartalmát is átnézi és indexelheti azt noindex, - az oldal tartalmát ne indexelje follow, - az oldal linkjeit kövesse nofollow, - az oldal linkjeit ne kövesse Használható még az ALL = INDEX,FOLLOW, és a NONE = NOINDEX,NOFOLLOW érték is. Példák: <META name="ROBOTS" content="INDEX,FOLLOW"> <META name="ROBOTS" content="NOINDEX,FOLLOW"> <META name="ROBOTS" content="INDEX,NOFOLLOW"> <META name="ROBOTS" content="NOINDEX,NOFOLLOW">

Most hogy ilyen szépen átnéztük a META tag-ek igeny csekély hányadát, hadd áruljak el valamit: a CONTENT-TYPE kivételével alig használjuk valamelyiket. Ezek a tag-ek elsősorban a keresőrobotoknak adnak használható információkat, de mivel ezek sokszor lényegesen másféleképpen működnek, majdnem felesleges a használatuk. Sokan azt tartják, hogy több kárt okozunk velük, mivel úgy elállíthatjuk a keresőrobotokat, hogy nem fogják kategorizálni az oldalunkat. A Google például kimondottan büntet (tiltólistára tesz), ha a KEYWORDS blokk túl hosszú. Ezzel szemben a CONTENT-TYPE igen fontos lehet. Biztosan találkozunk már olyan webloldallal, ahol a betűk nem voltak ékezethelyesek. Ez jelentheti akár az "ű" betű helyett a "û" használata, de sokszor olvashatatlanná válik az oldal a tag (nem) használata miatt. Akkor lássuk a konkrét példát:

[HTML]××[HEAD]×¤[META http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"]×[/HEAD]××[BODY]×¤árvíztűrőtükörfúrógép×¤ÁRVÍZTŰRŐTÜKÖRFÚRÓGÉP×[/BODY]××[/HTML]
Ha a kiírás befejeződött, megjelenik egy nagyító a jobb alsó sarokban. Ha rákattintasz, megjelenik a forráskód eredménye.
A megjelenő ablakot be kell zárnod, ha folytatni akarod az munkát! Ja és a nagyítót csak az ügyesek találják el! :)