13 Feb Ejercicio estructura web mediante capas con div e id
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>)
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 adjunta
¡Hola!
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!
Entradas relacionadas:
Ejercicio html de nivel básico para practicar con el espacio en blanco de HTML. Incluye solución.
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Ejercicio básico para practicar como hacer una tabla en html. Etiquetas thead, tboyd, table, tr, th y td. Incluye solución.
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.
20 preguntas test de un examen html real para repasar conceptos básicos de una formación de 80h de xhtml y html5.
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
No Comments