Billeder

Billeder spiller en afgørende rolle i at forbedre det visuelle udtryk og formidle information på websider. I HTML indsættes billeder ved hjælp af <img>-tagget.

Indsættelse af billeder

<img>-tagget bruges til at indsætte billeder i et HTML-dokument. I modsætning til de fleste HTML-tags har <img>-tagget ikke en afsluttende tag og er selv-lukkende.
Eksempel:

<img src="image.jpg" alt="Description of the image">

I eksemplet ovenfor:

• <img>-tagget bruges til at indsætte et billede;
• src-attributten angiver kilden (URL) til billedfilen;
• alt-attributten giver alternativ tekst til billedet. Denne tekst vises, hvis billedet ikke kan indlæses eller tilgængelighedsformål.

Før vi udforsker et virkeligt eksempel, skal vi forstå de væsentlige attributter for img-tagget, og hvordan de påvirker dets indhold.

Billedattributter

1. src: Angiver kilden (URL) til billedfilen. Denne attribut er påkrævet for at <img>-tagget kan vise billedet;
2. alt: Giver alternativ tekst til billedet. Teksten angivet i alt-attributten vises, hvis billedet ikke kan indlæses eller tilgængelighedsformål. Det er vigtigt for brugere, der anvender skærmlæsere, eller i situationer hvor billedet ikke kan vises;
3. width: Angiver bredden på billedet i pixels eller som en procentdel af den overordnede container;
4. height: Angiver højden på billedet i pixels eller som en procentdel af den overordnede container;
5. title: Giver yderligere information om billedet. Vises ofte som et værktøjstip, når brugeren holder musen over billedet.
   Eksempel:

I eksemplet ovenfor:

• <img>-tagget indsætter et billede på en webside;
• src-attributten angiver kilde-URL'en til billedfilen;
• alt-attributten angiver alternativ tekst for billedet;
• width-attributten angiver billedets bredde;
• height-attributten angiver billedets højde;
• title-attributten giver yderligere information om billedet.

Videovejledning