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:
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...
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
Ejercicios resueltos sobre listas anidadas (encapsuladas) de html
3 ejercicios sobre listas anidadas en dificultad creciente. Incluye soluciones. ¿Te atreves a resolverlos a bolígrafo y papel?
3 ejercicios sobre listas anidadas en dificultad creciente. Incluye soluciones. ¿Te atreves a resolverlos a bolígrafo y papel?
Libro digital navegable
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
La huelga del 21 de diciembre de Renfe. Y la 31,14, 30,1...
Renfe en huelga. Una historia que se repite y un programador algo cansado de escribir siempre el mismo código. ¡Con capturas de pantalla!
Renfe en huelga. Una historia que se repite y un programador algo cansado de escribir siempre el mismo código. ¡Con capturas de pantalla!
Meta etiquetas en HTML : meta tags
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
No Comments