U2 07 Ejercicios 03

TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO
Programación Web
Ejercicios
Ejercicio 2.3
Archivos requeridos: estilo-eje23.css
En este ejercicio se crearán 3 documentos HTML, a los cuales se le insertarán imágenes e hipervínculos
para poner en práctica los temas vistos en clase.
Actividad previa: Coloca lo archivo estilo-eje23.css en la carpeta comun/css; la estructura de

archivos debe ser similar a la siguiente imagen:
Los documentos tendrán una navegación como se muestra en la siguiente imagen:
<programación web>
PAGINA DE INICIO (ejercicio23.html)
1. Utiliza un editor para codificación de HTML y crea un documento HTML, que será la página de inicio y
asígnale el nombre de ejercicio23.html
2. En el documento ejercicio23.html inserta la información del encabezado:

- Título y conjunto de caracteres
- Información para los navegadores y buscadores
- Vínculo externo a la hoja de estilos (CSS)
3. En la sección del <body> crea la estructura semántica que incluya:
3.1. Dos imágenes: una en su tamaño real y a la derecha la misma imagen pero escalada a la mitad de
su tamaño, con los atributos para ello. Las imágenes pueden ser del tema de tu preferencia (por
ejemplo arte, música, deportes, películas, entretenimiento, investigación, etc.)
3.2. Un párrafo que hable del tema elegido y que sea congruente con la imagen
3.3. Un espacio para poner tres enlaces o hipervínculos

4. Escribe el texto “Analizar contenido” y crea el enlace a la página contenido.html para que se abra
en la misma ventana y que al pasar el puntero del mouse sobre el enlace indique lo que se espera
visitar
5. Escribe el texto “Conocer otros enlaces” y crea el enlace que lleve a la a la página otros-
enlaces.html para que se abra en la misma ventana y que al pasar el puntero del mouse sobre el
enlace indique lo que se espera visitar
6. Escribe el texto “Conocer colores” y crea el enlace al sitio https://www.w3.org/TR/css3-color/

específicamente en el ancla #svg-color para que se abra en una ventana nueva y que al pasar el
puntero del mouse sobre el enlace indique lo que se espera visitar
ANALIZAR CONTENIDO (página: contenido.html)
1. Utiliza un editor para codificación de HTML y crea un documento HTML, que tenga por nombre
contenido.html
2. En el documento contenido.html inserta la información del encabezado:

3.1. Una imagen que abarque un 90% del ancho del navegador. La imagen puede ser del tema de tu
preferencia (por ejemplo arte, música, deportes, películas, entretenimiento, investigación, etc.)
3.2. Un listado con los títulos de por lo menos 3 temas de interés

3.3. Un espacio para colocar los títulos y los contenidos de cada uno de los 3 temas de interés
<programación web>
4. Crea un ancla en cada título del tema (por lo menos deben ser 3 anclas, una para cada tema)
5. Crea los enlaces para que en el listado de los temas lleve al título de cada tema (por lo menos debe
haber 3 enlaces)
6. Crea el enlace para regresar a la página ejercicio23.html abriéndose en la misma ventana y que
al pasar el puntero del mouse sobre el enlace indique lo que se espera visitar.
OTROS ENLACES (otros-enlaces.html)
1. Utiliza un editor para codificación de HTML y crea un documento HTML, que tenga por nombre otros-
enlaces.html
2. En el documento otros-enlaces.html inserta la información del encabezado:

3.1. Una imagen del estadio Tamaulipas de tamaño pequeño y escalada a la mitad de su tamaño real.
A un costado de la imagen deberá ir el texto “Estadio Tamaulipas”
3.2. Un espacio para colocar información sobre el proyecto de Programación Web
3.3. Un espacio para colocar información referente a la Primera Página Web de la Historia
4. Crea el enlace en la imagen del estadio y en el texto, para que en la misma ventana se abra la imagen
del estadio en un tamaño grande (varios cientos de pixeles de ancho). Al pasar el puntero del mouse
sobre el enlace debe indicar que se verá una imagen del estadio Tamaulipas en tamaño grande.
5. Crea el enlace en el texto del Proyecto de Programación Web para que se abra en la misma ventana el
archivo PDF con la información de dicho proyecto. Al pasar el puntero del mouse sobre el enlace debe
indicar que es un archivo PDF sobre los requisitos del proyecto.
6. Crea el enlace en el texto “Primera Página Web de la Historia” para que se abra en la misma ventana el
archivo con el video en MP4, advirtiendo el tamaño del archivo. Al pasar el puntero del mouse sobre el
enlace debe indicar el contenido que se visualizará. El video no debe ser mayor a 4MB, en su defecto
utiliza un video que sea menor a 4MB.
7. Crea el enlace para regresar a la página ejercicio23.html abriéndose en la misma ventana y que
al pasar el puntero del mouse sobre el enlace indique lo que se espera visitar
<programación web>

U2 07 Ejercicios 03

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

U2 07 Ejercicios 03

Cargado por

Copyright:

Formatos disponibles

TECNOLÓGICO NACIONAL DE MEXICO

INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

Archivos requeridos: estilo-eje23.css

Actividad previa: Coloca lo archivo estilo-eje23.css en la carpeta comun/css; la estructura de

Los documentos tendrán una navegación como se muestra en la siguiente imagen:

PAGINA DE INICIO (ejercicio23.html)

2. En el documento ejercicio23.html inserta la información del encabezado:

3.3. Un espacio para poner tres enlaces o hipervínculos

6. Escribe el texto “Conocer colores” y crea el enlace al sitio https://www.w3.org/TR/css3-color/

ANALIZAR CONTENIDO (página: contenido.html)

2. En el documento contenido.html inserta la información del encabezado:

3.2. Un listado con los títulos de por lo menos 3 temas de interés

OTROS ENLACES (otros-enlaces.html)

2. En el documento otros-enlaces.html inserta la información del encabezado:

3.2. Un espacio para colocar información sobre el proyecto de Programación Web

También podría gustarte