14 Feb Conversión de un xhtml a htm5. Continuación ejercicio capas html.
En este ejercicio vamos a actualizar un ejercicio estructurado con capas a la antigua usanza (mediante <div> e id=»») con etiquetas semánticas de html5.
Por ejemplo <header>, <nav>, <main>, <aside>, <section>, <article>, <figure>, <footer>, <caption>, <mark>, y todas aquellas que en general consideres importantes.
Para resolverlo sin mayor dificultad te sugiero leer esta entrada dónde encontrarás un ejemplo de clase.
Entremos en materia.
Enunciado
Traduce la solución presentada en este ejercicio, a html5.
En caso necesario puedes modificar la estructura del documento html para hacer aparecer alguna capa semántica que te parezca necesario. Por ejemplo un <aside>.
Solución del ejercicio
Para solucionar el ejercicio se divide el documento en
- <header>. Contiene un <nav>
- <div id=»container»></div>. El container no tiene significado semántico. Se usa para agrupar un <main> y un <aside>. A su vez estos contienen diversos <section>.
- <footer>. El footer contiene diversos <section>.
Como detalle importante, que uno de los section que inicialmente estaba dentro del main se ha sacado fuera pero se ha mantenido dentro del container. El motivo es que ha pasado a ser un <aside>. Observarlo en el código, se entenderá mejor.
Fijaros también que que la etiqueta <style> del <head> (no confundir <head> con <header>) se ha visto modificada.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Francesc Ricart">
<title>Solución ejercicio html. De xhtml a html5</title>
<style>
div, header, nav, section, aside, footer, figure{
border:1px solid #000;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<ul>
<!-- (li>a)*3-->
<li><a href="">Quiénes somos</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contacto</a></li>
</ul>
<figure>
<img src="http://dummyimage.com/300x100/000/fff.gif&text=Mi logotipo" alt="Mi logotipo">
</figure>
<!--div#nav>ul>(li>a)*4-->
<nav>
<ul>
<li><a href="">Categoría 1</a></li>
<li><a href="">Categoría 2</a></li>
<li><a href="">Categoría 3</a></li>
<li><a href="">Categoría 4</a></li>
</ul>
</nav>
</header>
<div id="container">
<main>
<h1>Un texto muy representativo</h1>
<section>
<video src="" controls="controls" muted="muted" autoplay="autoplay" loop="loop"></video>
</section>
<section>
<img src="http://dummyimage.com/500x300/000/fff.gif&text=imagen" alt="placeholder+image"> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum asperiores qui ducimus excepturi fugiat sint.</p>
<p><a href="" title="">+ info</a></p>
</section>
<section>
<h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum asperiores qui ducimus excepturi fugiat sint.</p>
<p><a href="" title="">+ info</a></p>
<img src="http://dummyimage.com/500x300/000/fff.gif&text=imagen" alt="imagen 1">
</section>
</main>
<aside>
<cite>Personas que conectan con personas</cite>
</aside>
</div>
<footer>
<section>
<!--
h4+p>lorem15
-->
<h4>Sabías que...</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad dignissimos, maxime natus at incidunt, numquam.</p>
</section>
<section>
<!--
h4+ul>(li*3)
-->
<h4>Contacto</h4>
<ul>
<li>Calle Número, Barcelona</li>
<li>Teléfono <a href="tel:932 314 444" title="Teléfono fijo">932 314 444</a></li>
<li><a href="mailto:info@cts.com" title="">info@cts.com</a></li>
</ul>
</section>
<section>
<img src="http://dummyimage.com/200x80/000/fff.gif&text=logotipo 1" alt="logotipo 1">
<img src="http://dummyimage.com/200x80/000/fff.gif&text=logotipo 2" alt="logotipo 2">
<img src="http://dummyimage.com/200x80/000/fff.gif&text=logotipo 3" alt="logotipo 3">
</section>
</footer>
</div>
</body>
</html>¡Hola!
Querido lector,
¿La lógica para passar de <div> a etiquetas html5 se coge rápidamente y es agradecida verdad?
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
No hay comentarios