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
Valora esta entrada
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:

Meta etiquetas en HTML : meta tags
- 479
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...
Factores que afectan al tiempo de carga de una página web
- 256
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...
Imágenes en html: la etiqueta img
- 358
Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta de html se propuso por primera vez en 1993 por Marc Andreessen. En esta entrada presentamos la etiqueta...
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 547
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...
La importancia de la etiqueta < title > para el SEO
- 129
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Qué es un favicon y para que sirve
- 101
¿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.
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 588
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
Etiquetas básicas introductoras al html5
- 609
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
Mapas de imagen en html
- 265
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...
Como indicar a Google la modificación y corrección de contenidos mediante html
- 62
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
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.