Atributo HTML Download

Atributo HTML Download
Ao desenvolver qualquer aplicativo, geralmente precisamos tornar as imagens para download. Por exemplo, um site de portfólio que fornece aos usuários currículos de amostra para download ou mais. Para fazer isso, o HTML oferece o “download”Atributo a ser utilizado dentro da etiqueta de âncora.

Este artigo demonstrará o atributo de download html.

Como baixar uma imagem em html?

O "download”O atributo é utilizado no“”Ou tag de âncora. Este atributo transformará o link em um link para download, que baixará a imagem especificada no “Href”Atributo.

Exemplo

Em HTML, adicione um novo elemento div com o nome da classe “contente”Dentro da seção corporal. Então, especifique um “

”Tag para adicionar algum texto. Depois disso, crie outra div com o nome da classe “Download de imagem”. Dentro desta div, adicione a tag associada aos atributos HREF que especificam o link para a imagem e o atributo de download. Em seguida, defina a tag com os seguintes atributos:

  • ““src”Para fornecer um link para a imagem.
  • ““alt”Especifica o texto mostrado se a imagem não pode carregar.
  • ““largura”A propriedade é usada para definir a largura da imagem.
  • ““altura”A propriedade é utilizada para definir a altura da imagem:

Clique na imagem para baixá -la:







Vamos mudar para a seção CSS!

Estilo “conteúdo” div

.contente
Background-Color: #B9E0FF;
preenchimento: 10px;

A DIV de conteúdo é aplicada com as seguintes propriedades CSS:

  • ““cor de fundo”A propriedade é utilizada para aplicar a cor de fundo ao elemento.
  • ““preenchimento”A propriedade adiciona espaço dentro do elemento.

Estilo “download de imagem” div

.Download-Image
Largura: 300px;
Altura: 200px;
margem: automático;

O ".Download de imagem”É utilizado para acessar o“Download de imagem”Div. Propriedades abaixo são aplicadas a ele:

  • ““largura”Propriedade define uma largura do elemento HTML.
  • ““altura”Propriedade define a altura de um elemento HTML.
  • ““margem”A propriedade é utilizada para adicionar espaço ao redor do elemento.

Elemento de estilo “P”

.conteúdo p
Size da fonte: 20px;

O "tamanho da fontePropriedade aplicada no

A tag é utilizada para definir o tamanho da fonte.

Pode -se observar que, quando clicamos na imagem, ela começa a baixar em nosso sistema:

Dica de bônus: Baixe a imagem com um nome auto-explicativo

Podemos atribuir um valor ao atributo de download. Em seguida, o arquivo será baixado com este nome especificado. É útil em cenários se a imagem tiver um nome que não seja significativamente atribuído no atributo href.

Vamos supor que a imagem tenha o nome “ABC2334.png”O que não é significativo. Então, o atributo de download recebe o valor “pinguim”:




Pode ser visto na imagem abaixo que a imagem é baixada com um nome especificado no atributo de download:

Isso foi tudo sobre o método para criar um link para download em html.

Conclusão

No HTML, o atributo de download é adicionado ao elemento âncora html. Isso fará do link um link para download. A imagem pode ser baixada com o nome desejado. Para fazer isso, o atributo de download é definido com o valor como o nome do arquivo. Este artigo demonstrou o atributo de download html com um exemplo prático.