sábado, 21 de noviembre de 2015

HTML5 - Estructura Global (Capitulo 01)






Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

<!DOCTYPE>

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:

<html>

Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo
árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al resto del código:
< !DOCTYPE html>
<html lang=”es”>
</html>
El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso es por español.

<head>

El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre: 
< !DOCTYPE html>
<html lang=”es”>
 <head>
 </head>
</html>

<body>

La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas <body>. Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML:</body> 
< !DOCTYPE html>
<html lang=”es”>
 <head>

 </head>

 <body>

 </body>

</html>

<meta>

Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla: 
< !DOCTYPE html>
<html lang=”es”>
 <head>
  &ltmeta charset=”iso-8859-1”>
 </head>

 <body>
 </body>
</html>

<title>

La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay nada nuevo para comentar:
< !DOCTYPE html>
<html lang=”es”>
 <head>
  &ltmeta charset=”iso-8859-1”>
  <title>Tutorial 01</title>
 </head>

 <body>
 </body>
</html>

<link>

Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS:
< !DOCTYPE html>
<html lang="es”>
 <head>
  <meta charset="iso-8859-1”>
  <title>Tutorial 01</title>
  <link rel=”stylesheet” href="misestilos.css”>

 </head>

 <body>
 </body>
</html>