Archívum a január, 2012
Egy kis szünet után ismét jelentkezek egy cikkel. Remélem felkészültetek, ezúttal csinálunk egy komplett fizetési űrlapot, annak minden kellékével együtt.
Nem lesz egyszerű dolgunk, hiszen itt már komolyan kell az egyes strukturális elemeket használni, valamint fejest ugrunk a css3-ba is. Ha valamelyik parancsot nem érted és én nem láttam el commenttel, akkor sokat segíthet a CSS3 referencia. Találsz magyarul vagy angolul is. Valamint, javasolt a kód letöltése és ízekre szedése, átírása, ahogy jól esik.
Vágjunk is bele, kezdjük a HTML5 résszel, hiszen ez az egyszerűbb, itt csak az lesz fontos, hogy a struktúrát megfelelő logikával építsük fel, hogy a “csinosítás” egyszerűbb legyen.
A HTML5 beviteli elemeit fogom használni, értelemszerűen a következőket:
- text
- tel
Valamint pár kiegészítő opciót, amiket már megnéztünk az előzőekben:
- autofocus
- required
- placeholder Tovább olvasom »
Űrlapokkal mindenütt találkozhatunk a weben, elengedhetetlen tartozékai szinte az összes weboldalnak. Szerencsére a HTML5 szabvány kidolgozásakor ez a ma már elavult, különböző praktikákkal „turbósított” terület nagyobb figyelmet kapott. A HTML5 szabvány jelenlegi állapotában 13 új beviteli elemet (input types) tartalmaz, vagy módosított működéssel bírót. (Ez így péntek 13.-án nem rossz, kétszer is átszámoltam. )
HTML5 beviteli elemek (input types)
Akkor lássuk azt a bizonyos 13 új HTML5 beviteli elemet (minden elemnél egy egyszerű példát is beszúrok, az adott elem használatához egy reprezentatív értékkel ellátva):
color – Egy natív színválasztó, melynek segítségével a felhasználó választhat egy színt.
<input type="color" value="#99BBEE">
date – Dátumválasztó beviteli elem
<input type="date" value="2012-01-13">
datetime – Dátum és időválasztó elem Tovább olvasom »
We can meet with forms throughout the internet. They are crucial elements of the wegpages. Fortunately during the standard’s development greater attention has been given to the forms. In current condition the HTML5 standard contains 13 new input or modified operation types.
HTML5 input types
Let’s see then the 13 new HTML5 input types (I’m gonna give a simple example for every type with a representative value):
color – A native color elector which helps to chose a color.
<input type="color" value="#99BBEE">
date – Allows the user to select a Date.
<input type="date" value="13-01-2012">
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 »
Examine the new structural build up of the HTML5 from a little bit closer. The picture beneath can demonstrate well what exactly has changed.
HTML4 & HTML5
HTML5 brings a cleaner maybe simplier structure with itself. Let’s see every single elements how they are works:
<header> Heading/header element. Overall they put the heading’s section here.(h1-h6 vagy hgroup)
<nav> The more important navigation elements of the page can get place here.(links to other sites)
<article> The “article” is just as its name implies, a separate section with content.
<section> This represents the content of each of the chapters.
<aside> Represents a sidebar (box) that the content is not necessarily linked to but it’s still an integral part of it.
<footer> Typically it shows the connection informations or the informations relating to the specific section. Tovább olvasom »