Home
CURSOS SAP
CURSOS it
  ASP.NET
  ASP Clásico
  Java
  SQL Server
  HTML
  UML
  Operación As 400
  Avanzada As 400
  Operación CL 400
  Db2 400 Avanzado
  RPG 400 Interactivo
Especialistas
Webs asociadas
Apoyo escolar
Clases avanzadas
Especiales
Computación
CURSOS On-line
  Introducción a SAP
  Abap con Objetos
  Módulo SD Param.
  Desarrollo de Soft
  HTML y Javascript
  Portales
 
 

[Indice]


Creación de enlaces (links)

El siguiente es sin duda el elemento más importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, pareciéndonos que siempre estamos en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito... En efecto, para la persona que está leyendo sobre un determinado tema, no hay diferencias ostensibles que le hagan notar dónde está el documento que lee. Para el lector, todo parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que lee está repartido por medio mundo, o en un plano más modesto, el documento leído puede estar compuesto en realidad por varios cientos de páginas que "saltan" de unas a otras sin notarlo.

Todo esto lo consigue el elemento <A> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en inglés link=eslabón o enlace).

Pero seguramente te preguntarás qué es eso de un "link". Pues un link es un área de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratón, y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador llamará a la página que tiene asignada el link. Habitualmente por defecto los visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar la estetica en algunos casos, se puede parametrizar con una instruccion de estilo.

Se escribirá:

<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba  </A>.

Y se vería así: Link de prueba

Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas cosas, se puede recurrir a una instruccion de estilo. Así:

<A HREF="http://www.miservidor.es/mifichero.htm"
             style="color:red; text-decoration:none";> Link de prueba  </A>.
Y se vería así:   Link de prueba    (Esto puede que no funcione en algunos navegadores antiguos)

El elemento <A> tiene dos atributos: HREF y NAME.

En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es.

Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay que saltar de una máquina a otra, si el enlace es para otra página de nuestro propio servidor es suficiente escribir la ruta virtual corta: /mifichero.htm o bien: /otro_directorio/mifichero.htm según proceda.

Como has visto, el punto de enlace se realiza en el texto escrito antes del cierre del elemento </A>, pero también puede hacerse con una imagen cualquiera, que iría en lugar del texto, incluso puedes poner el texto junto con una imagen. Por ejemplo para hacer un link que nos lleve al índice desde una bola roja, se escribe:

    Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.
Y este sería el resultado:

Ir al índice

Al igual que el texto aparece subrayado en azul cuando forma parte de un enlace, los gráficos reciben un borde azul alrededor de toda la imagen, lo que a veces puede resultar poco estético. Esto también tiene solución, pero aquí se hace en la instrucción de la imagen:

    Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif" border=0>  </A>.
Y este sería el resultado:

Ir al índice

