In HTML, le immagini rendono i siti Web più attraenti e raggiungono l'intenzione delle persone. Consente agli sviluppatori di personalizzare le loro pagine Web con immagini diverse. Inoltre, possono aggiungerli direttamente da Internet copiando l'URL dell'immagine desiderata e quindi specificandolo come il valore di "src"Attributo 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 usando l'URL, che è elencato di seguito:

• Metodo 1: Aggiungi immagine usando un elemento in HTML
• Metodo 2: Aggiungi immagine usando le proprietà CSS in HTML

Metodo 1: aggiungi l'immagine usando l'elemento

IL ""L'elemento è un singolo elemento vuoto che non ha contenuto figlio e tag finale. IL "src" E "Al"Sono due attributi chiave che vengono utilizzati all'interno del tag" ".

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

Passaggio 1: crea un contenitore div

Innanzitutto, crea un contenitore Div utilizzando il ""Tag. Quindi, inserire il “classe"Attribuire e assegnare un nome alla classe secondo il desiderio.

Passaggio 2: inserire l'intestazione

Successivamente, utilizzare il tag di intestazione richiesto da "

" A "

"Tag. Ad esempio, utilizzeremo il

tagga e aggiungi il testo particolare come intestazione all'interno dei tag di apertura e chiusura.

Passaggio 3: aggiungi un'immagine usando l'URL

Dopodiché, aggiungi un ""Tag e inserire gli attributi sotto l'elenco all'interno del tag immagine:

• "src"L'attributo viene utilizzato per l'aggiunta del file multimediale. A tale scopo, avvia il browser Web desiderato e copia l'URL di immagine desiderato.
• Quindi, specificare l'URL come valore di "src"Attributo.
• Prossimo, "Al"È utilizzato per l'aggiunta di un nome per l'immagine quando non viene mostrato per qualche motivo.
• "altezza"La proprietà specifica l'altezza dell'elemento in base al valore indicato.
• "larghezza"Utilizzato per impostare la larghezza dell'elemento:

Aggiungi immagine con URL

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

Metodo 2: Aggiungi immagine usando le proprietà CSS in HTML

Gli sviluppatori possono anche aggiungere l'immagine da un URL usando il CSS "immagine di sfondo"CSS. A tale scopo, segui i passaggi di seguito.

Passaggio 1: inserire l'intestazione

Innanzitutto, inserire un testo di intestazione con l'aiuto del

tag di apertura e chiusura.

Passaggio 2: creare contenitore div

Successivamente, crea un contenitore Div utilizzando il tag e aggiungi un attributo di classe con il suo nome:

Aggiungi immagine con URL

Passaggio 3: Accesso Container

Ora, accedi alla classe tramite il selettore DOT "."E il nome di classe che è stato creato in precedenza.

Passaggio 4: aggiungi l'immagine usando la proprietà CSS "Immagina di sfondo"

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

.img-container
Altezza: 400px;
larghezza: 250px;
Size di background: contenere;
Immagina di sfondo: URL (https: // immagini.Pexels.com/foto/2260800/pexels-photo-2260800.jpeg?Auto = Compress & CS = tinysrgb & w = 1260 & h = 750 & dpr = 1)

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.
• "Size di sfondo"È utilizzato per l'impostazione della dimensione dell'elemento di sfondo.
• "immagine di sfondo"La proprietà aggiunge un'immagine sul retro dell'elemento. Per questo scopo corrispondente, il "url ()"La funzione viene 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 ""Tag. Quindi, inserire il “src"Attributo e assegnare 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.