Adăugarea unei imagini dintr-o adresă URL – HTML

Adaugarea Unei Imagini Dintr O Adresa Url Html



În HTML, imaginile fac site-urile web mai atractive și ating intenția oamenilor. Permite dezvoltatorilor să-și personalizeze paginile web cu imagini diferite. În plus, le pot adăuga direct de pe internet prin copierea adresei URL a imaginii dorite și apoi specificând-o ca valoare a „ src ” în interiorul etichetei de imagine. Mai mult, dezvoltatorii pot adăuga imaginea cu ajutorul proprietății CSS cunoscută sub numele de „ imagine de fundal ”.

Această postare va explica pe scurt metoda de adăugare a imaginii dintr-o adresă URL.

Cum să adăugați o imagine dintr-o adresă URL în HTML/CSS?

În HTML/CSS, sunt disponibile două metode pentru a adăuga o imagine folosind adresa URL, care este listată mai jos:







Metoda 1: Adăugați o imagine utilizând elementul

” elementul este un singur element void care nu are conținut secundar și etichetă de sfârșit. „ src ' și ' Tot ” sunt două atribute cheie care sunt utilizate în interiorul etichetei „ ”.



Să ne uităm la instrucțiunile de mai jos pentru a adăuga o imagine folosind elementul !



Pasul 1: Faceți un container div

Mai întâi, creați un container div utilizând „

' etichetă. Apoi, introduceți „ clasă ” atribuiți și atribuiți un nume clasei în funcție de dorință.





Pasul 2: Inserați titlul

Apoi, utilizați eticheta de antet necesară din „

' la '
' etichetă. De exemplu, vom folosi eticheta

și vom adăuga textul special ca titlu în interiorul etichetelor de deschidere și de închidere.


Pasul 3: Adăugați o imagine folosind adresa URL

După aceea, adăugați un „ ” etichetați și introduceți atributele enumerate mai jos în interiorul etichetei imaginii:



  • src ” este folosit pentru adăugarea fișierului media. În acest scop, lansați browserul web dorit și copiați adresa URL a imaginii dorite.
  • Apoi, specificați adresa URL ca valoare a „ src ” atribut.
  • Următorul, ' Tot ” este utilizat pentru adăugarea unui nume pentru imagine atunci când aceasta nu este afișată dintr-un motiv oarecare.
  • înălţime ” proprietatea specifică înălțimea elementului în funcție de valoarea dată.
  • lăţime ” utilizat pentru setarea lățimii elementului:
< div clasă = 'img-conatiner' >

< h2 > Adăugați o imagine cu URL < / h2 >

< img src = „https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1” Tot = 'Imagine!' înălţime = '400px' lăţime = '300px' / >

< / div >

Conform rezultatului de mai jos, imaginea specificată a fost adăugată cu succes:



Metoda 2: Adăugați o imagine folosind proprietățile CSS în HTML

Dezvoltatorii pot adăuga, de asemenea, imaginea dintr-o adresă URL folosind CSS „ imagine de fundal ” CSS. în acest scop, urmați pașii de mai jos.

Pasul 1: Inserați titlul

Mai întâi, inserați un text de titlu cu ajutorul etichetei de deschidere și închidere

.

Pasul 2: Creați un container div

Apoi, creați un container div utilizând eticheta

și adăugați un atribut de clasă cu numele său:

> Adăugați o imagine cu URL >

= 'container-img' > >

Pasul 3: Accesați containerul

Acum, accesați clasa prin selectorul de puncte „ . ” și numele clasei care a fost creat anterior.

Pasul 4: Adăugați o imagine folosind proprietatea CSS „imagine de fundal”.

După aceea, aplicați proprietățile CSS enumerate mai jos pentru a adăuga imaginea dintr-o adresă URL în interiorul clasei:

.img-container {

înălţime : 400px ;

lăţime : 250px ;

dimensiunea fundalului : conține ;

Imagine de fundal : url ( https : //imagini .pexeli .com/photos/ 2260800 /pexels-photo- 2260800 .jpeg? auto = comprima&cs = tinysrgb&w = 1260 &h = 750 &dpr = unu )

}

În codul furnizat mai sus:

  • înălţime ” este utilizată pentru setarea înălțimii elementului.
  • lăţime ” este folosit pentru a specifica dimensiunea lățimii elementului.
  • dimensiunea fundalului ” este utilizat pentru setarea dimensiunii elementului de fundal.
  • imagine de fundal ” proprietatea adaugă o imagine în partea din spate a elementului. În acest scop corespunzător, „ url() „funcția este utilizată pentru adăugarea imaginii și lipirea adresei URL a imaginii în funcția „ () ”.

Ieșire

Ați învățat despre diferitele metode de adăugare a imaginilor dintr-o adresă URL.

Concluzie

Pentru a adăuga o imagine dintr-o adresă URL, dezvoltatorii pot utiliza „ ' etichetă. Apoi, introduceți „ src ” și atribuiți adresa URL ca valoare „src”. În plus, utilizatorul poate adăuga o imagine de la adresa URL utilizând CSS „ imagine de fundal ” proprietate. Acest articol a precizat metodele de adăugare a imaginii de la adresa URL în HTML/CSS.