Nog meer opmaakelementen

Opsommingen

Het is ook mogelijk om een opsomming te maken. Je kunt kiezen uit een genummerde en een ongenummerde opsomming.

Genummerde opsomming

Een genummerde opsomming maak je met de tag

1:

<ol>

Per ding van je opsomming heb je ook nog een tag nodig:

1:

<li>

Een genummerde opsomming heeft dus de opbouw:

1:
2:
3:
4:

<ol>
<li>Tekst</li>
<li>Tekst</li>
</ol>

We gaan nog steeds maar gewoon verder in het al bestaande bestand. We maken nu dus een opsomming met nummers waarde de eerste waarde "Eerste" is, de tweede "Tweede" en de derde "Derde". Deze opsomming komt buiten de paragraaf. In dit geval halen we die dus helemaal weg. De code die we dan krijgen is:

1:
2:
3:
4:
5:

<ol>
<li>Eerste</li>
<li>Tweede</li>
<li>Derde</li>
</ol>

Met dit als resultaat.

Ongenummerde opsomming

Deze opsomming lijkt heel erg veel op die met nummers. Het enige verschil is dat in dit geval we niet

1:

<ol>

gebruiken, maar

1:

<ul>

Dit is wat je dan krijgt.

Plaatjes

Je hebt ook de mogelijkheid om een plaatje in te voegen. Hiervoor gebruiken we de tag

1:

<img>

Dan zijn er nog een paar attributen die we moeten gebruiken.

1:

scr=""

gebruiken we om te bepalen waar het plaatje is opgeslagen.

1:

alt=""

is om een beschrijving voor het plaatje op te geven. We zullen weer verder gaan met ons bestand. We houden nog steeds de h1-tag. Dan gaan we nu een plaatje invoegen in een paragraaf. Het plaatje dat er moet komen, bevindt zich http://www.anjoonline.nl/smile/smile.gif en de beschrijving is smile. Nu weten we dus dat we

1:

<img scr="http://www.anjoonline.nl/smile/smile.gif" alt="smile"

hebben. Let nu wel op, dat hetgeen je hier nu achter zet niet gewoon

1:

>

is. De tag moet namelijk ook nog worden afgesloten, dus

1:

/>

En dan mag je nu weer kijken of jouw resultaat overeenkomt met dat van mij. Er zijn nog meer attributen bij de img-tag. Je kunt namelijk ook nog de hoogte en breedte opgeven. Als je alleen de hoogte of alleen de breedte opgeeft, zal de andere zich automatisch aanpassen aan de andere, zodat de verhoudingen hetzelfde blijven. Als je hoogte én breedte opgeeft, heb je dus grote kans dat je plaatje niet meer de juiste verhoudingen heeft. Laten we dit maar eens uitproberen bij het plaatje dat we al hebben. Kopieer de regel die je net hebt getypt om het plaatje te krijgen drie keer. Je hebt nu dus vier keer dezelfde code onder elkaar. De bovenste code laten we voor wat het is. De tweede gaan we een hoogte opgeven. Hiervoor gebruiken we het attribuut

1:

height

We geven een hoogte op van 30 pixels. Dit doen we door

1:

height="30px"

toe te voegen. De derde geven we een breedte op van 20 pixels met

1:

width="20px"

En de vierde een hoogte van 30 en een breedte van 20 pixels door

1:

height="30px" width="20px"

De totale code is nu dus:

1:
2:
3:
4:

<img src="http://www.anjoonline.nl/smile/smile.gif" alt="smile" />
<img src="http://www.anjoonline.nl/smile/smile.gif" alt="smile" height="30px" />
<img src="http://www.anjoonline.nl/smile/smile.gif" alt="smile" width="20px" />
<img src="http://www.anjoonline.nl/smile/smile.gif" alt="smile" height="30px" width="20px" />

en geeft dit als resultaat.
Je ziet hier ook goed dat de laatste uit verhouding is geraakt. En ook zie je dat als je geen hoogte of breedte opgeeft, dat het plaatje weer wordt gegeven in zijn oorspronkelijke grootte.