Intro:

Tegenwoordig worden de meeste websites gemaakt via een webbuilder of contentmanagementsysteem (zoals WordPress, Joomla of Drupal)

Toch is het nuttig enkele HTML codes te kunnen toepassen.

Via HTML is het namelijk mogelijk je website aan te passen zodat hij er mooier uitziet.

Verwacht hier dus GEEN volledige HTML cursus (daar zijn andere websites voor), wel een hoop vaak gebruikte codes om een bestaande website wat beter af te werken.

Wat is HTML ?

HTML staat voor HyperText Markup Language.

Het is de “programeertaal” waarin websites worden geschreven, ja ook de meest ingewikkelde websites bevatten HTML code.

Nouja, programeertaal…

Het is eerder een opmaak code voor het maken van pagina’s die door een browser wordt gelezen.

Handige HTML tags (=codes) en hun attibuten:

Vetgedrukte, Schuingedrukte, doorstreepte, onderstreepte & typemachine tekst:

Al deze tags zijn nauw verwant aan elkaar, we hebben ze dus ook samen gezet.

Met de <B> tag krijg je vetgedrukte tekst. </B> sluit de tekst af.

Zo ziet het eruit.

Met de <I> tag krijg je schuingedrukte tekst.</I> sluit de tekst af.

Dat ziet er zo uit.

Met de <del> tag krijg je doorgehaalde tekst.</del> sluit de tekst af.

Dit ziet er zo uit.

Met de <U> tag krijg je onderstreepte tekst.</U> sluit de tekst af.

Dit is onderstreept.

En met de <TT> krijg je typemachine tekst.</TT> sluit de tekst af.

Dit is typemachine tekst.

Koppen in HTML:

Met de <h1> krijg je een Kop 1 </h1> sluit de tekst af.

Met de <h2> krijg je een Kop 2 </h2> sluit de tekst af.

Met de <h3> krijg je een Kop 3 </h3> sluit de tekst af.

Ik denk dat je reeds kan raden van Kop 4 is, nouja je gaat beter niet lager dan 3 koppen op het internet.

Bewegende tekst in HTML:

Bijna geen enkel thema onder wordpress ondersteund dit.

Bewegende tekst kan door middel van <marquee>, marquee wordt echter niet door alle browsers ondersteund.
Toch kunnen alle grote browsers er mee overweg.

Hem gebruiken is eenvoudig, je plaatst gewoon de tekst die je wil laten bewegen tussen de marquee tegs.

<marquee>Kijk deze tekst beweegt !</marquee>

Een Enter in HTML:

Soms heb je een “Enter” nodig in bepaalde pagina’s.

HTML kent echter geen Enters, als je op een volgende regel wil beginnen moet je  <BR> op het einde van je tekst toevoegen.

Er is geen sluitingstag, </BR> bestaat dus niet ! ! ! 

Een voorbeeld van het gebruik van de <BR> tag:

Welkom op Hobbygamers.be !<BR>

We hopen dat je het hier naar je zin hebt<BR>

Een (harde) Spatie in HTML:

Als je de tekst in WordPress bekijkt zul je af en toe de &nbsp; code tegenkomen.

&nbsp; wil zeggen dat daar een spatie in de tekst moet staan.

Een Horizontale lijn maken in HTML:

Een andere handige tag om je pagina of bericht  secties op te delen is de <HR> tag. Net als de <BR> tag heeft deze GEEN sluittag. </HR> bestaat dus niet.

Deze tag zorgt ervoor dat een horizontale lijn op het scherm verschijnt, zoals hieronder:

De dikte & lengte van de horizontale lijn kan je aanpassen via de attributen size en width.

Je geeft dan deze code in: <HR size=”10″ width=”50%”>

Voorbeeld:

Paragrafen.

Een paragraaf begint een nieuwe regel en doet dit na een lege regel erboven vrij te hebben gehouden.
De <P> tag heeft wel een eindtag, </P>

Daar we in WordPress standaard in Paragrafen tikken komt het dus vaak voor dat elke lange zin opzich een paragraaf vormt. Elke Enter in wordpress start een volgende Paragraaf. Een mooi voorbeeld is deze blok tekst.

Met align kun je aangeven of je de tekst in de paragraaf left (links), center (in het midden), of right (rechts) wilt uitlijnen. Standaard is align ingesteld op left. Een align wordt geschreven na het <P teken.

Hierbij de 2 meest voorkomende HTML codes:

<P align=”center”>Zo schrijf je de tag als je de paragraaf in het midden wilt uitlijnen</P>

<P align=”right”>Zo schrijf je de tag als je de paragraaf rechts wilt uitlijnen</P>

Tekst centreren in HTML kan ook zonder Paragraaf:

Tegenwoordig wordt meestal met Paragrafen gewerkt, niet alleen in HTML ook in Word / Wirter, Emails enz.

Toch is het niet altijd mogelijk om met Paragrafen te werken. Bijvoorbeeld in BLoks van WordPress of Joomla.

Hier kan dan de Center tag worden gebruikt:

<CENTER>Deze sluit je dan af met</CENTER>

Lettergrootte, Lettertype & de kleur aanpassen in HTML:

Via FONT kan je deze aanpassen.

FONT heeft de volgende attibuten:

• size=”18″ –> Deze bepaald de grootte van je tekst, “18” geeft de lettertype gro0tte aan.
• face=”Verdana” –> Deze bepaalt het lettertijpe van je tekst, niet alle lettertypes worden door alle browsers goed gelezen !
• color=”Red” –> Deze bepaald de kleur van je tekst, “red” geeft de kleur aan. Niet alle kleuren hebben een Engelse vertaling. Je kan meestal beter de RGB-waarden ( Hex code) gebruiken

<FONT size=”18″ face=”Verdana” color=”Red”>Nu krijg je dus lettergrootte 18, met lettertype Verdana in de kleur rood </FONT>

Nu krijg je dus lettergrootte 18, met lettertype Verdana in de kleur rood

In WordPress / Joomla wordt deze code niet zomaar overal ondersteund !

Dit omdat lettergrotes & lettertypes vastgelegd zijn in het thema (=ontwerp) van de site. De kleur wordt meestal wel ondersteund.

Wat kan je met de SPAN tag in HTML ?

Met <span> kan je een deel van een HTML-document insluiten (zonder visuele scheiding)
Kortom een bepaalde strook tekst kan een bepaade opmaak worden meegegeven.
Dit gebeurd met de style, class of id attributen.

<span>wordt afgesloten door de eindtag </span>, <span>wordt vaak gegenereerd door WordPress of andere programma’s om sites te maken

Lijsten (=opsommingen) in HTML:

Iets wat we vaak gebruiken als tekstopmaak is een  ongenummerde lijst.

Ieder lijstobject wordt voorafgegaan door een dikke punt.

Je begint de ongenummerde lijst met de <UL> tag, dit is de openingstag voor de lijst.
Vervolgens gebruik je de tag <LI> voor ieder woord dat je in de lijst wilt plaatsen.
De eindtag </LI> is niet nodig, maar je mag hem wel plaatsen.
Als je alle List Items hebt ingevoerd, sluit je de lijst met de eindtag </UL>.

Voorbeeld :

<UL>
<LI>Pokémon X</LI>
<LI>Pokémon Y</LI>
<LI>Pokémon Z</LI>
</UL>

• Pokémon X
• Pokémon Y
• Pokémon Z

In WordPress / Joomla wordt deze code niet zomaar overal ondersteund !

Deze codes zijn eveneens vastgelegd in het thema van de website. Op deze site is het gebruik van deze code WEL mogelijk want het thema is aangepast !

Voor een genummerde lijst doe je net het zelfde, alleen vervang je de <UL>door <OL>

Voorbeeld :

<OL>
<LI>Pokémon X</LI>
<LI>Pokémon Y</LI>
<LI>Pokémon Z</LI>
</OL>

1. Pokémon X
2. Pokémon Y
3. Pokémon Z

Opsommingen kunnen stevig door elkaar gebruikt worden:

