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 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.

Etiquetas básicas introductoras al html5
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...

Ejercicio html para practicar con etiquetas de texto más comunes
Ejercicio html nivel principiante para practicar el uso de las principales etiquetas html de texto. Incluye enunciado y solución.

Mapas de imagen en html
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...

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...

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