Hoe je begint.
Je begint alle HTML-documenten altijd met een documenttypedeclaratie:
<! DOCTYPE html>.
De declaratie <! DOCTYPE> omschrijft het documenttype en helpt browsers om webpagina’s goed te laten zien.
Het mag maar één keer voorkomen in je document, namelijk bovenaan de pagina (vóór eventuele HTML-tags).
Het HTML-document zelf begint met <html> en eindigt met </html>.
Daarna krijg je het <head>-element. Hier staat alle data over je document, zoals <title>, <style>, <meta>, <link>, <script>, and <base>. De gegevens zie je niet aan de voorkant van je website.
En het zichtbare deel van het HTML-document bevindt zich tussen <body> en </body>.
<!DOCTYPE html> <html> <head> <title>HTML, de basis</title> <meta charset="UTF-8"> </head> <body> <h1>Hier komt je code</h1> </body> </html>
Hoe maak je koppen?
Voor koppen gebruik je <hx> … </hx>
De x vervang je door 1 t/m 6, afhankelijk van het niveau kop dat je wilt gebruiken.
H1 is de belangrijkste kop, H6 de minst belangrijke. Ook gebruik je ze altijd opvolgend, dus eerst h1, daarna h2 en zo door tot uiteindelijk h6.
Vaak gebruik je niet meer dan 3 koppen op een pagina.
Wat belangrijk is om te onthouden, h1 is ALTIJD de kop waar je mee begint.Je gebruikt de koppen ook niet vanwege de grootte van de tekst, die kun je namelijk met CSS aanpassen.
Koppen zijn belangrijk.
Waarom?
Zoekmachines gebruiken de koppen om de structuur en inhoud van je webpagina’s te indexeren.
Bezoekers scannen vaak een pagina door middel van de koppen. Het is dus belangrijk om koppen te gebruiken om je website structuur te geven.
Paragraven.
Voor paragraven gebruik je <p> … </p>
Een alinea begint altijd op een nieuwe regel. Browsers voegen ook automatisch wat witruimte (een marge) toe voor én na een alinea.
Je weet eigenlijk nooit zeker hoe HTML getoond wordt. Grote, kleine en schermen waar de grootte van aangepast is, zullen er allemaal anders uit zien.
Enters.
Je kunt met HTML helaas niet beïnvloeden hoe het er uit komt te zien door extra spaties of enters te gebruiken in je tekst. De browser verwijdert namelijk normale enters en extra spaties.
Voor een nieuwe regel gebruik je het <br> -element, dit is dus je ‘enter’ zoals je hem kent.
Wil je een lijn om content te scheiden? Dat kan met het <hr>-element.
<!DOCTYPE html> <html> <head> <title>HTML, de basis</title> <meta charset="UTF-8"> </head> <body> <h1>Dit is een kop 1</h1> <p>Hier komt een paragraaf</p><br> <h2>Dit is een kop 2</h2> <p>Hier komt een paragraaf</p><br> <h3>Dit is een kop 3</h3> <p>Hier komt een paragraaf</p><br> <hr> <h4>Dit is een kop 4</h4> <p>Hier komt een paragraaf</p><br> <h5>Dit is een kop 5</h5> <p>Hier komt een paragraaf</p><br> <h6>Dit is een kop 6</h6> <p>Hier komt een paragraaf</p><br> </body> </html>
Links maken.
Elke webpagina heeft linkjes. Op die manier kun je supermakkelijk binnen een website rond hoppen.
HTML links zijn hyperlinks.
De HTML <a> -tag definieert een hyperlink. Het heeft de volgende syntaxis: <a href=”url”> linktekst </a>
Het belangrijkste kenmerk van het <a> -element is het href-kenmerk, dat de bestemming van de link aangeeft.
De linktekst is het gedeelte dat zichtbaar zal zijn voor de lezer.
Door op de linktekst te klikken, wordt de lezer naar het opgegeven URL-adres gestuurd.
Afbeeldingen toevoegen.
Met de <img src=”..”> tag kun je een afbeelding toevoegen. Tussen de .. vul je de link in van de afbeelding.
Je kunt hier ook een alt-tag toevoegen. Dat is fijn voor de toegankelijkheid van je website én voor je SEO.
Een commentaartag toevoegen.
Je kunt ook opmerkingen aan je code toevoegen. Je doet dat door de volgende syntaxis te gebruiken: <! – Hier komt je commentaar ->
Let er goed op dat je je tag begint met een uitroepteken, maar er niet mee afsluit in de eindtag.
Opmerking/ commentaar worden niet weergegeven door de browser, maar ze kunnen je helpen bij het documenteren van je code. Je kunt er bijvoorbeeld opmerkingen zetten voor een andere web developer.
<!DOCTYPE html> <html> <head> <title>HTML, de basis</title> <meta charset="UTF-8"> </head> <body> <h1>Dit is een kop 1</h1> <p>Hier komt een paragraaf</p><br> <h2>Dit is een <a href="url">link</a></h2> <!-- Je kop 2 wordt nu een link --> <p>Hier komt een paragraaf</p><br> <img src="url" alt="alttekst"> <!-- Dit blog is geschreven door Coffee & Code --> </body> </html>
