Bilder er en veldig viktig del av en webside siden det forbedrer utseendet til en webside og øker kundeinteraksjonen. USP på flere nettsteder er hvordan de organiserer forskjellige bilder på sine nettsider og legger til smaker til det. I dette Bilder-artikkelen, vi vil forstå hvordan du legger inn bilder på en webside ved hjelp av HTML i følgende rekkefølge:
Hvordan legge til bilde i HTML
Å legge inn et bilde på en webside HTML gir deg stikkord. Et annet viktig poeng å huske er,
har ikke en avsluttende tag. scr attributt brukes til å spesifisere banen til bildet, som kan være en url eller bildebane fra systemet / serveren. La oss først starte med den grunnleggende syntaksen for å legge inn bilder på en webside ved hjelp av HTML.
Syntaks
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Eksempelkode
HTML-bilde som innebærer bilder på websiden
I likhet med andre koder, er det forskjellige attributter knyttet til stikkord. La oss se på hver enkelt av dem en etter en, forstå deres behov og hvordan de kan brukes.
HTML-bilder
- alt Attributt
Alt-attributtet er den alternative teksten for et bilde. Årsaken til at alt-attributtet ble introdusert er at bildet av en eller annen grunn ikke kunne lastes inn, og at en alternativ tekst skulle vises som gir en ide om bildet. Årsakene til at bildet ikke lastes kan være treg internettforbindelse, eller bildet ligger ikke i den oppgitte kilden osv.
Hvis bildet ligger i samme mappe der HTML-filen er, kan du spesifisere navnet på filen direkte. Ellers har du den absolutte banen til bildefilen.
Verdien på alt-attributtet skal beskrive bildet.
Eksempel
HTML-bilde som innebærer bilder på websiden
kjør bikupespørring fra kommandolinjen
- Bredde og høyde på et bilde
Stilattributt brukes til å stille inn høyden og bredden på et bilde. I stilattributt angir du CSS-styling.
HTML-bilde som innebærer bilder på websiden
Noen av de viktige punktene når du legger inn et bilde på en webside ved hjelp av HTML, er:
- Bredde- og høydeattributtene er definert i piksler.
- Du kan også definere bredden og høyden på et bilde i prosent. Den vil vurdere prosentandelen i henhold til hele websiden.
- Hvis du bare spesifiserer en av dem, justerer den den andre deretter.
- Legge inn bilder ved hjelp av URL
HTML gir deg også fleksibiliteten der du kan velge bildet fra en annen server bare ved å spesifisere URL-en. Du kan bruke en egen server for å være vert for bildene og deretter legge inn bildene ved hjelp av URL.
HTML-bilde som innebærer bilder på websiden
- Bildet som en lenke
Du kan også bruke bildet som en lenke der brukeren kan klikke på bildet og lande på en ny webside. For å gjøre det, må du bare sette dag inn stikkord.
HTML-bilde som innebærer bilder på websiden
- Bilde flytende
Du kan også justere justeringen av bildet ved hjelp av CSS float-egenskap. Alle CSS-egenskapene må spesifiseres i stilattributtet.
HTML-bilde
java script pop-up melding
- Bildekart
Dette er en av de viktigste funksjonene som tilbys av HTML. tag hjelper til med å definere et bildekart. Du må lure på hva et bildekart er. Et bildekart er et bilde med klikkbare områder
HTML-bilde
- Bakgrunnsbilde
Du kan også legge til et bakgrunnsbilde på en webside. Du må bare bruke CSS-egenskapen, dvs. bakgrunnsbilde i stilkoden og legge den til HTML-elementet.
HTML-bildeBakgrunnsbilde
BODY-element
Med dette kommer vi til en slutt på denne HTML Images-bloggen.Nå etter at du har utført kodebitene ovenfor, ville du ha forstått hvordan du setter inn bilde i HTML. Jeg håper denne bloggen er informativ og gir merverdi for deg.
Sjekk ut vår som kommer med instruktørledet live-opplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet på 'HTML Images' -bloggen, så kommer vi tilbake til deg.