032.1 Lecke 1

Tanúsítvány:

Web Development Essentials

Verzió:

1.0

Témakör:

032 A HTML-dokumentum jelölései

Fejezet:

032.1 A HTML-dokumentum szerkezete

Lecke:

1/1

Bevezetés

A HTML (HyperText Markup Language) egy olyan jelölőnyelv, amely megmondja a webböngészőknek, hogyan strukturálják és jelenítsék meg a weboldalakat. Az aktuális verziója az 5.0, amely 2012-ben jelent meg. A HTML szintaxisát a World Wide Web Consortium (W3C) határozza meg.

A webfejlesztésben a HTML alapvető készségnek számít, mivel meghatározza a weboldal felépítését és megjelenésének nagy részét. Ha a webfejlesztés területén akarunk elhelyezkedni, a HTML határozottan jó kiindulási pont.

A HTML-dokumentum szerkezete

Egy alap HTML-oldal felépítése a következő:

<!DOCTYPE html>
<html>
  <head>
    <title>A HTML-oldalam</title>
    <!-- Ez a dokumentum Header része-->
  </head>

  <body>
    <!-- Ez a Dokumentum Body része -->
  </body>
</html>

Nézzük meg részletesen!

HTML Tagek

A HTML a tartalom leírására és formázására elemeket (element) és tageket használ. A tagek szögletes zárójelekből állnak, amelyek a tag nevét veszik körül, például <title>. A tagek neve nem nagy- és kisbetű-érzékeny, bár a World Wide Web Consortium (W3C) a HTML jelenlegi verzióiban a kisbetűk használatát ajánlja. Ezeket a HTML-tageket a HTML-elemek felépítésére használják. A <title> tag például egy HTML-elem nyitó tagje, amely egy HTML-dokumentum címét határozza meg. Az elemnek azonban van két további összetevője. Egy teljes <title> elem így néz ki:

<title>A HTML-oldalam</title>

Az A HTML-oldalam az elem tartalma (content), míg a </title> a záró tag, ami jelzi, hogy az elem kész, befejezett.

Note	Nem minden HTML-elemet kell lezárni; ilyen esetekben üres elemekről, önzáró elemekről vagy void elemekről beszélünk.

Nézzük a többi HTML-elemet az előző példából:

<html>: Magában foglalja a teljes HTML-dokumentumot. Ez tartalmazza az oldalt alkotó összes taget. Azt is jelzi, hogy a fájl tartalma HTML nyelven íródott. A hozzá tartozó záró tag a </html>.
<head>: Az oldalhoz tartozó összes metainformációt tárolja. A hozzá tartozó záró tag a </head>.
<body>: Az oldal tartalmát és strukturális felépítését tartalmazza. A hozzá tartozó záró tag a </body>.

A <html>, <head>, <body> és <title> tageket csontváz tageknek is nevezzük, mivel a HTML-dokumentum alapstruktúráját biztosítják. Megmondják a böngészőnek, hogy egy HTML-dokumentumot olvas.

Note	Ezen elemek közül az egyetlen, ami szükséges ahhoz, hogy a HTML-dokumentum validált legyen, az a `<title>` tag.

Láthatjuk, hogy minden HTML-oldal egy jól strukturált dokumentum és hivatkozhatunk rá egy faként is, ahol a <html> elem reprezentálja a dokumentum gyökerét, a <head> és <body> elemek pedig az első ágait. A példából láthatjuk, hogy lehetséges az elemek beágyazása: például a <title> elem a <head> elembe van beágyazva, ami pedig a <html> elembe.

Hogy biztos legyen, hogy a HTML kódunk olvasható és karbantartható, győződjünk meg róla, hogy minden HTML-elem a megfelelő és sorrendben van-e bezárva. A böngészők lehet, hogy úgy fogják megjeleníteni a weboldalunkat, ahogy elképzeltük, de az elemek és a tagek pontatlan beágyazása hibát okozó gyakorlat lehet.

Végül külön meg kell említenünk a doctype deklarációt a dokumentumstruktúra legtetején. A <!DOCTYPE> nem egy HTML tag, hanem egy böngészőnek szóló instrukció, ami meghatározza a dokumentumban a használt HTML verzióját. A korábban bemutatott HTML dokumentumstruktúrában a <!DOCTYPE html> szerepelt, meghatározva, hogy a dokumentumban a HTML5-öt használjuk.

HTML Kommentek

HTML oldalak készítésekor jó gyakorlat megjegyzések (kommentek) beszúrása a kódba az olvashatóság és a nagyobb kódblokkok céljának leírása érdekében. A kommentet a  tagek közé illesztjük, ahogy az alábbi példában is látható:

<!-- Ez egy komment. -->

<!--
    Ez egy
    többsoros
    komment.
-->

A példa azt mutatja, hogy a HTML-megjegyzések egyetlen sorban is elhelyezhetők, de több soron is átnyúlhatnak. Mindenesetre az eredmény az, hogy a  közötti szöveget a böngésző figyelmen kívül hagyja, és így az nem jelenik meg a HTML-oldalon. Ezen megfontolások alapján levonhatjuk a következtetést, hogy az előző szakaszban bemutatott alap HTML-oldal nem jelenít meg szöveget, mivel a  és a  sor csak két komment.

Warning

A kommenteket nem lehet beágyazni.

HTML Attribútumok

A HTML-tagek egy vagy több attribútumot tartalmazhatnak a HTML-elem részleteinek megadására. Egy egyszerű, két attribútumot tartalmazó tag a következő formátumú:

<tag attribute-a="value-a" attribute-b="value-b">

Az attribútumokat mindig a nyitó tagban kell meghatározni!

Egy attribútum névből, ami a beállítandó tulajdonságot jelöli, egy egyenlőségjelből és az idézőjelek közé zárt kívánt értékből áll. Mind az aposztrófok, mind az idézőjelek elfogadhatóak, de ajánlott a projektben következetesen csak az egyiket használni. Fontos, hogy egyetlen attribútumérték esetében ne keverjük az aposztrófot és a kettős idézőjelet, mivel a webböngésző a vegyes idézőjeleket nem fogja egységként felismerni.

Note

Az egyik típusú idézőjelet gond nélkül beilleszthetjük másik típusú idézőjelek közé. Például ha a ' típusú idézőjelet kell használnunk egy attribútumértékben, beírhatjuk ezt az értéket a másik idézőjel, a " által határolt részbe. Azonban ha ugyanolyan típusú idézőjelet szeretnénk használni az értéken belül, mint amelyet az érték becsomagolásához használtunk, alkalmaznunk kell a " jelet az " idézőjelhez, illetve a ' jelet az ' aposztrófhoz.

Az attribútumok két kategóriáját a következő szekciókban tárgyaljuk: globális attribútumok és specifikus attribútumok.

Alap Attribútumok

Az alap attribútumok olyan attribútumok, amelyek bármely HTML-elem esetén használhatók. Ide tartoznak az alábbiak:

title: Leírja az elem tartalmát. Értéke gyakran eszköztippként jelenik meg akkor, amikor a felhasználó az elem fölé mozgatja a kurzort.
id: Egyedi azonosítót társít az elemhez. Ez az azonosító az egész dokumentumon belül egyedi kell hogy legyen és a dokumentum nem lesz valid, ha több elem id-ja ugyanaz.
style: Grafikai tulajdonságokat (CSS stílusokat) rendel az elemhez.
class: Egy vagy több osztályt rendel az elemhez, szóközzel elválasztott listaként. Ezekre az osztályokra lehet hivatkozni a CSS stíluslapokban.
lang: Meghatározza az elem nyelvét az ISO-639 szabvány kétkarakteres nyelvi kódjával.

