Een website maken met HTML5 en CSS 3 – deel 3
Dit artikel is bijgewerkt op 10 oktober 2018
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:
<article> <header> <h2>De titel van het artikel</h2> <p>Gepost op:<time datetime="2010-05-05T01:25:00+01:00">5 mei 2010</time></p> </header> <p><img src="plaatje.jpg" alt="afbeelding"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. </p> </article>
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:
<!DOCTYPE HTML> <html> <head> <title>Titel van de webpagina</title> </head> <body> <header><h1>HTML5-site.nl</h1></header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Video</a></li> </ul> </nav> <section id="blokken"> <div id="bloknieuws"><h2>Nieuws</h2> <p>De inhoud van blok 1 Nieuws</p></div> <div id="blokvideo"><h2>Video</h2> <p>De inhoud van blok 2 Video</p></div> <div id="blokoverig"><h2>Overige zaken</h2> <p>De inhoud van blok 3 Overige</p></div> </section> <article> <header> <h2>De titel van het artikel</h2> <p>Gepost op:<time datetime="2010-05-05T01:25:00+01:00">5 mei 2010</time></p> </header> <p><img src="plaatje.jpg" alt="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. </p> </article> <aside>Het zijvlak vullen we nu ook met dummytekst: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. </aside> <footer>© 2010 - html5-site.nl</footer> </body> </html>
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 HTML 5, 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 /html5-video-tag maar eens.
De pagina krijgt dan de volgende html code:
<!DOCTYPE HTML> <html> <head> <title>HTML5 - video</title> </head> <body> <header><h1>HTML5-site.nl - Video</h1></header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Video</a></li> </ul> </nav> <section id="blokken"> <div id="bloknieuws"><h2>Nieuws</h2> <p>De inhoud van blok 1 Nieuws</p></div> <div id="blokvideo"><h2>Video</h2> <p>De inhoud van blok 2 Video</p></div> <div id="blokoverig"><h2>Overige zaken</h2> <p>De inhoud van blok 3 Overige</p></div> </section> <article> <header> <h2>De video</h2> <p>Gepost op:<time datetime="2010-05-05T01:25:00+01:00">5 mei 2010</time></p> </header> <p> <video src="http://medias.jilion.com/sublimevideo/dartmoor.mp4" controls="controls" width="450px" height="300px"> Helaas ondersteunt deze browser geen video!</video></p> </article> <aside>Het zijvlak vullen we nu ook met dummytekst: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. </aside> <footer>© 2010 - html5-site.nl</footer> </body> </html>
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:
<form action="#" method="post"> <h3>Reageer</h3> <p> <label for="name">Naam</label> <input name="naam" id="name" type="text" required /> </p> <p> <label for="email">E-mail</label> <input name="email" id="email" type="email" required /> </p> <p> <label for="website">Website</label> <input name="website" id="website" type="url" /> </p> <p> <label for="reactie">Reactie</label> <textarea name="reactie" id="comment" required></textarea> </p> <p><input type="submit" value="Verzenden" /></p> </form>
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.
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
hallo,
Het contactformulier is dat dan in een 3de pagina van bv. notepad++ ? en hoe koppel je die verschillende paginas, dan in 1 site ?
@stijn, daarvoor heb je dan een menu nodig. Daarmee kun je een linkje van de ene naar de andere pagina maken. In het voorbeeld is een menu geplaatst. De nieuwe pagina krijgt dan bijvoorbeeld de naam contact.htm
Daar verwijst de link dan naar toe!