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 / Csoportosító elemek

Tanulási útmutató

Összefoglalás

Ebben a leckében azon tageket vesszük sorra, amelyekkel bizonyos szempontok, szerepek szerint csoportosíthatjuk a tartalmakat.

Csoportosító elemek

Folytassuk az ismerkedést a HTML5 szabvány azon tagjeivel, amelyekkel különböző csoportosításokat végezhetünk el.

<p> – Bekezdés

Mire használjuk?

A <p> taggel már a bevezetőben megismerkedtünk. Segítségével a szöveget bekezdésekre oszthatjuk. Az adott bekezdés tartalmát a <p> és </p> elemek közé kell tenni. A záró </p> tag kirakása nem kötelező, de mi a kód átláthatóságának érdekében azt ajánljuk, hogy mindig szerepeltessük azt.

A böngészőprogramok a bekezdések előtt és után – a tagolás érdekében – nagyobb helyet hagynak, ennek mértékét is a stíluslapok segítségével adhatjuk meg a margó beállításával.

Amennyiben a bekezdésen belül sortörést akarunk elhelyezni, használhatjuk a korábban bemutatott <br> taget.

Paraméterek: globális attribútumok

Vissza a tartalomjegyzékhez

<div> – Blokk definiálása

Mire használjuk?

A <div> elemnek nincs önálló szemantikai jelentése, arra használjuk, hogy csoportba foglaljunk nagyobb blokkokat, míg a korábban bemutatott <span> tag a soron belüli elemek (pl. bekezdésen belüli szavak, szócsoportok, mondatok stb.) formázásánál lehet jó.

Paraméterek: globális attribútumok

Megjegyzés

A HTML5 előtt a <div> elemet gyakran használták a webfejlesztők arra, hogy az oldal fejlécét, láblécét, menüjét stb. megjelöljék és formázzák. A HTML5 olyan új strukturális elemeket vezet be, amelyekkel ezen oldalrészek precízebben leírhatók (pl. <header>, <footer>, <nav>.). Ezek szerepét a későbbiekben részletesebben bemutatjuk.

Az alábbi interaktív példában bekezdések és <div> elemek használatára is mutatunk példát.

Interaktív példa
Magyarázat

Az előző példában <div> elemekkel csoportosítottuk a bekezdéseket, amelyeket különböző osztályokba soroltunk. Ennek hatására különböző háttérszínű blokkokban jelennek meg a bekezdések.

Vissza a tartalomjegyzékhez

<hr> – Vízszintes elválasztó

Mire használjuk?

A <hr> tag elhelyezésével egy elválasztó vonalat jeleníthetünk meg. A <hr> tagnek nincs záró párja. Általában weboldalon belüli tagoló elemként szoktuk használni, például egymástól logikailag is elkülöníthető szövegrészek között. CSS segítségével megváltoztatható, formázható a megjelenése.

Paraméterek: globális attribútumok

Példa
Interaktív példa
Kapcsolódó akadálymentességi elvek

Itt nem egyszerűen arról van szó, hogy vizuálisan különítjük el a blokkokat, vagyis a <hr> elem nem helyettesíthető egy beállított alsó szegéllyel. A <hr> elemet a képernyőolvasó programok is támogatják.

A példa meghallgatása képernyőolvasó programmal

Hallhatjuk, hogy a <hr> taget elválasztóként olvassa fel a JAWS 14.

Vissza a tartalomjegyzékhez

<pre> – Előreformázott szöveg

Mire használjuk?

Olyan szövegnél alkalmazhatjuk, ahol fontos szerepe van a szöveg előre formázásának, vagyis az elhelyezett szóközöknek, sortöréseknek. A <pre> tag tartalmaként megadott szöveget a böngésző azonos szélességű (monospace) betűtípussal jeleníti meg.

Az alábbi esetekben érdemes lehet használni a <pre> elemet:

Paraméterek: globális attribútumok

Példa
            Fájdalomtól
            megtört szí
            vvel tudato
     m hogy hosszas szenvedés u
     tán tegnap délután meghalt 
     a Vers Az elhunytat alul-
            író személ
            yes halott
            jának teki
            nti s egyb
            en ezúton
            mond köszö
            netet mind
       azoknak kik virágot
     pacsirtát és ligetet helyez
  tek el szeretett halottunk sírján
              Emléke
              örökké
               élni
                fo
                g 
      

Csiki László képverse (Forrás: http://kepiras.com/category/kereszt-kulonszam/)

Gyakorlat

Az alábbi interaktív példában cseréld ki a <pre> taget <p> tagre, és nézd meg az eredményt!

Interaktív példa
A példa meghallgatása képernyőolvasó programmal

Annak ellenére, hogy külön sorba tördeltük a szavakat, egész jó eredményt kapunk a JAWS programban való felolvasáskor.

Kapcsolódó akadálymentességi elvek

Nem érdemes ASCII-ábrákat használni a weboldalakon, mert egy vak felhasználó számára azonosíthatatlanná válik egy ilyen módszerrel megadott ábra.

Vissza a tartalomjegyzékhez

<blockquote> – Idézet

Mire használjuk?

Amennyiben az oldalunkon egy külső forrásból származó idézetet helyezünk el, akkor azt érdemes <blockquote> tagben elhelyeznünk.

Paraméterek:

Példa

A HTML5 a HTML (Hypertext Markup Language, a web fő jelölőnyelve) korábbi verzióinak az átdolgozott változata. A kifejlesztésének egyik fő célja, hogy a webes alkalmazásokhoz ne legyen szükség pluginek (pl. Adobe Flash, Microsoft Silverlight, Oracle JavaFX) telepítésére.

Forráskód
<blockquote cite="http://hu.wikipedia.org/wiki/HTML5">
<p>
A HTML5 a HTML (Hypertext Markup Language, a web fő jelölőnyelve) 
korábbi verzióinak az átdolgozott változata. A kifejlesztésének egyik fő célja, 
hogy a webes alkalmazásokhoz ne legyen szükség plug-inek (pl. Adobe Flash, 
Microsoft Silverlight, Oracle JavaFX) telepítésére.
</p>
</blockquote>
A példa meghallgatása képernyőolvasó programmal

Hallhatjuk, hogy a JAWS program idézetblokként olvassa fel a <blockquote> tag tartalmát és a megadott forrást is felolvassa.

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.