Ejercicio sobre creación de capas html mediante etiquetas div

Ejercicio sobre creación de capas html mediante etiquetas div

En este ejercicio vamos a practicar la creación y estructuración de un documento web mediante capas.

En esta ocasión no vamos a usar todavía etiquetas semánticas de html5. Más bien es un paso previo a hacerlo.

Por ello usaremos las etiquetas <div> y los atributos id=»».

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.

Recomiendo esta entrada dónde se puede repasar la teoría y hay otro ejemplo muy parecido.

Enunciado

En la pizarra (imagen adjunta) se presenta una propuesta de página web.

Tradúcela a lenguaje de marcado siguiendo las indicaciones del dibujo.

Incluye también una ancla al final del documento que permita llevar al visitante web a la cabecera del documento.

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>)

Pizarra con documento web dibujado y estructurado
Pizarra con documento web dibujado y estructurado

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

<!DOCTYPE html>
<html>
<head>
	<title>Capas web</title>
	<meta charset="utf-8"/>
	<meta name="description" content="Ejemplo de documento html con capas como paso intermedio a transformar <div> en etiquetas de html5"/>
	<meta name="author" content="Francesc Ricart"/>

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

</head>
<body>
<div id="wrapper">
	<!-- cabecera -->
	<div id="header">
		<img src="" alt="logotipo"/>
		<a href="tel:977207030" title="Llámenos">977207030</a>
		<!-- Menú de navegación -->
		<div id="nav">
			<ul>
				<li><a href="">Servicios</a></li>
				<li><a href="">Blog</a></li>
				<li><a href="">Contacto</a></li>			
			</ul>
		</div>
	</div>

	<!-- cuerpo principal del documento -->
	<div id="container">
		<div id="main">
			<div  id="section1">
				<h1>Un título muy representativo</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</div>
			
			<div  id="section2">			
				<video controls src=""></video>
				<!-- contenido -->
				<div id="article1">
					<h2>Un título 2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					<a href="" title="ir a...">Saber más</a>
				</div>
			</div>
			
			<div  id="section3">
				<!-- contenido -->
				<div id="article2">
					<h2>Un título 2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					<a href="" title="ir a...">Saber más</a>
				</div>
				<audio controls src=""></audio>
			</div>					
		</div>
	</div>

	<!-- pie de página -->
	<div id="footer">
		<div id="section4">
			<h3>Sobre mí</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt.</p>
		</div>
		<div id="section5">
			<h3>Horarios</h3>
			<p>Mañanas:9.00-13.00<br/>Tardes:16.00-19.00<br/>Domingo cerrado.</p>
		</div>
		<div id="section6">
			<img src="" alt="ISO9001"/>
			<img src="" alt="ISO14001"/>
		</div>
	</div>

	<!-- ancla -->
	<a href="#header">Subir</a>
</div>

</body>

</html>

El resultado final será parecido a la imagen adjunta

Solución ejercicio capas html
Aspecto de la solución final del ejercicio

¡Hola!

Querido lector,

Es útil coger lápiz y papel y dibujar lo que se va a escribir en el ordenador. Personalmente me ayuda a preparar lo que escribir y a ser metódico llegado el momento de escribir en el sublime, brackets, atom, …

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? 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.