HTML -basisvoorbeelden
In dit hoofdstuk zullen we enkele eenvoudige HTML-voorbeelden laten zien.
Maak je geen zorgen als we tags gebruiken die je nog niet kent.
HTML-documenten
Alle HTML-documenten moeten beginnen met een documenttypedeclaratie: <!DOCTYPE html>.
Het HTML-document zelf begint met <html>en eindigt met </html>.
Het zichtbare deel van het HTML-document bevindt zich tussen <body>en </body>.
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
De <!DOCTYPE>-declaratie
De <!DOCTYPE>declaratie vertegenwoordigt het documenttype en helpt browsers webpagina's correct weer te geven.
Het mag maar één keer voorkomen, bovenaan de pagina (vóór eventuele HTML-tags).
De <!DOCTYPE>aangifte is niet hoofdlettergevoelig.
De <!DOCTYPE>verklaring voor HTML5 is:
<!DOCTYPE html>
HTML-koppen
HTML-koppen worden gedefinieerd met de <h1>to <h6>-tags.
<h1>definieert de belangrijkste kop. <h6>definieert de minst belangrijke kop:
Voorbeeld
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML-alinea's
HTML-paragrafen worden gedefinieerd met de <p>tag:
Voorbeeld
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML-links
HTML-links worden gedefinieerd met de <a>tag:
Voorbeeld
<a href="https://www.w3schools.com">This is a link</a>
De bestemming van de link wordt gespecificeerd in het hrefattribuut.
Attributen worden gebruikt om aanvullende informatie over HTML-elementen te geven.
In een later hoofdstuk leer je meer over attributen.
HTML-afbeeldingen
HTML-afbeeldingen worden gedefinieerd met de <img>tag.
Het bronbestand ( src), alternatieve tekst ( alt),
width, en heightworden geleverd als attributen:
Voorbeeld
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Hoe HTML-bron te bekijken?
Heb je ooit een webpagina gezien en je afgevraagd: "Hé! Hoe hebben ze dat gedaan?"
HTML-broncode bekijken:
Klik met de rechtermuisknop op een HTML-pagina en selecteer "Paginabron weergeven" (in Chrome) of "Bron weergeven" (in Edge), of iets dergelijks in andere browsers. Dit opent een venster met de HTML-broncode van de pagina.
Een HTML-element inspecteren:
Klik met de rechtermuisknop op een element (of een leeg gebied) en kies "Inspecteren" of "Inspecteer Element" om te zien uit welke elementen bestaat (u ziet zowel de HTML als de CSS). U kunt de HTML of CSS ook on-the-fly bewerken in het deelvenster Elementen of Stijlen dat wordt geopend.