Posteado por: joacosoft | 11 agosto 2009

Enlaces o Links en HTML

Una de las principales características del lenguaje HTML es la posibilidad de crear enlaces (links).

Si has navegado por Internet (se supone que si), sabrás qué es un enlace. Normalmente, en una página Web, un enlace aparece en forma de texto subrayado o bien en forma de imagen. Se reconoce un enlace en una página Web, porque cuando pasas el ratón por encima, la forma del puntero cambia a una mano señalando con un dedo.

Puedes crear enlaces en tus páginas web de una forma muy sencilla. Fíjate en el siguiente ejemplo:

<a href=”www.disney.com”>Esto es para los más pequeños </a>

El elemento <a> es el encargado de crear enlaces. <a> no suele ir solo, ya que necesita, entre otras cosas, saber a dónde apunta el enlace.

En nuestro caso: <a href=”www.disney.com”>, href está indicando a qué lugar vamos a ir cuando hagamos clic sobre el enlace: www .disney.com

La frase que está escrita después: Esto es para los más pequeños, nos indica qué texto aparecerá como enlace.

El resultado final sería este:

Esto es para los más pequeños

Al hacer clic sobre la frase anterior, nos iríamos a la página www .disney.com

Crear un enlace a una dirección de correo electrónico

Puedes crear enlaces a tu dirección de correo electrónico. Esta técnica es muy utilizada en la mayoría de las páginas de Internet, ya que con un simple click con el ratón podemos enviar un e-mail:

<a href=”mailto:abc@abc.com”> Haz clic aquí para enviarme un e-mail </a>

En el ejemplo anterior href hace referencia a una dirección de correo electrónico. Esto es así, porque lo que va justo detrás de las comillas es mailto: seguido de una dirección de correo electrónico.

El texto que aparecería como el enlace es ‘Haz clic aquí para enviarme un e-mail’. El resultado final sería :

Haz clic aquí para enviarme un e-mail

Al hacer un clic en el enlace automáticamente se abrirá la aplicación de correo electrónico que tengas configurada en tu ordenador lista para enviar un mensaje a la dirección : abc@abc.com (es una dirección imaginaria)

Puedes incluir en tu página enlaces de este tipo sustituyendo abc@abc.com por tu dirección de correo. De esta forma, cualquier persona que visite tu página y quiera enviarte un mensaje, lo podrá hacer cómodamente (con un sencillo clic del ratón)

LINKS CON IMÁGENES

En el capítulo anterior vimos como crear un enlace (link) utilizando un texto. Como sabes, no solo puedes crear enlaces usando texto, sino también imagen, puedes insertar una imagen en tu página utilizando <img>:

<img border=”0″ src=”dibujo.gif” width=”98″ height=”25″>

Esto insertaría la imagen “dibujo.gif” en la página. Ten en cuenta que si pruebas este ejemplo en tu ordenador debe existir una imagen con este nombre. Si no es así puedes utilizar cualquiera que tengas. También es importante que la imagen esté guardada en la misma carpeta que el documento html donde lo estás creando, si no es así, la imagen no se verá.

En el caso de que estés utilizando una imagen que esté en una carpeta distinta (por ejemplo ‘images’) tendrás que modificar la línea de esta forma:

<img border=”0″ src=”images/dibujo.gif” width=”98″ height=”25″>

… es decir, es muy importante que indiques el camino (o path) donde está almacenada la imagen.

Para hacer que esta imagen sea un enlace que salte a la página de Disney simplemente hay que realizar la siguiente modificación:

<a href=”www.disney.com”><img border=”0″ src=”dibujo.gif” width=”98″ height=”25″></a>

De esta forma tan simple, al hacer click con el ratón sobre la imagen, automáticamente pasaremos a la página http://www.disney.com

Puedes probar en una página de prueba con varios enlaces de este tipo, eso sí, asegúrate de utilizar imágenes que ya existan en tu ordenador

Aviso: Esta informacion la obtuve de un trabajo de la escuela si alguno de ustedes reconoce esta informacion como suya favor de comentarlo y poner el enlace.

Anuncios

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 )

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 )

Google+ photo

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

Conectando a %s

Categorías

A %d blogueros les gusta esto: