HTML voor beginners
In dit artikel leer je vanuit de basis met HTML te werken. Dit komt van pas als je hebt besloten je eigen website te maken, of je een bestaande website onderhoudt.
HTML voor beginners
Allereerst een introductie. Wat is HTML en waar wordt het voor gebruikt? HTML staat voor HyperText Markup Language en het wordt gebruikt als opmaaktaal voor websites. Het basis principe van HTML is dat deze door middel van hyperlinks (koppelingen cq. links) kan verwijzen naar andere documenten en bestanden. HTML pagina’s kunnen verschillende elementen bevatten, zoals tabellen, lijsten, kopjes en paragraven. Deze elementen worden aangegeven door markeringstekens, ook wel tags genoemd.
HTML: De basis voor beginners
Open op je computer een tekstbewerker, zoals Notepad. Maak een bestand aan genaamd index.html. De index.html is het bestand dat door een browser als eerste wordt geopend als je een map opent. Plaats in index.html het volgende:
<!DOCTYPE html>
<html>
<head>
<title>Pagina titel</title>
</head>
<body>
Hallo wereld!
</body>
</html>
Sla het document op en open de index.html in je browser. Je krijgt een witte pagina te zien met de tekst “Hallo wereld!” en titel “Pagina titel”. Wat doet de rest van de HTML?
Doctype
<!DOCTYPE html> geeft aan de browser aan welk type HTML de pagina gebruikt. In dit geval gebruiken we de laatste versie (HTML5). Het is belangrijk de Doctype te declareren, zonder deze tag weet de browser niet welke versie je gebruikt en dat kan vreemde fouten opleveren. De Doctype staat altijd bovenin de pagina.
HTML
<html> is de openingstag dat aan de browser aangeeft dat alles hierna HTML is. Aan het einde van het document staat de sluitingstag </html>.
Head en body
Een pagina is altijd opgebouwd uit twee onderdelen. De head (<head>…</head>) en de body (<body>…</body>). In de head staat informatie over de pagina, die niet getoond wordt in het browser scherm. De body bevat alle inhoud van de pagina. De twee onderdelen worden onder elkaar tussen de <html> en </html> tags gezet.
In de title die in de head staat kan de pagina titel worden ingevuld.
Sluitingstags
De tags die we tot dusver hebben gezien worden als volgt opgebouwd: <tag>…informatie…</tag> Maar niet elke tag heeft ook weer een sluitingstag nodig. Neem bijvoorbeeld de enter tag <br>. Deze bevat geen informatie en hoeft dus niet los afgesloten te worden.
Attributen
Een attribuut is een extra waarde die aan een tag toegevoegd kan worden. Deze wordt als volgt opgebouwd: <tag attribuut=”waarde”>. We nemen als voorbeeld een link. De tag voor een link is <a>…link tekst… </a>. Nu weet de browser dat “Klik hier” een link is, maar nog niet waar de link naartoe moet. Daarom voeg je aan een link het attribuut “href” toe. Een link schrijf je dus als volgt op in HTML: <a href=”http://design101.nl/>Design101</a>.
HTML voor beginners vervolg
Blijf het weblog volgen, binnenkort volgt het vervolg op deze eerste introductie HTML voor beginners.
Like ons via Facebook en krijg direct bericht wanneer het vervolg geplaatst wordt.
De auteur: Emiel Kwakkel
Emiel Kwakkel is afgestudeerd op het gebied van communicatie en digitale vormgeving en als web designer werkzaam bij een fitness franchise organisatie. Ben je geïnteresseerd in web design en user interface design / testing volg dan naast deze blog ook zijn Twitter. Bekijk alle berichten van Emiel Kwakkel →
Geef een reactie