Legge til bilder på websider ved hjelp av HTML

click fraud protection

Se på noen nettside online i dag, og du vil legge merke til at de deler visse ting til felles. En av disse delte egenskapene er bilder. De riktige bildene gir så mye til presentasjonen av et nettsted. Noen av disse bildene, som en firmas logo, hjelper til med å merke nettstedet og koble den digitale enheten til ditt fysiske selskap.

Hvordan legge til et bilde på en webside ved hjelp av HTML

For å legge til et bilde, ikon eller grafikk på websiden din, må du bruke taggen i en sides HTML-kode. Du plasserer.

IMG
tag i. HTML nøyaktig hvor du vil at grafikken skal vises. Nettleseren som gjengir sidens kode, erstatter denne koden med riktig grafikk når siden er vist. Når du går tilbake til firmaets logo-eksempel, kan du legge til bildet på nettstedet ditt:

SRC-attributtet

Ser du på HTML-koden ovenfor, vil du se at elementet inneholder to attributter. Hver av dem kreves for bildet.

Det første attributtet er "src". Dette er bokstavelig talt bildefilen du vil skal vises på siden. I vårt eksempel bruker vi en fil som heter "logo.png". Dette er grafikken som nettleseren vil vise når den gjengis nettstedet.

instagram viewer

Du vil også legge merke til at før dette filnavnet, la vi til litt tilleggsinformasjon, "/ images /". Dette er filstien. Den første skråstrek forover forteller serveren å se på roten til katalogen. Deretter vil den se etter en mappe som heter "bilder" og til slutt filen som heter "logo.png". Å bruke en mappe som heter "bilder" for å lagre all grafikk på et nettsted er en ganske vanlig praksis, men filstien din vil bli endret til det som er relevant for nettstedet ditt.

Alt-attributtet

Det andre obligatoriske attributtet er "alt" -teksten. Dette er den "alternative teksten" som vises hvis bildet av en eller annen grunn ikke lastes inn. Denne teksten, som i vårt eksempel lyder "Firmalogo", vil vises hvis bildet ikke lastes inn. Hvorfor skulle det skje? En rekke årsaker:

  • Feil filbane
  • Feil filnavn eller feilstaving
  • Overføringsfeil
  • Filen ble slettet fra serveren

Dette er bare noen få muligheter for hvorfor det spesifiserte bildet vårt kan mangle. I disse tilfellene vil alt-teksten vår vises i stedet.

Hva brukes Alt Text til?

Alt-tekst brukes også av skjermleserprogramvare for å "lese" bildet til en synshemmet besøkende. 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 tydelig skal angis hva bildet er!

En vanlig misforståelse av alt-tekst er at den er ment for søkemotorformål. Dette er ikke sant. Mens Google og andre søkemotorer leser denne teksten for å finne ut hva bildet er (husk, de kan ikke "se" bildet ditt heller), bør du ikke skrive alt tekst for å appellere bare til søk motorer. Forfatter klar alt-tekst som er ment for mennesker. Hvis du også kan legge til noen nøkkelord i koden som appellerer til søkemotorer, er det greit, men sørg alltid for det alt-teksten tjener sitt primære formål ved å angi hva bildet er for alle som ikke kan se grafikken fil.

Andre bildeattributter

De.

IMG. 

tag har også to andre attributter som du kan se i bruk når du legger en grafikk på websiden din - bredden og høyden. Hvis du for eksempel bruker en WYSIWYG-editor som Dreamweaver, legger den automatisk til denne informasjonen for 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 tildeles, og den kan gå videre til neste element på siden mens bildet lastes ned. Problemet med å bruke denne informasjonen i HTML-en din er at du ikke alltid vil at bildet ditt skal vises i den nøyaktige størrelsen. For eksempel hvis du har en.

responsiv nettside

hvis størrelsen endres basert på en besøksskjerm og enhetsstørrelse, vil du også at bildene dine skal 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 mediespørsmål

. Av denne grunn, og for å opprettholde en skille mellom stil (CSS) og struktur (HTML), anbefales det at du IKKE legger til bredde- og høydeattributter i HTML-koden.

En merknad: Hvis du lar disse størrelsesinstruksjonene være av og ikke spesifiserer en størrelse i CSS, vil nettleseren uansett vise bildet i standardstørrelse.

Redigert av Jeremy Girard

instagram story viewer