Está en la página 1de 7

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Titulo</title>
</head>
<body>
<div id="centrado">
<header>
<hgroup>
<h1>(( TITULO ))</h1>
<h2>(( DESCRIPCION DE LA WEB ))</h2>
</hgroup>
<div id="logotipo">(( LOGOTIPO ))</div>
</header>
<id ="contenido">
<nav>
(( MENU DE NAVEGACION ))
</nav>
<aside>
(( ANUNCIO DEL PDF ))
</aside>
<section id="izquierda">
<h2>Ultimas Novedades<h2>
<article>(( NOVEDAD UNO ))</article>
<article>(( NOVEDAD DOS ))</article>
<article>(( NOVEDAD TRES ))</article>
</section>
<section id="centro">
<h2>Temas Populares<h2>
<article>(( POPULAR A ))</article>
<article>(( POPULAR B ))</article>
<article>(( POPULAR C ))</article>
</section>
</div>
<footer>
<section id="copyright">(( Datos Copyright ))</section>
<section id="contacto">(( Datos de Contacto ))</section>
<section id="enlaces">(( MapaWeb, Política, etc. ))</section>
</footer>
</div>
</body>
</html>
Estructura HTML5:
 Estructuras Html5
 Etiquetas Semánticas
 Section
 Article
 Header
 Footer
 Nav
 Hgroup
 Aside
 Section o Article
 Seciones y HTML5
 Más Hgroup
 Ejemplos de código

1. !DOCTYPE html>
2.
3. <html>
4.
5. <head>
6.
7. <meta charset="utf-8" />
8.
9. <title>Title</title>
10.
11. <link href="css/html5reset.css" rel="stylesheet" />
12.
13. <link href="css/style.css" rel="stylesheet" />
14.
15. </head>
16.
17. <body>
18.
19. <header>
20.
21. <hgroup>
22.
23. <h1>Header in h1</h1>
24.
25. <h2>Subheader in h2</h2>
26.
27. </hgroup>
28.
29. </header>
30.
31. <nav>
32.
33. <ul>
34.
35. <li><a href="#">Menu Option 1</a></li>
36.
37. <li><a href="#">Menu Option 2</a></li>
38.
39. <li><a href="#">Menu Option 3</a></li>
40.
41. </ul>
42.
43. </nav>
44.
45. <section>
46.
47. <article>
48.
49. <header>
50.
51. <h1>Article #1</h1>
52.
53. </header>
54.
55. <section>
56.
57. Este es el primer artículo. This is <mark>highlighted</mark>.
58.
59. </section>
60.
61. </article>
62.
63. <article>
64.
65. <header>
66.
67. <h1>Article #2</h1>
68.
69. </header>
70.
71. <section>
72.
73. Este es el segundo artículo. Estos artículos pueden ser secciones del blog, etc.
74.
75. </section>
76.
77. </article>
78.
79. </section>
80.
81. <aside>
82.
83. <section>
84.
85. <h1>Links</h1>
86.
87. <ul>
88.
89. <li><a href="#">Link 1</a></li>
90.
91. <li><a href="#">Link 2</a></li>
92.
93. <li><a href="#">Link 3</a></li>
94.
95. </ul>
96.
97. </section>
98.
99. <figure>
100.
101. <img width="85" height="85"
102.
103. src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
104.
105. alt="Jennifer Marsman" />
106.
107. <figcaption>Jennifer Marsman</figcaption>
108.
109. </figure>
110.
111. </aside>
112.
113. <footer>Footer - Copyright 2011</footer>
114.
115. </body>
116.
117. </html>

Código HTML5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>EJEMPLO MAQUETACIÓN EN HTML5</title>
<link rel="stylesheet" href="css/estilo.css">

</head>

<body>
<!-- Cabecera -->
<header>
<img src="Media/ejemplo-logotipo.gif" width="189" height="57" alt="l
ogo" />
<h1>EJEMPLO MAQUETACIÓN EN HTML5 - Maqueta #1</h1>
</header>

<!-- Contenido -->


<section>

<figure>
<img src="Media/Koala.jpg" width="200" height="200" alt="fot
o" />
<figcaption>Figura: descipción foto</figcaption>
</figure>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean o


rnare sapien ac nibh vulputate feugiat. Morbi euismod velit sit amet libero volu
tpat ultrices in quis sem. Sed sit amet placerat sem. Curabitur vitae lectus nec
purus accumsan faucibus. Donec vitae volutpat tortor. Suspendisse tempor rutrum
urna, in consequat est tincidunt vitae. Cras et ligula at felis placerat tempor.
Fusce elementum metus non justo luctus iaculis.</p>
<p>Donec ligula arcu, sagittis lacinia nibh et, consequat gravida tu
rpis. Aenean nec scelerisque felis. Integer nec odio sed lorem mattis rhoncus qu
is quis nibh. Praesent non fringilla nisi. Duis porta placerat mattis. Aenean in
mollis odio, at egestas massa. Quisque in lectus magna. Vestibulum vel faucibus
massa, vel varius tortor. Maecenas et laoreet neque, ut semper neque. Suspendiss
e aliquet, nisl vel pharetra ultricies, elit felis molestie sem, ac scelerisque
turpis tortor non lacus.</p>

</section>

<!-- Contenido relacionado-->


<aside>
<p>Contenido Relacionado</p>
</aside>

<!-- Pie de pagina -->


<footer>
<a href="http://www.ejemplocodigo.com">www.ejemplocodigo.com</a>
</footer>

</body>
</html>

Código CSS
html,body {
height:100%;
}

header {

display:block;
background:#286af0;
padding:10px 0px;
}
section {
width: 79%;
background: #ccc;
float: left;
overflow: auto;
padding-bottom: 60px;
padding-top:30px;
}
aside {
float: right;
border: 1px solid red;
width: 19%;
border: 1px solid red;
/*Si quisieramos ocultar el contenido relacionado pondriamos visibility a hi
dden*/
/*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;
}