Titta på någon webbsida online idag och du kommer att märka att de delar vissa saker gemensamt. Ett av de gemensamma egenskaperna är bilder. Rätt bilder lägger så mycket till en webbplatsens 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.
Om du vill lägga till en bild, en ikon eller en grafik till din webbsida måste du använda taggen i en sidas HTML-kod. Du placerar IMG tagga i din HTML precis där du vill att grafiken ska visas. Webbläsaren som gör sidans kod ersätter den här taggen med rätt grafik när sidan visas. Återgå till vårt företagslogotyps exempel, här är hur du kan lägga till den bilden på din webbplats:
Bildegenskaper
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". Det här är ganska bokstavligen den bildfil som du vill visas på sidan. I vårt exempel använder vi en fil som heter "logo.png". Detta är den grafik som webbläsaren skulle visa när den gjorde webbplatsen.
Du kommer också märka att före detta filnamn lägger vi till ytterligare information, "/ images /". Detta är filbanan. Den initiala snedstrecket beror på att servern ska se in i katalogen. Det kommer då att leta efter en mapp som heter "bilder" och slutligen filen "logo.png". Att använda en mapp som heter "bilder" för att lagra alla en webbplatss grafik är en ganska vanlig praxis, men din filväg skulle ändras till vad som är relevant för din webbplats.
Det andra nödvändiga attributet ä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 "Company Logo" skulle visas om bilden inte laddas. Varför skulle det hända? En mängd olika anledningar:
- Felaktig sökväg
- Felaktigt filnamn eller felstavning
- Överföringsfel
- Filen togs bort från servern
Det här är bara några möjligheter till varför vår specifika bild kanske saknas. I dessa fall skulle vår alttext visas istället.
Alt text används också av skärmsläsarens programvara för att "läsa" bilden till en besökare som är synskadad. Eftersom de inte kan se bilden som vi gör kan den här texten låta dem veta vad själva bilden är. Det är därför som alt text behövs och varför det borde tydligt ange vad bilden är!
Ett vanligt missförstånd om alt text är att det är avsett för sökmotoriska ändamål. Det är inte sant. Medan Google och andra sökmotorer läser denna text för att bestämma vad bilden är (kom ihåg, de kan inte "se" din bild heller), bör du inte skriva alt text för att bara vädja till sökmotorer. Författare klara alt text som är menat för människor. Om du också kan lägga till några nyckelord i taggen som appellerar till sökmotorer, är det bra, men se till att alttexten tjänar sitt primära syfte genom att ange vad bilden är för den som inte kan se grafikfilen.
Övriga attribut
De IMG taggen har också två andra attribut som du kan se i bruk när du lägger en grafik på din webbsida - bredden och höjden. Om du till exempel använder en WYSIWYG-editor som Dreamweaver, lägger den automatiskt till dig informationen. Här är ett exempel:
De BREDD och HÖJD attribut anger webbläsarens storlek på bilden. Webbläsaren vet då exakt hur mycket utrymme i layouten som ska fördelas, och det går vidare till nästa element på sidan medan bilden laddas ner. Problemet med att använda denna information i din HTML är att du kanske inte alltid vill att din bild ska visas med den exakta storleken. Om du till exempel har en mottaglig webbplats vars storlek ändras baserat på en besökars skärm och enhetsstorlek, vill du också att dina bilder ska vara flexibla. Om du anger i din HTML vad den fasta storleken är, kommer du att finna det väldigt svårt att åsidosätta CSS mediasvar. Av denna anledning, och för att upprätthålla en separation av stil (CSS) och struktur (HTML), rekommenderas att du INTE lägger till bredd- och höjdattribut i HTML-koden.
En anteckning: Om du lämnar dessa inställningar för dimensionering och inte anger en storlek i CSS, visar webbläsaren ändå bilden i sin ursprungliga, inbyggda storlek.
Redigerad av Jeremy Girard
