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. 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.
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:
Resumen de atributos html para ayudarnos a memorizar
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
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.
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...
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...
La importancia de la etiqueta < title > para el SEO
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
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.
Ejercicio sobre listas de definiciones html
Gran excusa para repasar las listas html de definiciones y conceptos de cultura general sobre web e internet. Incluye solución.
Gran excusa para repasar las listas html de definiciones y conceptos de cultura general sobre web e internet. Incluye solución.
No Comments