HTML opmaak

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?
• Hoofdingen
• Paragrafen
• Nieuwe regel
• Lijsten
  • Gesorteerde lijst
  • Ongesorteerde lijst
  • Inspringende lijst
• Opmaak
  • Vet gedrukt
  • Schuin gedrukt (cursief)
  • Kleine tekst
  • Nadruk
  • Doorstrepen
  • Gemarkeerd
  • Citaat van een andere bron
  • Citaat
• Links
  • Hyperlink
  • Mailto link
  • Link openen in nieuw tabblad
  • Anchor tekst link
  • Foto’s
  • Nofollow
• Kolommen
• Button

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:

1. Eerste element
2. Tweede element
3. 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:

1. Eerste element
   1. Eerste inspringend element
2. 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.