Curso de Html. Crear vínculos en html.

Me imagino que la mayoria de vosotros ya estará familiarizado con los vínculos, al menos sabrán de su existencia, ya que el simple hecho de navegar por la red, es utilizar vínculo tras vínculo.

Se puede decir con toda seguridad, que el vínculo es el alma de la red, ya que da cierta interactividad a las páginas web y nos permite crear una super red global. los vínculos nos permiten enlazan con páginas exteriores a nuestra web, con páginas internas de nuestra web, con correo electrónico, con videos, con todo prácticamente.

¿Cómo podemos crear un vínculo?

Para crear un vínculo o enlace comunmente llamado, utilizaremos la etiqueta <a> y su correspondiente etiqueta de cierre </a> . Su síntesis es la siguiente:

<a href=»ruta donde esta el destino»> Nombre que se visualizará donde coloquemos el enlace al destino.</a>

La etiqueta <a> indica al navegador que queremos enlazar con algo.

href (referencia de hipertexto) se utiliza para indicar mediante una ruta, la ubicación del destino. El resto esta más o menos claro. Lo mejor es poner un ejemplo clarificador:

Imaginaros que estais creando un documento html para subirlo a la red, que trata del oso polar, y en un determinado punto o apartado de vuestro documento, quereis hacer referencia a lo que dice Wikipedia sobre este mamífero.

Por ejemplo de esta forma:

Según wikipedia el Oso polar u oso blanco (Ursus maritimus, antes Thalarctos maritimus) es una especie de mamífero carnívoro de la familia de los osos (Ursidae)….etc etc.

Como es lógico el nombre del enlace sería Wikipedia. Lo hariamos así:

Según <a href=»https://es.wikipedia.org/wiki/Oso_polar»>wikipedia</a> el Oso polar u oso blanco….

En href he puesto la dirección o ruta donde se encuentra la página de Wikipedia que trata del tema buscado y que previamente ya la habiamos localizado, de lo contrario, si no ponemos la ruta exacta de destino, esto no valdría para nada.

Podemos comprobar el resultado de esta síntexis:

Según wikipedia el Oso polar u oso blanco….

El aspecto de una palabra vinculada, vínculo o enlace como querais llamarlo, como el anterior, no es este, normalmente aparecen subrrallados en rojo o azul por defecto. Yo lo he maqueado un poco en gris, para que quede más claro. Podeis comprobar como aparece una mano encima de la palabra «wikipedia» sustituyendo la flecha de cursor o el puntero que tengais configurado en vuestro ratón. Esto es signo inequívoco de que se trata de un enlace, de los cuales estareis ya más que familiarizados. Sin embargo aunque la mayoria de la gente sabe detectar un enlace, el usuario normal de internet no se preocupa de como se crea un enlace y de donde sale, así que me parece más que acertado incluir este tema en el curso.

Incluyendo el atributo target en los enlaces.

El atributo target, Hace que el destino del enlace se abra en una nueva ventana, sin tener que cerrar o dejar de ver la ventana actual donde esta situado dicho enlace.

Este atributo lo teneis que incorporar de la siguiente manera para que funcione:

<a href=»https://es.wikipedia.org/wiki/Oso_polar» target=»_blank»>wikipedia</a>

Cuando se trabaja con vínculos o enlaces, para organizar un sitio web, es decir, lo normal o lo habitual de cualquier sitio publicado en la red, lo que hay que tener siempre presente es la buena o muy buena organización con la que debemos crear el sitio, ya que en teoria un sitio empieza siendo medianamente grande y con el tiempo llega a convertirse en muy grande y con muchas páginas web enlazadas. Por tanto la buena organización en carpetas es mas que aconsejable, para evitar liarnos o equivocarnos.

¿Como poner las rutas correctamente en los enlaces?

Ejemplo: Imaginar que estamos creando un sitio web llamado Misitio.com almacenado en una carpeta raiz llamada Misitio, que contiene dos carpetas más llamadas «Documentos» e «Imágenes» y un archivo llamado index.html. La carpeta Documentos, tiene dos documentos, uno llamado estadistica.html y otro llamado poblacion.html. La otra carpeta Imágenes contiene un archivo llamado imagen.gif. Según lo anterior, las rutas a estas carpetas y archivos quedarian así:

Vamos a generar unos cuantos enlaces, para que veais como se deben hacer.

Imaginaros que queremos crear desde la página estadistica.html, un enlace a poblacion.html. Pues bién, como están situados en la misma carpeta la ruta quedaría así:

<a href=»población.html»>Número de Habit. de Mallorca.</a>

Lo mismo sucedería si quisiesemos enlazar desde población.html a estadistica.html, ya que ambos son páginas o archivos de la carpeta Documentos y el enlace es interno en esa carpeta.

Si quisiesemos enlazar desde el archivo index.html a la página estadistica.html lo hariamos así:

<a href=»Documentos/estadistica.html»>Estadisticas de Población.</a>. La ruta ha población.html desde index.html seria también así:

<a href=»Documentos/población.html»>Habitantes.</a>


Ahora bién, ¿Como hacemos para crear un enlace en sentido contrario, es decir, crear un enlace desde estadistica.html o población html a el archivo index.html?. Muy sencillo, para subir a un nivel superior o raiz del archivo, utilizamos el escalador especial ../
Para los que conocieron o saben un poco del sistema operativo ms-dos, les sonará un poco estos dos puntos ../ ya que son similares a este comando de Ms-dos cd.., ambos escalan a la carpeta superior. Dado esto, la ruta quedaria así:

<a href=»../index.html»>Indice de la web.</a>

Si queremos utilizar el archivo imagen.gif, en el archivo poblacion.html o estadistica.html, para poner una fotografia por ejemplo, la ruta sería esta:

<a href=»../Imagenes/imagen.gif» Fotografia cualquiera.</a>

Si tubiesemos dentro de la carpeta Documentos otra carpeta o subcarpeta por ejemplo llamada Generales y dentro de esta estubiesen los dos archivos html (estadistica.html y poblacion.html), para llegar hasta index.html escribiriamos dos veces el signo escalador aprendido, la ruta quedaría así:

<a href=»../../index.html»>Indice de la web.</a>, es decir cada signo equivale a una carpeta escalada hacia arriba. Y se pueden poner tantos como se quieran, aunque ya os dije que cuantas más carpetas tengais o más niveles haya en un sitio, más propensión habrá a equivocarse.

Convertir imágenes en enlaces.

Se puede convertir imágenes en enlaces si colocamos un elemento <img>, dentro de un <a> o elemento de ancla.

<a href=»pagdestino.html«><img src=»imagenaconvertirenenlace.gif» alt=»¿Como convertir una imagen en un enlace«/></a>

Si hacemos click en cualquier parte de la foto, nos llevará a la parte superior de esta página.
¿Como convertir una imagen en un enlace?.

¿Cómo Añadir marcadores en una página web?

Un marcador no es más que un identificador que ponemos en alguna parte de la página, ya sea en un título o en cualquier otro elemento de html. Se suelen utilizar en páginas de mucho contenido o apartados, junto con un índice encabezando la página. sirva como ejemplo esta misma página. Como podeis comprobar, la página empieza con un pequeño índice con cinco apartados en forma de enlace, que nos facilitan el desplazamiento por las distintas secciones del documento. A su vez he incorporado otras marcas («subir»), que nos permiten volver a la cabecera de la página y visualizar el indice de nuevo.

A los marcadores o marcas y más concretamente a la información que marcan, se puede acceder desde otra parte de la misma página donde están situados o desde otras páginas, según convenga.

La forma de realizar esta operación es la siguiente:

Se marca con un identificador «id» aquella parte que se quiera marcar, ya sea un párrafo:

<p id=»nombredelamarca»></p>

Un título:

<h1 id=»nombredelamarca»></h1>

Una tabla:

<table id=»nombredelamarca»></table>
etc…

luego desde la ubicación de la página desde donde se quiera llamar a esa marca o desde otra página si se quiere, tendremos que poner el vínculo de la siguiente forma:

<a href=»#nombredelamarca»>pincha</a>

O si llamamos desde otra página exterior, se haría así:

<a href=»rutadecarpetassilashubiese/pagindelamarca.html#nombredelamarca»>pincha</a>

De esta forma, podremos ir desde cualquier página de nuestro sitio web a una parte concreta de cualquier otra página del mismo sitio.

posteriormente, si queremos podemos crear otras marcas de retroceso o que suban a la cabecera de la página, como tengo yo en esta página,el proceso es exactamente igual al descrito, es cuestion de marcar por un lado y vincular por el otro.

¿Te ha gustado? Compártelo.