Lägga till Bilder i HTML
Bilder gör webbsidor mer engagerande. Du kan infoga en bild med hjälp av taggen <img>.
index.html
Viktiga attribut:
src: obligatorisk. Sökväg till bildfilen (absolut eller relativ);alt: obligatorisk. Text som visas om bilden inte kan laddas, används även av skärmläsare;width/height: storlek i pixlar. Utan dessa visas bilden i sin ursprungliga storlek.
alt-attribut
alt-texten bör tydligt beskriva bilden och ge användbar kontext.
Föreställ dig följande exempel. Du har en källa om hästkapplöpning. Du vill visa hur deltagarna förbereder sig inför loppet.
Dålig alt-text:
index.html
Bättre alt-text:
index.html
Den förbättrade versionen ger verklig kontext och hjälper synskadade användare att förstå vad bilden visar.
src-attribut
Attributet src kan använda både absoluta och relativa sökvägar för att ange platsen för bildfilen.
Absolut sökväg
En fullständig URL som pekar på en bild online.
index.html
Vem som helst kan komma åt bilden via denna fullständiga länk.
Vänligen granska det följande verkliga exemplet i kodsandlådan nedan.
För att undersöka mappstrukturen, dra reglaget på code sandbox-gränssnittets vänstra sida. I det övre vänstra hörnet hittar du en hamburgermenyn som representeras av tre streck. Genom att klicka på denna knapp navigerar du till fil- och mapporganisationen.
Relativ sökväg
Pekar på en bild inuti din projektmapp.
index.html
Detta innebär att image.jpg är lagrad i mappen images nära din HTML-fil.
Undersök gärna det verkliga exemplet i kodsandlådan nedan. Du hittar mappen images, som innehåller filen sun.png.
Absoluta sökvägar: fullständiga URL:er som fungerar var som helst på internet.
Relativa sökvägar: lokala projektsökvägar som används inom din egen mappstruktur.
1. Vilken tagg kan användas för att placera en bild på en webbplats?
2. Vilket attribut måste anges för en <img/>-tagg?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Fantastiskt!
Completion betyg förbättrat till 2.38Lägga till Bilder i HTML
Svep för att visa menyn
Bilder gör webbsidor mer engagerande. Du kan infoga en bild med hjälp av taggen <img>.
index.html
Viktiga attribut:
src: obligatorisk. Sökväg till bildfilen (absolut eller relativ);alt: obligatorisk. Text som visas om bilden inte kan laddas, används även av skärmläsare;width/height: storlek i pixlar. Utan dessa visas bilden i sin ursprungliga storlek.
alt-attribut
alt-texten bör tydligt beskriva bilden och ge användbar kontext.
Föreställ dig följande exempel. Du har en källa om hästkapplöpning. Du vill visa hur deltagarna förbereder sig inför loppet.
Dålig alt-text:
index.html
Bättre alt-text:
index.html
Den förbättrade versionen ger verklig kontext och hjälper synskadade användare att förstå vad bilden visar.
src-attribut
Attributet src kan använda både absoluta och relativa sökvägar för att ange platsen för bildfilen.
Absolut sökväg
En fullständig URL som pekar på en bild online.
index.html
Vem som helst kan komma åt bilden via denna fullständiga länk.
Vänligen granska det följande verkliga exemplet i kodsandlådan nedan.
För att undersöka mappstrukturen, dra reglaget på code sandbox-gränssnittets vänstra sida. I det övre vänstra hörnet hittar du en hamburgermenyn som representeras av tre streck. Genom att klicka på denna knapp navigerar du till fil- och mapporganisationen.
Relativ sökväg
Pekar på en bild inuti din projektmapp.
index.html
Detta innebär att image.jpg är lagrad i mappen images nära din HTML-fil.
Undersök gärna det verkliga exemplet i kodsandlådan nedan. Du hittar mappen images, som innehåller filen sun.png.
Absoluta sökvägar: fullständiga URL:er som fungerar var som helst på internet.
Relativa sökvägar: lokala projektsökvägar som används inom din egen mappstruktur.
1. Vilken tagg kan användas för att placera en bild på en webbplats?
2. Vilket attribut måste anges för en <img/>-tagg?
Tack för dina kommentarer!
