Cómo construir enlaces - Manual de bolsillo

Aprender HTML de manera autodidacta es largo y complejo, y en el proceso es normal irnos olvidando lo que aprendimos. Por eso decidí crear estas referencias rápidas para tenerlas a mano y de paso ayudar a los que están aprendiendo... Con el tiempo haré lo mismo para otros elementos (imágenes, listas, estilos, flash, etc.).

Las partes resaltadas son las que debemos reemplazar (por ejemplo: "URL" por la dirección de la página).

En Blogger, siempre deben escribirse estos códigos en el modo de Edición de HTML.


Links externos

(llevan a otra página)

Enlace simple


Ejemplo: Link

Código:
<a href="URL">Link</a>




Enlace con descripción (title)

(aparece un pequeño texto al pasar el mouse sobre el enlace)

Ejemplo: Link

Código:
<a href="URL" title="descripción">Link</a>




Enlace que abre en otra ventana


Ejemplo: Link

Código:
<a href="URL" target="_blank">Link</a>




Enlace invisible para los buscadores (nofollow)

(se usa cuando no queremos que los buscadores relacionen nuestra página con la que enlazamos)

Ejemplo: Link

Código:
<a href="URL" rel="nofollow">Link</a>




Links internos (dentro de la misma página)

(llevan a otra zona de la misma página, y constan de dos partes: la primera es el link propiamente dicho, la segunda va en la zona a donde lleva el link anterior)

Ejemplo: Link

Código 1:
<a href="#NOMBRE">Link</a>


Código 2:
<a name="NOMBRE"></a>




Link a una dirección de email

(se abrirá el programa asociado, como Outlook o Thunderbird)

Enlace normal

Ejemplo: Link

Código:
<a href="mailto:josé@perez.com">Link</a>




Enlace con asunto predeterminado


Ejemplo: Link

Código:
<a href="mailto:josé@perez.com?subject=hola, josé!">Link</a>




Links con botones


Ejemplo:

Código:
<input type="button" value="click aquí" onclick="location='URL'" />




Links JavaScript

(estos son una mezcla entre HTML y JavaScript, pero suelen ser útiles)

Enlace para imprimir la página


Ejemplo: Imprimir esta página

Código:
<a href="javascript:window.print()">Imprimir esta página</a>




Enlace para cerrar la ventana


Ejemplo: Cerrar

Código:
<a href="javascript:window.close()">Cerrar</a>

1 comentarios:

iron man dijo...

Muy bueno el tutorial. Es mas facil de recordar asi. XD

Publicar un comentario