Attributo di download HTML

Durante lo sviluppo di qualsiasi applicazione, spesso dobbiamo rendere le immagini scaricabili. Ad esempio, un sito Web di portafoglio che fornisce agli utenti curriculum di esempio da scaricare o più. Per fare ciò, HTML offre il “scaricamento"Attributo da utilizzare all'interno del tag di ancoraggio.

Questo articolo dimostrerà l'attributo di download HTML.

Come scaricare un'immagine in HTML?

IL "scaricamento"L'attributo viene utilizzato all'interno del""O tag di ancoraggio. Questo attributo trasformerà il collegamento in un link scaricabile, che scaricherà l'immagine specificata in “Href"Attributo.

Esempio

In HTML, aggiungi un nuovo elemento div con il nome della classe "contenuto"All'interno della sezione del corpo. Quindi, specificare un "

"Tag per aggiungere un po 'di testo. Dopodiché, crea un altro div con il nome di classe "Download-immagine". All'interno di questo div, aggiungi tag associato agli attributi HREF che specificano il collegamento all'immagine e all'attributo di download. Quindi, definisci il tag con i seguenti attributi:

• "src"Per fornire un collegamento all'immagine.
• "Al"Specifica il testo mostrato se l'immagine non può caricare.
• "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'immagine.
• "altezza"La proprietà viene utilizzata per impostare l'altezza dell'immagine:

Fai clic sull'immagine per scaricarla:

Passiamo alla sezione CSS!

Stile "contenuto" di stile

.contenuto
Background-color: #B9E0FF;
imbottitura: 10px;

Il Div di contenuto viene applicato con le seguenti proprietà CSS:

• "colore di sfondo"La proprietà viene utilizzata per applicare il colore di sfondo all'elemento.
• "imbottitura"La proprietà aggiunge spazio all'interno dell'elemento.

Stile "Download-Image" Div

.Download-Image
larghezza: 300px;
Altezza: 200px;
Margine: auto;

IL ".Download-immagine"È utilizzato per accedere al"Download-immagine"Div. Le proprietà di seguito sono applicate ad esso:

• "larghezza"La proprietà imposta una larghezza dell'elemento HTML.
• "altezza"La proprietà imposta l'altezza di un elemento HTML.
• "margine"La proprietà viene utilizzata per aggiungere spazio attorno all'elemento.

Elemento "P" di stile

.contenuto p
Font-size: 20px;

IL "dimensione del font"Proprietà applicata sul file

Il tag viene utilizzato per impostare le dimensioni del carattere.

Si può osservare che quando abbiamo fatto clic sull'immagine, inizia a scaricare sul nostro sistema:

Suggerimento bonus: scarica l'immagine con un nome autoesplicativo

Possiamo assegnare un valore all'attributo di download. Quindi, il file scaricherà con questo nome specificato. È utile negli scenari se l'immagine ha un nome che non è significativamente assegnato nell'attributo HREF.

Supponiamo che l'immagine abbia il nome "ABC2334.png"Che non è significativo. Quindi, l'attributo di download viene assegnato il valore "pinguino":

Si può vedere dall'immagine qui sotto che l'immagine viene scaricata con un nome specificato nell'attributo di download:

Questo riguardava il metodo per creare un link scaricabile in HTML.

Conclusione

In HTML, l'attributo di download viene aggiunto all'elemento di ancoraggio HTML. Questo renderà il link un link scaricabile. L'immagine può essere scaricata con il nome desiderato. Per fare ciò, l'attributo di download è impostato con il valore come nome del file. Questo articolo ha dimostrato l'attributo di download HTML con un esempio pratico.