U2 15 Ejercicios 05 Parte2

TECNOLÓGICO NACIONAL DE MEXICO
INSTITUTO TECNOLÓGICO DE CIUDAD MADERO
Programación Web
Ejercicios
Ejercicio 2.5 (Parte 2)
Archivos requeridos: menu.css
ANTECEDENTES DEL EJERCICIO:
- En el Ejercicio 2.5 (Parte 1) se creó una estructura de archivos, en la cual se debe agregar el archivo
menu.css como se muestra a continuación:
- En el documento ejercicio25.html se creó una estructura con elementos HTML y clases CSS como
se muestra a continuación:
ACTIVIDADES DEL EJERCICIO:
- Crear los estilos considerando el modelo de caja para controlar el acomodo de la información.
- Crear un menú, considerando el modelo de caja aplicando estilos para que permanezca en la parte
superior de la página.
<programación web>
AGREGAR ESTILOS CONSIDERANDO EL MODELO DE CAJA (estilo25.css)
NOTA: El modelo de caja considera las propiedades width y height para definir las dimensiones de un
objeto, los cuales tienen otros componentes que pueden estilarse (ajustar medidas) mediante las
propiedades padding, border y margin.
Con el editor para HTML, en la hoja de estilos estilo25.css, crear los estilos que se indican y visualizar
el documento html en el navegador web para identificar los estilos que se están aplicando.
Estilos de margin en el body

1. Para el body se define un margen (margin) para que la página quede centrada.
Para apreciar los cambios, guarda los cambios y visualiza el documento html en el navegador web.
Estilos de padding para la clase architect

2. La clase architect está en el elemento <article> que contiene la información de toda la página. A
esta la clase se le agrega el padding para crear un espacio uniforme para las áreas horizontales y
verticales.
<programación web>
Estilos de padding para la clase intro

3. La clase intro está en el elemento <div> que contiene la parte del tema principal y la imagen de
Barcelona como fondo. A esta la clase se le agrega el padding para crear un espacio diferente para
las áreas horizontales, pero de igual tamaño para las áreas verticales.
CREAR EL MENÚ (ejercicio25.html)

Utiliza el editor para codificación de HTML para que en el documento ejercicio25.html se realicen las
siguientes modificaciones:
4. En el área del <head>, insertar el vínculo externo a la hoja de estilos menu.css

<link rel="stylesheet" href="comun/css/menu.css">
5. Al inicio del documento, entre el <body> y <article class=”architect”> realizar lo siguiente:
- Crear un área de navegación <nav> con la clase sticker

- Crear una lista no ordenada <ul> con la clase menu
Guarda los cambios y visualiza el documento html en el navegador web.
<programación web>
EDITAR EL ARCHIVO CSS PARA EL MENU (menu.css)
6. Crear la clase sticker para el elemento <nav> para definir el ancho y la posición en la parte superior.
Al visualizar el documento html en el navegador web y desplazar con el scroll, se puede apreciar que,
aunque el menú no está terminado, se queda fijo en la parte superior.
7. Crear la clase menu para aplicar estilos de fuente, quitar las viñetas, alinearlo a la derecha, color de
fondo tono azul, adecuar el margen y establecer las áreas de espacio para el contenido.
Como los hipervínculos ya están en el documento html, solo guarda los cambios y visualiza el
documento html en el navegador web.
8. Crear el selector para que en la clase menu con descendientes los elementos de lista <li> se ajusten
en la misma línea y su contenido se alinee al centro.
Guarda los cambios y visualiza el documento html en el navegador web. Se puede apreciar que el
menú se alineó horizontalmente.
9. Crear el selector para que en la clase menu, con descendientes los elementos de lista <li>, que a su
vez tengan descendiente el elemento de hipervínculo <a>, para que estos hipervínculos se muestren
en bloque, color blanco, en texto normal y aumentando las áreas horizontales y verticales.
<programación web>
Guarda los cambios y visualiza el documento html en el navegador web. Se puede apreciar que el área
del menú aumentó y que cambió su estilo.
10. Crear otro selector para la clase menu, con descendientes <li>, que a su vez tengan descendientes
de pseudo-clase a:hover, para que al momento de pasar el mouse sobre el menú se vea subrayado
con un cambio del color de la fuente y del fondo, así como la creación de bordes redondeados.
Guarda los cambios y visualiza el documento html en el navegador web. Se puede apreciar que al psar
el mouse sobre el menú, se modifica su apariencia.
Instrucción final:
- Asegúrate que la carpeta y todos los archivos de esta actividad hayan sido guardados en la carpeta
Unidad2/Ejercicios de tu unidad de almacenamiento Flash Drive (USB) y en DROPBOX.
<programación web>

U2 15 Ejercicios 05 Parte2

Cargado por

Copyright:

Formatos disponibles

U2 15 Ejercicios 05 Parte2

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 15 Ejercicios 05 Parte2

Cargado por

Copyright:

Formatos disponibles

TECNOLÓGICO NACIONAL DE MEXICO

INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

Archivos requeridos: menu.css

ANTECEDENTES DEL EJERCICIO:

ACTIVIDADES DEL EJERCICIO:

AGREGAR ESTILOS CONSIDERANDO EL MODELO DE CAJA (estilo25.css)

Estilos de margin en el body

Estilos de padding para la clase architect

Estilos de padding para la clase intro

CREAR EL MENÚ (ejercicio25.html)

4. En el área del <head>, insertar el vínculo externo a la hoja de estilos menu.css

5. Al inicio del documento, entre el <body> y <article class=”architect”> realizar lo siguiente:

- Crear un área de navegación <nav> con la clase sticker

Guarda los cambios y visualiza el documento html en el navegador web.

EDITAR EL ARCHIVO CSS PARA EL MENU (menu.css)

También podría gustarte