---
Página principal

CAPITULO 3
(Linkando con el Cosmos)

Indice del curso
---

Ya has visto que esto del HTML no es tan dificil como parecía. Ahora eres capaz de crear una página y darle el formato que consideres necesario. Puedes colgar en la red casi lo que te apetezca. ¡Enhorabuena!

Pero una Peich como Dios manda no puede estar aislada del mundo, se supone que la WWW está para poder pasar de una página a otra sin ningún problema, simplemente con un clic del ratón. Para que una parte del texto sirva como link a otra pagina es necesario algo tan simple como encerrar esa parte del texto entre dos tags(confiesa que te lo estabas imaginando):

<A HREF="destino.htm">pica aquí mismo</A>

El Tag <A> </A> indica que lo que hay en medio, en este caso la frase "Pica aquí mismo", es un Hipervinculo (Un Link) y la coletilla HREF="Lo-Que-Sea" indica el destino al que te mandará cuando pique en el con el ratón, en este caso una pagina que está en el mismo directorio que en la que nos encontramos y con el nombre de destino.htm. Pero, ¿y si, en vez de en el mismo, está en un subdirectorio? Pues le indicamos la ruta y en paz:

<A HREF="directorio/destino.htm">pica aquí mismo</A>

Si la página está en el directorio justamente superior (el directorio padre), se indicará la ruta de este modo:

<A HREF="../destino.htm">pica aquí mismo</A>

Y si está en el superior a este (algo así como el abuelo), se haría así:

<A HREF="../../destino.htm">pica aquí mismo</A>

Y si está en un directorio "paralelo" ( como un hermano, digamos):

<A HREF="../directoriohermano/destino.htm">pica aquí mismo</A>

Y así con todas las combinaciones que te puedas imaginar.

Claro, que la mayoría de las peichs a las que puedes querer linkarte están muy lejos, de modo que tendrás que poner su dirección de la red de esta forma:

<A HREF="http://Dirección-De-La-Pagina">pica aquí mismo</A>

mediante la coletilla HTTP:// le estás diciendo al navegador que lo que te vas a encontrar es una pagina web. Pero tambien pueden usarse los links para, cambiando esa coletilla, otras cosillas interesantes como:

MAILTO: Abre el programa de E-Milio (Correo Electronico) para enviar un mensaje a la dirección que indiquemos:

<A HREF="mailto:Dirección@DeCorreo">pica aquí mismo</A>

FTP:// Descarga el archivo que indiquemos de un servidor de FTP:

<A HREF="Ftp://Archivo-Para-Bajarse">pica aquí mismo</A>

Mucho ojo: Si quieres que alguien se descarge un archivo (un zip, por ejemplo) desde tu página, solo tienes que ubicarlo en algún directorio e indicarlo con un link relativo o con el protocolo HTTP. El protocolo FTP solo es necesario para unos servidores especiales que, en principio, no tienen nada que ver con las páginas web.

Y hay otros mas, como GOPHER:// , TELNET: , NEWS: ... Pero esto es un curso para principiantes y tampoco hay que pasarse, ademas, son protocolos que no se suelen utilizar en las páginas Web...

Pero el tag <A>...</A> tiene otras opciones interesantes. Si en tu página incluyes algo parecido a

<A NAME=secc1> SECCIÓN 1 </A>

probablemente no veas nada especial pero, si mas adelante pones algo como:

<A HREF= #secc1>Pica aquí</A>

al hacer clic con el puntero del ratón, esto te llevará al punto concreto de la página donde pusiste la marca (SECCIÓN 1 en nuestro caso). Esto también puede usarse para lincar a un punto concreto de otra página, poniendo la marca anterior en la página de destino y lo siguiente en la página de origen (la peich desde la que linkas):

<A HREF= /directoriodestino/paginadestino.html #seccion>Pica aquí</A>

Si entre los tags <A HREF="pagina"></A> no escribes nada, el navegador te mostrará en ese lugar la dirección a la que indica el link. si haces lo mismo con la opción <A NAME="nombre"></A>, entonces no se mostrará nada en la página, aunque seguira sirviendo como destino del link.

Bueno, aquí tenemos un pequeño lio:
El W3C especifica que cosas como <A NAME=NOMBRE>, <A NAME=Nombre> o <A NAME=nombre> deberían ser lo mismo ( O sea, que no importa que escribas <A NAME=Principal> y luego pongas un link con <A HREF=#PRINCIPAL>). Lo malo es eque existen navegadores que Sí hacen distinción entre mayúsculas y minúsculas, y en ellos el link anterior no funcionará.
La mejor solución es usar nombres exactamente iguales en NAME y HREF, y jamás usar un mismo nombre dos veces cambiando mayúsculas y minúsculas.

Vamos a ver un ejemplillo de todo esto:

<HTML>
<HEAD>
<TITLE>Peich Ejemplo de los Links </TITLE>
</HEAD>
<BODY>
<A NAME=arriba></A>
<P>Este es un ejemplo de una peich con links y esas cosas.<P/>
<P>Puedes copiarla y guardarla como hiciste con las anteriores, ya sabes, con el nombre que prefieras y con la extensión *.htm o *.html para después abrirla con un navegador y contemplar el expectacular resultado de tu destreza y dominio en los secretos del hipertexto del HTML.</P>
<HR>
<P><A HREF="mailto:psicobyte@usa.net">Pica aquí para mandar un E-Milio a MI dirección</A></P>
<P><A HREF="../../index.html">Pica aquí para ir al indice de Edición Extremadamente Simple de HTML</A></P>
<P><A HREF="../html3.html#ejemplo">Pica aquí para regresar al punto exacto por el que ibas</A></P>
<P><A HREF="http://www.geocities.com/SiliconValley/Foothills/2716/slwp.htm">Spanish LAMER Web Page</A></P> (La <FONT COLOR=#FF0000> Spanish LAMER Web Page</FONT> es otra de las DIVERIDISIMAS peichs de Allan Psicobyte que pueden encontrarse en Internet.)</P>
<P>Continua...</P>
<P>Continua...</P>
<P>Continua...</P>
<P>Continua...</P>
<P>Continua...</P>
<P>Continua...</P>
<P>Continua...</P>
<P><A HREF="#arriba">O pica aquí para ir al inicio de esta misma pagina</A></P>
</BODY>
</HTML>

EjemploO, como siempre, pica aquí para verla directamente.

Con esto ya conoces lo mas elemental de los links, mas adelante veremos que tambien se puede linkar a través de imágenes, no solo de texto y, cuando hablemos de los frames, aprenderemos a hacer piruetas de lo mas entretenidas. Por ahora se acaba este capítulo, descansa un rato y ve pensando que maravillas quieres colgar en la Red. Nos vemos en el proximo emocionante capítulo de "Edición Extremadamente Simple de HTML"

---

Capitulo anteriorPrincipio de este capituloIndice del cursoCapitulo siguiente

---

HTML 4.0 VálidoCSS Válido