HTML cursus voor beginners #1 – Opmaak tekst aanpassen

In deze HTML cursus voor beginners zullen we enkele basisbeginsels van HTML uitleggen en hoe je ze kunt toepassen. Je moet er wat mee oefenen om het onder de knie te krijgen en de html codes ook te onthouden, maar het principe is heel eenvoudig.

Als je voor het eerst een website met wordpress maakt zul je met name in de Wysiwyg editor je teksten typen en bewerken. De Wysiswg staat voor “What you see is what you get”, oftewel wat je ziet is wat je krijgt. Een soort Word omgeving. Dit betekent dat je niet hoeft te coderen om bijvoorbeeld een tekst of afbeelding op je pagina te bewerken.

Als je WordPress wat meer onder de knie krijgt zul je merken dat je meer behoefte hebt om ook de HTML editor te gaan gebruiken. Je kunt je website nog aantrekkelijker maken en met enkele krachtige maar eenvoudige HTML codes krijg je meer controle over de opmaak van je website.

Maar dan moet je die kennis wel in huis hebben natuurlijk, anders wordt het een zooitje. Dat leer je hier.

Er is ook een HTML cursus voor gevorderden (volgt later). Als je met de html codes van de beginnerscursus hebt geoefend dan ben je ook klaar om de gevorderden cursus te volgen.

1. HTML, Hoe werkt het?

De basis van HTML is niet moeilijk. Ik zal het principe uitleggen aan de hand van een voorbeeld.

Als je een tekst of afbeelding op je website een bewerking wilt geven dan voeg je een bepaalde code toe aan die afbeelding of tekst. Deze code is niet zichtbaar op de webpagina zelf, maar de code wordt wel vertaald door internet explorer naar een bepaald resultaat. Een HTML code werkt als volgt:

<html code>Dit is de tekst die ik wil bewerken met HTML</html code>

In het bovenstaande voorbeeld staat het woord “html code” voor een willekeurig HTML code.

1. met <html code> open je de HTML code.
2. Dan komt het te bewerken gedeelte in dit geval de tekst: “Dit is de tekst die ik wil bewerken met HTML”.
3. met </html code> sluit je de HTML code.

<html code> is alleen geen geldige HTML code, maar is enkel als voorbeeld genoemd. Nu zal ik een geldige HTML codering laten zien. Stel je wilt een tekst dikgedrukt (bold) maken, dan maak je gebruik van de code: of om deze bewerking te openen. In ons voorbeeld wordt de code:

Dit is de tekst die ik wil bewerken met HTML

reultaat:

Dit is de tekst die ik wil bewerken met HTML

De beginsels van HTML zijn dus niet moeilijk. In deze eerste cursus houden we het nog vrij eenvoudig. Hoe je tekst eenvoudig met HTML kunt opmaken leer je in de volgende stappen.

2. HTML eenvoudige tekst opmaak

Om je teksten aantrekkelijker te maken voor de lezers maak je gebruik van layout eigenschappen. De belangrijke woorden worden vaak benadrukt door ze er uit te laten springen.

vet/ dikgedrukt

Door woorden dikgedrukt te maken worden ze accentueerd. Dit prettig omdat je in een oogopslag te weten komt waar de tekst over gaat. Dit kan met de code of 
voorbeeld:
Dikgedrukt wordt: Dikgedrukt

schuin

Ook kun je tekst schuin maken als je wilt. Dat kan met de code of

voorbeeld:
Schuin wordt: Schuin

onderstreept

Als je een tekst wilt onderstrepen kan dat door middel van de html code of met

Onderstreept wordt: Onderstreept

doorgehaald

Het kan ook voorkomen dat je een stuk tekst wilt doorhalen. Dat resultaat kan verkregen worden met de code <del>.

<del>doorgehaald</del> wordt : ~~doorgehaald~~

combinaties tekst

Een combinatie van tekstbewerkingen kan ook. Stel je wilt vet en schuin

vet en schuin wordt: vet en schuin

3. HTML tekst opmaak overig

Sommige delen van teksten wil je misschien groter of kleiner uitvoeren. Of misschien moet er een woord uitspringen door hem een bepaalde kleur te geven. Dat kan. Je doet dat met

jouw te bewerken tekst of met

jouw te bewerken tekst

Het verschil is dat je met een paragraaf aanmaakt waardoor er altijd een extra witregel ontstaat na je bewerking en dat is niet altijd wenselijk. Stel je wilt een deel van de zin blauw maken, dan moeten de woorden achter de blauwe tekst niet op een volgende regel staan. Probeer het verschil eens uit en zie wat de twee verschillende HTML codes met je tekst doet.

Op de plaats “…………..” kun je verschillende bewerkingen invullen:

1. font-size: hier vul je een waarde in pixelgrootte in

2. font-weight: hier kun je een waarde invullen van 100-900, waarbij 100 erg dungedrukt is en 900 erg dikgedrukt. Je kunt ook het woord “normal” invullen dan is de tekst normaal. Dit is overigens hetzelfde als de waarde 400. De waarde 700 is hetzelfde als de waarde vetgedrukt

3. color: het woord color zegt het al, je kunt er kleur van een stuk tekst mee aangeven. De waarden red, green, blue, yellow kun je invullen. Wat ook kan is een RGB kleur invullen, dat is een kleur van 6 cijfer en of letters. bijvoorbeeld #000000 is zwart en #ffffff is wit

4. text-decoration: je kunt hier de volgende tekstbewerkingen mee aanbrengen: none (geen bewerking), underline (onderstreept), line-through (doorstreept), overline (streep erboven).

voorbeeld:

Deze tekst is 20 pixels, blauw met een streep eronder wordt:

Deze tekst is 20 pixels, blauw met een streep eronder

4. HTML Tekst uitlijnen

Voor het uitlijnen van tekst heb je twee opties:

1. Met kun je de tekst uitlijnen. Dat kan met niet. Op de plaats van “………” voeg je “text-align:center” toe om de tekst in het midden uit te lijnen. In plaats van center kun je ook “rigt” of “left” invullen om je tekst respectievelijk rechts of links uit te lijnen.

de kale code wordt dan: De tekst in het midden!

De tekst in het midden!

Je kunt hier ook weer een hele reeks andere html codes invoegen, zoals:

20 pixels, rood met streep

Deze tekst is uitgelijnd in het midden:

20 pixels, rood met streep

2. Met werkt het ook. Voor “……” vul je de waarde “center”, “right” of “left” in.

De tekst links!