Continuamos avanzando para alcanzar la finalidad de ser capaces de construir una página web. La semana pasada os hablamos de todo lo relacionado con las imágenes y cómo realizar la inserción de estas en el diseño de la web. Esta semana en el curso de HTML y CSS vamos a hablar de algo muy importante en todas las páginas web: los enlaces.
Antes de meternos con la programación, vamos a hablar un poco de los enlaces. Aunque los hablamos en la introducción al curso HTML son las siglas de HiperText Mark-up Language, que traducido al castellano quedaría como lenguaje dedicado a etiquetas de hipertexto, o lo que es lo mismo, lenguaje dedicado a los enlaces.
Los enlaces podrían ser definidos como el camino que se ha de seguir por la red para poder acceder a una determinada página. Por el momento vamos a empezar con algo sencillo, es decir, los enlaces utilizando texto. Cuando en una página web se publica un enlace, colocándose este en un texto, este se vuelve de color azul y subrayado, indicando que esa parte del texto conduce a ora página. Como se verá más en adelante, los enlaces también pueden ser colocados en otros elementos de la página web.
Al pulsar sobre este texto «resaltado» el comportamiento puede ser doble, bien abriendo una nueva pestaña del navegador para la nueva página a la que vamos a acceder, o bien utilizando la misma en la que nos encontrábamos.
Tipos de enlaces: enlaces internos y enlaces externos
Antes de comenzar con la parte importante de los enlaces y definir su sintaxis, es necesario hacer mención a los dos tipos de enlaces que existen. Basándonos en las páginas web que son referenciadas y que una página web se encuentra localizada en un equipo o host que se encuentra conectado a internet permanentemente, podemos hablar de enlaces internos y enlaces externos. Los enlaces internos son aquellos que hacen referencia a páginas que se encuentran dentro del mismo equipo que la página desde la cual queremos enlazar el contenido. Sin embargo, los enlaces externos son aquellos que enlazan a contenidos que se encuentran localizados en otros host y que como consecuencia, necesitan incluir el dominio web, algo que no sería necesario con los enlaces internos.
Concepto de ruta
Para introducir este concepto nos vamos a ayudar un poco de la estructura de organización que poseen los sistemas operativos. Actualmente, si un usuario quiere organizar sus documentos en un disco duro llevará a cabo la creación de capetas para así conseguir organizar su contenido y mantenerlo ordenado. Algo similar ocurre con el host donde se guarda nuestra página web. Si esta no es muy compleja, la verdad es que no importa mucho la organización. Pero si estamos hablando de una página web formada por más de 100 subpáginas, a la hora de modificar y encontrar un problema puede ser bastante tedioso. Por este motivo, la creación de carpetas para organizar los documentos ayudará a ampliar la página web sin problemas.
Para que lo entendamos, vamos a poner un ejemplo sencillo:
Imaginad que disponemos de una página principal que posee dos páginas más a las que enlaza. Una forma de ordenar el host sería:
/web/paginas/paginaPrincipal/default.html
/web/paginas/paginaRegistro/registro.html
/web/paginas/paginaBusqueda/busqueda.html
De esta forma, disponemos de tres carpetas diferenciadas donde se encuentran nuestras páginas y donde podremos ademas ubicar imágenes o vídeos y cualquier otro tipo de material que sea utilizado, así evitar que sea colocado en un lugar poco apropiado.
Gracias al ejemplo anterior podemos hacer mención a los términos ruta relativa y ruta absoluta. Comenzando por la última se entiende de ruta absoluta cuando esta parte desde /. Sin embargo, una ruta relativa sería considerada a aquella que parte desde una subcarpeta que pertenece a la raíz.
¿Cómo hacer enlaces en texto?
Después de haber tratado los conceptos anteriores, a priori no debería ser complicado crear enlaces utilizando texto. Para ellos tendremos que utilizar la etiqueta <a href=»Enlace»> texto</a>. De esta forma, si queremos crear un enlace que nos rediría a Google y que tenga como texto «Enlace de prueba», el código sería el siguiente:
<a href=»http://www.google.es»>Enlace de prueba</a>
¿Cómo hacer enlaces en imágenes?
En la entrega pasada veíamos cómo se podían introducir imágenes en un documento HTML y que apareciese en el diseño de nuestra página web. Partiendo de que las imágenes de introducían de la siguiente forma:
<img src=»/www/imagenes/prueba.jpg»>
Si queremos que esta imagen posea un enlace que nos lleve a Google tendremos que hacerlo de la siguiente forma:
<a href=»http://www.google.es><img src=»/www/imagenes/prueba.jpg»></a>
Como podéis ver la mecánica es similar al de los enlaces en texto, con la única diferencia de que lugar del texto se introduce el elemento que se desea que posea el enlace, en este caso, la imagen.
Con esto llegamos al final de todo lo que necesitábamos aprender de los enlaces en documentos HTML. En la próxima entrega hablaremos de la creación de tablas en documentos HTML y de todas las posibilidades que existen a la hora aplicarlas un formato.
