Bueno como todos saben, HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una era que combina dispositivos móviles, computación en la nube y trabajos en red.
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:
<!DOCTYPE html>
IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario.
Hágalo usted mismo: Puede comenzar a copiar el código en su archivo de texto y
agregar los próximos a medida que los vamos estudiando.
<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.
Bueno como ven todo sencillo pero una cosa más, hay cosas nuevas y otras que no tanto mejor veamos otro ejemplo con más código ya que si lo hacemos pasito milimétrico nunca acabaríamos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name=”description” content=”Ejemplo de HTML5”>
<meta name=”keywords” content=”HTML5, CSS3, Javascript”>
</head>
<body>
</body>
</html>
Como ven la estructura es bastante familiar no? bueno también las etiquetas <meta> tienen su significado y meramente es lo esencial en un html-
La innovación de este elemento en HTML5, como en la mayoría de los casos, es solo simplificación. La nueva etiqueta <meta> para la definición del tipo de caracteres es más corta y simple. Por supuesto, podemos cambiar el tipo iso-8859-1 por el necesario para nuestros documentos y agregar otras etiquetas <meta> como description o keywords para definir otros aspectos de la página web
En HTML5 no es necesario cerrar etiquetas simples con una barra al final, pero recomendamos utilizarlas por razones de compatibilidad. El anterior código se podría escribir de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<meta name="description" content="Ejemplo de HTML5" />
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
</head>
<body>
</body>
</html>
<title>
La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no
hay nada nuevo para comentar.
<title> MI TITULO </title>
<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.
<link rel=”stylesheet” href=”misestilos.css”>
En HTML5 ya no se necesita especificar qué tipo de estilos estamos insertando, por lo que el atributo type fue eliminado. Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href. El atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href.
Con esta última inserción podemos considerar finalizado nuestro trabajo en la cabecera. Ahora es tiempo de trabajar en el cuerpo, donde la magia ocurre.
Próxima entrada, el cuerpo de un documento HTML5.
Saludos by x0d3ck ----- Javier García----- TESE.
No hay comentarios:
Publicar un comentario