Uw betrouwbare ICT partner sinds 1997

Eenvoudige HTML

Als u een site heeft laten maken door ons en daar een Content Management Systeem bij gekregen heeft, is het handig wat simpele HTML te kennen.

Hieronder volgt een lijstje onderwerpen die we behandelen:
     1. Wat is een tag?
     2. Welke tags kan ik allemaal toepassen?
     3. Ik wil één of twee regels overslaan..
     4. Hoe maak ik een 'link' in mijn tekst?
     5. Hoe maak ik lijsten?


1. Wat is een 'Tag'?
Om het woord 'pinksteren' bijvoorbeeld 'vet' of 'cursief' te maken, moet het in een 'tag' geplaatst worden. Een 'tag' is eigenlijk een commando dat u toekent aan dat woord of woorden die u anders dan de rest van de tekst wil maken. Het ziet er als volgt uit: <></>.
<> = begin verandering van tekst. Dit zet u voor het woord(en) die u aan wilt passen.
</> = stop verandering tekst. Dit zet u na het woord(en) dat u aan wilt passen.
Het eigenlijke commando bestaat altijd uit een of meer letters. 'b' bijvoorbeeld betekent 'vet gedrukt'. Het commando plaatst u tussen de haakjes, hieronder volgt een voorbeeld.

Om 'pinksteren' 'vet', oftewel 'bold' te maken zal het er ongeveer zo uit komen te zien in de tekst:

'Aankomend weekend is het <b>pinksteren</b>'

Dat ziet er dan als volgt uit op de site:

'Aankomend weekend is het pinksteren'

<b> = begin met vet gedrukt maken
</b> = stop met vet gedrukt maken.

Ga naar boven

2. Tags die u kunt gebruiken voor de opmaak van uw tekst:
<i>pinksteren</i> = cursief
<b>pinksteren</b> = vet
<u>pinksteren</u> = onderstreept
<font color="red">pinksteren</font> = tekst is rood
<font size="1">pinksteren</font> = tekst is kleiner
<font size="+1">pinksteren</font>   = tekst is groter
<font size="+2">pinksteren</font>   = tekst is veel groter!

Het is ook mogelijk combinaties te maken van tags. De combinatie onderstreept en vetgedrukt zal er qua tags zo uitzien:
<b><u>pinksteren</u></b>

Ga naar boven

3. Ik wil één of twee regels overslaan..
Als u wil dat de tekst afgebroken wordt en op de volgende regel verder gaat, zet u op die plek <br> neer. Deze tag (in tegenstelling tot andere tags) hoeft geen sluit tag </> te hebben, alleen <br> is genoeg.
En als u deze tag twee keer neerzet <br> <br> zal er een regel wit ontstaan.

4. Hoe maak ik een 'link' in mijn tekst?
Om een tekst te laten 'linken', oftewel zorgen dat er op geklikt kan worden, moet u de tag <a href="/"></a> gebruiken. Tussen de "" zet u het www adres inclusief http://
Het zal er als volgt uitzien:
<a href="http://www.kovoks.nl" target="_blank">www.kovoks.nl</a>

Zoals u ziet staat er in de 'a href' tag nog target="_blank". Dit betekent dat de link zich in een nieuw venster opent. Als u niet target=_blank" erbij zet zal de link zich in hetzelfde venster als uw site openen waardoor de bezoeker van uw site afgaat. Vandaar dat wij adviseren om het er wel bij te zetten.

Ga naar boven

5. Hoe maak ik lijsten?
Om een lijst te maken oftewel een opsomming die inspringt moet u de tag <ul></ul> gebruiken. Met <ul> opent u de lijst en met </ul> sluit u de lijst. Per opsommings item moet u nog de tag <li></li> neerzetten. Hieronder volgt een voorbeeld:

Opsomming van feestdagen:
<ul>
<li>Pinksteren</li>
<li>Kerstmis</li>
<li>Hemelvaart</li>
</ul>

Resultaat:

Opsomming van feestdagen:
  • Pinksteren
  • Kerstmis
  • Hemelvaart
Om ervoor de zorgen dat er geen ruimte zit tussen de opsomming en de zin erboven zet u in de 'ul' tag: style="margin-top:0px;" neer. Zo ziet dat eruit: <ul style="margin-top:0px;"> en de opsomming ziet er dan zo uit:

Opsomming van feestdagen:
  • Pinksteren
  • Kerstmis
  • Hemelvaart
style="margin-bottom:0px;" zal ervoor zorgen dat er aan de onderkant van de opsomming geen witruimte meer staat.

Ga naar boven

Daarom KovoKs

  • Ontzorging in uw automatisering
  • Merkonafhankelijke pragmatische oplossingen
  • Informeel en klantgericht in de omgang
  • Focus op langdurige relaties
  • Gedegen IT-strategie adviezen
  • Afspraak is afspraak, wederzijds
  • Direct contact; geen oeverloze klantenservice

Vragen? Stel gerust!

Vragen

 

Chat met ons

Live chat
KovoKs logo