Aggiunta di un'immagine da un URL - HTML

Aggiunta Di Un Immagine Da Un Url Html



In HTML, le immagini rendono i siti Web più attraenti e raggiungono l'intenzione delle persone. Consente agli sviluppatori di personalizzare le proprie pagine Web con immagini diverse. Inoltre, possono aggiungerli direttamente da Internet copiando l'URL dell'immagine desiderata e specificandolo come valore del ' src ” all'interno del tag immagine. Inoltre, gli sviluppatori possono aggiungere l'immagine con l'aiuto della proprietà CSS nota come ' immagine di sfondo ”.

Questo post spiegherà brevemente il metodo per aggiungere l'immagine da un URL.

Come aggiungere un'immagine da un URL in HTML/CSS?

In HTML/CSS, sono disponibili due metodi per aggiungere un'immagine utilizzando l'URL, elencato di seguito:







Metodo 1: aggiungere un'immagine utilizzando l'elemento

Il ' L'elemento ” è un singolo elemento void che non ha contenuto figlio e tag di chiusura. Il ' src ' e ' Tutto quanto ' sono due attributi chiave che vengono utilizzati all'interno del tag ' '.



Diamo un'occhiata alle istruzioni fornite di seguito per aggiungere un'immagine utilizzando l'elemento !



Passaggio 1: crea un contenitore div

Innanzitutto, crea un contenitore div utilizzando il '

etichetta '. Quindi, inserisci il ' classe ” attribuire e assegnare un nome alla classe secondo il desiderio.





Passaggio 2: inserire l'intestazione

Successivamente, utilizza il tag di intestazione richiesto da '

' a '
etichetta '. Ad esempio, utilizzeremo il tag

e aggiungeremo il testo specifico come intestazione all'interno dei tag di apertura e chiusura.


Passaggio 3: aggiungi un'immagine utilizzando l'URL

Successivamente, aggiungi un ' ” tag e inserire gli attributi elencati di seguito all'interno del tag immagine:



  • src L'attributo ” viene utilizzato per aggiungere il file multimediale. A tale scopo, avvia il browser Web desiderato e copia l'URL dell'immagine desiderata.
  • Quindi, specifica l'URL come valore di ' src 'attributo.
  • Prossimo, ' Tutto quanto ” viene utilizzato per aggiungere un nome all'immagine quando non viene visualizzata per qualche motivo.
  • altezza La proprietà ” specifica l'altezza dell'elemento in base al valore dato.
  • larghezza ” utilizzato per impostare la larghezza dell'elemento:
< div classe = 'img-contenitore' >

< h2 > Aggiungi immagine con URL < / h2 >

< imm src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' Tutto quanto = 'Immagine!' altezza = '400px' larghezza = '300px' / >

< / div >

Secondo l'output indicato di seguito, l'immagine specificata è stata aggiunta correttamente:



Metodo 2: aggiungi immagine utilizzando le proprietà CSS in HTML

Gli sviluppatori possono anche aggiungere l'immagine da un URL utilizzando il CSS ' immagine di sfondo 'CSS. a tale scopo, seguire i passaggi indicati di seguito.

Passaggio 1: inserire l'intestazione

Innanzitutto, inserisci un testo di intestazione con l'aiuto del tag di apertura e chiusura

.

Passaggio 2: crea un contenitore div

Quindi, crea un contenitore div utilizzando il tag

e aggiungi un attributo di classe con il suo nome:

> Aggiungi immagine con URL >

= 'contenitore img' > >

Passaggio 3: accedere al contenitore

Ora, accedi alla classe tramite il selettore di punti ' . ” e il nome della classe che è stato creato in precedenza.

Passaggio 4: aggiungi un'immagine utilizzando la proprietà CSS 'background-image'.

Successivamente, applica le proprietà CSS elencate di seguito per aggiungere l'immagine da un URL all'interno della classe:

.img-contenitore {

altezza : 400 pixel ;

larghezza : 250 pixel ;

dimensione dello sfondo : contenere ;

Immagine di sfondo : URL ( https : //immagini .pexel .com/foto/ 2260800 /foto-pexel- 2260800 .jpeg? auto = compress&cs = tinysrgb&w = 1260 &h = 750 &dpr = uno )

}

Nel codice sopra fornito:

  • altezza La proprietà ” viene utilizzata per impostare l'altezza dell'elemento.
  • larghezza ” viene utilizzato per specificare la dimensione della larghezza dell'elemento.
  • dimensione dello sfondo ” viene utilizzato per impostare la dimensione dell'elemento di sfondo.
  • immagine di sfondo La proprietà ” aggiunge un'immagine sul retro dell'elemento. A tale scopo corrispondente, il “ URL() ” la funzione è utilizzata per aggiungere l'immagine e incollare l'URL dell'immagine nella funzione “ () ”.

Produzione

Hai imparato i diversi metodi per aggiungere immagini da un URL.

Conclusione

Per aggiungere un'immagine da un URL, gli sviluppatori possono utilizzare il ' etichetta '. Quindi, inserisci il ' src ” e assegna l'URL come valore “src”. Inoltre, l'utente può aggiungere un'immagine dall'URL utilizzando il CSS ' immagine di sfondo ' proprietà. Questo articolo ha dichiarato i metodi per aggiungere l'immagine dall'URL in HTML/CSS.