HTML5 structure / struktúra

English Version!

A következőkben vizsgáljuk meg egy picit tüzetesebben a HTML5 új strukturális felépítését. Az alábbi kép jól demonstrálja, hogy mi is változott valójában.

html4 and html5 page structure

HTML4 & HTML5

Elmondható, hogy a HTML5 egy letisztultabb, talán egyszerűbb struktúrát hoz magával. Nézzük az egyes elemeket, hogy is működnek:

<header> – Címsor/fejléc elem. Általában a szakasz címsorát (h1-h6 vagy hgroup) helyezik itt el.

<nav> – Itt kapnak helyet az oldal fontosabb navigációs (más helyekre mutató) elemei

<article> – A „cikk” elem, ahogy a nevéből is következik, egy önálló tartalommal rendelkező rész.

<section> – Ez képviseli a tartalom egyes fejezeteit.

<aside> – Egy olyan oldalsávot („dobozt”) jelöl, amely a tartalomhoz nem feltétlenül kapcsolódik, de annak mégis szerves része.

<footer> – Lábléc, jellemzően kapcsolati adatokat, vagy az adott szakaszhoz tartozó információkat jelenít meg.

Nézzük meg az új struktúrát a gyakorlatban, egy egyszerű példa segítségével:

<!DOCTYPE HTML>

<html>

<head>

<title>HTML5 Structure Demo</title>

<meta charset="UTF-8">

</head>

<body>

<header>

HTML5 Structure Demo

</header>

<div id="content-holder">

<nav>

<a href="#">HTML5 - 1</a>

<a href="#">HTML5 - 2</a>

<a href="#">HTML5 - 3</a>

</nav>

<section>

<article>

<h3>Article Header</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis purus posuere odio volutpat accumsan. Nunc lobortis augue eu sem egestas eget bibendum leo bibendum. Nullam dui erat, tincidunt a gravida sit amet, commodo dictum risus. In non purus mi. Ut pellentesque ligula nec tortor bibendum et consequat nunc eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum pulvinar cursus laoreet. Donec eu leo ut lacus imperdiet euismod. Fusce tellus eros, lacinia nec tincidunt nec, mattis ut eros. Praesent id velit tortor, nec tincidunt orci. Aenean rhoncus pellentesque turpis, in condimentum ligula auctor vitae. Integer tristique aliquam leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lacinia condimentum lacus id hendrerit. Curabitur ultrices mi consectetur lorem tempus in rutrum leo congue. Etiam lacinia aliquet lacus. Vivamus id tellus in quam ullamcorper tincidunt sed ac ligula. Pellentesque non eleifend turpis. Fusce scelerisque odio id erat porta id posuere odio semper.

<footer>Article Footer</footer>

</article>

</section>

<aside>Mauris dui nisi, viverra at sagittis quis, tincidunt id enim. Praesent vitae sem elit. Donec vitae suscipit ipsum. Donec porttitor risus in eros rutrum mollis. Proin pellentesque pulvinar neque vel accumsan. Vestibulum vestibulum bibendum lorem vel posuere. </aside>

<footer>Page Footer</footer>

</div>

</body>
</html>

Természetesen a példánk tagolása és kinézete még koránt sem tökéletes, de érdemes egy picit beletekinteni a forrásba. Jól kirajzolódik a HTML5 nyelv fa szerkezete. (A példa fájlt innen le tudod tölteni.)

Ahhoz, hogy még szebbé (nem mintha most az lenne :-)) varázsoljuk szükségünk lesz egy kis CSS ismeretre is. Ígérem, nem viszlek be titeket a sűrűbe. Karcolgassuk meg hát a felszínt.
Először is lássuk, hogy tudunk a HTML5 fájlunkhoz egy CS3S fájlt hozzá fűzni. Én a CSS3 fájlomat html5.css néven neveztem el.

<link rel="stylesheet" href="html5.css"> <!--A CSS fájlunk belinkelése-->

Egészítsük ki ezzel a fenti példánkat:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Structure Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="html5.css"> <!--A CSS fájlunk belinkelése-->
</head>
<body>
<header>
HTML5 Structure Demo
</header>
<div id="content-holder">
<nav>
<a href="#">HTML5 - 1</a>
<a href="#">HTML5 - 2</a>
<a href="#">HTML5 - 3</a>
</nav>
<section>
<article>
<h3>Article Header</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis purus posuere odio volutpat accumsan. Nunc lobortis augue eu sem egestas eget bibendum leo bibendum. Nullam dui erat, tincidunt a gravida sit amet, commodo dictum risus. In non purus mi. Ut pellentesque ligula nec tortor bibendum et consequat nunc eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum pulvinar cursus laoreet. Donec eu leo ut lacus imperdiet euismod. Fusce tellus eros, lacinia nec tincidunt nec, mattis ut eros. Praesent id velit tortor, nec tincidunt orci. Aenean rhoncus pellentesque turpis, in condimentum ligula auctor vitae. Integer tristique aliquam leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lacinia condimentum lacus id hendrerit. Curabitur ultrices mi consectetur lorem tempus in rutrum leo congue. Etiam lacinia aliquet lacus. Vivamus id tellus in quam ullamcorper tincidunt sed ac ligula. Pellentesque non eleifend turpis. Fusce scelerisque odio id erat porta id posuere odio semper.
<footer>Article Footer</footer>
</article>
</section>
<aside>Mauris dui nisi, viverra at sagittis quis, tincidunt id enim. Praesent vitae sem elit. Donec vitae suscipit ipsum. Donec porttitor risus in eros rutrum mollis. Proin pellentesque pulvinar neque vel accumsan. Vestibulum vestibulum bibendum lorem vel posuere. </aside>
<footer>Page Footer</footer>
</div>
</body>
</html>

Ezután nincs más dolgunk, mint megformázni – ízlésünknek megfelelően – az oldal kinézetét. Törekedtem az egyszerűségre, hogy minél érthetőbb legyen, valamint kommentekkel láttam el. Bővebben a CSS3 referenciákban is utána tudtok nézni az egyes elemeknek (a források között megtaláljátok). Akkor nézzük a html5.css fájlunk tartalmát.

body {
margin: 0px auto; /*Megadja az elemek margóinak 4 értékét (felső, jobb, alsó, bal)*/
max-width:1000px; /*Szélesség definiálása (px - pixel)*/
}

header {
display:block; /*Meghatározza az elem rendezési tulajdonságait. (block - blokk-elemként)*/
text-align:center; /*Szöveg igazítása (center - középre)*/
padding:20px; /*Szükséges hely megadása az elem és az egyéb tartalom között*/
}

article
{
display:block;
margin: 15px;
padding: 15px;
}

nav{
display:block;
width:25%; /*az elem szélességének definiálása. */
float:left; /*Meghatározza hogy az elemet merre &quot;lebegtetjük&quot;*/

}

nav a:link{
display: block;
height:15px; /*Magasság meghatározása*/
padding: 10px;
padding-left: 10px; /*Az objektum bal oldala és az egyéb tartalom közötti hely meghatározása. */
}

#content-holder {
background-color: #B3B3B3;/*Háttér színének beállítása*/
}

section {
display:block;
width:50%;
float:left;
}

aside {
display:block;
width:20%;
float:right;
padding: 10px;
font-size: 12px; /*Betű méret definiálása*/
}

footer {
clear: both; /*A lebegő elemeket tünteti el a paraméter szerinti oldalakról. (both - mindkettő) */
display: block;
text-align:center;
padding: 5px;
}

A CSS3 fájlt innen le tudod tölteni.

Demo

Ha bármi kérdésetek van/hibát találtatok, akkor nyugodtan írjatok a kapcsolatban megadott e-mail címre.
A kész oldal és a szükséges CSS3 fájl egyben letölthető innen.


Forrás:

http://dev.w3.org/html5/spec/Overview.html?true
http://reference.sitepoint.com/css
http://www.w3.org/Style/CSS/

Creative Commons Licenc
HTML5 structure / struktúra a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...