Componentes Basicos del HTML5

Componentes Basicos del HTML5

Master experto desarrollo web

Componentes Básicos

 

HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca

fue declarado oficialmente pero, incluso cuando algunas APIs (Interface de Programación

de Aplicaciones) y la especificación de CSS3 por completo no son parte del mismo, HTML5

es considerado el producto de la combinación de HTML, CSS y Javascript. Estas tecnologías

son altamente dependientes y actúan como una sola unidad organizada bajo la

especificación de HTML5. HTML está a cargo de la estructura, CSS presenta esa estructura

y su contenido en la pantalla y Javascript hace el resto que (como veremos más adelante)

es extremadamente significativo.

Más allá de esta integración, la estructura sigue siendo parte esencial de un

documento. La misma provee los elementos necesarios para ubicar contenido estático o

dinámico, y es también una plataforma básica para aplicaciones. Con la variedad de

dispositivos para acceder a Internet y la diversidad de interfaces disponibles para

interactuar con la web, un aspecto básico como la estructura se vuelve parte vital del

documento. Ahora la estructura debe proveer forma, organización y flexibilidad, y debe

ser tan fuerte como los fundamentos de un edificio.

Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber primero

cómo esa estructura es construida. Crear fundamentos fuertes nos ayudará más adelante

a aplicar el resto de los componentes para aprovechar completamente estas nuevas

tecnologías.

Por lo tanto, empecemos por lo básico, paso a paso. En este primer capítulo aprenderá

cómo construir una plantilla para futuros proyectos usando los nuevos elementos HTML

introducidos en HTML5.

 

Estructura global

 

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>

 

Listado 1-1. Usando el elemento <doctype>.

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>

Listado 1-2. Usando el elemento <html>.

 

Documentos HTML5

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.

Conceptos básicos: HTML usa un lenguaje de etiquetas para construir páginas

web. Estas etiquetas HTML son palabras clave y atributos rodeados de los signos

mayor y menor (por ejemplo, <html lang=»es»>). En este caso, html es la

palabra clave y lang es el atributo con el valor es. La mayoría de las etiquetas

HTML se utilizan en pares, una etiqueta de apertura y una de cierre, y el

contenido se declara entre ellas. En nuestro ejemplo, <html lang=»es»> indica

el comienzo del código HTML y </html> indica el final. Compare las etiquetas de

apertura y cierre y verá que la de cierre se distingue por una barra invertida antes

de la palabra clave (por ejemplo, </html>). El resto de nuestro código será

insertado entre estas dos etiquetas: <html> …  </html>.

IMPORTANTE: HTML5 es extremadamente flexible en cuanto a la estructura y a

los elementos utilizados para construirla. El elemento <html> puede ser incluido

sin ningún atributo o incluso ignorado completamente. Con el propósito de

preservar compatibilidad (y por algunas razones extras que no vale la pena

mencionar aquí) le recomendamos que siga algunas reglas básicas. En este libro

vamos a enseñarle cómo construir documentos HTML de acuerdo a lo que

nosotros consideramos prácticas recomendadas.

Para encontrar otros lenguajes para el atributo lang puede visitar el siguiente enlace:

www.w3schools.com/tags/ref_language_codes.asp.

<head>

Continuemos construyendo nuestra plantilla. El código HTML insertado entre las etiquetas

<html> tiene que ser dividido entre dos secciones principales. Al igual que en versiones

previas de HTML, la primera sección es la cabecera y la segunda el cuerpo. El siguiente

paso, por lo tanto, será crear estas dos secciones en el código usando los elementos

<head> y <body> ya conocidos.

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>

 

Vea nuestro máster en Experto Web

Luis Bonilla

    Comentarios cerrados.
    Hola, en qué podemos ayudarte?
    Powered by