Ejercicio estructura web mediante capas con div e id

5
(1)

Publicado

Una vez más vamos a practicar la creación y estructuración de un documento web mediante capas.

A diferencia del ejercicio anterior en esta ocasión no voy a dar pistas sobre como estructurar la cabecera, cuerpo principal, pié de una web.

Así que coger lápiz y papel y empezar por esquematizar un croquis de vuestra propuesta solución.

De nuevo usaremos las etiquetas <div> y los atributos id=»».

Otra vez, los nombres que daremos a los identificadores de la web son header, container, main, section1, section2, section3, article1, article2, footer preparando ya el salto al html5.

En cuanto a la teoría recomiendo leer esta entrada.

Enunciado

Se adjunto un mockup de propuesta de página web.

  • Tradúcela a lenguaje de marcado agrupando y estructurando las etiquetas en grupos de información según criterio.
  • Si en el mockup consideras que falta alguna etiqueta o información muy importante añádela en la solución.

Importante: La solución no es única.

Atención: Todavía no usemos etiquetas html5, lo haremos en un ejercicio posterior que consistirá en actualizar este actual a las nuevas etiquetas.

(Por ejemplo en lugar de la etiqueta <header> usaremos <div id=»head>)

Croquis realizado mediante Balsamiq Mockup 3
Croquis realizado mediante Balsamiq Mockup 3

Para mayor claridad, si lo deseas,  añade dentro del <head> el siguiente código.

Se entenderá mejor en el tutorial CSS.

<style>
div{
	border:1px solid #000000;
	padding:5px 10px;
}
</style>

Solución del ejercicio

En la solución se añade alguna instrucción comentada para facilitar el uso de la herramienta Emmet.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Francesc Ricart">
        <title>Resolución ejercicio capas web</title>
        
        <style>
            div{
                border:1px solid #000;
                padding:10px;
            }
        
        </style>
        
    </head>
    <body>
        
        <div id="wrapper">
            <div id="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>
                <img src="http://dummyimage.com/300x100/000/fff.gif&text=Mi logotipo" alt="Mi logotipo">
                <!--div#nav>ul>(li>a)*4-->
                <div id="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>
                </div>  
            </div>     
            <div id="container">
                <div id="main">
                    <h1>Un texto muy representativo</h1>
                    <div id="section1">
                        <video src="" controls="controls" muted="muted" autoplay="autoplay" loop="loop"></video>
                    </div>
                    <div id="section2">
                        <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>
                    </div>
                    <div id="section3">
                        <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">
                    </div>
                    <div id="section4">
                        <cite>Personas que conectan con personas</cite>    
                    </div>
                </div>
            </div>
            <div id="footer">
                <div id="section 5">
                    <!-- 
                    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>
                </div>
                <div id="section 6">
                    <!--
                    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>
                </div>
                <div id="section 7">
                    <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">
                </div>
            </div>           
        </div>
    </body>
</html>

El resultado final será parecido a la imagen.

Resultado final ejercicio capas html
Resultado final ejercicio capas html

Querido lector,

¡La clave de todo está en visualizar mentalmente lo que vas a escribir y sobre todo importantísimo tabular bien el código! De este modo evitarás olvidarte de cerrar etiquetas y hacer errores por despiste.

¡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!

Puntuación media 5 / 5. Votos: 1

Todavía no hay votos. Sé el primero en valorar la entrada.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *