Editie 162 - HTML-cursus
Deze rubriek is geschreven door Kloep!
In deze rubriek maken we gebruik van het programma Notepad++ en Firefox. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!
Welkom bij les nummer 6. Ook deze les zal uit twee delen bestaan, en in beide delen houden we ons bezig met afbeeldingen. Veel plezier met het lezen van deze rubriek!
Afbeelding openen
<img src="http://i38.tinypic.com/68u8tf.png">
Dit resulteert dus in:
Men gebruikt dus het element IMG (wat ook in de BB-code hiervoor wordt gebruikt) en het attribuut SRC. In dit attribuut gebruik je als waarde de link naar de afbeelding die je wilt weergeven.
Afmetingen opgeven
<img src="http://i38.tinypic.com/68u8tf.png" width="400" height="120">
De originele afbeelding is 500X150 pixels. Door deze code wordt dit dus verkleint naar 400X120 pixels. Mocht je maar 1 waarde aan willen passen, is dit ook mogelijk.
Deze code:
<img src="http://i38.tinypic.com/68u8tf.png" width="400">
zet hij automatisch om naar
<img src="http://i38.tinypic.com/68u8tf.png" width="400" height="120">
deze code.
Alternatieve tekst
<img src="http://i38.tinypic.com/68u8tf.png" alt="Hayden Panettiere">
Dit resulteert dus in de afbeelding als die wordt weergegeven, of in de tekst: Hayden Panettiere. Het ALT attribuut heeft ook een toegevoegde waarde indien de afbeelding wel wordt weergegeven. Als je dan namelijk op de afbeelding blijft staan met je muis, verschijnt er een geel balkje met de tekst van de waarde van ALT.
Afbeelding uitlijnen
<img src="http://i38.tinypic.com/68u8tf.png" align="left" />
Hierna kun je gewoon je eigen tekst plaatsen, bijvoorbeeld met het P element of het H element.
En dat was les nummer 6. Volgende keer komt les 7, waarin we doorgaan met afbeeldingen. Hopelijk tot de volgende keer!
2 reacties
Recommended Comments