En esta nueva entrega del curso de HTML voy a tratar el tema de los enlaces. Los enlaces pueden ser de varios tipos pero todos ellos tiene una característica en común y es que nos llevan a otra parte desde la pagina en la cual esta el enlace. Los
La etiqueta que sirve para hacer enlaces en HTML es “a” y la sintaxis general es la siguiente:
<a href="destino">Contenido</a>1 <ahref="destino">Contenido</a>
En la sintaxis podemos ver como abrimos la etiqueta “a” seguido del “href” que es donde le indicamos el enlace que vamos a abrir al pinchar en “Contenido”, que puede ser un texto o una imagen y, finalmente, cerramos “a”.
Ahora vamos a ver los diferentes tipos de enlaces y como usarlos, los primeros que vamos a usar son los enlaces internos, que son unos enlaces que nos van a llevar a otra parte de la misma pagina. Este tipo de enlaces son muy útiles cuando queremos hacer una pagina de texto muy grande, como un manual o libro, y queremos dar la opción al usuario de moverse fácilmente de un sitio a otro sin salir de la pagina y sin tener que estar usando las barras de desplazamiento laterales para moverse hacia arriba o hacia abajo. Un ejemplo seria poner un indice al principio de la pagina y que cada elemento del indice fuese un enlace que, al hacer click en el, nos llevase a la parte de la pagina en la cual estuviese el tema indicado. Vamos a ver un ejemplo en el cual ponemos un enlace que al pinchar en el nos lleve al final de la pagina. La sintaxis es sencilla y seria así:
<a href="#final">Ir al final</a>1 <ahref="#final">Ir al final</a>
Esto anterior seria el enlace y al final de la pagina web deberíamos poner el destino de la siguiente manera:
<a name="final"></a>1 <aname="final"></a>
Puede resultar un poco complicado de ver pero al final de este articulo os dejare un vídeo en el cual podréis ver el funcionamiento y lo entenderéis sin problemas. La verdad es que esto ya apenas se usa ya que la tendencia actual es crear documentos diferentes con cada sección que se cargan al hacer click en ellos y de esta manera acelerar la velocidad de carga de la web, pero esta bien conocerlos, nos pueden servir para algunas cosas.
Otro tipo de enlaces que podemos usar en HTML son los enlaces a a pagina locales que componen la pagina web que estemos haciendo, ya que es recomendable si la pagina web es un poco compleja que dividamos la pagina en partes y lo organicemos todo en directorios, por ejemplo, un directorio para las imagenes, otro para los sonidos, otro para los estilos CSS que veremos mas adelante, etc. La pagina principal la llamaremos “index.html” esa sera la pagina principal donde se mostrar todo. Si queremos que se cargue otra pagina al hacer click en alguna elemento de un menú que hayamos puesto y que se cargue otra sección de nuestra web lo haremos con los enlaces locales de la siguiente manera:
<a href="pagina2.html">contenido</a>1 <ahref="pagina2.html">contenido</a>
Esto nos mostrara un enlace con el texto “contenido” y al hacer click en el nos llevara a la pagina en cuestión que debe estar en el mismo directorio que la principal. Como ya he dicho antes es recomendable hacer una estructura de directorios para las paginas y para poder acceder a los directorios se hace de la siguiente manera:
- Si tenemos un directorio llamado “pagina” y dentro de el tenemos la pagina principal llamada “index.html” en el cual ponemos un enlace, que al pinchar en el queremos que nos muestre la pagina “pagina2.html” que esta dentro de “pagina” en un directorio llamado “directorio” lo haremos de la siguiente forma:
1 <ahref="directorio/pagina2.html">contenido</a>
hay que usar la barra que esta en el numero 7 de vuestro teclado. Esta barra nos permite bajar un nivel en la estructura de directorios. Si queremos subir habría que poner así:
<a href="../pagina2.html">contenido</a>1 <ahref="../pagina2.html">contenido</a>
Este enlace iría al directorio en el que esta el directorio “pagina” anteriormente mencionado y buscaría la pagina “pagina2.html”. Puede resultar complicado pero no lo es, en el vídeo os mostrare con un ejemplo paso a paso y despacio como hacerlo.
También tenemos las opción de que un enlace local nos lleve a una parte en concreto de alguna pagina con la combinación de los dos tipos de enlaces que hemos visto de la siguiente forma:
<a href="archivo.html#seccion">contenido</a>1 <ahref="archivo.html#seccion">contenido</a>
A su vez, en la pagina “archivo.html” deberemos incluir lo siguiente para que funcione:
<a name="seccion"></a>1 <aname="seccion"></a>
Esto nos llevaría desde la pagina en la que pongamos el enlace hasta “archivo.html” y dentro de dicha pagina nos mostraría la parte en la cual hayamos puesto la ultima linea de código. Puede resultar complicado pero en el vídeo podréis ver que es mucho mas fácil de lo que parece :D.
El siguiente tipo de enlaces son los enlaces externos que nos llevaran a pagina externas que no sean nuestras, por ejemplo:
<a href="http://www.google.com>Google</a>1 <ahref="http://www.google.com>Google</a>
Esto nos mostrara el texto “Google” y al hacer click en el nos llevara a la pagina de Google. Hay que acordarse de poner “http://” para que acceda a la pagina correctamente, de lo contrario el navegador interpretara que es un enlace interno y no funcionaria. Podemos añadir el atributo “target” con el valor “_blank” para que nos muestre la pagina en otra pestaña y no quite la de origen, la forma seria la siguiente:
<a href="http://www.google.com target="_blank">Google</a>1 <ahref="http://www.google.com target="_blank">Google</a>
Si queremos poner un enlace que nos sirva para que el usuario nos pueda mandar un correo electrónico se haría de la siguiente forma:
<a href="mailto:[email protected]">Email a [email protected]</a>1 <ahref="mailto:[email protected]">Emailaliher@mailcom</a>
Esto haría que al hacer click se abra el programa por defecto que tenga el usuario que este visitando la pagina para enviarnos un correo con la dirección ya escrita en el programa. Es recomendable poner en el texto del enlace la dirección de correo ya que el usuario que este visitando la pagina puede que no tenga configurado un programa de correo, por lo cual vera la dirección y podrá enviarnos el email tecleando dicha dirección en uno de los servicios de correo en Internet.
También podemos poner el asunto del mensaje para que le aparezca ya escrito en su programa de correo de la siguiente forma:
<a href="malito:[email protected]?subject=texto del asunto">[email protected]</a>1 <ahref="malito:[email protected]?subject=texto del asunto">liher@mailcom</a>
Si queremos que cuando se envie el email vaya una copia a otra dirección lo podemos hacer de la siguiente forma:
<a href="mailto:[email protected]?subject=asunto&[email protected]">[email protected]</a>1 <ahref="mailto:[email protected]?subject=asunto&[email protected]">liher@mailcom</a>
Otro tipo de enlace que podemos poner es un enlace de descarga de ficheros de la siguiente forma:
<a href="archivo.zip">Descarga archivo.zip</a>1 <ahref="archivo.zip">Descarga archivozip</a>
Al hacer click en el enlace nos mostrara el cuadro de dialogo de descargar correspondiente de cada navegador preguntándonos is queremos descargar el fichero en cuestión.
Con esto ya hemos vistos los tipos de enlaces que podemos poner en una pagina y aquí os dejo el enlace al vídeo de mi canal de Youtube en el cual podéis ver lo que he explicado aquí mientras hago unos ejemplos que seguramente os aclararan vuestras dudas:
Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure