COLEGIO DE BACHILLERES DE TABASCO

EMSAD 22

Práctica 4 – Estructura básica de maquetación

Instrucciones:
En equipos de 5 integrantes, realicen paso a paso la siguiente actividad, al finalizar, cambia el valor de los
atributos y genera una nueva estructura.

Parte 1.- Estructura HTML5 bajo el modelo de bloques

Antes de iniciar crearemos una estructura ya sea a mano o en algún editor de imágenes para tener una idea
clara del resultado que deseamos obtener, en nuestro caso será:

Para tener una idea clara necesitamos identificar los elementos. Nuestro ejemplo contiene 6 elementos
dispuesto sobre el fondo de la página web.
 COLEGIO DE BACHILLERES DE TABASCO
EMSAD 22

Con esta información podemos darnos una idea clara de lo que vamos a construir.

1.- Crea una estructura básica HTML5 y seguido la tecla Tabulador y se creará automáticamente), asigna cada
uno de los elementos que contendrá nuestra página y guarda el archivo con el nombre Básica.html

Código Resultado

2.- Ahora daremos forma a cada elemento utilizando una hoja de estilos, para lo cual deberás crear un nuevo
documento y guardarlo como “miestilo.css”. El documento debe ser guardado en la misma carpeta o en una
subcarpeta del mismo directorio para que lo pueda localizar en la ruta señalada el archivo HTML.

3.- Como primera actividad eliminaremos los márgenes (margen interior o padding y margen exterior o margin)
automáticos para todos los elementos de la página web y los colocaremos a cero:

Código Resultado

4.- Cambiaremos el color de fondo de la página a oro claro (#FFE699)

Código Resultado
 COLEGIO DE BACHILLERES DE TABASCO
EMSAD 22

5.- En nuestra estructura se tiene un contenedor principal de la página para poder tener un mejor control de los
demás elementos este se encuentra en la etiqueta <div Id=”contenedor”> iniciaremos por redimensionar este
elemento al 90% de respecto al ancho de nuestra página, margen interno de 5 pixeles y lo centraremos
empleando márgenes automáticos:

Código Resultado

6.- Daremos estilo al encabezado <header> cambiando su color de fondo, bordes redondeados, texto color
blanco, centrado, y borde interno:

Código Resultado

7.- Corresponde el estilo al área donde se desplegará el menú:

Código Resultado
 COLEGIO DE BACHILLERES DE TABASCO
EMSAD 22

8.- Quitar la viñeta y cambiar el color del texto:

Código Resultado

9.- Acomodar el menú en forma horizontal y aumentar el margen interior superior en 5px.

Código Resultado

10.- Aplicaremos formato a la sección <section> que contendrá el articulo <article> y la barra derecha<aside>:

Código Resultado

11.- Aplicamos estilo al área del articulo 1 <article> y anexamos la propiedad float con valor a la izquierda (left)
para indicar el Article que se colocará de ese lado.
Código Resultado
 COLEGIO DE BACHILLERES DE TABASCO
EMSAD 22

12.- Aplicamos estilo a la sección lateral derecha <aside> anexamos la propiedad float con valor a la
derecha (left) para que se coloque el Aside de ese lado.
Código Resultado

11.- Por último, damos estilo a la parte inferior de la página <footer>

Código Resultado
 COLEGIO DE BACHILLERES DE TABASCO
EMSAD 22

Parte 2
Dibuja una nueva estructura web y con la secuencia anterior creen la Maquetación web correspondiente
tratando de ser lo más acercados al diseño realizado, guarda en tu carpeta de evidencias el archivo HTML y CSS
como Practica4.html y Practica4.css respectivamente.

NOTA: no olvides enlazar ambos archivos con la etiqueta <link>

 COLEGIO DE BACHILLERES DE TABASCO
EMSAD 22

LISTA DE COTEJO PARA EVALUAR: HERRAMIENTAS DEL COMMUNITY MANAGER

Módulo: Software de diseño Submódulo: I – Páginas Web

Situación
Poniendo en línea tus sueños
didáctica:
Nombre del
Docente: Lic. Milton Hernández G.
estudiante:
Semestre: 6to. Turno: Matutino Fecha de aplicación:
CG4.5 - Maneja las tecnologías de la información y la
comunicación para obtener información y expresar ideas.
CPBTIC3 - Plantea el uso, creación y administración de plataformas
CG5.1 - Sigue instrucciones y procedimientos de manera
electrónicas de consulta, comunicación y distribución de contenidos
reflexiva, comprendiendo como cada uno de sus pasos
multimedia, proponiendo comunidades virtuales que le permita
contribuye al alcance de un objetivo.
comunicarse, favoreciendo su autoaprendizaje en un ambiente
innovador en sus diferentes contextos
CG8.1 - Propone maneras de solucionar un problema o
desarrollar un proyecto en equipo, definiendo un curso de
acción con pasos específicos.
Evidencia de aprendizaje: Práctica 2. Estilos básicos
Marque con una (X) para resaltar si cumplió con los criterios de la actividad.
Instrucciones:
Sume los puntos para obtener la calificación.

CRITERIOS
INDICADORES PONDERACIÓN OBSERVACIONES
SI NO
Realiza el bosquejo de una estructura web
1. 1.0
propia para elaborar su maqueta.
Contiene los elementos requeridos para la
2. estructura básica de la página (header, nav, 2.0
section, article, aside y footer).
Aplica estilos con las propiedades básicas
de CSS (width, height, backgrond, padding,
3. 2.0
border, margin, text, color, border, float) a
los elementos de la página web
La página presentada es una
4. representación digital del bosquejo 1.0
diseñado en papel.
Presenta el archivo .html y .CSS de la
5. estructura básica de la página web.
2.0
La página no presenta
6. 1.0
malfuncionamientos
7. La página se adapta a los dispositivos 1.0
PUNTUACIÓN FINAL:

RETROALIMENTACIÓN
LOGROS: ASPECTOS DE MEJORA: