Cómo hacer un botón en HTML para descargar un archivo

Autor: Judy Howell
Fecha De Creación: 6 Mes De Julio 2021
Fecha De Actualización: 12 Mayo 2024
Anonim
Cómo hacer un botón en HTML para descargar un archivo - Artículos
Cómo hacer un botón en HTML para descargar un archivo - Artículos

Contenido

Los diseñadores web a menudo utilizan botones incrustados en documentos HTML por motivos de funcionalidad y estéticos. Además de ofrecer a los usuarios una forma visualmente agradable de enviar información o tomar decisiones, los botones permiten diferentes funcionalidades en base a la interacción del usuario. En este artículo un botón HTML permitirá a un usuario descargar un archivo cuando se hace clic.


instrucciones

Los botones son componentes útiles y flexibles en HTML (Hemera Technologies / PhotoObjects.net / Getty Images)
  1. Cree el archivo HTML en un editor de texto, como el Bloc de notas. El archivo básico debe contener al menos las etiquetas "html" y "body":

    >

    La etiqueta "button" contiene la información que describe el botón. En este caso, el botón es del tipo genérico "button" y su nombre es "Download". Las palabras entre las etiquetas "" aparecerán en el botón cuando la página se muestra en un navegador.

  2. Haga que el botón apunte a un archivo cuando haga clic en un usuario. Para ello, agregue un evento "onClick":

    El evento "onClick" se ejecutará cuando el usuario haga clic en el botón. En este caso abrirá una nueva ventana apuntando a la dirección del archivo.


  3. Guarde el archivo y ábralo en el navegador web. Salve con la extensión "html" (por ejemplo, "test.html"). Abra el explorador. El botón aparecerá en la esquina superior izquierda de la ventana y un clic en él enviará el usuario al archivo y comenzará el proceso de descarga.

consejos

  • Este código se puede copiar y pegar en cualquier documento HTML. Lea el sitio web de "W3C Schools" (w3schools.com) para aprender más sobre lo que pueden hacer los botones HTML.

Qué necesitas

  • Editor de texto
  • Navegador web

referencias

  • W3C Schools: Tag "button" de HTML [en inglés]
  • JavaScript Coder: Usando el método Window.Open [en inglés]

medio

  • W3C Schools: Tag "button" de HTML [en inglés]