Bien, ya vimos los enlaces más comunes, ahora toca ver otro tipo de enlaces habituales:
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.
Enlace a un email – mailto
<a href="mailto:nombre@direccion.com" 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:nombre@direccion.com,otro_nombre@direccion.com">Solicita más información</a> <!-- Añadir un "asunto" inicial al correo electrónico --> <a href="mailto:nombre@direccion.com?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:nombre@direccion.com?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>nombreQUITAESTO@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>nombre @ direccion . com</strong></p>
Enlace a un teléfono – tel
<a href="tel:942033303">942-033-303</a>
- La etiqueta href es la que se utiliza para indicar al navegador que se trata de un enlace.
- Con =»tel:» le indicamos que se trata de un enlace de llamada.
- A continuación, ponemos el número de teléfono sin espacios y entre comillas
- Entre los símbolos > < podemos colocar cualquier texto que queramos, ya sea el número de teléfono o mensajes de llamada a la acción como «Llama aquí» «Clic para llamar» «Contacta con nosotros»
En caso de que dispongamos una o varias extensiones para un mismo número las podemos agregar indicando con la letra «p» justo al final del número de teléfono seguido del número de la extensión, quedaría algo como esto:
<a href="tel:942033303p45">Llámanos</a>
Lo que hace esta funcionalidad es: Primero marca el número de teléfono indicado justo después de la etiqueta tel y después espera un segundo aproximadamente y luego marca la extensión.
Si queremos que en lugar de un segundo lo que espere es un tono, tenemos que sustituir la p por una w.
Para añadir un numero internacional tanto en un código html o en un botón a href callto lo podemos hacer de una manera bastante sencilla, simplemente añadiendo al principio de la etiqueta el símbolo + seguido del prefijo internacional.
<a href="tel:+34942033303">Llámanos</a>
Enlace a un archivo FTP – 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>
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" />
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" />
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).
Enlazar un archivo RSS
<link rel="alternate" type="application/rss+xml" title="Resumen de todos los artículos del blog" href="/feed.xml" />
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>
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>
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>
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>
Ahora veremos cómo enlazar el favicom a todas las urls
Página principal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <title>Mi Sitio</title> </head> <body> <h1>Mi Sitio</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere justo. Nam vel neque. Proin sagittis mauris sit amet nisl. Sed ipsum. Aliquam vitae justo.</p> <h2>Ultimos proyectos</h2> <p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et euismod enim odio sit amet erat. Aliquam dui ligula, porttitor eu, facilisis vitae, ornare sed, tortor.</p> <p><a href="portfolio/indice.html" title="Ultimos proyectos realizados por Mi Sitio">Acceder a los ultimos proyectos de Mi Sitio</a></p> </body> </html>
Página principal del portfolio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <title>Mi Sitio</title> </head> <body> <p><a href="portfolio/indice.html" title="Página principal de Mi Sitio" rel="index">Volver a la pagina principal</a></p> <h1>Ultimos proyectos</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere justo. Nam vel neque.</p> <h3>Proyecto 1</h3> <p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et euismod enim odio sit amet erat.</p> <p><a href="../imagenes/proyecto1.png" title="Imagen del Proyecto 1" type="image/png">Ver imagen del Proyecto 1</a></p> <h3>Proyecto 2</h3> <p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et euismod enim odio sit amet erat.</p> <p><a href="../imagenes/proyecto2.png" title="Imagen del Proyecto 2" type="image/png">Ver imagen del Proyecto 2</a></p> </body> </html>
