HTML staat voor HyperText Markup Language. Alle websites op het internet gebruiken HTML. Het is daarmee ook de basis van iedere webtekst op elke website. In het Nederlands kun je deze code vertalen in opmaaktaal. Het is de opmaaktaal voor tekst in een tekstdocument.

Hoe ziet HTML eruit?

Als voorbeeld nemen we de HTML-code van een vetgedrukte tekst. Een vetgedrukte tekst creëer je via de volgende code: De tekst die vetgedrukt moet zijn

De benamingen van de toetsenbordcombinaties

Alle HTML-codes hebben de en / als toetsenbord combinaties. heeft als benaming het meerdanteken. / heeft als benaming de schuine streep.

Hoe wijzig ik HTML?

Als je eenmaal weet hoe het werkt, dan is het erg eenvoudig om een HTML-code toe te voegen of aan te passen. De meest gebruikte HTML-codes zien er als volgt uit en schrijf je op deze manier:

Stap 1

Je begint met het minderdanteken naar links ().

Stap 2

Vervolgens typ je het woord of de zin die je opgemaakt wilt hebben. Het woord of de zin die je opgemaakt wilt hebben

Stap 3

Tot slot moet je de HTML-code sluiten. Dit doe je door wederom het minderdanteken naar links in te typen (). Zo ziet de HTML code er dan uit: Het woord of de zin die je opgemaakt wilt hebben

Waar wijzig ik een HTML-code?

Het is binnen WordPress erg eenvoudig om je HTML-code aan te passen. Rechtsboven in de pagina waarin jij je artikel schrijft kun je kiezen uit Visual en Tekst (zie onderstaande afbeelding). Onder Tekst staan de codes van je artikel. Onder Visual zie je het visuele beeld dat is gecreëerd door de codes. Dit is dan ook het beeld dat de bezoeker van de website krijgt te zien en hoogstwaarschijnlijk ook de pagina waarin jij je artikelen schrijft.

Tekst

Wanneer je op Tekst drukt zie je dat het artikel wat je aan het bewerken bent verandert in een soort codetaal. Je moet het namelijk zo zien: Een website bestaat volledig uit code. Dit geldt ook voor je blogs en artikelen. In elke website waar jij vetgedrukte teksten, linkjes, kopteksten, schuingedrukte teksten en alle andere bewerkingen ziet schuilt op de achtergrond een code om deze bewerkingen waar te maken.

Welke HTML-codes zijn er?

Er zijn ontelbaar veel HTML-codes. De belangrijkste heb ik hieronder voor je beschreven.

Tekst vetgedrukt

Een vetgedrukte test ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: De tekst

Tekst cursief

Een cursieve tekst, oftewel een schuin gedrukte tekst, ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: De tekst

Een link naar een website

Een link naar een andere pagina of website ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: >Het stukje tekst die de link krijgt

Voorbeeldje:

Ik wil jou via een link naar mijn cursus 'vindbare webtekst opbouwen' krijgen. Die link plaats ik dus in een woord of tekst zodat jij er op kan klikken. In codetaal ziet dat er als volgt uit: Ga nu naar mijn cursus 'vindbare webtekst opbouwen' Op de website krijgen de bezoekers het op deze manier te zien: Ga nu naar mijn cursus 'vindbare webtekst opbouwen'

Een tekst in de blockquote

Een tekst in de blockquote ziet er voor de bezoeker zo uit:

De tekst

In de HTML-code is het vertaald naar:

De tekst

Een doorgestreepte tekst

Een doorgestreepte tekst ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: De tekst

Een tekst met een streep eronder

Een tekst met een streep eronder ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: De tekst

Een opsomming met puntjes

Een opsomming met puntjes ziet er voor de bezoeker zo uit:

• De tekst in regel 1
• De tekst in regel 2
• De tekst in regel 3

In de HTML-code is het vertaald naar:

• De tekst in regel 1
• De tekst in regel 2
• De tekst in regel 3

Een opsomming in de tekst heeft twee codes. Een code waarmee je aangeeft dat je wilt opsommen in de tekst (codetaal ul) en de code voor elke extra regel in de opsomming (codetaal li). De opmaak van de opsomming met puntjes begint dus met

en bij de allerlaatste zin van de opsomming sluit je de opmaak door de code

. Elke nieuwe regel in de opsomming begint met

waarbij je aan het einde van deze regel de code sluit met

Een opsomming met cijfertjes

Een opsomming met cijfertjes ziet er voor de bezoeker zo uit:

1. De tekst in regel 1
2. De tekst in regel 2
3. De tekst in regel 3

In de HTML-code is het vertaald naar:

1. De tekst in regel 1
2. De tekst in regel 2
3. De tekst in regel 3

Een opsomming met cijfertjes werkt precies hetzelfde als een opsomming met puntjes. Je vervangt nu alleen de codetaal ul voor ol. De opmaak van de opsomming met cijfertjes begint dus met

en bij de allerlaatste zin van de opsomming sluit je de opmaak door de code

. Elke nieuwe regel in de opsomming begint met

waarbij aan het einde van deze regel je de code sluit met

.

Een code uitlichten

Zoals je in dit artikel ziet licht ik de codes uit door markeringen. Deze markeringen worden vaak ook specifiek gebruikt voor codes. Voor de bezoeker ziet dat er zo uit: De tekst In de HTML-code is het vertaald naar: De tekst

Kopteksten

In WordPress en andere websitesystemen kun je gebruik maken van zes soorten kopteksten die allen hun eigen grootte en waarde hebben. We noemen deze kopteksten ook wel H1, H2, H3, H4, H5 en H6. Ze hebben allemaal een soortgelijke code waarvan logischerwijs alleen de cijfers verschillen. De codes zien er als volgt uit:

Koptekst 1, ofwel H1

Een koptekst 1 ziet er voor de bezoeker zo uit:

De tekst

In de HTML-code is het vertaald naar:

De tekst

Koptest 2, ofwel H2

Een koptekst 2 ziet er voor de bezoeker zo uit:

De tekst

In de HTML-code is het vertaald naar:

De tekst

Koptest 3, ofwel H3

Een koptekst 3 ziet er voor de bezoeker zo uit:

De tekst

In de HTML-code is het vertaald naar:

De tekst

Koptest 4, ofwel H4

Een koptekst 4 ziet er voor de bezoeker zo uit:

De tekst

In de HTML-code is het vertaald naar:

De tekst

Koptest 5, ofwel H5

Een koptekst 5 ziet er voor de bezoeker zo uit:

De tekst

In de HTML-code is het vertaald naar:

De tekst

Koptest 6, ofwel H6

Een koptekst 6 ziet er voor de bezoeker zo uit:

De tekst

In de HTML-code is het vertaald naar:

De tekst

Moet ik het ook op deze manier aanpassen?

Ik hoor je al bijna denken: 'Moet ik al deze codes dan echt toepassen als ik mijn website wil bewerken?' Geen paniek! Want er is een veel overzichtelijkere manier.

Gebruik maken van HTML

Gebruik maken van HTML-codes is niet voor iedereen interessant. Er zijn echter ook mensen die een artikel schrijven waarbij ze zelf de HTML-codes typen. Sommige mensen vinden dit een prettige manier van werken. Daarnaast kan het gebeuren dat de codes in het artikel niet helemaal kloppen, waardoor je het op deze manier makkelijk aan kan passen. Voor het toevoegen van bepaalde widgets, die WordPress niet in het besturingssysteem heeft zitten, ben je genoodzaakt om deze widget via de HTML-code toe te voegen (maar laten we het nu niet te ingewikkeld maken).

Taakbalk

Er is namelijk een veel overzichtelijkere manier om deze HTML-codes te gebruiken. Kijk maar eens naar de taakbalk boven in de pagina op het moment dat je een artikel aan het schrijven bent. Elke handeling die je vanuit deze taakbalk uitvoert vertaald zich op de achtergrond in een HTML-code.

Voorbeeldje:

Ik wil het allereerste woord van dit artikel vetgedrukt hebben. Ik selecteer het woord HTML (door met de muis over het woord te gaan terwijl ik tegelijkertijd de linkermuisknop ingedrukt houd) en druk in de taakbalk op B. Zoals je in onderstaande afbeelding ziet is het woord nu vetgedrukt. Op de achtergrond is deze handeling vertaald naar een HTML code.

De HTML-pagina

We gaan even kijken hoe deze bewerking is vertaald naar een HTML-code. Wanneer ik rechts bovenin op Tekst druk kom ik in de HTML-pagina terecht. Vanaf daar kun je alle HTML codes van de tekst zien en zie je dat er ook een HTML code staat voor de tekst die ik vetgedrukt heb gemaakt.

Experimenteer met HTML

Je hoeft deze HTML-codes echt niet te begrijpen om een succesvolle website te creëren. Ik kan mij goed voorstellen dat je niks van al deze codes snapt. Het kan echter wel erg leuk zijn om met deze codes te experimenteren. Je zult zien dat artikelen schrijven nóg makkelijker wordt wanneer je op de hoogte bent van deze codes. Veel plezier! ;)

Gerelateerde WordPress-artikelen

• Hoe wijzig je een URL in Wordpress?
• Hoe maak je iets ongedaan of opnieuw in Wordpress?
• Hoe plaats je een horizontale lijn in Wordpress?

 

Hulp bij SEO

Wil je hulp bij SEO of je website dan ben je bij Geryaal aan het juiste adres. Hier helpt Geryaal je mee:

• Nieuwe website
• Hulp bij je Phoenix Site
• SEO Uitbesteden
• Bloggen uitbesteden