Röd/vit HTML5 Badge

⇓ OBS! ⇓

Den där blå remsan nere på botten av sidan innehåller en HTML & CSS redigerare och fungerar så här – om du vill visa/gömma redigeraren kan du göra det genom att klicka på den blå remsan där det står “Klicka här för att visa/gömma redigerare” – klicka på fliken medtexten “HTML Redigerare” och skriv in din HTML, klicka på fliken med texten “CSS Redigerare” och skriv in din CSS och för att se resultat klickar du på fliken där det står “Resultat visas här”.

 

Vi ska gå igenom grunderna i dom nya elementen. Du får ut mest av den här guiden om du kan en del HTML sedan innan, men det är inte nödvändigt då den här guiden kommer att vara rätt så grundlig.

Om du vill hitta en bra bok om HTML5 så har några förslag efter artikeln.

Författaren Daniel Karjanlahti – “Mitt mål med cr8gr8designs.com är att ge dig och alla andra som vill, en bra startpunkt att utgå ifrån när det gäller webbutveckling”

Vi gå igenom dom nya elementen som har tillkommit i HTML version 5, eller mer känd som som HTML5.

Vår mål blir att skapa en blogg, och här är en mockup av den:

Bild - HTML5 blog mockup uppmärkt

Vi kommer att använda oss av dom nya elementen i stället för div för att kapsla in de olika delarna av sidan och här är en lista över dom:

 

<header>

Header är en huvuddel av något, som själva hemsidan, en sektion av hemsida eller en artikel på en hemsida. Där har man tidigare använt sig av div tillsammans med id- eller klass- namn, oftast header. Oftast har man en huvudrubrik som t.ex. h1 eller h2 i en header. Du kan även ha en kort sammanfattning, sidans meny, en innehållsförteckning, författarnamn och datum i en header. Det går även att ha flera header:s på samma sida, som t.ex. en header för hela sidan med logo, plus en header för varje artikel med rubrik, författare och datum.

Okej, som du såg i vår mockup har vi in en header högst upp på sidan så då är det vettigt att vi placerar den först:

Nu kan det vara bra att lägga till lite CSS för att särskilja header:n från allt annat:

 

Screen-Shot: main-header
Bild: header ID => main

 

 

<nav>

Nav är en förkortning för navigation, och taggen används för en sektion av sidan som länkar till andra sidor, även kallad meny. Menyer brukar placeras högst upp och/eller längst ner på sidan, men även i höger- eller vänster- sidofält (vi har en sidofält som en <aside>). Man får dock ha flera nav på en sida.

Nav ska användas för länkar till andra sidor, länkar till delar inom sidan, men det är inte så att alla grupper av länkar på en sida måste vara i ett nav element. Nav elementet är lämplig endast för sektioner som består av stora navigeringsblock. Framför allt är det vanligt att i en sidfot ha en kort lista med länkar till olika sidor på en webbplats, till exempel villkoren för tjänsten, hemsidan, och en upphovsrättssida, och då är en footer element tillräckligt i stället för ett nav elementet.  källa – W3C Wiki

Jag tänkte att vi ska nästla vår menu på botten av header:n, och har i den ett par symboliska länkar till sidor:

Och nu ska vi placera den oordnade listan horisontellt genom att sätta float left på list artiklarna ( li ):

 

Screen-Shot-main-navigation
Bild: navigation ID => nav

 

 

<section>

“Section representerar en generisk dokument eller applikations del. I detta sammanhang är en sektion en tematisk gruppering av innehåll, vanligtvis med sidhuvud, eventuellt med en sidfot. Exempel är kapitel i en bok, de olika flikar i en flikdialogruta, eller de numrerade sektionerna i en avhandling. En webbplats startsida kan delas upp i sektioner för introduktion, innehållsinformation, reklamspalten, nyhetsområdet eller en sektion med länkar till olika relevanta blanketter/dokument. Section elementet är inte en generisk kontainer- element såsom en div, utan definierar avsnitt i ett dokument, som till exempel kapitel, sidhuvuden, sidfot eller andra delar av dokumentet” källa – HTML5 Doctor (min egen tolkning)

Så den borde vara alldeles utmärkt för vår huvudsektion med artikeln.

Och CSS:

screen-shot Huvud sektion
Bild: Huvud sektion

 

 

<article>

Article elementet utgör en komponent i en sida som består av en sluten komposition i ett dokument, sida, applikation eller webbplats och som är avsedd att vara oberoende utdelningsbara eller återanvändbara, t.ex. i en syndikering. Detta skulle kunna vara ett blogginlägg, en tidskrift eller tidningsartikel, ett blogginlägg, en kommentar från en användare, en interaktiv widget eller gadget, eller någon annan oberoende objekt av innehåll.  källa HTML5 Doctor

Vi ska ha tre kommentarblock som vi omsluter med article elementet och dom tre är alla omslutna av en section:

Och så lite CSS på det:

ScreenShot-comment-block
Bild: comment-block

 

 

 

<aside>

Nu kommer vi till den högra sidofältet som vi använder en aside till.

Representerar en sektion av en sida som består av innehåll som är tangentiellt relaterad till innehåll kring aside elementet, och som kan betraktas separat från innehållet. Sådana avsnitt är ofta representerade som sidofält i tryckt typografi. källa – HTML5 Doctor

Och så klart ska vi få det att bli snyggt med CSS:

Screen-Shot-aside
Screen-Shot-aside

 

 

<footer>

Nu är det dags för den nedre delen av sidan, d.v.s. sidfoten. Och här kommer hela koden:

 

Länkar:

PDF bok – Dive into HTML5 av Mark Pilgrim

HTML5 Cheat-sheet (fusklapp)

Skapa din första webbsida – HTML5 semantisk uppmärkning

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

%d bloggare gillar detta: