MAQUETACIÓN
Observa y analiza el siguiente ejemplo:
DIGITAR LA PAGINA:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> MAQUETACIÓN EN HTML5</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<!-- Cabecera -->
<header>
<center>
<img src="media/logotipo.png" width="200" height="70" alt="logo" />
<h1> MAQUETACIÓN EN HTML5 - Maquetación No.1 - GKGR!!!</h1>
</center>
</header>
<!-- Contenido -->
<section>
<figure>
<img src="media/koala01.jpg" width="200" height="200" alt="foto" />
<figcaption>Figura: aca escribimos la descipción foto</figcaption>
</figure>
<p> En la fase de maquetación de un documento o una página web o para probar un tipo de letra es necesario visualizar el aspecto del diseño. En este momento se necesita un contenido sobre el que aplicar el formato para obtener esta muestra.
Cualquier texto puede utilizarse con este cometido, puesto que lo importante es el aspecto no el significado y será reemplazado en la versión final.
Sin embargo, existe un texto que se utiliza desde la invención de la imprenta con este fin.</p>
<p>Este texto se conoce como lorem ipsum, o abreviado lipsum. Se trata de un texto escrito en latín compuesto
de fragmentos de un manuscrito escrito por Cicero en el año 45 a.C. Evidentemente, carece de significado por lo que se centra la atención en el diseño en lugar del contenido.
</p>
</section>
<!-- Contenido relacionado-->
<aside>
<p>Contenido Relacionado - en este espacio van unas viñetas
<center>
<ul>
<li> Un elemento de lista</li>
<li>Otro elemento de lista</li>
</ul>
</center>
</p>
</aside>
<!-- Pie de pagina -->
<footer>
<p> ESCRIBIR MIS DATOS EN ESTE ESPACIO ES IMPORTANTE </p>
<a href="http://gkgrconfioentic.blogspot.com.co/"> Sigamos aprendiendo </a>
</footer>
</body>
</html>
CREAR EL ESTILO:
html,body {
height:100%;
background: #CEF6D8;
}
header {
display:block;
background:#F5A9F2;
padding:10px 0px;
}
section {
width: 79%;
background: #F3F781;
float: left;
overflow: auto;
padding-bottom: 60px;
padding-top:30px;
}
aside {
float: right;
background: #F5D0A9;
border: 5px solid #3B0B0B;
width: 19%;
/*border: 5px solid #3B0B0B;
/*Si quisieramos ocultar el contenido relacionado pondriamos visibility a hidden*/
/*visibility: hidden;*/
}
footer {
position: relative;
margin-top: -50px;
height: 40px;
padding:5px 0px;
clear: both;
background: #286af0;
text-align: center;
color: #fff;
}
figure {
display: table; margin: 0 auto;
}
No hay comentarios:
Publicar un comentario