Semana 6

En esta semana se retoma el tema de las tablas HTML, para mostrar cómo pueden expandirse en renglones y columnas. También se proporciona una introducción a la estructura de un archivo CSS, con sus selectores, atributos y valores; y se revisan algunos atributos CSS para manejo del fondo de una página web, tales como: background-color, background-image, background-repeat, background-position, background-attachment, entre otras. Finalmente, se muestra cómo se manejan los atributos de los divs para posicionamiento y tamaño.

Los objetivos que deben cumplirse al final de esta semana son los siguientes:


Presentación. Diapositivas con Tablas con Expansión.
En esta presentación se proporciona una introducción y ejemplos de tablas HTML con expansión de renglones y columnas, utilizando los atributos rowspan y colspan.

Ejemplo de clase. Tablas con expansión.
En este ejemplo, el profesor crea una página web estática, para ilustrar el uso de las tablas con expansión de renglones y columnas, utilizando los atributos rowspan y colspan.
SOLUCIÓN del Ejemplo de clase. Tablas con expansión.
Archivo ZIP con los archivos para la solución del ejercicio de clase, los cuales incluyen: tablaExpansion.html con la estructura de la página web creada.
SOLUCIÓN del Ejemplo de clase. Tablas con expansión.
En este link se abre una pestaña nueva con la solución del ejemplo de clase.

Presentación. Diapositivas con una introducción a CSS.
En esta presentación se proporciona una introducción a la estructura de un archivo CSS, con sus selectores, atributos y valores. Además se revisan algunos atributos CSS para manejo del fondo de una página web, tales como: background-color, background-image, background-repeat, background-position, background-attachment, entre otras.

Ejemplos de clase. Imágenes con CSS.
Archivo ZIP con varios ejercicios acerca de manejo de imágenes con CSS. Contiene los siguientes ejercicios: ejemplo00_backgroundColor.html, ejemplo01_backgroundColor.html, ejemplo01_backgroundImage_perro.html, ejemplo02_backgroundImage.html, ejemplo02_backgroundImage_perro_norepeat.html, ejemplo03_backgroundImage.html, ejemplo03_backgroundImage_perro_repeatx.html, ejemplo04_backgroundImage_cielo_repeatx.html, y ejemplo05_backgroundImage_position.html.

Ejemplo de clase. Manejo de DIVs.
En este ejemplo, el profesor crea una página web estática, para ilustrar el manejo de DIVs, y los atributos para la posición y tamaño de DIVs.
SOLUCIÓN del Ejemplo de clase. Manejo de DIVs.
Archivo ZIP con los archivos para la solución del ejercicio de clase, los cuales incluyen: divs.html con la estructura de la página web creada, y divsEstilos.css con los estilos para el posicionamiento y tamaño de los Divs.
SOLUCIÓN del Ejemplo de clase. Manejo de DIVs.
En este link se abre una pestaña nueva con la solución del ejemplo de clase.