Curso de creación de sitios web - Lección 2 - Página 2

Añadiendo imágenes

Añadiendo imágenes a nuestra página web
La etiqueta <IMG>

Desde luego, una de las acciones más importantes y sobre todo que más destacan en un sitio web, es la incorporación de imágenes para completar el diseño general de nuestras páginas.
Tienen razón cuando se dice que una imagen vale más que mil palabras, pero siempre teniendo en cuenta que no debemos nunca abusar de esta ventaja y aplicarlas cuando hace falta y es necesario. Un buen ejemplo a esto que estamos diciendo, son las imágenes que acompañan nuestro curso para Webmasters, donde gracias a ellas podemos comprender mucho mejor todas las explicaciones.

A estas alturas del curso, seguro que ya estás familiarizado con varias de las etiquetas más usadas en HTML. Sabemos que existen etiquetas para aplicar saltos de línea (<br>), para definir párrafos (<p>), para decorar nuestro texto en negrita (<b>) y algunas más que hemos aprendido. Pues bien, añadir una imagen en una página web, también hace uso de una etiqueta: <img>

Nota: Esta es otra de las etiquetas que no tienen cierre, es decir, no hay </img> como se podría pensar.

<img> por si sola no puede definir una imagen, y tenemos que ayudarnos de una serie de atributos que nos permitirán indicar qué imagen vamos a agregar, donde está ubicada, su tamaño, si tendrá un borde y de qué manera vamos a alinearla. Veamos cuales son:

1. SRC="nombre.gif"
2. ALT="comentario"
3. HEIGHT="altura"
4. WIDTH="ancho"
5. BORDER="grosor"
6. ALIGN="alineación"

Con el primer atributo, definimos el nombre de la imagen. También podemos agregar la ubicación de la misma, es decir, que si se encontrara en un directorio superior llamado imagenes, podríamos escribir

SRC="imagenes/nombre.gif"

Si no lo hacemos, la imagen no aparecerá por más que miremos la pantalla. Tenlo muy en cuenta.

El segundo atributo es un comentario. En ocasiones habrás visto que cuando dejas el ratón sobre una imagen, se muestra un pequeño letrero con un texto. Este texto es el comentario que hemos agregado con ALT.

El tercer y cuarto atributo hacen referencia a la altura y anchura de la imagen respectivamente. No es obligatorio, pero casi porque permitirá acelerar la carga de nuestra página web. Si no lo ponemos, el navegador que tenga que cargar la imagen deberá esperar a recibirla para saber su tamaño; si ya se lo indicamos, dejará el hueco justo para que quede bien insertada una vez recibida y así nuestro texto y resto del diseño de la página no se verán afectados por, por ejemplo, una carga incorrecta de la imagen.

El quinto atributo hace referencia al grosor de un borde que podemos añadir a cualquier imagen. De esta manera añadimos un marco que rodea a la imagen, haciendo visible por ejemplo el lugar que va a ocupar, o bien, delimitar su contorno para una mejor comprensión o diseño.

Por último, el sexto atributo hace referencia a la alineación de la imagen. Ya vimos en la página anterior que podemos alinear el texto a la izquierda, derecha o centro. Pues bien, con las imágenes pasa exactamente lo mismo, solo que además tenemos otras posibilidades de alineación. Veamos cuales son:

• ALIGN="top". Sitúa la parte superior de la imagen en la primera línea de texto.
• ALIGN="bottom". Sitúa la parte inferior de la imagen en la primea línea de texto.
• ALIGN="left". Sitúa la imagen a la izquierda.
• ALIGN="right". Sitúa la imagen a la derecha

Nota: Fíjate que no hay posibilidad de alinear la imagen al "centro". Veremos cómo se hace un poco más adelante.

Bien, hasta el momento hemos repasado teóricamente casi todo lo necesario para añadir una imagen basándonos en la etiqueta IMG y todos sus atributos. Si no estás familiarizad@ un poco con el código HTML quizá tengas un lío, pero no te preocupes porque lo entenderemos sin problemas con los ejemplos siguientes.

Vamos a añadir en esta misma página, una imagen de un PC portátil o laptop. Primeramente lo haremos haciendo uso de la etiqueta y atributos que acabamos de aprender. Necesitamos varios datos según lo anterior. Estos son los siguientes:

• NOMBRE: portatil.gif
• ALTURA: 95 pixels
• ANCHO: 120 pixels

Escribimos ahora el código correspondiente en nuestra página:

<img src="images/2/portatil.gif" height="95" width="120">

Este es el ejemplo más sencillo, sin añadir tantos atributos; vemos también que la imagen está guardada en un directorio images y un subdirectorio 2. Si no le decimos donde la queremos alineada, el navegador tomará el valor por defecto, que es a la izquierda de la página. Veamos el resultado:

En realidad podríamos haberle dado otras dimensiones distintas; nada nos impide indicar que la altura de la imagen anterior es 120 y la anchura 75. Veamos qué pasaría:

Como ves, el navegador atiende siempre a lo que le hemos indicado en el código HTML, por lo que tenemos el control de las dimensiones de la imagen. El problema es que la imagen se deforma y pierde calidad como puedes comprobar, aunque en ocasiones, puede ser una ventaja. A medida que vayas creando páginas, tu mism@ sabrás cuando deberás aplicar tamaños diferentes.

Ahora, vamos a agregar un borde a la imagen. El código sería el siguiente:

<img src="images/2/portatil.gif" height="95" width="120" border="3">

El resultado sería:

Ahí lo vemos, un borde negro de 3 pixels enmarca nuestro PC portátil.

Veamos ahora cómo alinear la imagen. Vamos a ponerla por ejemplo, a la derecha de la pantalla:

<img src="images/2/portatil.gif" height="95" width="120" border="3" align="right" >

Bien, pues ya la tenemos a la derecha. Si quisiéramos la imagen al centro, no hay posibilidad de hacerlo con ALIGN; para ello deberemos usar la etiqueta <P> de la siguiente manera:

<p align="center"> <img src="images/2/portatil.gif" height="95" width="120" border="3"></p>

. Pruébalo en tu página de ejemplo que has ido creando con nosotros en lecciones anteriores. Busca una imagen en tu disco duro y añádela de la manera que hemos visto hasta el momento.

En ocasiones también nos gustaría alinear una imagen a la izquierda o derecha para añadir un texto a su alrededor; el problema es que si no le indicamos nada, el texto queda demasiado pegado a la imagen y la verdad, no queda muy estético. Este efecto lo solucionamos agregando un espacio vertical y horizontal alrededor de la imagen, algo así como un borde transparente, con el fin de que el texto se aleje esa distancia definida.
Para lograrlo hacemos uso de hspace y vspace.

Por ejemplo:

<img src="images/2/portatil.gif" height="95" width="120" align="left" hspace="5" vspace="5">

Esto es un texto de prueba.

Esto es un texto de prueba.

Esto es un texto de prueba.

Esto es un texto de prueba.

Esto es un texto de prueba.

Podemos apreciar, que las frases anteriores, quedan separadas de la imagen y así podemos leer el texto cómodamente.

Agregar imágenes con Trellian Webpage

Como es habitual, añadir imágenes con un programa de diseño web, es más sencillo que escribir códigos, pero como siempre decimos, nos vendrá bien saber como  trabaja uno de estos programas a nivel interno para posteriormente optimizar el código y salir de muchos apuros.
Iniciamos por tanto Trellian y creamos una página nueva o bien, abrimos una página que ya tuvieramos creada anteriormente.
Para añadir una imagen, tan solo deberemos pulsar el icono siguiente:

Se nos abrirá entonces una ventana tipo explorador de Windows, mediante la cual escoger la ubicación de nuestra imagen e insertarla fácilmente. Haciendo uso de Trellian no tenemos que saber qué tamaño tiene la imagen porque el programa lo detecta de forma automática. El resultado sería el siguiente:

Veamos su código. Pulsamos la pestaña y nos encontramos con:

Podemos llevarnos una sorpresa, porque el código es mucho más simple del que podríamos esperarnos. No hay definición de altura, anchura ni otros atributos. ¿Qué ha pasado? Tenemos que obligar a Trellian a que los añada. Para ello, pulsamos la pestaña , hacemos click con el botón derecho del ratón sobre la imagen:

Y seleccionamos Properties (propiedades) tal y como se muestra. Se nos abre la siguiente ventana:

Y desde aquí podemos definir todos los parámetros que queramos sobre nuestra imagen. Ya nos suenan familiares porque los hemos visto anteriormente. Además, Trellian nos informa de el ancho de la imagen, el alto, si hemos definido los espacios verticales y horizontales (vspace, hspace), la posición de alineación (alignment), el texto "Alt" que está vacío, el borde (border), etc. Si nos fijamos, en Alignment hay más posiciones de alineación que no habíamos estudiado. Desde aquí podrás hacer pruebas para ver su efecto y aplicarlas cuando lo creas conveniente.

Vamos a cambiar algunos parámetros de los atributos para agregárselos a nuestra imagen y mostraremos el código nuevamente, pulsando . El resultado es (en verde):

<HTML>
<HEAD>
<TITLE>Agregando una imagen</TITLE>
</HEAD>
<BODY>
<P><IMG height=95 alt="Esto es una imagen de un PC portátil" hspace=5
src="images\2\portatil.gif" width=120 align=top vspace=5 border=1></P>
</BODY>
</HTML>