De standaard tekst opmaak tools in WordPress & Joomla kunnen dit niet, maar je kan wel de HTML code inbrengen !

<ol>
<li>Pokémon X
<ol>
<li>Pokémon X</li>
<li>Pokémon Y</li>
<li>Pokémon Z</li>
</ol>
</li>
<li>Pokémon Y
<ul>
<li>Pokémon X
<ul>
<li>Pokémon X</li>
<li>Pokémon Y</li>
<li>Pokémon Z</li>
</ul>
</li>
<li>Pokémon Y</li>
<li>Pokémon Z</li>
</ul>
</li>
<li>Pokémon Z</li>
</ol>

De uitkomst:

1. Pokémon X
   1. Pokémon X
   2. Pokémon Y
   3. Pokémon Z
2. Pokémon Y
   • Pokémon X
     • Pokémon X
     • Pokémon Y
     • Pokémon Z
   • Pokémon Y
   • Pokémon Z
3. Pokémon Z

Tabellen  in HTML:

Tabellen zijn super handige dingen om te verwerken in een tekst.
Ze zorgen voor een mooie opmaak van de pagina & geven vergelijkingen eenvoudig weer.

De basis:

Een tabel begint met de <TABLE> tag.
Vervolgens begin je met een rij met de tag: <TR> (komt van Table Row).
In de rij plaats je cellen met de tag: <TD> (staat voor Table Data).
Na de <TD> tag plaats je de informatie die je in de cel op wilt nemen.
Veel automatische functies gebruiken </TD> & </TR> tags om cellen en rijen af te sluiten, dit is echter niet verplicht.
Tabellen worden ALTIJD met de  eindtag </TABLE> afgesloten.

Wanneer je een tabel enkel met deze code inbrengt ziet ze er niet uit, je hebt namelijk niet aangegeven hoe groot de tabel moet zijn, ook zijn je tabelranden onzichtbaar.

Een echte tabel:

height: Hiermee stel je de hoogte van de tabel in.
Dit kun je doen in pixels of in een percentage.

width: Hiermee stel je de breedte van de tabel in.
Dit kun je doen in pixels of in een percentage.

Percentages hebben als voordeel dat tabellen er ook op mobiele apparaten er goed uit zien, toch worden de meeste tabellen gemaakt met pixels (px).

border: Hiermee stel je de dikte van de rand van de tabel in.
Standaard zijn tabellen zonder rand, de border moet dus altijd vastgelegd worden.

<table style=”height: 128px;” border=”10″ width=”307″>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Het thema van WordPress, Joomla of een andere site builder tool bepaald in grote mate hoe een tabel er zal uitzien op je webste. Het is namelijk de bedoeling dat tabbellen er zo uniform mogelijk uit zien op je website. Dit maakt dat je mogelijk niet alle opmaakcodes kunt gebruiken.

Opmaakcodes in HTML (perfect toe te passen op tabellen)

• bgcolor: Hiermee stel je de achtergrondkleur in.

• align: kun je aangeven of je de tekst left (links), center (in het midden), of right (rechts) wilt hebben.
• valign: regelt de verticale uitlijning van de inhoud van de cel. De waarden die je hier kunt invullen zijn: top, center of bottom.

• colspan: Bepaalt het aantal kolommen dat de cel in neemt, hiermee voeg je dus cellen samen.
• rowspan: Bepaalt het aantal rijen dat de cel inneemt, hiermee voeg je dus cellen samen.

Een voorbeeld:

<table style=”height: 268px; border-color: #000000; background-color: #e3e16b;” border=”5″ width=”627″>
<tbody>
<tr>
<td style=”text-align: center;” colspan=”2″>Samengevoegde kolom</td>
<td style=”text-align: center;”>gewoon een cel</td>
<td style=”text-align: center;” rowspan=”3″>samengevoegde rijen</td>
<td style=”text-align: center;”>gewoon een cel</td>
</tr>
<tr>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
</tr>
<tr>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
</tr>
<tr>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
<td style=”text-align: center;”></td>
</tr>
</tbody>
</table>

Samengevoegde kolom		gewoon een cel	samengevoegde rijen	gewoon een cel