07 Feb 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>)
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
¡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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Ejercicio sobre mapa de imagen con areas inertes y ligeramente más complicado que los anteriores. Incluye solución.
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
¿Que formato de imagen usar? Influye la velocidad de carga, las transparencias, animaciones y la seguridad. Resumo las ideas clave.
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.
No hay comentarios