2. Curso HTML5. Novedades. Nuevas etiquetas
- Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior una introducción al mundo html. En este capítulo vamos a conocer algunas de las nuevas etiquetas que se introdujeron con la llega de html5.
- Las etiquetas con las que vamos a trabajar en esta entrada son: <header>,<footer>, <nav>,<section>,<aside>. Vamos con una breve descripción de cada una de ellas:
- <Header>: <head> Tradicionalmente es la cabecera de un documento. <header> aparece para ser considerada como la cabecera de cualquier otra cosa.
- <Footer>: Aparece para ser considerada como el pie de cualquier cosa.
- <Section>: contiene la información más relevante del documento.
- <nav>: Representa un bloque de navegación.
- <aside>: Es una sección que está relacionada con la principal que que ocupa una posición lateral
- Aquí os dejo un vídeo con ejemplos de uso de estas etiquetas:
- Os dejo también los elementos creados en nuestra hoja de estilos:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
.pagina {
display: table;
width: 100%
}
.contenedor {
float: left;
width: 60%
}
aside {
float: right;
width: 40%
}
- y nuestra página html donde estamos haciendo las pruebas:
<header>
<h1> Mi primera página html</h1>
</header>
<nav>
<ul>
<li><a href="#">Uno 1</a></li>
<li><a href="#">Dos 2</a></li>
<li><a href="#">Tres 3</a></li>
</ul>
</nav>
<div class="pagina">
<section class="contenedor">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxx<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxx<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxx<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxx<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxx<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxx<br />
</section>
<aside>
<p>YYYYYYYYYYYYYYYYYYYYYYYYYYYYYy</p>
</aside>
</div>
<footer>
<ul>
<li><a href="#">Derecho de uso</a></li>
<li><a href="#">Copyright</a></li>
</ul>
</footer>
No hay comentarios:
Publicar un comentario