PROGRAMACIÓN HTML I

SEMANA 5
Diseño de páginas web

Todos los derechos de autor son de la exclusiva propiedad de IACC o de los otorgantes de sus licencias. No está
permitido copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, poner a disposición del público ni 1
ESTE
utilizarDOCUMENTO
los contenidos paraCONTIENE LAdeSEMANA
fines comerciales 5
ninguna clase.
 2
ESTE DOCUMENTO CONTIENE LA SEMANA 5
ÍNDICE

DISEÑO DE PÁGINAS WEB ................................................................................................................... 4

OBJETIVOS ESPECÍFICOS ........................................................................................................................... 4
INTRODUCCIÓN ...................................................................................................................................... 4
1. FUNCIONES DE DISEÑO DE IMÁGENES ....................................................................................... 5
1.1. INSERTAR IMÁGENES EN UNA PÁGINA ............................................................................... 5
1.2. USO DE TEXTO CON IMÁGENES .......................................................................................... 6
1.3. CAMBIO DE ESCALA DE UNA IMAGEN ................................................................................ 7
1.4. ALINEACIÓN DE IMÁGENES ................................................................................................. 9
2. COLOR DE FONDO ..................................................................................................................... 10
3. ALINEACIÓN DE ELEMENTOS DENTRO DE UNA PÁGINA........................................................... 11
4. MÁRGENES ................................................................................................................................ 12
COMENTARIO FINAL.......................................................................................................................... 14
REFERENCIAS........................................................................................................................................ 15

3
ESTE DOCUMENTO CONTIENE LA SEMANA 5
DISEÑO DE PÁGINAS WEB

OBJETIVOS ESPECÍFICOS
 Utilizar el proceso de inserción y formateo de imágenes en el diseño de una página web.
 Aplicar el proceso de alineación de elementos dentro de una página.
 Experimentar con el uso de márgenes dentro de una página web.

INTRODUCCIÓN
Uno de los grandes avances que aportó la web es que terminó con la época en la cual la
información solo podía ser presentada como texto, estableciendo la posibilidad de agregar
información gráfica en base a la inserción de imágenes junto al texto.

Fuente: http://www.aulaclic.es/paginas-web/sitio_flores0/index.htm

Para el diseño de página web se pueden utilizar distintos tipos de archivos, tales como: gif, png,
jpg, etc.

4
ESTE DOCUMENTO CONTIENE LA SEMANA 5
 1. FUNCIONES DE DISEÑO DE IMÁGENES

1.1. INSERTAR IMÁGENES EN UNA PÁGINA

El elemento que permitirá incrustar una imágen dentro de una página web es <img> (image). Este
elemento no posee etiqueta de cierre o clausura, es decir, la utilización de una etiqueta de cierre
no se da al momento de insertar una imagen.

Dentro de la etiqueta del elemento encontraremos el atributo src (source=fuente), cuyo valor será
la url o dirección donde se encuentra el archivo de imagen a incrustar.

Gómez y Alcayde (2011) nos muestran que la forma de escribir el elemento es:

<img src="ruta al archivo que será incrustado">

A continuación se presenta un ejemplo que grafica la manera correcta de insertar una imagen en
un sitio, y la manera de editar sus funcionalidades.

Lo primero que se debe hacer es guardar la imagen que se utilizará en la carpeta “imagenes”
ubicada en el directorio de KompoZer. Para efectos de este ejemplo, se utilizará el archivo
“Playa.jpg”

Para que la imagen quede disponible, se debe incrustar dentro de la página de bienvenida al sitio
“index.html”.

5
ESTE DOCUMENTO CONTIENE LA SEMANA 5
El código que se visualizará en KompoZer es el siguiente:

Y lo que se obtendrá en el navegador Internet Explorer será:

1.2. USO DE TEXTO CON IMÁGENES

Con el atributo alt se puede agregar un texto para la imagen, el cual se mostrará al pasar el mouse
por sobre la imagen en la página web, por ejemplo:

<img src="imagenes/Playa.jpg" alt="Esta es una fotografía de una playa tropical">

6
ESTE DOCUMENTO CONTIENE LA SEMANA 5
Y en el navegador se observa:

1.3. CAMBIO DE ESCALA DE UNA IMAGEN

La imagen del ejemplo que se está revisando (Playa.jpg) tiene unas dimensiones de: 614 píxeles de
ancho y 384 píxeles de alto.

Se puede revisar esto en KompoZer mediante un clic con el botón derecho del mouse sobre la
imagen y seleccionando las propiedades de esta, tal como se visualiza a continuación:

Una vez que se ha seleccionado la opción “Image Properties…” se desplegará un menú a través del
cual se puede observar el tamaño de la imagen, tal como se muestra a continuación:

7
ESTE DOCUMENTO CONTIENE LA SEMANA 5
Se pueden cambiar estas dimensiones para reducir o ampliar la imagen dentro de la página
utilizando los atributos height (alto) y width (ancho).

Por ejemplo, se reducirán las dimensiones de la imagen del ejemplo a un ancho de 307 píxeles por
un alto de 192 píxeles. Para ello se modifica el código HTML mostrado en KompoZer, quedando de
la siguiente forma:

<img src="imagenes/Playa.jpg" alt="Esta es una fotografía de una playa tropical" height="192"

width="307">

A continuación se presenta la visualización de la imagen desde el navegador Internet Explorer.

8
ESTE DOCUMENTO CONTIENE LA SEMANA 5
 1.4. ALINEACIÓN DE IMÁGENES

Por defecto, los elementos como la imagen se alinean a la izquierda, tal como se presenta a
continuación:

Con el atributo align se puede cambiar la alineación de la imagen incrustada. Por ejemplo, si es
necesario que la imagen se alinee a la derecha de la página, se utilizará align=“right”.

Por ejemplo:

<img src="imagenes/Playa.jpg" alt="Esta es una fotografía de una playa tropical" align="right"

height="192" width="307">

Tomando como referencia a Gómez y Alcayde (2011), a continuación se presenta un listado de

atributos que pueden ser utilizados para la alineación de imágenes incrustadas:

TOP: si se desea que el texto esté alineado en la parte superior de la imagen.

MIDDLE: alinea el texto con la parte central de la imagen.

9
ESTE DOCUMENTO CONTIENE LA SEMANA 5
BOTTOM: alinea el texto con la parte inferior de la imagen.

LEFT: alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte
derecha y arriba.

RIGHT: alinea la imagen en la derecha de la página forzando la colocación del texto en la parte
izquierda y arriba.

IMPORTANTE

Los valores middle, top y bottom funcionan correctamente cuando se tiene texto e imagen
dentro de una tabla. Este tema será revisado en las siguientes semanas.

2. COLOR DE FONDO

Es posible establecer un color de fondo distinto al blanco (color por defecto de una página web)
mediante el uso del atributo bgcolor en el elemento <body>, que representa al cuerpo de la
página.

Por ejemplo, se pondrá un color rojo como fondo para la página usando cualquiera de las
alterntivas que se presentan a continuación:

<body bgcolor="red">

< body bgcolor="#ff0000">

Como se ha visto anteriormente, para definir el color se puede utilizar su forma nominal “red” o su
numeral "#ff0000".

En el navegador, este cambio se visualizará de la siguiente manera:

10
ESTE DOCUMENTO CONTIENE LA SEMANA 5
 3. ALINEACIÓN DE ELEMENTOS DENTRO DE UNA PÁGINA

El atributo align también permite la alineación de objetos en pantalla.

Por ejemplo, usado con el elemento <p>, permite alinear el texto de dicho párrafo.

Para alinear a la izquierda se utiliza el siguiente atributo:

<p align="left">

Para alinear a la derecha:

<p align="right">

Y para centrar:

<p align="center">

Para efectos del ejemplo que se ha estado desarrollando esta semana, se centrará el mensaje de
bienvenida, utilizando el siguiente atributo:

11
ESTE DOCUMENTO CONTIENE LA SEMANA 5
 <p align="center">Bienvenidos al sitio de Playa El Sol</p>

La visualización de este cambio en el navegador se presenta a continuación:

4. MÁRGENES

Con otros atributos del elemento <body> se pueden asignar medidas de margen para una página
web. Esto resulta útil para suprimir los márgenes en blanco que se muestran por defecto en los
lados izquierdo y derecho y también arriba y abajo en la página.

Estos atributos son diferentes para Internet Explorer y otros navagadores, por lo que resulta
aconsejable utilizarlos todos para que cada navegador lo interprete adecuadamente.

LEFTMARGIN: indica el margen de los lados de la página y reconocido por Internet Explorer.

TOPMARGIN: indica el margen de arriba y de abajo en la página y es reconocido por Internet

Explorer.

MARGINWIDTH: funcionalidad idéntica a la de leftmargin para otros navegadores.

MARGINHEIGHT: funcionalidad idéntica a la de topmargin para otros navegadores.

Al analizar la página de prueba que se ha utilizado en esta asignatura, se verá que existen espacios
en la zona superior y lateral de la página.

12
ESTE DOCUMENTO CONTIENE LA SEMANA 5
Para dejar los márgenes en cero píxeles, los atributos a utilizar son:

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

Obteniendo en el navegador lo siguiente:

En la imagen anterior se puede visualizar cómo se eliminaron los márgenes que tenía la página por
defecto, apreciándose que la imagen se encuentra ahora pegada al margen izquierdo de la página.

13
ESTE DOCUMENTO CONTIENE LA SEMANA 5
COMENTARIO FINAL
En semanas anteriores se pudo conocer cómo manejar texto dentro de páginas web. Esta semana
se ha avanzado un poco más hacia su diseño completo, incorporando el uso de imágenes y la
personalización de las mismas.

Conocer y utilizar las diversas etiquetas, así como los atributos que permiten un manejo adecuado
de las imágenes, permite incluirlas dentro de páginas que antes estaban conformadas netamente
de texto, lo cual otorga un aspecto aun más agradable al diseño que se quiera llevar a cabo.

Tal como se vio la semana anterior, diseñar una página web es la suma de muchas
consideraciones, y dentro de ellas, el manejo de las imágenes es de suma importancia.

14
ESTE DOCUMENTO CONTIENE LA SEMANA 5
REFERENCIAS
Gómez, J. & Alcayde, A. (2011). Construcción de páginas web. Madrid: Starbook Editorial.

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2015). Diseño de páginas web. Programación HTML I. Semana 5.

15
ESTE DOCUMENTO CONTIENE LA SEMANA 5
 16
ESTE DOCUMENTO CONTIENE LA SEMANA 5