Curso Diseño Web II - Enlaces

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero.

En la primera entrada ¿Cómo funciona la Web? presentamos brevemente el idioma oficial de la Web, HTML. Hablamos de como las etiquetas HTML rodean a texto creando lo que llamamos elementos. HTML es una abreviatura de HyperText Markup Language. La parte ML (Markup Language) hace referencia al etiquetado de nuestro contenido para dar información semántica. Mientras que la parte HT (HyperText) hace referencia a la capacidad de los archivos HTML para enlazarse entre sí. Esta característica es sin duda la responsable del crecimiento exponencial de Internet, al permitirnos conectar grandes cantidades de información entre sí.

El siguiente extracto de código ilustra como se crea un enlace en HTML:

vea las <a href="indicaciones.html"> indicaciones</a> para llegar sin problemas.

El texto que aparece por defecto subrayado, en color azul y sobre el cual podemos pulsar es el texto que aparece entre la etiqueta de inicio y la etiqueta de cierre. En este caso indicaciones. La referencia que queremos enlazar la indicamos en el atributo href. Un atributo aparece dentro de la etiqueta de apertura y siempre sigue la misma nomenclatura (nombre, signo igual y valor entrecomillado). En el ejemplo decimos que queremos cargar el archivo indicaciones.html si el usuario pulsa en el enlace. La siguiente imagen muestra la estructura de un sitio Web compuesto por varias páginas HTML y varias imágenes. Añadiendo enlaces podemos saltar de archivo a archivo.

Normalmente nos ayudamos de directorios para estructurar nuestros portales y ser capaces de mantener éstos de un modo más fácil. Es habitual crear directorios de imágenes tal y como se muestra en la siguiente imagen:

Los cambios en la organización de nuestros portales requieren a menudo el uso de caminos relativos. Por caminos relativos denominamos a la cadena de caracteres que usamos antes del nombre del recurso para describir los saltos en la estructura del portal que se necesitan para llegar a otro recurso. Del mismo modo que cuando viajamos en el coche necesitamos calcular nuestras rutas teniendo en cuenta el punto de inicio y el punto de destino, HTML tiene en cuenta desde el archivo donde colocamos nuestro enlace y el archivo que queremos enlazar para calcular el camino relativo.

Por ejemplo, si queremos enlazar la página de inicio de nuestro portal (index.html) desde la página indicaciones.html nuestro enlace sería:

<a href="?../index.html"?>Volver a la página de inicio</a>

Si queremos enlazar la imagen margarita.jpg desde el archivo bebidas.html tal y como se muestra en el siguiente gráfico, el elemento imagen en HTML sería:

<img src="../imagenes/margarita.jpg" />

Resumen

• Cuando quiera enlazar una página con otra, use el elemento <a>.
• El atributo href del elemento <a> especifica el destino del enlace.
• El contenido del elemento <a> es la etiqueta del enlace. La etiqueta es lo que se ve en la página Web. Por defecto, está subrayado para indicar que se puede pulsar en él.
• Puede usar palabras o imágenes como la etiquetas de un enlace.
• Cuando pulsa en un enlace, el navegador carga la página Web que esta especificada en el atributo href.
• Puede enlazar a un archivo en el mismo directorio, o a archivos en otros directorios.
• Una dirección relativa es un enlace que apunta a otro archivo en su portal Web relativo a la página Web desde la que se enlaza. Como en un mapa, el itinerario hacia el destino depende del punto de origen.
• Use .. para enlazar a un archivo que esta en un directorio más arriba que el archivo desde el que se enlaza.
• .. significa directorio padre
• Recuerde separar las partes de su dirección con el carácter /
• Cuando la dirección hacia un imagen es incorrecto, verá el icono de una imagen rota en su página Web.
• No use espacios en los nombres de sus archivos y directorios de su página Web.
• Es una buena idea organizar los archivos de su página Web al principio del proceso de construcción del portal, de modo que no tenga que actualizar las direcciones más tarde cuando el portal crezca.
• Hay muchos modos de organizar un portal Web, como lo haga depende de usted.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, links