15 Feb Ejercicio migración de xhtml a html5. Estructura web semántica.
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.
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 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.
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 nivel principiante para practicar el uso de las principales etiquetas html de texto. Incluye enunciado y solución.
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...
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...
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
No Comments