Apuntes sobre Html

HTML nunca falla, solo se ve raro.

Creando Enlaces en la Web

Los enlaces, o links, son la esencia del hipertexto, la "H" de HTML. Conectan páginas, recursos, y sitios, permitiendo navegar por la web.
En esta lección aprenderemos a crear enlaces con la etiqueta <a>, usar rutas absolutas y relativas, saltar dentro de una página, y enlazar imágenes o correos.
También veremos cómo enlazar a otros sitios respetando normas de cortesía y derechos de autor.

Creando un enlace básico

Un enlace es un elemento (texto o imagen) que, al hacer clic, lleva a otro lugar. Usa la etiqueta <a> (anchor, ancla):

<a href="https://www.w3.org">W3C</a>

Esto crea un enlace al sitio del W3C, el consorcio que define los estándares HTML. El resultado es:

W3C (ojo ! es un enlace real, si lo clicas te vas de la página !!)

Pasa el cursor sobre el enlace: se convierte en una mano, indicando que es clicable. Al hacer clic (si estás conectado !), el navegador te lleva a https://www.w3.org.

  • Etiqueta <a>: Define el enlace. Requiere una etiqueta de cierre </a>.
  • Atributo href: Especifica la dirección (Hypertext Reference), como una URL o ruta.
  • Texto entre <a> y </a>: Es lo que el usuario ve y cliquea.

Direcciones URL: Absolutas y relativas

Como aprendimos en la lección de rutas, una URL puede ser absoluta o relativa. Esto se aplica a los enlaces con <a>.

URLs absolutas

Una URL absoluta incluye la dirección completa, con protocolo, dominio, y ruta. Por ejemplo:

<a href="https://www.w3.org/MarkUp/Guide/Advanced.html">Guía Avanzada del W3C</a>

Esto apunta a Advanced.html en el servidor w3.org, carpeta /MarkUp/Guide/. Desglosemos:

  • https://: Protocolo (HTTPS es el estándar actual, más seguro que HTTP).
  • www.w3.org: Dominio del servidor (nota:www es opcional en muchas URLs modernas).
  • /MarkUp/Guide/Advanced.html: Ruta al archivo específico.

Cuándo usarlas:

  • Enlaces a sitios externos (otro servidor).
  • Cuando quieres evitar ambigüedades.

URLs relativas

Una URL relativa indica la ubicación respecto al archivo HTML actual, en el mismo servidor. Por ejemplo:

<a href="index.html">Página principal</a>

Si index.html está en la misma carpeta que la página actual, el navegador lo encuentra automáticamente. Otros casos:

  • Subcarpeta:
<a href="pages/excursion.html">Mi excursión</a>

Apunta a excursion.html en la carpeta pages/.

  • Carpeta superior:
<a href="../index.html">Volver al inicio</a>

../ retrocede una carpeta. Por ejemplo, desde /personal/excursion/excursion.html a /index.html.

  • Carpeta transversal:
<a href="../../images/apple.png">Ver imagen</a>

Retrocede dos carpetas y entra en images/.

Cuándo usarlas:

  • Enlaces dentro de tu propio sitio.
  • Más rápidas y portátiles (no dependen del dominio).

Nota: Recuerda la lección de rutas: usa / (sintaxis Unix), no \ (Windows), y respeta mayúsculas/minúsculas (Index.html ≠ index.html).

Enlaces dentro de la misma página

Puedes crear enlaces que salten a una sección específica de la misma página, útil para páginas largas (como manuales o artículos). Necesitas:

  1. Un enlace que apunte a un identificador.
  2. Un destino marcado con ese identificador (en la misma página).

Ejemplo

Para saltar al inicio de esta lección:

<a href="#inicio">Volver arriba</a>

En el destino (por ejemplo, el título de la página):

<h1 id="inicio">Creando Enlaces en la Web</h1>

El enlace lleva al elemento con id="inicio". El # indica que es un anclaje interno.

Usando id vs. name:

  • En HTML5, usa id en cualquier elemento (<h1>, <p>, <div>) para marcar el destino. Es más flexible y sirve como selector CSS.
  • Antes, se usaba <a name="inicio"></a>, pero queda obsoleto. Aún funciona en navegadores antiguos, pero evita usarlo salvo para compatibilidad.
  • Si usas ambos, id y name deben tener el mismo valor (por ejemplo, <a id="inicio" name="inicio"></a>).

Ejemplo con name (para compatibilidad):

<a href="#seccion1">Ir a la sección</a>
...
<a name="seccion1"></a>
<h2>Sección 1</h2>

Enlaces a secciones de otra página

Puedes combinar una URL con un anclaje:

<a href="https://www.example.com/manual.html#capitulo2">Capítulo 2</a>

Esto lleva a manual.html, sección con id="capitulo2". El ancla de destino debe existir en la página externa.

Imágenes como enlaces

En lugar de texto, una imagen puede ser el enlace. Por ejemplo:

<a href="https://www.apache.org">
  <img src="images/logo.png" alt="Logo de Apache" width="100" height="50" style="border: none;">
</a>

Esto crea una imagen clicable que lleva a apache.org.

Notas:

  • Atributo alt: Obligatorio para accesibilidad, describe la imagen.
  • Borde: Los navegadores añaden un borde a imágenes enlazadas. Usa style="border: none;" para quitarlo (el atributo border="0" está obsoleto).
  • Ruta: Conecta con la lección de rutas (images/logo.png es relativa).

Ejemplo en contexto:

<p>Visita el sitio de Apache:</p>
<a href="https://www.apache.org">
  <img src="images/logo.png" alt="Logo de Apache" style="border: none;">
</a>

Otros tipos de enlaces: enlaces de correo (mailto:)

Los enlaces no solo conectan páginas web. Aquí hay otros usos:

Crea un enlace que abre el cliente de correo del usuario:

<a href="mailto:contacto@example.com">Contáctame</a>

Al hacer clic, se abre un formulario de correo con contacto@example.com como destinatario. Puedes añadir parámetros:

<a href="mailto:contacto@example.com?subject=Consulta%20sobre%20HTML&cc=soporte@example.com">Enviar consulta</a>
  • ?subject=: Define el asunto (usa %20 para espacios).
  • &cc=: Añade copia a otro correo.

Nota: Depende del cliente de correo del usuario (por ejemplo, Outlook, Gmail). Algunos dispositivos móviles pueden no soportarlo.

Enlaces a archivos

Enlaza a un archivo para descargar:

<a href="files/documento.zip" download="archivo zip" >Descargar archivo</a>
  • Usa rutas relativas (files/documento.zip) o absolutas.
  • Asegúrate de que el archivo esté en el servidor.
  • Formatos comunes: ZIP, PDF, MP3, etc.

Enlaces a servidores FTP (menos común hoy en día)

Antes, se usaban enlaces FTP para descargas:

<a href="ftp://ftp.example.com/files/programa.exe">Descargar programa</a>

Hoy, HTTPS es preferido para descargas. Usa FTP solo si es necesario, y verifica que el servidor lo soporte.

Enlaces a sitios externos y cortesía

Es totalmente legítimo enlazar a páginas de otros sitios; no necesitas permiso, ya que los enlaces son la base de la web. Sin embargo:

  • Cortesía: Algunos sitios piden enlazar a páginas específicas (por ejemplo, la página principal). Respeta esas instrucciones si las indican.
  • Derechos de autor: Evita enlazar directamente a recursos privados (como imágenes) sin permiso (hotlinking). Usa recursos propios o con licencias abiertas (por ejemplo, Creative Commons).
  • Cita la fuente: Si enlazas contenido de otro sitio, menciona al autor o sitio por ética.

Ejemplo:

<a href="https://www.w3.org">Sitio oficial del W3C</a>

Abrir enlaces en una nueva ventana

Por defecto, un enlace reemplaza la página actual. Para abrirlo en una nueva pestaña/ventana, usa target="_blank":

<a href="https://www.w3.org" target="_blank">W3C (nueva pestaña)</a>

Advertencias:

  • Accesibilidad: Informa a los usuarios que el enlace abre una nueva pestaña (por ejemplo, con texto o un ícono). Sin esto, puede desorientar.
  • Uso excesivo: Evita abusar de target="_blank", ya que puede molestar a los usuarios o parecer intrusivo.
  • Frames: Históricamente, target se usaba con frames (marcos). En HTML5, es válido sin frames, pero úsalo con moderación.
  • Es recomendable usar rel="noopener noreferrer" junto a target="_blank" para mejorar la seguridad y evitar problemas de rendimiento. Esto previene que la nueva página acceda a la página original a través de JavaScript. Si usas noreferrer, no se envía junto a la petición del recurso el header del solicitante (tu). noopener evita que la página de destino pueda ejecutar código malicioso o sencillamente, ralentizar la página de origen, si ejecuta javascript complejo,

