Ejercicio HTML CSS

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

Ejercicio HTML CSS

Cargado por

Copyright:

Formatos disponibles

Ejercicio HTML CSS

Cargado por

Información del documento

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

Ejercicio HTML CSS

Cargado por

Copyright:

Formatos disponibles

Ejercicio Maqueta Web

“Primero resuelves el problema,

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

En la línea uno del editor

Ya podemos crear nuestro documento HTML

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

Aplicamos el estilo al contenedor:

NOTA: Recuerde que el logo lo puede descargar

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

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.,

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

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

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

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

Definimos ancho y alto del section y de la imagen

Así debería verse la sección

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

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

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

Nosotros Contáctenos Síganos

Mucho ánimo tripulante

También podría gustarte