Enlaces WEB

Algo fundamental en cada página, son los enlaces de páginas.
Estos son llamados links o hipervínculos, el tag para estos enlaces es A seguido de HREF, seguido de la dirección URL, será:

<A HREF="Página a enlazar">Escriba un nombre de enlace</a>
Por ejemplo:
<A HREF="index.html">Página principal</a>

Como referencia, diremos que podemos enlazar lo que quisiéramos, ya sea un enlace entre página, con otro sitio WEB, un enlace dentro de la misma página o un correo electrónico.
Si por ejemplo, queremos enlazar la pagina 4 de este manual o la página principal de Microsoft, deberemos poner el siguiente parámetro:

<a href="manual4.htm">Acentos y Tildes</a>
(Enlaza la página 4 de este manual)

<a href="http://www.microsoft.com"> Microsoft</a>
(Enlaza la página de Microsoft)

También tenemos parámetros que le indican al explorador de que manera queremos que se abra el enlace. Para ello se utilizan los Tag´s TARGET ( <a href="pagina a enlazar" TARGET="parámetro">Nombre del enlace</a> ). Si no ponemos ninguno de estos parámetros, el explorador abrirá el la nueva ventana en la que ya esta abierta. Los distintos Tag´s para TARGET son:

TARGET="_new". Obliga al navegador a abrir una nueva ventana.
TARGET="_blank". Obliga al navegador a crear una copia a pantalla completa. Tendremos así dos navegadores abiertos, aunque esta ventana no tiene nombre y no se podrá utilizar como destino de otro hiperenlace.
TARGET="_self". Es el defecto si no ponemos target, el documento se carga sobre si misma, que contiene el enlace.
TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin crear una copia del navegador. Este lo debemos utilizar siempre que la página a la que llamemos pertenezca a otro servidor y sea independiente de nuestra página Web. El comentario anterior es un consejo y no una imposición, es decir no lo exige el atributo en sí, pero si forma parte de las buenas costumbres, pues si no lo hacemos así, parece que queremos anclar a nuestro visitante en nuestra página, aparte de lo molesto que resulta el cargar a lo mejor una página que también utiliza frames.
TARGET="_parent". Cuando se hace un anidamiento de frames se crea una jerarquía, por lo que al hacer uso de este atributo desaparece la jerarquía inferior y el hiperenlace se muestra en el frame jerárquicamente superior.

Como ejemplo, supongamos que en nuestras páginas hay un enlace a las paginas de Microsoft y queremos que esta se abra en una ventana nueva para que nuestras páginas queden por detrás, para ello pondremos el enlace de la siguiente manera:

<a href="http://www.microsoft.com" TARGET="_blank"> Microsoft</a>
(Enlaza la página de Microsoft)

