Dodavanje slike s URL-a – HTML

Dodavanje Slike S Url A Html



U HTML-u slike čine web stranice privlačnijim i postižu namjere ljudi. Omogućuje programerima da prilagode svoje web stranice različitim slikama. Osim toga, mogu ih dodati izravno s interneta tako da kopiraju URL željene slike i zatim ga navedu kao vrijednost ' src ” unutar oznake slike. Štoviše, programeri mogu dodati sliku uz pomoć CSS svojstva poznatog kao ' pozadinska slika ”.

Ovaj će post ukratko objasniti metodu dodavanja slike s URL-a.

Kako dodati sliku s URL-a u HTML/CSS?

U HTML/CSS-u dostupne su dvije metode za dodavanje slike pomoću URL-a koji je naveden u nastavku:







Metoda 1: Dodajte sliku pomoću elementa

' ” element je jedan prazni element koji nema podređeni sadržaj i završnu oznaku. ' src ' i ' sve ” dva su ključna atributa koja se koriste unutar oznake “ ”.



Pogledajmo upute u nastavku za dodavanje slike pomoću elementa !



Korak 1: Napravite div spremnik

Najprije izradite div spremnik koristeći '

” oznaka. Zatim umetnite ' razreda ” atribut i dodijelite ime klasi prema želji.





Korak 2: Umetnite naslov

Zatim upotrijebite potrebnu oznaku naslova iz '

” do “
” oznaka. Na primjer, upotrijebit ćemo oznaku

i dodati određeni tekst kao naslov unutar početnih i završnih oznaka.


Korak 3: Dodajte sliku koristeći URL

Nakon toga dodajte ' ” i umetnite dolje navedene atribute unutar oznake slike:



  • src ” atribut se koristi za dodavanje medijske datoteke. U tu svrhu pokrenite željeni web preglednik i kopirajte URL željene slike.
  • Zatim navedite URL kao vrijednost ' src ” atribut.
  • Sljedeći, ' sve ” koristi se za dodavanje naziva za sliku kada iz nekog razloga nije prikazana.
  • visina ” Svojstvo određuje visinu elementa prema danoj vrijednosti.
  • širina ” koji se koristi za postavljanje širine elementa:
< div razreda = 'img-conatiner' >

< h2 > Dodajte sliku s URL-om < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' sve = 'Slika!' visina = '400 px' širina = '300px' / >

< / div >

Prema dolje danom rezultatu, navedena slika je uspješno dodana:



Metoda 2: Dodajte sliku koristeći CSS svojstva u HTML-u

Programeri također mogu dodati sliku s URL-a koristeći CSS ' pozadinska slika ” CSS. u tu svrhu slijedite dolje navedene korake.

Korak 1: Umetnite naslov

Prvo umetnite tekst naslova uz pomoć početne i završne oznake

.

Korak 2: Stvorite div spremnik

Zatim izradite div spremnik korištenjem

oznake i dodajte atribut klase s njegovim imenom:

> Dodaj sliku s URL-om >

= 'img-spremnik' > >

Korak 3: Pristup spremniku

Sada pristupite klasi putem birača točkica ' . ” i naziv klase koji je prethodno kreiran.

Korak 4: Dodajte sliku pomoću CSS svojstva “background-image”.

Nakon toga primijenite dolje navedena CSS svojstva da dodate sliku iz URL-a unutar klase:

.img-spremnik {

visina : 400 px ;

širina : 250 px ;

veličina pozadine : sadržavati ;

Pozadinska slika : url ( https : //slike .pekseli .com/fotografije/ 2260800 /pexels-foto- 2260800 .jpeg? auto = komprimirati&cs = tinysrgb&w = 1260 &h = 750 &dpr = jedan )

}

U gore navedenom kodu:

  • visina ” Svojstvo se koristi za postavljanje visine elementa.
  • širina ” koristi se za određivanje veličine širine elementa.
  • veličina pozadine ” koristi se za postavljanje veličine pozadinskog elementa.
  • pozadinska slika ” svojstvo dodaje sliku na stražnjoj strani elementa. Za ovu odgovarajuću svrhu, ' url() ” funkcija se koristi za dodavanje slike i lijepljenje URL-a slike u funkciju “ () ”.

Izlaz

Naučili ste o različitim metodama za dodavanje slika s URL-a.

Zaključak

Za dodavanje slike s URL-a, programeri mogu upotrijebiti ' ” oznaka. Zatim umetnite ' src ” i dodijelite URL kao vrijednost „src”. Nadalje, korisnik može dodati sliku s URL-a pomoću CSS-a ' pozadinska slika ” vlasništvo. Ovaj tekst navodi metode za dodavanje slike s URL-a u HTML/CSS.