Enlaces en html
Los enlaces en HTML permiten conectar diferentes recursos en la web, como páginas web, archivos, imágenes o
incluso secciones dentro de la misma página. Estos enlaces se crean utilizando la etiqueta
<a>, también conocida como ancla. Mediante el atributo href, se define la
dirección del recurso al que se desea enlazar.
Los enlaces son fundamentales para la navegación en la web, ya que facilitan la interacción del usuario con
otros sitios o contenido relacionado. Además, los enlaces pueden abrirse en la misma ventana o en una nueva,
dependiendo de cómo se configuren con atributos como target="_blank".
...
Vinculos en html, hipervinculos
Los vínculos en HTML, también conocidos como hipervínculos, permiten conectar diferentes documentos, páginas o recursos en la web. Se utilizan principalmente para la navegación entre diferentes secciones de un sitio o para enlazar a otros sitios web. Estos enlaces son esenciales para la estructura y funcionalidad de la web, ya que proporcionan a los usuarios la posibilidad de moverse entre diferentes contenidos o recursos. Además, los hipervínculos pueden conectar a archivos multimedia, correos electrónicos o ubicaciones específicas dentro de la misma página.
Enlaces sintaxis
La sintaxis de los enlaces en HTML se construye utilizando la etiqueta <a> (ancla),
que es responsable de crear vínculos. El atributo principal de la etiqueta es href, que
define la URL o dirección a la que apunta el enlace. El contenido del enlace, que se coloca entre las
etiquetas de apertura y cierre <a>, puede ser texto o elementos como imágenes.
Opcionalmente, se pueden usar otros atributos, como target="_blank", para definir cómo se
abrirá el enlace, como en una nueva pestaña o ventana.
Sintaxis
<a href="url">link text</a>
Ejemplo
Código en una caja
Código del ejemplo
<a href="https://frioyelectronica.blogspot.com.com/">Visit FrioyElectronica!</a>
Presentación de los enlaces
La presentación de los enlaces en HTML está determinada en gran parte por las hojas de estilo CSS. De manera predeterminada, los enlaces se muestran subrayados y en color azul, lo que ayuda a los usuarios a identificarlos fácilmente. Sin embargo, este estilo puede modificarse utilizando propiedades CSS como color, text-decoration, y font-style. Además, se pueden definir estilos diferentes para los diferentes estados de un enlace, como hover (cuando el usuario pasa el cursor por encima), active (cuando el enlace es activado), o visited (cuando el enlace ya ha sido visitado).
Ejemplo de Estilos de Enlaces
Código en una caja
Código del ejemplo
<div class="bg-primary p-3 border rounded mt-3">
<h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
<div class="bg-white p-3">
<p><a href="#" style="color: red; text-decoration: none;">Enlace sin subrayado</a></p>
<p><a href="#" style="color: blue; text-decoration: underline;">Enlace subrayado</a></p>
<p><a href="#" style="color: green; text-decoration: none;">Enlace con color cambiado al pasar el cursor</a></p>
<p><a href="#" style="color: purple; text-decoration: none;">Enlace visitado</a></p>
<p><a href="#" style="color: orange; text-decoration: none;">Enlace activo</a></p>
</div>
</div>
Enlaces: Atributos del destino
De forma predeterminada, la página vinculada se mostrará en la ventana del navegador actual. Para cambiar esto, debe especificar otro objetivo para el enlace.
El atributo target especifica dónde abrir el documento vinculado. Los valores posibles para el atributo target son:
_self- Por defecto. Abre el documento en la misma ventana/pestaña que se hizo clic._blank- Abre el documento en una nueva ventana o pestaña._parent- Abre el documento en el marco padre (si se está utilizando un marco)._top- Abre el documento en toda la ventana del navegador, reemplazando cualquier marco.
Además del atributo target, otros atributos como rel pueden proporcionar más información sobre la relación entre la página enlazada y la actual. Por ejemplo:
rel="noopener"- Evita que la nueva página acceda a la página original a través de JavaScript.rel="nofollow"- Indica a los motores de búsqueda que no sigan el enlace.
Ejemplo
target="_self" → Enlace en la misma ventana
target="_blank" → Enlace en una nueva ventana o pestaña
target="_parent" → Enlace en el marco padre
target="_top" → Enlace en toda la ventana del navegador
target="_blank" con rel="noopener" → Enlace con seguridad adicional
target="_blank" con rel="nofollow" → Enlace con indicación de no seguir para SEO
Código en una caja
Código del ejemplo
<div class="bg-primary p-3 border rounded mt-3">
<h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
<div class="bg-white p-3">
<p><a href="https://www.example.com" target="_self">target="_self" → Enlace en la misma ventana</a></p>
<p><a href="https://www.example.com" target="_blank">target="_blank" → Enlace en una nueva ventana o pestaña</a></p>
<p><a href="https://www.example.com" target="_parent">target="_parent" → Enlace en el marco padre</a></p>
<p><a href="https://www.example.com" target="_top">target="_top" → Enlace en toda la ventana del navegador</a></p>
<p><a href="https://www.example.com" target="_blank" rel="noopener">target="_blank" con rel="noopener" → Enlace con seguridad adicional</a></p>
<p><a href="https://www.example.com" target="_blank" rel="nofollow">target="_blank" con rel="nofollow" → Enlace con indicación de no seguir para SEO</a></p>
</div>
</div>
URL absolutas frente a URL relativas
En HTML, los enlaces pueden usar URL absolutas o relativas para definir la dirección del recurso al que
se desea acceder. Una URL absoluta incluye el protocolo, el dominio y la ruta completa al recurso, como
https://www.ejemplo.com/pagina.html. Esto significa que el enlace funcionará
independientemente de dónde se encuentre el archivo HTML. Por otro lado, una URL relativa proporciona
una ruta en relación con la ubicación actual del archivo HTML. Por ejemplo,
/carpeta/pagina.html o simplemente pagina.html enlazarán a un recurso en la
misma estructura de directorios, lo que es útil cuando se trabaja en sitios locales o con estructuras de
carpetas organizadas.
Ejemplo
Enlace con URL relativa (archivo en el mismo directorio)
Código en una caja
Código del ejemplo
<p><a href="https://www.ejemplo.com/pagina.html">Enlace con URL absoluta</a></p>
<div class="bg-light p-2 border rounded mb-3">
<p><a href="https://www.ejemplo.com/pagina.html">Enlace con URL absoluta</a></p>
</div>
<p><a href="/carpeta/pagina.html">Enlace con URL relativa</a></p>
<div class="bg-light p-2 border rounded mb-3">
<p><a href="/carpeta/pagina.html">Enlace con URL relativa</a></p>
</div>
<p><a href="pagina.html">Enlace con URL relativa (archivo en el mismo directorio)</a></p>
<div class="bg-light p-2 border rounded">
<p><a href="pagina.html">Enlace con URL relativa (archivo en el mismo directorio)</a></p>
Utilice una imagen como vínculo
En HTML, es posible usar una imagen como enlace para redirigir a los usuarios a otra página o recurso al hacer clic en la imagen. Para ello, se utiliza la etiqueta <a> (ancla) combinada con la etiqueta <img>. El atributo href dentro de la etiqueta <a> define la URL del destino del enlace, mientras que la etiqueta <img> dentro del enlace especifica la fuente de la imagen que actuará como vínculo. Este enfoque es útil para crear botones visuales o gráficos interactivos que mejoren la experiencia de usuario.
Ejemplo
Código en una caja
Código del ejemplo
<p><a href="https://Frioyelectronica.blogspot.com"><img src="Frioyelectronica.jpg" alt="frioyelectronica" width="200"></a></p>
Enlace a una dirección email
En HTML, es posible crear un enlace que permita a los usuarios enviar un correo electrónico directamente desde su cliente de correo. Para hacerlo, se utiliza la etiqueta <a> con el atributo href, precedido por mailto: seguido de la dirección de correo electrónico. Al hacer clic en el enlace, se abrirá automáticamente el programa de correo predeterminado del usuario con el campo Para (To) rellenado con la dirección especificada. Esta funcionalidad es útil para facilitar el contacto a través de un clic.
Código en una caja
Código del ejemplo
<p><a href="mailto:contacto@ejemplo.com">Enviar un correo a contacto@ejemplo.com</a></p>
Button como enlace
En HTML, es posible utilizar un botón como un enlace para redirigir a los usuarios a una página web o a una URL específica. Esto se logra combinando la etiqueta <button> con un evento de JavaScript o utilizando la etiqueta <a> con el atributo role="button" para estilizar el enlace como un botón. Al hacer clic en el botón, se puede redirigir a los usuarios a la URL deseada, ofreciendo una alternativa visualmente atractiva y accesible para la navegación en la web.
Ejemplo
Código en una caja
Código del ejemplo
<a href="https://frioyelectronica.blogspot.com" role="button" class="btn btn-primary">Visitar Frío y Electrónica</a>
Crear marcadores
Los marcadores en HTML, también conocidos como anclas, permiten a los usuarios navegar a una ubicación específica dentro de una página web. Esto se realiza mediante el uso de la etiqueta <a> con un atributo id en el destino y un atributo href en el enlace que apunta a ese identificador. Al hacer clic en un enlace de marcador, el navegador se desplaza automáticamente a la sección designada dentro de la misma página, mejorando la usabilidad y facilitando la navegación en documentos largos o complejos.
Ejemplo
Sección 2
¡Has llegado a la Sección 2!
Código en una caja
Código del ejemplo
<p><a href="#seccion2">Ir a la Sección 2</a></p>
<div style="margin-top:1000px;" id="seccion2">
<h4>Sección 2</h4>
<p>¡Has llegado a la Sección 2!</p>
</div>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias