Ejercicio Maqueta Web

Agenda:

• Bienvenida
• Temas a trabajar:
• Participar en el foro de la sección 1.2 (20 minutos)
• Diseñar una maqueta Web utilizando HTML y CSS
• Definir la estructura de carpetas.
• Crear el documento HTML y la Hoja de estilos
• Enlazar los dos archivos
• Crear el contenido HTML
• Definir los estilos
 Recuerda tripulante….

“Primero resuelves el problema,

Después escribes el código”.
Jhon Jhonson
1. Primero lo primero
Definimos la estructura de una NUEVA carpeta para el proyecto web que vamos a
trabajar. El nombre de la carpeta principal de nuestro proyecto es opcional
Aquí un Ejemplo:
Recuerda que en esta carpeta se debe guardar el documento
maqueta-web HTML. Ejemplo: index.html

css Recuerda que en esta carpeta se debe guardar el archivo de la hoja de estilos
Ejemplo: estilos.css

Recuerda que en esta carpeta se deben guardar todos los archivos de

imagenes imágenes del proyecto.
Ejemplo: .JPG, .PNG

NOTA: Procura que todos los nombres de archivos y carpetas sean en minúscula y sin
espacios
2. Ingresamos al editor y abrimos la carpeta previamente creada:

Seleccionamos la carpeta
Haciendo clic en el ícono de explorador podemos ver la carpeta con su estructura ya
seleccionada

En la línea uno del editor

escribimos html,
seleccionamos html:5

Ya podemos crear nuestro documento HTML

Clic en el menú archivo, opción: Nuevo Archivo de Texto
Clic en seleccione idioma (Es decir lenguaje) y escribimos HTML
Una vez creada la estructura base de nuestro documento HTML, podemos guardarlo:

Recuerda que el documento se debe guardar en la carpeta principal, en mi caso yo lo

guardaré, con el nombre index.html
Ahora, crearemos nuestro archivo para la hoja de estilos:
Menú Archivo, opción nuevo archivo de texto y digitamos CSS

Ese archivo debemos guardarlo dentro de la carpeta css de nuestro proyecto, en mi caso
lo guardaré con el nombre: estilos.css
Luego enlazamos el archivo de estilos desde nuestro documento HTML:
Para este ejercicio se debe crear un diseño basado en el siguiente boceto:
 En el documento HTML,
definimos un contenedor

Aplicamos el estilo al contenedor:

• Ancho: 90%
• Alto: Automático
• Borde sólido de 1 pixel
• Centrado
Definimos una etiqueta header y dentro de ella dos cabeceras (una a la izquierda y otra a la derecha
 Definimos el contenido de ambas cabeceras:
La cabecera de la izquierda (.cabecera-izq),
va a tener un logo y un texto.

NOTA: Recuerde que el logo lo puede descargar

de la página: flaticons.es. Para este ejercicio se
recomienda de 128px

La cabecera de la derecha (.cabecera-der) va

a tener un menú de navegación para ello se
crea una etiqueta nav, y dentro de ella se
definen enlaces con opciones

NOTA: A cada enlace le hemos definido una clase (.nav-bar) para poder configurar con CSS la barra de menús
Definimos el CSS para el header y para las dos cabeceras

Luego definimos el CSS para el título de la cabecera (h1)

NOTA: La personalización de los colores, tipo de letra, tamaños, etc.,

es a su gusto.

Para la paleta de colores, se recomienda utilizar la página:

colorhunt.co
Definimos el CSS para el contenedor de la barra de navegación (nav) y para cada una de las opciones del menú:
Aquí estamos definiendo una barra de menú y para ello utilizamos la
propiedad flex (Display-flex), la cual aplicamos en el nav, y por qué en
el nav ?
Porque el nav es el contenedor de las opciones del menú, y lo
hacemos así para que nos sea más fácil dejar bien distribuido el
menú dentro de la cabecera

También utilizamos la propiedad hover en la clase .nav-bar, esto para

que al pasar el mouse por encima de cada opción del menú, cambie
de color el fondo y el texto.

NOTA: La configuración de los estilos se hace de acuerdo al diseño

deseado (Esto es solo un ejemplo)

La cabecera, con esa configuración, hasta el momento debería verse asi:

Creamos una sección en HTML con la etiqueta <section> para poder incluir una
imagen que ocupe el ancho del contenedor principal

Definimos ancho y alto del section y de la imagen

Así debería verse la sección

Definimos el HTML para crear un contenedor <article>, y dentro de él, se crean 3 <divs> con la clase llamada: servicios

Dentro de cada “Caja” de la clase servicios se ha definido un título (h2), una imagen (img) y un párrafo (p)
Debajo, se ha definido un enlace “leer mas…”
Definimos el CSS para el contenedor de artículos <article>. También se define el CSS para la clase
.servicios, el título (h2) y el párrafo (p)
Creamos el HTML para mostrar una serie de fotografías
Para ello se crea una clase contenedora llamada: “álbum”
Para mostrar cada fotografía se define un div y una clase llamada “fotografias”
Las imágenes se llaman con la etiqueta img

NOTA: Recordar que las imágenes deben estar guardadas en la carpeta “imágenes” de nuestro proyecto
Aquí definimos el CSS para la clase “álbum”
Nótese que se está utilizando la propiedad Display-flex y la propiedad flex-wrap para hacer que las fotografías
se muestren y se ajusten proporcionalmente

También se define el CSS para que se muestren las imágenes.

Básicamente se les ha dado otro tamaño (width y height) (pues las
imágenes en realidad tienen un tamaño mas grande).

También se les ha asignado una margen de 10 pixeles para separarlas un

poco

La sección de fotografías debería verse así:

 Ahora inténtelo usted mismo:
Se propone la creación de un píe de página distribuido en tres Columnas. Ejemplo:

Nosotros Contáctenos Síganos

Dirección – ciudad
Teléfonos
Correo

Tenga en cuenta que para completar este ejercicio, debe crear un contenedor (Puede llamarse footer), y dentro de
él, crear una clase para las tres “cajitas” dentro de cada cajita, define el contenido en HTML

En la primera mostrar el logo, en la otra datos de contacto y la otra mostrará íconos de redes sociales

Mucho ánimo tripulante