Tilføjelse af Billeder i HTML

Billeder er en væsentlig del af webdesign. De gør en webside attraktiv for en besøgende. Det kan nemt inkluderes i et HTML-dokument ved hjælp af <img>-tagget.

index.html

<img

src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/mountains.avif"

alt="Mountains in snow and clean sky"

width="500"

height="333"

src: påkrævet attribut. Dens værdi er stien til billedets placering. Stien kan være absolut og relativ;
alt: påkrævet attribut. Giver alternativ tekst, der kan vises, når billedet ikke kan gengives;
width og height: angiver billedstørrelse i pixel. Uden disse attributter vil et billede blive gengivet i sin oprindelige størrelse.

alt-attribut

Billedbeskrivelsen skal være informativ og meningsfuld. Det hjælper med at beskrive billedet for personer, der er synshandicappede eller ikke kan se det. På denne måde vil browseren læse alt-attributten, og en bruger kan forstå, hvorfor en hjemmeside har dette billede.

Lad os forestille os følgende eksempel. Du har en kilde om hestevæddeløb. Du vil vise, hvordan konkurrenterne gør sig klar til væddeløbet.

Dårlig værdi for alt attributten vil være:

index.html

<img

src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/man+horse.avif"

alt="A human on a horse"

God værdi for alt attributten vil være:

index.html

<img

src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/man+horse.avif"

alt="A jockey rides a horse through a training area surrounded by trees"

Den alternative tekst "En mand på en hest" er for generisk og mangler kontekst. Den giver en grundlæggende beskrivelse, men den formidler ikke nyttige detaljer om scenen eller formålet med billedet.

src-attribut

src-attributten kan bruge både absolutte og relative stier til at angive placeringen af billedfilen.

Absolut sti

Den specificerer den fulde URL til billedfilen på webserveren. For eksempel:

index.html

Det betyder, at billedfilen er placeret på https://example.com/images/image.jpg linket på internettet. Alle kan få adgang til billedet ved at bruge dette link.

Venligst inspicer det følgende rigtige eksempel i kode-sandkassen nedenfor:

Note

For at undersøge filmappe-strukturen, træk skyderen på kode-sandkassens grænseflades venstre side. I øverste venstre hjørne finder du en burgerknap repræsenteret ved tre striber. Ved at klikke på denne knap vil du navigere til filmappe-organiseringen.

Relativ sti

Den angiver placeringen af billedfilen i forhold til det aktuelle dokument. For eksempel:

index.html

Det betyder, at filen image.jpg er placeret i images-mappen.

Venligst inspicer det rigtige eksempel, der er givet i kode-sandboxen nedenfor. Du vil finde images-mappen, som indeholder sun.png-filen.

Bemærk

For at opsummere forskellen mellem relative og absolutte stier, repræsenterer en absolut sti det faktiske link, som enhver kan bruge til at få adgang til et billede. På den anden side er en relativ sti et link inden for konteksten af dit eget projekt. Det refererer til et lokalt billede og sti, som enhver inden for projektet kan få adgang til.