Ejemplo accesible:

<a href="https://www.w3.org" target="_blank">W3C (abre en nueva pestaña)</a>

Ejemplo completo

Aquí tienes una página que combina enlaces de todo tipo, usando la estructura de carpetas de la lección de rutas:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi página de enlaces</title>
</head>
<body>
  <!-- Título principal -->
  <h1 id="inicio">Mi página de enlaces</h1>

  <p>Bienvenidos a mi sitio. Explora los siguientes enlaces:</p>

  <!-- Enlace absoluto -->
  <p>Visita el <a href="https://www.w3.org">sitio del W3C</a> para aprender más sobre HTML.</p>

  <!-- Enlace relativo -->
  <p>Lee sobre mi <a href="personal/excursion/excursion.html">excursión</a>.</p>

  <!-- Enlace interno -->
  <p><a href="#contacto">Ir a la sección de contacto</a>.</p>

  <!-- Imagen como enlace -->
  <p>Explora Apache:</p>
  <a href="https://www.apache.org">
    <img src="images/logo.png" alt="Logo de Apache" width="100" height="50" style="border: none;">
  </a>

  <!-- Enlace de correo -->
  <h2 id="contacto">Contacto</h2>
  <p>Envíame un correo: <a href="mailto:contacto@example.com?subject=Consulta">Contáctame</a>.</p>

  <!-- Enlace a archivo -->
  <p><a href="files/manual.pdf">Descargar el manual</a>.</p>

  <!-- Volver arriba -->
  <p><a href="#inicio">Volver arriba</a>.</p>

</body>
</html>

Estructura de carpetas:

example.com/
├── index.html
├── images/
│   └── logo.png
├── files/
│   └── manual.pdf
├── personal/
│   └── excursion/
│       └── excursion.html

Guarda este código como index.html. Asegúrate de tener logo.png en images/, manual.pdf en files/, y excursion.html en personal/excursion/. Observa cómo:

  • <h1 id="inicio"> marca el anclaje interno.
  • Los enlaces usan rutas absolutas (https://www.w3.org), relativas (personal/excursion/excursion.html), e internas (#contacto).
  • La imagen enlazada usa style="border: none;" y alt.
  • mailto: abre un correo, y el enlace a manual.pdf permite descargar.

Consejos para enlaces efectivos

  1. Texto descriptivo: Usa textos claros en los enlaces (por ejemplo, "Sitio del W3C" en lugar de "Clic aquí") para accesibilidad y SEO.
  2. Rutas correctas: Verifica rutas relativas/absolutas, mayúsculas/minúsculas, y que los archivos estén en el servidor (ver lección de rutas).
  3. Accesibilidad
    • Incluye alt en imágenes enlazadas.
    • Indica si un enlace abre una nueva pestaña.
    • Evita enlaces vacíos (<a href="#">).
    • usa aria-label para describir enlaces complejos o con iconos.
    • Usa rel="noopener noreferrer" con target="_blank" para seguridad y rendimiento.
    • Hay muchos otros atributos, en los que por su especificidad no vamos a detenermos mucho: tabindex (orden de enfoque de los enlaces mediante tabuldor) lang para especificar el idioma del enlace, title para proporcionar información adicional sobre el enlace, rel="nofollow" si no quieres que los motores de búsqueda sigan el enlace., rel="external" para indicar que el enlace lleva a un sitio externo, etc.
  4. Prueba los enlaces: Abre tu página en un navegador para confirmar que funcionan.
  5. Evita *hotlinking*: No enlaces imágenes de otros sitios sin permiso; usa recursos propios o con licencia.
  6. Cortesía: Respeta las instrucciones de los sitios enlazados (por ejemplo, enlazar a su página principal).

Recapitulación

En esta lección hemos aprendido:

  • Crear enlaces con <a> y href para conectar páginas y recursos.
  • Usar URLs absolutas (para sitios externos) y relativas (dentro de tu sitio).
  • Saltar a secciones de una página con anclajes (id o name).
  • Enlazar imágenes con <img> dentro de <a>, usando alt y CSS para bordes.
  • Crear enlaces mailto:, a archivos, y (menos común) a FTP.
  • Respetar derechos de autor y normas de cortesía al enlazar sitios externos.
  • Usar target="_blank" con cuidado, priorizando accesibilidad.

En la próxima sección, exploraremos más elementos HTML, como tablas o formularios.

TOP