Cómo esconder un vínculo en HTML

PDF download Descargar el PDF
PDF download Descargar el PDF

Esconder un enlace en HTML hará que sea prácticamente inútil para los usuarios promedio que están visitando tu página web. Y si la persona que está visitando tu página web utiliza un navegador viejo, algunos métodos para esconder enlaces en HTML simplemente no funcionarán. [1] Pero si quieres hacer una pequeña búsqueda del tesoro o añadir funciones ocultas, a veces llamadas "Easter Eggs" (huevos de pascua), a tu sitio, esconder enlaces puede ayudarte a lograr esto. Sin embargo, un conocimiento básico de HTML y de cómo escribir códigos será necesario para implementar estos cambios.

Método 1
Método 1 de 2:

Cambia el color de fuente del enlace

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/13\/Hide-a-Link-in-HTML-Step-1-Version-3.jpg\/v4-460px-Hide-a-Link-in-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/13\/Hide-a-Link-in-HTML-Step-1-Version-3.jpg\/v4-728px-Hide-a-Link-in-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Al entrar al código que escribiste para tu página web, puedes encontrar el enlace que escribiste en el código y cambiar sus valores de color para que coincidan con el color de fondo de la página. Al hacer esto, harás que el código se vuelva invisible contra al camuflarse contra el color de fondo.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/17\/Hide-a-Link-in-HTML-Step-2-Version-3.jpg\/v4-460px-Hide-a-Link-in-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/17\/Hide-a-Link-in-HTML-Step-2-Version-3.jpg\/v4-728px-Hide-a-Link-in-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML, CSS y otros lenguajes de codificación utilizan un código hexadecimal de tres bytes y seis dígitos para representar el color. Necesitas encontrar el código hexadecimal para el color que coincida con el color de fondo, pero varios de los códigos hex más comunes son los siguientes:
    • blanco: FFFFFF
    • negro: 000000
    • gris: 808080
    • gris claro: D3D3D3
    • azul: 0000FF
    • beige: F5F5DC
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/07\/Hide-a-Link-in-HTML-Step-3-Version-3.jpg\/v4-460px-Hide-a-Link-in-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/07\/Hide-a-Link-in-HTML-Step-3-Version-3.jpg\/v4-728px-Hide-a-Link-in-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Cuando encuentres el enlace que quieres ocultar en el código de tu página web y tengas el código hex del color, puedes cambiar el color de tu enlace. Para hacerlo, usa el siguiente código, e inserta el enlace que quieras ocultar y el código hex del color donde correspondan: [2] [3]
    • <style>
      a:enlace.com {
      color: #(inserta código hex de color aquí);
      }
      a:active {
      color: #(inserta código hex de color aquí);
      }
      a:visited {
      color: #(inserta código hex de color aquí);
      }
      a:hover {
      color: #(inserta código hex de color aquí);
      }
      </style>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a3\/Hide-a-Link-in-HTML-Step-4.jpg\/v4-460px-Hide-a-Link-in-HTML-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a3\/Hide-a-Link-in-HTML-Step-4.jpg\/v4-728px-Hide-a-Link-in-HTML-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Aunque el enlace ya está oculto, tú y otros usuarios puede ubicar el enlace usando la función de "buscar" en tu navegador. Aunque tu enlace sea normal, visto, activo o el cursor esté sobre el enlace, el enlace debe seguir siendo invisible.
    • La función "buscar" puede activarse en la mayoría de los navegadores presionando las teclas Ctrl + F .
    Anuncio
Método 2
Método 2 de 2:

Usar CSS basado en clases

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e3\/Hide-a-Link-in-HTML-Step-5.jpg\/v4-460px-Hide-a-Link-in-HTML-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e3\/Hide-a-Link-in-HTML-Step-5.jpg\/v4-728px-Hide-a-Link-in-HTML-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Puedes hacer esto incluyendo información adicional a la etiqueta de tu enlace. Encuentra la etiqueta del enlace e incluye el código apropiado para el identificador o la clase. El código debe lucir así:
    • class=enlace.com
    • id=enlace.com [4]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a2\/Hide-a-Link-in-HTML-Step-6.jpg\/v4-460px-Hide-a-Link-in-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a2\/Hide-a-Link-in-HTML-Step-6.jpg\/v4-728px-Hide-a-Link-in-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Puedes hacer referencia al nombre que creaste usando un "." para clases o el símbolo de "#" para el identificador. El código debe lucir así:
    • Classes: .enlace.com
    • IDs: #enlace.com
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0a\/Hide-a-Link-in-HTML-Step-7.jpg\/v4-460px-Hide-a-Link-in-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0a\/Hide-a-Link-in-HTML-Step-7.jpg\/v4-728px-Hide-a-Link-in-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ambas funciones tienen el efecto de ocultar el enlace, pero cada función esconde el enlace de forma diferente. Al cambiar la forma en la que aparece a "ninguna", eliminarás el enlace del diseño de la página. [5] Esto puede causar que otros elementos de tu página se muevan si su posición está definida por el enlace. Cambiar la visibilidad a "oculto" esconderá el enlace sin influenciar el diseño de la página. [6] El código en este punto debe lucir simplemente:
    • display: none
    • visibility: hidden
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/Hide-a-Link-in-HTML-Step-8.jpg\/v4-460px-Hide-a-Link-in-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/Hide-a-Link-in-HTML-Step-8.jpg\/v4-728px-Hide-a-Link-in-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si escribes el código mal, pueden ocurrir errores en la página web o puedes cambiar elementos muy importantes en el diseño. El código HTML y CSS final debe lucir así:
    • Código HTML:
      <a href=Link.com
      class=Link.com>Link</a>
    • Código CSS:
      .Link.com {
      display: none;
      }
    Anuncio

Consejos

  • Esto es increíblemente útil si vas a mostrar los enlaces en alguna otra parte con JavaScript, pero no quieres que los usuarios vean que se cargan.
Anuncio

Advertencias

  • Algunas compañías que proveen servicios de motor de búsqueda por Internet ven en el uso de enlaces HTML ocultos para manipular las clasificaciones de búsqueda como una violación a la ética "Webmaster". [7]
Anuncio

wikiHows relacionados

4 formas de agregar un enlace a una imagen
Cómo
hacer una página web en HTML
Cómo
establecer el color de fondo en HTML
Cómo
insertar espacios en HTML
Cómo
ejecutar un archivo HTML en Visual Studio Code
Cómo
cambiar el color de botón en HTML
Cómo
crear una calculadora usando HTML
Cómo crear una línea horizontal en HTML
Cómo
editar archivos HTML
Cómo
centrar una imagen en HTML
Cómo
insertar imágenes con HTML
Cómo
crear un enlace de correo electrónico en HTML
Cómo
hackear una página web con HTML
Cómo
hacer que el texto parpadee en HTML
Anuncio

Referencias

  1. ↑ http://webdesign.about.com/od/css/qt/tiphidecursor.htm
  2. ↑ http://www.w3schools.com/tags/att_body_link.asp
  3. ↑ http://www.w3schools.com/cssref/sel_hover.asp
  4. ↑ http://webdesign.about.com/od/css/qt/tiphidecursor.htm
  5. ↑ http://htmldog.com/techniques/showhide/
  6. ↑ http://webaim.org/techniques/css/invisiblecontent/
  7. ↑ https://support.google.com/webmasters/answer/66353?hl=en

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 23 938 visitas.

¿Te ayudó este artículo?

Anuncio