Bilder er en essensiell del av webdesign. De gjør en nettside attraktiv for en besøkende. Det kan enkelt inkluderes i et HTML-dokument ved å bruke <img>-taggen.

• src: obligatorisk attributt. Verdien er banen til bildets plassering. Banen kan være absolutt og relativ;

• alt: obligatorisk attributt. Gir alternativ tekst som kan vises når bildet ikke kan gjengis;

• width og height: spesifiserer bildestørrelse i piksler. Uten disse attributtene vil et bilde bli gjengitt i sin opprinnelige størrelse.

alt-attributt

Bildets beskrivelse bør være informativ og meningsfull. Det hjelper med å beskrive bildet for personer som er synshemmede eller ikke kan se det. På denne måten vil nettleseren lese alt-attributtet, og en bruker kan forstå hvorfor et nettsted har dette bildet.

La oss forestille oss følgende eksempel. Du har en kilde om hesteveddeløp. Du vil vise hvordan konkurrentene gjør seg klare til løpet.

Dårlig verdi for alt-attributtet vil være:

God verdi for alt-attributtet vil være:

Alt-teksten "En mann på en hest" er for generell og mangler kontekst. Den gir en grunnleggende beskrivelse, men formidler ikke nyttige detaljer om scenen eller formålet med bildet.

src-attributt

src-attributtet kan bruke både absolutte og relative stier for å spesifisere plasseringen av bildefilen.

Absolutt sti

Den spesifiserer den fullstendige URL-en til bildefilen på webserveren. For eksempel:

Det betyr at bildefilen ligger på https://example.com/images/image.jpg-lenken på internett. Alle kan få tilgang til bildet ved å bruke denne lenken.

Vennligst inspiser det følgende virkelige eksempelet i kode-sandkassen nedenfor:

Merk

For å undersøke filmappe-strukturen, dra glidebryteren på kode-sandkasse-grensesnittets venstre side. I øverste venstre hjørne finner du en burgerknapp representert ved tre striper. Ved å klikke på denne knappen vil du navigere til filmappe-organiseringen.

Relativ sti

Den spesifiserer plasseringen av bildefilen i forhold til det gjeldende dokumentet. For eksempel:

Det betyr at image.jpg-filen ligger i images-katalogen.

Vennligst inspiser det virkelige eksempelet som er gitt i kode-sandkassen nedenfor. Du vil finne images-mappen, som inneholder sun.png-filen.

Merk

For å oppsummere forskjellen mellom relative og absolutte stier, representerer en absolutt sti den faktiske lenken som hvem som helst kan bruke for å få tilgang til et bilde. På den annen side er en relativ sti en lenke innenfor konteksten av ditt eget prosjekt. Den refererer til et lokalt bilde og sti som hvem som helst innenfor prosjektet kan få tilgang til.