TECNOLÓGICO NACIONAL DE MEXICO

INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

P
r
o
g
r
a
m
a
c
i
ó
n

W
e
b

E
j
e
r
c
i
c
i
o
s
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 chartrevenue.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>