Se på en nettside online i dag, og du vil legge merke til at de deler visse ting til felles. En av de delte egenskapene er bilder. De riktige bildene legger så mye til et nettsteds presentasjon. Noen av disse bildene, som et selskaps logo, hjelper med å merke nettstedet og koble den digitale enheten til ditt fysiske selskap.
For å legge til et bilde, ikon eller grafikk til websiden din, må du bruke taggen i en HTML-kode for en side. Du plasserer IMG tag i HTML-koden din nøyaktig hvor du vil at grafikken skal vises. Nettleseren som gjør sidenes kode vil erstatte denne taggen med riktig grafikk når siden er vist. Hvis du går tilbake til eksempelet på bedriftslogoen, kan du her legge til bildet på nettstedet ditt:
Bildegenskaper
Når du ser på HTML-koden ovenfor, ser du at elementet inneholder to attributter. Hver av dem kreves for bildet.
Det første attributtet er "src". Dette er ganske bokstavelig talt bildefilen du vil bli vist på siden. I vårt eksempel bruker vi en fil som heter "logo.png". Dette er grafikken som nettleseren ville vise når den gjengitt nettstedet.
Du vil også legge merke til at før dette filnavnet la vi til ytterligere informasjon, "/ images /". Dette er filbanen. Den innledende forsiden slash forteller serveren å se på roten til katalogen. Det vil da se etter en mappe kalt "bilder" og til slutt filen kalt "logo.png". Bruke en mappe kalt "bilder" for å lagre alt et nettsteds grafikk er en ganske vanlig praksis, men filbanen din vil bli endret til det som er relevant for nettstedet ditt.
Den andre nødvendige attributtet er "alt" -teksten. Dette er "alternativ tekst" som vises hvis bildet ikke lastes av en eller annen grunn. Denne teksten, som i vårt eksempel heter "Firmaprofil", vil bli vist hvis bildet ikke lastes. Hvorfor skulle det skje? En rekke grunner:
- Feil filbane
- Feil filnavn eller feilstaving
- Overføringsfeil
- Filen ble slettet fra serveren
Dette er bare noen få muligheter for hvorfor vårt spesifiserte bilde kan mangle. I disse tilfellene vil vår alttekst vise i stedet.
Alt tekst brukes også av skjermleserprogramvaren til å "lese" bildet til en besøkende som er synshemmede. Siden de ikke kan se bildet som vi gjør, lar denne teksten dem vite hva selve bildet er. Dette er grunnen til at alt tekst er påkrevd og hvorfor det klart skal angi hva bildet er!
En vanlig misforståelse av alt-tekst er at den er ment for søkemotoren. Dette er ikke sant. Mens Google og andre søkemotorer leser denne teksten for å avgjøre hva bildet er (husk at de ikke kan "se" bildet ditt heller), bør du ikke skrive alt tekst for å klage utelukkende på søkemotorer. Forfatter klar alt tekst som er ment for mennesker. Hvis du også kan legge til noen søkeord i taggen som appellerer til søkemotorer, er det greit, men sørg alltid for at alt-teksten tjener sitt primære formål ved å angi hva bildet er for alle som ikke kan se grafikkfilen.
Andre attributter
De IMG tag har også to andre attributter som du kanskje ser i bruk når du legger en grafikk på nettsiden din - bredden og høyden. Hvis du for eksempel bruker et WYSIWYG-editor som Dreamweaver, legger det automatisk denne informasjonen til deg. Her er et eksempel:
De BREDDE og HØYDE attributter forteller nettleseren størrelsen på bildet. Nettleseren vet da nøyaktig hvor mye plass i oppsettet som skal tilordnes, og det kan gå videre til neste element på siden mens bildet lastes ned. Problemet med å bruke denne informasjonen i HTML-en din er at du kanskje ikke alltid vil at bildet skal vises med den nøyaktige størrelsen. For eksempel, hvis du har en responsiv nettside hvis størrelse endres basert på en besøkers skjerm og enhetsstørrelse, vil du også ha bildene dine til å være fleksible. Hvis du oppgir i HTML-en din hva den faste størrelsen er, vil du finne det veldig vanskelig å overstyre med responsive CSS-mediesøk. Av denne grunn, og for å opprettholde en separasjon av stil (CSS) og struktur (HTML), anbefales det at du IKKE legger til bredde- og høydeattributter i HTML-koden din.
Ett notat: Hvis du lar disse størrelsesinstruksjonene gå av og ikke spesifiserer en størrelse i CSS, vil nettleseren i alle fall vise bildet ved standardverdien.
Redigert av Jeremy Girard
