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:
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.
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.
Ejercicio fácil de creación de tablas html. Incluye solución
Ejercicio básico para practicar como hacer una tabla en html. Etiquetas thead, tboyd, table, tr, th y td. Incluye solución.
Ejercicio básico para practicar como hacer una tabla en html. Etiquetas thead, tboyd, table, tr, th y td. Incluye solución.
Listas HTML. Etiquetas ol, ul, li, dl, dt, dd.
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
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 ...
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...
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...
No hay comentarios