Cómo hacer tus propios botones de HTML

Escrito por colin barrett | Traducido por federico giorgianni
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer tus propios botones de HTML
Se necesita un poco de conocimiento en código HTML para crear un botón con una imagen. (Comstock/Comstock/Getty Images)

Las imágenes de los botones son imágenes que aparecen en páginas web que, cuando se hace clic sobre ellas, redirigen al usuario a otro sitio web, página web o recurso. La creación de una imagen para un botón implica el uso de una imagen gráfica combinada con código de Lenguaje de Marcado de Hipertexto (HTML por sus siglas en inglés) para lograr la acción deseada.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Software de edición de imágenes
  • Editor de texto
  • Navegador Web

Lista completaMinimizar

Instrucciones

  1. 1

    Guarda el archivo de imagen que hayas seleccionado en la carpeta que contiene tu sitio web almacenado localmente, o prepara una imagen que pueda ser guardada en un formato compatible con la web, como GIF, JPG o PNG, usando un programa de creación y edición de imágenes como el Photoshop, el Paint o el GIMP. La imagen debe ser exactamente la misma, medida en píxeles, como la que se pretende que aparezca en la página web.

  2. 2

    Crea una nueva página en un editor de texto, como el Wordpad para Windows o el TextEdit en una Mac, o abre el documento de la página web en HTML existente en el que quieras que insertar la imagen del botón. Guarda la página en la carpeta deseada, que también contenga la imagen. Es importante que ni la imagen ni la página web sean movidas de esta ubicación, ya que de otra manera los enlaces precisos dejarán de funcionar.

  3. 3

    Escribe el siguiente código HTML en la página en el punto en el que deseas activar la imagen del botón: <A HREF="paginados.html">, donde "paginados" es la página a la cual será dirigido el usuario cuando haga clic en la imagen.

  4. 4

    Escribe el código que describe la ubicación exacta de la imagen en relación a la página que estás creando. Esto podría ser: <IMG SRC="imagen.jpg">, donde "imagen" es el nombre de la imagen creada, y "jpg" es el formato del archivo de imagen. Inserta este código inmediatamente después del código HTML ya creado en el Paso 3. Guarda el archivo como "paginauno.html".

  5. 5

    Abre la página con tu navegador de Internet preferido, ya sea escribiendo su ruta de archivo precisa en la barra de direcciones o haciendo clic con el botón derecho en el icono del archivo y seleccionando "Open with" (abrir con) en el menú emergente. La página llamada "paginauno.html" que contiene la imagen se visualizará ahora. El cursor cambiara a medida que "flote" sobre la imagen, indicando que tiene un hipervínculo incorporado. Haz clic en la imagen para visualizar la segunda página web que creaste.

Consejos y advertencias

  • Es una buena práctica usar nombres de archivos fáciles de entender y que no contengan espacios al crear páginas web. Al guardar imágenes en un programa de edición de imágenes, siempre selecciona la opción "Web ready" (listo para la web), para efectos de minimizar el tamaño de los archivos y al mismo tiempo conservar la calidad.
  • Nunca muevas los elementos de una página web una vez que la hayas creado, de otro modo cualquier enlace entre ellos será destruido. Siempre prueba tus páginas HTML en un navegador antes de enviarlas para su publicación a tu servidor web.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles