Enlaces con o sin imágenes Tipos o fórmulas

Tipos de Enlaceso links y su Clasificación.

• Enlace Simple: en una palabra colocas un link que lleva directamente allí donde has indicado.

<a href="http://tu-web.com">colocar aquí la palabra que servirá como enlace</a>

Ejemplo: Ir a página principal de Un Blog de Lujo

*** Para colocar un link de un color determinado basta con añadir: style="color: rgb(CODIGO DEL COLOR);" de tal forma que quedaría:

<a style="color: rgb(CODIGO DEL COLOR);" href="http://tu-web.com">colocar aquí la palabra que servirá como enlace</a>

Ejemplo: Ir a página principal de Un Blog de Lujo



• Enlace No follow:Si no conoces el significado No Follow o Do Follow hay una definición de este tipo de enlaces en otra entrada

<a href="http://una-web.com/" rel="nofollow">palabra que aparece como enlace</a>

Ejemplo: Ir a página principal de Un Blog de Lujo

• Enlace que se abre en una nueva ventana al pinchar sobre él: al hacer link se abrirá en otra ventana y así no saldrán de tu blog o web.

<a href="http://una-web.com/" target="_blank">palabra que aparece como enlace</a>

Ejemplo: Ir a página principal de Un Blog de Lujo

• Enlace simple con una imagen: pinchando sobre la imagen elegida irás directamente a la url indicada.

<a href="http://una-web.com" target="_blank"><img src="url-de-la-imagen"/></a>

Ejemplo:


• Enlace simple con una imagen con la que al pasar el ratón aparece un mensaje: suele aparecer un cartelito donde puedes colocar la frase que te dé la gana.

<a href="http://una-web.com/" target="_blank"><img src="url-de-la-imagen" title="mensaje que aparece"/></a>

Ejemplo:

• Enlace con una imagen que lleve el atributo "ALT" para que sea indexada por los buscadores: es importante colocar el atributo "alt" para aquellos programas que usan los invidentes para navegar por la red.

<a href="http://una-web.com/" target="_blank"><img src="url-de-la-imagen" title="mensaje que aparece" alt"describir la imagen"/></a>

Ejemplo:

• Enlace que sólo con pasar el ratón por encima se va directamente a la url indicada. No es necesario hacer click con el ratón.

Se puede decir que aquí no es necesario mover un dedo para ir a otra página que indique el autor del blog o web. Parece mágico:

<a href="http://url de la web a enlazar" onmouseover="window.location=this.href">palabra que aparece como enlace</a>

Ejemplo: No pases el ratón por encima o irás directamente a la página principal de este blog ;)

• *** Es discutible que deba poner este tipo aquí pero me pareció interesante para tenerlos todos agrupados.
Existe un tipo de enlace que tiene doble título. Uno es el que ves con normalidad y otro que aparece al pasar el cursor por encima. Tiene la forma:

<a onmouseover="this.innerHTML = 'titulo que aparece al pasar el cursor'"onmouseout="this.innerHTML = 'titulo normal que se ve a primera vista'" href="url de la web que vayas a enlazar">titulo normal que se ve a primera vista</a>

Ejemplo: Clasificación del blog

■Es común colocar este último enlace en la columna o sidebar con un gadget HTLM/Javascript, pero también se pueden colocar "por capricho" en un post...

- Ir a Escritorio - Diseno - Elementos de la página - Añadir un gadget HTLM/Javascript tal como muestran las imágenes.

Actualización:

Botón con efecto "rollover"

Lo siguiente es una tontería, pero lo anoto para ver el funcionamiento de este tipo de combinaciones con onmouseover. Seguramente debería ir en tipos de enlaces y links...

<a href="URL DEL SITIO WEB"><img src="URL DE LA IMAGEN Nº 1" onmouseover="this.src='URL DE LA IMAGEN Nº 2'" onmouseout="this.src='URL DE LA IMAGEN Nº1'" alt="TITULO DEL BOTÓN"></a>

- La imagen nº1 es la que aparece sin pasar el cursor (en el ejemplo es Shin Chan con una flor en la boca).
- La imagen nº 2 es la que se ve al pasar el cursor por encima (en el ejemplo es el log donde se lee Lujo).

P.ej:



El efecto es curioso y se le considera un botón con efecto "rollover".

En definitiva, no es más que un link que al pasarle el ratón por encima cambia de imagen y sale un cartelito con el nombre del sitio web indicado en el respectivo código.


Nota:

- <center> al principio y </center> al final de la línea,hace que la imagen se centre.
- <a href="url de destino" es el enlace al sitio.
- target="_blank" hace que se abra en otra ventana.
- title="texto" es el texto que se mostrará al poner el ratón por encima.
y como no hay más datos en esta zona lo cerramos todo con >

- <img src="url de la imagen"> es el código para que se vea la imagen que va a servir de enlace.

- </a> cierra el conjunto de códigos.


Más notas:

- Un enlace para imagen sería:

<a href="url-de-la-pagina"><img src="url-de-la-imagen" /></a>

- Para conseguir una serie de imágenes del mismo tamaño se asignan los atributos width - height - border para crear una separación.

<a href="url-de-la-pagina"><img src="url-de-la-imagen" border="1" height="60" width="60" /> </a>

- Con title le asigno un título:

<a style="" title="TITULO"<a href="url-de-la-pagina"><img src="url-de-la-imagen" border="1" height="60" width="60" /> </a>

- le asignaremos el atributo target="_blank" para que al clicar encima de la imagen la página se abra en una ventana aparte.

Conclusión:

El código necesario para realizar una serie de imágenes del mismo tamaño que también sean enlaces tendría una fórmula:

<a style="" title="aquieltitulo" href="aquilaurldelapagina"target="_blank"><img src="aquilaurldelaimagen" border="1" height="60" width="60" /></a>

Con la repetición de este código se puede crear un conjunto en horizontal o de varias líneas.

Todo lo que está explicado puede ir en un gadget HTLM/javascript o en una entrada en Edición de HTLM.