Een website maken met HTML5 en CSS3

Dit artikel is bijgewerkt op 10 oktober 2018
De komende week wil ik samen met jullie een website gaan maken in HTML5 en CSS3. Daarbij wil ik natuurlijk laten zien wat de mogelijkheden zijn en hoe je een website opzet. De eerste stap gaan we vandaag zetten en ik zal iedere dag een nieuw stuk toevoegen zodat er volgende week een complete website staat.

Drie pagina’s

De website bestaat uit drie pagina’s. De eerste pagina, de index, is een introductiepagina waarop wat algemene informatie staat met een paar plaatjes en enkele links. Natuurlijk een zoekfunctie en een adresgedeelte.

De tweede pagina bestaat uit een contactformulier, die werkt met behulp van een eenvoudig script, maar met name fraai gemaakt is met behulp van CSS.

Video

De derde pagina bestaat uit een videogedeelte. Dit met name om de videotag te belichten. Bij de video is een reactiemogelijkheid toegevoegd zodat je daar ook kennis van kunt nemen.

Het idee

Vandaag wil ik aan de slag gaan met het opzetten van een idee. Hoe gaat de pagina er uit zien, welke onderdelen komen waar?

Wanneer je namelijk een website gaat maken, of het nu in een oude versie of een nieuwe versie van HTML is, je zult een ontwerp moeten hebben waar je vanuit kunt gaan.

Naast het ontwerp zullen er wat afbeeldingen aan de site toegevoegd moeten worden. Ook daar ga ik vandaag op in. Zullen we maar?

Het ontwerp

Wanneer ik een website ga ontwerpen pak ik altijd even een tekenmap. Hierin maak ik aan de hand van een idee een eerste ontwerp voor de website die ik wil gaan maken. In het ontwerp probeer ik voor mezelf te bekijken wat ik op de website wil hebben en waar de verschillende onderdelen komen te staan.

Ik geef mezelf de vrijheid om hier helemaal vanaf te wijken, maar je hebt in ieder geval een soort houvast van waaruit je straks kunt gaan werken. Hier de opzet:

Op papier

Opzet op papier van de website in HTML en CSS

Je ziet de verschillende onderdelen terugkomen:
het menu, de titel van de website met een logo, drie grotere buttons met een lichte achtergrondkleur en afgeronde hoeken en natuurlijk de eigenlijke inhoud. Daarnaast nog een donker vak aan de rechterkant voor gegevens of advertenties ofzo.

Kortom een site zoals je er meer van zou tegenkomen.

Afbeeldingen

Een website zonder afbeeldingen is als soep zonder zout, dat kan natuurlijk niet. Voor de website wil ik gebruik maken van een paar vrolijke plaatjes. Veel kleur zodat de plaatjes opvallen en de website een prettig ‘gevoel’ geven.

Voor afbeeldingen zoek ik op een website als istockphoto. Afbeeldingen voor ongeveer een euro, waarbij de rechten juist geregeld zijn.

website istockphoto

Onderdelen van de webpagina

De webpagina bestaat dus uit een aantal onderdelen.

Het menu komt bovenaan de pagina. Dit menu bestaat voor deze website maar uit drie onderdelen, maar dit moet natuurlijk uitgebreid kunnen worden in de toekomst. Daaronder komt de titel van de website, samen met een logo. Om het wat zakelijk te maken dacht ik aan een pijl die naar een punt wijst, maar dat ligt nog open en is van later zorg. Dat geldt ook voor een eventuele ondertitel trouwens.

Onder het menu drie blokken met afgeronde hoeken. Dit zijn zogenaamde eyecatchers. Hier staat alvast handige informatie voor achterliggende pagina’s. Een duidelijke doorklik knop komt aan het einde van een paar regels tekst. Deze drie blokken kunnen op iedere pagina terugkomen, maar kunnen ook alleen op de indexpagina blijven.

Dan het artikel, of de informatie van de betreffende pagina met een zijkolom.

Zoals je hier ziet komen de verschillende onderdelen die aan html5 toegevoegd zijn aan de orde:
<header>, <article> en <aside>. Aangezien er ook een regel onderaan moet komen voor bijvoorbeeld copyright, is er tenslotten sprake van een <footer>.

Wat heb je nog nodig?

We hebben nu de opzet, de indeling, afbeeldingen en een idee. Wat we nu nodig hebben is een html-editor. Je kunt kladblok gebruiken (standaard op iedere computer), maar ook html-kit (Windows) of BBedit (Mac).

De volgende stap

Morgen wil ik de aan de slag met de opzet voor de website in html. Hiervoor gebruik ik de opzet zoals hierboven beschreven. De verschillende onderdelen komen semantisch op de juiste plaats en daarmee kan direct uitgelegd worden hoe de onderdelen in elkaar kunnen passen.