Ebben a leckében megismerkedünk a HTML5 alapstruktúrájával, a blokkszintű és soron belüli elemek fogalmával, a tagek szemantikai jelentésének fontosságával, a paraméterek használati módjával és a minden tag esetén használható globális paraméterekkel. Ezt követően tovább bővítjük a HTML5-struktúrát, megnézzük hogy a kód tördelése befolyásolja-e a végeredményt, illetve, hogy a hibás egymásba ágyazás miért veszélyes. Azt elősegítendő, hogy a szabványban foglaltak betartásával dolgozzunk, megismerkedünk a W3C validátor eszközével is.
Tananyagunkban a HTML5 és CSS3 szabvány (a tananyag kidolgozásának pillanatában elérhető változatának) alapján dolgozunk. Először az alapvető HTML tageket tekintjük át, majd megnézzük, hogyan lehet a stíluslapok által módosítani a kinézetet. Ezt követően megismerkedünk a stíluslapok haladóbb funkcióval is.
Nézzük a HTML5 szabvány szerinti alap struktúrát, amelyből az oldalak készítése során ki fogunk indulni.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
A HTML-kódot az alkalmazandó dokumentumtípus (DOCTYPE) megadásával kezdjük (1. sor). Ezzel informáljuk a böngészőprogramot, hogy milyen szabvány szerint készítettük a dokumentumot, hogy az megfelelő módon tudja megjeleníteni. Ha elhagyjuk a dokumentumtípus megadást, azzal azt kockáztatjuk, hogy az oldal nem jelenik meg megfelelően a böngészőben, mivel ekkor a böngészőprogram nem szabványkövető üzemmódba kerül.
A HTML nyelv korábbi változataiban jóval hosszabb dokumentumtípus-definíciót kellett megadni, amelyet csak a leggyakorlottabb weblapkészítők tudtak fejből hibátlanul begépelni. A következő forráskód a HTML 4.01-es szabvány szigorú (strict) változat dokumentumtípusának megadására szolgál.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Láthatjuk, hogy a HTML5-re már csak azért is érdemes áttérni, mert jóval rövidebb, és megjegyezhetőbb a dokumentumtípusa. :-)
A dokumentumtípus megadása után már elkezdhetjük írni a megfelelő HTML tageket (kiejtve tegeket, vagy magyarul címkéket). Tagnek a < és > jelek között található utasítást nevezzük. A dokumentumtípus megadására szolgáló Doctype nem tekinthető HTML-tagnek, a HTML-állomány első tagjének (vagy gyökér elemének) a <html> taget nevezzük (2. sor). Egy tag hatása odáig tart, míg le nem írjuk a tag záró párját, ami ugyanaz, mint a nyitó tag, csak egy per jel (/) vezeti be. Például a <html> tag lezáró párja a </html> tag.
Később látni fogjuk, hogy vannak kivételek is, vagyis olyan tagek, amelyeknek nincs záró párjuk. Ilyen például egy kép beszúrására alkalmas <img> tag is.
A tageket egymásba is ágyazhatjuk, de ekkor fontos, hogy mindig azt a taget zárjuk le először, amelyet utoljára nyitottunk meg. Hasonlóan ahhoz, ahogy mondjuk a matematikai kifejezéseket zárójelezzük ( a + [ b * c ] ). Az alapstruktúrában is láthatjuk, hogy a <html> tagen belül lett megnyitva a <body> tag is, de a <html> elemet csak a <body> elem lezárása után zárhatjuk le a </html> taggel.
A <html> tag megnyitása után a fejlécelemek megadása következik, melynek kezdetét a <head> címke jelzi (3. sor). A fejlécelemek között szokás a lap címét megadni, mely címet a <title> és a </title> címkék közé kell zárni.
A <title> tagben megadott szöveg fog megjelenni a böngészőprogram címsorában (illetve több füles böngészés esetén az adott fülön), valamint ha valaki a kedvencei közé teszi az oldalunkat, akkor alapértelmezetten ez a szöveg kerül be a kedvencek közé is.
Nagyon fontos, hogy mit adunk meg oldalcímnek! Ahhoz hogy jól azonosítható legyen az oldalunk, használhatjuk a Témakör neve – Honlap neve konvenciót is. Pl. Önéletrajz – Gipsz Jakab honlapja.
Egy ilyen oldalcím sokkal informatívabb lesz a felhasználóknak, mintha egyszerűen az Önéletrajz szöveget látnák a kedvenceik között, hiszen ebből nem tudnák eldönteni, hogy kinek az önéletrajzáról van szó.
Ügyeljünk arra is, hogy oldalanként más-más oldalcímet adjunk meg, hiszen ha nem így járunk el, a felhasználókat félrevezethetjük, esetleg több ugyanolyan nevű, de eltérő tartalmú hivatkozásokat találnak a böngésző könyvjelzői között.
A vak felhasználók a megnyitott böngészőablakok között akkor tudnak megfelelően navigálni a képernyőolvasó programok segítségévek, ha a <title> tag megfelelően ki van töltve, vagyis nagyon fontos, hogy értelmes, megfelelő tartalmú és tagolású szöveget írjunk be!
Ez egyébként a WCAG 2.0 szabvány 2.4-es irányelvében is leírásra került.
2.4.2 Oldalcím: A weboldalak címekkel rendelkeznek, melyek leírják az oldal témáját vagy célját. (A szint)
Szintén a fejlécben helyezhetünk el különböző kliensoldali scripteket is, illetve a stílusdefiníciók is itt kaphatnak helyet. Később láthatjuk, hogy ezek akár külső állományban is elhelyezhetők, és ezen állományokra hivatkozhatunk itt a fejlécben. A fejlécet a </head> tag zárja le.
A dokumentumtörzsnek a <body> és </body> címkék közötti részt nevezzük. Ezen elemek között kell elhelyeznünk a lap tényleges tartalmát, a szövegeket, hivatkozásokat, képeket, táblázatokat, űrlapokat stb. Például az egyik leggyakrabban használt tag a <p>, amellyel bekezdéseket hozhatunk létre.
Ennyi magyarázat után nézzünk egy konkrét, kipróbálható példát!
A példa megtekintésekor láthatjuk, hogy a <title> tagben megadott szöveg jelenik meg a böngészőablak címsorában.
A weblap tartalma még csak egy egymondatos szöveg, amelyet egy bekezdésben (paragrafusban) helyeztük el a <p> tag segítségével. Ha több <p> tag követi egymást a dokumentumban, akkor a böngésző térközt hagy ki közöttük. Ezt mindenki megtapasztalhatja, ha a fenti példát úgy módosítja, hogy az eredeti bekezdés után vagy elé beír egy másikat, természetesen <p> és </p> jelölők közé.
Most a kódot az egyszerűbb tesztelés érdekében interaktívan kipróbálható formában tettük elérhetővé. Érdemes viszont kipróbálni azt is, hogy a fenti kódot külön szöveges állományban helyezzük el, majd elmentjük azt .html kiterjesztéssel, és megtekintjük egy böngészőprogramban.
Nyisd meg a gépeden található kódszintű szerkesztőprogramot (pl. Notepad++), és helyezd el benne a fenti kódot. Mentsd el a szöveges állományt mondjuk pelda.html néven! Nyisd meg az állományt a böngészőprogramban!
Írd át a dokumentumban az oldal címét (<title>), mentsd el, és frissítsd az oldalt a böngészőben és ellenőrizd, hogy érvényre jutott-e a változtatás!
Nem elég csak elmenteni a változtatást, hanem a böngészőben frissíteni is kell az oldalt!
Ahogy megismerkedünk a tagekkel, tapasztalni fogjuk, hogy vannak olyanok közöttük, amelyek előtt és mögött térközt hagy ki a böngészőprogram. Ilyen tipikusan a <p> tag, amely a bekezdések jelölésére szolgál. Ezeket blokkszintű elemeknek nevezzük.
Azonban vannak olyan tagek is, amelyek elé és mögé nem kerül térköz, ezek a soron belüli, vagy inline elemek. Ilyen például a <b> tag is, amellyel egy szövegrészt félkövér kiemeléssel láthatunk el.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.