Det HTML IMG-tag styrer indsættelsen af billeder og andre statiske grafiske objekter på en webside. Dette fælles tag understøtter flere obligatoriske og valgfrie attributter, der tilføjer rigdom til din evne til at designe et engagerende, billedfokuseret websted.
Et eksempel på et fuldt dannet HTML IMG-tag ser sådan ud:
Påkrævede IMG-tagattributter
src = "/ sti / til / image.jpg"
Den eneste attribut, du har brug for for at få et billede til at blive vist på en webside, er src attribut. Denne attribut identificerer navnet og placeringen af den billedfil, der skal vises.
alt = "Beskrivelse af billedet"
For at skrive gyldig XHTML og HTML4 skal alt attribut er også påkrævet. Denne attribut bruges til at give ikke-visuelle browsere tekst, der beskriver billedet. Browsere viser den alternative tekst på forskellige måder. Nogle viser det som pop op, når du lægger musen over billedet, andre viser det i egenskaber, når du højreklikker på billedet, og andre viser det slet ikke.
Brug alt tekst
at give yderligere detaljer om billedet, der ikke er relevante eller vigtige for teksten på websiden. Men husk, at i skærmlæsere og andre browsere, der kun er tekst, læses teksten indbygget med resten af teksten på siden. For at undgå forvirring skal du bruge beskrivende alt-tekst, der siger (for eksempel), "Om webdesign og HTML" i stedet for bare "logo".Det alt tekst er også afgørende for SEO (søgemaskineoptimering). De bots, som søgemaskiner, som Google, bruger til at udforske indholdet på websteder kan ikke "se" billeder. De stoler på alt tekst for at bestemme, hvad der er på siden.
I HTML5, det alt attribut er ikke altid påkrævet, fordi du kan bruge en billedtekst for at tilføje mere beskrivelse til det. Du kan også bruge denne attribut til at angive et ID, der indeholder en fuld beskrivelse:
aria-beskrevetby = "Beskrivelse af billedet"
Alt-tekst er heller ikke påkrævet, hvis billedet er rent dekorativt, såsom en grafik øverst på en webside eller ikoner. Men hvis du ikke er sikker, skal du medtage alt-tekst i tilfælde af.
Størrelsesegenskaber
bredde = "500"og.
højde = "500"Afhængigt af dit design skal du bruge. højde og. bredde
Generelt vil du ønske, at billedstørrelse indstilles i din CSS. Oftere end ikke, vil det være resultatet af dimensionerne på et billeds overordnede container. Denne tilgang giver den mest fleksibilitet, når man tilpasser sig forskellige skærmstørrelser. Der er dog stadig tilfælde, hvor du måske vil specificere billeddimensioner som HTML-attributter.
Andre nyttige IMG-attributter
title = "Beskrivende billednavn"Attributten er en global attribut, der kan anvendes på enhver. HTML-element. Desuden er. titel
De fleste browsere understøtter titel attribut, men de gør det på forskellige måder. Nogle viser teksten som pop op, mens andre viser den på informationsskærme, når brugeren højreklikker på billedet. Du kan bruge titel attribut til at skrive yderligere oplysninger om billedet, men regner ikke med, at disse oplysninger er skjult eller synlig. Du bør bestemt ikke bruge dette til at skjule søgeord til søgemaskiner. Denne praksis straffes nu af de fleste søgemaskiner.
usemap = ""og.
ismap = ""Disse to attributter indstilles på klientsiden () og serversiden (ISMAP) billedkort
longdesc = "En mere detaljeret beskrivelse af dit billede"Det. longdesc
Forældede og forældede IMG-attributter
Flere attributter er nu forældede i HTML5 eller udfaset i HTML4. For den bedste HTML skal du finde andre løsninger i stedet for at bruge disse attributter.
border = "3"
align = "venstre"Denne attribut giver dig mulighed for at placere et billede inde i teksten og få teksten til at flyde rundt om det. Du kan justere et billede til højre eller venstre. Det er udfaset til fordel for. flyde CSS-ejendom
hspcace = "10"og.
vspace = "10"Det. hspace og. vspace attributter tilføjer hvidt mellemrum vandret ( hspace) og lodret ( vspace
lowsrc = "/ sti / til / lowres.jpg"Det. laveste attribut giver et alternativt billede, når din billedkilde er så stor, at den downloades ekstremt langsomt. For eksempel har du muligvis et billede, der er 500 KB, som du vil have vist på din webside, men 500 KB tager lang tid at downloade. Så du opretter en meget mindre kopi af billedet, måske i sort / hvid eller bare ekstremt optimeret, og læg det i. laveste
Det laveste attribut blev føjet til Netscape Navigator 2.0 til koden. Det var en del af DOM niveau 1, men blev derefter fjernet fra DOM niveau 2. Browsersupport har været skitseret for denne attribut, selvom mange sider hævder, at den understøttes af alle moderne browsere. Det er ikke udfaset i HTML4 eller forældet i HTML5, fordi det aldrig var en officiel del af nogen specifikation.
Undgå at bruge denne attribut, og optimer i stedet dine billeder, så de indlæses hurtigt. Hastigheden ved sideindlæsning er en kritisk del af godt webdesign, og store billeder nedsætter siderne enormt, selvom du bruger laveste attribut.