9. Plaatje toevoegen met de img-tag

Een plaatje op je pagina met de img-tag

Klik hier voor gesproken tekst

Een website wordt wel héél saai als er geen plaatjes op voorkomen. Je kunt twee types plaatjes opnemen: GIF of JPEG (JPG).

Het opnemen van een plaatje gaat met de img -tag. (er is geen eindtag). Daarbij zul je natuurlijk de naam van het plaatje moeten opgeven. Let op: het plaatje moet in dezelfde map staan als waar je je html-code hebt opgeslagen anders zul je het op je webpagina niet kunnen zien.

Stel je voor dat een plaatje hebt van een schaap dat schaap.gif heet. Je hebt het plaatje netjes in dezelfde map opgeslagen als je html-pagina. Je kunt het plaatje nu op je pagina laten zien door de volgende html-code.

Bij de img-tag kun je ook weer attributen gebruiken. Je wilt kunnen kiezen of je plaatje links of rechts komt te staan en ook hoe de tekst rondom de afbeelding loopt.

- Plaatje links: align = left
- Plaatje rechts: align = right

Je kunt het plaatje ook een tekst meegeven die wordt getoond als de browser niet met afbeeldingen kan omgaan. Ook zie je deze tekst kort als je met de muis over de afbeelding gaat.

Het attribuut om dit te doen is het alt-attribuut (alternative)

Je kunt aan het plaatje ook de breedte en hoogte meegeven (in pixels)

Dit doe je met de attributen width en height (bijv. width = 300 height = 348)

Kijk naar het voorbeeld.

Opdracht 9

Maak een voorbeeldpagina met een links- en een rechtslijnend plaatje. Neem een plaatje van je keuze. Controleer of de alternatieve tekst verschijnt. Let op: soms is er verschil tussen de verschillende browsers.

Gesproken tekst: afbeeldingen: