Ejercicio migración de xhtml a html5. Estructura web semántica.

15 Feb Ejercicio migración de xhtml a html5. Estructura web semántica.

Posted at 07:30h in Ejercicios HTML, Tutorial HTML gratuito. Aprende a estructurar tus páginas web. by Francesc Ricart 0 Comments

Este ejercicio consiste en actualizar la estructura de una página web a html5.

Sirva como ejemplo este ejercicio muy parecido.

Te sugiero leer esta entrada con apuntes de teoría de clase.

Entremos en materia.

Enunciado

Traduce la solución presentada en este ejercicio, a html5.

Solución del ejercicio

Es importante considerar que no existe una solución única.

Es una cuestión subjetiva y según el criterio de cada uno.

Para solucionar el ejercicio se divide el documento en

<header>. Contiene un <nav>
<div id=»container»></div>. El container no tiene significado semántico. Se usa para agrupar un <main>. Este ejercicio no contiene un <aside>.
<footer>. El footer contiene diversos <section>.

La etiqueta <style> del <head> (no confundir <head> con <header>) se ha visto modificada.

<!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, header, nav, main, aside, footer, figure, caption, section, article{
			border:1px solid #000000;
			padding:5px 10px;
		} 
	</style>

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

	<!-- cuerpo principal del documento -->
	<div id="container">
		<main>
			<section>
				<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>
			</section>
			
			<section>			
				<video controls src=""></video>
				<!-- contenido -->
				<article>
					<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>
				</article>
			</section>
			
			<section>
				<!-- contenido -->
				<article>
					<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>
				</article>
				<audio controls src=""></audio>
			</section>					
		</main>
	</div>

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

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

</html>

¡Hola!

Querido lector,

Con este ejercicio deseo que pasar de usar <div> para todo a etiquetas semánticas de estructura html5 sea muchísimo más fácil.

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

Entradas relacionadas:

Ejercicio html para practicar con las etiquetas audio y vídeo
Ejercicio html para practicar las etiquetas audio y video. Incluye solución.

Ejercicio estructura web mediante capas con div e id
¿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.

¿Se pueden hacer listas númeradas negativas con HTML?
Ejemplos de listas numeradas negativas. Incluye código e imágenes del resultado final con distintas opciones.

Ejercicio sobre creación de capas html mediante etiquetas div
Ejercicio sobre creación y estructuración de un documento web mediante capas html. Este ejercicio es preparatorio al salto a html5. Incluye solución y anotaciones de clase.

La huelga del 21 de diciembre de Renfe. Y la 31,14, 30,1...
Renfe en huelga. Una historia que se repite y un programador algo cansado de escribir siempre el mismo código. ¡Con capturas de pantalla!

Etiquetas audio y video de html5
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110

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