Titta på någon webbsida online idag och du kommer att märka att de delar vissa saker gemensamt. Ett av dessa delade drag är bilder. Rätt bilder tillför så mycket till en webbplats presentation. Några av dessa bilder, som ett företags logotyp, hjälper till att märka webbplatsen och ansluta den digitala enheten till ditt fysiska företag.
Hur man lägger till en bild på en webbsida med HTML
För att lägga till en bild, ikon eller grafik på din webbsida måste du använda taggen i en sidas HTML-kod. Du placerar.
IMGtagg i din. HTML exakt var du vill att bilden ska visas. Webbläsaren som återger sidans kod kommer att ersätta denna tagg med rätt grafik när sidan har visats. Gå tillbaka till vårt företagslogotypsexempel, så här kan du lägga till bilden på din webbplats:
SRC-attributet
Om du tittar på HTML-koden ovan ser du att elementet innehåller två attribut. Var och en av dem krävs för bilden.
Det första attributet är "src". Detta är bokstavligen den bildfil som du vill ska visas på sidan. I vårt exempel använder vi en fil som heter "logo.png". Detta är bilden som webbläsaren skulle visa när den renderade webbplatsen.
Du kommer också att märka att före detta filnamn har vi lagt till lite ytterligare information, "/ images /". Det här är filvägen. Den första snedstrecket framåt berättar servern att titta in i katalogens rot. Den letar sedan efter en mapp som heter "bilder" och slutligen filen "logo.png". Att använda en mapp som heter "bilder" för att lagra all webbplatsens grafik är en ganska vanlig metod, men din filsökväg skulle ändras till vad som är relevant för din webbplats.
Alt-attributet
Det andra attributet som krävs är "alt" -texten. Detta är den "alternativa texten" som visas om bilden inte laddas av någon anledning. Denna text, som i vårt exempel läser "Företagslogotyp", skulle visas om bilden inte laddas. Varför skulle det hända? Olika skäl:
- Fel filsökväg
- Felaktigt filnamn eller felstavning
- Överföringsfel
- Filen raderades från servern
Det här är bara några möjligheter till varför vår angivna bild kan saknas. I dessa fall visas vår alt-text istället.
Vad används Alt Text för?
Alt-text används också av skärmläsarprogramvara för att "läsa" bilden för en synskadad besökare. Eftersom de inte kan se bilden som vi gör, låter den här texten dem veta vad själva bilden är. Det är därför som alt-text krävs och varför det tydligt ska stå vad bilden är!
Ett vanligt missförstånd av alt-texten är att den är avsedd för sökmotorändamål. Det är inte sant. Medan Google och andra sökmotorer läser denna text för att avgöra vad bilden är (kom ihåg, de kan inte "se" din bild heller), du borde inte skriva alt-text för att enbart söka motorer. Författare tydlig alt text som är avsedd för människor. Om du också kan lägga till några nyckelord i taggen som tilltalar sökmotorer, är det bra, men se alltid till alt-texten tjänar sitt primära syfte genom att ange vad bilden är för alla som inte kan se grafiken fil.
Andra bildattribut
De.
IMG.
taggen har också två andra attribut som du kan se när du lägger en grafik på din webbsida - bredden och höjden. Om du till exempel använder en WYSIWYG-redigerare som Dreamweaver lägger den till automatiskt denna information åt dig. Här är ett exempel:
De.
BREDD.
och.
HÖJD.
attribut berättar webbläsarens storlek på bilden. Webbläsaren vet sedan exakt hur mycket utrymme i layouten som ska tilldelas, och den kan gå vidare till nästa element på sidan medan bilden laddas ned. Problemet med att använda denna information i din HTML är att du inte alltid vill att din bild ska visas i exakt storlek. Till exempel om du har en.
lyhörd webbplats
vars storlek ändras baserat på en skärm och enhetens storlek, vill du också att dina bilder ska vara flexibla. Om du anger i din HTML vad den fasta storleken är kommer det att vara mycket svårt att åsidosätta med responsiv.
CSS-mediefrågor
. Av denna anledning, och för att upprätthålla en åtskillnad mellan stil (CSS) och struktur (HTML), rekommenderas att du INTE lägger till attribut för bredd och höjd i din HTML-kod.
En anmärkning: Om du låter dessa storleksanvisningar vara avstängda och inte anger en storlek i CSS, visar webbläsaren ändå bilden i standardstorlek.
Redigerad av Jeremy Girard