El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.es en mayúsculas o con alguna otra diferencia, eso es un nombre de máquina y sería interpretado como OTRA máquina. Esto es aplicable a todos los parámetros: servicio (http://) servidor (www.miservidor.es) y fichero (mifichero.htm).
Estas precauciones son ineludibles en el caso de servidores montados en máquinas con sistema operativo UNIX. En el caso de que el servidor resida en una máquina con Windows NT o Windows 95/98, es indiferente. Si no se sabe el sistema que tiene la máquina, es mejor atenerse a la forma UNIX.

Dentro de los parámetros pasados a HREF, podrás ver que al principio pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios :

ServicioDescripciónEjemploEfecto
http://Servicios WWW<A HREF="http://www.uv.es/"> WWW</A>WWW
ftp://Servicios FTP<A HREF="ftp://ftp.uv.es/">FTP</A>FTP
news://Servicios NEWS<A HREF="news://news.uv.es/">NEWS</A>NEWS
mailto://Servicios E-mail<A HREF="mailto:jac@uv.es/">E-mail</A>E-mail
file:///C|Fichero local<A HREF="indice.htm/">Fichero</A>Fichero

Además de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la página que se desee. Se escribirá:

     <A HREF="indice.htm" TARGET="Ventana-2"> </A>
Esta instrucción mostrará la página indice.htm pero con otra ventana del visualizador, es decir tendremos lanzado el visualizador 2 veces.

Del mismo modo, el atributo TARGET puede utilizarse para salir de una pantalla compuesta de frames. En efecto, si estamos en una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la página llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede escribir un link con la sintaxis siguiente:

     <A HREF="indice.htm" TARGET="_parent"> </A>
Existen otros valores para TARGET:

TARGET="_blank": Para que el enlace se muestre en una nueva ventana vacía. También puede darse un nombre cualquiera con el mismo efecto.
TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo referencia.

Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que puede estar en un servidor o ser un fichero local, pero que siempre se nos presentará desde la primera línea del mismo.
El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en cualquier línea del documento de destino, de forma que nos aparecerá en pantalla desde la línea deseada y no desde el principio. Esto es muy útil cuando se trata de documentos largos divididos en secciones.

Se escribirá así:

En el documento activo:

<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A>
En el documento destino:
<A NAME="punto1"></A> 
NAME también puede utilizarse para saltar de una línea a otra dentro de un mismo documento. Se escribirá así:

Dentro del documento activo En la línea de partida:

<A HREF="#punto1">Ir al punto 1</A> 
En la línea de destino
<A NAME="punto1"></A> 
Por ejemplo, si haces "clik" aquí con el ratón, saltarás al principio de esta página.

Como habrás visto en el cuadro de arriba, es posible enviar un e-mail desde un link con la instrucción: <A HREF="mailto:jac@uv.es">Enviar e-mail</A>. Con esta sintaxis se invoca al cliente de correo predeterminado para que abra una ventana con la dirección deseada ya escrita. Si además quieres que dicha ventana se abra con el asunto (subject) y el texto (body) ya escritos se puede conseguir así:

<A HREF="mailto:jac@uv.es?&subject=Asunto de prueba&body=Texto de prueba">Enviar e-mail</A>

Debes saber que...

  • El texto que pongas después del símbolo # puede ser cualquiera, siempre que no tenga espacios en blanco, caracteres especiales ni caracteres codificados, y por supuesto, que no esté repetido en el mismo documento de destino.
  • Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador nos presentará en pantalla la última línea del mismo.
  • Cuando hagas un link, es preferible utilizar direcciones relativas. Si utilizas direcciones absolutas y después tienes que mover los ficheros por cualquier razón, tendrás que modificar todas las direcciones.
  • Si al hacer un link, después del nombre de la máquina no pones el nombre de un fichero, por defecto el servidor entiende que se le pide la "home page" (página inicial).
  • Si un servidor no tiene definida página inicial, simplemente nos mostrará una lista de todos los ficheros y directorios que tenga en el directorio definido como raíz si el servidor tiene activada la opción de listar directorios, en caso contrario, dará un error.
  • Si después de la dirección de la máquina a la que le haces el link en lugar de un nombre de fichero pones el de un directorio, generalmente el servidor nos mostrará un simple listado de los ficheros y directorios que éste contenga si el servidor tiene activada la opción de listar directorios, en caso contrario, dará un error.
  • No sólo puedes montar el link sobre un texto, también puedes hacerlo sobre una imagen cualquiera. Es decir, después del link y antes de </A> puedes poner lo que quieras.
  • El arte de escribir buen HTML reside en dar una buena estructura a la información. Siempre que puedas huye de crear páginas muy largas. Crea cuantas necesites, con buena estructura y enlázalas con cuantos links sean precisos.
  • Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y has utilizado direcciones absolutas, al hacer un link, no empieces con aquello de: "http://....". No funcionará.
  • Si continuas deseando poner direcciones absolutas con ficheros locales, tendrá que ser así file:///C|/MIDIRECTORIO/mifichero.htm
  • Después de C (que puede ser A, B, D o la unidad de disco que quieras) fíjate que va una barra vertical (pipe), y que las barras que separan los directorios y ficheros son barras a la derecha.

[Indice]

HOME | MATERIAS | ESPECIALISTAS | WEBS ASOCIADAS | APOYO ESCOLAR | CLASES AVANZADAS | ESPECIALES | COMPUTACION
 
Plataforma SMS Masivos - www.smscover.com
Desarrollo de software y páginas web por C.E.L.I.T - technology
Posicionamiento en Buscadores por

Copyright © C.E.L.I.T. S.A.

 
 
Curso SEO
Curso de posicionamiento web orientado al desarrollo de negocios.
 
Cursos SAP
Cursos especializados de sistemas SAP orientados a profesionales y empresas. (ABAP/4, FI, SD, BW).
 
Clases X trabajo
Una nueva propuesta para aquellos que desean experimentar una práctica laboral ...
 
OFFICE 2003
La nueva versión del paquete demuestra ser la mas eficaz, el conocimiento de la misma nos permite...
 
Teletrabajo
Una nueva filosofía que está tomando cuerpo en todos los ambitos...