A ‘HTML5 Page Structure’ kategória archívuma
Ebben a részben, megnézzük, hogyan tudjuk a táblázatunkból kinyerni az adatokat és hogyan tudunk belőlük szép grafikonokat készíteni, előre felhívnám a figyelmeteket, hogy ez nem igazán igazodik a HTML5-höz. Ez a verzió amit itt bemutatok, nem egy új technika, de hamarosan kiadják a canvas-os megoldást is. Egyelőre a böngészők felkészültsége miatt, az alábbi változat használatát javaslom.
Eddig a honlapunkon a dinamikus adatábrázolást csak a Flash segítségével tudtuk megvalósítani. (Voltak különböző hegesztési és kazánkovácsolási eljárások, amivel megoldható, de szép csak a Flash segítségével volt, így én azokat nem tekintem megoldásnak.) Nézzük mire lesz szükségünk, hogy elkészítsük az első grafikonunkat.
1. Lépés a szükséges JavaScript és CSS fájlok leszedése
Először is szedjétek le ezt a szépséget: http://code.google.com/p/dwpe/downloads/list (ez egy nagyszerű kis javascript +css -es open license-es kiegészítés, érdemes mélyebben bele túrni!) Vagy az általam már előkészített célfájlokat. Ezután kezdődhet a táblázat kreálás. Tovább olvasom »
A táblázatok lényegében nem sokat változtak az előzőekhez képest, de úgy gondoltam érdemes szót ejtenünk róla, hiszen így lesz teljes a kép. Az ember a táblázatban általában összetartozó adatokat ábrázol. Egy kis trükkel és persze a CSS3 segítségével nagyon szépen fel tudjuk dobni az általunk készített táblázatokat. Esetleg grafikonokat is készíthetünk, de erről egy későbbi cikk szól majd. Nézzük milyen lehetőségeink vannak ha táblázatokat szeretnénk készíteni.
A táblázatokhoz tartozó elemek
<table> – táblázat definiálása. Nos, a <table> elem esetében jelenleg egyetlen régi attribútum sem támogatott, így érdemes azokat kerülni.
<caption> - A táblázat címe, itt is megszűnt az összes attribútum támogatása egyelőre.
<colgroup> – oszlopcsoport, melyek tulajdonságait tudjuk a segítségével egyidejűleg beállítani. Minden attribútum támogatása megszűnt.
<th> és <td> – A táblázat fejléce és egy cellája, itt is elég nagy a zűrzavar, mert a legtöbb régi attribútum támogatása nincs benne a HTML5-ben, nézzük melyek maradtak meg.
colspan – Jelzi, az oszlop szélességét.
headers – A fejlécben lévő információk kiíratására szolgál.
rowspan – Jelzi a sor magasságot.
<tr> – táblázat 1 sora, minden attribútum támogatása megszűnt.
<thead> – táblázat feje, minden attribútum támogatása megszűnt.
<tbody> – táblázat törzse, minden attribútum támogatása megszűnt. Tovább olvasom »
Szintén ötletként kaptam, hogy a szöveg jelölésekkel egy kicsit részletesebben foglalkozzunk. Ezért úgy gondoltam, hogy főként az újításokra nézünk egy-két példát, valamint a szöveg kiemelésre.
Nézzük mi az amit a szövegekhez kapcsolódóan jó, ha tudunk. Kezdjük talán az alapokkal. A szövegeinket, jó ha bekezdésekbe szedjük, melyre a <p> elem szolgál. Régen volt egy align nevezetű attribútuma, de már a HTML4-ben is elavultnak számított így a HTML5 már nem támogatja.
Használata nagyon egyszerű:
<p>Ez egy új bekezdés</p>
A következő a <q> elem, mely rövid idézetek beillesztésére szolgál, a böngészők egy része idézőjelek között jeleníti meg ezzel a tag-al ellátott szövegeinket. Egyetlen attribútuma a cite, melynek segítségével megjelölhetjük a forrást, ahonnan idézünk. Használható erre a célra még a <blockquote> elem is, mellyel hosszabb idézetek jeleníthetőek meg, de én a <q> elem használatát javaslom, mert jelenleg a böngészők össze-vissza indítanak ez utóbbi esetében új bekezdéseket. A használata 100%-ig megegyezik a <q> elemével. Használata:
<q cite="http://www.magyarorszag.hu/">http://html5.ugyesen.com/ HTML5 webportál</q>
A <br> elemet használhatjuk sortörésre. Általában szimpla elemként használjuk, lássuk erre egy példát:
<br /> ez egy sortörés.
A <h1> <h2>…<h6> elemek segítségével a szövegeinket címezhetjük meg, csökkenő sorrendben, tehát a <h1> a legnagyobb, míg a <h6> a legkisebb cím szöveg. Tovább olvasom »
Többen jeleztétek, hogy a listák és az ahhoz kapcsolódó változások kimaradtak az eddigiekből. Ezzel a cikkel szeretném ezt az űrt megszüntetni. Véleményem szerint itt kevesebb változás történt a HTML4-hez képest. Szinte teljesen hasonlóan hozhatóak létre számozott (<ol> … <li>) és számozatlan (<ul>…<li>) listák, vagy esetleg vegyes listák.
A HTML nyelvben eddig is volt lehetőségünk listák készítésére, nézzünk erre egy egyszerű példát.
Számozatlan lista felépítése:
<ul> <li>Budapest</li> <li>Pécs</li> </ul>
Tovább olvasom »
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 & 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: Tovább olvasom »