Ejemplo de creación de página web con capas y migración a HTML5

Ejemplo de creación de página web con capas y migración a HTML5

Print Friendly, PDF & Email
Ejemplo de creación de página web con capas y migración a HTML5
5 (100%) 2 votos
Durante esta serie de apuntes de HTML hemos mencionado que el lenguaje de marcas sirve para dotar de estructura y contenido a un documento web.

Hoy veremos la etiqueta div y algunas otras que sirven para organizar y dotar de semántica a las páginas web.

Pero en primer lugar hagamos el símil de cómo se debería estructurar una página web comparándolo con un libro.

En un libro encontramos por este orden:

  1. Una portada.
  2. Un prólogo o introducción.
  3. Un índice.
  4. Un conjunto de capítulos dónde se desarrolla el contenido verdaderamente importante.
  5. Un epílogo.
  6. Una contraportada.

Todas estas partes las deberíamos encontrar en un escrito de calidad. Y si os fijáis en bloggers de calidad que se trabajan las publicaciones así suele ser…

El lenguaje de marcado es la herramienta que nos permite conseguirlo.

Este resumen tendrá 2 partes:

Estructuración de contenidos a la vieja usanza

Antiguamente o cuando tenemos dudas o no disponemos de una etiqueta en HTML5 adecuada para crear una capa usamos la etiqueta <div>.

La etiqueta <div> suele llevar algunos de los atributos class o id. Aunque también puede llevar algunos otros.

Una capa es un contenedor que agrupa informaciones relacionadas.

etiqueta div html
Etiqueta div html
layout ejercicio capas

Volviendo al símil del libro, el vocabulario que se suele usar en jerga inglesa es el siguiente:

  • Header (no confundir con head). Lo usaremos para designar la cabecera de un documento.
  • Nav o menú para designar una lista de navegación.
  • Main (lo usaremos para definir el contenido principal de un documento.
  • Aside(lo usaremos para definir el contenido secundario anexo en una página web. En ocasiones veremos la palabra sidebar.
  • Footer (servirá para designar un pié de página)
  • Usaremos contenedores auxiliares con nombres ingleses como “container” y/o “wrapper”.

Algunas de las palabras anteriores dieron lugar a etiquetas HTML5 que veremos a posteriori.

La transformación de la siguiente propuesta de estructura web:

Derivaría en la siguiente resolución que se hizo en la pizarra:

pizzarra html
Resolución a la antigua (con divs) de ejercicio de capas html. Imagen cortesía de un alumno. J.S.R

Estructuración de contenidos con nuevas etiquetas HTML5

Entra las muchas novedades que la actualitzación del XHTML nos ha traído encontramos la inclusión de etiquetes semánticas que ayudan a aportar significado semántico a determinades secciones de un documento web.

De este modo, los motores de búsquedas saben interpretar major las pàgines web y quedarse con la información más relevante.

Se ha estado hablando de HTML5 durante más de 10 años hasta que el stándard oficial salió a la luz en 2014.

Por el camino se han creado y deshecho muchas propuestas de etiquetes que han salido en todo tipo de medios especializados como revistas y blogs.

Como consecuencia, algunes etiquetes que parecía que saldrían a la luz finalment e no lo hicieron o si lo hicieron no con la intención inicial. (como ejemplos econtramos las etiquetas sidebar y menú.)

Existen muchas etiquetas importantes. Pero las imprescindibles para mi con el fin de dotar de estructura son las siguientes:

  • <header> se recomienda sólo uno por documento web. A no confundir con <head>
  • <nav> – se recomienda sólo uno por documento web.
  • <main>
  • <aside>
  • <section>
  • <article>
  • <figure>

Después ya encontraríamos otras con el fin de dar significado semántico como <mark>, <blockquote>, <figcaption>, … que está bien recordarlas y usarlas pero que tampoco nos tienen que quitar el sueño.

Una posible solución para el ejercicio anterior podría ser la que se muestra en la imagen a continuación.

Resolución ejercicio

Notar que

  • Únicamente se ha usado un <nav> en considerar la capa nav2 del aside de poca importancia.
  • En el <main> hemos optado por poner <article> dentro de <section> aunque también hubiese podido ser los <section> dentro de <article>. Es una cuestión subjetiva. Puedes tener un escrito muy largo con varias secciones o viceversa

Querido lector, hasta aquí el ejemplo de hoy. Espero que las imágenes te puedan ser de utilidad para ponerte a escribir tu ahora también.

¡Da igual que lo hagas con Sublime o Brackets pero hazlo!

Enseguida verás que no es difícil, sólo requiere de práctica.

Entradas relacionadas:

Ejercicio html sobre listas anidadas para un menú de navegación
- 62
Ejercicio html dónde se práctica como anidar correctamente una lista no ordenada. Esta lista simula un futuro menú de navegación. Incluye solución.
Libro digital navegable
- 48
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!
Introducción al HTML
- 844
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Corrige los errores que veas en la estructura web | Ejercicios html
- 49
Ejercicio html dónde se muestran errores comunes que cometemos al escribir documentos html. Incluye solución.
Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 414
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Anclas html
- 602
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Etiquetas xmp, pre y code en HTML
- 960
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 ...
Resumen de como comentar código en html, css y javascript
- 587
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Ejercicio html sobre códigos HTML y caracteres especiales
- 49
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
Qué es un favicon y para que sirve
- 178
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

1 Comentario
  • rafael
    Publicado a las 09:12h, 20 febrero Responder

    Muy buena, más contenido con menos instrucciones.

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.