HTML in WordPress berichten voor beginners

HTML, volluit HyperText Markup Language, is een ‘opmaak’-codetaal, en specificeert de opmaak van jouw webpagina’s. Je browser zet alle HTML code op jouw website automatisch om naar tekst, knoppen, lettertypes, afbeeldingen etc. Vervolgens kun je met CSS code deze elementen gaan stylen, er mooier uit laten zien. Maarrr, vandaag focussen we ons dus op HTML code.

Je kunt op jouw WordPress blogs en pagina’s namelijk ook HTML code gebruiken, en dat kan soms best handig zijn!

Waar kan ik HTML code typen?

Switch naar de tekst-modus in de WordPress bewerker voor blogposts of pagina’s (rood omlijnd in het screenshot hierboven). In deze modus kun je HTML code typen (in het grote rood omlijnde vak in het screenshot hierboven). Zie je deze switch niet? Installeer en activeer dan eerst deze plugin: Classic Editor. Je kunt steeds na het typen terugswitchen naar de visuele modus om jouw HTML code in actie te zien. PS. Natuurlijk hoef je niet zelf HTML code te typen en kun je ook gewoon de icoontjes boven het typveld gebruiken om je tekst op te maken, maar hey, we zijn hier om wat te leren!

Basis opbouw HTML code

Goed om te weten: jouw browser herkent HTML code alleen wanneer je het plaatst tussen ‘pijltjes’. Houd je altijd aan deze opbouw:
De pijltjes vind je naast het vraagteken op je toetsenbord (shift inhouden). Het eerst stukje tussen twee pijltjes geeft aan dat de code hier begint. Het tweede stukjes met de slash/ geeft aan dat de HTML code daar eindigt. Het stuk tekst dat je wilt opmaken zet je precies tussen de twee stukjes code. Vergeet vooral de slash / aan het einde van je HTML code niet, anders weet jouw browser niet dat de HTML code daar eindigt, en zal ie de code toepassen op alle daarop volgende tekst. En dat wil je (vaak) niet!

Dikgedrukt maken met HTML

Iets dikgedrukt maken met HTML is misschien wel het simpelste om mee te beginnen. De HTML code voor dikgedrukt is b, van bold (dikgedrukt in het Engels).

Laat jouw bedrijf groeien in de Webtuin

Schuingedrukt maken met HTML

De HTML code voor schuingedrukte tekst is i van italic (schuingedrukt in het Engels).

Laat jouw bedrijf groeien in De Webtuin

Doorstreept maken met HTML

De HTML code voor doorstreepte tekst is del van delete (verwijderen in het Engels).

Laat jouw bedrijf groeien in De Webtuin

Link maken met HTML

Wil je een link toevoegen aan jouw tekst? Dat kan ook met HTML. De code hiervoor is iets ingewikkelder, namelijk:
Vervang www.dewebtuin.nl voor de URL (link) waarnaar je wilt linken. Vervang de zwarte woorden Jouw link door het gedeelte van de tekst dat klikbaar moet zijn. Jouw code zou er dan bijvoorbeeld zo uit kunnen zien:

Laat jouw website maken door De Webtuin

In de bovenstaande zin wordt De Webtuin een actief linkje. Wanneer je er op klikt zul je automatisch naar dewebtuin.nl gaan.

Email versturen link in HTML

Dit lijkt heel erg op het maken van een linkje in HTML. Als link gebruik je dan jouw emailadres met mailto: ervoor. Het ziet er dan bijvoorbeeld zo uit:

Door op deze link te klikken stuur je een mailtje naar jouw@mailadres.nl . Klik je op dit linkje, dan opent automatisch jouw mailprogramma met in de ontvanger regel dit mailadres.

Voorbeeldzin met meerdere HTML codes

Je kunt meerdere HTML codes in een zin gebruiken. Kijk maar eens naar onderstaande zin:

Deze komt er dan zo uit te zien: Laat je bedrijf gloeien groeien in de Webtuin .

Overige HTML codes (zonder spaties gebruiken):

Onderstreept: < u> Jouw tekst < /u>
Jouw tekst

Typemachine tekst < tt> Jouw tekst < /tt>
Jouw tekst

Blok tekst: < blockquote> Jouw tekst < /blockquote>

Jouw tekst

Kleine tekst: < small> Jouw tekst < /small>
Jouw tekst

Grote tekst: < big> Jouw tekst < /big>
Jouw tekst

Gecentreerde tekst: < center> Jouw tekst < /center>