Lección 2

Linkeando

Otros cursos dejan lo de los links para capítulos más posteriores, pero yo he decidido que no por una sola razón: los links son (principalmente) lo que diferencian una página web de un archivo de texto normal (aparte que los txt no se publican en Internet). Una web no sería una web sin los links.

Weno, ya que estamos...supongo que sabrás que son los links ¿no? Vaaale. Pero como mi deber no es suponer nada y explicar todo lo que no se haya dicho antes, allá voy. Los links son esos enlances que permiten "saltar" de una web a otra. Se caracterizan por estar subrayados y ser de otro color. También suelen cambiar de color cuando están activos o han sido visitados. Además, alpasar el cursor del ratón por un link aparece el icono de una mano. En castellano, los links se conocen como hipervínculos, hiperenlaces o, simplemente, enlaces. Yo siempre los llamo links porke es más corto y soy muy vaga.

Vaya explicación tonta la de arriba. Se supone que si has llegado hasta aquí es que sabes navegar, pero gajes del oficio : (

Ya, ¿y cuál es la etiqueta mágica que crea links?

<A> texto del link</A>

¿Así de fácil? Me estás timando...

No, en serio, es la etiqueta <A>. Sólo que tiene bastantes parámetros. Antes de explicarlos he de aclarar los tipos de links que hay:

Links a otra página web: Se usan, por ejemplo, en la sección Links favoritos de tu web, donde enlazas a tus páginas favoritas o al mismo tema que la tuya. Si pulsas aquí irás a DIVnet.
Links a un archivo local (o instalado en un servidor): Son los que usas dentro de tu web, por ejemplo, cuando quieres hacer links a las secciones de tu web. Si pulsas aquí enlazarás con la introducción del curso.
Links a ciertas partes de la misma página: Son links que enlazan con un punto de la misma página. Por ejemplo, si pulsas aquí irás al final de este capítulo.
Links a direcciones de correo electrónico: Para que te puedan escribir mensajes. Pulsa aquí para mandar uno a DIVnet.

Y ahora, los parámetros:

1 .Este es el link más sencillo. Se pone así: <A HREF="url">Link a una web</A> Komo vés, la URL (dirección de la página) no tiene nada que ver con el texto que enlaza. Un ejemplillo: <A HREF="http://pagina.de/benko">aDIVtox: Otra chorrada by BenKo</A> DIVnet: todo sobre programación de videojuegos amateur.

2. Este también es fácil si entiendes el concepto de rutas de archivo. El caso más simple es que la página donde esté el link y la enlazada estén en el mismo directorio, con lo que sería así: <A HREF="archivo.html">Enlace</A> .
Si la página enlazada estuviese en un directorio superior se tendría que poner .. (dos puntos). Ejemplillo:

<A HERF="../archivo.html">

Si la página estuviera en un subdirectorio del directorio en que estamos, se pondría así:

<A HREF="subdirectorio/archivo.html">

Fíjate que los PATH son así / y no así \. ¿Ke a ké se debe esto? A que Güin2 es una basura y tiene que poner las cosas al revés, pork si no, tendrían que admitir que su güindoz es una kopia chapucera..

Por último, imagina que tenemos una carpeta con espacios en blanco. NO pongas el espacio en blanco, en su lugar pon %20.

<A HREF="mis%20webs/archivo.html">

RECOMENDACIÓN: A la hora de publicar la página, algunos servidores no aceptan los nombres largos o con espacios en blanco. Por eso, es mejor nombrar los archivos como en MS-DOS: Con 8 caracteres y sin espacios en blanco. Lo mismo va para las imágenes.

3. Para ello usamos los anchors (anclas). Primero creamos el anchor en el punto donde queremos enlazar, así:

<A NAME="punto1">
Y en el enlace, ponemos:
<A HREF="#punto1">
Y si queremos usar los anchors enlazando a otra web, pues no pasa nada. Los combinamos así:

<A HREF="archivo.html#punto1">

4. Por último, el de los mails. Se usa de esta forma:

<A HREF="mailto:direccion_mail">

Detrás del mailto, pones el mail que quieras.

Y kolorín kolorao, este kapítulo sakabao. Pero no te pienses que ya hemos terminado, ahora toka el ejemplo prasstico. Vamos a crear la sección de links de nuestra web, y vamos a enlazar esta sección con Home. Ahí va el código:

<HTML>

<HEAD>

<TITLE>Links</TITLE>

</HEAD>

<BODY>

<CENTER>

<H1>Links</H1>

<HR COLOR="blue" WIDTH="90%">

</CENTER>

<P>Estos son mis linsk favoritos a otras páginas de DIV Games Studio:

<P><A HREF="http://www.divgames.com">www.divgames.com</A> La página web oficial de DIV.

<BR><A HREF="http://www.stratos-ad.com">www.stratos-ad.com</A> Web oficial de StraTos.

<BR><A HREF="http://www.gratis.net/div">www.gratis.net/div</A> FTP de DIV

<BR><A HREF="http://www.gratis.net/freediv">www.gratis.net/freediv</A>Web oficial del proyecto FreeDIV.

<BR><A HREF="http://pagina.de/divnet?">http://pagina.de/divnet?</A>DIVnet, la primera revista on-line de DIV 100% independiente.

<BR><A HREF="http://pagina.de/benko">http://pagina.de/benko</A>: aDIVtox, otra chorrada by BenKo

<BR><A HREF="http://www.vermail.net/underd">www.vermail.net/underd</A>Página de Underd_

<BR><A HREF="http://pagina.de/ferminho">http://pagina.de/ferminho</A>Ferminho's Domain

<BR><A HREF="http://pagina.de/vital">http://pagina.de/vital</A>La web de ViTaL.

<P>

<P>Con respecto a Internet en general...

<P><A HREF="www.ole.es">www.ole.es</A> ¡Olé! El primer portal hispano

<BR><A HREF="www.yahoo.com">www.yahoo.com</A> Buscador Yahoo!

<BR><A HREF="www.yahoo.es">www.yahoo.es</A> Yahoo! España

<BR><A HREF="www.canalc.com">www.canalc.com</A> Canal C (cadena de TV que trata sobre las nuevas tecnologías).

<BR><A HREF="www.rincondelvago.com">www.rincondelvago.com</A> El Rincón del Vago (para esos trabajillos del cole, del insti o de la uni ) }:-)

</BODY>

</HTML>

Puedes poner los links que quieras en vez de los que yo he puesto. Ah, y nada de hacer eso de COPY & PASTE (copiar y pegar). Ese es el camino fácil y rápido, pero no el mejor. Recuerda resistir al Lado Oscuro. Ke no te pase lo mismo que a Anakin Skywalker, ke se vió tentado y dió lugar a Darth Vader...

Guarda el archivo con el nombre de links.html. Ahora hay que hacer un link a esta sección desde Home. Para ello, abre home.html y añade estas líneas antes del </BODY>

<P>Secciones disponibles por ahora:

<P><A HREF="links.html">Links</A>

Ah, que no se te olvide que home.html y links.html tienen que estar en el mismo directorio para que funcione el enlace que he hecho.

P' atrás | Principio | P' alante