JMiur [E]

¿Cómo se crea un enlace?

Usando la etiqueta <a> </a> (anchor) donde el atributo href indicará la dirección URL del documento al que que queremos enlazar.
<a href="http://vagabundia.blogspot.com/">ENLACE</a>
Todos estos son enlaces que apuntan a la misma dirección:
http://vagabundia.blogspot.com/CLICK
¿Qué es una dirección URL?

Una URL (Uniform Resource Locator) es una dirección que permite acceder a un archivo o un archivo (html, php, gif, jpg, mp3, swf, etc). Es la cadena de caracteres que identifica cada recurso disponible en la web:

protocolo://máquina/directorio/archivo
http://vagabundia.blogspot.com/index.html

¿Se escriben con mayúsculas o minúsculas?

Con minúsculas aunque, dependiendo del sistema operativo, carece de importancia, Windows y Mac ignoran el tipo de letra pero algunos sistemas basados en Unix no.

¿Siempre comienzan con http://?

En Blogger SI aunque alguna dirección puede comenzar con ftp:// o con mailto:. De todas maneras, en Blogger siempre comienzan con el llamado protocolo porque no disponemos de directorios o carpetas internas

En otros servicios, por ejemplo si tenemos un hosting propio, podemos usar los llamados paths relativos.
<a href="archivo.gif">
<a href="/imagenes/archivo.gif">
<a href="../imagenes/archivo.gif">
¿Todas las direcciones deben terminar con una barra inclinada (slash)?

NO, esa barra sólo se coloca cuando no se enlazan documentos y colocarla erróneamente, hace que el navegador nos dirija a cualquier parte. Por ejemplo:

http://vagabundia.blogspot.com/index.html/ [enlace incorrecto]
http://vagabundia.blogspot.com/index.html [enlace correcto]

La barra final sólo la usamos si no indicamos un archivo y de esa manera dejamos que sea el sitio al que nos dirigimos el que resuelva las cosas:

http://www.unsitio.com/html/

En el caso de ser la dirección del servidor (hostname), si no la colocamos, el navegador la mostrará agregada en la barra de direcciones y, por lo general, nos llevará a la página índice o a la página de inicio.

http://vagabundia.blogspot.com

Aunque, es conveniente colocarla, simplemente para que nos acostumbremos a usar la sintaxis correcta:

http://vagabundia.blogspot.com/

¿Cómo sé si la URL es válida?

El error más común es que digamos "esto no funciona" porque la dirección del recurso que colocamos está equivocada. Si se trata de una página web, basta chequear lo que nosotros escribimos con la dirección que nos muestra el navegador.

Si se trata de otro tipo de archivos debemos hacer lo mismo, copiarla en la barra de direcciones del navegador y hacer que nos muestre el recurso. El resultado, dependerá mucho de que tipo de archivo se trata pero, habrá básicamente dos posibilidades, o nos lo muestra (una imagen, un SWF si tenemos los plugins) o se abre la ventana de descarga. Si lo que vemos es una página web, la dirección es errónea

¿Cómo abrir un enlace en una nueva pestaña?

Podemos hacer que se abra en una nueva ventana, que se abra en una nueva pestaña dependerá de la forma en que configuremos el navegador. Para eso, agregamos el atributo target:

<a href="http://vagabundia.blogspot.com/" target="_blank">ENLACE</a>

¿Podemos abrir ventanas con un tamaño específico?

SI, pero para eso debemos usar JavaScript:
<a 
href="#"
target="nombre"
onclick="window.open('URL_destino', 'nombre', 'width=600,height=400'); return false">
ENLACE
</a>
¿Puedo colocar un enlace para que se pueda descargar un archivo?

En Blogger hay que alojar ese archivo en algún servidor y luego colocar su dirección; no tenemos acceso a ninguna otra posibilidad:

<a href="URL_archivo">ENLACE</a>

¿Lo que vemos de un enlace siempre es un texto?

NO. Podemos usar un texto, una imagen o ambos:
<a href="URL_archivo"><img src="URL_imagen"/></a>
TODO lo que está entre la etiqueta de apertura <a ...> y la etiqueta de cierre </a> será el enlace (hipervínculo) y, por defecto, al colocar el mouse encima, veremos un puntero on la forma de una mano.

¿Y si la imagen es muy grande, puedo redimensionarla?

SI, eso es posible usando los atributos width y height o bien estableciendo un estilo con style:
<img width="ancho" height="alto" src="URL_imagen"/>
<img style="width:anchopx;height:altopx;" src="URL_imagen"/>
Pero que se vea pequeña no significa que "se cargará chica". Por ejemplo, si queremos mostrar wallpapers de 1024x768, aunque establezcamos que se muestren de un tamaño menor, el navegador cargará la imagen original y luego la redimensionará así que el tiempo de carga será incluso superior a si directamente los colocásemos de tamaño natural. En esos casos, conviene tener una segunda imagen ya redimensionada.

¿Entonces puede tener una miniatura y enlazar la imagen grande?

