3. Lecke: A HTML nyelv

iDevice ikon Célok
  • Ismerje a HTML nyelv szintaktikáját
  • Ismerje az XHTML nyelv szabályait
  • Ismerje egy weboldal forrásának felépítését
  • Ismerje a weboldal forrás fej részének legfontosabb elemeit

Tartalom
  • A HTML nyelv szerepe
  • A HTML nyelv szintaktikai szabályai
  • Az XHTML nyelv szabályai a HTML nyelvhez képest
  • A weboldal forrásának általános felépítése
  • A weboldal fej részének legfontosabb elemei

A HTML nyelv

Ahogy korábban már szerepelt, a statikus weboldalak elkészítéséhez nem szükséges programozói tudás és programnyelv. A weboldal leírásához egy ún. jelölő nyelv szükséges, ez a HTML nyelv (Hyper Text Markup Language). A nyelv első verzióját 1991-ben hozták nyilvánosságra. Azóta a HTML 5 a legfrissebb verzió, de még elterjedtebb a HTML 4.01. A HTML 5 legfontosabb újdonsága az elődhöz képest, hogy bizonyos elavult elemek kikerültek, illetve új elemek és új tulajdonságok bekerültek a nyelvbe. Továbbá a mai weboldalak igényeinek megfelelően jobban támogatják a fejlettebb grafikák, videók és hangok beágyazását az oldalakra.
A HTML nyelv szintaktikai jellemzői, azaz formai szabályai, a következők. A forrás egy szöveges állomány, aminek a tartalma két részre bontható: úgy nevezett tag-ekre és statikus szövegre. A tag egy < és > jel közé írt elem, amely meghatároz egy elemét a weboldalnak, mint például egy bekezdést, egy képet, stb. A tag-nek van egy neve, ami közvetlenül a < jel után következik szóköz nélkül, majd attribútumokat kaphat, amelyeknek egyenlőség jellel értéket adunk. Például

<style type=”text/css”>

A legtöbb tag-nek van egy lezáró párja, ami azt jelenti, hogy a tag hatóköre a nyitó és záró elem közötti részre vonatkozik. A lezáró tag neve ugyanaz, mint a nyitóé, de egy / jel szerepel előtte és nincsenek attribútumai. Tehát az előző példa pontosan:

<style type=”text/css”> … </style>

Bizonyos tag-eknek nincs záró párja, ilyenkor a tag már önmagában egy weblap elemet jelöl és nem valami másra vonatkozik. Ilyen például a sortörés a szövegen belül.

<br />

A HTML nyelvben is van lehetőség a kódba megjegyzések írására, amelyet a böngésző, mint értelmező, nem vesz figyelembe. Ennek szintaktikája:

<!-- megjegyzés -->

 

Az XHTML nyelv

Az XHTML (EXtensible Hyper Text Markup Language) nyelv 2000-ben jelent meg és gyakorlatilag a HTML nyelv szintaktikailag szigorúbb formája. Mivel a HTMT nyelv több pontatlanságot is elviselt, így az értelmezése nehézkessé illetve nem egyértelművé vált. Emiatt bevezettek néhány szigorú szabályt, amit az XHTML nyelvben megkövetelünk a weboldal forrásától. A szabályok a következők:

  • Minden tag-et kötelező lezárni. Amely tag-eknek nincs záró elemük, a lezárást már a nyitó elemben jelölni kell a > jel előtti / jellel.

Például <br />

  • Minden tag nevet és attribútum nevet csupa kisbetűvel kell írni.
  • Minden attribútum értéket idézőjelek vagy aposztrófok közé kell tenni.
  • Minden tag-et helyesen kell egymásba ágyazni. Azaz ha egy tag-et egy másik tag-en belül nyitottunk, akkor belül is kell lezárni.

Így a <p><a>…</p></a> beágyazás helytelen és helyesen <p><a>…</a></p>.

  • Minden felvett attribútumnak kötelező értéket adni.
Mivel a HTML nyelvben megengedett volt, hogy bizonyos attribútumnak ne adjunk értéket (mert már önmagában is hordozták a jelentését), az XHML nyelvben az attribútumnak a nevével megegyező értéket kell adni.
Például a checked tulajdonsággal be lehetett kapcsolni egy jelölőnégyzetet, ez XHTML-ben helyesen checked="checked" (lásd 8. Lecke).
  • Kötelező egy ún. gyökér elemet felvenni a dokumentumba, amely magába ágyazza az összes többi tag-et. Ez a <html> … </html> elem.
  • Kötelező, hogy az oldalnak legyen fej és törzs része, ha üresen is. Ezekről még lesz szó a fejezet későbbi részében.
  • Továbbá kötelező két olyan rész még, amelyet ebben a tananyagban nem részletezünk. Az egyik a <!DOCTYPE …> a forrás első sorában, amely pontosan leírja egy definíciós állomány segítségével, hogy melyik tag-et hogyan kell használni és értelmeznie a böngészőnek. Ennek használata fontos, mert néhány böngészőben bizonyos lehetőségek csak ebben az esetben használhatók. A másik az xmlns="..." tulajdonság megadása a <html> tag-ben.
    Például:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

</html>

A weboldal forrásának részei

A weboldalt alapvetően két részre lehet bontani: a fejre és a törzsre. A fejet a <head></head> a törzset a <body></body> tag-ek határozzák meg. Minden esetben először a fej szerepel és csak utána a törzs. Tehát a weboldal általános felépítése XHTML nyelven:


<!DOCTYPE …>

<html xmlns=”…”>

<head>

</head>

<body>

</body>

</html>


