4.6.1. Enlace al inicio del sitio web
<a href="/">Inicio</a>Al pulsar el enlace anterior desde cualquier página web, se vuelve directamente a la página de inicio, home o página principal del sitio web.
4.6.2. Enlace a un email
<a href="mailto:[email protected]" title="Dirección de email para solicitar más información">
Solicita más información
</a>Al pinchar sobre el enlace anterior, se abre automáticamente el programa de correo electrónico del ordenador del usuario y se establece la dirección de envío al valor indicado después de mailto: La sintaxis es la misma que la de un enlace normal, salvo que se cambia el prefijo http:// por mailto:
La sintaxis de mailto: permite utilizarlo para otros ejemplos más complejos:
<!-- Envío del correo electrónico a varias direcciones a la vez -->
<a href="mailto:[email protected],[email protected]">Solicita más información</a>
<!-- Añadir un "asunto" inicial al correo electrónico -->
<a href="mailto:[email protected]?subject=Solicitud de más información">Solicita más información</a>
<!-- Añadir un texto inicial en el cuerpo del correo electrónico -->
<a href="mailto:[email protected]?body=Estaría interesado en solicitar más información sobre sus productos">Solicita más información</a>Todas las opciones anteriores se pueden combinar entre sí para realizar ejemplos más avanzados. Aunque el uso de mailto: puede parecer una ventaja, su uso está desaconsejado. Si se incluye una dirección de correo electrónico directamente en una página web, es muy probable que en poco tiempo esa dirección de email se encuentre llena de correo electrónico basura o "spam", ya que existen programas automáticos encargados de rastrear sistemáticamente todas las páginas web de Internet para encontrar direcciones de correo electrónico válidas.
La forma de mostrar las direcciones de correo electrónico en las páginas web consiste en incluir la dirección en una imagen o indicarla de forma que solamente los usuarios puedan entenderlo:
<p>La dirección de correo es <strong>nombre (arroba) direccion.com</strong></p>
<p>La dirección de correo es <strong>nombre_arroba_direccion.com</strong></p>
<p>La dirección de correo es <strong>[email protected]</strong></p>
<p>La dirección de correo es <strong>nombre(ARROBA)direccion.com</strong></p>
<p>La dirección de correo es <strong>nombre @ direccion . com</strong></p>4.6.3. Enlace a un archivo FTP
Para enlazar un archivo almacenado en un servidor FTP, la parte del protocolo de la URL debe cambiar de http:// a ftp://:
<a href="ftp://ftp.ejemplo.com/ruta/archivo.zip" title="Archivo comprimido de los contenidos">
Descarga un ZIP con todos los contenidos
</a>4.6.4. Enlazar varias hojas de estilos CSS
<link rel="stylesheet" type="text/css" href="/css/comun.css" />
<link rel="stylesheet" type="text/css" href="/css/secciones.css" />4.6.5. Enlazar hojas de estilos CSS para diferentes medios
<link rel="stylesheet" type="text/css" href="/css/comun.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" />4.6.6. Enlazar el favicon
El favicon o icono para favoritos es el pequeño icono que muestran las páginas en varias partes del navegador. Dependiendo del navegador que se utilice, este icono se muestra en la barra de direcciones, en la barra de título del navegador y/o en el menú de favoritos/marcadores.
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />Aunque en principio la imagen debería ser de tipo .ICO (formato gráfico de los iconos), algunos navegadores soportan favicons en otros formatos gráficos más habituales (como por ejemplo .PNG).
4.6.7. Enlazar un archivo RSS
<link rel="alternate" type="application/rss+xml" title="Resumen de todos los artículos del blog" href="/feed.xml" />4.6.8. Enlazar hojas de estilos, favicon y RSS
En una misma página se pueden incluir varias etiquetas <link>, por lo que es habitual que las páginas enlacen hojas de estilos, favicon y archivos RSS de forma conjunta:
<head>
...
<link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" />
<style type="text/css" media="screen,projection">
@import '/css/main.css';
</style>
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<link rel="alternate" type="application/rss+xml" title="Resumen de todos los artículos del blog" href="/feed.xml" />
...
</head>4.6.9. Indicar que existe una versión de la página en otro idioma
<head>
<title>English tutorial</title>
<link lang="es" xml:lang="es" title="El tutorial en español" type="text/html" rel="alternate" hreflang="es" href="http://www.ejemplo.com/tutorial/espanol.html" />
</head>4.6.10. Indicar que existe una versión de la página preparada para imprimir
<head>
<link media="print" title="El tutorial en PDF" type="application/pdf" rel="alternate" href="http://www.ejemplo.com/tutorial/documento.pdf" />
</head>4.6.11. Indicar que existe una página que es índice de la página actual
<head>
<title>Tutorial – Capítulo 5</title>
<link rel="start" title="El índice del tutorial" type="text/html" href="http://www.ejemplo.com/tutorial/indice.html" />
</head>Ejercicio 7
Enlazar el favicon en todas las páginas del ejercicio 6 y añadir todos los atributos posibles a los enlaces.