PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

21/09/2017

Como criar um link para download usando HTML5

Resultado de imagem para html5

Download usando HTML5

Existem várias formas de criamos links ou sistemas de download. No Visual Dicas postamos uma artigo para você criar um sistema de download, leia Como criar um sistema de download no seu Blogger. Entretanto, todas as formas exigem conhecimento de programação e aplicativos de terceiros, mas que podem ser facilitados pelo HTML5.

O HTML5 trouxe muitas facilidades para os desenvolvedores de sites e blogs. Uma delas é possibilitar a criação de links diretos de download, como mostraremos neste artigo.

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes: É uma nova versão da linguagem HTML, com novos elementos, atributos, e comportamentos. e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos.

Atributo “download”

O atributo “download” especifica um arquivo será baixado quando o usuário clicar em um link HTML.

Sintaxe

<a href=”endereço do arquivo” download> </a>

Onde:

  • endereço do arquivo: caminho onde o arquivo está hospedado.

Sintaxe com valor opcional

<a href=”endereço do arquivo” download=”nome(opcional)”> </a>

Onde:

  • endereço do arquivo: caminho onde o arquivo está hospedado.
  • nome (opcional): novo nome dado ao arquivo que será baixado (não funciona na maioria dos navegadores).

    Notas:

    • O atributo “download” só poderá ser utilizado se o atributo “href” estiver definido.
    • O valor do atributo será o nome do arquivo baixado.
    • Se o valor for omitido, o nome do arquivo original será usado.
    • Não há restrições sobre os valores permitidos, entretanto este recurso não funciona em todos navegadores.
    • O navegador detectará automaticamente a extensão correta do arquivo (.img, .pdf, .txt, .doc, etc.).
    • O atributo “download” não é suportado na versão Edge 12, Opera 12 (e versões anteriores) e todas versões do IE e Safari.

    Exemplos

    Nos exemplos a seguir poderemos baixar arquivos que estão hospedados no Google Sites. (No Visual Dicas mostramos como hospedar arquivos gratuitamente - Usando o Google Sites como servidor de arquivos para blogs e sites):

    Exemplo arquivo Word
    < a href="https://sites.google.com/site/servidorvisualdicas/arquivos-word/Online OCR - PDF.docx" download>Baixar arquivo Word</a>

    Exemplo arquivo Excel
    < a href="https://sites.google.com/site/servidorvisualdicas/arquivos-excel/Data_validade.xlsx" download>Baixar arquivo Excel</a>

    Exemplo arquivo MP3
    < a href="https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.mp3" download>Baixar arquivo MP3</a>

    Exemplo arquivo PDF
    < a href="https://sites.google.com/site/servidorvisualdicas/arquivos-pdf/Texto PDF.pdf" download>Baixar arquivo PDF</a>

    Teste os códigos:

    Exemplo arquivo Word

    Baixar arquivo Word

    Exemplo arquivo Excel

    Baixar arquivo Excel

    Exemplo arquivo MP3

    Baixar arquivo MP3

    Exemplo arquivo PDF

    Baixar arquivo PDF clique aqui

    Neste outro exemplo vamos utilizar uma imagem com link:

    Exemplo imagem como link
    < a href=https://www.visualdicas.com.br/musicas/sinfoniaNo5Beethoven.mp3 download><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGq6UawGqnOi7trcHX6mh1VW-EH2-tIMwXBc0mZ3xV5_un-zEMrQwnAPMZP66VWS0IOTJ11hesAYscoZ3iY8WTqPlktkke5vLBwnRq9EcATwHgcX0T6kqqgNum8IRmRE2cNcplhMuvk-L/?imgmax=800"</a>

    Teste o código abaixo:

    Clique na imagem abaixo

    Para simular nossos código, abra o Squids Editor: Tente você mesmo »

    Obs.: Você também poderá colocar botões nos seus links para download. Leia Crie botões personalizados para o seu Blogger.

    byALF

    3 comentários:

    Blogger disse...
    Este comentário foi removido por um administrador do blog.
    Unknown disse...

    Gostei do seu post

    Unknown disse...

    Brabo demais, KKK. Eu estou aprendendo mais em casa, do que no curso que eu fazia. Estou gostando muito. Por enquanto eu estou fazendo testes pelo celular no aplicativo ACODE, daqui a um tempo vou comprar meu notebook e começar a programar sites

    Postar um comentário

    Gostou do Post? Então espalhe!

    Quem está curtindo...

    Encontre no blog...

    Fique mais.... Leia os nossos artigos!!!

    Gostou? Então espalhe!

    Twitter Delicious Facebook Digg Stumbleupon Favorites More

     
    Web Analytics