Estos tipos de proyectos suelen dejar al inicio de los cursos de diseño de páginas web, se trata sobre la estructura que tendrá la página a desarrollar y el espacio que ocupará cada elemento. Intenta desarrollar los siguientes ejercicios.
Debes de realizar las siguientes estructuras en HTML, puedes usar colores similares, porcentajes para los tamaños o darle un tamaño fijo, pero que tenga la misma estructura de la imagen.
Recuerda usar body, header, nav, section, article, aside y footer.
Ejercicio 1.
Posible solución.
<html>
<style>
body
{
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
font-family: sans-serif;
font-weight: bold;
}
header
{
height: 20%;
width: 100%;
background-color: gray;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
nav
{
height: 10%;
width: 100%;
background-color: orange;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
section
{
height: 65%;
width: 100%;
background-color: blue;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
article
{
height: 94%;
width: 68%;
background-color: lightblue;
float:left;
display:flex;
justify-content: center;
align-items: center;
}
aside
{
height: 94%;
width: 30%;
background-color: green;
float: right;
display:flex;
justify-content: center;
align-items: center;
}
footer
{
height: 5%;
width: 100%;
background-color: black;
position:absolute;
color:white;
display:flex;
justify-content: center;
align-items: center;
}
</style>
<header> Encabezado </header>
<nav> Menú </nav>
<section>
<article> Articulo 1 </article>
<aside> Barra derecha</aside>
</section>
<footer> Pie </footer>
</html>
Resultado.
Ejercicio 2.
Posible solución.
<html>
<style>
body
{
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
font-family: sans-serif;
font-weight: bold;
}
header
{
height: 5%;
width: 100%;
background-color: gray;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
nav
{
height: 10%;
width: 100%;
background-color: orange;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
section
{
height: 40%;
width: 80%;
background-color: blue;
float:right;
display:flex;
justify-content: center;
align-items: center;
}
article
{
height: 40%;
width: 80%;
background-color: lightblue;
float:right;
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
aside
{
height: 80%;
width: 20%;
background-color: green;
float: left;
display:flex;
justify-content: center;
align-items: center;
}
footer
{
height: 5%;
width: 100%;
background-color: black;
position:relative;
color:white;
display:flex;
justify-content: center;
align-items: center;
}
</style>
<header> Encabezado </header>
<nav> Menú </nav>
<aside> Barra izquierda</aside>
<section>Sección 1</section>
<article>Artículo 1</article>
<footer> Pie </footer>
</html>
Resultado.
Ejercicio 3.
Posible solución.
<html>
<style>
body
{
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
font-family: sans-serif;
font-weight: bold;
}
nav
{
height: 9%;
width: 100%;
background-color: orange;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
article
{
height: 20%;
width: 25%;
background-color: lightblue;
float:left;
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
section
{
height: 22%;
width: 60%;
background-color: blue;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
.barraizquierda
{
height: 66%;
width: 20%;
background-color: green;
float: left;
display:flex;
justify-content: center;
align-items: center;
}
.barraderecha
{
height: 66%;
width: 20%;
background-color: green;
float: right;
display:flex;
justify-content: center;
align-items: center;
}
footer
{
height: 5%;
width: 100%;
background-color: black;
position:relative;
color:white;
display:flex;
justify-content: center;
align-items: center;
}
</style>
<nav> Menú </nav>
<article>Artículo 1</article>
<article>Artículo 2</article>
<article>Artículo 3</article>
<article>Artículo 4</article>
<aside class="barraizquierda"> Barra izquierda</aside>
<aside class="barraderecha"> Barra Derecha</aside>
<section>Sección 1</section>
<section>Sección 2</section>
<section>Sección 3</section>
<footer> Pie </footer>
</html>
Resultado.
Ejercicio 4.
<html>
<style>
body
{
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
font-family: sans-serif;
font-weight: bold;
}
header
{
height: 10%;
width: 100%;
background-color: gray;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
nav
{
height: 10%;
width: 100%;
background-color: orange;
float:none;
display:flex;
justify-content: center;
align-items: center;
}
.sec1
{
height: 60%;
width: 50%;
background-color: blue;
float:left;
display:flex;
justify-content: center;
align-items: center;
margin:30px;
}
.sec2
{
height: 80%;
width: 80%;
background-color: blue;
margin:40px;
}
article
{
height: 70%;
width: 100%;
background-color: lightblue;
text-align:left;
}
aside
{
height: 70%;
width: 30%;
background-color: green;
float: right;
margin:30px;
display:table;
justify-content: top;
align-items: top;
}
footer
{
height: 4.5%;
width: 100%;
background-color: black;
position:relative;
color:white;
display:flex;
justify-content: center;
align-items: center;
}
</style>
<header>Encabezado</header>
<br>
<nav> Menú </nav>
<br>
<article>Artículo 1
<section class="sec1">Sección 1</section>
<aside> Bloque
<section class="sec2">Sección 2</section>
</aside>
</article>
<br>
<footer> Pie </footer>
</html>
Resultado.
Listo.
