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 / Oldalszerkezet elemek

Tanulási útmutató

Összefoglalás

Ebben a leckében azon elemeket tekintjük át, amelyek az oldal szerkezetének precíz leírásában segíthetnek.

Oldalszerkezet elemek

A következőkben megismerkedünk az úgynevezett oldalszerkezet elemekkel, amelyekkel precízen megadhatjuk az oldalrészek szemantikus jelentését.

Forrás

Az egyes elemek és tulajdonságok bemutatásánál felhasználtuk és kiegészítettük Nemes Adriána A HTML5 szabvány lehetőségeinek bemutatása (ELTE IK, 2011) című diplomamunkájának részleteit (Témavezető: Abonyi-Tóth Andor).

Megjegyzés

Sajnos – a téma jellegéből adódóan –a tageket nem feltétlenül tudjuk lineárisan bemutatni, mivel ezen tagekre a többszörös egymásba ágyazás is jellemző. Így a szövegben lesznek előre- és hátrautalások is.

<body> – Dokumentum törzse

Mire használjuk?

Már a bevezetőben is láttuk, hogy a HTML oldalak két fő részre tagolódnak, a <head>, illetve <body> részre. Ez utóbbiban kell elhelyeznünk azokat a jelölőket, amelyek az oldalon megjelenő tartalmakat (szöveg, kép, táblázat stb.) írják le.

Paraméterek:

Megjegyzés

Az eseménykezelők működését illetően a JavaScript-programozásba történő betekintéssel együtt lenne érdemes elmélyedni, de ez a terület már nem része jelen tananyagunknak.

Vissza a tartalomjegyzékhez

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> – Címsorok megadása

Mire használjuk?

A címsorok (heading) a szövegszerkesztő alkalmazásokban az oldalak logikai felosztását, a fejezetek meghatározását teszik lehetővé. Előnyük, hogy automatikusan tudunk tartalomjegyzéket generálni a címsorok struktúrájából. A HTML oldalaknál részben hasonló feladatot látnak el. Segítségükkel tagolhatjuk a tartalmunkat fejezetekre és alfejezetekre, és a navigációt is segítik.

Kapcsolódó akadálymentességi elvek

A képernyőolvasót használóknak lehetőségük van arra, hogy az oldalon szereplő címsorokat kigyűjtsék külön ablakban, és ezen lista segítségével navigáljanak az oldalon. Gyakorlatilag ily módon a címsorok az oldal tartalomjegyzékét mutatják be a vak felhasználóknak.

A HTML nyelvben a címsorokat a <h1>, <h2>, <h3>, <h4>, <h5> vagy <h6> tagekkel adhatjuk meg. Például a <h1> az adott tartalmi blokk fő címsora, <h2> egy alcím, <h3> egy mélyebb szintű alcím és így tovább. A HTML oldalak esetén 6 címsorszintet használhatunk.

Kapcsolódó ergonómiai elvek

A HTML5 szabvány előtt nagyon kellett figyelni arra, hogy a címsorszintek az oldalon logikusan legyenek egymásba ágyazva, vagyis egyes szintű címsorral kezdjünk, annak lehet további kettes címsora, de például nem használhatunk úgy hármas szintű címsort, hogy ne lett volna előtte kettes szintű címsor. Ez akkor jelentett főként problémát, ha nem lehetett tudni előre, hogy egy szerver által generált tartalmi blokk milyen kontextusba generálódik, ott volt-e előtte valamilyen szintű címsor, és ha igen, milyen.

A HTML5-öt támogató alkalmazásoknál a címsorszinteket az elemek egymásba ágyazása szerint is kiértékeli a böngésző. Vagyis ha van egy fő tartalmi blokkunk, amelyben van egy egyes címsor, de annak a tartalmi blokknak van egy beágyazott tartalmi egysége szintén egyes címsorral, akkor ez utóbbit kettes szintű címsorként veszi figyelembe, és így tovább…

A tag paraméterei: globális attribútumok

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

Hallhatjuk, hogy a címsorok felolvasásánál a JAWS bemondja azt is, hogy hányadik címsorszintről van szó.

Vissza a tartalomjegyzékhez

<main> – Fő tartalmi egység meghatározása

Megjegyzés

Bár a <main> elem a HTML5 specifikációban a csoportosító elemek között kapott helyet, számunkra úgy logikus, ha az oldalszerkezet elemekkel együtt mutatjuk be.

Mire használjuk?

Az oldal fő tartalmi egységének megjelölésére szolgál. Csak egy ilyen elemet helyezhetünk el a dokumentumban, és ez az elem nem lehet gyerekeleme a később bemutatandó oldalszerkezet elemeknek (<article>, <aside>, <footer>, <header>, <nav>).

Paraméterek: globális attribútumok

Kapcsolódó akadálymentességi elvek

Akadálymentességi irányelv, hogy a felhasználóknak legyen lehetőségük az ismétlődő blokkok elkerülésére az oldalakon. Ez praktikusan azt (is) jelenti, hogy a képernyőolvasó programot használó (vak, gyengénlátó) felhasználóknak ne kelljen minden egyes alkalommal végighallgatniuk az HTML-kódban elől szereplő navigációs linkeket, hanem ugorhassanak mindjárt a tartalomra egy link követésével. Ez a link a fő tartalmi egységre mutat, amelyet korábban a webfejlesztők (alkalmas tag hiányában) a <div> elemmel csoportosítottak, pl. <div id="main">, <div id="tartalom"> stb. módon. Láthatjuk, hogy a HTML5 szabványban már megvan az erre szolgáló tag, tehát a továbbiakban ne használjuk erre a <div> elemet, hanem alkalmazzuk helyette a <main> taget!

Kapcsolódó akadálymentességi elvek

A tartalomra ugrás céljára használt linket a képernyőolvasó programot használók számára kell elérhetővé tennünk, a vizuális böngészőprogramokban nem kell ennek megjelennie. Ezt elérhetjük úgy, hogy a linket kipozícionáljuk a képernyőről. Így a vizuális böngészőprogramokban „láthatatlan lesz”, de a képernyőolvasót használók számára elérhető marad.

Forráskód
<a href="#tartalom" style="position:absolute;left:-9999px">Ugrás a tartalomra</a>

Ez a példa egy képernyőről kipozícionált menüt mutat be. Ahhoz, hogy lássuk a hivatkozást, kikapcsoljuk a stíluslapokat a böngészőben (Firefox)

Flash lejátszó letöltése

Képernyőről kipozícionált menü

Vissza a tartalomjegyzékhez

<article> – tartalmi egység (pl. cikk) elhelyezése

Mire használjuk?

Az article tagekben helyezhetjük el az oldal tartalmi egységeit. Ez lehet egy fórumbejegyzés, egy újságcikk, blogbejegyzés, vagy bármilyen más független tartalom.

A tag paraméterei: globális attribútumok

Példa
Forráskód
<article>
    <h1>Cikk címe</h1>
    <p>Cikk tartalma...</p>
</article>

Lehet saját fejléce és lábléce. Egy cikk fejléce tartalmazhatja például a cikk címét, alcímét, publikálás dátumát a fejlécet jelző <header> tag-ek között. A láblécbe <footer> pedig kerülhet a szerző neve, elérhetősége.

Példa
Forráskód
<article>
    <header>
        <h1>Cikk címe</h1>
    </header>
    <p>Cikk tartalma...</p>
    <footer>
        <p>Szerző: Gipsz Jakab, a Magyar Érdekfeszítő Társaság alapítója.</p>
    </footer>
</article> 

Az <article> elemek egymásba ágyazhatók. A beágyazott <article> elem egy olyan cikket reprezentál, amely szorosan kapcsolódik a külső cikkhez. Például egy blogbejegyzés esetén a felhasználók által írt kommentek beágyazott <article> elembe kerülhetnek.

Ezt mutatja az alábbi példakód:

Példa
Forráskód
<article>
    <header>
        <h1>Városi legendák</h1>
    </header>
    <p>A legenda szerint a Terminátor 2 Elektromodulator dva címmel futott a
szlovák mozikban, és a Hasta la vista ottani megfelelője az Ahoj, Poplacsek volt.
A szlovákok azonban nem is ismerik poplaček szót.</p>
    <section>
        <h1>Hozzászólások</h1>
        <article>
            <footer>
                <p>Eszter szerint</p>
                <p><time datetime="2012-10-10T19:10-08:00"></time></p>
            </footer>
            <p>És mi a helyzet az „Elektromodulátor Dva” kifejezéssel?</p>
        </article>
        <article>
            <footer>
                <p>Imi szerint</p>
                <p><time datetime="2012-10-10T19:15-08:00"></time></p>
            </footer>
            <p>Hallottam, hogy van olyan verzió is, hogy "Motoroví Modulovy".</p>
        </article>
    </section>
</article>

Vissza a tartalomjegyzékhez

<header> – fejléc megadása

Mire használjuk?

A header taggel fejléc adható meg. Ez a rész tartalmaz bevezető információt a weboldalról vagy annak egy részéről. Lehet szokványos fejléc vagy akár valamilyen összetett adat.

A tag paraméterei: globális attribútumok

Példa
Forráskód
<header>
    <h1>A HTML5 szabvány</h1>
</header>

A fejléc nem egy külön része az oldalnak, hanem az egyes részeknek lehet saját fejléce.

Példa
Forráskód
<section>
    <header>
        <h1>A header tag</h1>
    </header>
    <p>A header tag lehet fejléce egy section tagnek is.</p>
</section>

Vissza a tartalomjegyzékhez

<footer> – lábléc

Mire használjuk?

A <footer> a lábléc jelölésére alkalmas tag. Nemcsak az oldal egészére, de akár egy különálló részre vonatkozóan is. Ebből kifolyólag akár többször is használható egy oldalon belül. A lábléc általában a webhellyel kapcsolatos információkat tartalmazza, mint például a készítő neve, kapcsolódó dokumentumok linkjei, szerzői jogi információk stb.

A tag paraméterei: globális attribútumok

Példa
Forráskód
<footer>
    <p>Fotó: Gipsz Jakab</p>
</footer> 

Tipikus tartalma a szerző, dátum vagy bármilyen kontakt információ.

Példa
Forráskód
<footer>
    <nav>
        <p><a href="/impressum.html">Impresszum</a> —
        <a href="/aszf.html">Általános szerződési feltételek</a> —
        <a href="/index.html">Főoldal</a></p>
    </nav>
    <p>Copyright &copy; 2013 Gipsz Jakab</p>
</footer>

Vissza a tartalomjegyzékhez

<section> – szakasz

Mire használjuk?

A <section> elem az oldal egy nagyobb részét foglalja magába. Azonos témához tartozó elemek csoportosítására való, melynek közös címe van. Az azonos témakörbe tartozó elemeket foglalja egy csoportba. Például egy <section> tagbe tartoznak a fejezetek, fülekkel ellátott oldalak egyes füleinek tartalma. Egy honlap például felbontható szakaszokra az alábbiak szerint: bemutatkozás, hírek, elérhetőség.

A tag paraméterei: globális attribútumok

Példa
Forráskód
<section>
    <h1>Bevezető</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id dictum diam. </p>
</section>
<section>
    <h1>Magamról</h1>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Vivamus ornare cursus sem non porttitor.</p>
</section>
<section>
    <h1>Fotóim</h1>
    <img src="img1.jpg" alt="alternatív szöveg">
    <img src="img2.jpg" alt="alternatív szöveg">
</section>

A <section> tageket egymásba lehet ágyazni.

Példa
Forráskód
<section> 
<h1>Fő címsor</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <section>
      <h1>Alszakasz fő címsora</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section> 
</section>

A <section> tagnek lehet fejléce és lábléce, azaz elhelyezhető benne <header> és <footer> tag is.

Példa
Forráskód
<section>
    <header>Cím</header>
    <p>szöveg</p>
    <footer>lábléc</footer>
</section>

A <section> elem egy különálló részt mutat a dokumentumból, amely saját címmel rendelkezik. Hasonlóan működik, mint a <div>, amikor elválaszt egy darabot az oldalból. De a <section> nem azonos stílusú dobozok megjelenítésére való. Arra ott van a <div> tag. Nem szabad abban az esetben használni a <section> taget, amikor az <article> az <aside> vagy a <nav> tag a megfelelőbb választás.

Vissza a tartalomjegyzékhez

<nav> – navigációs elemek

Mire használjuk?

A <nav> elem az oldal azon részének van fenntartva, amely más oldalakra, vagy az adott lap egy bizonyos területére mutató linkeket tartalmaz. Nem kell tartalmaznia az oldalon előforduló összes linket, csak azt, amelyik az ahhoz a részhez tartozik.

A tag paraméterei: globális attribútumok

Példa

Fontos fogalmak a web-fejlesztés témakörben:

validáció
A forráskód szabványoknak való megfelelőségének ellenőrzési folyamata.
Protokoll
Egy egyezmény, vagy szabvány, amely leírja, hogy a hálózat résztvevoi miképp tudnak egymással kommunikálni.

Forráskód
<nav>
    <h1>Menü</h1>
    <ul>
       <li><a href="#">Menüpont 1.</a></li>
       <li><a href="#">Menüpont 2.</a></li>
       <li><a href="#">Menüpont 3.</a></li>
       <li><a href="#">Menüpont 4.</a></li>
    </ul>
</nav>

A <nav>tag tipikus tartalma linkek listája, de előfordulhatnak benne más elemek is, mint például címsorok. A <nav> taget célszerű fejlécbe vagy láblécbe elhelyezni.

Példa
Forráskód
<header>
    <nav>
       <a href="main.html">Főoldal</a>
       <a href="introduction.html">Bemutatkozás</a>
       <a href="newsletter.html">Hírlevél</a>
    </nav>
</header>

Vissza a tartalomjegyzékhez

<aside> – Kapcsolódó, járulékos információ (jellemzően oldalsáv)

Mire használjuk?

Az <aside> tag tartalma kapcsolatban áll az oldal fő részével, érintőlegesen kapcsolódik a körülötte levő tartalomhoz. Általában oldalsáv formájában jelenik meg, ami olyan elemeket tartalmaz, mint kapcsolódó kommentek/linkek vagy címkefelhők. Szintén jól használható idézetek megjelenítésére, vagy szószedet készítésére, mely a cikkben szereplő idegen kifejezéseket magyarázza el.

A tag paraméterei: globális attribútumok

Példa
Forráskód
<article>
    <header>
        <h1>Lorem ipsum</h1>
    </header>
    <p>Vestibulum lacinia, enim nec aliquam facilisis, lacus HTML mollis eros,
et varius libero sapien ut diam. Sed sit amet ultrices eros. Phasellus non
nisi sed nisi viverra pulvinar. Donec placerat ante CSS velit pulvinar eleifend.
Nulla ut sodales libero.
Donec a rutrum risus.</p>
    <aside>
        <dl>
            <dt>HTML</dt>
            <dd>Leíró nyelv weblapok készítésére (HyperText Markup Language)</dd>
            <dt>CSS</dt>
            <dd>Stílusleíró nyelv (Cascading Style Sheets)</dd>
        </dl>
    </aside>
</article>

Vissza a tartalomjegyzékhez

<address> –Kontakt információ megadása

Mire használjuk?

Kontakt információ megadására használható, amely a legközelebbi <article>, vagy a <body> elemre vonatkozik. Tipikus, hogy a <footer> elemben kerül elhelyezésre.

A tag paraméterei: globális attribútumok

Példa
Forráskód
<footer>
 <address>
  Bővebb információért kérjük lépjen velünk kapcsolatba a következő elérhetőségen:
  <a href="mailto:info@gipszjakab.hu">Gipsz Jakab</a>.
 </address>
 <p><small>&copy; copyright Gipszilon Kft..</small></p>
</footer>

Vissza a tartalomjegyzékhez

Oldalszerkezet elemek (interaktív példa)

Az alábbi példában a fent bemutatott oldalszerkezet elemek mindegyikét használtuk az oldal struktúrájának leírásához.

Interaktív példa

A fenti példát kipróbálva láthatjuk, hogy ezen elemek többségének nincs semmilyen látványos hatása, ebben az esetben is a szemantika a lényeg, vagyis hogy az elemek szerepét precízen leírjuk. Ahhoz, hogy ezen elemek megjelenését át tudjuk alakítani, mélyebb tudásra lesz szükségünk a stíluslapok területén, így erre visszatérünk pár fejezettel később.

Most viszont folytassuk a HTML5 lehetőségeinek megismerését!

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.