A fejben szereplő tag-ek a weboldal járulékos információit adják, illetve a helyes megjelenítéshez szükségesek. A törzsben szerepelnek a ténylegesen megjelenítendő tag-ek.

Így elmondható, hogy a forrásban szereplő tag-ek és szövegek egy fa struktúrába rendezhetőek, amelynek gyökere a <html> és két közvetlen gyereke van, a <head> és a <body>. Minden további elem ezekből származik közvetlenül vagy közvetve.


5. Ábra: A weboldal forrásának elemei faként ábrázolva.

A fej rész
A fejben szereplő tag-ek sorrendje tetszőleges és jellemzően mindből csak egy szerepel a meta és a link tag-eket leszámítva. A legfontosabb elemek a következők.

Cím
Az oldal címét megadhatjuk a
...

<title> … </title>

tag-gel, amely megjelenik a böngésző fejlécében illetve a böngészőben az oldal „fülén". Ennek kitöltése azért is fontos, mert a keresők indexelik az oldalt a címe alapján is.

Fájl csatolások
A <link … /> tag segítségével más fájlokat tudunk az oldalunkhoz csatolni, mint például egy stíluslapot (a 4. leckében lesz szó róla).

<link href=”stilus.css” type=”text/css” rel=”stylesheet” />

Ahol a href adja meg a fájl elérését, a type a fájl típusát és a rel az ehhez az oldalhoz való viszonyát.

Stílus megadása
Az oldalhoz stílust lehet definiálni a fej részben a

<style type=”text/css”>… </style>

tag-ek segítségével. Erről a következő fejezetben részletesen lesz szó. Fontos megjegyezni, hogy ezeken a tag-eken belül már nem a HTML nyelv szabályai érvényesek, hanem a stílust leíró CSS nyelv szabályai.

Programkód megadása
Az oldalon belül több helyen is meg lehet adni programkódot. A kliens oldali JavaScript kódot a

<script type=”text/javascript”>…</script>

tag-ek között lehet megadni. Fontos itt is, hogy ez a tag estében is a nyitó és záró elem között már nem a HTML nyelv érvényes, hanem már az adott programozási nyelv szabályai.

Az oldal járulékos információi
Az oldalhoz adatokat lehet megadni, amelyre a <meta … /> tag szolgál. Ezeket a böngésző, a keresőmotorok és egyéb webes applikációk használják. Az ilyen tag-ek két csoportra bonthatóak. Az egyik, amelyek egy HTTP header információt tartalmaz, ennek a két attribútuma a http-equiv=”…”, amely tartalmazza az adat nevét valamint a content=”…” az adat értékét. Ezek közül a leggyakrabban használtak:

  • A content-type tulajdonsággal megadhatjuk az oldalunk karakter-kódolását:

<meta http-equiv="content-type" content="text/html; charset=”ISO-8859-2" />

  • Az oldal nyelve megadható a content-language tulajdonsággal:

<meta http-equiv=”content-language” content=”hu-HU” />

 

A másik csoport, amely nem tartozik a HTTP header információk közé, ezekek a name=”…” attribútummal adjuk meg a nevét és szintén a content=”…” attribútummal az értékét. Ezek közül a legfontosabbak:

  • Megadható az oldal szerzője az author tulajdonsággal:
<meta name=”author” content=”Tóth Attila” />

  • Egy rövid leírás adható az oldalról a description tulajdonsággal, amely azért is fontos, mert a keresőmotorok vizsgálják az oldalt eszerint is.
<meta name=”description” content=”bemutatkozó oldal” />

  • Nagyon fontos, hogy az oldalunkhoz kulcsszavakat adjunk meg, ami alapján a keresők indexelik az oldalunkat, így a felhasználók könnyebben fogják megtalálni. Erre szolgál a keywords tulajdonság:
<meta name=”keywords” content=”html, webfejlesztés” />
iDevice ikon Feladat

Készítse el a weboldal forrásállományainak vázát, azaz készítsen egy olyan HTML forrásfájlt, amely tartalmazza a források általános szerkezetét.

  • Adja meg a dokumentum típusát! Javasolt korszerű típust választani, mint a HTML5 vagy az XHTML dokumentumtípust.
  • Adja meg a fej részének elemeit, legalább a title és legfontosabb meta tag-eket!
  • Töltse ki a szükséges meta tag-eket a megfelelő adatokkal!

iDevice kérdés ikon Feleletválasztós teszt
Miből áll egy HTML forrásállomány?
  
Tag-ekből és szövegből.
Szövegből, képekből, linkekből.
Tag-ekből, szövegből, képekből.

Mi az XHTML nyelv?
  
A HTML nyelv egy szigorúbb formai szabályokat betartó megírt változata.
A stílusokat leíró nyelv.
A HTML nyelv újabb verziója, ami már jobban támogatja a médiaelemeket.

Mire való a DOCTYPE?
  
Ezzel meg tudjuk adni azt a szabályrendszert, ami leírja, hogy a weboldalunk forrását hogyan értelmezze a böngésző.
Ezzel adjuk meg a weboldal karakterkódolását.
Ezzel adjuk meg a weboldal nyelvét.

Milyen fő részei vannak a weboldal forrásának?
  
A fej (head) és a törzs (body).
A html, a head és a body.
A style, a script, a title, a link és a meta.

Mire való a keywords meta elem?
  
Kulcsszavakat adhatunk meg, amely alapján a keresőmotorok indexelik az oldalunkat.
Az oldal címét adjuk meg.
Az oldal egy leírását adjuk meg, ami alapján a keresőmotorok is indexelnek.