Hoe maak je een index.html? – Gratis leeg HTML5 template
De opbouw van een HTML website is vrijwel altijd hetzelfde. Anders gezegd: een HTML website moet een bepaalde opbouw hebben om goed getoond te worden op een computer of mobiele telefoon. Je vindt hieronder een leeg HTML5 template waarmee je zelf snel aan de slag kan. Dit soort templates worden vaak “HTML Boilerplates” genoemd. Deze templates zijn een goed startpunt bij het bouwen van een HTML website.
Voorbeeld HTML template
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Hoe maak je een index.html? - Gratis leeg HTML5 template">
<meta name="author" content="Websoep.nl">
<meta property="og:title" content="Gratis leeg HTML5 template">
<meta property="og:type" content="website">
<meta property="og:description" content="Gratis leeg HTML5 template">
<title>Hoe maak je een index.html? - Gratis leeg HTML5 template</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<script src="js/scripts.js"></script>
</head>
<body>
<h1>Hoe maak je een index.html? - Gratis leeg HTML5 template</h1>
<p>Inhoud van alinea</p>
</body>
</html>De opbouw van een HTML website
- Doctype html
- HTML element
- Head
- Opmaak (charset utf-8)
- Viewport
- Meta tags en omschrijvingen
- Titel
- Links naar stylesheets (CSS – styling)
- Links naar icoontjes
- Links naar scripts (Javascript – functies)
- Body
- Header
- Navigatie (menu)
- Main (hoofdgedeelte)
- Aside (sidebar – zijkant)
- Footer
- Head
Doctype HTML
Je begint een HTML website met de “doctype” notering. Hierbij zeg je in het kort dat je een website bouwt met html. Browsers weten dus welke programmeertaal er wordt geserveerd.
<!DOCTYPE html>HTML Element
Na de doctype notering verklaar je het HTML document met daarbij de eventuele taal waarin het document is geschreven. Het HTML document is verdeeld in twee stukken:
- Head (metadata – informatie over informatie, links & coderingen die geen inhoud van de pagina zijn. )
- Body (inhoud van de pagina)
<html lang="nl">Head
Het <head> element is dus een verzameling van metadata. Metadata is informatie over informatie. In de praktijk staan er in de <head> element zaken die helpen bij het classificeren van de inhoud door een zoekmachine zoals Google. De inhoud wordt niet getoond, maar wel gelezen door een zoekmachine.
Opmaak (Charset utf-8)
Het eerste element in de <head> is de uitleg over hoe de opmaak is van het document. De uitgebreide uitleg komt hier niet aan bod, maar laten we zeggen dat de code bij een HTML document hoort.
<meta charset="utf-8">Viewport
Die viewport notatie is er om de website goed te tonen bij mobiele telefoons en kleinere apparaten. Deze code zorgt ervoor dat de HTML website goed werkt bij “responsive websites”.
<meta name="viewport" content="width=device-width, initial-scale=1">Meta tags en meta propterty tags
De diverse codes in het <head> element zijn dus metadata. De meta tags en meta property tags zijn het beste voorbeeld van data over data. Deze stukjes code bevatten dus informatie over de pagina, maar worden alleen gelezen door bijvoorbeeld zoekmachines. Er zijn honderden verschillende meta tags waarmee je informatie mee kunt geven aan een pagina.
<meta name="description" content="Hoe maak je een index.html? - Gratis leeg HTML5 template">
<meta name="author" content="Websoep.nl">
<meta property="og:title" content="Gratis leeg HTML5 template">
<meta property="og:type" content="website">
<meta property="og:description" content="Gratis leeg HTML5 template">Titel
De titel van een pagina die je ook bovenin je browser ziet wordt vermeld in de “title tag”.
<title>Hoe maak je een index.html? - Gratis leeg HTML5 template</title>Links naar stylesheets (CSS)
Een HTML website ziet er heel basic uit zonder styling. Een HTML website heeft dan ook vaak een link naar een zogeheten stylesheet. Door een link te zetten in de <head> element krijgt een pagina styling mee.
<link rel="stylesheet" href="style.css">Links naar icoontjes
Wil je dat je website icoontjes toont? Voeg dan onderstaande code ook toe. Zorg er dus wel voor dat je het bestandje ook upload.
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Links naar scripts
Scripts voegen functies toe aan websites. Mocht je een functie willen toevoegen dan moet die apart worden ingelagen. Daarvoor zet je een link naar een script er op de volgende manier:
<script src="js/scripts.js"></script>Body element van een HTML pagina
In de body komt de echte inhoud van een HTML website. Er zijn duizenden manieren om een website te tonen. Zo geeft een <h1> een titel weer. Een <p> is een alinea. Een <img> laat een foto zien. Als je meer wilt leren over HTML dan kan je op W3schools heel veel leren.