Cómo crear un enlace con código HTML básico

PDF download Descargar el PDF
Coescrito por Tyrone Showers

PDF download Descargar el PDF

Después de crear varias páginas web en HTML, sería bueno que las interconectes en un solo sitio web. Aprende a vincular una página de un sitio con otra, o con cualquier otra página de Internet. Incluso puedes enviar a los visitantes a un lugar específico de la página para ahorrarles el trabajo de desplazarse hacia allí.

Método 1
Método 1 de 2:

Crear un enlace a otra página web

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a0\/Create-a-Link-With-Simple-HTML-Programming-Step-1-Version-3.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a0\/Create-a-Link-With-Simple-HTML-Programming-Step-1-Version-3.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Abre el archivo HTML de la página que quieras editar. Si vas a empezar desde cero y necesitas más información, lee este otro wikiHow sobre cómo crear un documento HTML antes de continuar.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/Create-a-Link-With-Simple-HTML-Programming-Step-2-Version-3.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/Create-a-Link-With-Simple-HTML-Programming-Step-2-Version-3.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Agrega el siguiente código en el lugar del cuerpo del documento HTML en donde quieras que aparezca el enlace:
    • <a href="https://www.wikihow.com/">Texto del enlace</a>
    • Esto se mostrará así: Texto del enlace .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/51\/Create-a-Link-With-Simple-HTML-Programming-Step-3-Version-3.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/51\/Create-a-Link-With-Simple-HTML-Programming-Step-3-Version-3.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Todo lo que se encuentre entre las etiquetas <a> y </a> se mostrará en la página como un enlace. Puedes combinarlo con otras etiquetas HTML, como si fuera cualquier otro texto.
    • También puedes convertir una imagen en enlace:
      <a href="https://www.wikihow.com/"><img src="logo_de_wikihow.png"></a> .
      El usuario verá la imagen "logo_de_wikihow.png" y podrá hacer clic en ella para ir al sitio https://www.wikihow.com/.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b8\/Create-a-Link-With-Simple-HTML-Programming-Step-4.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b8\/Create-a-Link-With-Simple-HTML-Programming-Step-4.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La etiqueta <a></a> que acabas de crear es lo que se conoce como "ancla". El atributo "href" dentro del ancla define el destino del enlace. Reemplaza https://www.wikihow.com/ en el ejemplo anterior por la URI a la cual quieras ir.
    • Escribe la URI siempre entre comillas.
    • Las URI distinguen mayúsculas de minúsculas. [1] Cópialas o escríbelas siempre tal como están.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a8\/Create-a-Link-With-Simple-HTML-Programming-Step-5.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Create-a-Link-With-Simple-HTML-Programming-Step-5.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si vas a crear un enlace a otra página que pertenece al mismo sitio web, no es necesario incluir la URL completa (de todas formas, funcionará si lo haces). Es más fácil mantener el sitio web organizado usando enlaces relativos que no incluyan el nombre de dominio. Aquí tienes un simple ejemplo de cómo vincular una página con otra dentro de una misma carpeta:
    • Supón que vas a editar la página http://ejemplo.edu/acerca/autor.html .
    • Para crear un enlace a la página http://ejemplo.edu/acerca/familia.html , puedes escribir solo el nombre del archivo:
      <a href="familia.html">Texto del enlace</a>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/64\/Create-a-Link-With-Simple-HTML-Programming-Step-6.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/64\/Create-a-Link-With-Simple-HTML-Programming-Step-6.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    También puedes usar enlaces relativos si quieres que el enlace te lleve a cualquier otra página dentro del mismo sitio. Solo debes tener en cuenta dos cosas: [2]
    • Para crear un enlace a una página en una subcarpeta, debes incluir la ruta del nuevo archivo. Por ejemplo, si te encuentras en la página http://ejemplo.edu/acerca/autor.html y quieres que el enlace vaya a http://ejemplo.edu/acerca/mascotas/perro.jpg , puedes omitir todo lo que va antes de "acerca":
      <a href="/mascotas/perro.jpg">Texto del enlace</a>
    • Si quieres crear un enlace en otra rama del sitio, utiliza "../" para moverte hacia arriba, a una carpeta superior. Por ejemplo, para crear un enlace de /acerca/autor.html a http://ejemplo.edu/lecturas/libros.html , escribe:
      <a href="../lecturas/libros.html">Texto del enlace</a>
    Anuncio
Método 2
Método 2 de 2:

Crear un enlace a otro lugar en la misma página

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f5\/Create-a-Link-With-Simple-HTML-Programming-Step-7.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f5\/Create-a-Link-With-Simple-HTML-Programming-Step-7.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si vas a crear un enlace a una página web larga, quizá sería mejor llevar a la persona a un lugar específico en vez de al principio de la página. Para hacer esto posible, abre el documento HTML de la página de destino. Inserta la siguiente etiqueta de ancla en el lugar al cual quieras que te lleve el enlace:
    • <a id="nombredelancla">Texto del ancla</a>
      Este texto se mostrará como texto normal, ya que el destino del enlace no es, de por sí, un enlace. Puedes reemplazar "nombredelancla" por el nombre que quieras siempre y cuando no uses el mismo nombre dos veces en la misma página.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cd\/Create-a-Link-With-Simple-HTML-Programming-Step-8.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/Create-a-Link-With-Simple-HTML-Programming-Step-8.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para crear un enlace a un lugar específico de la página debes agregar el símbolo "#" al final de la URI seguido del nombre exacto que usaste para el atributo "id". Este identificador distingue mayúsculas de minúsculas.
    • Por ejemplo, para crear un enlace al ancla <a id="imagenes"></a> en la página http://ejemplo.edu/vacaciones.html, escribe:
      <a href="http://ejemplo.edu/vacaciones.html#imagenes">Texto del enlace</a> .
    • Esto lo puedes agregar a enlaces absolutos o relativos (ve las instrucciones del otro método).
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Link-With-Simple-HTML-Programming-Step-9.jpg\/v4-460px-Create-a-Link-With-Simple-HTML-Programming-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Link-With-Simple-HTML-Programming-Step-9.jpg\/v4-728px-Create-a-Link-With-Simple-HTML-Programming-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    También puedes crear un ancla insertando id="nombredelancla" en cualquier etiqueta HTML. [3] Funciona exactamente igual. Aquí tienes algunos ejemplos:
    • <h1 id="encabezado">Texto del encabezado</h1>
      Crea un enlace al encabezado agregando "#encabezado" al final de la URL.
    • <p id="parrafointroduccion">Texto del párrafo</p>
      Crea un enlace al párrafo de introducción agregando "#parrafointroduccion" al final de la URL.
    Anuncio

Consejos

  • Para hacer que la página del enlace se abra en una nueva ventana puedes utilizar el atributo "target": <a href="https://www.wikihow.com/ target="_blank">Ir a wikiHow</a>
  • Puedes usar hojas de estilo en cascada (CSS) para modificar la apariencia del enlace en sus cuatro estados: link (enlace), visited (visitado), hover (pasar por encima) y active (activo).
Anuncio

Advertencias

  • No olvides cerrar la etiqueta <a> con su correspondiente etiqueta </a>. Si lo olvidas, ¡el navegador podría convertir el texto restante de la página en un enlace!
Anuncio

Cosas que necesitarás

  • editor de texto básico como, por ejemplo, Bloc de notas (PC), TextEdit (Mac) o SublimeText (Windows, Mac y Linux)

wikiHows relacionados

Cómo
ejecutar un programa desde el símbolo del sistema en Linux
Cómo
convertir de decimal a hexadecimal
Cómo
formatear texto como código en Discord
Cómo
hacer un programa usando Bloc de notas
Cómo cambiar un código de cerradura de Kwikset
Cómo
verificar la versión de PHP
Cómo
establecer el ancho y la altura de una imagen en HTML
Cómo
usar el comando net send
Cómo comentar múltiples líneas en Python: formato y accesos directos
Cómo
ejecutar un archivo Python desde el Símbolo del sistema de Windows
Cómo
crear un archivo EXE
Cómo
abrir un archivo SQL
Cómo
crear un archivo ejecutable en Eclipse
Cómo
alinear textos e imágenes en HTML
Anuncio

Referencias

  1. ↑ https://www.w3.org/TR/html4/types.html#type-uri
  2. ↑ http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
  3. ↑ https://www.w3.org/TR/html4/struct/global.html#adef-id

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 10 079 visitas.

¿Te ayudó este artículo?

Anuncio