Bilder

Bilder spelar en avgörande roll för att förbättra det visuella intrycket och förmedla information på webbsidor. I HTML infogas bilder med hjälp av taggen <img>.

Infoga bilder

Taggen <img> används för att infoga bilder i ett HTML-dokument. Till skillnad från de flesta HTML-taggar har taggen <img> ingen avslutande tagg och är självstängande.
Exempel:

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

I exemplet ovan:

• Taggen <img> används för att infoga en bild;
• Attributet src anger källan (URL) till bildfilen;
• Attributet alt tillhandahåller alternativ text för bilden. Denna text visas om bilden inte kan laddas eller för tillgänglighetsändamål.

Innan vi utforskar ett verkligt exempel, låt oss förstå de grundläggande attributen för img-taggen och hur de påverkar dess innehåll.

Bildattribut

1. src: Anger källan (URL) till bildfilen. Detta attribut är obligatoriskt för att <img>-taggen ska visa bilden;
2. alt: Tillhandahåller alternativ text för bilden. Texten som anges i alt-attributet visas om bilden inte kan laddas eller för tillgänglighetsändamål. Det är viktigt för användare som använder skärmläsare eller i situationer där bilden inte kan visas;
3. width: Anger bildens bredd i pixlar eller som en procentandel av den överordnade behållaren;
4. height: Anger bildens höjd i pixlar eller som en procentandel av den överordnade behållaren;
5. title: Ger ytterligare information om bilden. Visas ofta som en verktygstips när användaren håller muspekaren över bilden.
   Exempel:

I exemplet ovan:

• Taggen <img> infogar en bild på en webbsida;
• Attributet src anger bildfilens käll-URL;
• Attributet alt anger alternativ text för bilden;
• Attributet width anger bildens bredd;
• Attributet height anger bildens höjd;
• Attributet title ger ytterligare information om bilden.

Videohandledning