geplaatst onder Geen onderdeel van een categorie

Introductie van HTML en Styling

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>