Note	A fejlesztő úgy tárolhat egyedi információkat egy elemről, hogy definiál egy úgynevezett `data-` attribútumot, amely a `data-` előtagból és a kívánt névből áll, mint például a `data-additionalinfo`. Ehhez az attribútumhoz úgy rendelhetünk értéket, ahogy bármely más attribútumhoz is.

Specifikus Attribútumok

A többi attribútum az egyes HTML-elemekhez tartozik. Például az <img> HTML-elem src attribútuma adja meg egy kép URL-jét. Számos specifikus attribútum van még, ezekről a következő leckékben lesz szó.

A Dokumentum Fejléce

A dokumentum fejléce metainformációkat tartalmaz az oldalról, amelyeket a <head> elemben írunk le. Alapértelmezés szerint a dokumentum fejlécében szereplő információkat nem jeleníti meg a böngésző. Bár használhatjuk a <head> elemet az oldalon megjeleníthető HTML-elemek tárolására, ez nem ajánlott.

Cím

A dokumentum címe a <title> elemben kerül definiálásra. A tagek között meghatározott cím a böngésző címsorában jelenik meg és amikor könyvjelzőzni próbáljuk az oldalt, ez lesz a könyvjelző javasolt neve. A keresőmotorokban is ez jelenik meg az oldal címeként.

Egy példa erre az elemre:

<title>A teszt oldalam</title>

A <title> tag minden HTML-dokumentumban kötelező és csak egyszer határozható meg.

Note	Ne keverjük össze a dokumentum címét az oldal címsorával, amit a body-ban határozunk meg!

Metaadat

A <meta> elem metaadatok megadására szolgál, amelyek egy HTML-dokumentum tartalmának további leírását szolgálják. Ez egy úgynevezett önzáró elem, ami azt jelenti, hogy nem tartozik hozzá záró tag. Az alap attribútumokon kívül, amelyek minden HTML-elem esetén használhatók, a <meta> elem a következő attribútumokat használja:

name: Meghatározza, hogy mely metaadot írja le az elem. Egyedileg definiált értékre is beállítható, de a leggyakrabban használtak az author, description, és keywords.
http-equiv: HTTP-fejlécet ad a content attribútum értékéhez. Gyakori érték a refresh, amelyről később még lesz szó. Ha ez az attribútum beállításra kerül, a name attribútumot nem szabad beállítani.
content: Megadja a name vagy a http-equiv attribútumhoz társított értéket.
charset: Meghatározza a HTML-dokumentum karakterkódolását, például az utf-8 az Unicode Transformation Format — 8-bit.

Szerző, Leírás és Keresőszavak Hozzáadása

A <meta> tag használatával további információkat adhatunk meg a HTML-oldal szerzőjéről és leírhatjuk az oldal tartalmát:

<meta name="author" content="Vezetéknév Keresztnév">
<meta name="description" content="Az oldal tartalmának rövid összefoglalása.">

Próbáljunk meg az oldal tartalmához kapcsolódó kulcsszavakat felvinni az oldal leírásába. Ez a leírás gyakran az első dolog, amit a felhasználó lát, amikor keresőmotort használ.

Ha további, a weboldalhoz kapcsolódó kulcsszavakat szeretnénk megadni a keresők számára, az alábbi elemet használhatjuk:

<meta name="keywords" content="kulcsszo1, kulcsszo2, kulcsszo3, kulcsszo4, kulcsszo5">

Note

Régebben a spammerek olyan kulcsszavak százait és leírásokat adtak meg, amelyek egyáltalán nem tartoztak az oldal aktuális tartalmához, így az olyan keresésekben is megjelent, amelyek nem kapcsolódtak az emberek által keresett kifejezésekhez. Napjainkban a <meta> tagek másodlagos fontosságúak és csak a weboldalon szereplő témák megerősítésére szolgálnak, így már nem lehet velük félrevezetni a keresőmotorok új és kifinomultabb algoritmusait.

HTML-oldal átirányítása és időintervallum meghatározása a dokumentum önfrissítéséhez

