3.1. Enlaces (links).
Hasta ahora hemos visto como crear un documento HTML con texto, pero lo más importante del lenguaje HTML, y que lo distingue de un simple procesador de textos es la de incluir hipertexto o referencias a otros documentos o partes del mismo, así como imágenes y otros elementos multimedia como sonido, animaciones, escenarios 3D navegables... todo esto lo veremos en este tema.
Un enlace (link) consiste en una referencia a otra página o a otra zona de nuestro propio documento. El usuario verá una palabra o frase subrayada, y al pulsar sobre ésta, el navegador web le llevará al documento indicado, ya esté en nuestro disco duro o en cualquier servidor de Internet de todo el mundo. (bueno, si has llegado hasta estas páginas, tambien supongo que sabes como son las direcciones en Internet y más o menos cómo funciona todo esto, no?).
En este cursillo sólo vamos a ver referencias a otras páginas, que son las más usadas en la práctica. Para otro tipo de referencias consulta la sección de direcciones de interés, donde encontrarás cursos más completos.
Como siempre, habrá que rodear el texto que queramos que se convierta en un enlace entre etiquetas HTML. En este caso:
<A HREF="direccion a donde ir"> ...
</A>
donde 'direccion a donde ir' representa el documento referenciado, con el lugar donde se encuentra y su ruta de acceso. Normalmente será una dirección Internet (http://...).
Si el documento está en el mismo servidor que el nuestro no es necesario poner la dirección completa, sino la ruta de acceso al arhivo (ej: /pepe/index.html).
El texto que forma el enlace aparecerá de un color distinto al texto normal (generalmente azul) y subrayado. Ademas en la mayoria de los browsers el cursor del ratón cambiará al ponerse sobre un enlace.
Un ejemplo:
pulsa <A
HREF="http://www.eps.ua.es/clubasm/">aqui</A>
para ir al Club DSO.
se vería como:
pulsa aqui para ir al Club DSO.
De forma similar a como cambiábamos el color del texto por defecto podemos cambiar el color en que aparecen los enlaces:
<BODY LINK="#xxxxxx">
...
...
</BODY>
donde 'xxxxxx' es el código de color (debería ser distinto del color del texto, para poder diferenciar un enlace de una palabra subrayada).
3.2. Imágenes.
Para insertar una imagen en nuestro documento basta con colocar el siguiente comando en el lugar del texto donde queramos situarla:
<IMG SRC="archivoImagen">
donde 'archivoImagen' es el archivo que contiene la imagen, y debe ser nombrado con la ruta de acceso al archivo, ya sea en un sistema local (nuestro disco duro o servidor) o en cualquier servidor de Internet (exactamente igual que cuando nombrabamos archivos de paginas HTML al hacer enlaces en la sección anterior).
Ejemplo:
aqui va un dibujo: <IMG SRC="dibujo.gif">
queda:
aqui va un dibujo: 
en este ejemplo la imagen se encuentra en el mismo directorio que la pagina que la contiene, por lo que no es necesario poner ruta de acceso. (igual se haría para referenciar un documento HTML en un enlace).
Otro ejemplo:
aqui va otro dibujo: <IMG
SRC="http://www.geocities.com/SoHo/5155/logo.gif">
en este otro caso la imagen se encuentra en otro servidor (http://www.geocities.com), y la ruta de directorios hasta llegar al archivo es: /SoHo/5155/logo.gif
¿Que formato de imagenes utilizar?
Los navegadores web reconocen de forma estandard únicamente los formatos gráficos: GIF y JPEG, que además son los mas adecuados para Internet, ya que ocupan poco espacio y se cargan rápidamente (la transmisión de datos a través del modem es aún muy lenta).
Aunque la mayoría de los navegadores actuales incorporan 'plug-ins' para visualizar otros formatos gráficos, te recomiendo que uses imágenes GIF o JPEG para que todo el mundo pueda verlas sin problemas.
Hay muchas utilidades shareware y de dominio público que convierten imágenes a estos formatos. Puedes bajarte alguna de ellas en la página de Programas y Utilidades.
Una vez que sabemos poner una imagen y que sabemos hacer enlaces a otros documentos también podemos hacer enlaces en imágenes, de forma que al pinchar en la imagen nos lleve a otro documento. Símplemente hay que introducir la imagen en el area de acción del comando enlazar que vimos en la seccion anterior:
<A HREF="http://www.eps.ua.es/clubasm/"><IMG
SRC="dibujo.gif"></A>
puedes probarlo:
El comando que hemos visto para colocar imagenes (IMG) admite varios parámetros adicionales aparte del nombre del archivo, y que pueden ser útiles:
ejemplos:
<IMG SRC="foto.jpg" WIDTH="514"
HEIGHT="39">
Mediante WIDTH y HEIGHT especificamos el tamaño con el que se mostrará la imagen en el documento, donde WIDTH es el ancho y HEIGHT el alto (en pixels).
<IMG SRC="foto.jpg"
ALIGN="alineación">
Nos permite alinear la imagen respecto a los elementos de la misma línea. Algunos posibles valores de 'alineación' son: MIDDLE (a media altura), TOP (arriba) y BOTTOM (abajo).
Recuerda que se pueden usar los comandos para alinear texto para hacer
lo mismo con las imágenes y resto de elementos (ej: <CENTER>
... </CENTER> ).
<IMG SRC="foto.jpg" ALT="aqui va una
foto">
No todos los visores de paginas web funcionan en modo gráfico o permiten visualizar imágenes (p.e. Lynx). Mediante el parámetro ALT="comantario" definimos un texto alternativo que aparecerá si el browser no puede cargar la imagen.
<IMG SRC="foto.jpg" BORDER=0>
Cuando se usa una imagen como enlace (link) con otro documento, la imagen aparece enmarcada del mismo color que el texto de los enlaces, para indicar que es un link.
Esto a veces no nos interesa ya que pude quedar feo, y podemos eliminar el borde en la imagen con este comando.
* Nota: todos estos parámetros, así como los parámetros que añadimos a otros comandos o etiquetas (como <BODY>) pueden aplicarse varios a la vez, separándolos por espacios. Por ejemplo:
<IMG SRC="foto.jpg" BORDER=0
WIDTH="20"
HEIGHT="18">
En la sección 2.2 (Tipos y efectos de texto) vimos que se podía modificar el color del fondo añadiendo un parametro extra a la etiqueta <BODY>. Pues de la misma forma podemos definir una imagen de fondo, que será automáticamente duplicada y repetida a lo largo de todo el documento HTML por el visor HTML, a modo de textura o patrón.
El parametro a añadir es:
<BODY BACKGROUND="archivoImagen">
Como ejemplo, las texturas que aparecen en la parte del índice de estas mismas páginas.
La imagen debe ser pequeña, debemos tratar de que más o menos encaje bien al duplicarla (que no se noten los bordes) y sobre todo que tenga unos colores con muy bajo contraste y del color opuesto al texto, ya que de forma contraria hace muy difícil la lectura de éste.
Por último, ahora que ya sebes poner imágenes, y antes de que empieces a llenar tus páginas web de fotos, un consejo: no hay que abusar de las imágenes. Recuerda que las velocidades de transferencia de los modems son muy lentas, y que la mayoría de la gente está gastandose un dinerillo en facturas de teléfono por el tiempo que tarda en cargar las paginas HTML de Internet, así que usa pocas imágenes y pequeñas para que se puedan cargar rápidamente.
Una posible solución a este problema es poner versiones en miniatura de las imágenes con enlaces a versiones más grandes.
3.3. Multimedia (video, sonido, 3D...).
Las páginas HTML no sólo contienen texto e imágenes, sino que podemos colocar cualquier tipo de archivo. Mediante la sintaxis para definir enlaces que vimos en la seccion 3.1 podemos colocar en cualquier lugar de nuestra página un enlace (link) a un archivo que no tiene por que ser otro documento HTML, sino que podemos poner una referencia a una imagen, un video, sonido, archivos o incluso mundos 3D que podemos navegar en tiempo real (bueno, eso de "tiempo real" ya depende de la velocidad de tu ordenador ;-)
Se define de la misma forma que definíamos los enlaces a doumentos HTML, pero sustituyendo el nombre del archivo HTML referenciado por el del fichero o recurso multimedia:
<A HREF="archivo"> ... </A>
Ejemplos:
<A HREF="sonido.wav">aqui</A> hay
un sonido.
<A HREF="peli.mov">aqui</A> hay
una pelicula QuickTime.
<A HREF="programa.zip">aqui</A>
hay un programa comprimido.
Al "pinchar" con el ratón en ese enlace podremos copiarnos el archivo a nuestro disco duro (igual que nos bajamos programas de Internet), o mejor aún, si disponemos del 'plug-in' adecuado podremos verlo o escucharlo desde el propio navegador web.
Actualmente las últimas versiones de los navegadores incluyen 'plug-ins' de serie (o se pueden bajar de Internet) para prácticamente todos los tipos de archivos imaginables. Por ejemplo Netscape 3.0.
Bueno, ya hemos terminado este tema. Con lo que has visto hasta ahora ya deberías poder hacer páginas web bastante decentes.
De todas formas, si quieres profundizar un poco más, aún quedan 2 temas. Ánimo.
Otros Links de Interés:
Cocina - Videos - Juegos Gratis - Postales cachondas - Cine - Programas Gratis - Letras de Canciones
Listas de todos los Tutoriales Gratis. 1998- 2007 - -
Los
tutoriales y cursos aquí reunidos son una recopilación de los mejores encontrados en
Internet.
El crédito y copyright de los mismos si lo hubiere corresponde al autor de cada
uno de ellos.
Si tu tutorial o curso está aquí, y deseas darlo de baja de esta recopilación o
quieres añadir el tuyo,
envíanos un mensaje desde
aquí