Tipos links o enlaces. Listado y Clasificación

LuJo


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:

Blog de Lujo

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.

6 comentarios:

José Luis López Recio

Desconocía que hubiera tal cantidad de enlaces.
Saludos

LadyMarian

Qué cantidad de enlaces!! Y yo que lucho cada vez que tengo que hacer que abra en otra ventana! Tengo tu explicación a mano y la saco cada vez que necesito. La tengo en el mail con la etiqueta "ventana aparte". Como siempre perdía la explicación le puse etiqueta propia.
Ya sé cómo hacerlo pero tardo mil años con cada uno!
Bueno, ya sé que además hay más.

Me voy a investigar por qué no figura en el Reader tu entrada del 25 de febrero de enlaces dofollow y nofollow (a la que hacés referencia acá). Por eso se me había escapado!En Reader aparecen entradas tuyas del 24/2 y del 26/2 pero no del 25. Voy a estudiarlo.

Besotes

Lujo

Holaaa Joselop
Bueno, son los principales..., pero ewtos son los que consideré interesantes.(-^o^-)
Abrazotes!!


Holaaa LadyMarian
En cuanto a la entrada que mencionas del 25 de febrero, no sé qué hice mal para que no salga en el feed. Llevo dos días notando que Blogger funciona fatal, sobre todo en el tema de publicar o editar entradas.
Las explicaciones que allí se dan no son mías. No tengo la capacidad de hacer definiciones de cosas que desconozco, pero me parecieron esclarecedoras sobre algunos conceptos: No Follow y Do NoFollow.

Hasta yo necesito mis apuntes para hacer enlaces. De ahí que me atreviera con esta entrada.
Ojalá te sirvan.
A mí me parecieron curiosos los de doble título (#^_^#)
Miles de abrazotes!!

LadyMarian

No, a lo mejor no hiciste nada mal! No pienses así!
Lo único que se me ocurre es que hayas cambiado algo después de publicar.
Reader no perdona nada. Si vos publicaste algo con un error, por ejemplo en el título se te cruzaron los cables y pusiste Hugh Grant cuando querías poner Hugh Jackman, pues quedará mal por más que lo arregles. Lo único que podés hacer es eliminar esa entrada y hacer una nueva bien. Entonces en el Reader aparecerá la entrada equivocada con un link que no te llevará a ningún lado y la segunda entrada bien hecha. Todo esto para decir simplemente que Reader no perdona! jajaja!

Besos

Lujo

Re Hola Lady
Se me pasó por alto O.o...En mi próxima entrega lo haré como dices.
Como era un simple apunte lo pasé por alto (#^_^#).
Gracias por la ayuda.
Mil abrazotes gigantescos!!!

Balovega

Hola mi niña...

No sabía que había tantos enlaces, ya sabes que yo de esto se muy poco, jjaja...aunque poco a poco voy aprendiendo contigo..

Cuídate mucho, no te preocupes pasar por casa, solo verte que escribes, ya se que estas bien.

Saluda a mi mar y dale un besote grande.. un Muakksssssssssssssssssss muy grandote mi linda niña

Publicar un comentario

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP