I HTML gjør bilder nettsteder mer attraktive og oppnår folks intensjon. Det gjør at utviklere kan tilpasse websidene sine med forskjellige bilder. I tillegg kan de legge dem direkte fra internett ved å kopiere nettadressen til ønsket bilde og deretter spesifisere det som verdien av "src”Attributt inne i bildekoden. Dessuten kan utviklere legge til bildet ved hjelp av CSS -eiendommen kjent som "bakgrunnsbilde”.

Dette innlegget vil kort forklare metoden for å legge til bildet fra en URL.

Hvordan legge til et bilde fra en URL i HTML/CSS?

I HTML/CSS er to metoder tilgjengelige for å legge til et bilde ved hjelp av nettadressen, som er listet nedenfor:

• Metode 1: Legg til bilde ved hjelp av et element i HTML
• Metode 2: Legg til bilde ved hjelp av CSS -egenskaper i HTML

Metode 1: Legg til bilde ved å bruke element

“”Element er et enkelt tomromselement som ikke har noe barneinnhold og sluttkode. “src”Og“alt”Er to viktige attributter som brukes inne i“ ”-merket.

La oss se på de undergitte instruksjonene for å legge til et bilde ved hjelp av elementet!

Trinn 1: Lag en div container

Først må du lage en DIV -beholder ved å bruke "" stikkord. Sett deretter inn "klasse”Attributt og tilordne et navn til klassen i henhold til Desire.

Trinn 2: Sett inn overskrift

Deretter bruker du den nødvendige overskriftskoden fra "

" til "

" stikkord. For eksempel vil vi bruke

Merk og legg til den aktuelle teksten som en overskrift inne i åpnings- og lukkekodene.

Trinn 3: Legg til et bilde ved hjelp av URL

Etter det, legg til en “”Merk og sett inn de nedenfor-listede attributtene inne i bildekoden:

• “src”Attributt brukes til å legge til mediefilen. For det formålet, lanser den ønskede nettleseren og kopier den ønskede URL -en.
• Deretter spesifiser nettadressen som en verdi av "src" Egenskap.
• Neste, “alt”Brukes for å legge til et navn for bildet når det ikke vises av en eller annen grunn.
• “høyde”Eiendom spesifiserer elementets høyde i henhold til den gitte verdien.
• “bredde”Brukes for å sette bredden på elementet:

Legg til bilde med URL

I henhold til den undergitte utgangen er det spesifiserte bildet lagt til vellykket:

Metode 2: Legg til bilde ved hjelp av CSS -egenskaper i HTML

Utviklere kan også legge til bildet fra en URL ved hjelp av CSS “bakgrunnsbilde”CSS. For dette formålet, følg de undergitte trinnene.

Trinn 1: Sett inn overskrift

Først må du sette inn en overskriftstekst ved hjelp av

Åpnings- og lukkingsmerke.

Trinn 2: Lag Div Container

Deretter lager du en DIV -beholder ved å bruke taggen og legge til en klasseattributt med navnet:

Legg til bilde med URL

Trinn 3: Tilgangsbeholder

Få tilgang til klassen gjennom DOT -velgeren “.”Og klassenavnet som ble opprettet tidligere.

Trinn 4: Legg til bilde ved hjelp av “Bakgrunnsbilde” CSS-eiendom

Etter det, bruk de nedenfor-listede CSS-egenskapene for å legge til bildet fra en URL inne i klassen:

.IMG-Container
Høyde: 400px;
Bredde: 250px;
Bakgrunnsstørrelse: Inneholder;
Bakgrunnsbilde: URL (https: // bilder.Pexels.com/bilder/2260800/pexels-photo-2260800.JPEG?Auto = komprimering & cs = tinysrgb & w = 1260 & h = 750 & dpr = 1)

I ovennevnte kode:

• “høyde”Eiendom brukes til å sette høyden på elementet.
• “bredde”Brukes til å spesifisere elementets bredde størrelse.
• “bakgrunnsstørrelse”Brukes for å sette bakgrunnselementstørrelse.
• “bakgrunnsbilde”Eiendom legger til et bilde ved elementets bakside. For dette tilsvarende formålet, "URL ()”Funksjon brukes til å legge til bildet og lime opp nettadressen til bildet i funksjonen”()”.

Produksjon

Du har lært om de forskjellige metodene for å legge til bilder fra en URL.

Konklusjon

For å legge til et bilde fra en URL, kan utviklere bruke "" stikkord. Sett deretter inn "src”Attributt og tilordne nettadressen som“ SRC ”-verdien. Videre kan brukeren legge til et bilde fra nettadressen ved å bruke CSS “bakgrunnsbilde”Eiendom. Denne oppskrivningen har uttalt metodene for å legge til bildet fra URLen i HTML/CSS.