HTML en CSS voor beginners, de definitieve versie
Het is zover, je gaat je eerste website maken en deze online zetten zodat de hele wereld kennis kan nemen van jouw informatie. Het is handig dat je al een onderwerp hebt, want een website die gaat over ‘van alles’, gaat eigenlijk nergens over.
Maak een keuze van iets wat jij leuk vind, wat jouw interesseert en waar je ook wat vanaf weet.
Kladblok als html-editor
Nu je een onderwerp hebt bepaald moet je de website gaan maken. De eerste stappen ga ik met je doornemen.
We gaan werken met het programma ‘Kladblok’ in Windows. Dit is een zeer eenvoudige tekstverwerker.
Meer heb je niet nodig. Maak in ieder geval niet de fout door in een programma als Word 2003 te gaan werken.
Klik onderaan op start, dan op ‘alle programma’s’, vervolgens op bureau-accessoires en daar klik je op ‘Kladblok’.
HTML tags
We gaan nu code toevoegen. HTML bestaat uit zogenaamde tags. Dit zijn codes die de browser vertellen wat deze moet laten zien. Zo is er een tag <img> die ervoor zorgt dat er een plaatje komt te staan in de website.
De belangrijkste tag is <html>, deze tag vertelt de browser dat het document in HyperText Markup Language is geschreven. De meeste tags worden ook weer afgesloten, dat doe je door er een / voor te zetten, vetgedrukte tekst wordt geopend met een <b> en afgesloten met een </b>. Eenvoudig toch?
De html code van je eerste webpagina
Hier komt de hele code voor je eerste pagina, deze zullen we daarna uitleggen. Deze code kun je eenvoudig kopiëren en plakken naar je eigen geopende ‘kladblok’ pagina.
<html> <head> <title>Mijn eerste webpagina</title> </head> <body> De inhoud van mijn eerste webpagina. </body> </html>
de code <html> opent het hele bestand, vervolgens krijg je <head>, dit is een deel waarin extra informatie komt te staan die niet zichtbaar is in het document, daarover later meer. In onze eerste pagina zetten we er in ieder geval titelinformatie neer met behulp van <title>.
Met de tag <body> open je het eigenlijke deel van de website wat zichtbaar wordt. Hierin komen de teksten, plaatjes en alle andere zaken die nodig zijn voor je website. Alle tags worden natuurlijk afgesloten.
Opslaan en bekijken van je eerste webpagina
Je krijgt dan de volgende pagina te zien;
Nu de pagina nog opslaan. Klik op bestand en dan op ‘opslaan’ of ‘opslaan als…’
Hier verschijnt dan het volgende venster, waarin je je bestand een naam moet geven.
Hier maak je bijvoorbeeld van ‘mijn_eerste_website’. Let erop dat je .txt moet vervangen door .html, zie ook het voorbeeld hieronder. Je maakt namelijk geen tekstbestand, maar een html bestand.
Wanneer je nu naar de map gaat, die je daarvoor het beste speciaal kunt aanmaken, dan zie je daar een internet explorer (of een ander icoon als bijvoorbeeld Chrome je standaard browser is) icoon staan.
Wanneer je op dat icoon klikt wordt je eerste webpagina geopend.
In de blauwe balk bovenaan de browser zie je nu datgene staan, wat je hebt geplaatst tussen de tags <title> en </title>. In ons geval is dat ‘Mijn eerste webpagina’.
Hoe verder met je webpagina?
Nu heb je je eerste webpagina gemaakt, maar dat stelt allemaal nog niet zoveel voor.
Het belangrijkste onderdeel van een webpagina is tekst. Wanneer je tekst hebt is het handig om deze tekst onder te verdelen in blokken. Net als een tekst in een krant wordt tekst verdeeld in paragrafen. Elke paragraaf begint met een tag en eindigt met een tag, de <p>.
Meestal heeft een paragraaf een titel en heeft een tekst een titel. Ook voor deze onderdelen bestaat een tag. De grootste kop krijgt over het algemeen <h1> mee, de kleinste kop binnen een tekst <h6>.
Een voorbeeld, we nemen een tekst met daarin een titel en wat tussenkopjes. De code ziet er dan als volgt uit:
<h1>De titel van het artikel</h1> <h2>Eerste tussenkopje</h2> <p>Het artikel zelf, dat kun je doen met dummytekst, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer non nisl et metus ultrices lobortis.</p> <h2>Tweede tussenkopje</h2> <p>Phasellus placerat feugiat dui. Donec a leo. Vestibulum non diam. Curabitur ipsum. Cras sed mauris. Integer faucibus. Maecenas sodales. Maecenas hendrerit. Aenean dapibus odio placerat justo. Aliquam ac urna at mi cursus bibendum. Nullam sem. </p>
Let wel deze code komt tussen <body> en </body> te staan!
Semantische code
De teksten tussen <h1> en <h2> zijn belangrijk omdat ze aan zoekmachines vertellen dat het hier om belangrijke kopteksten gaat.
Dit is ook het basisprincipe van goed geschreven HTML code, namelijk dat het semantisch is. Semantisch betekent dat er een logische opbouw in de tekst zit. Dat hebben we hierboven gedaan door de titel van de pagina <h1> mee te geven, en een subtitel, iets minder belangrijk dus, <h2>.
Opmaak met CSS
Vroeger zouden we nu overgestapt zijn naar manieren om teksten wat meer uiterlijk te kunnen veranderen met behulp van html codes. Zo zou een website vier of vijf jaar geleden allerlei codes hebben gekregen zoals <font color="red">,
hiermee kon je een stuk tekst rood maken.
Tegenwoordig gebeurt dat op een andere manier, namelijk met CSS.
Dit zijn Cascading Style Sheets. Een CSS document is een apart document naast het HTML document, die als het ware gaat vertellen
hoe bepaalde stukken er uit moeten zien. Het gaat bij CSS over de opmaak van het HTML document. Je mag een CSS document ook gewoon maken met kladblok, alleen moet je het dan niet opslaan als .htm , maar als .css .
Hoe ziet CSS er uit?
CSS ziet er iets anders uit dan HTML. Bij CSS wordt er wel verwezen naar HTML codes. Stel dat we even de code gebruiken van de code die we even hiervoor hebben gemaakt. Het eerste en tweede tussenkopje moet niet zwart blijven, maar moet rood worden.
Eerst schrijf je dan de verwijzing op naar de HTML code, h2. Daarna ga je vertellen wat er met deze code moet gaan gebeuren. Dit wordt niet gedaan met < en >, maar met accolades: { en }. Een voorbeeld:
h2 { color: red; font-size: 13px; }
Met h2 schrijf je op dat je iets gaat veranderen aan de html code h2. Dan open je het deel waar je dat daadwerkelijk gaat vertellen met {.
Vervolgens schrijven we dat de kleur van de tekst (color) rood moet worden.
Eerst wat je gaat veranderen, namelijk de kleur. Dan een dubbele punt (:) dan de kleur zelf, en afsluiten met een punt-komma (;). Je mag dan op dezelfde regel verder gaan, maar het is duidelijker om op een volgende regel verder te gaan.
We willen ook de lettergrootte aanpassen. Dat doe je met font-size, weer een dubbele punt, het formaat, en dan weer een punt-komma.
Als dat alles is wat we veranderen willen, dan kun je alles sluiten met }.
CSS koppelen aan je HTML document
Je mag CSS in het HTML document gebruiken, maar wij maken er voor het gemak een apart document voor. Het HTML document moet op een of andere manier weten waar dat CSS document te vinden is. Dat gaat vrij eenvoudig. Je neemt weer even de code van het HTML document en zoekt het gedeelte met <head>. Hier komt de volgende code bij te staan:
<head> <title>Mijn eerste webpagina</title> <link rel="stylesheet" type="text/css" href="jouw_stijl_blad.css"> </head>
Wanneer je nu een CSS document hebt gemaakt met de naam jouw_stijl_blad.css, dan zoekt het HTML document hierin de aanpassingen
voor html codes op.
Wanneer we daar ons voorbeeld in plaatsen zoals we deden met h2, dan zou je uiteindelijk een pagina krijgen met de volgende html code:
<html> <head> <title>Mijn eerste webpagina</title> <link rel="stylesheet" type="text/css" href="mijn_stijlblad.css"> </head> <body> <h1>De titel van het artikel</h1> <h2>Eerste tussenkopje</h2> <p>Het artikel zelf, dat kun je doen met dummytekst, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer non nisl et metus ultrices lobortis.</p> <h2>Tweede tussenkopje</h2> <p>Phasellus placerat feugiat dui. Donec a leo. Vestibulum non diam. Curabitur ipsum. Cras sed mauris. Integer faucibus. Maecenas sodales. Maecenas hendrerit. Aenean dapibus odio placerat justo. Aliquam ac urna at mi cursus bibendum. Nullam sem. </p> </body> </html>
Het CSS bestand heet ‘mijn_stijblad.css’ en bevat de volgende code:
h2 { color: red; font-size: 13px; }
Het resultaat van dit hele proces ziet er zo uit:
Hierbij is het dus zaak dat het CSS document en het HTML document in dezelfde map staan.
Class in CSS en HTML
We gaan nu het CSS bestand eens wat uitbreiden. Zo kunnen we de kop met h1 aanpassen en we doen wat aanpassingen aan de paragrafen, die worden met <p> aangegeven.
Alleen we willen de tweede paragraaf niet hetzelfde hebben als de eerste paragraaf. In de tweede paragraaf komt de tekst
namelijk schuin (italic) te staan. Dit kan ook weer eenvoudig worden toegepast in CSS. Je moet daarvoor het volgende doen. In de html code zoek je de <p> van de tweede paragraaf op.
Deze <p> geef je een klasse mee, met de naam ‘schuin’. De code wordt dan <p class="schuin">.
Nu kun je het CSS bestand weer openen en die klasse gaan vormgeven. Dat doe je als volgt:
.schuin { font-style: italic; }
Je ziet dat er in plaats van een element de klasse wordt genoemd, met daarvoor een punt (.).
Op deze manier krijgt de paragraaf met de klasse ‘schuin’ een ander uiterlijk dan de paragraaf zonder een klasse. Je kunt deze klasse overigens aan elk element toevoegen, dus als je de eerste kop (h1) ook schuin wilt maken geef je deze ook de klasse ‘schuin’ mee.
Je website logisch indelen met behulp van id
Er is ook nog een ander type dat je in een CSS bestand kunt gebruiken, namelijk het ‘id’. Een identificator (id) gebruik je om een stijl te koppelen aan een onderdeel dat maar een keer voorkomt in een HTML bestand. Meestal wordt een ‘id’ gebruikt om een gedeelte van het document van stijlen te voorzien.
Een voorbeeld, we willen de webpagina verdelen in drie gedeelten, de kop, het midden en de onderkant. Dit is een onderverdeling die vaak gebruikt wordt. De kop noemen we ‘header’, het midden noemen we ‘inhoud’ en de onderkant noemen we ‘footer’. De
HTML code wordt nu als volgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Mijn eerste webpagina</title> <link rel="stylesheet" type="text/css" href="mijn_stijlblad.css"> </head> <body> <div id="kop">Titel van de website</div> <div id="inhoud"> <h1>De titel van het artikel</h1> <h2>Eerste tussenkopje</h2> <p>Het artikel zelf, dat kun je doen met dummytekst, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer non nisl et metus ultrices lobortis.</p> <h2>Tweede tussenkopje</h2> <p class="schuin">Phasellus placerat feugiat dui. Donec a leo. Vestibulum non diam. Curabitur ipsum. Cras sed mauris. Integer faucibus. Maecenas sodales. Maecenas hendrerit. Aenean dapibus odio placerat justo. Aliquam ac urna at mi cursus bibendum. Nullam sem. </p> </div> <div id="footer">© 2019 bladiebla</div> </body> </html>
Om de stijl voor een ‘id’ te bepalen, gebruik je in de css code een hekje (#). Daarna kun je dezelfde dingen doen die al eerder stonden beschreven.
Dan nu ons CSS bestand tot nu toe:
h1 { font-size: 18px; color: blue; } h2 { color: red; font-size: 13px; } p { color: #999; font-size: 11px; } #kop { font-size: 21px; border: 1px solid black; padding: 5px; } #inhoud { text-align: justify; } #footer { clear: both; } .schuin { font-style: italic; }
Nog wat handige tips
Het voert in dit artikel te ver om alle aspecten toe te lichten, maar bovenstaande geeft je een idee van hoe je html en css kunt gebruiken. Uiteindelijk is het belangrijk dat je er zoveel mogelijk mee experimenteert.
Als je naar de HTML code hierboven kijkt dan zie je dat we een doctype hebben toegevoegd. Dit is een beschrijving van html in een apart document. Meer hierover kun je lezen in een artikel over Document type definition.
Wat wel belangrijk is, is dat je logische namen bedenkt voor ‘class’ en ‘id’. En, zoals je hierboven in de code ziet, een logische volgorde aanhoudt. We starten met h1 (belangrijkste kop) komen dan bij algemene stijlen, daarna de id stijlen en als laatste de class stijlen. Op deze manier hou je het overzicht voor jezelf.
Je kunt er goed aan doen om met behulp van commentaarregels, extra informatie aan je HTML en CSS bestanden toe te voegen.
O ja, nog even het resultaat zoals dat te zien is in Internet Explorer en Firefox.
Een goede webdesigner doet er namelijk goed aan om meerdere browsers te downloaden.
Tenslotte
Dit artikel geeft natuurlijk alleen maar de basis weer van het maken van een website. Maar we doorbreken hiermee wel de traditie om websites te maken met behulp van tabellen en allerlei tags voor het opmaken van tekst, bijvoorbeeld <font>.
Ik raad je aan om meerdere artikelen te lezen op deze en andere websites. Probeer zoveel mogelijk uit en laat het resultaat steeds aan anderen zien.
Een website is nooit af, maar wordt wel steeds een beetje beter. Succes!
1 reactie
[…] Wanneer je dit opslaat in een tekstbestand (niet in Word, maar in bijvoorbeeld kladblok), en dan opslaan als .htm, dan heb je je eerste website gemaakt. Hoe je dat precies kunt doen lees je in HTML en CSS voor beginners. […]