Een HTML-skelet gebruiken
Een skelet is het ondersteunende raamwerk van een organisme.
Het is meestal gemaakt van iets hards, om een kwetsbaarder lichaam te beschermen.
Encyclopedie
Elke webontwikkelaar zou een HTML-skelet moeten hebben.
Het moet in zijn zak worden bewaard en voor elke klus worden gebruikt:
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
Klik op de knop "Probeer het zelf" om te zien hoe het werkt!
Probeer de tekst "This is a Heading" te veranderen in "This is my Wedding".
Heb je het gehaald?
Gefeliciteerd! Nu weet je hoe je HTML moet bewerken.
HTML-skelet uitgelegd
Het DOCTYPE moet aanwezig zijn. Het informeert de browser dat dit een HTML-document is:
<!DOCTYPE html>
Een html-starttag en een html-eindtag definiëren het begin en einde van een HTML-document.
De voertaal is Engels:
<html lang="en">
</html>
Een meta-tekenset-tag definieert de tekenset (UTF-8):
De HTML-pagina mist head-tags. Head-tags zijn niet nodig in HTML.
In HTML wordt alles vóór de body-tag beschouwd als een onderdeel van de head.
<meta charset="UTF-8">
De HTML-standaard vereist een goede paginatitel:
<title>Page Title</title>
Een meta viewport-tag zorgt ervoor dat de pagina er goed uitziet op alle schermformaten (laptop, mobiel):
<meta name="viewport" content="width=device-width,initial-scale=1">
De link tag linkt naar een stylesheet:
<link rel="stylesheet" href="name">
Begintag en eindtag omringen toekomstige CSS-stijlen:
<style>
</style>
De scripttag linkt naar een script:
<script src="name"></script>
Starttag en eindtag omringen de zichtbare tekst van het HTML-document:
<body>
</body>
Afbeeldingstags definiëren HTML-afbeeldingen:
<img src="img_la.jpg" alt="LA" style="width:100%">
Maak er een gewoonte van om HTML-secties in div-elementen te "verpakken".
Bereid je voor om elke sectie een klasnaam te geven:
<div class="class name">
</div>
Heading-tags definiëren HTML-headers:
<h1>This is a Heading</h1>
Alinea-tags definiëren HTML-paragrafen:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>