HTML. Enlaces en etiqueta link

Me pidieron ayuda para el uso de la etiqueta link de HTML. Espero que esto sirva para esa persona y para cuantos lo necesiten.

La etiqueta link es muy útil en las páginas web, ya que nos permite indicar archivos que tienen alguna relación con la página actual (como puede ser el ícono de la página, una hoja de estilos, la referencia a una página anterior o siguiente, etc.). Más información en W3Schools.

Por ejemplo, para enlazar una hoja de estilos escribimos esto:

<link rel="stylesheet" type="text/css" href="style.css" />

O para enlazar un ícono:

<link rel="shortcut icon" type="image/x-icon" href="style.css" />

Cabe hacer la aclaración de que en el caso de íconos, es preferible usar únicamente archivos de ese tipo (con extensión .ico). Algunos navegadores soportan usar una imagen, pero no todos, ni en todas sus versiones.

La etiqueta link puede ir únicamente dentro de la etiqueta head de nuestra página, y podemos tener tantas como necesitemos.

Rutas absolutas y relativas

Algo muy importante a tomar en cuenta al relacionar archivos (sea en una etiqueta link, a, script, object, img, etc.), es que debemos ser cuidadosos con la ruta donde se encuentra el archivo enlazado. Para las explicaciones usaré el siguiente ejemplo:

Estructura de archivos

Ruta absoluta

Es la ruta desde la raíz del sitio hasta el archivo. En este ejemplo sería http://www.misitio.com/. Aquí le indicamos al navegador un punto inicial (que sería la carpeta principal de nuestro sitio) hacia el archivo que necesitamos enlazar.

Se puede indicar la raíz de un sitio de dos maneras:

  • http://www.misitio.com/ Indicando la dirección completa, incluyendo http://. Útil cuando hacemos referencia a un elemento fuera de nuestro sitio:
    <a href="http://www.google.com/intl/en/about/corporate/index.html">Acerca de Google</a>

    Se puede usar también para enlazar archivos dentro de nuestro mismo sitio, pero es más común utilizar las otras opciones explicadas en este artículo.

  • / Una diagonal antes de una ruta hace referencia a la raíz. Útil cuando vamos a enlazar a un archivo en nuestro sitio:
    <link rel="stylesheet" href="/recursos/estilos1.css"/>

    Independientemente de dónde se encuentre la página que lleva esta etiqueta link, siempre la referencia se hará al archivo estilos1.css de la carpeta recursos del sitio.

Ruta relativa

Su nombre se refiere a que la ruta hacia el archivo enlazado será relativa al archivo que lo está enlazando. Es decirle al navegador que vaya del punto A (la página actual) al punto B (el archivo enlazado).

La ruta relativa se define usando los símbolos / para indicar una carpeta dentro de una ubicación, y .. para indicar una carpeta anterior a la actual.

Si a pagina.html le quiero indicar el ícono icono.ico, hago lo siguiente:

<link rel="shortcut icon" type="image/x-icon" href="icono.ico"/>

El ícono está en la misma carpeta de la página, así que únicamente le digo el nombre del archivo.

La complejidad (y no es que sea mucha) viene cuando el archivo enlazado no está en la misma carpeta. Si a pagina.html quiero enlazarle la hoja de estilos estilos2.css, debo indicarle que ésta se encuentra en otra carpeta:

<link rel="stylesheet" href="recursos2/estilos2.css"/>

pagina.html y recursos2 están dentro de una misma carpeta, así que indico el nombre de la carpeta como lo hice con el ícono. Dentro de recursos2 está mi hoja de estilos, así que los separo con una diagonal para indicarle que la primera era una carpeta.

Ahora bien, si quiero enlazar la hoja de estilos estilos1.css a mi página usando una ruta relativa (en vez de la ruta absoluta que ya vimos anteriormente), uso la siguiente línea:

<link rel="stylesheet" href="../recursos/estilos2.css"/>

pagina.html está dentro de una carpeta paginas. Junto a esta carpeta está la llamada recursos, ambas dentro de mi carpeta raíz. Y dentro de la carpeta de recursos se encuentra la hoja de estilos. Usando .., como ya lo expliqué, le indico al navegador que debe buscar una carpeta antes, es decir, en la carpeta padre de paginas. Dentro esa carpeta padre, debe buscar la carpeta recursos, dentro de la cual está finalmente mi hoja de estilos.

Anuncios

Autor: Israel Muñoz

Soy desarrollador de software, principalmente dedicado a desarrollo de aplicaciones web. Especializado en .NET full-stack, además de tecnologías front-end HTML, CSS y JavaScript. A ratos, profesor de materias de informática. Me gusta mucho todo lo que tiene que ver con las tecnologías nuevas para desarrollo web, y el diseño de sitios y aplicaciones.

Un comentario en “HTML. Enlaces en etiqueta link”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s