Las páginas Web además de mostrar texto, son capaces de desplegar imágenes que han de ser creadas en cualquiera de los formatos aceptados: GIF, JPG o PNG. Una imagen con extensión BMP, CDR, PCX o cualquier otro formato diferente no será exhibida en el explorador y en su lugar se mostrará uno de los siguientes iconos, dependiendo del navegador que se tenga:
Una imagen puede ubicarse en cualquier parte de la página, incluso puede ocupar el lugar de un carácter. Para insertar imágenes lo único que se necesita conocer es la ruta y el nombre del archivo que la contiene. La etiqueta <IMG> junto con su atributo SRC ="ruta" permiten mostrar una imagen:
<IMG SRC ="logo.gif">
El ejemplo anterior mostrará la imagen logo.gif ubicada en el mismo directorio donde reside la página web. Si por el contrario la imagen se encuentra en otro directorio o subdirectorio, se debe incluir su ruta en el atributo SRC. La ruta tiene las mismas características ya definidas en el aparte dedicado a “Ubicación de Archivos” de éste módulo. Por ejemplo, SRC=”Imagenes/logo.gif” mostrará la imagen logo.gif, ubicada bajo el subdirectorio Imagenes.
La etiqueta <IMG> cuenta además de SRC con otros atributos que controlan la manera como se desplegarán las imágenes:
ALT ="Texto alternativo" Permite definir un texto que aparecerá en caso de que la imagen por alguna razón no pueda ser mostrada, o cuando se desplaza el puntero del ratón sobre la imagen ya desplegada.
HEIGHT = ”XX” y WIDTH = ”XX” Medida en píxeles del alto y ancho de la
imagen. Aunque estos atributos son opcionales, es conveniente incluirlos para que
de esta manera el navegador conozca el tamaño de la imagen antes de descargarla.
Con ellos podemos controlar además el tamaño original de una imagen. Si por
ejemplo, se quiere que logo.gif, que originalmente tiene 120 x 120 píxeles, sea
imagen. Aunque estos atributos son opcionales, es conveniente incluirlos para que
de esta manera el navegador conozca el tamaño de la imagen antes de descargarla.
Con ellos podemos controlar además el tamaño original de una imagen. Si por
ejemplo, se quiere que logo.gif, que originalmente tiene 120 x 120 píxeles, sea
mostrada a la mitad de su tamaño en el navegador, basta con escribir una de las tres líneas siguientes, siendo más recomendable la tercera:
<IMG SRC ="Imágenes\logo.gif" HEIGHT = “60” >
<IMG SRC ="Imágenes\logo.gif" WIDTH = “60” >
<IMG SRC ="Imágenes\logo.gif" WIDTH = “60” HEIGHT = “60” >
Sí se desea cambiar el tamaño de la imagen de manera proporcional, solo es necesario incluir uno de los dos atributos.
ALIGN = ”Alineación de texto” Permite especificar la alineación respecto de la imagen de un texto que se escriba inmediatamente después de la etiqueta <IMG>. El texto en mención, puede alinearse arriba, utilizando TOP como valor; en el centro de la imagen, si utilizamos MIDDLE y en la parte inferior de la misma, si el valor para ALIGN es BOTTOM. Además, el atributo ALIGN puede recibir el valor LEFT, con lo que la imagen se colocará a la izquierda del texto, o RIGHT, caso en el que la imagen aparecerá a la derecha.
BORDER ="X" Dibuja un borde o marco negro de x puntos alrededor de la imagen. Si se omite este atributo, simplemente no se dibujará ningún borde.
Para comprender mejor el comportamiento de las imágenes, copie en un directorio denominado Imágenes el siguiente logotipo y luego escriba en un archivo las líneas que a continuación se muestran:
<IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamaño original" ALIGN = “middle” BORDER=”3”>Texto alineado en la mitad de la imagen <P>
<IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamaño 60 x 60
píxeles" HEIGHT = 80 ALIGN= “Bottom” >Texto alineado abajo de la
imagen <P>
píxeles" HEIGHT = 80 ALIGN= “Bottom” >Texto alineado abajo de la
imagen <P>
<IMG SRC ="Noexiste.gif" ALT ="No existe la imagen"> Texto
VÍNCULOS
Como ya se mencionó, una de las etiquetas más importantes de HTML es la
que permite, a través de vínculos o enlaces, navegar por las diferentes páginas y
sitios en la red. Se pueden colocar enlaces que nos lleven a un lugar específico en la
misma página, que abran otra página o un sitio nuevo e inclusive utilizar un vínculo
para enviar un correo electrónico a una dirección dada o permitir que el usuario
descargue y ejecute, o guarde archivos ubicados en una localización remota.
que permite, a través de vínculos o enlaces, navegar por las diferentes páginas y
sitios en la red. Se pueden colocar enlaces que nos lleven a un lugar específico en la
misma página, que abran otra página o un sitio nuevo e inclusive utilizar un vínculo
para enviar un correo electrónico a una dirección dada o permitir que el usuario
descargue y ejecute, o guarde archivos ubicados en una localización remota.
Un vínculo puede ser colocado sobre una zona de texto o sobre una imagen, lo que lo convierte en un elemento “sensible”. Es decir, el elemento responderá a acciones tales como hacer clic, doble clic o desplazar el puntero del ratón sobre él. Si el enlace se coloca sobre una franja de texto, ésta aparecerá subrayada y con diferente color; si es una imagen la que lo soporta, HTML entonces le colocará un borde del color definido para el atributo LINK de la etiqueta BODY.
VÍNCULOS DENTRO DE LA PÁGINA
Para facilitar la navegación dentro de una página cuando su contenido es demasiado largo y al desplegarla ocupa más de una pantalla, se pueden colocar enlaces que lleven al usuario a sitios específicos o predeterminados de la misma. Para esto, se deben utilizar dos atributos de la etiqueta <A>:
<A NAME = "nombre">Texto de marca</A> sirve para marcar la zona
de nuestra página a la cual saltará el explorador cuando demos clic sobre el enlace
definido por la etiqueta <A HREF = "#nombre">Texto de enlace</A> que es la que en realidad contiene el enlace.
de nuestra página a la cual saltará el explorador cuando demos clic sobre el enlace
definido por la etiqueta <A HREF = "#nombre">Texto de enlace</A> que es la que en realidad contiene el enlace.
EJERCICIO 3
Una vez obtenido el resultado deseado, abra la página en el browser y
observe que su contenido ocupa más de una pantalla. Nos interesa colocar enlaces sobre los literales a. El motor y b. La transmisión, de tal forma que al dar clic sobre cualquiera de ellos, el explorador nos lleve a la sección deseada. Para lograrlo, agregue las siguientes etiquetas en los lugares apropiados:
observe que su contenido ocupa más de una pantalla. Nos interesa colocar enlaces sobre los literales a. El motor y b. La transmisión, de tal forma que al dar clic sobre cualquiera de ellos, el explorador nos lleve a la sección deseada. Para lograrlo, agregue las siguientes etiquetas en los lugares apropiados:
ENLACES A OTRA PÁGINA
Para ilustrar el uso de enlaces a otras páginas, se utilizarán Menu.html (creada en el ejercicio 2), Automóvil.html y dos páginas nuevas:
Computador.html y Telefono.html, que se crearán con los siguientes textos:
Computador.txt y Telefono.txt. Las páginas así creadas deben guardarse dentro
del mismo directorio. La idea es que al abrir Menu.html en el explorador, se pueda
desde allí acceder a cualquiera de las otras tres páginas (Automóvil, Computador y
Teléfono). Para esto se debe editar la página Menu.html y agregar los links
faltantes:
Computador.txt y Telefono.txt. Las páginas así creadas deben guardarse dentro
del mismo directorio. La idea es que al abrir Menu.html en el explorador, se pueda
desde allí acceder a cualquiera de las otras tres páginas (Automóvil, Computador y
Teléfono). Para esto se debe editar la página Menu.html y agregar los links
faltantes:
<LI><A HREF="Automovil.html">Automóvil</A>
<LI><A HREF="Computador.html">Computador</A> <LI><A HREF="Telefono.html">Teléfono</A>
En el ejercicio 3, cuando se definieron enlaces a otras secciones dentro de la
misma página, el atributo HREF contenía el nombre de una sección predefinida,
precedida por el signo #. Cuando se quiere crear un enlace a otra pagina que reside
dentro del mismo nivel, vale decir dentro del mismo directorio, el atributo HREF
debe contener la ruta y el nombre completo de la página y su extensión. La ruta
cumple con las mismas características ya explicadas en la sección dedicada a la
ubicación de archivos.
misma página, el atributo HREF contenía el nombre de una sección predefinida,
precedida por el signo #. Cuando se quiere crear un enlace a otra pagina que reside
dentro del mismo nivel, vale decir dentro del mismo directorio, el atributo HREF
debe contener la ruta y el nombre completo de la página y su extensión. La ruta
cumple con las mismas características ya explicadas en la sección dedicada a la
ubicación de archivos.
Es importante anotar, que en lo que se refiere a nombres de archivos y páginas, HTML es sensible a las mayúsculas. Es decir, Telefono.html es diferente a telefono.html. Lo anterior no se aplica a las etiquetas como ya se explicó.
ENLACES A PÁGINAS REMOTAS
La verdadera potencia del lenguaje HTML consiste en que permite enlazar y acceder páginas Web localizadas en cualquier servidor y punto geográfico del mundo, para lo cual lo único que se necesita conocer es su dirección, que constituye el valor (“nombre”) del atributo HREF.
Por ejemplo, la etiqueta para colocar un enlace a mi servidor, cuya dirección es www.dokeos.com, es:
<A HREF ="http://www.dokeos.com"> IR A DOKEOS </A>
Los caracteres http se refieren al tipo de servicio o protocolo que presta el servidor, en este caso protocolo de transferencia de hipertexto, en inglés HyperText Transfer Protocol. Aunque existen otros servicios como ftp, telnet, y news, no es del alcance de éste modulo profundizar en ellos.
El procedimiento para utilizar una imagen como elemento de enlace es similar al anteriormente explicado. En el siguiente ejemplo, se utilizará la imagen Hormiga.gif como elemento de enlace.
<A HREF ="http://www.masterlinux.org">
<IMG SRC ="Hormiga.gif" HEIGHT=100 ALIGN="left">
</A>
</A>
ENLACE AL SERVICIO MAIL
El protocolo o servicio mailto permite definir otro tipo de enlace, que activa la herramienta de correo electrónico para enviar un mensaje a la dirección definida en el atributo HREF. Este enlace, al igual que los anteriores, puede ser colocado indistintamente sobre imágenes o texto.
<A HREF="mailto:cempros@gmail.com"> Escribanos </A> si desea recibir más información.
Al abrir esta página en el explorador, la palabra “Escribanos” aparecerá subrayada, y al dar clic sobre ella se desplegará la herramienta de Mail, lista para enviar un mensaje a mi cuenta de correo.
No hay comentarios:
Publicar un comentario