Ejercicio sobre creación de capas html mediante etiquetas div

Ejercicio sobre creación de capas html mediante etiquetas div

Print Friendly, PDF & Email
Ejercicio sobre creación de capas html mediante etiquetas div
Valora esta entrada
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!

Entradas relacionadas:

Ejercicio html sobre tablas. Etiquetas table, tr, td, colspan, rowspan
- 51
Ejercicio nivel básico sobre tablas html. Uso de rowspan y colspan. Incluye solución.
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 854
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
Ejercicio estructura web mediante capas con div e id
- 62
¿Como crear y organizar capas html en un documento web? En este ejercicio lo harás de 0. Se incluye propuesta de solución. Es un paso previo a html5.
Códigos HTML | Carácteres especiales (escapados)
- 88
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.
La importancia de la etiqueta < title > para el SEO
- 259
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Creación de formularios html
- 804
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Imágenes en html: la etiqueta img
- 498
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...
LibrosWeb ahora es UniWebSidad
- 204
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Conversión de un xhtml a htm5. Continuación ejercicio capas html.
- 36
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.
Como indicar a Google la modificación y corrección de contenidos mediante html
- 118
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualizació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.