Een website maken met HTML5 en CSS 3 – deel 3

Het derde deel van de serie artikelen om een website te gaan maken met HTML5 en CSS3. Vandaag ga ik verder met de indexpagina, de videopagina en de contactpagina. Vervolgens is de opzet voor de webpagina in HTML5 compleet, de hele code daarvan krijg je ook te zien.

Het artikel

Het artikelgedeelte is het belangrijkste onderdeel van de webpagina. Dit zou je ook nog weer als sectie kunnen zien en voorzien van de ‘section’-tag, maar dat doe ik in dit geval niet.
De onderdelen die ik wel gebruik kun je hier lezen:

De titel van het artikel

Gepost op:

afbeelding Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit.

Time tag

Je ziet dat er de tag <time> aan het artikel is toegevoegd. Dat kun je gebruiken om een blogpost te voorzien van de juiste publicatietijd, maar het kan ook in een artikel staan als er een tijdstip wordt genoemd en deze kan dan nader worden gespecificeerd met het attribuut ‘datetime’.

Datetime is als volgt opgebouwd: 2010(jaar)-05(maand)-05(dag)T(tijd)01(uur):25(minuut):00(seconden)+01:00(tijdzone)

In het artikel wordt de koptekst nog voorzien van de header-tag. Dat is een optie, maar je zou er ook van af kunnen zien.

Footer en aside

De beide onderdelen footer en aside hebben nu alleen nog maar vulling nodig, maar hoeven in dit artikel nog niet nader bekeken worden. We hebben nu dus de code voor de eerste webpagina compleet:




Titel van de webpagina



HTML5-site.nl

Nieuws

De inhoud van blok 1 Nieuws

Video

De inhoud van blok 2 Video

Overige zaken

De inhoud van blok 3 Overige

De titel van het artikel

Gepost op:

afbeelding Het artikel wordt nu met dummytekst gevuld, maar zal op een later moment het laatste artikel in de serie bevatten: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit.

© 2010 - html5-site.nl

Resultaat van de eerste pagina

Dit geeft het volgende resultaat wanneer we het publiceren (als je op de afbeelding klikt dan zie je de daadwerkelijke pagina).

website in html5 zonder css

Geen opmaak

Je ziet de kale pagina, inclusief een afbeelding, maar zonder opmaak. Precies wat je van deze webpagina zou verwachten. Het wordt dus tijd om te gaan stylen, maar niet voordat er twee andere pagina’s gemaakt zijn, namelijk een pagina met video en een pagina om contact te kunnen opnemen.

Video

Over de nieuwe videotag heb ik het al eerder gehad, dus daar ga ik nu niet te lang bij stilstaan. Lees het artikel http://localhost:8888/html5-video-tag maar eens.

De pagina krijgt dan de volgende html code:




HTML5 - video



HTML5-site.nl - Video

Nieuws

De inhoud van blok 1 Nieuws

Video

De inhoud van blok 2 Video

Overige zaken

De inhoud van blok 3 Overige

De video

Gepost op:

© 2010 - html5-site.nl

Het contactformulier

Als laatste de pagina met het contactformulier. Er zijn heel wat extra mogelijkheden aan formulieren toegevoegd. Zo kun je eenvoudig ‘required’ (verplicht) als attribuut aan input toevoegen. Andere nieuwe attributen zijn ‘autocomplete’ (autoaanvullen) en formtarget, waarmee je het doel URL kunt aanpassen.

Hier de code van het formulier:

Reageer

Samenvatting

De pagina’s zijn klaar, het stylen kan beginnen. Normaal gesproken heb je na de schets een ontwerp klaar. Nu heb ik een omgekeerde volgorde gebruikt en eerst de HTML code geschreven. Nu zal ik morgen aan de hand van een ontwerp, wat ik eerst zal laten zien, de site gaan stylen met CSS3.

2 Reacties

  1. Hallo,

    Ik wil op de homepage van m'n nieuwe (in html5 gebouwde) site vooral wat afbeeldingen plaatsen om de nieuwe mogelijkheden van css3 aan te tonen.

    Het zijn willekeurige afbeeldingen en zijn dus niet echt gerelateerd aan de content. Welk element moet ik hiervoor gebruiken? Figure? Of toch gewoon een div? Of zelfs enkel de img tag en deze stijlen?

    Alvast bedankt,

    Jan-Willem

  2. hallo,

    Het contactformulier is dat dan in een 3de pagina van bv. notepad++ ? en hoe koppel je die verschillende paginas, dan in 1 site ?

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *