Conversión de un xhtml a htm5. Continuación ejercicio capas html.

Conversión de un xhtml a htm5. Continuación ejercicio capas html.

Print Friendly, PDF & Email
Conversión de un xhtml a htm5. Continuación ejercicio capas html.
Valora esta entrada

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!

Entradas relacionadas:

Mapas de imagen en html
- 541
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Como anidar etiquetas html correctamente
- 78
Un error típico en muchos alumnos de web es no anidar bien las etiquetas. Te resumo como hacerlo y dónde se suele equivocar la gente.
Ejercicio html etiquetas de texto nivel intermedio
- 110
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.
Imágenes en html: la etiqueta img
- 583
Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta de html se propuso por primera vez en 1993 por Marc Andreessen. En esta entrada presentamos la etiqueta...
Ejercicio migración de xhtml a html5. Estructura web semántica.
- 89
Ejercicio html5 dónde transformamos un documento web realizado con capas html . Incluye solución.
Como hacer espacios en blanco con html
- 453
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Como usar los encabezados h1 a h6 en html
- 434
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...
LibrosWeb ahora es UniWebSidad
- 307
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Respuesta a dudas típicas cuando aprendemos html por primera vez
- 100
Cuando aprendes HTML por primera vez se presentan dudas lógicas fruto de nuestra inseguridad. Desafortunadamente en la red, en muchas ocasiones no encontramos las respuestas que necesitamos. En esta ...
Espacios en blanco HTML. Practicando con caracteres especiales.
- 71
Ejercicio html de nivel básico para practicar con el espacio en blanco de HTML. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.