SI, eso sería lo razonable:
<a href="URL_imagenOriginal"><img src="URL_imagenMiniatura"/></a>
¿Puede quitarse el borde de las imágenes que uso de enlace?

Por defecto, tienen un borde azul (espantoso y antigüo). Puede quitarse de dos maneras, en una imagen individual estableciendo el atributo border:
<a href="URL_destino"><img src="URL_imagen" border="0" /></a>
Enlace con bordeEnlace sin borde

O bien estableciendo una regla genérica en el CSS de la plantilla o web. Por lo general, se coloca al inicio de las definiciones de estilo:
a img {text-decoration: none; border: 0; outline: none;}
¿Y el subrayado de los textos de los enlaces?

Del mismo modo. En uno en particular lo hacemos usando el atributo style:
<a href="URL_destino" style="text-decoration: none;">ENLACE</a>
O establecemos una regla genérica:
a, a:visited, a:link, a:active {text-decoration: none; outline: none;}
a:hover {text-decoration: none; outline: none;}
¿Y el color de de los enlaces?

Lo mismo que con el subrayado, eso lo controlamos con las propiedades CSS:
a, a:link {color: #color;} /* el color genérico */
a:visited {color: #color;} /* el color de los enlaces visitados */
a:active {color: #color;} /* el color del enlace activo */
a:hover {color: #color;} /* el color cuando colocamos el mouse encima */
¿Por qué veo una marca blanca al lado de las imágenes de los enlaces?

Esa rayita indica que hay un espacio en blanco o un salto de línea antes o después de la etiqueta IMG:
<a href="URL_destino">
<img src="URL_imagen"/>
</a>
Se soluciona colocando toda la etiqueta A en una sola línea:
<a href="URL_destino"><img src="URL_imagen"/></a>
¿Los enlaces sólo sirven para abrir páginas o recursos?

NO, también los usamos para ejecutar JavaScript.
<a href="javascript:void(0);" onclick="funcion();">ENLACE</a>

¿Pueden usarse otras etiquetas para que funcionen como enlaces?

SI, por ejemplo, los botones de los formularios:
<form action="URL_destino" method="get">
<input value="UN ENLACE" type="submit">
</form>
¿Y cómo creo un enlace para enviar mails?

Usando el protocolo mailto:
<a href="mailto:vagabundia@gmail.com">vagabundia arroba gmail punto com</a>.

21 comentarios:

jesgo  

Felicitaciones. Tienes una rara habilidad para resumir en un post la totalidad de un tema explicándolo con una sencillez y profundidad extraordinarias. Desde hoy habrá que tener a mano este post.

Responder
Anónimo  

Excelente post! De referencia.

Responder
JMiur  

Jesgo, La Blogueria, gracias a ambos; hoy han sido todos demasiado amables conmigo :)

Responder
Gem@  

Fantástico como siempre :)

Responder
JMiur  

Saludos, Gem@ :)

Responder
Unknown  

Jorge:

Comparto total y absolutamente lo vertido por jesgo.

Realmente una "Clase Magistral" sobre enlaces.

Muchísimas gracias!!!

Un abrazo.

Responder
La Dueña  

Realmente tu post, es una de gran ayuda, sobre todo para mí...jejeje!

y hablando de ayuda, necesito la tuya. Quiero cambiar la plantilla de mi blog, y para modificar el logo del blog me piden que aloje la imagen en algún sitio. El problema es que tiene extensión png y no encuentro un lugar donde ne permitan ese formato.
Conoces de algún sitio?

Responder
JMiur  

Gracias, Juan Pedro, siempre tan amable conmigo :)

La Dueña:
En Blogger mismo puedes hacerlo pero sino, puedes usar Photobucket o ImageShack por ejemplo. Esas son las tres alternativas que uso normalmente.

Responder
Anónimo  

guau JMIUR no recuerdo haberlo leído...bien manos a la obra, si no sale lo que quiero, te escribo :(!!! besitos

Responder
Noire  

JMiur, estoy desesperada, a ver si me puedes echar un cable, porque ya no sé dónde me equivoco.
Verás me bajé un plantilla de Chica Blogger, más concretamente la llamada "Ele". Al principio me di cuenta que los links que pongo en las entradas para enlazar la fuente no destacaban, tenían el mismo formato plano del texto. Así que lo cambié, pero me he dado cuenta de que algunos enlaces sí que los cambia, pero otros nada...
Por ejemplo en este post:
http://frikinosumi.blogspot.com/2009/09/se-vende-el-grog-de-monkey-island.html
Todos hacen el efecto hover, pero hay uno, por ejemplo que no se ve en rojo subrayado, y que si no pasas el ratón, ni te enteras que es un link...
Y luego en el último post que he escrito, no se ve ningún enlace aparentemente (es decir, sólo hace el hover) y hay dos.
Además, si te plantas en la página principal, e intentas dar click al título de la última entrada que se ha escrito, no va, tienes que bajar un poquito el mouse, para que el texto resalte y funcione el link del title... (eso me pasa desde la página principal, en todas las últimas entradas que pongo)
No sé que parte es la que está mal y porque no me funcionan estas cosas, a ver si me puedes ayudar ^^
Muchas gracias !!!

Responder
JMiur  

Lo que veo en el post ese son todos los enlaces ¿cuál no ves?
En el el primer psot del home veo dos, zapatillas y la fuente. Ambos normalmente. Se ven de color rojo y subrayados y el efecto hover elimina el subrayado. Esta es una captura rápida.

Tampoco noto problemas con los títulos ¿Qué navegador estás usando?

Responder
Noire  

Firefox, ya he limpiado el caché, cookies y demás y si funciona XD mi firefox siempre me hace cosas raras a veces, ais.
Pero el tema de titulos sigue igual. Si te metes directamente en la entrada no pasa nada. Pero desde la principal frikinosumi.blogspot.com te pones en el titulo de la ultima entrada y te tienes que poner justo debajo del titulo para que este funcione. Si te pones justo donde están las letras no funciona, eso si que no es por el navegador XD
Muchisimas gracias por tus respuestas ^^

Responder
JMiur  

Noire:
Lo del título e la primera entrada podría ser provocado por un error en la parte del header que hace que dos IDs tengan el mismo nombre y la altura y los márgenes hacen que se "tape" el enlace aunque se vea el texto.

Fíjate si ves algo así:

<div id='header'>
<div id="headermain">
<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='XXXXXXXX (cabecera)' type='Header'/>

en las dos primeras líneas, el ID es el mismo si cambias el segundo por cualquier otro o le quitas el ID, me da la impresión que se solucionará el problema:

<div id='header'>
<div id="headermain">
<b:section class='header' id='OTRONOMBRE'>
<b:widget id='Header1' locked='true' title='XXXXXXXX (cabecera)' type='Header'/>

Responder
Noire  

Madre mia JMiur, no sé como agradecértelo!!

Te sigo desde hace muchísisisimo tiempo, ayudandome con tus entradas a poner mis blogs en condiciones, y ahora me ayudas en este tema, muchas gracias! Ahora va perfecto ^^

Responder
JMiur  

Genial, Noire. Me alegro que resultara :D

Responder
Perla Beatriz Rodriguez Dieguez  

Hola que tal?, Mira, soy totalmente novata en esto,cada modificacion que quiero hacer en el blog, tardo medio dia. En este caso tengo problemas con los titulos que estan enlazados a una web. En mi plantilla anterior no tenia problema, vos clickeas y te direccionaba al enlace, pero luego cambie de plantilla varias veces porque no me gustaban y en la que estoy que es una de las Minimas, en el ultima entrada, enlazo con un video de TVE y no sale nada, me vuelve a mi blog, y observo que el de la entrada http://mejorvidamejormundo.blogspot.com/2010/01/serie-documental-interesante.html pasa lo mismo., aparte que "seguir leyendo" no me funciona...
a ver si me das una manito, gracias!

Responder
JMiur  

Perla:
No entiendo eso de los enlaces, por l oque veo en esa entrada, hay uno que apunta a esta dirección y lo veo funcionar correctamente:
http://www.canaldehistoria.es/minisites/0912lap/about.html

En cuanto a lo de leer más, por ejemplo, en estea entrada, se meustra y funciona bien:
http://mejorvidamejormundo.blogspot.com/2010/01/la-falta-de-compromiso.html

En als anteriores, no se ve nada oculto así que que al expandirse no hay cambios, no hay contenidos dentro de <span id="fullpost">

Responder
Aseret-Teresa  

Hola, me paso por aqui con frecuencia pero esta es la primera vez que me decido a escribir, primero para agradecerte las explicaciones claras q nos das y seguno para preguntar una duda.Ahi va: tengo en mi pc varios archivos en formato jnlp que quiero subir a mi blog. Los he alojado en google sites y copiado la dirección del enlace hasta jnlp borrando todo el resto; con esto he conseguido publicar, pero para verlo hay que aceptar abrir con java o descargar y yo quiero que se vea directamente. Probé a ponerlo con iframe pero no va. Vaya, no puedo ponerte el código para que lo veas pero si la url:http://1110499299020292339-a-1802744773732722657-s-sites.googlegroups.com/site/miscosasparaelcole/httpsitesgooglecomsitemiscosasparaelcole/acoolkidlikeme.jnlp ¿Me puedes explicar un poco? Gracias

Responder
JMiur  

Ese es un archivo de Java así que no sé si es posible incrustarlo en un iframe o algo similar. desconozco el tema pero, aparentemente, debe ser hecho para que funcione de esa manera:
http://weblogs.java.net/blog/2006/07/20/trip-and-tick-2-jooj-your-project-page-web-start-demo

Responder
Aseret-Teresa  

Gracias por el enlace pero lo veo demasiado complicado :( y no merece la pena que me rompa la cabeza; quizás más adelante cuando tenga más tiempo.
Saludos ;)

Responder
JMiur  

Es complicado y no sé si es posible resolverlo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR