Bilder är en mycket viktig del av en webbsida eftersom det förbättrar utseendet på en webbsida och ökar kundinteraktion. USP för flera webbplatser är hur de organiserar olika bilder på sina webbsidor och lägger till smaker till den. I denna Bildartikel, vi kommer att förstå hur man bäddar in bilder på en webbsida med hjälp av HTML i följande ordning:
Hur man lägger till bild i HTML
Att bädda in en bild i en webbsida HTML ger dig märka. En annan viktig punkt att komma ihåg är,
har ingen avslutande tagg. scr attribut används för att ange bildens sökväg, som kan vara en webbadress eller bildsökväg från systemet / servern. Låt oss först börja med den grundläggande syntaxen för att bädda in bilden på en webbsida med hjälp av HTML.
Syntax
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Exempelkod
HTML-bild som bäddar in bilder på webbsidan
I likhet med andra taggar finns det olika attribut associerade med märka. Låt oss titta på var och en av dem en efter en, förstå deras behov och hur man använder dem.
HTML-bilder Taggar
- alt Attribut
Alt-attributet är den alternativa texten för en bild. Anledningen till att alt-attributet introducerades är att bilden av någon anledning inte kunde laddas, då skulle en alternativ text visas som ger en uppfattning om bilden. Anledningarna till att bilden inte laddades kan vara långsam internetanslutning eller så finns bilden inte i den angivna källan etc.
Om bilden finns i samma mapp där HTML-filen finns kan du ange filnamnet direkt. Annars har du den absoluta sökvägen för bildfilen.
Värdet på alt-attributet ska beskriva bilden.
Exempel
HTML-bild som bäddar in bilder på webbsidan
grundläggande datastrukturer i java
- Bildens bredd och höjd
Style-attribut används för att ställa in höjd och bredd på en bild. I stilattribut anger du CSS-styling.
HTML-bild som bäddar in bilder på webbsidan
Några av de viktiga punkterna när du bäddar in en bild på en webbsida med hjälp av HTML är:
- Attributen bredd och höjd definieras i pixlar.
- Du kan också definiera bredden och höjden på en bild i procent. Den kommer att ta hänsyn till procentsatsen enligt hela webbsidan.
- Om du bara anger en av dem så justerar den den andra därefter.
- Bädda in bilder med URL
HTML ger dig också flexibilitet där du kan välja bilden från en annan server bara genom att ange URL. Du kan använda en separat server för att vara värd för bilderna och sedan bädda in bilderna med hjälp av URL.
HTML-bild som bäddar in bilder på webbsidan
- Bild som länk
Du kan också använda bilden som en länk där användaren kan klicka på bilden och landa på en ny webbsida. För att göra det måste du bara sätta dag in märka.
HTML-bild som bäddar in bilder på webbsidan
- Bild flytande
Du kan också justera bildens justering med hjälp av CSS float-egenskap. Alla CSS-egenskaper måste anges i stilattributet.
HTML-bild
- Bildkartor
Detta är en av de viktiga funktionerna som tillhandahålls av HTML. tag hjälper till att definiera en bildkarta. Du måste undra vad en bildkarta är. En bildkarta är en bild med klickbara områden
HTML-bild
- Bakgrundsbild
Du kan också lägga till en bakgrundsbild på en webbsida. Du behöver bara använda CSS-egenskapen, dvs bakgrundsbild i stiltaggen och lägga till den i HTML-elementet.
HTML-bildBakgrundsbild
BODY-element
Med detta kommer vi till ett slut på denna HTML Images Blog.Efter att ha kört ovanstående utdrag skulle du ha förstått hur du sätter in bild i HTML. Jag hoppas att den här bloggen är informativ och ger ett mervärde för dig.
vad är ide i java
Kolla in vår som kommer med instruktörsledad liveutbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på bloggen 'HTML-bilder' så återkommer vi till dig.