De HTML IMG-tag styrer innsettingen av bilder og andre statiske grafiske objekter på en webside. Denne vanlige koden støtter flere obligatoriske og valgfrie attributter som gir rikdom til din evne til å designe et engasjerende, bildefokusert nettsted.
Et eksempel på en fullformet HTML IMG-tag ser slik ut:
Nødvendige IMG-tagattributter
src = "/ path / to / image.jpg"
Det eneste attributtet du trenger for å få et bilde til å vises på en webside er src Egenskap. Denne attributtet identifiserer navnet og plasseringen til bildefilen som skal vises.
alt = "Beskrivelse av bildet"
For å skrive gyldig XHTML og HTML4, alt attributt er også nødvendig. Dette attributtet brukes til å gi ikke-visuelle nettlesere tekst som beskriver bildet. Nettlesere viser den alternative teksten på forskjellige måter. Noen viser det som et popup-vindu når du setter musen over bildet, andre viser det i egenskaper når du høyreklikker på bildet, og noen viser det ikke i det hele tatt.
Bruke alt tekst for å gi ytterligere detaljer om bildet som ikke er relevante eller viktige for teksten på websiden. Men husk at i skjermlesere og andre tekstlesere vil teksten bli lest inline med resten av teksten på siden. For å unngå forvirring, bruk beskrivende alt-tekst som sier (for eksempel), "Om webdesign og HTML" i stedet for bare "logo".
De alt tekst er også viktig for SEO (Search Engine Optimization). Botene som søkemotorer, som Google, bruker for å utforske innholdet på nettsteder kan ikke "se" bilder. De stoler på alt tekst for å finne ut hva som er på siden.
I HTML5, den alt attributt er ikke alltid nødvendig, fordi du kan bruke en bildetekst for å legge til mer beskrivelse. Du kan også bruke dette attributtet til å indikere en ID som inneholder en full beskrivelse:
aria-wroteby = "Beskrivelse av bildet"
Alt-tekst er heller ikke nødvendig hvis bildet er rent dekorativt, for eksempel en grafikk øverst på en webside eller ikoner. Men hvis du ikke er sikker, må du ta med alt-tekst for tilfelle.
Størrelsesegenskaper
bredde = "500"og.
høyde = "500"Avhengig av design, bruker du. høyde og. bredde
Vanligvis vil du ønske at bildestørrelse blir angitt i CSS. Oftere enn ikke, det kommer til å være resultatet av dimensjonene til et bildes overordnede container. Denne tilnærmingen gir størst fleksibilitet når du tilpasser deg forskjellige skjermstørrelser. Imidlertid er det fortsatt tilfeller der du kanskje vil spesifisere bildedimensjoner som HTML-attributter.
Andre nyttige IMG-attributter
title = "Beskrivende navn på bildet"Attributtet er et globalt attributt som kan brukes på alle. HTML-element. Videre, den. tittel
De fleste nettlesere støtter tittel attributt, men de gjør det på forskjellige måter. Noen viser teksten som en popup, mens andre viser den på informasjonsskjermene når brukeren høyreklikker på bildet. Du kan bruke tittel attributt for å skrive tilleggsinformasjon om bildet, men ikke stole på at denne informasjonen blir skjult eller synlig. Du bør absolutt ikke bruke dette til å skjule nøkkelord for søkemotorer. Denne praksisen straffes nå av de fleste søkemotorer.
brukerkart = ""og.
ismap = ""Disse to attributtene angir klientsiden () og serversiden (ISMAP) bildekart
longdesc = "En mer detaljert beskrivelse av bildet ditt"De. longdesc
Utfasede og foreldede IMG-attributter
Flere attributter er nå foreldet i HTML5 eller utfaset i HTML4. For best HTML, bør du finne andre løsninger i stedet for å bruke disse attributtene.
border = "3"
align = "venstre"Denne attributtet lar deg plassere et bilde inne i teksten og få teksten til å flyte rundt den. Du kan justere et bilde til høyre eller venstre. Det er avskrevet til fordel for. flyte CSS-eiendom
hspcace = "10"og.
vspace = "10"De. hspace og. vspace attributter legger til hvitt mellomrom horisontalt ( hspace) og vertikalt ( vspace
lowsrc = "/ path / to / lowres.jpg"De. laveste attributt gir et alternativt bilde når bildekilden din er så stor at den lastes ned ekstremt sakte. For eksempel kan det hende du har et bilde på 500 KB som du vil vise på websiden din, men 500 KB tar lang tid å laste ned. Så du lager en mye mindre kopi av bildet, kanskje i svart-hvitt eller bare ekstremt optimalisert, og legger det i. laveste
De laveste attributt ble lagt til Netscape Navigator 2.0 i koden. Det var en del av DOM nivå 1, men ble deretter fjernet fra DOM nivå 2. Nettleserstøtte har vært sketchy for dette attributtet, selv om mange nettsteder hevder at det støttes av alle moderne nettlesere. Det er ikke utfaset i HTML4 eller foreldet i HTML5 fordi det aldri var en offisiell del av noen spesifikasjon.
Unngå å bruke dette attributtet, og optimaliser i stedet bildene dine slik at de lastes raskt. Hastigheten på sideinnlasting er en kritisk del av god webdesign, og store bilder reduserer sidene enormt, selv om du bruker laveste Egenskap.