Billeder er en meget vigtig del af en webside, da det forbedrer udseendet på en webside og øger kundeinteraktionen. USP på flere websteder er, hvordan de organiserer forskellige billeder på deres websider og tilføjer varianter til det. Heri Billedartikel, vi forstår, hvordan man integrerer billeder på en webside ved hjælp af HTML i følgende rækkefølge:
Sådan tilføjes billede i HTML
At integrere et billede på en webside giver HTML dig tag. Et andet vigtigt punkt at huske er,
har ikke et lukkemærke. scr attribut bruges til at specificere stien til billedet, som kan være en url eller billedsti fra systemet / serveren. Lad os først starte med den grundlæggende syntaks for indlejring af billede på en webside ved hjælp af HTML.
Syntaks
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Prøvekode
HTML-billede, der integrerer billeder på websiden
I lighed med andre tags er der forskellige attributter forbundet med tag. Lad os se på hver enkelt af dem en efter en, forstå deres behov og hvordan man bruger dem.
HTML-billedkoder
- alt Attribute
Alt-attributten er den alternative tekst til et billede. Årsagen til, at alt-attribut blev introduceret, er, at billedet af en eller anden grund ikke kunne indlæses, så en alternativ tekst skulle vises, der gav en idé om billedet. Årsagerne til, at billedet ikke indlæses, kan være langsom internetforbindelse, eller hvis billedet ikke findes i den angivne kilde osv.
Hvis billedet findes i den samme mappe, hvor HTML-filen er, kan du angive filens navn direkte. Ellers har du den absolutte sti til billedfilen.
Værdien af alt-attributten skal beskrive billedet.
Eksempel
HTML-billede, der integrerer billeder på websiden
hvordan man laver tilføjelse i java
- Bredde og højde på et billede
Stilattribut bruges til at indstille højden og bredden på et billede. I stilattribut specificerer du CSS-styling.
HTML-billede, der integrerer billeder på websiden
Nogle af de vigtige punkter under indlejring af et billede på en webside ved hjælp af HTML er:
- Bredde- og højdeattributterne er defineret i pixels.
- Du kan også definere bredden og højden på et billede i procent. Det vil overveje procentdelen i henhold til hele websiden.
- Hvis du kun angiver en af dem, så justerer den den anden i overensstemmelse hermed.
- Integrering af billeder ved hjælp af URL
HTML giver dig også fleksibiliteten, hvor du kan vælge billedet fra en anden server bare ved at angive URL'en. Du kan bruge en separat server til at være vært for billederne og derefter integrere disse billeder ved hjælp af URL.
HTML-billede, der integrerer billeder på websiden
- Billede som et link
Du kan også bruge billedet som et link, hvor brugeren kan klikke på billedet og lande på en ny webside. For at gøre det skal du bare sætte dag ind tag.
HTML-billede, der integrerer billeder på websiden
- Billede flydende
Du kan også justere billedets justering ved hjælp af CSS float-egenskab. Alle CSS-egenskaber skal specificeres i typeattributten.
HTML-billede
- Billedkort
Dette er en af de vigtige funktioner, der leveres af HTML. tag hjælper med at definere et billedkort. Du må undre dig over, hvad et billedkort er. Et billedkort er et billede med klikbare områder
big data tutorial for begyndere
HTML-billede
- Baggrundsbillede
Du kan også tilføje et baggrundsbillede på en webside. Du skal bare bruge CSS-egenskaben, dvs. baggrundsbillede i stilkoden og føje det til HTML-elementet.
HTML-billedeBaggrundsbillede
KROPP-element
Med dette kommer vi til en afslutning på denne HTML Images Blog.Efter at have udført ovenstående uddrag ville du have forstået, hvordan du indsætter billede i HTML. Jeg håber, at denne blog er informativ og merværdi for dig.
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørgsmål til os? Nævn det i kommentarfeltet på bloggen 'HTML-billeder', og vi vender tilbage til dig.