15 Feb Ejercicio migración de xhtml a html5. Estructura web semántica.
Publicado a las 07:30h en Ejercicios HTML, Tutorial HTML gratuito. Aprende a estructurar tus páginas web. 0 Comentarios
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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Etiquetas audio y video de html5
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Como y cuando usar las etiquetas blockquote, q y cite
Las etiquetas q, cite y blockquote tienen significado semántico. Además de que pueden ser muy útiles en cuanto al SEO. ¿Sabes cómo y cuándo debes usarlas?
Las etiquetas q, cite y blockquote tienen significado semántico. Además de que pueden ser muy útiles en cuanto al SEO. ¿Sabes cómo y cuándo debes usarlas?
Ejercicio creación de un formulario html a partir de especificaciones
Ejercicio html en el que se resuelve un formulario html a partir de unas especificaciones determinadas. Incluye solución.
Ejercicio html en el que se resuelve un formulario html a partir de unas especificaciones determinadas. Incluye solución.
Etiquetas xmp, pre y code en HTML
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Factores que afectan al tiempo de carga de una página web
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Ejercicio html etiquetas de texto nivel intermedio
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.
No hay comentarios