Zelf simpel HTML en CSS leren

HTML is van oudsher de manier om websites te bouwen. Met programma’s als Dreamweaver of Frontpage werden hele websites gemaakt. Ook WordPress gebruikt HTML, alleen is het voor de gebruiker gemakkelijker gemaakt. Lees hoe HTML werkt in WordPress en de Gutenberg editor.

Visuele en tekst editor

Er zijn twee manieren om berichten en pagina’s van je WordPress website te bewerken of toe te voegen. Dit zijn de de Visuele editor en de Tekst editor. Beiden gebruiken dezelfde internettaal, namelijk HTML, kort voor: Hyper Tekst Markup Language. Alleen zijn er in WordPress twee verschillende manieren om de HTML weer te geven. Een handige tip en truc vind je verderop op deze pagina.

Tekst maken met de WordPress Visuele editor

De Visuele editor is een WYSIWYG (What You See Is What You Get) editor met handige knoppen bovenin. Hierdoor is het heel makkelijk om bijvoorbeeld vetgedrukte of schuine tekst op te maken, om tekst uit te lijnen, en om linkjes en koppen toe te voegen. De Visuele editor geeft de opgemaakte resultaten weer, niet de code.

Tekst maken met de WordPress Tekst editor

De Visuele editor van WordPress is niet helemaal perfect. Elke WordPress gebruiker te maken krijgen met een onstabiele layout, die je met een klein beetje kennis van HTML en CSS wel kunt fixen. En dat doe je in de WordPress Tekst editor. Hier kun je namelijk opmaak toevoegen die in de Visuele editor niet beschikbaar is. Ook kun je hier shortcodes van plugins aan toevoegen bijvoorbeeld van een contactformulier.

Switchen of overschakelen tussen Visuele en teksteditor

Je kan makkelijk switchen of overschakelen tussen de visuele en teksteditor. Dit kan in Gutenberg bij elk blok of voor je hele pagina.

Switchen tussen Visuele en teksteditor bij elk blok

Je kan makkelijk switchen of overschakelen tussen de visuele en teksteditor bij elk blok. Dit doe je bij de instellingen van elk blok.
Klik op ‘Als HTML bewerken’.

Switchen tussen Visuele en teksteditor op hele WordPress pagina

Je kan ook switchen of overschakelen tussen de visuele en teksteditor voor je hele pagina. Dit doe je helemaal rechtsbovenin de pagina bij de drie puntje. Zie afbeelding hieronder. Klik op ‘Code editor’ onder het kopje ‘editor’.

Voorbeelden van HTML in WordPress

Hieronder vind je enkele voorbeelden van HTML

Voorbeeld: Vette tekst

In de Visuele editor ziet vette tekst er zo uit:
Vetgedrukte tekst
In de Tekst editor ziet vette tekst (bold) er zo uit:
<strong>Vetgedrukte tekst</strong>

Voorbeeld: Tekstlink maken

In de Visuele editor ziet een hyperlink ziet er zo uit:
Link naar basiscursus WordPress
In de Tekst editor ziet de link er zo uit:

<a href=https://www.cursuswp.com/bootcamp/>Link naar basiscursus WordPress</a>

Voorbeeld: Kop maken

In de Visuele editor ziet een kop ziet er zo uit:

Dit is een kop

In de Tekst editor ziet de link er zo uit:

Dit is een kop

Zelf html maken, leren of aanpassen voor WordPress

Enige HTML en CSS kennis kan je wel frustraties schelen wanneer je een beroep moet doen op de Tekst editor om iets te verhelpen dat niet goed is gegaan, of wanneer je wat extra styling wil toevoegen. Dit is niet iets dat je in 1 keer leert. Je kan dit beter stapsgewijs over een langere periode doen. De meest overzichtelijke website om zelf stapsgewijs html te leren vind ik www.w3schools.com.

Truc om zelf html te maken zonder Dreamweaver

Het mooie van WordPress is dat je niet per se HTML hoeft te kunnen. De Visuele editor schrijft de HTML voor je. Je kan dit doen zonder een duur programma als Adobe Dreamweaver. Stel je hebt een link in html nodig ergens op je website naar bijvoorbeeld je contactpagina. Bijvoorbeeld in een widget of in een tabel in WordPress. Een handige truc om dit zelf in html te maken is dit:

1. Maak in Gutenberg een nieuw tekstblok aan
2. Type het woord dat gelinkt dient te worden, bijvoorbeeld ‘Home | Contact’.
   
3. Maak nu de link in de visuele editor met het kettingtekentje.
   
4. Je hebt nu een werkende link. Wat nu. Het is simpel:
5. Switch nu binnen je Gutenberg blok naar de teksteditor en voila, je hebt de html code die je nodig hebt.
   
6. Kopieer deze tekst op de plek waar je html nodig hebt.
   
7. Een tip van Arthur (2020). Standaard zet Gutenberg voor en achter je html een < p > en < / p > teken. Waarschijnlijk heb je die niet nodig en kun je deze weglaten. Dit hangt er een beetje vanaf hoe en waar je het gebruikt. Dit moet je even uitproberen hoe dit in de praktijk werkt.

Html, css training voor WordPress

Tijdens een WordPress training of cursus leg ik meer uit hoe dit werkt en wat je met html en css kan doen:

Cursus WordPress in Amsterdam

Geplaatst: 1 november 2011

WG-Plein 124
1054 SC Amsterdam
Cursus WordPress Amsterdam

Online WordPress cursus volgen op afstand vanuit huis

Geplaatst: 25 maart 2020

Wordpress cursus of training op maat voor gevorderden of voor beginners. Haal zo veel mogelijk uit je WordPress website. Leer je website maken op elk niveau.

WordPress Bootcamp all-in one spoedcursus

Geplaatst: 25 april 2014

All-in-one Wordpress training. Basis, design en SEO. In 3 dagen (Amsterdam, Den Haag en Antwerpen) of 5 ochtenden online maak je je site met deze spoedcursus.

WordPress Pop-up Bootcamp spoedcursus op maat

Geplaatst: 12 januari 2017

Organiseer zelf je WordPress Bootcamp training. Werk in deze spoedcursus in 3 dagen in een klein groepje aan meerdere WordPress sites. Overal in Nederland en België.

CSS class en tekstopmaak

Je kan zelf de CSS van je thema aanpassen. Dit doe je tegenwoordig meestal in de Custom CSS van je thema. Hieronder lees je hoe je je CSS kan aanpassen. Je kan ook zelf stijlen aanmaken met behulp van een zogenaamde class. Lees hiervoor de uitgebreide handleiding:
Handleiding WordPress website typografie opmaakstijlen | css, class, span maken

Het is hiervoor handig de customizer te gebruiken:

• WordPress Customizer thema aanpassen wijzigen ontwerp
• Import/Export WP thema instelling customizer verhuizen

Tekstkleur

De eigenschap color wordt gebruikt om de kleur van de tekst in te stellen. De kleur wordt gespecificeerd door:
een kleurnaam – zoals “rood”
een HEX-waarde – zoals “#ff0000”
een RGB-waarde zoals “rgb (255,0,0)”

Voorbeeld

body {
color: blue;
}

h1 {
color: green;
}

Tekstuitlijning

De eigenschap text-align wordt gebruikt om de horizontale uitlijning van een tekst in te stellen.
Een tekst kan links of rechts worden uitgelijnd of gecentreerd.

Het volgende voorbeeld toont gecentreerde en links en rechts uitgelijnde tekst (linkeruitlijning is standaard als de tekstrichting van links naar rechts is en rechteruitlijning is standaard als de tekstrichting van rechts naar links is):

Voorbeeld

h1 {
 text-align: center;
 }

h2 {
text-align: left;
}

h3 {
text-align: right;
}

Tekstdecoratie

De eigenschap text-decoration wordt gebruikt om decoraties in tekst in te stellen of te verwijderen.

De waarde text-decoration: none; wordt vaak gebruikt om onderstreping uit links te verwijderen:

Voorbeeld

a {
 text-decoration: none;
 }

h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

Letterafstand

De eigenschap letterafstand wordt gebruikt om de ruimte tussen de tekens in een tekst op te geven.

Het volgende voorbeeld laat zien hoe u de ruimte tussen tekens kunt vergroten of verkleinen:

Voorbeeld

h1 {
 letter-spacing: 3px;
 }

h2 {
letter-spacing: -3px;
}

Lijnhoogte

De eigenschap line-height wordt gebruikt om de ruimte tussen regels op te geven:

Voorbeeld

p.laag {
 line-height: 0.8;
 }

p.hoog {
line-height: 1.8;
}

Schaduw tekst

De eigenschap text-shadow voegt schaduw toe aan tekst.

In het volgende voorbeeld worden de positie van de horizontale schaduw (4 px), de positie van de verticale schaduw (3 px) en de kleur van de schaduw (rood) opgegeven:

Voorbeeld

h1 {
 text-shadow: 4px 3px red;
 }

Alle CSS-teksteigenschappen

Alle veel voorkomende CSS-teksteigenschappen die je kan gebruiken:

color
De kleur van de tekst

direction
Specificeert de tekstrichting / schrijfrichting

letter-spacing
Vergroot of verkleint de ruimte tussen tekens in een tekst

line-height
lijnhoogte Stelt de lijnhoogte in

text-align
Geeft de horizontale uitlijning van tekst aan

text-decoration
Geeft de decoratie aan die aan tekst wordt toegevoegd

text-indent
Specificeert de inspringing van de eerste regel in een tekstblok

text-shadow
Geeft het schaduweffect aan dat aan tekst wordt toegevoegd

text-transform
Bepaalt het hoofdlettergebruik van tekst

text-overflow
Geeft aan hoe overvolle inhoud die niet wordt weergegeven naar de gebruiker moet worden gesignaleerd

vertical-align
Stelt de verticale uitlijning van een element in

white-space
Hiermee geef je op hoe witruimte binnen een element wordt verwerkt
woordafstand Vergroot of verkleint de ruimte tussen woorden in een tekst

Html en CSS handleidingen voor beginners

Wil je meer leren? Lees deze Html en CSS handleidingen voor beginners, zodat je telkens een stap verder komt:

Html en CSS tips

Je kan je html en CSS code opruimen en organiseren met deze tool:
https://html-cleaner.com/css

Meer weten over opmaak en CSS?

Met CSS kun je de vormgeving en ontwerp van meerdere webpagina goed bepalen en naar je hand zetten. Lees meer handleidingen en tips over CSS en de mogelijkheden:

• Css, class, span stijlen maken opmaak WordPress website
• CSS website aanpassen met Yellow Pencil WP plug-in
• CSS Element inspecteren WordPress aanpassen browser
• CSS aanpassen Beaver builder basis voor beginners