Mi-Soft.nl



avatar Leren werken met tags 29-09-2013
Hallo allemaal!
In deze tutorial gaan we de zogeheten "tags" wat beter bekijken.

Tags, wat doen ze nu?

We hebben al een aantal tags gebruikt, namelijk <head> en < body>.
Die tags doen echter niet veel zichtbaars, deze zijn meer bedoeld voor de browser.
We gaan vandaag dus even kijken naar tags die meteen iets zichtbaars doen op je scherm!

Tekst dik gedrukt maken.

Allereerst gaan we beginnen met het dikdrukken van tekst op je website.
In dit eerste voorbeeld gaan we dat met het woord "Welkom" doen.
Om "Welkom" dik te drukken moeten we het woord encapsuleren in een <b> tag.
Dat doen we op de volgende manier:
<b> Welkom </b>

Als we dit gedaan hebben kunnen we het resultaat meteen testen door op f5 te drukken (in geany).
Welkom dikgedrukt
Er is nog een tag om uw letters dik gedrukt te maken, ze werken voor het oog allebei hetzelfde:
<strong> Welkom </strong>

Als we nu vergeten de eind b (<b>) te typen, dan zal uw browser als volgt te werk gaan: Zoals u in dit (zeer slechte) voorbeeld hierboven kunt zien zal de browser alles dan dik drukken.
Dit omdat niemand hem heeft verteld "Stop maar met dikdrukken" (</b>).

Tekst schuin drukken.

Om tekst schuin te drukken (oftewel italic), doet u het precies hetzelfde als hierboven alleen dan met de: <i> tag.
Dat ziet er dan als volgt uit:
<i>Welkom</i>

Tekst onderstrepen.

Om tekst te voorzien van een streep eronder(oftewel underline), doet u het precies hetzelfde als hierboven alleen dan met de: <u> tag.
Dat ziet er dan als volgt uit:
	
<u>4+4=8</u>

Het geheel

Als het goed is heeft u nu de volgende code:
<html>
	<head>
		<title>Hallo en welkom op mijn website</title>
	</head>
	<body>
		<b>Welkom</b><br />
		<i>Welkom</i><br />
		<u>4+4 = 8.</u>
	</body>
</html>
En zou uw website er zo uit moeten zien:
Welkom dikgedrukt

Gerelateerde artikelen

Over de auteur:
Rick's headshot
Rick van Lieshout
Rick van Lieshout is de eigenaar en administrator van Mi-Soft.nl
Ook is hij een manusje van alles en kan daarom in veel categorieen een steentje bijdragen.
U kunt meer over Rick te weten komen op zijn portfolio.
Rick@Mi-Soft.nl | Portfolio | Facebook | Twitter | Google+ | Youtube | Flickr | LinkedIn