Scribd
Cargar
50 vistas4 páginas

Scrip

Este documento describe los componentes básicos de un documento HTML5, incluyendo la estructura, estilo y funcionalidad. Explica cómo construir la estructura global de un documento HTML5 utilizando nuevos elementos semánticos como <!DOCTYPE html>, <html>, <head> y <body>. Además, proporciona ejemplos de código para ilustrar cómo anidar estas etiquetas para crear la plantilla base de un documento.

Cargado por

leticia
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
50 vistas4 páginas

Scrip

Este documento describe los componentes básicos de un documento HTML5, incluyendo la estructura, estilo y funcionalidad. Explica cómo construir la estructura global de un documento HTML5 utilizando nuevos elementos semánticos como <!DOCTYPE html>, <html>, <head> y <body>. Además, proporciona ejemplos de código para ilustrar cómo anidar estas etiquetas para crear la plantilla base de un documento.

Cargado por

leticia
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Capítulo 1

Documentos HTML5

1.1 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.

Hágalo usted mismo: Cree un archivo de texto vacío utilizando su editor de


textos favorito para probar cada código presentado en este capítulo. Esto lo
ayudará a recordar las nuevas etiquetas HTML y acostumbrarse a ellas.
Conceptos básicos: Un documento HTML es un archivo de texto. Si usted no
posee ningún programa para desarrollo web, puede simplemente utilizar el Bloc
de Notas de Windows o cualquier otro editor de textos. El archivo debe ser
grabado con la extensión .html y el nombre que desee (por ejemplo,
micodigo.html).

1
El gran libro de HTML5, CSS3 y Javascript

IMPORTANTE: Para acceder a información adicional y a los listados de ejemplo,


visite nuestro sitio web www.minkbooks.com.

1.2 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>.

2
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>

Listado 1-3. Usando el elemento <head>.

3
El gran libro de HTML5, CSS3 y Javascript

La etiqueta no cambió desde versiones anteriores y su propósito sigue siendo


exactamente el mismo. Dentro de las etiquetas <head> definiremos el título de nuestra
página web, declararemos el set de caracteres correspondiente, proveeremos información
general acerca del documento e incorporaremos los archivos externos con estilos, códigos
Javascript o incluso imágenes necesarias para generar la página en la pantalla.
Excepto por el título y algunos íconos, el resto de la información incorporada en el
documento entre estas etiquetas es invisible para el usuario.

<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:

<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>

</body>
</html>

Listado 1-4. Usando el elemento <body>.

Conceptos básicos: Hasta el momento tenemos un código simple pero con una
estructura compleja. Esto es porque el código HTML no está formado por un
conjunto de instrucciones secuenciales. HTML es un lenguaje de etiquetas, un
listado de elementos que usualmente se utilizan en pares y que pueden ser
anidados (totalmente contenidos uno dentro del otro). En la primera línea del
código del Listado 1-4 tenemos una etiqueta simple con la definición del tipo de
documento e inmediatamente después la etiqueta de apertura <html
lang="es">. Esta etiqueta y la de cierre </html> al final del listado están
indicando el comienzo del código HTML y su final. Entre las etiquetas <html>
insertamos otras etiquetas especificando dos importantes partes de la estructura
básica: <head> para la cabecera y <body> para el cuerpo del documento. Estas
dos etiquetas también se utilizan en pares. Más adelante en este capítulo
veremos que más etiquetas son insertadas entre estas últimas conformando una
estructura de árbol con <html> como su raíz.

También podría gustarte