Módulo 2 by Kilian Padrón

M贸dulo 2: HTML 5

Contenido Presentación.................................................................................................................................. 4 Objetivos. ...................................................................................................................................... 4 Lección 1: Componentes básicos .................................................................................................. 6 Introducción .............................................................................................................................. 6 Estructura de un documento HTML5 ........................................................................................ 6 <head> ................................................................................................................................... 6 <body> ................................................................................................................................... 6 Lección 2: Estructura global ........................................................................................................ 12 Introducción ............................................................................................................................ 12 Declaración inicial ................................................................................................................... 12 Declaración del <head> ........................................................................................................... 13 <title> .................................................................................................................................. 14 <base> ................................................................................................................................. 15 <link> ................................................................................................................................... 16 <meta> ................................................................................................................................ 18 <script> ................................................................................................................................ 19 Lección 3: Estructura del cuerpo ................................................................................................. 22 Introducción ............................................................................................................................ 22 Declaración del cuerpo (<body>) ............................................................................................ 24 <nav> ....................................................................................................................................... 28 <section> ................................................................................................................................. 30 <article>................................................................................................................................... 32 <aside> .................................................................................................................................... 33 <footer>................................................................................................................................... 34 Introducción a los estilos......................................................................................................... 37 Color .................................................................................................................................... 37 Altura y anchura .................................................................................................................. 39

Módulo 2: HTML 5

Presentación. En el capítulo anterior aprendimos los conceptos básicos de la programación de páginas web en HTML. Tal y como se explicó en el módulo anterior, el lenguaje de programación HTML ha ido evolucionando a lo largo del tiempo trayendo consigo varías versiones. Estando en la actualidad en la versión HTML 5. Recordar que en esta nueva versión no se cambia lo esencial, se mantiene la mayoría de los elementos presentes en la versión anterior lo que se añaden medios que simplifican el trabajo con nuevas herramientas de gestión y facilita la inclusión de elementos multimedia.

Objetivos. Al finalizar el módulo el alumno conocerá y sabrá identificar cada una de las partes que forman parte del lenguaje HTML en su última versión. El alumno será capaz de identificar cada una de las partes que componen el código y las mejoras respecto a versiones anteriores.

Lecci贸n 1: Componentes b谩sicos

Lección 1: Componentes básicos Introducción En éste lección veremos los componentes básicos del lenguaje de programación HTML5 y las diferencias con otras versiones. Identificaremos nuevamente las partes que componen un documento HTML y se explicarán las mejorías que ofrece la última versión de éste lenguaje respecto a las anteriores.

Estructura de un documento HTML5 Como se ha comentado en numerosas ocasiones la estructura de un documento HTML 5 es similar respecto a otras versiones de HTML. En ésta última versión se mejora la forma de declarar cada uno de los componentes que conforman el documento. Recordemos de las partes que consta un documento HTML en cualquier versión. Un documento HTML está formado principalmente de dos partes: <head> y <body>.

<head> El <head> contiene información sobre el propio documento. La mayor parte de directivas y etiquetas que se incluyen en ésta área se utilizan para almacenar datos que ayuden a interpretar el contenido del <body>. Esta parte del documento no es visible para los usuarios que visitan nuestra web. Recalcar que el contenido que se incluya en este apartado sólo ayuda a la interpretación del contenido del <body> y a aportar información de la página.

<body> En cambio el <body> incluirá todo el contenido de la web que será visible para el usuario que visite el sitio web. El <body> se divide a su vez en 4 subsecciones más: Cabecera (header), barra de navegación (nav), contenido y pie de página (footer). Veamos cada elemento en un ejemplo de página web.

Elemento

Ejemplo

Cabecera

Barra de navegación

Contenido

Pie de página

En versiones anteriores de HTML se definían cada una de las subsecciones a través de la etiqueta o directiva <div>. En HTML 5 se crean unas nuevas etiquetas para identificar cada una de las partes descritas. Con esto se consigue una metodología de trabajo única para todos los desarrolladores y programadores web. Siendo más fácil identificar cada uno de los elementos que componen una web y siendo más sencillo para los buscadores encontrar los contenidos relevantes.

Subsección

Etiqueta

Cabecera

Barra de navegación

<nav>

Ejemplo

<section> Contenido

Pié de página

Siendo la distribución de la estructura similar al de la figura siguiente.

Como pueden observar, declarar cada una de las partes que forman una web en HTML 5 es muy sencillo. En capítulos posteriores veremos entraremos en profundidad en cada uno de los elementos descritos.

Además de las mejoras indicadas, la última versión de HTML incluye otras mejoras respecto a versiones anteriores: 

Inserción de elementos multimedia. Se añaden nuevas etiquetas para insertar audio y video. Además se añaden etiquetas específicas para trabajar con gráficos y animaciones.



Nuevas funcionalidades para arrastrar objetos (Drag and Drop).



Geolocalización.



Mejora de los formularios.



Nuevas APIS.

Lecci贸n 2: Estructura global

Lección 2: Estructura global Introducción En esta lección veremos en mayor profundad la estructura global de un documento en HTML 5. Cuando hablamos de estructura global nos referimos en concreto a la forma de declarar un documento y al contenido que se incluye en el componente <head> .

Declaración inicial Para empezar a crear un documento en HTML 5 necesitamos declararlo como tal para que los navegadores sepan en qué versión estamos trabajando y sepa interpretar el contenido de la web. HTML 5 simplifica enormemente aspectos innecesariamente complejos de las versiones anteriores. Siendo la estructura mínima de un documento HTML 5 para poder ser interpretado la siguiente.

La primera línea <!DOCTYPE html> es la declaración del tipo de documento que comienza, siempre debe ser la primera y sin espacios o líneas que la precedan. Esta etiqueta se emplea para informar al navegador de la versión de HTML que debe interpretar. La etiqueta <html> es la raíz de la estructura y englobará todo el documento. En el interior de ésta etiqueta se encontrará todo el contenido de la web: <head> y <body>. El atributo lang es el único que se necesita especificar e indica el idioma que se va a utilizar en nuestro documento. En éste caso se ha utilizado el atributo “es”, indicando que la web estará en el idioma español. Evidentemente se puede crear la web en

cualquier idioma. En la siguiente tabla se muestran los atributos de lenguaje para los idiomas más importantes. Idioma

Atributo Inglés

Alemán

Francés

Portugués

Chino

Declaración del <head> La cabecera de un documento HTML contiene información sobre el propio documento. La mayor parte de las directivas o elementos que se incluyen en esta área se utilizan para almacenar datos que ayuden a interpretar y mantener el contenido del documento. Para declarar el <head> debemos incluirlo dentro del documento. En concreto en el interior de la etiqueta <html>

Las directivas que se pueden emplear dentro del <head> son: 

<title>



<base>



<link>



<meta>



Veamos cada una con mayor profundidad.

<title> Es una directiva obligatoria de un documento HTML 5. Su función es definir el título del documento, de forma que pueda utilizarse como referencia en múltiples entornos, como los buscadores por ejemplo. Se trata de un contenedor que delimita un bloque de texto como título. El texto incluido dentro de la directiva <title> es colocado por los navegadores como el título de la ventana empleada para visualizar el contenido del documento.

HTML 5 no establece límites de longitud de un título aunque conviene ser razonable y no utilizar textos demasiado largos ni excesivamente descriptivos. Destacar que el título es un elemento auxiliar, lo realmente importante es el contenido, pero será con el título como se identifique nuestro documento en otras instancias, por ejemplo los buscadores. Sintaxis <title>Título del documento</tile> Veamos como introducir el título dentro del documento. Recordar nuevamente que debe estar dentro de la etiqueta <head>

<base> Se emplea para especificar un directorio base para las referencias (direcciones URL) relativas al documento. Cuando un navegador lee un documento toma su dirección URL (servidor y directorio) como la base sobre la que se compondrán las direcciones de los elementos referenciados en él. Ésta directiva dispone de un segundo atributo: href o target. Éste atributo indicará el destino. Si se omite se abrirá en la misma ventana. Atributo

Valores

Descripción

href

URL

Especifica la URL base para todas las URLs relativas en la página

target

_blank _parent

Especifica el destino predeterminado para todos los hipervínculos.

_self _top

Por último, hay que señalar que la directiva <base> solo afecta al documento en el que aparece y debe situarse siempre antes que cualquier otra referencia dentro del <head>. Sintaxis <base href=”URL” target=”destino”>

Veamos como un ejemplo cómo se declara esta directiva.

En este caso, independientemente de dónde esté alojada nuestra página se tomará como referencia la URL indicada en la etiqueta <base> (http://www.estudiaencasa.es) para montar el resto de los enlaces relativos mostrados más abajo. Además, únicamente indicando el target en la etiqueta base de nuestra página definiremos el comportamiento de navegación de todos los enlaces que creemos (en este caso se abrirán en una nueva ventana).

Valores alternate archives author bookmark external first help icon last license next nofollow noreferrer pingback

Descripción Define la relación establecida entre el elemento apuntado por el enlace y el documento actual. La más utilizada es ‘stylesheet’, que permite asociar una hoja de estilo a un documento HTML. Una hoja de estilo es un documento donde irá toda la información de los estilos que se utilizarán en el documento HTML. En próximos capítulos entraremos en profundidad en éste concepto.

prefetch prev search sidebar stylesheet tag up href

URL

Se emplea para identificar el documento objeto de la relación.

title

Permite especificar el nombre de la relación.

type

Indica el tipo de documento al que apunta el enlace. Se usa casi exclusivamente en combinación con ‘rel=stylesheet’, para indicar el tipo de lenguaje de hojas de estilo utilizado.

media

Indica el dispositivo más apropiado para presentar al usuario la información apuntada por el enlace.

Destacar nuevamente que esta directiva se emplea en la mayor parte de ocasiones para enlazar documentos HTML con hojas de estilos. Veámoslo con un ejemplo: Supongamos que deseamos enlazar el documento que estamos trabajando con una hoja de estilos llamada “estilos.css”.

Pueden observar cómo se establece una relación entre el documento HTML con una hoja de estilos gracias al atributo ref. Con el atributo type indicamos el tipo de documento con el que enlazará. Finalmente con href especificamos el documento con el que deseamos hacer la relación. Como se comentó anteriormente, entraremos más en detalle en éste apartado cuando profundicemos en las hojas de estilos.

Valores

Descripción

name

application-name

Especifica el nombre de la información

author

de los metadatos.

description generator keywords content

texto

charset

Texto descriptivo. Especifica la codificación de caracteres para el documento HTML

Esta directiva se emplea mucho para: -

Introducir palabras claves que ayuden a los buscadores a encontrar nuestra web.

Introducir información descriptiva de la web.

Introducir el autor, compañía, empresa…

En este caso se pueden añadir tantos <meta> como se desee. Sintaxis <meta name=”posibles_valores_name” content=”texto”>

Uno para introducir palabras clave relacionadas con el contenido de nuestra web.

Uno para añadir una pequeña descripción del sitio.

Uno para especificar el autor.

Uno para especificar la codificación de los caracteres de texto. Para que caracteres como la “ñ” o palabras con tildes sean legibles.

Lecci贸n 3: Estructura del cuerpo

Lección 3: Estructura del cuerpo Introducción En esta lección veremos en mayor profundad la estructura del cuerpo de un documento en HTML 5. Cuando hablamos de estructura del cuerpo nos referimos en concreto a la forma de declarar el contenido visible para los usuarios de un documento HTML, es decir al contenido que se incluye en el componente <body>. Para continuar con ésta lección partiremos del código implementando en el capítulo anterior donde ya habíamos insertado las etiquetas necesarias para declarar el <head> de un documento HTML. Recordando el código quedaba de la siguiente manera.

En éste caso vamos a quitar la etiqueta <base>. En base a éste código seguiremos trabajando para ejemplificar cada uno de los casos que vayamos viendo en los sucesivos puntos de la lección. Para continuar trabajando es recomendable también crear una carpeta donde ir almacenando los documentos en los que vayamos trabajando. Dicha carpeta la pueden crear en la ubicación que deseen, recomendablemente en el escritorio (ya que accederemos a ella continuamente). Llamar a dicha carpeta “Curso programación HTML” y dentro una subcarpeta llamada “Imagenes” (respetar mayúsculas y minúsculas. También los errores ortográficos). Dentro de la carpeta “Curso programación HTML” almacenaremos el ejemplo con el que vayamos trabajando en ésta lección y en la subcarpeta “Imagenes” se almacenarán algunas imágenes con las que iremos trabajando.

Explicado esto entremos en la materia correspondiente a éste capítulo. Como ya sabemos el <body> es el cuerpo de un documento HTML y en él encontrará toda la información que queremos mostrar a los usuarios que visiten nuestra web: textos, imágenes, artículos, videos, tablas, hipervínculos… El <body> en sí está compuesto a su vez de subsecciones que sirven para delimitar y definir cada una de las partes del documento. Cada una de ésta subsecciones se declaran con una etiqueta. Recordemos las etiquetas empleadas para definir cada una de las secciones: -

<nav>

<aside>

En los sucesivos puntos que componen éste capítulo veremos cómo utilizar cada uno de ellos. Pero en primer lugar deberemos definir el <body> del documento ya que ésta subsecciones irán dentro de él.

Declaración del cuerpo (<body>) Como se ha explicado en varias ocasiones, el <body> contendrá toda la información de nuestra web que queremos que sea visible para el usuario. Éste elemento se debe declarar dentro del documento HTML en el interior de la etiqueta <html> y justo después del <head>. Sintaxis <body>Contenido de la web</body> En la siguiente imagen podemos ver el resultado del código.

Declarado el cuerpo del documento veamos como declarar cada una de las secciones que puede contener. <header> Se trata de la cabecera de un documento, un lugar que suele incluir el título, subtítulo o encabezado de un documento o sección. Dentro de un mismo documento HTML puede existir varios elementos <header>. Sintaxis <header>Contenido de la cabecera</header> Incluyamos este elemento en nuestro documento. Para ello no solo incluiremos dicho elemento, sino que dentro de él incluiremos un título, un subtítulo y una imagen.

Para ello descargar en primer lugar el archivo “Imágenes.rar” que se encuentra en el apartado “Recursos” del módulo 2 en la plataforma del curso. Las imágenes incluirlas dentro de la subcarpeta “Imagenes” que creamos al principio de la lección.

Continuemos con la explicación. Vamos a incluir el elemento <header> dentro del <body> del documento respetando la sintaxis.

Declarada la cabecera del documento vamos a añadir el título y el subtítulo del documento para que sea visible para los usuarios. Para introducir títulos en HTML se emplean las etiquetas de la <h1> a la <h6>. Siendo la etiqueta <h1> el título más importante y la etiqueta <h6> el de menor importancia.

Sintaxis de los títulos <h1>Título 1</h1> <h2>Título 2</h2> <h3>Título 3</h3> Explicada la sintaxis vamos a introducir el título y subtítulo en la cabecera.

Si guardamos el documento con su formato correspondiente “.html” y lo abrimos con el navegador web podemos ver el resultado obtenido.

Insertemos ahora una imagen en la cabecera. En concreto la llamada “cabecera” (recordar que la tenían que haber descargado de la plataforma del apartado “Recursos” y colocarlas en la carpeta “Imagenes” dentro de la carpeta “Programación HTML5”.

Para insertar la imagen utilizaremos la etiqueta explicada ya en lección anterior <img>.

Como pueden observar a través del atributo ‘src’ indicamos la ruta donde se encuentra la imagen. La ruta de la ubicación de la imagen hay que definirla partiendo de la base de la ubicación donde se encuentra el documento HTML. Teniendo en cuenta que el documento se encuentra dentro de la carpeta “Curso Programación HTML5”, tan solo deberemos definir el acceso a la carpeta “Imagenes” e indicar el nombre de la imagen junto a su formato. Con el atributo ‘alt’ indicamos una pequeña descripción de la imagen. Es recomendable incluir dicho parámetro siempre que se inserte una imagen con un texto descriptivo de la imagen. Guardado el documento el aspecto de la cabecera si abrimos el documento con el navegador será el siguiente.

<nav> Se trata de un área dentro de la página que contiene información de navegación. La etiqueta <nav> define un conjunto de vínculos de navegación. No todos los enlaces de un documento debe estar en un elemento <nav>. El elemento <nav> es sólo para grandes bloques de vínculos de navegación. Sintaxis <nav>Elementos de navegación</nav> Vamos a introducir elementos de navegación a nuestro ejemplo. Para ello en primer lugar definimos la barra de navegación con la etiqueta correspondiente.

Creada la barra de navegación vamos a añadir 4 elementos de navegación que serán nada más que 4 enlaces: -

Uno llamado “Inicio” (enviará al inicio de la web).

Uno llamado “Lección 1” (enviará a la primera lección del curso).

Uno llamado “Lección 2” (enviará a la segunda lección del curso).

Uno llamado “Lección 3” (enviará a la tercera lección del curso).

Introduzcamos los enlaces dentro de la barra de navegación.

Pueden observar que en el atributo ‘href’ no se ha especificado la URL, tan solo se ha puesto una cadena de texto. Cuando se sepa la ruta donde se encontrarán esas páginas se colocará dicha ruta en éstos atributos. Si guardamos el documento y lo abrimos con el navegador web el resultado debe ser el siguiente.

<section> La etiqueta <section> define las secciones de un documento. Tal como capítulos, encabezados, pies de página o cualquier otra sección del documento. Con dicha etiqueta introduciremos el contenido que deseamos para la web. Es muy corriente introducir dentro de ésta sección otras secciones como <header>, <nav>, <article> o <footer>.

Sintaxis <section>Contenido de la sección</section> Vamos a introducir una pequeña sección en nuestro código donde introduciremos un titular a modo de resumen del contenido. Además añadiremos un texto descriptivo del curso.

Fíjense como en éste caso empleamos el titular <h3>. Guardado el documento el aspecto a la hora de abrirlo en el navegador será el siguiente.

Pueden observar que a medida que vamos aumentando en las etiquetas <h1>,<h2>,<h3>… disminuye el énfasis sobre el titular.

<article> Es la forma de delimitar un artículo, el contenido principal frente al resto de elementos accesorios de la página. Un artículo debe tener sentido por sí mismo y que debería ser posible distribuir de forma independiente del resto del sitio. Sintaxis <article>Contenido del artículo</article> Definamos un pequeño artículo dentro de la etiqueta <section>. Recordemos que anteriormente explicamos que dentro de una etiqueta <section> podían introducirse otras subecciones.

Dentro de éste artículo añadiremos un titular y un pequeño texto que describirá el contenido del curso. Veamos cómo queda el código. En éste caso solo será visible el interior de la etiqueta <article>. Pero recordar que dicha etiqueta se encuentra dentro de <section>

El resultado ser谩 el siguiente.

<aside> Es cualquier elemento adicional, al margen del flujo principal del texto. En nuestro caso por ejemplo puede ser contenido relacionado con la web que estamos trabajando pero que no tienen una relaci贸n directa con el tema que estamos tratando. En nuestro caso por ejemplo puede ser enlaces a otros portales de educaci贸n o enlaces a otros cursos. Sintaxis <aside>Contenido</aside> Vamos a insertar esta secci贸n dentro de nuestro ejemplo. Supongamos que vamos a insertar enlaces a otros cursos similares al curso que estamos tratando.

La etiqueta <aside> la vamos a insertar justo debajo de la etiqueta de cierre </section>.

Siendo el resultado visible el siguiente.

<footer> Es el pie del documento, un área donde se coloca un tipo de información (autores, referencias, enlaces…) que requiere un formato diferenciado. Sintaxis <footer>Contenido del pie</footer> Al ser el pie de página lo colocaremos justo antes de la etiqueta de cierre </body>

Dentro de él introduciremos algunos enlaces: uno que envíe a un apartado de contacto por si los usuarios quieren dejar alguna sugerencia, un enlace que envíe al aviso legal, y un pequeño texto con la dirección.

Con la etiqueta </br> conseguimos un salto a la siguiente línea. El aspecto final será el siguiente.

El código finalmente deberá quedar de la siguiente manera.

Teniendo la estructura similar a la que se muestra en la siguiente figura.

Si observamos la vista principal de la web en el navegador web nos sería bastante difícil identificar cada una de las partes de la web. Aplicando estilos a cada una de las capas que hemos creado es posible diferenciar mejor cada una de las secciones del contenido de la web.

Introducción a los estilos En los puntos anteriores que componen éste capítulo hemos creado las distintas secciones que componen un documento HTML en su última versión. En éste apartado definiremos pequeños estilos para poder diferenciar cada una de las secciones del documento.

Color Para añadir estilos a cada una de las secciones emplearemos el atributo ‘style’ en cada una de las etiquetas que componen el documento HTML. En concreto emplearemos al atributo ‘background-color’ para definir el color de fondo de cada una de las secciones y poder diferenciarla mejor. Sintaxis <nombre_sección style=”background-color: parámetro_color”> Parámetro_color puede ser el nombre del color en inglés o bien el valor del web. En los buscadores web pueden encontrar paletas de colores web con sus valores correspondientes. <header>

Empecemos aplicando un color rojo a la sección <header>. Resultando el código de la siguiente forma.

<nav>

Continuemos aplicando color verde a dicha sección.

A 茅sta secci贸n le aplicaremos un color de fondo azul.

Aplicaremos un color de fondo amarillo a dicha secci贸n.

<aside>

Aplicamos el color rosa.

Para finalizar aplicamos un color con valores a partir de una paleta de colores web. En concreto aplicaremos el color cuya referencia es #3CC.

Teniendo como resultado final de la web la siguiente apariencia.

Altura y anchura Además a través del atributo style también podemos modificar el alto y ancho de cada uno de los elementos que componen el documento. Añadiendo los atributos ‘width’ y ‘height’ podemos variar el tamaño de cada uno de los elementos. Sintaxis <nombre_sección

style=”background-color:

parámetro_color;

width=valorpx;

height=valorpx”> Fíjense como cada elemento que se incluye dentro del atributo ‘style’ se separa por punto y como “;”.

En el caso que nos abarca, para definir el ancho utilizaremos la característica ‘width’ y para definir el alto la característica ‘height’. En valorpx se debe añadir el valor en píxeles acabado de las siglas px. Añadamos éstos parámetros a cada uno de los elementos del código. <header>

<nav>

<aside>

Como pueden observar logramos identificar cada una de las partes que componen el documento pero ni mucho menos se asemeja al resultado final de una web mĂnimamente profesional.

En la figura siguiente se muestra la distribución de los contenidos en el documento que hemos creado y la distribución que debería tener quizás para que sea más atractiva para los usuarios. Distribución actual

Distribución deseada

Además de la distribución de la información del documento, también puede ser que la fuente elegida para el texto no sea la adecuada, que el aspecto de los enlaces no sea el

adecuado, la colocación de las imágenes… En conclusión, el diseño en sí de todo el documento se podría mejorar bastante. Una primera solución podría ser aplicar estilos a través del atributo ‘style’ de cada una de las secciones que componen el documento. Pero hay que tener en cuenta una cosa: un sitio web está formado por varias o muchas páginas webs. Cada página se construye a partir de un documento HTML como hemos creado en éste módulo. ¿se imaginan tener que ir definiendo en cada una de las secciones que componen todos los documentos HTML los estilos? Sería un trabajo bastante laborioso y tedioso. Es por ello que existe una solución mucho más sencilla que hemos nombrado en ciertas ocasiones: las hojas de estilo CSS. En las hojas de estilos definiremos las características de cada uno de los elementos que aparecerán en la web. Así a medida que vayamos creando documentos HTML para nuestro sitio web, para aplicar los estilos solo debemos aplicar la relación que vimos en éste módulo en el apartado <head> sin necesidad de tener que aplicar estilos a cada uno de los elementos que aparecen en la web. Todo esto lo veremos con mayor detenimiento en el siguiente capítulo.