Para crear una página web, en cualquier lenguage de marcas, debemos tener unos cimientos sobre los que empezar a construïr.
En este tutorial intentaré explicar lo mejor que pueda como crear la estructura principal de un documento HTML5 sobre el que vamos a desarrollar nuestra página web. Al ser un tutorial muy básico explicaré el por qué de cada etiqueta.
Como veréis a continuación, el proceso es muy sencillo.
Primero empezarémos por definir la etiqueta DOCTYPE. Esta etiqueta indica al navegador que versión de HTML estamos usando.
Después viene la etiqueta HTML que será la raíz de nuestro documento. La etiqueta HTML puede incluir el atributo LANG para especificar el idioma que se utiliza en nuestra página web.
<!DOCTYPE html> <html lang="es"></html>
Hecho esto, abrimos la etiqueta HEAD dentro de <html lang="es"></html>
<head></head>
En el interior de esta etiqueta vamos a definir cual es el título de nuestra web y que codificación de carácteres se utiliza. De momento quedaría así:
<head> <title>Estructura bàsica HTML5</title> <meta charset="utf-8"/> </head>
Aún no hemos acabado de definir cosillas en nuestra etiqueta HEAD. Llega el turno de las etiquetas LINK.
Estas etiquetas, como el propio nombre indica, enlazan nuestro documento HTML con estilos CSS. En ellas debemos definir normalmente dos atributos, el REL y el HREF.
<link rel="stylesheet" href="estilos.css"/> <link rel="shortcut icon" href="icon/favicon.ico"/>
De momento nuestro código debería verse así:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Estructura bàsica HTML5</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="estilos.css"/>
<link rel="shortcut icon" href="icon/favicon.ico"/>
</head>
</html>Hemos añadido algunas cosas, pero abrimos el archivo con el navegador y todavia vemos todo el documento en blanco. Eso es por que aún no hemos añadido el contenido, y aquí es donde entra nuestra querida etiqueta BODY, que no es ni más ni menos que el cuerpo de nuestra web.
<body> <!--El contenido va aquí--> </body>
Ahora viene la parte interesante de HTML5, y es que aquí entran en juego las etiquetas nuevas que se implementaron en esta versión. Mucho más descriptivas y semánticas, estas etiquetas nos ayudaran a mejorar el rastreo de nuestra página web.
La etiqueta HEADER nos permite añadir una cabecera a nuestro documento. En ella podremos colocar, por ejemplo, el logotipo de nuestra web y una barra de navegación que crearémos con la etiqueta NAV.
<body>
<header>
<img src="logotipo.png"/>
<h1>Estructura bàsica de un documento HTML5</h1>
<nav>
<a href="/inicio">Inicio</a>
<a href="/contacto">Contacto</a>
</nav>
</header>
</body>En versiones anteriores de HTML el codigo anterior sería algo así:
<body>
<div id="header">
<img src="logotipo.png"/>
<h1>Estructura bàsica de un documento HTML5</h1>
<ul>
<li href="/inicio">Inicio</li>
<li href="/contacto">Contacto</li>
</ul>
</div>
</body>Como véis es mucho menos descriptivo y a simple vista más complicado de leer.
Ahora pasaremos a definir el contenido principal con la etiqueta MAIN.
<main> <!--Contenido principal--> </main>
Esta etiqueta la usaremos como contenedor de nuestro contenido principal.
Vamos a definir una sección de contenido con la etiqueta SECTION i en esta incluiremos dos artículos que también tienen su propia etiqueta llamada ARTICLE.
<main>
<section>
<article>
<h2>Título del artículo</h2>
<p> Contenido</p>
</article>
<article>
<h2>Título del artículo</h2>
<p> Contenido</p>
</article>
</section>
</main>Vamos a utilizar otra novedad muy interesante de HTML5 que és la etiqueta ASIDE. Esta etiqueta vendria a ser una barra lateral donde podemos incluir, por ejemplo, noticias.
<aside> <h3>Noticias</h3> <img href=""/> <p></p> </aside>
Por último finalizaremos nuestra web con el pie de pagina que también, como no podía ser menos, tiene su propia etiqueta llamada FOOTER.
<footer> <p>Footer de nuestra página web</p> </footer>
El código completo quedaría así:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Estructura bàsica HTML5</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="estilos.css"/>
<link rel="shortcut icon" href="icon/favicon.ico"/>
</head>
<body>
<header>
<img src="logotipo.png"/>
<h1>Estructura bàsica de un documento HTML5</h1>
<nav>
<a href="/inicio">Inicio</a>
<a href="/contacto">Contacto</a>
</nav>
</header>
<main>
<section>
<article>
<h2>Título del artículo</h2>
<p> Contenido</p>
</article>
<article>
<h2>Título del artículo</h2>
<p> Contenido</p>
</article>
</section>
<aside>
<h3>Noticias</h3>
<img href=""/>
<p></p>
</aside>
</main>
<footer>
<p>Footer de nuestra página web</p>
</footer>
</body>
</html>
También os dejo un código sencillo en CSS para que podáis ver como quedaría.
html,body{
padding: 0;
margin: 0;
}
header{
width: 100%;
height:100px;
padding: 15px;
background: #2c3e50;
}
header img{
width:50px;
height: 50px;
float: left;
}
h1{
float:left;
margin-left:20px;
color: #95a5a6;
}
nav{
clear: both;
}
nav a{
padding: 10px;
background: #34495e;
color:white;
text-decoration: none;
border-radius: 5px;
}
main{
margin:0 auto;
width:970px;
}
section{
float: left;
margin: 0 1.5%;
width: 63%;
}
aside{
float: right;
margin: 0 1.5%;
width: 30%;
}
aside img {
width:150px;
height: 150px;
}
footer{
background: #2c3e50;
width: 100%;
position: absolute;
bottom: 0;
clear: both;
color:white;
text-align: center;
}
Por último me gustaría destacar que hay muchísimas más etiquetas y funciones nuevas en HTML5. Sois libres de investigar y descubrir por vosotros mismos todo su potencial! :)
