HTML staat voor Hyper Text Markup Language. Het is de taal die gebruikt wordt om webpagina’s op te maken: lettertype, kleur, grafische elementen en hyperlink effecten. Elk element van een webpagina dient vergezeld te gaan van HTML opmaak. Die opmaak bestaat uit tags die de inhoud omschrijven, terwijl HTML documenten bestaan uit zowel tags als tekst. In de meeste CMS systemen zoals WordPress bestaat er een visuele editor voor de opmaak. Dit is echter niet voldoende voor een correcte opmaak die noodzakelijk is om een goede ranking in Google te behalen.
HTML gebruiken in teksten is niet moeilijk. Het is zelfs gemakkelijk als je een aantal regels volgt. Zo moet je moet altijd een tag openen, gevolgd door inhoud en daarna weer sluiten: <tag>inhoud</tag>. De laatste tag is identiek aan de eerste, maar sluit de tag met het “/” teken.
Heb je op een andere website opmaak gezien die je ook op je eigen website wilt gebruiken? Dan kun je altijd in de code van die website kijken door rechtermuisknop “Inspect element” te gebruiken in Chrome of Firefox. Zo krijg je een kijkje achter de schermen van de website en zie je de code. Daar kan je de tags van die opmaak kopiëren en gebruiken op je eigen website. Wanneer je de volledige HTML pagina wenst te zien, gebruik je CTRL+U.
In WordPress, kan je altijd een preview tonen van wat je in HTML hebt geschreven. Op die manier zie je hoe de HTML opmaak er zal uitzien op je website.
Inhoud van dit artikel:
Wat is CSS?
CSS wordt gebruikt om de HTML elementen een consistente stijl te geven. Zo kun je in CSS aangeven dat standaard tekst altijd x groot moet zijn, een bepaalde kleur moet hebben, enz. De CSS-code staat over het algemeen in een extern document en geldt dan voor de volledige website. Maar je kan CSS ook per pagina overschrijven door in de de pagina zelf de CSS voor dit element te schrijven.
Hoofdingen
Titels en hoofdingen worden gebruikt om de lezer snel een overzicht te geven van de pagina. Ze worden bovendien getoond in volgorde van belangrijkheid, en dat wordt ook zo meegegeven aan de zoekmachines. Header 1 is de titel van de pagina en vanaf header 2 spreekt men van hoofdingen.
Code:<h1>Hoofding 1</h1><h2>Hoofding 2</h2><h3>Hoofding 3</h3><h4>Hoofding 4</h4>
Sinds HTML 5, is het mogelijk om in de tekst ook H1 te gebruiken omdat er een duidelijk verschil in de code gemaakt wordt tussen de H1 titel en H1 body (tekst). Om te zien of je website HTML5 gebruikt, doe je CTRL+U en dan staat er bovenaan <!doctpe html>. De H1 in HTML5 gebruik je om een paginatitel zoals bijvoorbeeld “Alle Google diensten” onder te verdelen omdat het een zeer algemene titel is. In dit geval zou je de volgende H1 kunnen gebruiken: “Gmail”, “Zoeken”, “Drive”, … Voor de titel “Groenten” zou je als H1 “Wintergroenten”, “Zomergroenten”, … kunnen gebruiken.
Paragrafen
Paragraaf
Bij elke paragraaf moet je specificeren dat een nieuwe paragraaf begint met HTML opmaak.
Code:<p>Om een paragraaf aan te duiden</p>
Nieuwe regel
Voorbeeld:
Dit is een zin die eindigt
op een nieuwe regel.
Code:Dit is een zin die eindigt <br />op een nieuwe regel.
Lijsten
Gesorteerde lijst
Voorbeeld:
- Eerste element
- Tweede element
- Derde element
Code:<ol>
<li>Eerste element</li>
<li>Tweede element</li>
<li>Derde element</li>
</ol>
Ongesorteerde lijst
Voorbeeld:
- Eerste element
- Tweede element
- Derde element
Code:<ul>
<li>Eerste element</li>
<li>Tweede element</li>
<li>Derde element</li>
</ol>
Inspringende lijst
Een inspringende lijst is een lijst met verschillende niveau’s. Het voorbeeld hieronder is met een gesorteerde lijst. Maar je kan hetzelfde ook doen met gesorteerde lijsten: vervang dan <ul>&</ul> door <ol>&</ol>.
Voorbeeld:
- Eerste element
- Eerste inspringend element
- Tweede element
Code:<ol>
<li>Eerste element
</ol>Eerste inspringend element</li>
<li>Tweede element</li>
</ol>
<li>
Opmaak
Vet gedrukt
Voorbeeld:
Bold
Code:<b>Bold</b>
Schuin gedrukt (cursief)
Voorbeeld:
Schuin gedrukt
Code:<i>Schuin gedrukt</i>
Kleine tekst
Voorbeeld:
kleine tekst
Code:<small>kleine tekst</small>
Nadruk
Voorbeeld:
Nadruk leggen op een stuk tekst
Code:<em>Nadruk leggen op een stuk tekst</em>
Doorstrepen
Voorbeeld:Tekst doorstrepen
Code:<del>Tekst doorstrepen</del>
Gemarkeerd
Voorbeeld:
Gemarkeerde tekst
Code:<mark>Gemarkeerde tekst</mark>
Citaat van een andere bron
Voorbeeld:
Citaat van een andere bron
Code:<blockquote>Citaat van een andere bron</blockquote>
Citaat
Voorbeeld:
Bij BWW zorgen we voor Betaalbare websites voor een betere wereld
Code:Bij BWW zorgen we voor <q>Betaalbare websites voor een betere wereld</q>
Links
Hyperlink
Met een hyperlink kan je een link leggen naar een andere pagina van je website of naar een externe website. Je hoeft echter de volledige link niet te tonen, je kan die achter tekst zetten dankzij HTML opmaak.
Voorbeeld:<a href="url">Link text</a>
Bezoek onze website
Code:<a href="https://www.smartdata.agency/">bezoek onze website</a>
Mailto link
Een Mailto link is een eenvoudige manier om bezoekers e-mails te laten sturen. Je gebruikt hiervoor een speciale link die verbinding maakt met het e-mailprogramma van je bezoekers. Er wordt dan een e-mail geopend met jouw e-mailadres erin, zodat ze jou gemakkelijk kunnen contacteren.
Voorbeeld:<a href="mailto:[email protected]">Link tekst</a>
E-mail Dominic Heselmans
Code:<a href="mailto:[email protected]">E-mail Dominic Heselmans</a>
Link openen in nieuw tabblad
Het verschil met een gewone hyperlink, is dat deze HTML opmaak ervoor zorgt dat de link geopend wordt in een nieuw tabblad. De huidige pagina blijft dus open, waardoor jij je bezoeker niet meteen verliest aan de nieuwe webpagina. Bezoekers kunnen zo ook gemakkelijker terugkeren naar de originele pagina.
Code:<a href="https://www.smartdata.agency/" target="_blank">bezoek onze website</a>
Anchor tekst link
Een anchor tekst link is een manier om te verwijzen naar bepaalde plekken op de pagina. Een voorbeeld daarvan vind je in dit artikel! Je voegt bovenaan dus een inhoudsopgave toe met links die verwijzen naar de juiste paragraaf in de tekst eronder. Maar dat hoeft niet perse een inhoudsopgave te zijn, een anchor tekst link kan ook perfect in een doorlopende tekst.
Code:<a href="#css">Wat is CSS?</a><a id="css">Wat is CSS?</a>
De eerste regel is de link naar het element op de pagina (regel 2).
Foto’s
Natuurlijk kan je ook foto’s toevoegen met opmaak. De alt="tekst gebruik je om meer informatie te verschaffen over de foto. Deze extra informatie wordt getoond wanneer je met je cursor op de foto blijft staan.
Code:<img src="foto.jpg" alt="mijn foto" width="104" height="142">
nofollow
Een nofollow link is net zoals een gewone link, maar dan met specifieke HTML opmaak die ervoor zorgt zoekmachines de URL niet volgen. Je gebruikt deze link wanneer je geen controle hebt over de pagina waarnaar gelinkt wordt. Meer over de WordPress nofollow vertellen we je op onze blog!
Voorbeeld:<a href="URL" rel="nofollow">Link tekst</a>
test pagina
Code:<a href="https://www.google.com/" rel="nofollow">test pagina</a>
Kolommen
Er bestaan ook heel wat opties om kolommen te gebruiken op je website. We vertellen je alles over kolommen in WordPress in een ander artikel.
Button
Knoppen zijn een erg goede manier om de aandacht van je bezoekers te trekken en ze actie te laten ondernemen. Je kan ze op verschillende manieren opmaken, en met HTML is dat erg eenvoudig!
Voorbeeld:
Contact
Code:<a class="button" href="https://www.smartdata.agency/">Contact</a>
Voor een uitgebreide uitleg over HTML of als je een specifieke tag zoekt, kan je naar www.w3schools.com surfen.
