Wanneer je aan het bloggen bent is het altijd handig om wat kennis van HTML en CSS te hebben. Zeggen deze twee termen je niets, lees dan even verder voor een korte introductie en wat handige tips.
HTML betekent hyper text markup language en is de computertaal (ook wel markup genoemd) waar webpagina’s uit bestaan. Deze taal is nodig zodat je browser begrijpt wat je wilt laten zien.
Door het toevoegen van CSS – Cascading Style Sheets – kan je deze elementen een bepaalde styling geven. Denk hierbij aan een kleur, lettertype, dikgedrukt, schuingedrukt, enzovoort. Iedere webpagina heeft dus een basis aan HTML en CSS nodig om deze te kunnen bekijken.
Doordat tegenwoordig een browser meer kan inlezen en begrijpen dan vroeger, betekent dat de mogelijkheden van HTML en CSS ook steeds geavanceerder worden. Gelukkig is er altijd wel een basis te vinden en die blijft ongeveer hetzelfde, dus daar gaan wij het vandaag over hebben.
De Basis
Door het toevoegen van markup kan een webpagina gelezen worden door een browser en bekeken worden door iemand die aan het surfen is op het internet. Één ding wat altijd terugkomt bij markup is dat wanneer je iets ‘opent’, dit vervolgens ook moet ‘sluiten’. Openen en sluiten doe je door middel van de volgende tekens <...>, dus door middel van een kleiner dan en groter dan teken. Op de drie puntjes voeg je de markup toe. Sluiten door je door een slash teken toe te voegen (/), dit ziet er uit als volgt </...>.
Om het duidelijker te maken zal ik enkele voorbeelden geven.
De basis van een HTML pagina
<!DOCTYPE html> <!-- Laat aan je browser zien dat je HTML5 toepast. -->
<html> <!-- openen html -->
<head> <!-- openen head -->
<title>De titel van de webpagina.</title> <!-- openen en sluiten title -->
</head> <!-- sluiten head -->
<body> <!-- openen body -->
<p>Hier komt alles wat je wilt laten zien aan de bezoeker van de webpagina. </p> <!-- openen en sluiten paragraph -->
</body> <!-- sluiten body -->
</html> <!-- sluiten html -->
Het gedeelte wat onder <body> komt te staan is eigenlijk alles wat je te zien krijgt op een pagina.
Ik wil hier inhoudelijk niet verder op ingaan. Aan het eind vind je een aantal links waar je meer informatie kan vinden.
Handige markup coderingen
Om een paragraph (alinea) aan te duiden gebruik je de volgende code:
<b>Dikgedrukte</b>, <i>schuingedrukte</i> en <u><span style="text-decoration: underline;">onderstreepte</span></u> tekst gebruik je zo.
Soms wil je een tekst laten beginnen op de volgende regel zonder een witte regel ertussen wat vaak bij een paragraph (alinea) te zien is.
Like this is on a new line!
And here’s another new line.
Je gebruikt hiervoor:
</br>Stel, je ziet een mooie quote en wilt deze graag delen. Dan maak je gebruik van een blockquote.
<blockquote>The best design is the simplest one that works. <cite>Albert Einstein (1879 - 1955)</cite></blockquote>
Headings
Headings, ook wel kopjes genoemd, zijn kopjes die in je tekst voorkomen. Je hebt er in totaal 6, hoe lager het nummer, hoe belangrijker ze zijn.
H1 is het allerbelangrijkst en mag maar één keer gebruikt worden op je website. Het wordt dan ook vaak toegepast voor de titel van je website. H2 komt daarna en duid vaak de slogan aan. Heb je deze niet kan je H2 ook gebruiken voor de titels van je artikelen. H3 kan je bijvoorbeeld gebruiken in het artikel zelf en ga zo maar even door.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Styling
Uitlijning tekst
Soms wil je text accentueren of in plaats van links, rechts plaatsen. Dat kan allemaal!
The fox jumps over the lazy dog.
<p style="text-align:left;"">The fox jumps over the lazy dog. </p>The fox jumps over the lazy dog.
<p style="text-align:center;"">The fox jumps over the lazy dog. </p>The fox jumps over the lazy dog.
<p style="text-align:right;"">The fox jumps over the lazy dog. </p>Tekst Kleur
The fox jumps over the lazy dog.
<p style="color: red;">The fox jumps over the lazy dog. </p>The fox jumps over the lazy dog.
<p style="color: #998099;">The fox jumps over the lazy dog. </p>Styling Combinatie
The fox jumps over the lazy dog.
<p style="font-family: Times New Roman; font-size: 19px; font-style: italic; color: #998099">The fox jumps over the lazy dog. </p>Bovenstaande voorbeelden gebruiken allemaal inline-css. Dit is alleen handig wanneer je een klein stukje anders wilt weergeven. Voor websites of blogs is het raadzaam om een stylesheet toe te passen. Een stylesheet is een document waarin alle styling voor de gehele website staat.
Een stylesheet ziet er ongeveer zo uit:
body { <!-- openen styling voor body -->
background-color: #f9f9f9;
font-size: 12px;
font-family: "Times New Roman", serif;
} <!-- sluiten styling voor body -->
h1, h2, h3, h4, h5, h6 { <!-- openen styling voor headings -->
font-family: "Arial", sans-serif;
letter-spacing: 2px;
margin: 15px 0;
} <!-- sluiten styling voor headings -->
Net zoals bij markup is het ook noodzakelijk om bij CSS alles goed af te sluiten, echter gebruik je bij CSS hiervoor de volgende twee tekens { } zoals je in het voorbeeld kan zien.
Je begrijpt wel dat voor een website of blog er enorm veel CSS kan worden toegepast. En het leuke hiervan is, is dat er bijna dagelijks nieuwe mogelijkheden bij komen doordat browsers steeds meer kunnen ondersteunen. Je bent dus eigenlijk nooit uitgeleerd.
Handige Links
- W3Schools : De beste online site om alles omtrent coderen te leren (HTML, CSS, PHP, jQuery)
- Handleiding HTML : Nederlandstalige site met veel informatie.
- W3C Markup Service : Een online site om je markup te laten controleren op fouten.
- Meer over DOCTYPE. Je hoeft niet alles te begrijpen maar het is wel belangrijk dat je toevoegt welke markup je gebruikt zodat je browser alles beter inleest.
Mocht je vragen hebben over HTML en CSS, stel deze dan gerust!
