5. Hiperenlaces - Enlaces y sus propiedades
Tras mucho sin escribir, y sin tiempo para nada, vuelvo a sacar un ratejo para continuar este pequeño manual de HTML para todos. Esta vez vamos a tratar el tema de los enlaces. Voy a explicar en este post qué son los enlaces, para qué sirven y cómo se usan (y algunas curiosidades, cómo no...).
¿Qué son los enlaces?
Un enlace (o hipervínculo) es un fragmento de código (texto, imágen, capa...) que tiene una propiedad especial. Por lo general, hacen que te muevas entre páginas. Que bonito suena, ¿no? Bien, ahora la explicación de verdad, la no tan técnica. Un enlace es ese texto (por lo general subrayado) en el que puedes pinchar con el ratón.
¿Por qué son importantes?
Porque si no hubiese enlaces, todo tendría que ir en el mismo sitio, en la misma página. Para que os hagáis una idea, todos los blogs de cibercorresponsales estarían juntos, y todas las entradas, y todos los comentarios, y todo lo demás. Todo en una página realmente larga. Para evitarlo, en la web se separan los contenidos en distintas páginas. Para movernos entre ellas, usamos enlaces.
Curiosidad:
Si os fijáis en la barra de direcciones, las URL suelen comenzar con "http://". Esto significa HiperText Transer Protocol, que en español es "Protocolo de Transferencia de HiperTexto". O séase, que es así porque tiene enlaces. Si no tuviesen, sería "ttp://", ¿no? Por cierto, hay más "://", como "ftp://" o "https://", por ejemplo.
¿Cómo se usan?
Bien, ya sabes por qué son importantes, ahora la gran pregunta es cómo usarlos, como crearlos. Es realmente fácil. La etiqueta es <a> . La sintaxis a usar sería:
<a>ENLACE</a>
¿Y cómo sabe a donde mandarme? Porque hay un atributo que se lo dice: "href ", que vale para rutas absolutas y relativas*:
<a href="pagina.html">ENLACE</a>
<a href="http://www.google.com">GOOGLE</a >
¿Y si quiero que se abra en una ventana nueva? Otro atributo, el atributo "target ".
<a href="pagina.html" target="_blank">ENLACE</a>
Y ya, si vamos al máximo, si quiero poner una breve descripción cuando ponga el ratón encima, podemos tirar del atributo "alt "
<a href="pagina.html" alt="Enlace a otra página">ENLACE</a>
(también existe otro que es title, tanto para enlaes como para imágenes, pero de momento vamos a usar alt. A efectos prácticos hace lo mismo)
Podemos colocar los atributos en el orden que queramos, aunque yo recomiendo hacerlo por este orden (facilita la lectura del código): href, alt, target, resto (onMouseOver, onClick... ya los veremos en próximos capítulos, si me da tiempo...)
Curiosidad:
Mucha gente tiene configurado el envío de emails desde algún programa (outlook, thunderbird...). Gracias a los enlaces, podemos pedirle al ordenador que abra ese programa y nos mande un email. Para ello, hacemos uso del método "mailto:". ¿Dónde? En el href. Me explico:
<a href="mailto:usuario@email.com" alt="Mándame un correo">Email</a>
En realidad:
Vamos a nuestro ejemplo real: El currículo.
<html>
<head>
<title> Mi currículo </title>
</head>
<body>
<p>CURRICULUM VITAE</p>
< img src="http://webdelprofesor.ula.ve/economia/arandes/curriculo.gif" height="215" width="210" />
<p>Nombre completo: <br />
Un tal Carlos</p>
<p>Estudios: <br />
ESO y 1º de Bachillerato</p>
<p>Inglés: <br />
Si, nivel básico</p>
<p>Otros conocimientos: <br />
HTML, Plataformas CMS de software libre.</p>
<p>Email de contacto: <br />
<a href="mailto:ejemplo-html@mini-manual.de" alt="Pulsa para mandarme un correo">ejemplo-html@mini-manual.de</a> </p>
<p><a href="http://www.mi-web.com" alt="Visita mi sitio web">Página web</a></p>
</body>
</html>
Que quedaría...
CURRICULUM VITAE
Nombre completo:
Un tal Carlos
Estudios:
ESO y 1º de Bachillerato
Inglés:
Si, nivel básico
Otros conocimientos:
HTML, Plataformas CMS de software libre.
Email de contacto:
ejemplo-html@mini-manual.de
*He mencionado rutas absolutas y relativas. Bien, me explico rápidamente: Una ruta absoluta es la dirección completa del enlace (http://www.dominio.com/carpeta/archivo.html), y una ruta relativa es la dirección al archivo teniendo en cuenta donde estás. Si el archivo le tienes en una carpeta llamada "carpeta", y el archivo es "archivo.html", la ruta relativa es "carpeta/archivo.html". Si hay dudas, me lo decís, y lo explico de otra forma.
Comentarios
partyflipo - hace más de 13 años
Gracias Carlos :P Espero que lo "veamos en próximos capítulos". Que sí te da tiempo, hombre :-)
jose luis - hace más de 13 años
La foto buenísima, te has dado cuenta de que la mayoría de los navegadores modernos ya eliminan eso del http:// Nunca me ha gustado que lo quiten, nose.
un tal carlos - hace más de 13 años
Gracias por comentar. Se hará lo que se pueda, con respecto al tiempo, Partiflipo. Jose Luis, a mi tampoco me gusta que quiten el protocolo, pero bueno, hay que tener en cuenta que si eso es así es porque la gente no se queja, así que debe ser bueno, de alguna manera que aún no entiendo... jaja
No se pueden incorporar más comentarios a este blog.