A <meta> tag használatával automatikusan frissíthetünk egy HTML-oldalt egy bizonyos idő (például 30 másodperc) letelte után, az alábbi módon:

<meta http-equiv="refresh" content="30">

Lehetőségünk van arra is, hogy a weboldalt egy másik weboldalra irányítsuk át ugyanannyi idő eltelte után, az alábbi kód segítségével:

<meta http-equiv="refresh" content="30; url=http://www.lpi.org">

A fenti példában 30 másodperc után átirányítjuk a felhasználót az aktuális oldalról a http://www.lpi.org oldalra. Értékeknek bármit megadhatunk, amit szeretnénk. Ha a content="0; url=http://www.lpi.org" értéket adjuk meg, az oldal azonnal átirányításra kerül.

Karakterkódolás meghatározása

A charset attribútum meghatározza a HTML-dokumentum karakterkódolását. Egy gyakori példa:

<meta charset="utf-8">

Ez az elem meghatározza, hogy a dokumentum karakterkódolása utf-8, ami egy olyan univerzális karakterkészlet, amely gyakorlatilag bármelyik emberi nyelv bármelyik karakterét tartalmazza. Használatával elkerülhetjük más karakterkészletek, például az ISO-8859-1 (a latin ábécé) használata során felmerülő karaktermegjelenítési problémákat.

Egyéb hasznos példák

A <meta> tag két további alkalmazási területe:

Sütik beállítása az oldal látogatójának nyomon követésére.
A viewport (nézetablak) irányítása (a weboldal böngészőablakban látható területe), ami a felhasználó eszközének képernyőméretétől függ (például egy mobiltelefon vagy egy számítógép).

Ez a két példa azonban meghaladja a vizsga határait, így tanulmányozásukat a kíváncsi olvasóra bízzuk.

Gyakorló feladatok

Az alábbi tagek mindegyikéhez adjuk meg a megfelelő zárótaget:

<body>

<head>

<html>

<meta>

<title>
Mi a különbség a tag és az elem között? Használjuk ezt a bejegyzést referenciaként:

<title>HTML-oldal címe</title>
Mely tagek közé szúrhatjuk be a kommentjeinket?
Fogalmazzuk meg, mit jelent az attribútum és adjunk példákat a <meta> tagekre!

Gondolkodtató feladatok

Hozzunk létre egy egyszerű HTML5 verziójú dokumentumot, amelynek a címe az Első HTML-dokumentumom, törzsében pedig egy bekezdés van, a Helló Világ szöveggel! Használjuk a bekezdés (paragraph) taget <p> a törzsben!
Adjuk hozzá a szerzőt (Kevin Author) és a leírást (Ez az első HTML-oldalam.) a HTML-dokumentumhoz!
Adjuk hozzá a HTML-dokumentumhoz az alábbi kulcsszavakat: HTML, Példa, Teszt és Metaadat.
Adjuk a <meta charset="ISO-8859-1"> elemet a dokumentum fejlécéhez és írjuk át a Helló Világ szöveget japánra (こんにちは世界). Mi történik? Hogy oldhatjuk meg a problémát?
Írjuk vissza a szöveget Helló Világ-ra, ezután 30 másodperc elteltével irányítsuk át a HTML-oldalt a https://www.google.com címre! Írjunk egy ezt elmagyarázó kommentet a dokumentum fejlécébe!

Összefoglalás

Ebben a leckében megtanultuk:

A HTML szerepét
A HTML vázát
A HTML szintaxisát (tagek, attribútumok, kommentek)
A HTML fejlécét
A meta tageket
Hogyan készítsünk egy egyszerű HTML-dokumentumot

A leckében az alábbi kifejezésekről volt szó:

<!DOCTYPE html>: A deklarációs tag.
<html>: A HTML-oldalt alkotó összes tag tárolója.
<head>: A head összes elemének tárolója.
<body>: A törzs összes elemének tárolója.
<meta>: A metaadathoz tartozó tag, a HTML-oldalról szóló további információk megadására szolgál (például szerző, leírás és karakterkódolás).

