HMTL de Guerra. Eslabones Infinitos – Clases Prácticas de HTML IV

La Web es una red y una cadena. Los eslabones que la unen y la forma son los enlaces. Hoy en HTML de Guerra veremos como hacerlos y cómo controlarlos.

Hola de nuevo. Hoy les traigo otra entrega de la (¿popular?) serie HTML de Guerra. Ya en entregas anteriores, vimos como se hace para crear párrafos y controlar su aspecto desde el CSS. Vamos ahora a ver cómo se hace aquello que le da vida a la Web: los enlaces.

Lo primero que tienes que hacer es buscar dónde quedó guardada tu página index.html de la sesión anterior. Una vez que la encuentras, me avisas……

¿Ya? ¡Miércoles, que rapidez! No pude ni tomarme el cafecito de la clase. En fin, vamos a hacer un link o enlace.

Digamos que lo haremos hacia TecnoHispanos.

<html>
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<p>Hagamos un link</p>
<p>Hacia TecnoHispanos</p>
</body>
</html>

El tag para definir un link es el tag <a></a> De manera que rodeamos TecnoHispanos con el:

<a>TecnoHispanos</a> ¡Y ya! ¡En serio, es un link!

Solo que se nos olvidó decirle hacia dónde dirigirse. Para eso, le pondremos href, asi:

<a href=””>TecnoHispanos</a> Y para finalizar, dentro de las comillas, le ponemos la dirección donde queremos que vaya:

<a href=”http://www.tecnohispanos.com”>TecnoHispanos</a>.

Y ahi está tu flamante link cero kilómetros.

Claro que hay variaciones de este tema. Porque somos tecnófilos, ¿no? Si, tu y yo… nos gusta lo tecnificado, y lo tecnificado no puede serlo si no lo complicamos, asi que compliquémoslo. Pero ya.

Hay varias cosas que podemos hacer con este link, por ejemplo, podemos hacer que se abra en una ventana aparte. Lo normal es que se abra en la misma ventana, pero a veces es mejor que se abra aparte porque la gente se va a otro sitio desde un link en el tuyo y se olvida de tu sitio. Asi que para que al tocarlo abra una ventana aparte, le agregamos un “blanco” o “target”, asi:

<a href=”http://www.tecnohispanos.com” target=”_blank”>TecnoHispanos</a>

Listo, abrirá en otra ventana nueva, la cual se abrirá automáticamente.

Otros posibles targets son:

  • _self — Este te sirve si tienes una página dentro de un frame (marco) y quieres que al tocar el enlace, se abra en el mismo frame.
  • _top — Este te sirve si tu página está en un marco y quieres que se salga del marco, secuestrando la página completa, pero sin abrir ventana nueva.

Hay alguno más, pero los veremos más adelante cuando los necesitemos.

¿Y cómo se verá este link en mi página? Bueno, usualmente, se verá como todos los links normales, subrayado. Y ya. Pero por supuesto, que como buenos tecnófilos, eso podemos complicarlo y tener más control de los links :o)

¿Recuerdas tu archivo estilo.css, el que aún está enlazado a tu página index.html? En él puedes editar la manera en que se ve tu enlace. Para ello, debes recordar que cada enlace tiene 4 estados:

  • link — Es el enlace normal, sin que nadie lo haya tocado ni nada
  • active — Es el enlace cuando lo tocaste con el ratón
  • visited — Es el enlace cuando ya fue visitado (te sirve para indicarle a tu visitante que ya entró a esa sección)
  • hove — Es cuando le pasas el ratón por encima al enlace sin tocarlo.

Esos 4 estados los definimos en el CCS. Lo que haremos es poner el CSS y comentarlo. Es la primera vez que hablamos de “comentarios” o “comentar” un archivo, así que apréndetelo:

Comentar es hacer anotaciones directamente en el código fuente que no salen en pantalla, sinoq ue sirven de orientación entre codificadores, o para ti mismo. En los archivos CSS, todo lo que encierres entre /* y */ es un comentario.

Veamos:

a:link {
/* Aqui va la definicion de como se ve el link normal */
}

a:active {
/* Aqui va la definicion de como se ve el link activo */
}

a:visited {
/* Aqui va la definicion de como se ve el link visitado */
}

a:hover {
/* Aqui va la definicion de como se ve el link al pasarle el ratón*/
}

Con eso lo definimos. Podemos ponerle por ejemplo color al link. O podemos hacer algo muy interesante, que es quitarle la línea de subrayado, asi:

a:link {
text-decoration : none;
}

a:active {
text-decoration : none;
}

a:visited {
text-decoration : none;
}

a:hover {
text-decoration : none;
/* Aquí podríamos ponerle: text-decoration : underline */
/* Eso haría que al pasarle el ratón por encima, la raya apareciera, dándole mayor vistosidad a tu página.*/
}

Podemos definir cualquier cosa que se pueda definir para el texto, color, peso, decoración, fondo…

Bueno, hasta aquí llegamos con esta clase de HTML de Guerra. A ver que se me ocurre para la próxima, quizas imágenes, no se. Si se te ocurre algo a tí, escríbenos! también puedes escribir tus comentarios al final de esta página.

Deja un comentario

A %d blogueros les gusta esto: