Hoewel het vandaag de dag zeer goed mogelijk is om een blog bij te houden zonder ook maar enige kennis van HTML, is het altijd handig om er toch iets van af te weten. Diegenen met koudwatervrees kan ik meteen geruststellend nieuws brengen: HTML is niet zo moeilijk als het lijkt. Een kleine cursus HTML voor beginners.
HTML voor beginnende bloggers?
In principe heb je geen HTML (ofte: HyperText Markup Language, de programmeertaal die je gebruikt voor de opmaak van webpagina’s). Maar dankzij de WYSIWYG-editor in WordPress hoef je je in de meeste gevallen niet druk te maken over HTML.
Het ligt dan ook niet in mijn bedoeling om jullie hier en nu om te turnen tot heuse specialisten. De praktijk leert me echter dat, hoe gelikt de standaardopmaak van je blogpost ook is, eerder vroeg dan laat zit je binnensmonds te vloeken omdat bepaalde zaken niet op het scherm komen zoals jij dat had gewild.
En dan is het berehandig als je “een mondje HTML spreekt.” Dat is trouwens ook het geval wanneer je aan de gang gaat met tekst-widgets en dergelijke. Hoewel het in de laatste versies van WordPress vandaag de dag ook mogelijk is om de opmaak te verzorgen zonder dat je je toevlucht moet nemen tot HTML.
Gelieve ook nog op te merken dat je HTML vooral gebruikt tijdens de opmaak van individuele blogberichten en -pagina’s. Voor de vormgeving en indeling van het uiterlijk van je blog (thema) wordt veelal CSS gebruikt. Maar daar gaat het hier dus niet over.
Hier dus geen uitgebreide theorieën, maar gewoon enkele panklare oplossingen voor wat courante bewerkingen. Je zal trouwens merken dat, wanneer je er een beetje op toelegt, je snel enige structuur en logica kan vinden.
Voor een goed begrip nog even zeggen dat je toegang hebt tot de HTML-codes van je blogpost door in het dashboard van je blog te kiezen voor de HTML(tekst)-modus.
HTML: 4 basisprincipes
1. HTML-commando’s bestaan uit tags
Deze tags zijn niet te verwarren met de tags in WordPress. HTML-tags geven aan hoe een bepaald stuk tekst eruit moet zien. Ze bestaan uit letters of (Engelse) woorden die worden voorafgegaan door het kleiner dan-teken (<) en afgesloten door het groter dan-teken (>).
2. HTML-tags vormen een paar
De meeste HTML-elementen komen in paren. Wil je het woord BEN in het vet zetten dan krijg je:
<b>BEN</b>
3. Opening tags en closing tags
De HTML heeft zijn uitwerking op de tekst tussen de beide tags in. Waarbij het stukje code links van de tekst (<b>) de opening tag is. Het brokje code rechts van de tekst (</b>) noemen we de closing tag. En klein maar belangrijk detail: de closing tag bevat ook altijd een slash (/).
Uitzonderingen vormen </hr> (voor het maken van een horizontale scheidingslijn in je content) en <br> (neemt een nieuwe regel). Deze zet je na het laatste karakter van de bewuste regel.
4. Respecteer het paar opening en closing tags
Zie ook punt 2 hierboven. Opening- en closing tags moeten steeds tot dezelfde “familie” behoren. Een stukje HTML als:
<b>BEN</i>
zal dus niet werken. Wil je BEN tegelijkertijd in het vet én het cursief zetten (wat dus perfect mogelijk is), typ je:
<b><i>BEN</i></b>
HTML voor beginners: voorbeelden
Voor het gemak zullen we werken met het volgend stukje tekst:
“Sharp Ben is geen goed leraar. Hij doet wel zijn stinkende best. Daarom waardeer ik hem zeer!’
De brokjes HTML zette ik in het blauw maar dat had je zonder twijfel al begrepen.
1. Alinea’s en paragrafen
Sharp Ben is geen goed leraar.<br>
Hij doet wel zijn stinkende best.<br>
Daarom waardeer ik hem zeer!
Na elke zin wordt een nieuwe regel genomen (harde return).
<p>Sharp Ben is geen goed leraar.
Hij doet wel zijn stinkende best.</p>
Daarom waardeer ik hem zeer!
Regel 1 en 2 vormen één alinea, regel 3 is het begin van de volgende alinea.
Sharp Ben is geen goed leraar.
<p style=”text-align: right;”>Hij doet wel zijn stinkende best.
Daarom waardeer ik hem zeer!</p>
Regel 2 en 3 vormen een aparte alinea, die rechts wordt uitgelijnd.
<center>Sharp Ben is geen goed leraar. Hij doet wel zijn stinkende best. Daarom waardeer ik hem zeer!</center>
De tekst wordt (horizontaal) gecentreerd.
2. Tekstopmaak
a) De basics
<b>Sharp Ben is geen goed leraar.</b> (vet)
<i>Hij doet wel zijn stinkende best.</i> (cursief)
<b><i>Daarom waardeer ik hem zeer!</i></b>(vet en cursief)
b) Lettergrootte
<FONT size=”4″>Sharp Ben is geen goed leraar. Hij doet wel zijn stinkende best. Daarom waardeer ik hem zeer! 4</FONT>
Het cijfer 4 duidt de lettergrootte aan. Er zijn 7 lettergroottes. 3 komt overeen met de standaard lettergrootte van je blogposts.
c) Lettertype
<FONT face=”Verdena”>Sharp Ben is geen goed leraar. Hij doet wel zijn stinkende best. Daarom waardeer ik hem zeer!</FONT>
Stelt het Lettertype in op Verdena.
d) Letterkleur
<FONT color=”RED”>Sharp Ben is geen goed leraar. Hij doet wel zijn stinkende best. Daarom waardeer ik hem zeer!</FONT>
De letterkleur wordt ingesteld op rood.
e) Combinaties
<FONT size=”4″ face=”Verdena” color=”RED”>Sharp Ben is geen goed leraar. Hij doet wel zijn stinkende best. Daarom waardeer ik hem zeer!</FONT>
Stelt de tekst in op Verdena, lettergrootte 4 in de kleur rood.
f) Koptekst
<h3>Sharp Ben is geen goed leraar</h3>
Stelt de tekst in op koptekst 3. Er zijn 6 verschillende kopteksten mogelijk. Welke de precieze opmaak hiervan is hangt af van de (standaard)instellingen van je blogtheme en verschilt dus van blog tot blog.
3. Opsommingslijstjes maken
Zoals je weet zijn er twee soorten opsommingslijstjes: de ongeordende lijst (met bullet points) en de genummerde lijst.
a) Ongeordende lijst
Wil je een lijstje met bullet points maken in HTML, dan is het van belang dat je aangeeft waar het lijstje begint en waar het ophoudt. Daarnaast moet je ook de lijstitems definiëren. En dus krijg je:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
waarbij je de lijstitems normaliter telkens een beetje ziet inspringen.
b) Genummerde lijst
Zelfde verhaal bij de genummerde opsommingslijst (waarbij je telkens automatisch een volgnummer krijgt wanneer je een item toevoegt). Alleen wordt het begin van de lijst hier aangekondigd met <ol> en nadien afgesloten met </ol>. Dus:
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
4. (Block)quotes maken
Quotes kan je gebruiken om iemand letter te citeren of om een stuk tekst groot uit te lichten. Hoe dit er op jouw blog effectief uit komt te zien hangt af van je WordPress-thema.
<blockquote>Sharp Ben is geen goed leraar</blockquote>
5. Hyperlinks maken
a) Links maken naar webpagina’s
<a href =”http://blogtrommel.com/“>Blogtips</a>
Er wordt een link geplaatst naar Blogtrommel.com. Het woord “Blogtips” is in dit geval aanklikbaar. Met andere woorden: een klik op dat woord brengt je naar (de homepagina van) Blogtrommel.com.
b) Linken naar een mailadres
<A HREF=”mailto:sharpbenblog@gmail.com”>Mail Sharp Ben</A>
De woorden “Mail Sharp Ben” worden aanklikbaar gemaakt. Klik en er wordt meteen een scherm geopend in je (standaard) mailprogramma. De bestemmeling wordt per direct ingevuld.
Tot zover enkele grondbeginselen van het HTML-gebeuren. De absolute basics, dat spreekt. Wil je je verder in de materie verdiepen dan zijn er natuurlijk een boel sites waar je info en panklare codes kan vinden. Als bron voor dit stuk gebruikte ik onder andere Handleidinghtml.nl.
Dus, HTML is niet zo moeilijk… 😉 Zoals gewoonlijk wordt kunst door oefening gebaard. Wil je je vertrouwd maken met HTML dan kan je tijdens het schrijven aan je blogpost regelmatig overschakelen naar de HTML-modus. Je kan dan snel zien wat welke HTML-codes verantwoordelijk zijn voor welk visueel effect.
Kopieer je stukjes HTML-code van elders, let er dan zeker op dat je alles mee kopieert. Eén karakter te veel of te weinig en het zaakje kan volledig in de soep draaien.
Geef een reactie