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:

Conversión de un xhtml a htm5. Continuación ejercicio capas html.
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.

Ejercicio avanzado mapa de imagen html
Ejercicio sobre mapa de imagen con areas inertes y ligeramente más complicado que los anteriores. Incluye solución.

Introducción al HTML
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...

LibrosWeb ahora es UniWebSidad
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!

Como anidar etiquetas html correctamente
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.

Cuando el único remedio es usar caracteres escapados
En este ejercicio html vemos un ejemplo práctico en el que no queda más remedio que usar nombres html o códigos html (caracteres escapados).

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