TECNOLÓGICO NACIONAL DE MEXICO

INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

Programación Web

Ejercicios
Ejercicio 2.2

Archivos requeridos: fuente-02.html, estilo-eje22.css, chart-revenue.png

Actividad previa: Coloca el archivo estilo-eje22.css en la carpeta comun/css y el archivo chart-

revenue.png en la carpeta img
1. Utiliza un editor para codificación de HTML y crea un documento HTML que lleve por nombre ejercicio-
22.html; guárdalo en la carpeta ejercicio-22 y asegúrate de tener la siguiente estructura:

2. Inserta la información necesaria para la cabecera del documento HTML

- Título y conjunto de caracteres

- Información para los navegadores y buscadores:

- Vínculo externo a la hoja de estilos

3. En el editor de HTML abre el archivo fuente-02.html, analiza la información y utilízala de acuerdo a

las instrucciones siguientes:

<programación web>
TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

3.1. Copia el contenido que viene en la sección <!-- = Diapositiva 2 == -->, pégala en el archivo
ejercicio-22.html, inserta los elementos de texto <h1>, <p> y <small> como lo muestra la
imagen y visualiza el resultado en el navegador.

3.2. Copia el contenido que viene en la sección <!-- == Diapositiva 3 = -->, pégala en el archivo
ejercicio-22.html, inserta los elementos <strong> y <em> como lo muestra la imagen y
visualiza el resultado en el navegador.

<programación web>
TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

3.3. Copia el contenido que viene en la sección <!-- == Diapositiva 4 = -->, pégala en el archivo
ejercicio-22.html, inserta los elementos <figure> y <figcaption> como lo muestra la
imagen y visualiza el resultado en el navegador.

3.4. Copia el contenido que viene en la sección <!-- == Diapositiva 5 = -->, pégala en el archivo
ejercicio-22.html, inserta los elementos <cite> y <blockquote> como lo muestra la imagen
y visualiza el resultado en el navegador.

<programación web>
TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

3.5. Copia el contenido que viene en la sección <!-- == Diapositiva 6 = -->, pégala en el archivo
ejercicio-22.html, inserta el elemento <time> como lo muestra la imagen y visualiza el
resultado en el navegador.

3.6. Copia el contenido que viene en la sección <!-- == Diapositiva 7 = -->, pégala en el archivo
ejercicio-22.html, inserta el elemento <abbr> de texto como lo muestra la imagen y visualiza el
resultado en el navegador.

<programación web>
TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

3.7. Copia el contenido que viene en la sección <!-- == Diapositiva 8 = -->, pégala en el archivo
ejercicio-22.html, inserta los elementos <dfn> y <cite> como lo muestra la imagen y
visualiza el resultado en el navegador.

3.8. Copia el contenido que viene en la sección <!-- == Diapositiva 9 = -->, pégala en el archivo
ejercicio-22.html, inserta los elementos <sup> y <sub> como lo muestra la imagen y visualiza
el resultado en el navegador.

<programación web>
TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

3.9. Copia el contenido que viene en la sección <!-- = Diapositiva 10 = -->, pégala en el archivo
ejercicio-22.html, inserta el elemento <address> como lo muestra la imagen y visualiza el
resultado en el navegador.

3.10. Copia el contenido que viene en la sección <!-- = Diapositiva 11 = -->, pégala en el archivo
ejercicio-22.html, inserta los elementos <del>, <ins> y <s> como lo muestra la imagen y
visualiza el resultado en el navegador.

<programación web>
TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

3.11. Copia el contenido que viene en la sección <!-- = Diapositiva 12 = -->, pégala en el archivo
ejercicio-22.html, inserta el elemento <code> como lo muestra la imagen y visualiza el
resultado en el navegador.

3.12. Copia el contenido que viene en la sección <!-- = Diapositiva 13 = -->, pégala en el archivo
ejercicio-22.html, inserta el elemento <pre> como lo muestra la imagen y visualiza el
resultado en el navegador.

<programación web>
TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

3.13. Copia el contenido que viene en la sección <!-- = Diapositiva 14 = -->, pégala en el archivo
ejercicio-22.html, inserta los elementos <mark>, <br /> y <blockquote> como lo muestra
la imagen y visualiza el resultado en el navegador.

3.14. Copia el contenido que viene en la sección <!-- = Diapositiva 15 = -->, pégala en el archivo
ejercicio-22.html, inserta los elementos <div> y <span> como lo muestra la imagen y
visualiza el resultado en el navegador.

<programación web>
TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

En el archivo de la hoja de estilos crea los modificadores pagina y arquitectura y vuelve a

visualizar la página para observar los cambios.

3.15. Corrige el documento HTML para que solo tenga un pie de página. Si hay pies de página que no
corresponden a algún artículo, deben integrarse al final del documento en un solo pie de página.

NOTA: Un documento HTML puede contener varios artículos o secciones, pero solo debe tener un
pie de página (<footer> </footer>). Por otra parte, los artículos pueden contener pies de página,
que no tienen relación con el pie de página del documento HTML.

<programación web>