Trabajo 1 Ejercicio 1.

Vamos a insertar en la página gatos.htm una tabla para colocar la imagen del gatito a la

izquierda de la lista. Para eso crearemos una tabla de una fila y dos columnas, en la columna

de la izquierda colocaremos el texto y en la columna de la derecha la imagen.

1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.

2 Haz clic sobre el menú Archivo.

3 Haz clic sobre la opción Abrir. Se abrirá una nueva ventana.

4 En Tipo:, elige Todos los archivos.

5 Selecciona el archivo gatos.htm, que se encuentra en la carpeta animales, y pulsa sobre el

botón Aceptar.

6 Detrás de la etiqueta <hr> añade el siguiente código para añadir una línea en blanco, definir

la tabla, empezar la definición de la primera fila y primera columna de la tabla. Hacemos la

tabla invisible (border="0") y que ocupe todo los ancho de la ventana (width="100%"), la

primera columna ocupará el 70% de la ventana (width="70%") :

<br>

<table width="100%" border="0">

<tr>

<tdwidth="70%">

7 Detrás de la última etiqueta </ul> añade el siguiente código para cerrar la columna y

empezar la otra, ahora la segunda columna ocupará el 30% de la ventana (width="30%"):

</td>

<tdwidth="30%">

8 Detrás de la etiqueta <img> añade el siguiente código para cerrar la columna y cerrar la fila y

la tabla:

</td>

</tr>

</table>

9 Guarda el archivo y cierra el bloc de notas.

10 Abre con tu navegador el archivo gatos.htm, comprueba que ahora la imagen está a la

derecha del texto y si haces la ventana más pequeña, el ancho de las columnas cambia.

Ejercicio 2.

1 Abre el documento perros.htm, de la carpeta originales/animales del curso.

2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis

documentos/ejercicios_html/animales

En el documento que has abierto vamos a crear la siguiente tabla:

DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE

DIFERENCIAS PERRO HOMBRE

PEQUEÑO GRANDE

Duración crecimiento 10 meses 18 a 24 meses 16 años

Tiempo de gestación 58 a 63 días 9 meses

Duración de vida del pelo/cabello 1 año 2 a 7 años

Empezamos por definir la etiqueta de la tabla:

3 Escribe delante de la etiqueta </body>:

<table width="575" border="2" align="center" cellspacing="2" bordercolor="#000000" >

El atributo width nos permite definir la tabla de un tamaño fijo para que ese tamaño no

cambie según el tamaño de la ventana abierta.

Con el valor 2 del atributo border hacemos que el borde externo de la tabla aparezca más

grueso.

El atributo align con el valor center nos permite indicar que la tabla estará centrada con

respecto a la ventana.

Con el valor 2 del atributo cellspacing hacemos que aparezca un hueco entre las celdas de la

tabla.

El atributo bordercolor nos permite definir el color del borde la tabla.

Para que no se nos olvide cerrar etiquetas es mejor añadir la etiqueta de cierre y después

entre la dos etiquetas añadir las otras.

4 Escribe:

</table>

La tabla tiene seis filas (contamos el número mayor de filas) y el texto contenido en ellas está

centrado tanto en horizontal como en vertical:

5 Escribe seis veces:

<tralign="center" valign="middle">

</tr>

Ya hemos definido las filas, ahora las vamos a rellenar con las columnas. Miramos cuál es la fila

con mayor número de columnas, tiene cuatro columnas.

Rellenamos la primera fila, en esta fila aparece una sola columna por lo que hay que indicar

que esta se expande sobre cuatro columnas:

6 Escribe después de la primera etiqueta <tr..:

<tdcolspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td>

Vamos a rellenar ahora la segunda fila.

En esta fila la primera columna se expande sobre dos filas:

7 Escribe después de la segunda etiqueta <tr..:

<tdrowspan="2">DIFERENCIAS</td>

La segunda columna se expande sobre dos columnas:

8 Escribe a continuación:

<tdcolspan="2">PERRO</td>

La tercera columna se expande sobre dos filas:

9 Escribe a continuación:

<tdrowspan="2">HOMBRE</td>

Vamos a rellenar ahora la tercera fila.

En esta fila sólo tenemos que definir dos columnas ya que la primera y la última están incluidas

en el rowspan de la fila anterior.

10 Escribe después de la tercera etiqueta <tr..:

<td>PEQUE&Ntilde;O</td>

<td>GRANDE</td>

Vamos a rellenar ahora la cuarta fila.

En esta fila tenemos que definir las cuatro columnas normales

11 Escribe después de la cuarta etiqueta <tr..:

<td>Duraci&oacute;n crecimiento</td>

<td>10 meses</td>

<td>18 a 24 meses</td>

<td>16 a&ntilde;os</td>

Vamos a rellenar ahora la quinta fila.

En esta fila tenemos que indicar que la segunda columna se expande sobre dos columnas.

12 Escribe después de la quinta etiqueta <tr..:

<td>Tiempo de gestaci&oacute;n</td>

<td colspan="2">58 a 63 d&iacute;as</td>

<td>9 meses</td>

Por último rellenamos la sexta fila.

En esta fila tenemos que indicar también que la segunda columna se expande sobre dos

columnas.

13 Escribe después de la sexta etiqueta <tr..:

<td>Duraci&oacute;n de vida del pelo/cabello</td>

<td colspan="2">1 a&ntilde;o</td>

<td>2 a 7 a&ntilde;os</td>

Veamos el resultado.

14 Guarda los cambios y abre la página con tu navegador.

Ahora añadiremos los colores de fondo. Si quieres puedes ir observando los cambios según los

vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez actualizando la página en

tu navegador (como hiciste en el ejercicio paso a paso del tema 3).

15 Añade background="imagenes/fondopatas.gif" dentro de la etiqueta <table>. De este

modo, la imagen fondopatas.gif pasará a ser la imagen de fondo de la tabla.

16 Añade bgcolor="#669966" dentro de la primera etiqueta <tr>. De este modo, la primera fila

de la tabla será de color verde oscuro.

17 Añade bgcolor="#FFCC99" dentro de la segunda etiqueta <tr>. De este modo, la segunda

fila de la tabla será de color naranja.

18 Añade bgcolor="#FFFF99" dentro de la tercera etiqueta <tr>. De este modo, las celdas de

esa fila, que contienen el texto PEQUEÑO y GRANDE, serán de color amarillo.

Por último cambiaremos las tres primeras filas para que el texto contenido en ellas tenga

formato de cabecera de columna.

19 Sustituye td por th en las líneas que se encuentran entre los tres primeros pares de

etiquetas <tr> y </tr>. De este modo, las celdas de las tres primeras filas pasarán a ser títulos

de columna, por lo que el texto aparecerá centrado y en negrita.