HTML -bilder

Bilder kan gjøre nettstedene dine veldig fengslende og vise seg å være veldig gunstige når det gjelder å forbedre brukeropplevelsen. De er den vanligste og praktiske måten å fange brukerens oppmerksomhet på fordi menneskets natur foretrekker bilder fremfor tekst. Dette innlegget er designet for å opplyse leserne om HTML -bilder i dybden. Dette innlegget dekker følgende emner:

1. Legg til bilder på nettstedet ditt
2. Endre høyden og bredden på bilder
3. Legge til bilder fra en undermappe
4. Legge til bilder fra et annet nettsted
5. Bruke bilder som en lenke

La oss begynne.

1. Legg til bilder på nettstedet ditt

Bilder kan inkluderes på et nettsted ved hjelp av taggen. Taggen er tom og består bare av attributter og har ingen lukkekode.

Syntaks
Taggen har den nedenfor-nevnte syntaks.

Attributtene til taggen er forklart nedenfor.

SRC -attributt
Denne attributtet beskriver banen til bildet.

ALT -attributt
Det gir et alternativt navn på bildet. Dette alternativet vises når bildet på grunn av en eller annen grunn ikke klarer å laste. Det alternative navnet skal beskrive bildet.

Eksempel
I det følgende eksemplet legger vi til et bilde av nordlys på en webside ved hjelp av taggen. Vi har ganske enkelt gitt bildet til bildet til SRC -attributtet og et alternativt navn til bildet i tilfelle bildet ikke lastes inn.

Lære HTML -bilder

Produksjon

Bildet av nordlys er innebygd på websiden.

I tilfelle lastes ikke bildet på grunn av en viss feil. Det er slik det alternative navnet vises på websiden i stedet for bildet.

2. Endre høyden og bredden på bilder

Høyde- og breddeattributtene brukes til å endre høyden og bredden på bildene.

Eksempel
Anta at du vil endre høyden og bredden på et HTML -bilde.

Lære HTML -bilder

Vi har satt bildebredden til 300 og høyde til 400.

Produksjon

Bildebredden og høyden er justert.

En annen måte å justere bredden og høyden på HTML -bilder er ved å bruke stilattributtet.

Eksempel
I det følgende eksemplet brukes stilattributtet til å sette bredden og høyden på bildet.

Lære HTML -bilder

Vi har satt bildebredden til 300px og høyde til 150px.

Produksjon

Bildebredden og høyden er endret.

3. Legge til bilder fra en undermappe

Hvis bildene dine blir lagret i en annen mappe, må du legge til banen til den mappen i SRC -attributtet til taggen.

Eksempel
I dette eksemplet er bildet “fugl.JPG ”er plassert i en undermappe“ Images ”, så vi gir banen til den mappen i SRC-attributtet til taggen.

Lære HTML -bilder

Bildet er til stede i en undermappe som vist nedenfor.

Produksjon

Bildet er innebygd på websiden som var til stede i en undermappe.

4. Legger til fra et annet nettsted

For å legge inn bilder fra et annet nettsted, har du ganske enkelt oppgitt nettadressen til bildet i SRC -attributtet til taggen.

Eksempel
I det følgende eksemplet blir et bilde innebygd fra Google.com nettsted ved hjelp av nettadressen.

Lære HTML -bilder

Produksjon

Bilde fra Google.com nettsted er innebygd.

5. Bruke bilder som en lenke

HTML -bilder kan brukes som lenker, og for dette formålet inkluderer taggen inne i taggen.

Eksempel
I det følgende eksempel brukes bildet som en lenke til et annet nettsted.

Lære HTML -bilder

Produksjon

Klikk på bildet, og nettstedet åpnes hvis lenke er gitt i HREF -attributtet til taggen.

Nettstedet er åpnet etter å ha klikket på bildet.

Konklusjon

Bilder kan være innebygd i nettsteder ved å bruke HTML -tag. Det er en tom tagg med bare to attributter som er; SRC og ALT. SRC -attributtet tar i banen til bildet og ALT fungerer som et alternativt navn i tilfelle bildet ikke klarer å laste, dessuten kan bildebredden og høyden justeres i henhold til lyst. Bilder kan være innebygd fra andre nettsteder og kan brukes som lenker. Dette innlegget diskuterer HTML -bildene i detalj ved hjelp av eksempler.