Tutorial: Aprender HTML5 de forma eficiente (2da parte)
En la primera parte de este tutorial hablamos de lo que
pienso cubrir y de algunas recomendaciones antes de empezar. Hoy vamos a
empezar de una forma más oficial, entrando ya un poco en materia con algunas
marcas, mas específicamente las marcas que se utilizan en las cabeceras de las paginas, para brindar información o relacionarlas con algún archivo bien sea una hoja de estilos, un archivo en JavaScript etc.
Una plantilla básica para iniciar a trabajar con HTML5 es la
siguiente:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Lorem Ipsum</title>
<meta name="description"
content="Pagina de Prueba">
<meta name="author" content="Edosistems">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script
type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("hgroup");
</script>
<![endif]-->
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
Si ya has trabajado con HTML4 o XHTML notaras varios cambios.
Doctype
El doctype es la declaración del tipo de documento que estamos utilizando
y sirve para eso, decirle al explorador con lo que se acaba de encontrar, en el
caso de HTML le dice con que versión de HTML se ha encontrado y debe ser
siempre la primera línea, anteriormente esta era una línea difícil de aprender
y muy larga (la verdad es que nunca me la aprendí).
En XHTML era algo así
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Y en HTML4 transitional nos encontrábamos con algo así
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Pero con HTML5 lo único que tienes que incluir es algo muy
sencillo y directo a lo que queremos, solamente
<!Doctype html>
HTML
La etiqueta HTML no ha cambiado en nada, en el ejemplo agregue el
atributo Lang=”es” para informar que el documento se encuentra en español, pero
esto no es necesario para su correcto funcionamiento
Hasta aquí tenemos esto:
<!doctype html>
<html lang="es">
</html>
Head
La siguiente es la etiqueta head y nos encontramos que la primera línea
es la que nos muestra la codificación de los caracteres que usaremos, esta línea
también ha sufrido algunas variaciones, anteriormente nos encontrábamos con
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8">
El cual ha cambiado en HTML5 hasta convertirse en
<meta charset="utf-8">
En la mayoría de los casos se utiliza el juego de caracteres utf-8,
para que esta guía sea más practica y directa a aprender HTML5 no les
hablare en este momento de los distintos tipos de juegos de caracteres, así que
vayamos a la siguiente parte.
<title>Lorem Ipsum</title>
<meta name="description"
content="Pagina de Prueba">
<meta name="author" content="Edosistems">
<link rel="stylesheet" href="css/style.css">
Esta parte no ha cambiado mucho con respecto a las versiones anteriores,
y su explicación es muy básica e intuitiva, la etiqueta <title> sirve
para colocar el titulo de nuestra página, que vemos en la parte superior del
explorador. Y la etiqueta <meta> son opcionales en su mayoría y sirven
para brindar mayor información sobre el sitio web, van acompañadas por un name(nombre)
y content(contenido), en el ejemplo coloque description(descripción) y author(autor)
para dar la información de quien creó la pagina y cuál es su finalidad.
De estos elementos que presente donde podemos notar un mayor
cambio es en el elemento <link> el cual utilizamos para referirnos a otro
archivo dentro de nuestro servidor, en la mayoría de los casos son archivos de
estilos para nuestro sitio web, para los que conocen HTML4 pueden notar que ha
desaparecido la etiqueta type=”text/css” la cual ni siquiera en HTML4 hace
falta ya que no afecta el funcionamiento de la pagina y ahora en HTML5 incluso
recomiendan por cuestiones prácticas que dejemos de utilizarlo ya que no es
necesario al decirle que estamos hablando de una hoja de estilos (rel="stylesheet").
En (href) debemos indicar la ubicación en la que se encuentra el archivo, en
este caso yo coloque (href="css/style.css")
esto quiere decir que estoy llamando un archivo llamado “style.css” que se
encuentra en una carpeta llamada “css” del mismo directorio en el que estoy
creando mi pagina.
Adaptándonos
La siguiente línea con la que nos encontramos es totalmente para
que nuestra página se adapta a un mayor número de usuarios, si todas las
personas que visitaran tu pagina web usan un explorador distinto a Internet Explorer
no tendrás ningún problema. Pero como no es posible obligar a los demás usuarios
a utilizar un explorador especifico lo mejor es adaptar nuestro sitio web para que sea
visible en la mayoría de exploradores posibles, es ahí donde utilizamos estas líneas
<!--[if lt IE 9]>
<script
type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("hgroup");
</script>
<![endif]-->
O incluso
es posible utilizar el siguiente script disponible en google
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Esto le dice a la pagina que si es abierta con Internet Explorer 9
o superior cree los siguientes elementos, igualmente nuestra página no perdería
funcionalidad ya que incluso si utilizamos una etiqueta llamada <loquesea>
y luego en el archivo css adjunto existe referencia a esa etiqueta, funcionara
normalmente, así que no te preocupes.
Con respecto a la etiqueta <script> al igual que la etiqueta
<link> solo hace referencia a otro archivo, en este caso un script
normalmente en JavaScript, el type como dije anteriormente no es aconsejable
utilizarlo así que solo debemos decir a donde se dirige (src).
Hasta aquí sabemos cómo crear una plantilla básica para una página
web, y la explicación de los distintos elementos que encontramos en la cabecera
de cualquier página.
En la próxima parte empezaremos a estructurar una página web, si
tienes alguna duda o pregunta hazla ahora antes de entrar aun mas en materia.
0 comentarios: