Hoe maak ik een website met HTML en CSS?
Een eenvoudige website in HTML en CSS, hoe maak ik dat? Een vraag die je met een site als deze regelmatig langs ziet komen. In dit artikel laat ik je zien hoe je dat doet.
Hiervoor maak ik gebruik van HTML5 en CSS3. Maar let wel, ik heb het hier enkel over de basis. Niet over ingewikkelde mogelijkheden die er zijn, niet over allerlei toevoegingen zoals webwinkels of content management systemen.
Daar heb je namelijk veel meer voor nodig dan een beetje HTML en CSS.
Een HTML document
Maar goed, we gaan dus weer even terug naar de basis. Hoe zat het ook alweer?
Ten eerste moet je de browser vertellen dat je een HTML document hebt. Dat doe je in de eerste plaats door het document op te slaan als een .htm document. Dat doe je niet in een programma als Word, maar dat doe je in een tekstverwerkingsprogramma die tekst kaal opslaat.
Kladblok op je Windowscomputer bijvoorbeeld, of teksteditor op de Mac.
Even opletten bij het opslaan dat je als extentie dus .htm meegeeft.
Een doctype
Ten tweede geef je een html document een Doctype mee. Vroeger, in de tijd van HTML4.01 was dat ingewikkeld. Je had verschillende versies, voor strikt gebruik of voor meer los gebruik.
Nu is dat eenvoudig, de Doctype is een regel en makkelijk te onthouden:
<!DOCTYPE html>Vervolgens krijg je de daadwerkelijke HTML code.
Dit start je met de volgende regel:
<html lang="nl">De toevoeging lang=”nl” is bedoeld om aan te geven in welke taal de website is geschreven. Niet noodzakelijke, maar wel nuttige informatie dus altijd gewoon toevoegen aan je document.
Een eenvoudige pagina in HTML
We beginnen maar eens met een eenvoudige pagina waarin een koptekst kom te staan en een paragraaf. Verder nog even niets.
Voordat je deze koptekst en de paragraaf invoegt heb je eerst nog wat andere code nodig. Namelijk de code voor de ‘head’.
In de head staat nog wat meer informatie voor de browser waar je mee werkt. Bijvoorbeeld de titel van de pagina en eventueel een link naar een CSS document, waarover later meer.
<head> <title>Mijn eerste website</title> <meta charset="UTF-8" /> </head>
Dan gaan we nu naar de inhoud.
<body> <h1>Koptekst niveau 1</h1> <p>Dit is een paragraaf en hier kun je dus gewoon je tekst in zetten. De paragraaf heeft vanzelf al een spatie. Wanneer je een nieuwe paragraaf start dan begint deze weer op een nieuwe regel.</p> </body>
Je ziet dat elke html code geopend wordt en weer wordt afgesloten met een schuin streepje. Elke pagina wordt dus geopend met <body> en afgesloten met </body>.
<h1>…</h1> is dus een regel waarin de koptekst komt te staan. Je hebt zes niveaus kopteksten. De grootste (en de belangrijkste) is h1. De kleinste en minst belangrijke is h6.
Hier heb ik dus heel even semantiek aangestipt.
Aan het einde wordt de pagina afgesloten met
...
</html>Een stijlblad met CSS
Nu willen we daar al een klein beetje stijl aan toevoegen. Daarvoor moeten we een tweede document gaan aanmaken. Geen .htm document, maar een .css document. In dat document komt alles te staan wat met het uiterlijk van de website te maken heeft. Denk aan kleuren, hoe plaatjes komen te staan en welk lettertype je bijvoorbeeld gebruikt.
Je moet het stijlblad (het CSS document) nog wel gaan koppelen aan het html document. Als je het stijlblad bijvoorbeeld de naam stijl1.css geeft dan roep je dit stijlblad op in je html document met de volgende code (die je plaatst tussen de head codes):
<link rel="stylesheet" type="text/css" media="all" href="stijl1.css" />Zorg ervoor dat beide documenten in dezelfde map staan.
CSS schrijf je als volgt. Je geeft eerst aan voor welke html code er wat moet gebeuren. Als je bijvoorbeeld een paragraaf wilt aanpassen qua uiterlijk dan plaats je de regel
p { }
Tussen de accolades komt dan de regel te staan waarin je aangeeft wat er moet veranderen. Bijvoorbeeld dat alle tekst schuingedrukt komt te staan…
p {font-style: italic;}
Merk op dat je na font-style een dubbele punt plaatst en na italic een punt komma. Met de punt komma sluit je af dat je met dat stukje aanpassing bezig bent.
Dit was een heel simpel voorbeeld. Volgende keer ga ik een uitgebreider artikel schrijven over het gebruik van CSS. We gaan dan met behulp van bovenstaand html document aan de slag met een aantal aanpassingen.
Voor nu wil ik je aanraden om eens een webpagina en een stijlblad te maken.
Duidelijk uitleg! Dank je wel!