HTML Info

Webről, magyarul, mindenkinek

Weblapszerkesztés 5 év múlva

2 megjegyzés

A HTML5 a következő nagy dobás a web és a webszerkesztők életében, így időnként nem árt vetni egy pillantást a formálódó specifikációra, annak alkalmazási lehetőségeire. Bár ma a böngészők még elenyésző hányadát támogatják az új kváziszabványnak, a weboldalak következő generációja a HTML 5 és a CSS 3 kombinációjára fog épülni.

html5-css3

Mivel a HTML5 és a CSS3 egyelőre nem minden böngésző által támogatott, különösen ideértve a régebbieket, mint pl. az IE6, kipróbálhatjuk ugyan az újdonságokat, de arra nincs garancia, hogy minden böngészőben ugyanúgy jelennek meg. Például a lekerekített sarkok nem jelennek meg IE vagy Opera alatt, de ez nem befolyásolja az oldal használhatóságát. Hasonlóképp, a rugalmas doboz modell is csak Firefox és Webkit alatt működik.

Annyit tehetünk, hogy olyan weblapokat készítünk, amelyek minden böngészőben jól működnek, de nem ugyanúgy. Mondjuk úgy, hogy a Webkitet használó böngészőkben a lap a rugalmas doboz modellt használja; bármely más esetben átvált a régi megoldásra, és az elemeket lebegőként kezeli – eltolja valamelyik oldalra, hogy kialakíthassa az oszlopokat.

A HTML 5 dokumentum

A HTML5 váza nem tartalmaz egetrengető újdonságokat.



Az egyik említésre méltó különbség az új dokumentum típus definíció, a , amely sokkal egyszerűbben kezelhető, mint a jelenlegiek. A többi már régi ismerősünk.

Új és stílusos

Hagyományosan a weblapok valahogy így néznek ki:

old-website

Ha HTML5-öt használunk, a diveket lecserélhetjük az erre a célra szolgáló elemekre; ezek a <header> és az <aside>. Nagy lépés ez a saját elemek és tulajdonságaik definiálása, valamint a HTML specifikusabbá tétele felé. A HTML4 kiadásakor még elképzelni sem tudták, milyen lesz a web 2010-ben. A HTML5 már előre tekint.

Ne gondoljuk azonban, hogy a <div> a HTML5 specifikációban szükségtelen; ismét arra használhatjuk, amire a HTML4-ben kitalálták. A legtöbb HTML5 tag működik Webkit (és Chrome 5 ) alatt, ám a Firefox egyelőre nem értelmezi pontosan a rugalmas doboz modellt. Az IE – nos, ahhoz, hogy működésre bírjuk, számos hacket kell bevetnünk.

Először is illesszük be a következő scriptet a dokumentum fejlécébe:

A HTML5 elemek nem működnek IE alatt, a script ezen segít. A CSS fájlok szintén segítenek kijavítani néhány hibát a lapkiosztásban.

A body

A body tartalma lehet a legaggasztóbb annak a számára, aki most ismerkedik a HTML5 újdonságaival. A HTML5 elemei különböznek HTML4-beli elődeiktől, de valójában szinte csak nevükben. Amit a HTML4-ben a stíluslapokon kellett beállítanunk, annak java részét a HTML5 definíció szinten tudja.

header

Nézzük a header elemet. A HTML5 újonnan vezeti be, és a következőképp definiálja:

A header elem navigációs célokat szolgál.

Vagyis a header elembe helyezhetjük az oldalon történő navigációt segítő elemeket, a logót és a bevezető szöveget. A navigációhoz a nav elem használatos, a logót egy divbe helyezhetjük. Vagyis, a header váza valahogy így nézhet ki:


Itt az ideje, hogy tartalommal töltsük meg ezeket az elemeket. A #logo divbe egy képet rakhaunk, vagy címsorokat írhatunk. Ha ez utóbbit választjuk, és több címsort szeretnénk alkalmazni (pl.. <h1>, <h2>), használjuk a <hgroup> elemet. A <hgroup> definíciója:

A hgroup elem egy szekció fejlécét képezi. Az elem a h1-h6 elemek csoportosítására használható, ha a fejlécnek több szinje van; alcímek, alternatív címek, vagy jelmondatok.

Vagyis, a példa kedvvért a logó helyére ez is kerülhet:

Ha ehelyett logót akarunk beszúrni, akkor így változik a kód:

A <nav>-on belül egyszerűen egy felsorolást használunk:

A tartalom

Ami a tartalom területét illeti, valahogy a következőképp nézhet ki:


Új elemként a <section> és az <aside> elemek jelentek meg. Ezeken kívül van egy <article> elem a <section> elemben, valamint egy <footer> elem.

Először is, a section elem definíciója azt mondja, hogy

A section elem a dokumentum vagy alkalmazás egy általános szekcióját (részét) jelenti. A szekció, ebben az értelemben, a tartalom tematikus csoportosítása, általában saját fejléccel”.

Mivel a <section> körbeveszi a cikk címét és bevezető összefoglalóját, a <section> elem használata megfelelőnek tűnik.

Az <article> elem definíciója szerint

egy dokumentum, oldal, alkalmazás, vagy webhely önmagát tartalmazó együttese, amely a fejlesztő szándékai szerint önállóan terjeszthető és felhasználható.

Például egy blogbejegyzés, vagyis tökéletes arra a célra, amire fel akarjuk használni. A <footer> elem

legközelebbi szekcionáló előd eleme vagy a szekcionáló gyökérelem láblécét jelenti. A lábléc általában a hozzá tartozó szekcióról tartalmaz információt; ki írta, linkeket a kapcsolódó dokumentumokhoz, copyright adatokat, vagy hasonlókat.

Végül, az <aside> elem

a lap egy szekcióját jelenti, amelynek tartalma érintőlegesen kapcsolódik az aside elemet körülvevő tartalomhoz, és amelyet a fő tartalomtól elvonatkoztatva kell kezelni. A nyomtatott tipográfiában az ilyen tartalmakat általában keretes írásként jelentetik meg.

Ezek után itt az ideje a tényleges tartalom hozzáadásának. Példaként:


A korábban felsorolt elemektől eltekintve, mintha HTML4 lenne, nem?

A lábléc

A láblécet a legegyszerűbb létrehozni, nem is töltök vele sok időt. Most tegyünk bele egy egyszerű copyright információt.

A következő részben megnézzük, hogyan lehet az új elemeket CSS3 használatával formázgatni.

Írta: htmlinfo

2010. 05 29 at 8:39 pm

Kategória: Tippek

Címkék , , ,

2 megjegyzés :: 'Weblapszerkesztés 5 év múlva'

Feliratkozás a megjegyzésekre: RSS vagy Trackback küldése: 'Weblapszerkesztés 5 év múlva'.

  1. […] This post was mentioned on Twitter by Palócz István and Dohány Tamás, Méhész Pál – E.M.. Méhész Pál – E.M. said: RT @tanarurkerem: Rövid de velős HTML5 bemutató, olvasd el kategória. http://icio.us/iwsdr5 […]

  2. Hello!

    A header, …, footer tagok jelenleg is használhatók, ha ccs-vel leírom a kinézetét, akkor megfelelően jelennek meg? Melyik böngészőkben működnek? (Pl.: ie6, ie7, ie8, firefox, opera, chrome, safari) Gondolom a böngészők még nem tudják értelmezni a tagot, de ettől függetlenül ha xml-ben bármilyen tagot létrehozhatok, amit megformázhatók, akkor itt is kéne működnie, nem?

    jeti

    2010. 06 04 at 0:38

Megjegyzés hozzáfűzése