Estructura básica en HTML5
La mayoría de las web se basan en la misma estructura donde es colocado primero un encabezado con el logotipo de la empresa y justo abajo muestran el menú, en la parte del medio colocan dos divisiones una donde ira todo el contenido de la página y otra que será la columna donde pondrán cosas con menos relevancia.
Anteriormente para realizar esta estructura se hacía uso de cajas de contenido llamadas div donde para diferenciar una de otras se utilizaban id o un class.
Los id y class aparte de ser utilizados para identificar un contenido se utilizan para asignarles estilos en la hoja de estilos, los id se referencian por el prefijo “#” y son utilizados para elementos únicos, las clases class son utilizadas para elementos generalizados se referencian por el prefijo “.”
Esta imagen explica la estructura de una página HTML donde se utiliza cajas de contenido.
Cuando nació HTML5 trajo consigo las nuevas etiquetas de maquetación donde ya se identificaba de una mejor manera cada elemento, ya no es necesario utilizar tantas cajas de contendió div por que ya existen etiquetas para cada elemento, en el tutorial anterior mostré todas las etiquetas de HTML5 y para que se usan, puedes ver el tutorial en el siguiente link Tutorial HTML5, etiquetas
Esta imagen explica la estructura de una página HTML5 con las nuevas etiquetas.
Me gustaría destacar que HTML5 no es solo las etiquetas, el verdadero poder de HTML5 está en CSS3, JavaScript. También tenemos dos tecnologías que son estándares para poder realizar gráficas: SVG para gráficas vectoriales y Canvas para gráficas que son realizadas con mapas de bits.
Si eres nuevo en esto entiendo que estés algo desorientado y no sepas de qué estoy hablando, no te preocupes vamos paso a paso ya en los demás tutoriales empezaremos a ver todo esto, si tienes dudas publicalas en el grupo de Desarrollo Web, si tienes problemas publicalas en el foro o si deseas hacerme las preguntas más directo mándame un tweet @Angeel_Sancheez.
El ejemplo que vamos a ver hoy es el siguiente, explicare cada elemento del mismo para su mayor entendimiento.
See the Pen Estrcutura HTML5 by Angel Sanchez (@AzulWeb) on CodePen.
Primero espesamos con el <!DOCTYPE html> en el nuevo HTML5 ha sido recortado y la función del mismo es facilitar información al servidor web donde esta aloja la página. La información que facilita el DOCTYPE se refiere al tipo de documento visualizado además es necesario para la comunicación entre el navegador y servidor.
<!DOCTYPE html>
Despues seguimos con la etiqueta <html lang=»es»> podrás notar el atributo lang, bueno este se utiliza para especificar el idioma de la pagina web, si tu web esta en otro idioma tendrás que especificar el indicado, aquí te dejo una lista de todos los códigos para los diferentes idiomas.
Si notan esta etiqueta no la hemos cerrado aun, mas a delante la cerraremos.
<html lang="es">
Justo abajo de la etiqueta <html lang=»es»> colocamos la etiqueta <head> dentro de esta etiqueta se coloca el titulo y los link a las hojas de estilo y algunas meta, de pendiendo de lo que necesitemos.
La etiqueta que veremos dentro de <head>, <title>Mi Web con HTML5</title> es el titulo de nuestra pagina web, la etiqueta <meta charset=»utf-8″/>, es utilizada para agregar el atributo charset que especifica la codificación de caracteres para el documento HTML y UTF-8 (8-bit Unicode Transformation Format) es un formato de codificación de caracteres, es capaz de representar cualquier carácter Unicode. (Es para que pueda leer acentos, signos etc.)
Tambien podemos ver <link rel=»stylesheet» type=»text/css» href=»css/style.css»> aquí estamos llamando a nuestra hoja de estilos, mas a delante les explico sobre esto.
<head> <meta charset="utf-8"/> <title>Mi Web con HTML5</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
Ahora podemos observar la etiqueta <body> que es el cuerpo del documento, dentro de esta etiqueta va todo el contenido visible de nuestra pagina web, esta etiqueta se cierra al final de todo el contenido.
<body>
Dentro de la etiqueta <body> podemos ver que tenemos lo siguiente;
<header> </header> <nav> </nav> <article> <section> </section> </article> <aside> </aside> <footer> </footer>
Les explico uno por uno:
<header></header>; Es la cabecera del documento, por lo general solo contiene el logotipo de la empresa.
<nav></nav>; Aquí es donde se coloca en menú de nuestra pagina web.
<article> y <section>; Con estas etiquetas se han creado algunas discusiones de cual debería ir dentro de cual, la mayoría de las personas hemos llegado a la conclusion que la etiqueta <section> es utilizada para realizar divisiones dentro de un articulo, así que colocamos <article> como etiqueta padre y dentro de esta colocamos las <section> de cada articulo.
<aside></aside>; Esta etiqueta es utilizada para elementos no principales, podemos poner dentro de esta etiqueta publicidad, calendarios, artículos recomendados, links externos, botones de redes sociales etc.
<footer></footer>; Esta etiqueta esta echa para el pie de la pagina donde se coloca los créditos.
Por ultimo cerramos las etiquetas que quedaron pendientes
</body> </html>
El codigo completo se vería de la siguiente forma
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mi Web con HTML5</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Se preguntaran que como fue posible que acomodara los elementos de esa forma y los colores, bueno para eso utilizamos la hoja de estilos css donde a cada elemento le damos algo de estilo.
<link rel="stylesheet" type="text/css" href="css/style.css">
La hoja de estilos es un documento a parte con terminación .css que se enlaza en el documento HTML, podrán notar en la linea anterior la parte href=»css/style.css» , aquí colocamos la dirección donde esta nuestro documento .css, en este caso lo tenemos dentro de una carpeta llamada css.
A continuación les explico los estilos elemento por elemento, empezamos con el Body
body{
text-align: center;
background: #000000;
}
text-align : center; lo utilice para centrar dos elementos el section y el aside, existen diferentes formas de hacer las cosas, todo depende del tipo de proyecto, mas adelante notaran que para el header, nav y footer utilice otra forma para centrarlos.
El background: #000000; lo utilice para el color de fondo negro, para que veas los códigos hexadecimales de todos los colres te dejo esta tabla Códigos de colores HTML
Header
header{
margin: auto;
margin-bottom: 20px;
width: 90%;
height: 50px;
background: #2E64FE;
}
Como les mencione anteriormente existen distintas formas de hacer las cosas, ahora para centrar este documento utilice margin: auto; que automáticamente centra el documento, margin-bottom: 20px; es para poner una distancia de 20pixeles entre este elemento y el de abajo, width: 90%; este es el ancho del elemento, yo lo coloque en porcentajes para que se adaptara a al resolución de cada pantalla, así siempre tendrá el 90%, height: 50px; este es el alto del elemento, su tamaño lo de termine a 50pixeles y este tamaño es fijo, no cambia con la resolución como el porcentaje, por ultimo esta el background: #2E64FE; que ya sabemos es el color de fondo.
Nav
nav{
margin: auto;
margin-bottom: 20px;
width: 90%;
height: 50px;
background: #F3F781;
}
Tiene las mismas propiedades de el Header solo que esta vez cambia el color de fondo.
Article
article{
display: inline-block;
margin: auto;
margin-right: 18px;
margin-bottom: 20px;
width: 58%;
height: 200px;
background: #F79F81;
}
Tiene las mismas propiedades solo cambia el tamaño y el color y con la diferencia de que se agrego el display: inline-block;, por lo general cada elemento se posiciona abajo de otro, en este caso como queríamos el article del lado izquierdo y el aside del lado derecho colocamos esto para que se coloquen en linea y no uno abajo de otro.
Section
section{
margin: auto;
margin-top: 40px;
width: 97%;
height: 150px;
background: #FA8258;
}
Aquí vemos las mismas propiedades solo que a hora el margin-top: 40px; es para el margen de la parte de arriba, a continuación te muestro los diferentes margin que hay;
<style >
{
margin-top:; /*Margen parte de arriba*/
margin-bottom:; /*Margen parte de abajo*/
margin-left:; /*Margen parte izquierda*/
margin-right:; /*Margen parte derecha*/
}
</style>
Aside y Footer
aside{
display: inline-block;
margin: auto;
margin-bottom: 20px;
width: 30%;
height: 200px;
background: #81F781;
}
footer{
margin: auto;
width: 90%;
height: 50px;
background: #FA5882;
}
Estos dos elementos tienen propiedades que ya vimos, podrás notar que el aside tiene display: inline-block; esto es por que es el otro elemento que ira en linea con el article.
La hoja de estilos completa de ve de esta forma;
body{
text-align: center;
background: #000000;
}
header{
margin: auto;
margin-bottom: 20px;
width: 90%;
height: 50px;
background: #2E64FE;
}
nav{
margin: auto;
margin-bottom: 20px;
width: 90%;
height: 50px;
background: #F3F781;
}
article{
display: inline-block;
margin: auto;
margin-right: 18px;
margin-bottom: 20px;
width: 58%;
height: 200px;
background: #F79F81;
}
section{
margin: auto;
margin-top: 40px;
width: 97%;
height: 150px;
background: #FA8258;
}
aside{
display: inline-block;
margin: auto;
margin-bottom: 20px;
width: 30%;
height: 200px;
background: #81F781;
}
footer{
margin: auto;
width: 90%;
height: 50px;
background: #FA5882;
}
Con esta informacion damos por terminado este tutorial, si gustas puedes descargar los archivos dando clic aquí.
