Tutorial: Aprender HTML5 de forma eficiente (3ra parte)
En la parte anterior de este tutorial de HTML5 hablamos de los elementos que van en la sección <head> de una pagina web. Hoy vamos a empezar con la sección <body> que es en la que se desarrolla la pagina como tal y por tanto es la que requiere mas trabajo, en la imagen de arriba pueden ver el ejemplo con el que trabajaremos, es un C.M.S(Content Management System) que junto con un amigo desarrollamos, y es uno de los productos que ofrecemos en edosistems, utilizo este ejemplo para mostrarles el uso de las distintas etiquetas.
Antes de mostrarles algún código les hablare de las distintas marcas para estructurar el cuerpo de una pagina:
En versiones anteriores de HTML para dividir cada una de las partes se utilizaban divisores es decir la etiqueta <div> pero actualmente en HTML5 realizaron un estudio en las paginas web para saber que etiquetas necesitaban los desarrolladores y crearon nuevas etiquetas para satisfacer esas necesidades y así tener un código mas organizado y no un montón de <div> por toda nuestra pagina, aunque por supuesto la etiqueta <div> es de mucha ayuda y la seguiremos usando muchas veces a lo largo de este tutorial.
Header
Esta etiqueta es utilizada para la cabecera de una pagina web, normalmente en la cabecera de la pagina es donde colocaremos alguna introducción, un logo o ayudas para la navegación de la pagina web, como los botones por los que nos desplazaremos, distintos idiomas o un buscador.
Nav
La etiqueta nav, se utiliza para colocar opciones de navegación en nuestra pagina, es una etiqueta muy utilizada ya que en ella es donde debemos colocar diferentes links para desplazarnos por la pagina, por supuesto no todos los links de una pagina van en esta etiqueta, sino aquellos que son de suma importancia para desplazarse por las secciones de una pagina.
Section
<section> es utilizada para las secciones de una pagina, por ejemplo, usarla para la sección "Acerca" o cuando tengamos "Términos y Condiciones" mas seria incorrecto usarla para añadir elementos de estilo a una parte de la pagina, en estos casos lo correcto sera utilizar nuestro conocido <div>
Article
Podemos decir que este elemento es en parte parecido al anterior (section) mas su uso esta dirigido a los elementos que componen una pagina, en nuestro ejemplo de la imagen los <article> es cada uno de los recuadros que esta debajo de la imagen, es decir acerca, servicios, blog, contactanos, redes sociales, en caso de que se te dificulte esta explicación imagina un periódico un <article> es cada una de las noticias que componen la pagina.
En pocas palabras una sección puede contener varios artículos, pero no al revés.
Aside
Este elemento se usa para contener la información que tiene cierta relación con el contenido de la pagina, mas no va a estar tan relacionado como el resto, sus usos normalmente son para una barra lateral con ciertas noticias o alguna información extra.
Footer
Finalmente este elemento es la parte final de toda pagina, en el podemos agregar alguna barra de navegación dentro del sitio, alguna información de términos y condiciones, información sobre los derechos de autor, diseñadores etc.
Con estos elementos podemos crear ya toda la estructura de la pagina y estaríamos listos para solo agregar las imágenes, texto, elementos, links, párrafos o información en general por tanto nuestra estructura quedaría algo como esto.
Este código nos dejaría una estructura así:
Encontraran unas lineas de código nueva como es "<!--Slideshow-->" todo lo que encuentren entre <!----> son comentarios, no afectara el código ni aparecerá en nuestra pagina ya que su uso es solo informativo. también encontraran "id" su uso lo discutiremos después pero por ahora lo utilizaremos para diferenciar cada una de las divisiones.
En la 4ta parte de este tutorial, hablaremos de las marcas de HTML para colocar títulos párrafos links, listas e imágenes aunque estas no han cambiado en HTML5 y siguen siendo las mismas que para HTML4.
Como siempre, si no entienden algo, quieren hacer alguna sugerencia o dar una información extra, son bienvenidos a dejarnos sus comentarios.
0 comentarios: