Nu we twee paragrafen hebben en een afbeelding in ons project (zie les 1 en les 2) is het misschien interessant om onze tekst wat persoonlijker te maken en wat opmaak aan te brengen. In dit artikel worden kort de benodigde tags besproken die je helpen met het opmaken van je teksten zodat ze er leuker uitzien voor je bezoekers.
Te gebruiken tags:
- <b> bold (vet)
- <i> italic (schuin)
- <font> lettertype
- <a href> om een link/url toe te voegen
- <u> onderlijnen
- <s> doorstrepen
We willen nu onze tweede paragraaf in het lettertype ‘Times New Roman’ plaatsen. Dat doen we door het attribuut face van onze font aan te passen.
<p>
<font face=”Times New Roman”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, justo non dictum viverra,
dolor tortor volutpat ipsum, vel lacinia elit risus in quam. Proin ut arcu id enim consequat suscipit
sed vel ligula. In mollis consequat tincidunt. Donec ac purus accumsan purus tristique viverra a venenatis
magna.
</font>
</p>
We hebben dit dus gedaan door de font tag binnen onze paragraaf op te starten en hem te beëindigen voor onze paragraaf sluit. Er zijn ook nog andere attributen mogelijk zoals color (kleur) en size (grootte). Bijvoorbeeld:
<font face=”Times New Roman” size=”5″ color=”red”>
We zullen nu een aantal woorden vet of schuingedrukt maken. Dit moet je in principe zelf wel begrijpen nu dus kan je dit gewoon even uitproberen! Het is wel belangrijk om je tags steeds in de correcte volgorde te openen en weer te sluiten. Bij meerdere tags doe je dus bijvoorbeeld <b><u>woord</u></b> en NIET <b><u>woord</b></u>. Onze voorbeeldcode zie je hieronder.
<p>
<font face=”Times New Roman” size=”5″ color=”red”>
<b>Lorem</b> <u>ipsum</u> <i>dolor sit amet</i>, consectetur adipiscing elit. Donec tristique, justo non dictum viverra,
dolor tortor volutpat ipsum, vel lacinia elit risus in quam. Proin ut arcu id enim consequat suscipit
sed vel ligula. In mollis consequat tincidunt. Donec ac purus accumsan purus tristique viverra a venenatis
magna.
<a href=”http://www.google.com”>Gooooogle</a>
</font>
</p>
Goed gedaan. Er bestaat ook nog de <marquee> tag maar die gebruiken we niet aangezien deze vervelend kan overkomen. We houden je echter niet tegen om hem uit te proberen! In bovenstaand voorbeeld maakten we ook reeds gebruik van de <a> tag. Het woord dat tussen deze tags staat zal vervolgens een link worden naar het adres dat werd opgegeven met het attribuut href. Dit is niet enkel mogelijk op woorden maar ook op bijvoorbeeld afbeeldingen. Zo kan je je eigen thumbnails maken.
<a href=”http://www.google.com”><img src=”images/google.jpg” width=”150px” height=”120px”/></a>
De uiteindelijke voorbeeldcode
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<title>
My first webpage
</title>
</head>
<body>
<h1>Title</h1>
<p>
<img src=”images/example.jpg” height=”128px” width=”128px” align=”left” alt=”my picture”/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, justo non dictum viverra,
dolor tortor volutpat ipsum, vel lacinia elit risus in quam. Proin ut arcu id enim consequat suscipit
sed vel ligula. In mollis consequat tincidunt. Donec ac purus accumsan purus tristique viverra a venenatis
magna.
</p>
<h1>Title</h1>
<p>
<font face=”Times New Roman” size=”5″ color=”red”>
<b>Lorem</b> <u>ipsum</u> <i>dolor sit amet</i>, consectetur adipiscing elit. Donec tristique, justo non dictum viverra,
dolor tortor volutpat ipsum, vel lacinia elit risus in quam. Proin ut arcu id enim consequat suscipit
sed vel ligula. In mollis consequat tincidunt. Donec ac purus accumsan purus tristique viverra a venenatis
magna.
<a href=”http://www.google.com”>Gooooogle</a>
</font>
</p>
</body>
</html>
Je webpagina is weer wat opgevrolijkt nu en het eindresultaat kan je op de afbeelding aan het begin van dit artikel bekijken.
Geef een reactie