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:

Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
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...

Ejercicios resueltos sobre listas anidadas (encapsuladas) de html
3 ejercicios sobre listas anidadas en dificultad creciente. Incluye soluciones. ¿Te atreves a resolverlos a bolígrafo y papel?

Preguntas test de html con solución para repasar conceptos básicos
20 preguntas test de un examen html real para repasar conceptos básicos de una formación de 80h de xhtml y html5.

Ejemplo de creación de página web con capas y migración a HTML5
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...

Códigos HTML | Caracteres especiales (escapados)
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.

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