Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / HTML-bevezető

Tanulási útmutató

Összefoglalás

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.

HTML-bevezető

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.

Alap HTML5-struktúra

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.

Forráskód
<!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.

Érdekesség

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.

Forráskód
<!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.

Megjegyzés

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.

Kapcsolódó ergonómiai elvek

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.

Kapcsolódó akadálymentességi elvek

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!

Interaktív példa
Magyarázat

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.

Gyakorlat

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!

Fontos

Nem elég csak elmenteni a változtatást, hanem a böngészőben frissíteni is kell az oldalt!

Vissza a tartalomjegyzékhez

Blokkszintű és soron belüli elemek

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.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

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.