Para realizar un enlace dentro de una página, usamos un marcador este es el símbolo numérico ( # ); este nos va a servir para varias utilidades, por ejemplo si es una página muy larga y queremos que el usuario vaya al principio de la pagina al terminar de leerla se utiliza #TOP, de la siguiente manera:

<a href="manual5.htm#top">Ir al principio</a>

Mueva la página hacia abajo un poco, y vera como sube al principio, al presionar el link "IR AL PRINCIPIO".
También podemos indicar que valla a un lugar predeterminado, dentro de la misma página o en otra página.
Para ello deberemos poner en el destino el siguiente TAG <A NAME="nombre"></a> ,delante del nombre o titulo elegido y en el enlace de la página actual deberemos agregarle #nombre que debe de ser igual nombre que el de NAME, <a href="página elejida.htm#nombre">. También podremos poner la línea completa para el enlace, seria en mi caso, <a href="http://www.qsl.net/cx1ddr/trucosb.htm#nombre">
Aquí, vera como funciona el enlace. Si queremos poner un link, que al presionarlo, valla directamente a la página trucos varios2, y que abra directamente "Como Acelerar mi Maquina Cambiando la Memoria Virtual":

En el enlace pondremos el siguiente TAG:
<a href="http://www.qsl.net/cx1ddr/trucosb.htm#destino"> PULSE AQUÍ</a>

En el destino pondremos delante del titulo elegido el siguiente tag:
<A NAME="destino">¿Como acelerar mi máquina cambiando la Memoria Virtual?</a>

El texto que ponga después de #, podrá ser cualquiera que usted elija. Este texto no puede tener, ni espacios en blanco, ni caracteres especiales y ni caracteres de código.
En el destino se deberá de poner el mismo nombre que en el origen, en este caso
<a name="#destino"></a>, al principio de la frase de la parte de la página que queremos que abra, si este no existe en el destino, por defecto, nos presentara la primera linea de la página de destino.
Para realizar un enlace a otra página WEB de otros, o a otra página nuestra; usaremos el mismo comando pero recuerde que en este caso no deberá poner el parámetro #top o #name.
Si le agregaron, " .. " (sin las comillas),delante de la dirección URL, es para descender de una carpeta a otra. Supongamos que estoy dentro de la carpeta manuales, y la página a enlazar esta en una carpeta anterior, para ello pondremos , <a href="../trucosb.htm#destino"> PULSE AQUÍ</a> ,en este caso de pasara desde la carpeta http://www.qsl.net/cx1ddr/manual, hacia la carpeta http://www.qsl.net/cx1ddr/ y ejecutando la página trucosb.htm. Este ejemplo, es igual al anterior, y la página a abrir, ira directamente a "Como Acelerar mi Maquina Cambiando la Memoria Virtual".
Por el contrario, si queremos entrar a un directorio, pondremos /nombre del directorio ,por ejemplo
<a href="/imagen/uruguay.gif">Acá va el Link</A>, o la combinación de ambas, bajar un directorio y subir a otro directorio donde tengamos la información que quieramos que aparezca:
<a href="../imagen/uruguay.gif">Acá va el link</a>
Si por el contrario queremos realizar un enlace con una imagen, los parámetros de enlace son los mismos pero en lugar del texto pondremos la imagen. Para ello usaremos el TAG <IMG SRC="IMAGEN"> , esta imagen puede estar en el formato que usted quiera (GIF, JPG, BMP, etc., etc.)
Veamos un ejemplo:

<a href="manual4.htm">
<img src="uruguay.gif">
</a>
( Pulse en la bandera de Uruguay, para ir a la página 4 de este manual )

Si lo deseamos, para que la imagen quede mas atractiva, podemos agregarle una marco.
Este marco se coloca con la etiqueta BORDER,el valor cero lo desactiva y los valores del uno al cinco, lo activa.

<a href="manual4.htm">
<img src="uruguay.gif" border="1" alt="Bandera de Uruguay">
</a>
(Pulse en la bandera de Uruguay, para ir a la página 4 de este manual)

<a href="manual4.htm">
<img src="uruguay.gif" border="5" alt ="Bandera de Uruguay" >
</a>
(Pulse en la bandera de Uruguay, para ir a la página 4 de este manual)

También podremos ponerle una leyenda, que cuando el mouse se pose encima aparezca una descripción de la imagen ,para ello se utiliza la etiqueta alt ="leyenda".
Para re dimensionar el tamaño de la imagen, se hace por medio de las etiquetas width="xx", para el ancho, y la etiqueta hieght="xx", para el alto ,siendo xx, el tamaño de la imagen dado en pixeles (valor numérico) o en por ciento

<a href="manual4.htm">
<img src="uruguay.gif" border="1" alt ="Bandera de Uruguay" width="68" hieght="50">
</a>
(Pulse en la bandera de Uruguay, para ir a la página 4 de este manual)

<a href="manual4.htm">
<img src="uruguay.gif" border="1" alt ="Bandera de Uruguay" width="8%" hieght="10%">
</a>
(Pulse en la bandera de Uruguay, para ir a la página 4 de este manual)

Al igual que en el texto, podremos usar el tag TARGET con las imágenes.

<a href="manual4.htm" TARGET="_new">
<img src="uruguay.gif" border="5" alt ="Bandera de Uruguay" width="68" hieght="50">
</a>
(Pulse en la bandera de Uruguay, para ir a la página 4 de este manual)

También podemos hacer que una imagen o un texto haga que active el correo electrónico para que les manden un E-Mail.
Para ello se utiliza el parámetro MAILTO:, dentro de la etiqueta <A></A>, <A HREF="MAILTO:E-MAIL">.
Acá enlazare mi correo electrónico para que vean.

<a href="mailto:cx1ddr@hotmail.com"> Correo de CX1DDR </a>
(Pulse en el vinculo y vera como se abre el correo electrónico)

<a href="mailto:cx1ddr@hotmail.com"><img src="email.gif"></a>

(Pulse en la imagen para que se abra el correo electrónico)

También podemos poner un enlace para que se abra un grupo de noticias.
Para ello substituimos el comando MAILTO:, por el comando NEWS:, <a href="news:grupo de noticias">.
Por ejemplo:

<a href="news://news.mirabile.com"><img src="icq.gif"></a>

También podemos hacer que el usuario descargue una página, archivo, programa, o lo que nosotros queramos, desde nuestras páginas ,para ello usaremos extensiones pre determinadas como son *.zip, *.exe, *.rar, etc. También se puede indicarle al explorador que abra un documento , para ello deberemos usar extensiones conocidas como *.doc, *.txt, *.xlc, *,pdf, etc.
Esto lo hacemos de la siguiente manera:

Para descarga de archivos:
<a href="http://www.qsl.net/cx1ddr/zl.zip">Antena ZL para VHF</a>

Para abrir un documento:
<a href="http://www.qsl.net/cx1ddr/manual/mio.txt">Esto abre un texto</a>

LOS MAPAS:
Otra manera de enlazar paginas entre sí o asía otra dirección, es por medio de un mapa.
Podemos utilizar, los formatos de imágenes para los mapas ( pueden ser GIF O JPG )
Un mapa no es ni más ni menos que una imagen que por medio de la etiqueta <MAP> </MAP>, se divide en zonas para que sea sensibles al mouse.
La forma más sencilla de realizar un mapa, es con los códigos HTML, los parámetros de <MAP> son:
NAME = Con este etiqueta, podremos ponerle un nombre al mapa, este mismo nombre, deberá de agregársele a la imagen que se use, para ello usaremos USEMAP="#NOMBRE DEL MAPA". , por ejemplo:
<MAP NAME="PRUEBA">
</MAP>
<IMG SRC="MAPA.GIF" USEMAP"#PRUEBA">

No olvide de colocar el símbolo numérico (#) en la imagen antes del nombre del mismo.
Donde <MAP>, es la etiqueta de apertura, </MAP>, es la etiqueta de cierre e <IMG>, le indicamos que imagen vamos a usar en nuestro mapa.
Deberemos introducir también las áreas del mapa, esto es debido a que si no indicamos el área, el mapa no funcionara como tal. El área es el enlace entre páginas y puede ser de tres tipos rectángulo, circulo o polígono.
Estas áreas del mapa, se obtiene con cualquier programa de gráficos, como puede ser Paint Shop, es decir con este programa podremos saber los vértices superiores e inferiores del mapa.
**Si usamos un programa de diseño gráfico cualquiera ,como puede ser Paint, y pasamos el mouse por la imagen en la parte inferior nos mostrara el área donde estamos, esta área es importante para definir el área de la imagen donde nosotros queremos que el link actúe como tal, según el área, será la página que enlace.
Las áreas se definen de la siguiente manera:

Rectángulos: se obtienen con
<AREA SHAPE="RECT" COORDS="x,y,x,y" HREF="pagina de enlace ">
En COORDS, se introducirán las secciones del mapa o área, siendo x,y; el vértice superior izquierdo del mapa y el segundo x,y; el vértice inferior derecho del mapa, deberemos poner dos decimales después de la coma, por ejemplo 27,00 o 13,85; unidas ambas áreas por medio de una coma, por ejemplo si el área superior del mapa es 2,05 y el área inferior es 25,78, pondremos <area share="rect" coords="2,05,25,78" href="pagina de enlace">

Círculos: se obtienen con
<AREA SHAPE="CIRCLE" COORDS="x,y,r" HREF="pagina.html">
En este caso, se introduce los parámetros del centro y la de la circunferencia para darle la longitud del radio

Polígonos: se obtienen con
<AREA SHAPE="POLYGON" COORDS="x1,y1,x2,y2,x3,y3,..." HREF="pagina.html">
Se introducen las coordenadas de los vértices de la figura

Área completa de la imagen: se obtienen con
<AREA SHAPE="DEFAULT" NOHREF>
NOHREF, nos indica que el área completa de la imagen no esta activa.

Veamos un ejemplo.
Acá introduzco un mapa y los diferentes parámetros para que vean como funciona.
La imagen fue creada con Power Point, y se le eliminan los bordes blancos que le quedan por medio de Photoed, que se encuentra dentro del CD de Office.
Se abre Paint, y al pasar el ratón por la imagen nos da las coordenadas x,y.
Este es el comando para esta imagen:

<map name="Informatica">
<area coords=0,1,101,40 href="manual.htm" shape=RECT>
<area coords=0,102,207,40 href="manual1" shape=RECT>
<area coords=0,208,299,40 href="manual2.htm" shape=RECT>
<area coords=0,300,400,40 href="manual3.htm" shape=RECT>
<area coords=0,0,0,0 shape=RECT>
</map>
<CENTER>
<img border=1 height=40 src="mapa.gif" usemap="#Informatica" width=400>
</CENTER>

Si quiere probar, pulse una opción y vera como funciona

Podrá diseñar el mapa que quiera con los parámetros correspondientes. En la parte img, aparece width = 400, nos indica que el tamaño total de las imágenes es 400, así que la ultima sección de área deberá de ser 400 y la primera cero.

Por ultimo diremos que si tenemos una página CSS, la manera de enlazarla con una página HTML es la siguiente:

<link rel="stylesheet" type="text/css" href="index.css"title="index">

Estas páginas nos sirven para crear estilos pre determinado e insertarlos en nuestras propias páginas.

---