Vad är HTML-bildtaggar?
Följande artikel ger en översikt över HTML-bildtaggar. Jag känner till dess klisjé, men låt mig börja med att säga att en bild är värd tusen ord. När det gäller webbsidor är det särskilt sant. En bild kan sälja besökaren med din idé, imponera på någon att köpa din produkt och det kan hjälpa en webbsida att se så mycket bättre ut. I den här guiden tittar vi på hur vi kan lägga till IMG på webbsidorna och anpassa dem ordentligt tillsammans med att lägga till länkar till dem.
Lägga till bilder på webbsidor
Du kan lägga till IMG till en HTML-sida med hjälp av tagg i HTML-dokumentet, här är syntaxen:
Här berättar IMG webbläsaren att taggen handlar om att lägga till en IMG i dokumentet och "src =" anger var bilden ska laddas ner från.
Exempel på en sida med en bild
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Här är kodens utgång:
Ett intressant faktum med dessa HTML-sidor är att när du använder IMG-taggen sätts inte bilden in på nämnda webbsida, utan skapar istället ett utrymme där bilden läggs när den har laddats ner.
Webbläsarsupport och kompatibilitet med attribut
Som du kan förvänta dig stöder alla moderna webbläsare bilder och användning av IMG-taggar. Ibland kommer mobila webbläsare att ändra storlek på bilden så att den passar den på skärmen om bilden inte är inställd som lyhörd.
När det gäller attributens kompatibilitet med HTML 4.01 och nyare HTML5 fungerar de flesta taggar, med undantag för justering, kantlinje, hspace och vspace som helt enkelt inte stöds i det senare.
Bilder som länk:
Det kommer att finnas tillfällen då du vill att en bild ska fungera som en länk till en annan sida. Du kan göra det genom att lägga till IMG-taggen i taggen.
Ställa in en bild som bakgrund på en webbsida
Du kan tilldela en bild som en bakgrundsbild på en webbsida med hjälp av CSS-egenskapen bakgrundsbild i sidans kroppselement.
Bakgrundsbild
Ställa in en bild som flyter i webbläsaren
Vi kan använda CSS-egenskapen "float" för att ställa in en bild som flyter inuti var som helst i webbläsarfönstret. Låt oss ta en titt på ett exempel som hjälper dig att förstå.
Här flyter bilden av bilen till höger om texten.
Här flyter bilden av bilen till vänster om texten.
Attribut för bildtagg
Följande är attributen för en bildtagg.
1) Rikta
Möjliga värden: Topp, botten, mitten, vänster eller höger.
Alight-attributet används för att specificera justeringen av en bild på webbsidan.
2) Alt
Värdetyp: Text
Alt används för att specificera den alternativa texten på en bild på en webbsida. I fall där visning av en IMG inte är möjlig visar webbläsaren den här texten för användaren. Sökmotorer som Google och Bing använder denna alt-text för att visa resultat i bildsökningen.
3) Gräns
Värdetyp: pixlar
Det används för att skapa en gräns med användardefinierad tjocklek runt bilden. Det fungerar inte i HTML5.
4) Tvär Ursprung
Värdetyp: Anonym användningsuppgifter
Det här attributet används när vi vill specificera hur foton med ursprung ska hanteras. Detta används mest i fall där dukelement i JavaScript-webbappar används.
5) Höjd
Värdetyp: Procentsatser eller pixlar
Uppenbarligen används den här för att ange höjden på bilden på HTML-webbsidan.
6) hspace
Värdetyp: pixlar
Hspace-attributet, som inte stöds i HTML5, används för att ange i pixlar hur mycket vitt utrymme som ska läggas till till vänster och höger om den infogade bilden.
7) ismap
Värdetyp: URL för en sida
ismap vi använde för att definiera den nämnda bilden som en bildsida på serversidan. När användaren klickar (eller knackar) inuti bilden skickar webbläsarna koordinaterna för klick (eller tryck på) till webbservern som en URL.
8) Longdesc
Värdetyp: URL
Longdesc används för att ge en detaljerad beskrivning av en bild med en URL. URL: en som används i attributet används som beskrivning av bilden.
9) src
Värdetyp: URL
src står för källan och det används för att ange adressen från vilken webbläsaren kommer att hämta bilden, denna URL kan tillämpas på en bild i en katalog på samma server och den kan också lagra en bild i en tredjepartsserver med ett annat domännamn.
10) usemap
Värdetyp: #mapname
Usemap-attributet används för att definiera bilden för en bildkarta på klientsidan. En usemap används alltid med HTML-taggar för karta och område.
11) vspace
Värdetyp: pixlar
Vspace-attributet, som inte stöds i HTML5, används för att ställa in antalet pixlar som ska användas som vitrum längst upp och längst ner på bilden på webbsidan.
12) Bredd
Värdetyp: pixlar
Precis som namnet antyder, används breddattributet för att ange bredden på en bild på HTML-webbsidan.
Slutsats - HTML-bildtaggar
Nu när vi har tittat på hur bilder läggs till i HTML-sidor och hur man ställer in deras attribut kan vi skapa attraktiva snygga webbsidor i ett webbprojekt.
Förutom att bara lägga till visuell stil på en webbsida är bilder värdefulla eftersom de också hjälper till med sökmotoroptimering. Att lägga till korrekta alt-taggar och beskrivningar på bilder hjälper sökmotorer att förstå innehållet på en webbsida bättre och förbättra rankningen på en webbsida i många fall.
Rekommenderade artiklar
Detta är en guide till HTML-bildtaggar. Här diskuterar vi attributen för bildtagg tillsammans med webbläsarsupport och kompatibilitet med attribut. Du kan också titta på följande artiklar för att lära dig mer -
- En enkel guide till HTML-kommandon
- Introduktion till vad är XHTML?
- Handledning om HTML-attribut
- Applikationer och toppanvändningar av HTML
- Olika liststilar i HTML
- HTML-ramar
- HTML-block