oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso HTML - Lección 8: Enlaces o Vínculos
Definición de enlace o vínculo
Es una refencia hacia una página o un archivo que se encuentran en la red internet. Su aspecto es el de una línea de texto o una imagen insertada en una página.
Cuando hacemos "clic" en un enlace, el navegador abrirá automáticamente la página de información o descargará el fichero al que hace referencia.
¿Qué necesitamos para crear un enlace?
Pues necesitamos como creo que habrás adivinado un elemento. Será un elemento con su correspondiente atributo y lo podrás aplicar tanto a texto como a imagenes.
Veamos un ejemplo de enlace:
Ejemplo 1:
<a href="http://www.oletuswebos.es/index.html">Desde aquí enlazamos a oletusWEBos.es</a>
que lo visualizaremos de la siguiente manera en el navegador:
Expliquemos un momento las diferentes partes de la creación de un vínculo:
El elemento a significa "ancla" y el atributo href tiene el significado de "referencia hipertextual" además de especificarnos hacia donde nos dirigirá el enlace.
En el anterior ejemplo el atributo href contiene el valor "http://www.oletuswebos.es/index.html" que es la dirección a la que queremos que nos lleve el enlace. El texto "Desde aquí enlazamos a oletusWEBos.es" es el que aparecerá como enlace en el navegador.
¿Como enlazo mis propias páginas?
Si estas creando un sitio web y tienes por ejemplo dos páginas una llamada "página1.html" y la otra "página2.html" no es necesario que incluyas en el atributo href toda la dirección completa (URL) del documento. Solo con escribir el nombre del fichero en el enlace será suficiente para haber creado el vínculo entre ambas páginas.
Ejemplo 2:
Si las dos páginas las tenemos guardadas en la misma carpeta y queremos enlazar la "pagina 1" con la "página 2"escribiremos lo siguiente:
<a href="pagina2.html">Aquí iríamos a la página 2</a>
Ejemplo 3:
En caso de tener la "página 2" guardada en una subcarpeta llamada por ejemplo "colores" el código a escribir sería el siguiente:
<a href="colores/pagina2.html">Aquí iríamos a la página 2</a>
Ejemplo 4:
Si queremos ahora enlazar la "página 2" con la "página 1" y teniendo en cuenta que estan en diferentes carpetas, el código sería este:
<a href="../pagina1.html">Aquí iríamos a la página 1</a>
Como ves para crear este vínculo hemos insertado los dos puntos con la barra "../", esto nos indica que el fichero desde el que hemos creado el enlace se encuentra en una carpeta en un nivel por encima al archivo a enlazar, en este caso "pagina1.html".
Por norma general si escribes lo enlaces como en los ejemplos anteriores al pinchar sobre ellos nos abrira la información en la misma ventana, pero si ademas le añadimos el atributo target="_blank" esto indicará al navegador que cualdo pinchemos en el enlace muestre la información en una pestaña nueva:
Ejemplo 5:
<a href="http://www.oletuswebos.es/index.html" target="_blank">Desde aquí enlazamos a oletusWEBos.es</a>
y si pinchas ahora en el enlace verás la diferencia:
¿Y si quiero incluir una breve descripción del enlace?
Pues para ese caso utilizaremos otro atributo llamado "title". Este atributo hará que cuando coloquemos el cursor del ratón sobre el vínculo aparezca en un recuadro una breve descripción. Haz la prueba y pon el cursor del ratón sobre cualquier enlace de oletusWEBos.
Ejemplo 6:
<a href="http://www.oletuswebos.es/index.html" target="_blank" title="Probando atributo title">Desde aquí enlazamos a oletusWEBos.es</a>
y asi lo mostraría nuestro navegador:
Como crear un enlace a un correo electrónico
Pues si también podemos crear un enlace hacia una dirección de correo electrónico y se hace de manera parecida que los ejemplos anteriores:
Ejemplo 7:
<a href="mailto:oletuswebos@gmail.com">Enviame un E-milio</a>
y así será como se visualizará en el navegador:
No dirás que no estas aprendiendo cosas ¿eh?... pasa a la siguiente lección haber que más aprendes y que no se te olvide ir practicando por tu cuenta que es como seguro que vas a aprender.
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®