Válaszok a gyakorló feladatokra

Az alábbi tagek mindegyikéhez adjuk meg a megfelelő záró taget:

<body>

</body>

<head>

</head>

<html>

</html>

<meta>

Nincs

<title>

</title>
Mi a különbség a tag és az elem között? Használjuk ezt a bejegyzést referenciaként:

<title>HTML-oldal címe</title>

Egy HTML-elem egy kezdőtagből, egy zárótagből és az ezek között lévő dolgokból áll. A HTML-tag egy elem kezdetének vagy végének jelölésére szolgál. Ezért a <title>HTML Page Title</title> egy HTML-elem, míg a <title> és a </title> a kezdő, illetve a záró tag.
Mely tagek közé szúrhatjuk be a kommentjeinket?

A komment a  tagek közé szúrható be és egy- vagy többsoros is lehet.
Fogalmazzuk meg, mit jelent az attribútum és adjunk példákat a <meta> tagekre!

Az attribútumokkal pontosabban határozhatjuk meg a HTML-elemet. A <meta> tag például a name és a content attribútumokat használja a HTML-oldal szerzőjének és leírásának megadásához. A charset attribútummal megadhatjuk a HTML-dokumentum karakterkódolását.

Válaszok a gondolkodtató feladatokra

Hozzunk létre egy egyszerű HTML5 verziójú dokumentumot, amelynek a címe az Első HTML-dokumentumom, törzsében pedig egy bekezdés van, a Helló Világ szöveggel! Használjuk a bekezdés (paragraph) taget <p> törzsben!
```
<!DOCTYPE html>
<html>
  <head>
    <title>Első HTML-dokumentumom</title>
  </head>

  <body>
    <p>Helló Világ</p>
  </body>
</html>
```

Adjuk hozzá a szerzőt (Kevin Author) és a leírást (Ez az első HTML-oldalam.) a HTML-dokumentumhoz!

<!DOCTYPE html>
<html>
  <head>
    <title>Első HTML-dokumentumom</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="Ez az első HTML-oldalam.">
  </head>

  <body>
    <p>Helló Világ</p>
  </body>
</html>

Adjuk hozzá a HTML-dokumentumhoz az alábbi kulcsszavakat: HTML, Példa, Teszt és Metaadat.

<!DOCTYPE html>
<html>
  <head>
    <title>Első HTML-dokumentumom</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="Ez az első HTML-oldalam.">
    <meta name="keywords" content="HTML, Példa, Teszt, Metaadat">
  </head>

  <body>
    <p>Helló Világ</p>
  </body>
</html>

Adjuk a <meta charset="ISO-8859-1"> elemet a dokumentum fejlécéhez és írjuk át a Helló Világ szöveget japánra (こんにちは世界). Mi történik? Hogy oldhatjuk meg a problémát?

Ha a példának megfelelően csináltuk, a japán szöveg nem jelenik meg rendesen. Ez azért van, mert az ISO-8859-1 a latin ábécének megfelelő karakterkódolás. Ahhoz, hogy a szöveg látható legyen, meg kell változtatnunk a karakterkódolást, például UTF-8-ra (<meta charset="utf-8">).

Írjuk vissza a szöveget Helló Világ-ra, ezután 30 másodperc elteltével irányítsuk át a HTML-oldalt a https://www.google.com címre! Írjunk egy ezt elmagyarázó kommentet a dokumentum fejlécébe!

<!DOCTYPE html>
<html>
  <head>
    <title>Első HTML-dokumentumom</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="Ez az első HTML-oldalam.">
    <meta name="keywords" content="HTML, Példa, Teszt, Metaadat">
    <meta charset="utf-8">
    <!-- Ez az oldal átirányítódik a Google-re 30 másodperc után -->
    <meta http-equiv="refresh" content="30; url=https://www.google.com">
  </head>

  <body>
    <p>Helló Világ</p>
  </body>
</html>