En el tutorial anterior vimos como se estructura un sitio web con la sintaxis semántica de HTML5 frente a la sintaxis de versiones más antiguas, y como lo prometido es deuda, hoy estoy de vuelta para introducirlos en nuestro primer proyecto.
Vamos a crear un sitio web estático que contenga tres paginas: una página de inicio, una página "acerca de" y un pequeño formulario de contacto. De esta forma iremos viendo nuevos elementos y aprenderemos nuevos conceptos en el camino. pero primero, hagamos un pequeño recuento.
Ya debemos tener claro que si queremos desarrollar un sitio web desde cero y en crudo, a pesar de que existen muchas herramientas para este fin, debemos utilizar un editor de texto cualquiera, en mi caso, me gusta Sublime Tex, el cual puedes descargar aquí.
También recalco el hecho de que este tutorial es para desarrollar en crudo, es decir, sin utilizar herramientas como Dream Weaber o incluso Sistemas de manejo de contenido como Joomla o Wordpres, ni frameworks como Zend o Django, si lo que quieres es aprender a echar código, estás en el lugar correcto. Aunque aclaro que el uso de esas herramientas se vuelve necesario con el tiempo por motivos que ustedes mismos irán descubriendo en el camino, pero creo que es bueno conocer de fondo todo lo que producimos no? Bueno, sigamos.
Estructura de Directorios
Comencemos por organizar la estructura de directorios de nuestro pequeño proyecto:
Como podemos ver en la imagen, tenemos cinco directorios y un archivo, comencemos por este último.
index.html Este archivo corresponde a la página principal del sitio, recordando que no es lo mismo un sitio que una página, desde aquí se accede a las otras páginas del sitio.
acerca_de es el directorio que contendrá la página de información de nuestro sitio.
contacto es el directorio que contendrá el formulario de contacto de nuestro sitio.
css Los estilos que utilizaremos en nuestro sitio y conceptos que iremos viendo más adelante.
js Los scripts de javascript que utilizaremos en nuestro sitio y conceptos que iremos viendo más adelante.
img Contiene las imágenes de nuestro sitio.
Dicho todo esto, vamos a lo que nos compete.
Comenzamos
De momento nuestra página de inicio se verá de esta manera. Para lograr esto comenzamos igual que vimos en el segundo tutorial con las siguientes lineas.
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Vida Bajo Tierra</title>
</head>
<body>
</body>
</html>
y dentro de body agregamos los mismos elementos que vimos en el tutorial anterior.
<body>
<header>
</header>
<nav>
</nav>
<main role="main">
</main>
<aside>
</aside>
<footer>
</footer>
</body>
Al hacer esto, aún no tendremos nada en nuestra vista, así que comencemos a agregar elementos.
La cabecera <header>
<header>
<img src="img/vidabajotierra-logo.png" alt="Logo de vida Bajo tierra">
<hgroup>
<h1>Vida Bajo Tierra</h1>
<h2>Se vien la invasión</h2>
</hgroup>
</header>
El primer elemento que nos encontramos dentro de nuestra cabecera es una imagen, en este caso el logo de Vida Bajo Tierra y luego el nombre del sitio al que representa dicho logo y un pequeño eslogan.
Imágenes en HTML5
Hoy día un sitio web sin imágenes es poco atractivo. Siendo estas necesarias para diferentes fines, son introducidas desde HTML, en la mayoría de los casos utilizando la etiqueta <img> la cual está bastante relacionada con los nuevos elementos de HTML5 <figure> y <figcaption> que ya veremos más adelante.<img>
Este elemento es uno de los primeros elementos semánticos de HTML y obviamente sirve para definir imágenes y su sintaxis es la siguiente:<img src="ruta a la imagen" alt="alternativa">
Como pueden ver, no lleva etiqueta de cierre mas si este par de atributos
src
Sirve para indicar la ruta de la imagen, en el caso de este sitio estático que estamos construyendo es la ruta relativa: "img/vidabajotierra-logo.png" en sitios más complejos y de acuerdo a nuestras necesidades tendremos que utilizar rutas absolutas como: "http://www.ejemplo.com/img/vidabajotierra.logo.png"
alt
Es un atributo de tipo texto y sirve para definir un texto alternativo en caso de que la imagen no sea mostrada por el navegador. No es obligatorio utilizar este atributo, pero sí una buena práctica.
Encabezados en HTML5
Los encabezados son elementos de HTML que nos permiten colocar títulos y subtítulos en nuestras páginas y están definidas por la etiqueta <hx> donde x es un numero que corresponde a la importancia del encabezado. Este numero va del 1 al 6 siendo los seis elementos de <hx> los siguientes:<h1>Cabecera de tipo 1</h1>
<h2>Cabecera de tipo 2</h2>
<h3>Cabecera de tipo 3</h3>
<h4>Cabecera de tipo 4</h4>
<h5>Cabecera de tipo 5</h5>
<h6>Cabecera de tipo 6</h6>
<h1>titulo de la página</h1>
<h2>Eslogan</h2>
<h3>titulo de sección</h2>
<h4>Titulo de artíulo</h4>
<h5>Subtítulo de artículo</h5>
Esa asignación de encabezados no es del todo correcta pues le da más importancia al eslogan que a los otros encabezados, lo cual no está bien pero existen diferentes alternativas, como sustituir el eslogan por un elemento <div> y subirle un nivel a los demás encabezados y cualquier otra combinación que se nos ocurra, pero seguimos teniendo un problema, los rastreadores web no asociarán la relación entre los encabezados, por lo que el eslogan, por ejemplo, si está en un elemento hx, no se sabrá si tiene relación con el título de la página o no.
En este punto, HTML5 nos trae el elemento <hgroup> que permite esta asociación.
<hgroup>
Crea relación entre los encabezados, por lo tanto, si colocamos la siguiente estructura:<hgroup>
<h1>Título de la página</h1>
<h2>Eslogan</h2>
</hgroup>
<hgroup>
<h1>Título desección</h1> </hgroup>
<hgroup>
<h1>Título de artículo</h1>
<h2>Subtítulo de artículo</h2>
</hgroup>
Los rastreadores tendrán un elemento para relacionar los encabezados entre sí. En este caso vemos el título y el eslogan relacionados, el título de sección en otro grupo y por último el articulo y sus diferentes encabezados en otro.
hasta ahora nuestro sitio luce así:
En el siguiente tutorial veremos otra serie de elementos de HTML para continuar con nuestro proyecto, De momento espero que les haya sido útil, siganme por mis redes sociales para estar atentos de los siguientes artículos de este tutorial y las últimas noticias del mundo de los videojuegos, la tecnología, el cine y la TV entre otras cosas bastante interesantes y no olviden suscribirse, es gratis, hasta la próxima. :)
Hey keep posting such good and meaningful articles.
ResponderEliminar