Visual Dicas

---

Como criar um link para download usando HTML5 Posted: 21 Sep 2017 06:18 PM PDT 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="http://www.visualdicas.com.br/musicas/sinfoniaNo5Beethoven.mp3" download><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBy-IrAMA8uMjTKCt8O5bb372I-0S4xYt-MXqIiQke7w_fRGASY_O9Icd7ki14ZEyiPeYgyj3N5xzkqD9jl0gKL5cPjH0WrQiUbtqJqNMLADgRalV97EGhXx66MW_XyhbhVybvicxUTS4a/?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 Visual Dicas - A sua fonte de informação!

You are subscribed to email updates from Visual Dicas. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States