Programación en HTML 5

16
TEMA 9. PROGRAMACIÓN
EN HTML 5.
José M. Castillo Castillo

PROGRAMACION EN HTML 5
1
INDICE DE CONTENIDO TEMA 9. PROGRAMACIÓN EN HTML 5.
1. INTRODUCCIÓN AL LENGUAJE HTML5
1.1 Historia e introducción al lenguaje de programación web html5
1.2 Lenguaje de etiquetas
1.3 Estructura y definición de documento html
1.4 Definición del tipo de documento
1.5 Etiqueta doctype
2. ENCABEZADO DEL DOCUMENTO
2.1 Etiqueta html
2.2 Encabezado del documento
2.3 Etiqueta base
2.4 Etiqueta link
2.5 Etiqueta script
2.6 Etiqueta noscript
3. CUERPO DEL DOCUMENTO
3.1 Etiqueta body
3.2 Enlaces internos en el documento
3.3 Enlaces a documentos web externos relativos y absolutos
3.4 Enlaces a correo electrónico, ftp
3.5 Etiqueta b, em y strong
3.6 Etiqueta code, samp y kbd
3.7 Etiqueta var, mark y cite
3.8 Etiqueta i, s, u y small
3.9 Etiqueta sub, sup, br y wbr
3.10 Etiqueta ins, del y abbr
3.11 Etiqueta address, bdo y dfn
3.12 Etiqueta pre, q y blockquote
3.13 Etiqueta bdi, rubi, rt, rp y dialog
4. ATRIBUTOS EN HTML5
4.1 Atributos globales - accesskey, class y contenteditable
4.2 Atributos globales - data, dir y draggable
4.3 Atributos globales - hidden, id y lang
4.4 Atributos globales - spellcheck, style y tabindex
4.5 Atributos globales - title y h1-h6
4.6 Etiqueta img
4.7 Etiqueta table
4.8 Definición de una tabla sencilla
4.9 Definición de una tabla con combinación de columnas
4.10 Definición de una tabla con combinación de filas
4.11 Definición de tabla con columnas y filas combinadas
4.12 Definición de tablas avanzadas

2
5. ESTRUCTURAS BÁSICAS
5.1 Etiqueta ul
5.2 Etiqueta ol
5.3 Etiqueta dl
5.4 Web semántica - etiqueta div, span y header
5.5 Web semántica - etiqueta nav
5.6 Web semántica - etiqueta section y article
5.7 Web semántica - etiqueta aside y figure
5.8 Web semántica - etiqueta footer, time y details
6. AUDIO Y VIDEO
6.1 Etiqueta audio
6.2 Etiqueta video
6.3 Etiqueta track
6.4 Etiqueta embed
6.5 Etiqueta object
7. FORMULARIOS EN HTML
7.1 Etiqueta form
7.2 Etiqueta input
7.3 Atributos - form, formaction y formenctype
7.4 Atributos - formmethod, formnovalidate y formtarget
7.5 Atributos - height, width y name
7.6 Atributos - readonly, required y placeholder
7.7 Atributos - value, size y maxlength
7.8 Atributos - src, max, min, step y multiple
7.9 Atributos - list y pattern
7.10 Atributos - type
7.11 Tipo checkbox, color y date
7.12 Tipo datetime y datetime-local, email y file
7.13 Tipo hidden, image y month y week
7.14 Tipo number, password, radio y reset
7.15 Tipo range y search
7.16 Tipo text, time y url
7.17 Etiqueta button, fieldset y label
7.18 Etiqueta keygen, meter y progress
7.19 Etiqueta output y select
7.20 Etiqueta textarea
8. MARCOS CONTENEDORES
8.1 Etiqueta iframe
9. ESTILOS CSS Y MODELOS DE CAJA
9.1 Elementos block
9.2 Estilos en línea
9.3 Archivos externos
9.4 Referencias
9.5 Aplicando css a una plantilla

3
1. INTRODUCCIÓN AL LENGUAJE HTML 5
1.1. Historia e introducción al lenguaje de programación web HTML 5
Por el año 1989, un físico nuclear Tim Berners-Lee del CERN (Centro europeo para la investigación
nuclear) da la noticia de que está trabajando en un sistema que permite acceder a archivos en línea
sobre el protocolo de comunicaciones TCP/IP. En este año existían dos métodos para enlazar
documentos electrónicos entre sí.
NOTA: Por una parte los enlaces o hipervínculos y por otra parte un lenguaje denominado SGML
(Standard Generalize Markup Language (Lenguaje de marcación generalizado); consiste en un
sistema para la organización y etiquetado de documentos.
La ISO normalizo el lenguaje en el año 1986. Sirve para especificar las reglas de etiquetado y no
impone ningún conjunto de etiquetas especial.) , teniendo en cuenta estos métodos Tim Berners-Lee
a principios de 1990 define el lenguaje HTML (HypertextMarkup Language “Lenguaje de marcas
hipertextuales”) como un subconjunto de SGML y crea algo más el World Wide Web (También
conocido como la Web, es un sistema de documentos de hipertexto y/o hipermedias enlazados entre
si y accesibles desde Internet.). En 1991 crea el primer navegador de HTML que funcionaría en modo
texto y para el sistema UNIX.
El sucesor de HTML es HTML+, comenzando su desarrollo en 1993. Y siendo su diseñador David
Ragget, que formalizo un conjunto de extensiones de HTML previas a la especificación formal de
HTML y como una recopilación, replanteamiento, unificación y mejora de los diferentes dialectos de
HTML usados por la primera implementación del mismo. Este sucesor aporta características nuevas
al lenguaje tales como la utilización de imágenes, tablas, formularios y listas anidadas.
El primer borrador oficial fue el HTML 3.0 y ya fue propuesto por el recién formado W3C (World
Wide Web Consortium. Es un consorcio internacional que produce estándares para la WWW. Está
dirigido por Tim Berners-Lee.) En 1995. Y en él se introducen nuevas características como la facilidad
de la creación de tablas, la fluidez del texto alrededor de las figuras mostradas y la posibilidad de
mostrar elementos matemáticos complejos. Aunque compatible con HTML 2.0, era demasiado
complejo para ser implementado por la tecnología del momento y cuando expiro el borrador en
septiembre de 1995 se abandonó, ya que no recibió el apoyo de los programadores de navegadores
web.

4
La siguiente especificación, el HTML 3.1 nunca llegó a ser propuesto oficialmente, y su lugar fue
ocupada por la siguiente especificación HTML 3.2, que desecho varias de las nuevas características
utilizadas en la especificación 3.0 para adoptar muchos de los desarrollo realizados por los
navegadores web NetScape y Mosaic.
La opción de trabajar con fórmulas matemáticas fue desechada y paso a integrar un estándar distinto
denominado MathML.
La especificación HTML 4.0 fue presentada en junio de 1998 y también adoptó muchos de los
elementos específicos desarrollados inicialmente para un “navegador web” concreto, pero al mismo
tiempo comenzó a limpiar el lenguaje HTML señalando varios de sus elementos como
“desaprobados”.
Hasta hace relativamente poco tiempo se utilizaba y utiliza la versión 4.01, la cual ha sido
reemplazada por la nueva versión denominada HTML 5.
HTML 5 desarrollada a partir del año 2007 por el grupo The Web Standards Project (Proyecto de
estándares Web), el nuevo estándar era muy ambicioso ya que pretendía crear un nuevo lenguaje
HTML capaz de ejecutar aplicaciones completas, de hecho existían muchas entidades importantes
que eran escépticas ante el desarrollo del lenguaje y su salida a la luz.
Pero ocurrió un hecho importante y es que los navegadores empezaron a incorporar la utilización de
las etiquetas de HTML 5, esto unido a que el consorcio W3C decidió abandonar la especificación de
XHTML 2.0 e indicó que se centraría en el desarrollo de HTML 5, dieron el empujón definitivo al
nuevo estándar. Actualmente casi todos los navegadores soportan la mayoría de etiquetas HTML 5, y
se ha de tener en cuenta que va a ser el nuevo estándar para la creación de sitios web.
1.2. Lenguaje de etiquetas
Uno de los primeros problemas que se plantearon en informática era como traspasar o enviar
información entre equipos. Para solventar esta situación se decidió codificar la información para su
envió, ya que la mayoría de información que se manejaba era texto.
La codificación se aplica a un conjunto de caracteres de forma que cada carácter del conjunto tenga
una asociación numérica.
A estos conjuntos de caracteres se les denomina tablas, una de las tablas o conjuntos más conocidos
y utilizados es el código ASCII, que relaciona cada carácter del conjunto con una combinación
numérica en código binario, este código contempla caracteres alfabéticos, numéricos, de puntuación,
etc.

5
Una vez solucionado el paso de información se planteó la posibilidad de enviar junto a la información
el formato correspondiente a la misma, como atributos del texto, color, tamaño, alineación, etc.
Una de las soluciones propuestas fue la de crear una serie de marcas que insertadas en la
información a enviar establecieran dicho formato. A estas marcas se les llama Etiquetas y al conjunto
de las mismas que determinan el formato se le conoce como un lenguaje de marcado o lenguaje de
marcas.
El siguiente ejemplo pretende mostrar una demostración de un lenguaje de marcado o lenguaje de
marcas. Suponga que se desea enviar la siguiente información, destacando algunas de sus palabras:
Hola Mundo ¡Buenos días!
Su codificación utilizando etiquetas podría ser la siguiente:
<texto>Hola <negrita>Mundo</negrita>¡Buenos días!</texto>
Como se puede observar al incluir las etiquetas se puede establecer con bastante claridad que es lo
que se desea resaltar.
Tanto HTML como XHTML son lenguajes de marcado o marcas como su nombre indica, y como es
obvia la nueva versión del lenguaje HTML 5, también es un lenguaje que utiliza etiquetas.
Lógicamente cada uno de los lenguajes de marcado tienen sus propias etiquetas, aparte de estos dos
lenguajes citados anteriormente, existen muchos otros lenguajes como XML, MathML, DocBook, etc.
Normalmente los lenguajes de etiquetas suelen tener etiquetas de inicio y cierre para los diferentes
formatos que se quieren aplicar. De esta forma se indica cuando tiene que empezar y finalizar el
formato. En el caso de HTML y XHTML el formato de sus etiquetas para expresar el principio y final
de un formato es el siguiente:
Etiqueta de apertura o inicio del formato:
<Etiqueta>
La etiqueta anterior está compuesta por el símbolo “<” seguidamente y sin espacios en blanco el
nombre de la etiqueta y a continuación el símbolo “>“.
Etiqueta de cierre o final del formato:
</Etiqueta>
La etiqueta de cierre está compuesta por el símbolo “<” seguidamente y sin espacios en blanco, el
símbolo “/“, el nombre de la etiqueta y por último el símbolo “>“
A continuación tiene una serie de ejemplos que se podrían aplicar en un documento html para
especificar párrafos, ejemplo:
<Etiqueta>
</Etiqueta>
<p>Esta etiqueta es para indicar que este texto es un párrafo</p>
<p>un párrafo con una <strong>palabra</strong> resaltada</p>
<p>visítanos en <em>www.tudominio.com</em>, gracias</p>

6
1.3. Estructura y definición de documento HTML
Al utilizar un lenguaje estructurado, como es HTML 5, se ha de tener una
estructura básica para la creación de la página web, al igual que otros lenguajes
estructurados se ha de cumplir con un etiquetado inicial que determina como
está compuesta la página.
Si se observa el código fuente de una página Web básica, se pueden distinguir
tres partes bien diferenciadas, un ejemplo de una página básica en HTML 5
sería el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Primer Ejercicio HTML 5</title>
</head>
<body>
<p>Esperamos que <strong>tudominio.com</strong> sea un lugar donde estéis
cómodos</p>
</body>
</html>
Como se puede observar en primer lugar se encuentra la definición del tipo de documento, el cual se
especifica con la etiqueta <!DOCTYPE>, seguidamente se encuentra la etiqueta "html" que especifica
el principio y fin del documento HTML, entre las etiquetas de principio y fin del documento se ubican
las etiquetas correspondientes al encabezado y cuerpo del documento cuyas etiquetas
correspondientes son <head> y <body>.
Básicamente se puede decir que un documento web realizado con el lenguaje de marcas o etiquetas
HTML5, tiene dos secciones principales, el encabezado y el cuerpo del documento.
1.4. Definición del tipo de documento
La primera línea de un documento HTML5, es una etiqueta especial llamada DOCTYPE, esta línea
indica al navegador el tipo de documento que va a leer.
En lenguajes como XHTML 1.0 se aplica también la definición del tipo de documento pero la línea
que se indica seria parecida a la siguiente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Como se puede observar es una línea que no permite una lectura fácil de la misma, ya que se
incluyen en ellas la especificación del tipo de documento, así como la ubicación del mismo en el sitio
web del consorcio W3C, y hace bastante complicada la compresión por parte del usuario así como el
recordar de memoria la especificación del tipo de documento.

7
Esto forzaba a la mayoría de diseñadores o programadores web a copiar y pegar la línea de
especificación de documento de un archivo a otro.
La nueva versión del lenguaje HTML5 mejora considerablemente la especificación del tipo de
documento, ya que se ha incluido una especificación de tipo de documento corta y de fácil
aprendizaje.
Cuando observe el código fuente de cualquier página Web, es normal encontrarse con la etiqueta
que sirve para especificar el DTD (Definición del Tipo de Documento) al principio del documento.
Esta etiqueta se denomina <!DOCTYPE> e indica que versión de XHTML o HTML se utiliza en el
documento, para que los navegadores puedan aplicar la gramática y sintaxis correspondiente al
documento.
Otra de las aplicaciones que tiene la etiqueta con respecto a los navegadores es la de activar el modo
estándar o estricto, o el modo de compatibilidad (“quirk”).
NOTA: El no utilizar actualmente la etiqueta de definición del documento puede suponer que el
navegador no interprete en su visualización la página como debe y por lo tanto presentar diferencias
en el formato de la página entre distintos navegadores.
Es por ello que es importante especificar el tipo de documento, ya que garantiza que el navegador
actúe de forma estricta y no se produzcan diferencias en la interpretación del código HTML recibido.
Para realizar la especificación del tipo de documento y que este se corresponda con la definición del
lenguaje HTML 5, se ha de emplear la siguiente etiqueta:
<!DOCTYPE html>
Como se puede ver es simple y fácil de recordar, ya que solo se ha de especificar la palabra clave
“html”, la cual indica que el documento es un documento estructurado con el lenguaje HTML5.
Se ha de tener en cuenta que muchas veces en los documentos que se crean se considera como un
buen estilo de diseño, el incluir o especificar el lenguaje natural que se utiliza para crear el
documento.
Para realizar esta acción es conveniente añadir a la etiqueta de inicio de página, el atributo que
permite especificar el lenguaje, quedando la misma de la siguiente forma.
<html lang="es">
<html lang="es-Es" xmlns="http://www.w3.org/1999/xhtml">
Al igual que es conveniente especificar el lenguaje también es conveniente, especificar el juego de
codificación de caracteres que se ha de utilizar para realizar la visualización de la página.
De esta forma se hace coincidir los símbolos que componen el lenguaje natural utilizado para la
creación del documento, con los símbolos que se visualizan en el navegador.

8
Para realizar esta acción se ha de utilizar la siguiente etiqueta, especificando la misma dentro de la
cabecera del documento.
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
NOTA: El ejemplo especificado aquí, indica que se utilice la codificación utf-8, entre las codificaciones
más utilizadas, encontramos la utf-8 y la ISO-8859-1, utilizada esta última para la codificación de
símbolos y caracteres de acentuación de lengua castellana.
El siguiente ejemplo muestra una estructura de página con lenguaje y codificación de caracteres
especificada.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Primer Ejercicio HTML 5</title>
</head>
<body>
<p>Esperamos que <strong>tudominio.com</strong> sea un lugar donde estéis
cómodos</p>
</body>
</html>
1.5. Etiqueta DOCTYPE
Como se ha comentado anteriormente en el apartado anterior, la etiqueta <!DOCTYPE>, es la
encargada de indicar al navegador cual es el tipo de documento web del que se va a realizar la carga
en el navegador.
Esta etiqueta permite que el navegador se ajuste lo más adecuadamente posible a la visualización del
documento, ahorrando tiempo en la carga del mismo.
NOTA: Como es lógico los navegadores soportan diferentes tipos de documento web, y es por eso
que esta etiqueta se hace necesaria para advertir al navegador el tipo de documento que se carga en
el mismo.

9
Existen varios tipos de definición de documentos, para HTML 4, XHTML, HTML5, etc. En el caso que
nos ocupa la definición de documento necesaria es la especificación del tipo para documento HTML5,
y aquí es donde viene lo bueno, en esta versión de HTML se ha simplificado al máximo la definición
del tipo de documento ya que este está compuesto solo por los siguientes elementos:
 Apertura de la etiqueta y etiqueta. La apertura de etiqueta se realiza utilizando el símbolo
menor “<”, a continuación se escribe la etiqueta de definición o tipo de documento siendo
!DOCTYPE.
 Tipo de documento y cierre de etiqueta. A continuación se ha de especificar el tipo de
documento a cargar, que para la versión de HTML5, su palabra reservada es solo “html”. Y a
continuación el cierre de etiqueta, representada por el símbolo mayor “>”.
De esta forma la etiqueta completa queda de la siguiente forma:
<!DOCTYPE html>
Según la especificación del consorcio W3C es indiferente que se utilice mayúsculas o minúsculas, en
toda la etiqueta, aunque muchos diseñadores o programadores que vienen del lenguaje XHTML,
siguen prefiriendo el hecho de escribir en minúsculas, de esta forma no tienen ningún problema a la
hora de realizar su paso a HTML5, de hecho es muy probable que se llegue a especificar una variante,
sino existe ya del lenguaje HTML5, adaptado a XHTML en su sintaxis.
NOTA: Como curiosidad algunos diseñadores y programadores insertan en la etiqueta un atributo
denominado public, seguido de una cadena de texto o un símbolo en formato Unicode, no tiene
ningún efecto ya que el navegador al tratarse de HTML5 no la interpreta y puede servir para añadir
algún comentario como si de un “huevo de pascua” se tratara.
Recuerda…
La etiqueta "meta charset=”iso-8859-1” sirve para establecer un código de idioma correcto y
muestre los caracteres del castellano.
HTML5 es una nueva tecnología que aglutina a otras como CSS y JavaScript.
Es necesario siempre el uso de la etiqueta "title" para estar bien posicionado.

10
2. ENCABEZADO DEL DOCUMENTO
2.1. Etiqueta <HTML>
La etiqueta <html>, se utiliza para indicar al navegador que el documento que se visualiza está
realizado en el lenguaje HTML.
Es también la etiqueta raíz del resto de etiquetas del lenguaje, es decir el resto de etiquetas del
lenguaje HTML5, están contenidas dentro de ella, con la única excepción de la etiqueta
correspondiente al tipo de documento.
El formato de la etiqueta con sus atributos posibles es el siguiente:
<html manifest=”valor”> Contenido del documento web, resto de etiquetas…
</html>
Entre los atributos que se pueden destacar de la etiqueta encontramos los siguientes:
manifest
Si se especifica el atributo “manifest”, permite activar un mecanismo de caché, que permite que las
aplicaciones web se ejecuten sin estar online o sin conexión.
Los programadores utilizan esta caché o recurso, “archivo de datos”, para especificar donde se
guardan los datos y tener la posibilidad de trabajar con los mismos aunque no se tenga conexión.
Las aplicaciones que utilizan caché se cargan y funcionan adecuadamente aun no estando
conectados.
Entre los beneficios de utilizar una cache se pueden indicar los siguientes:
 Navegar sin conexión.
 Velocidad en la carga de recursos, ya que al encontrase guardados en local, cargan
más rápidos.
 Y por último se reduce también la petición de datos al servidor, ya que solo se
descargan los recursos o datos que se modifiquen.
El formato de la etiqueta utilizando el atributo de caché es el siguiente:
<html manifest=”Archivo.appcache”>
Se especifica el nombre del archivo donde se almacena la información de la caché, a este nombre de
archivo se le da la extensión “.appcache”.

11
El siguiente ejemplo muestra un documento web con el manifiesto de caché activado:
<!DOCTYPE html>
<html manifest=”ejercicio1.appcache”>
<head>
<title>Ejercicio HTML 5</title>
</head>
<body>
<p>Esperamos que <strong>tudominio.com</strong> sea un lugar donde
estéis cómodos</p>
</body>
</html>
2.2. Encabezado del documento
Etiqueta <HEAD>
Como se ha explicado anteriormente una de las partes principales en la estructura de un documento
web, es la sección de cabecera del mismo, la cual se define mediante la etiqueta <head> </head>. La
explicación formal de esta etiqueta es que sirve de contenedor para el resto de etiquetas que puede
contener esta sección.
El formato de la etiqueta es el siguiente:
<head>
… elementos o etiquetas que componen el encabezado del documento html….
</head>
Entre las etiquetas destacables que puede contener la sección de encabezado, se pueden encontrar
las que se especifican en las siguientes secciones del libro.
Etiqueta <TITLE>
La etiqueta <title> “titulo”, sirve para definir el título del documento, siendo requerida u obligatoria
en todos los documentos.
El título es el único elemento de la sección encabezado que es visible y normalmente los
navegadores lo visualizan en la barra de título de la ventana, o en caso de ser un navegador que
muestre pestañas, se muestra como título de la pestaña.

12
También es usada por los navegadores para añadir la página a su agenda de favoritos con el título
especificado y por último los motores de búsqueda la utilizan para indexar la página.
<head>
<title>Titulo del documento</title>
</head>
Etiqueta <META>
La etiqueta <meta> sirve para definir datos (“metadatos”) sobre el documento web o html, estos
datos no son visualizados por el navegador, ya que se encuentran incluidos en la sección de
encabezado y se suelen utilizar para establecer valores como palabras claves (“keywords“),
descripción de la página, autor de la misma, última fecha de modificación, etc.
Estos datos son utilizados por los navegadores por ejemplo, para recargar la página o establecer
valores de visualización de la misma.
Los buscadores suelen utilizar las keywords para establecer valores de búsqueda para la página,
mientras que otros tipos de datos podrían ser utilizados por otros tipos de servicio web.
<meta atributo=valor>
charset
Este atributo permite establecer el conjunto de caracteres que ha de utilizar el navegador para
visualizar la información del documento HTML que se está representando.
La sintaxis para definir esta etiqueta con el atributo charset es la siguiente:
<meta charset = “conjunto de caracteres “>
Los conjuntos de caracteres que más se suelen utilizar son UTF-8 y ISO8859-1, que se corresponden
con la codificación Unicode y el juego de caracteres para el alfabeto Latín.
El siguiente ejemplo establece un juego de caracteres Unicode para el documento.
<html>
<head>
<title>Prueba, Ejercicios HTML</title>
<meta charset=”UTF-8”>
</head>
<body>
</body></html>

13
name, content
Estos atributos permiten definir pares de datos, es decir, un nombre de valor con su respectivo valor
o contenido. El atributo name sirve para establecer el nombre del dato que se quiere definir,
mientras que content sirve para establecer el valor o contenido que se le quiere dar al dato.
Entre los datos que se suelen utilizar están application-name, author, description, generator y
keywords.
name Descripción
application-name
Se utiliza para definir el nombre de la aplicación de la cual forma
parte el documento web.
author Se utilizar para definir el nombre del autor del documento web.
description
Se utiliza para definir una descripción del documento web, es
utilizada por los motores de búsqueda, para establecer
resultados.
generator
Se utiliza para especificar el nombre del programa con el que se
ha creado el documento web.
keywords
Se utiliza para indicar una serie de términos o palabras que sirven
para establecer categorías en la cual el documento web puede
ser incluido. Suele ser utilizada por los motores de búsqueda para
establecer búsquedas y categorías de los documentos.
El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto con los atributos comentados
anteriormente:
<html>
<head>
<title>Ejercicios y prácticas HTML , tudominio.com</title>
<meta charset=”ISO-8859-1”>
<meta name=”application-name” content=”Ejercicios y prácticas 1.0”>
<meta name=”author” content=”tudominio.com”>
<meta name=”description” content=”Prácticas y ejercicios de HTML”>
<meta name=”generator” content=”tudominio.es”>
<meta name=”keywords” content=”ejercicios, practicas, programación, html,
etc.”>
<meta http-equiv=”refresh” content=”400”>
<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1”>
</head>
<body>
</body></html>

14
http-equiv
Este atributo se suele utilizar para especificar y simular atributos de cabecera del protocolo HTTP. Se
utiliza estableciendo un valor para el atributo, al igual que el atributo anterior, entre los atributos se
pueden destacar los siguientes: contenttype, default-style y refresh.
name (“Nombre”) Descripción
content-type Se utiliza para especificar el juego de caracteres de
codificación del documento.
default-style Se utiliza para especificar la hoja de estilos
preferida.
Refresh
Se utiliza para establecer un intervalo de refresco
del documento web, el cual será actualizado por el
navegador transcurrido el tiempo especificado.
El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto con los atributos comentados
anteriormente:
<html>
<head>
<meta name=”author” content=”tudominio.com”>
<meta name=”generator” content=”tudominio.es”>
etc.”>
</head>
<body>
</body>
</html>

15
2.3. Etiqueta <BASE>
La etiqueta <base>, permite especificar una URL (Uniform Resource Locator). Es una etiqueta
englobada dentro de la categoría de Contenido de Metadatos.
La etiqueta solo puede aparecer una única vez dentro del documento web y ha de situarse a
continuación de la etiqueta de encabezado de documento, siendo así la primera etiqueta del
encabezado.
Se ha de tener en cuenta también, que es una etiqueta sin cierre, es decir no existe etiqueta de cierre
de la misma y por tanto se utiliza el formato abreviado para cerrar la misma.
<base href=”valor” target=”valor” / >
Entre los atributos a destacar que tiene la etiqueta <base> se encuentran los siguientes:
 href: Este atributo permite establecer la URL base para todas las URL’s relativas que
existen en el documento web.
La sintaxis para definir esta etiqueta con el atributo href es la siguiente:
<base href=”valor URL” />
 target: El atributo permite especificar el destino por defecto para todos los enlaces y
formularios del documento web.
La sintaxis para definir la etiqueta con el atributo target es la siguiente:
<base href=”valor”” target=”valor” />
Entre los posibles valores que se le pueden aplicar al atributo target, encontramos los siguientes:
Target Descripción
_blank1 Especifica que el destino sea una nueva ventana del navegador, o una nueva
pestaña.
_self Por defecto. Abre el destino en el mismo lugar donde se haya realizado el clic.
_parent Abre el destino en un marco asociado.
_top Abre el destino ocupando todo el cuerpo de la ventana.
Framename Abre el destino en el marco del cual se especifica el nombre.

16
El siguiente ejemplo muestra el uso de la etiqueta en conjunto con los atributos especificados
anteriormente:
<html>
<head>
<base href="" target="_blank">
</head>
<body>
<img src="Temario/1461/stickman.jpg" width="24" height="39"
alt="Stickman">
<a href="http://www.meneame.net">Menéame (noticias)</a>
</body>
</html>
2.4. Etiqueta <LINK>
La etiqueta <link>, permite realizar la carga y establecer la relación existente entre el documento
web actual y un recurso externo. Esta etiqueta es normalmente muy utilizada para realizar la carga
de hojas de estilo para el documento web.
La etiqueta se suele insertar en la sección de encabezado del documento web, aunque es posible
encontrarla en otros sitios, al final del documento por ejemplo, lo más adecuado es situarla donde se
ha indicado.
NOTA: Esta etiqueta comprendida en la categoría de Contenido de Metadatos, es una etiqueta de las
denominadas “vacías”, es decir normalmente solo se especifica su etiqueta de inicio y no tiene
ningún tipo de contenido, limitándose la información y configuración de la misma a los atributos de
los cuales dispone.
El formato de la etiqueta con todos sus atributos es el siguiente:
<link href=”valor” hreflang=”valor” media=”valor” rel=”valor”
sizes=”valor” types=”valor” ></link>

17
Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes:
href
Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere
enlazar, con el documento web.
La sintaxis para definir esta etiqueta con el atributo href es la siguiente:
<link href=”valor URL”></link>
hreflang
Este atributo permite establecer el lenguaje del documento que se está enlazando, aunque no realiza
ninguna función especial en los navegadores, puede ser utilizado por los motores de búsqueda para
establecer el idioma.
La sintaxis para definir esta etiqueta con el atributo hreflang es la siguiente:
<link href=”URL” hreflang=”Codigodelenguaje” ></link>
rel
El atributo sirve para especificar la relación existente entre el documento web y el documento con el
que se está realizando el enlace. El atributo es obligatorio y se ha de incluir.
La sintaxis para definir esta etiqueta con el atributo rel es la siguiente:
<link href=”URL” hreflang=”CodigoLenguaje” rel=”valor”></link>
sizes
El atributo se utiliza solo en caso de haber especificado anteriormente en el atributo rel el valor icon,
y permite especificar el tamaño del atributo con el cual se está enlazando, aunque es soportada por
el lenguaje html5, los navegadores a fecha actual no la implementan. La sintaxis para definir esta
etiqueta con el atributo sizes es la siguiente:
<link rel="icon" href="Temario/1461/demo_icono.gif" type="image/gif"
sizes="16x16">

18
Entre sus posibles atributos se pueden encontrar los siguientes:
Sizes Descripción
AnchoxAlto Se ha de especificar los valores de ancho y alto insertando entre ellos el símbolo “x”,
por ejemplo 16x16, 32x32, se pueden insertar varios tamaños separados por espacios
en blanco.
any Indica que el icono con el cual se enlaza es escalable, como si de una imagen svg se
tratara.
type
Sirve para especificar el tipo MIME (Multipurpose Internet Mail Extensions o MIME, en español
"extensiones multipropósito de correo de internet", son una serie de convenciones o
especificaciones dirigidas al intercambio a través de Internet de todo tipo de archivos (texto, audio,
vídeo, etc.) de forma transparente para el usuario) del documento con el que se está realizando el
enlace. Se pueden consultar los tipos mime en la siguiente dirección:
http://www.iana.org/assignments/media-types
La sintaxis para definir esta etiqueta con el atributo types es la siguiente:
<link type=”ValorMime”>
Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o el de texto plano
“text/plain”, etc.
media
Este atributo se ha modificado bastante en esta última versión del lenguaje, y aunque nos
centraremos posteriormente más en el mismo, inicialmente servirá para indicar el tipo de dispositivo
para el cual se está realizando el enlace.
La sintaxis para definir esta etiqueta con el atributo media es la siguiente:
<link rel="Valor" type="Valor" href="Temario/1461/URL" media="valor">

19
Entre los posibles valores de dispositivos que encontramos para el atributo media, se encuentran los
siguientes:
Atributos media
all
Valor por defecto, especifica todo tipo de dispositivos.
aural
Sirve para especificar que el dispositivo para el que se enlaza es un
sintetizador de voz.
braille
Especifica un dispositivo de tipo braille.
handhelp
Especifica un dispositivo de mano, de pantalla pequeña o ancho de banda
limitado.
projection
Especifica un dispositivo de tipo proyector.
print
Especifica un dispositivo de impresión.
screen
Especifica un dispositivo de pantalla de pc.
tty
Especifica un dispositivo de tipo teletipo, que utiliza caracteres de tamaño
fijo.
tv
Especifica un dispositivo de tipo televisión. Como se ha indicado
anteriormente el atributo tiene muchas más opciones que se profundizaran
en las mismas a lo largo del desarrollo del temario.
El siguiente ejemplo muestra el uso de la etiqueta <link> en conjunto con los atributos comentados
anteriormente:
<!DOCTYPE html>
<html>
<head>
<meta name=”author” content=”Ruger Hauer”>
etc.”>
<link rel="stylesheet" type="text/css" href="Temario/1461/default.css"
hreflang=”es”>
<link rel="shortcut icon" href="Temario/1461/favicon.ico">
</head>
<body>
<p>Esperamos que <strong> tudominio.com</strong> sea un lugar donde estéis
cómodos</p>
</body>
</html>

20
2.5. Etiqueta <SCRIPT>
La etiqueta <script> permite la inserción de códigos script, como puede ser JavaScript en un
documento web del lado del cliente (aunque el envió del script se realiza por el servidor al acceder al
documento web, normalmente los script se insertar para que una vez cargados por el “navegador”,
este último sea el que se encargue de la ejecución del código (ejecución en el lado del cliente, el que
accede al documento)). El código se puede insertar directamente entre las etiquetas o haciendo
referencia a un documento externo el cual contiene el código script a ejecutar. En este último caso la
etiqueta de script no ha de tener contenido.
NOTA: Los “navegadores” o visualizadores realizan la carga del documento web de forma secuencial,
cuando el navegador se encuentra con una etiqueta de script y esta contiene el atributo src, puede
provocar que si el script es muy lento en su ejecución o cuando se carga el script y este hace
referencia a un elemento del documento web, que no ha sido cargado todavía, pueda producirse un
error de ejecución en el documento.
Para evitar estas situaciones se ha de plantear donde situar los códigos de script, aunque
inicialmente se plantea que estos se carguen en el encabezado, realmente se pueden cargar en
cualquier parte del documento web. Por lo tanto es conveniente situar los script después de los
elementos del documento web a los cuales hagan referencia. Una técnica muy utilizada era situar los
scripts al final del documento web, antes de la etiqueta de cierre del mismo.
En HTML5 se pueden utilizar los atributos de la etiqueta como son async y defer, los cuales
permitirían la inserción del código de script indicando a su vez cuando se han de ejecutar los mismos.
El formato de la etiqueta con todos sus atributos puede ser uno de los siguientes:
<script type=”valor” src=”URL” charset=”valor” async></script>
<script type=”valor” src=”URL” charset=”valor” defer></script>
<script type=”valor” > Contenido código fuente script </script>
Entre sus atributos se encuentran los siguientes:
async
Se puede utilizar solo cuando el script es externo, es decir se ha especificado el atributo src,
indicando que se cargue el script desde un documento exterior.
Es un atributo booleano, es decir está activado (verdad), si se especifica en la etiqueta y esta
desactivado (false) si no se especifica.
Si el atributo se especifica los script del documento serán ejecutados de forma asíncrona, es decir se
ejecutaran en el momento que tengan oportunidad y han sido cargados completamente antes de la
carga de documento final. Esto no garantiza por tanto el orden de ejecución de los mismos.

21
defer
Se puede utilizar solo cuando el script es externo, es decir se ha especificado el atributo src,
indicando que se cargue el script desde un documento exterior.
No es complementario del atributo async, hay que indicar que aparece un atributo u otro, no los dos
a la vez.
Si se especifica el atributo los script del documento serán cargados y ejecutados, cuando se haya
finalizado la carga del documento. De esta forma se garantiza que los scripts serán ejecutados en el
orden en el que se han cargado dentro del documento web.
En el caso de no especificarse ninguno de los atributos los script son ejecutados en el momento de
ser leídos en el orden natural de lectura del documento web, no garantizándose así que el script
pueda dar problemas por referencias a elementos no cargados.
type
Permite especificar el tipo MIME del script. El tipo MIME está compuesto de dos partes una el tipo
seguido de una barra y el subtipo. Por defecto el tipo MIME en caso de no especificarse es
“text/javascript”.
Entre los posibles valores de este atributo se pueden encontrar las siguientes, siendo los más
comunes:
Type Descripción text/javascript Scripts en lenguaje javascript text/ecmascript Especificación de
lenguaje de programación publicada por ECMA International basado en javascript.
application/javascript Igual que text/javascript, aunque es preferible utilizar el anterior. text/vbscript
Especificación de lenguaje de programación interpretado basado en Visual Basic.
src
El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este
caso el archivo que contiene el código de script a cargar en el documento web. La ruta puede ser
relativa o absoluta.
charset
Solo se ha de especificar en el caso de que se esté realizando la carga de un script externo mediante
el atributo src. Sirve para especificar el juego de caracteres y codificación del archivo que se está
cargando.

22
El siguiente ejemplo muestra el uso de la etiqueta <script> en conjunto con los atributos comentados
anteriormente:
<!DOCTYPE html>
<html>
<head>
<title>Ejercicios y prácticas HTML, tudominio.com</title>
</head>
<body>
<script type=”text/javascript”>
document.write(“Hola Mundo”);
</script>
</body>
</html>
2.6. Etiqueta <NOSCRIPT>
La etiqueta <noscript>, es complementaria de la anterior, ya que se utiliza para definir un contenido
alternativo en el documento web, cuando el navegador no soporta la ejecución de scripts, o bien
cuando los mismos están desactivados en el navegador que recibe el documento.
La etiqueta se puede utilizar dentro del encabezado del documento o bien en el cuerpo del mismo,
dependiendo de su posición se suele utilizar de forma distinta.
NOTA: Normalmente si se utiliza en el encabezado del documento, es decir dentro de la etiqueta
<head>, suele afectar a etiquetas como <link>, <style> y <meta>, de forma que permite realizar la
carga alternativa de estos elementos en caso de que el navegador no permite la ejecución de scripts.
Por otra parte se suele utilizar dentro del cuerpo del documento para indicar que el navegador no
permite la ejecución del script que se intenta ejecutar.
La etiqueta no tiene atributos y es soportada en la mayoría de navegadores, siendo su sintaxis la
siguiente.
<noscript> Contenido a visualizar o cargar por el navegador </noscript>

23
El siguiente ejemplo muestra el uso de la etiqueta dentro de la sección de encabezado, visualizando
un mensaje:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo etiqueta noscript</title>
<meta charset="utf-8" >
<meta name= "author" content="Ruger Hauer"/>
<meta name="description" content="Ejercicios HTML5"/>
<link rel="shortcut icon" href="Temario/1461/favicon.ico" type="image/x-
icon" />
<script defer src="Temario/1461/simple2.js"></script>
<noscript>
<h1>Se requiere Javascript</h1>
<p>No se puede usar esta página sin Javascript</p>
</noscript>
</head>
<body>
<p>Ejercicios y prácticas de programación Web HTML5</p>
<a href="http://www.tudominio.com">Visite tudominio.com</a>
<a href="page2.html">Pagina 2</a>
</body>
</html>
El ejercicio anterior y con JavaScript desactivado en el navegador ha de visualizar un resultado similar
al de la imagen siguiente:

24
El siguiente ejemplo muestra el uso de la etiqueta dentro de la sección de encabezado, realizado una
redirección a otro documento web en caso de no poder ejecutarse los scripts (esté código no es
funcional sino una demostración de redirección).
<!DOCTYPE HTML>
<html>
<head>
<title> Ejemplo etiqueta noscript </title>
<meta charset="utf-8" />
<base href="http://tudominio.com/imagenes/"/>
<meta name="author" content="Ruger Hauer"/>
<meta name="description" content="Ejercicios y prácticas"/>
<link rel="stylesheet" type="text/css" href="Temario/1461/styles.css"/>
<link rel="shortcut icon" href="Temario/1461/favicon.ico" type="image/x-
icon" />
<script defer src="Temario/1461/simple2.js"></script>
<noscript>
<meta http-equiv="refresh" content="0; http://www.tudominio.com"/>
</noscript>
</head>
<body>
<p>
Ejercicios de programación HTML5
</p>
<a href="http://tudominio.com">Visite Tudominio.com</a>
<a href="page2.html">Pagina 2</a>
</body>
</html>
Recuerda…
Mediante la etiqueta SCRIPT podemos insertar: Código Javascript - AJAX
El código Javascript se ejecuta en el lado del cliente.
Para establecer un icono de la web en la pestaña del buscador se:
- Enlazando con la etiqueta Link
- Mediante un gráfico con extensión .ico

25
3. CUERPO DEL DOCUMENTO
3.1. Etiqueta BODY
La etiqueta <body>, contenida dentro de las etiquetas del documento web (<html></html>), sirven
para definir lo que será el cuerpo del documento web, y su contenido será visualizado por el
navegador.
Básicamente la etiqueta es el contenedor del resto de etiquetas que aportan contenido al
documento.
NOTA: En esta versión de HTML, se han quitado todos los atributos sobre la misma.
La sintaxis de la etiqueta es la siguiente:
<body> <p>Contenido a visualizar por el navegador </p> </body>
Contenido a visualizar por el navegador
El siguiente ejemplo muestra el uso de la etiqueta <body>, como contenedor del resto de etiquetas
de contenido de cuerpo del documento web.
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo etiqueta noscript</title>
<base href="http:// tudominio.com/imágenes/"/>
<meta name="author" content="RugerHauer"/>
</head>
<body>
<p>
Ejercicios de programación HTML5
</p>
<p><a href="http:// tudominio.com">Visite tudominio.com</a></p>
<p><a href="page2.html">Pagina 2</a></p>
</body>
</html>

26
Etiqueta <P>
La finalidad de la etiqueta <p>, es la de definir un párrafo, el texto encerrado entre las mismas será
considerado por el navegador como un párrafo.
El navegador realiza un ajuste automático de los párrafos al ancho de pantalla determinado por la
ventana del programa navegador.
Se ha de tener en cuenta que los navegadores cuando realizan la representación del lenguaje HTML5,
no tienen en cuenta más de un espacio en blanco de separación entre palabras, es decir aunque deje
con su editor de textos entre una palabra y otra más de un espacio en blanco, solo se visualizara uno
descartándose el resto.
Ocurre igual con los saltos de línea que pueda insertar dentro de un párrafo en su editor HTML5, el
navegador solo interpretara como saltos de líneas aquellos que sean representados por su etiqueta
equivalente.
<p>Texto del párrafo</p>
El siguiente ejemplo muestra el uso de la etiqueta:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejercicios prácticos HTML5</title>
<meta name="author" content="RugerHauer">
<meta name="description" content="Ejercicios prácticos HTML5">
<meta name="generator" content="Ejercicios prácticos HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y
archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las
industrias desde el año 1500, cuando un impresor (N. del T. persona que se
dedica a la imprenta) desconocido usó una galería de textos y los mezcló
de tal manera que logró hacer un libro de textos espécimen.</p>
</body>
</html>
El resultado del ejercicio anterior en el navegador ha de ser similar al siguiente:

27
Etiqueta <A>
La etiqueta <a>, sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del
documento web con otros documentos o recursos disponibles.
Por defecto los navegadores suelen visualizar los enlaces con una serie de colores predefinidos,
aunque estos se pueden cambiar.
Los enlaces no visitados se visualizan normalmente con el color azul, los enlaces visitados con el color
purpura y por último los enlaces activos mediante el color rojo.
Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de mostrar en la
misma ventana del navegador, sustituyendo el documento web actual por el que se quiere acceder.
La sintaxis para esta etiqueta con todos sus atributos es la siguiente:
<a href=”valor” hreflang=”valor” media=”valor” rel=”valor” target=”valor”
type=”valor”>Texto enlace</a>
href
Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere
enlazar, con el documento web. Se puede especificar una URL absoluta, relativa o un ancla “enlace”
en el mismo documento.
Si se realiza un enlace en el mismo documento a un objeto concreto se ha de utilizar como
identificador del objeto el nombre del mismo que se haya proporcionado mediante el atributo “id”.
Las posibles formas de sintaxis para definir esta etiqueta con el atributo href son las siguientes:
<a href=”URL Absoluta”>Texto del enlace</a>
<a href=”URL Relativa”>Texto del enlace</a>
<a href=”Marcador en el mismo documento”>Texto del enlace</a>
hreflang
Este atributo permite establecer el lenguaje del documento que se está enlazando, aunque no realiza
ninguna función especial en los navegadores, puede ser utilizado por los motores de búsqueda para
establecer el idioma.
La sintaxis para definir esta etiqueta con el atributo hreflang es la siguiente:
<a href=”URL” hreflang=”Código de lenguaje” ></a>
El código de lenguaje se puede consultar utilizando la siguiente dirección de internet:
http://www.w3schools.com/tags/ref_language_codes.asp

28
rel
El atributo rel sirve para especificar la relación existente entre el documento web y el documento
con el que se está realizando el enlace. Este atributo es obligatorio y se ha de incluir.
La sintaxis para definir esta etiqueta con el atributo rel es la siguiente:
<link href=”URL” hreflang=”Código Lenguaje” rel=”valor”></link>
Entre los posibles valores que se pueden aplicar al atributo rel se encuentran los siguientes:
Rel Descripción
Alternate Especifica la relación del documento con una versión alternativa del mismo.
(Impresora, Espejo, Traducida, Etc.)
Autor Especifica la relación del enlace con el autor del documento con el que se enlaza.
bookmark Especifica la URL que se utiliza como dirección permanente para los marcadores de los
programas navegadores.
Help Especifica que el enlace tiene relación con un documento de ayuda.
License Especifica que el enlace es a la información de copyright sobre el documento web.
Next Especifica que el documento web, es parte de una serie de documentos, e indica que
el documento que enlaza es el siguiente en la serie.
Prefetch Sirve para especificar desde el documento web que se está cargando, cual es el
próximo documento web que se ha de cargar, de esta forma el navegador solicita una
petición de cache, cargándose posteriormente la página más rápidamente.
Prev Especifica que el documento web, es parte de una serie de documentos, e indica que
el documento que enlaza es el anterior en la serie.
Search Especifica que el enlace es a la utilidad de búsqueda en el documento.
Nofollow Utilizado normalmente para especificar a los motores de búsqueda que no han de
seguir el enlace.
noreferrer Especifica que no se han de enviar referencias sobre la procedencia del enlace.
Tag Establece una etiqueta o palabra clave para el documento actual.

29
type
Sirve para especificar el tipo MIME del documento con el que se está realizando el enlace. Se pueden
consultar los tipos mime en la siguiente dirección:
La sintaxis para definir esta etiqueta con el atributo type es la siguiente:
<a href=”valor” type=”valor”> </a>
Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o el de texto plano
“text/plain”, etc.
media
Este atributo se ha modificado bastante en esta última versión del lenguaje, y aunque nos
centraremos posteriormente más en el mismo, inicialmente servirá para indicar el tipo de dispositivo
para el cual se está realizando el enlace. La sintaxis para definir esta etiqueta con el atributo media es
la siguiente:
<a href=”valor” hreflang=”valor” rel="Valor" type="Valor”
media="valor">Texto Enlace</a>
Entre los posibles valores de dispositivos que encontramos para el atributo media, se encuentran los
siguientes:
media Descripción
all Valor por defecto, especifica todo tipo de dispositivos.
aural Sirve para especificar que el dispositivo para el que se enlaza es un
sintetizador de voz.
braille Especifica un dispositivo de tipo braille.
handhelp Especifica un dispositivo de mano, de pantalla pequeña o ancho de banda
limitado.
projection Especifica un dispositivo de tipo projector.
print Especifica un dispositivo de impresión.
screen Especifica un dispositivo de pantalla de pc.
tty Especifica un dispositivo de tipo teletipo, que utiliza caracteres de tamaño
fijo.
tv Especifica un dispositivo de tipo televisión.

30
Como se ha indicado anteriormente el atributo tiene muchas más opciones en las que se
profundizaran en las mismas a lo largo del desarrollo del temario.
target
El atributo permite especificar el destino por defecto para todos los enlaces y formularios del
documento web.
<a href=”valor”” target=”valor”>Texto del enlace</a>
Target Descripción
_blank Especifica que el destino sea una nueva ventana del navegador, o una
nueva pestaña.
_self Por defecto. Abre el destino en el mismo lugar donde se haya
realizado el clic.
framename Abre el destino en el marco del cual se especifica el nombre.
Los siguientes ejemplos muestran el uso de la etiqueta <a> en conjunto con los atributos
comentados anteriormente, se muestra el uso de la etiqueta realizando enlaces dentro del propio
documento, a documentos externos html y a recursos externos como pueden ser archivos de
imagen, pdf, email, etc. Lógicamente para que su funcionamiento sea adecuado los recursos a los
cuales se enlaza han de existir.

31
3.2. Enlaces internos en el documento
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplos Etiqueta a</title>
</head>
<body>
<p>Ejercicios de programación HTML5</p>
<p>
<a href="#Parrafo1">Enlace Al Primer Párrafo</a><br/>
<a href="#Parrafo2">Enlace Al Segundo Párrafo</a><br/>
<a href="#Parrafo3">Enlace Al Tercero Párrafo</a><br/></p>
<p id="Parrafo1">LoremIpsum es simplemente el texto de relleno de las
imprentas y archivos de texto. LoremIpsum ha sido el texto de relleno
estándar de las industrias desde el año 1500, cuando un impresor (N. del
T. persona que se dedica a la imprenta) desconocido usó una galería de
textos y los mezcló de tal manera que logró hacer un libro de textos
espécimen. No sólo sobrevivió 500 años, sino que también ingresó como
texto de relleno en documentos electrónicos, quedando esencialmente igual
al original. Fue popularizado en los 60s con la creación de las hojas
"Letraset", las cuales contenían pasajes de LoremIpsum, y más
recientemente con software de autoedición, como por ejemplo Aldus
PageMaker, el cual incluye versiones de LoremIpsum.</p>
<p id="Parrafo2">Es un hecho establecido hace demasiado tiempo que un
lector se distraerá con el contenido del texto de un sitio mientras que
mira su diseño. El punto de usar LoremIpsum es que tiene una distribución
más o menos normal de las letras, al contrario de usar textos como por
ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un
español que se puede leer. Muchos paquetes de autoedición y editores de
páginas web usan el LoremIpsum como su texto por defecto, y al hacer una
búsqueda de "LoremIpsum" va a dar por resultado muchos sitios web que usan
este texto si se encuentran en estado de desarrollo. Muchas versiones han
evolucionado a través de los años, algunas veces por accidente, otras
veces a propósito (por ejemplo insertándole humor y cosas por el
estilo).</p>
<p id="Parrafo3">Al contrario del pensamiento popular, el texto de
LoremIpsum no es simplemente texto aleatorio. Tiene sus raíces en una
pieza clásica de la literatura del Latín, que data del año 45 antes de
Cristo, haciendo que este adquiera más de 2000 años de antigüedad. Richard
McClintock, un profesor de Latín de la Universidad de Hampden-Sydney en
Virginia, encontró una de las palabras más oscuras de la lengua del latín,
"consecteur", en un pasaje de LoremIpsum, y al seguir leyendo distintos
textos del latín, descubrió la fuente indudable.</p>
</body>
</html>

32
En este ejercicio se realiza el enlace con tres identificadores, situados en cada uno de los párrafos
mediante el atributo global “id”, para realizar los enlaces como valor del atributo href, se ha de
especificar el id asignado a cada párrafo precedido del símbolo “#”.
El resultado que se ha de obtener ha de ser similar al que se muestra en la siguiente imagen:

33
3.3. Enlaces a documentos web externos relativos y absolutos
Al definir los enlaces, se puede especificar la ruta absoluta a los mismos, o una ruta relativa teniendo
en cuenta el documento actual.
En el siguiente ejemplo se muestra el uso de dichas rutas mostrando enlaces, a sitios web que se
encuentran fuera del lugar donde está almacenado el documento.
Y otros enlaces que muestran rutas relativas desde la posición actual del documento a otros
documentos ubicados en el mismo sitio de alojamiento.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Enlace a documento web situado en un sitio externo</p>
<p>Enlaces a buscadores externos</p>
<p><a href="http://www.google.es" title="Buscador Google">Buscador
Google</a></p>
<p><a href="http://www.bing.es" title="Buscador Bing">Buscador
Bing</a></p>
<p>Enlaces a documentos con rutas relativas</p>
<p><a href="Temario/1461/stickman.jpg">Imagen 1</a></p>
<p><a href="texto.pdf">Texto 1</a></p>
<p><a href="Temario/1461/2.html">Siguiente Página</a></p></body>
</html>
El resultado del ejercicio ha de ser similar al que se muestra en la imagen siguiente:
a

34
3.4. Enlaces a correo electrónico, ftp
El siguiente ejemplo muestra el uso de realiza un enlace a una dirección de correo electrónico,
aunque el enlace sea a una dirección de correo electrónico, para que el mensaje sea enviado se
requiere que el usuario realice esta acción, ya que este tipo de enlaces abren el programa de correo
electrónico para enviar el mensaje. Los desarrolladores web suelen emplear formularios para el
envío de mensajes de correo, con programación en lenguajes como php, asp, javascript, etc.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>El siguiente ejemplo muestra el uso de enlaces a correo electrónico</p>
<p>Para enviar un mensaje a <a
href="Temario/1461/mailto:formacion@tudominio.com" title="envió de
email">formacion@tudominio.com</a></p>
<p>Para acceder a una dirección de ftp</p>
<p>El siguiente <a href="Temario/1461/ftp://ftp.acer-euro.com/notebook/
empowering_technology/
NB%20ET2%20user's%20guide/Acer%20eRecovery%20Management%20English.pdf">
enlace </a> , accede a un archivo en un servidor ftp.</p>
</body>
</html>
El resultado ha de ser similar al que se muestra en la siguiente imagen:

35
3.5. Etiqueta B, EM y STRONG
Etiqueta <B>
La etiqueta <b>, se utiliza para resaltar texto en el documento, aplicando un formato de negrita
(“bold”), al mismo.
Aunque actualmente el formato que se aplica a un documento web, se suele aplicar mediante hojas
de estilos.
El lenguaje HTML5, recomienda utilizar esta etiqueta como último recurso y en el caso de que
ninguna otra etiqueta sea más apropiada.
Recomendándose que para establecer títulos se utilicen las etiquetas correspondientes (h1..h6),
mientras que para destacar texto se utilicen etiquetas como strong, mark o em.
Como recordatorio, se indica que para poder resaltar texto en negrita se utilice la propiedad Font-
weight, del lenguaje CSS.
La utilización de la etiqueta es muy simple, ya que solo se ha de especificar el texto a resaltar entre la
etiqueta de apertura y cierre, siendo la sintaxis la siguiente:
<p>Texto <b>resaltado</b> en un párrafo</p >
El ejemplo a continuación muestra el uso de la etiqueta para resaltar varias palabras en un
documento web:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplos Etiqueta b</title>
</head>
<body>
<p>El siguiente ejemplo muestra el uso de la <b>etiqueta b</b> para
<b>resaltar</b> texto dentro de un párrafo</p>
</body>
</html>
El resultado en el navegador ha de ser similar al que se muestra a continuación en la imagen:

36
Etiqueta <EM>
La etiqueta <em>, se utiliza para resaltar texto en el documento dando “énfasis” al texto sobre el que
se aplica la etiqueta. Aunque es posible aplicar el mismo efecto utilizando hojas de estilo, esta
etiqueta no se ha suprimido para ajustarse a la web semántica.
Los navegadores suelen visualizar el resultado de la etiqueta como un atributo de itálica o cursiva
sobre el texto al que se le haya aplicado.
<p>El texto <em>siguiente</em> se ha resaltado con énfasis</p>
El siguiente ejemplo muestra el uso de la etiqueta en combinación con otras etiquetas.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>El siguiente <b>Párrafo</b> combina diferentes opciones para
<b>resaltar</b> y dar <em>énfasis</em> al <b><em>texto</em></b> que se
escribe en el mismo.</p>
</body>
</html>
El resultado del ejercicio anterior mostrado en el navegador, ha de ser similar al que se muestra a
continuación:

37
Etiqueta <STRONG>
La etiqueta <strong>, se utiliza para definir en el documento texto considerado importante, produce
en el navegador el efecto de aplicar negrita, aunque es posible aplicar el mismo efecto utilizando
hojas de estilo.
Se recomienda utilizar esta etiqueta para resaltar texto importante antes que utiliza la etiqueta
comentada anteriormente <b>.
<p> El siguiente <strong> Texto</strong> esta resaltado en fuerte </p>
El siguiente Texto esta resaltado en fuerte
El siguiente ejemplo muestra el uso de la etiqueta, resaltando un texto dentro de un párrafo.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>El siguiente <strong>Párrafo</strong> combina diferentes opciones para
<em>resaltar</em> y dar <em>énfasis</em> al <strong>texto que se escribe
en el mismo.</p>
</body>
</html>
El ejercicio anterior produce al visualizarse el siguiente resultado en el navegador:

38
3.6. Etiqueta CODE, SAMP y KBD
Etiqueta <CODE>
La etiqueta <code>, permite definir texto resaltado, utilizando para indicar que el texto hace
referencia bien a partes de un ordenador, o código fuente de programación.
<p>El siguiente <code>texto</code> está marcado como código</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Partes de un sistema informático:<br/>
<code>Unidad Central de Proceso</code><br/>
<code>Memoria</code>
</p>
</body>
</html>
El resultado en el navegador del ejemplo anterior ha de ser similar al siguiente:

39
Etiqueta <SAMP>
La etiqueta <samp>, permite definir texto en el documento resaltado semánticamente, indicando
que el texto marcado es la salida que proporciona un programa de ordenador.
<p>Texto <samp>marcado</samp> como salida de datos de un programa</p>
El siguiente ejemplo muestra el uso de la etiqueta.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>El programa que se está analizando es el siguiente<br/>
<code>printf("Hola Mundo Web");</code><br/></p>
<p>El resultado obtenido por el programa es el siguiente:<br/>
<samp>Hola Mundo Web</samp></p>
</body>
</html>
El resultado en el navegador ha de ser similar al que se muestra en la siguiente imagen:

40
Etiqueta <KBD>
La etiqueta <kbd>, permite especificar un formato de texto para distinguir lo que el usuario tendría
que teclear en la solicitud de un programa.
<p>Texto <kbd>marcado</kbd> con etiqueta keyboard</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>El programa que se está analizando es el siguiente<br/>
<code>printf("Hola Mundo Web");</code><br/>
<samp>Teclee su dirección web: </samp></p>
<p>Ha de teclear una dirección valida de internet:<br/>
<kbd>www.tudominio.com</kbd> a continuación pulsar Intro</p>
</body>
</html>
El resultado que ha de mostrar el navegador ha de ser similar al siguiente:

41
3.7. Etiqueta VAR, MARK y CITE
Etiqueta <VAR>
La finalidad de la etiqueta <var>, es la de resaltar texto en el documento web, indicando que el
mismo son la definición de variables en un programa de ordenador.
<p>Este <var>texto</var> es la definición de una variable</p>
El siguiente ejemplo muestra el uso de la etiqueta en un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>El programa que se está analizando es el siguiente <br/><var>int
x;</var><br/>
<var>int y;</var></p>
<p>Se ha solicitado la creación de dos variables</p>
</body>
</html>
El resultado en el navegador anterior ha de ser similar al siguiente:

42
Etiqueta <MARK>
La etiqueta <mark>, permite realizar el marcado de un texto dentro del documento web, el efecto
visual en el navegador del texto seleccionado, es como si se hubiera pasado un bolígrafo resaltador
de texto por encima del texto que se haya seleccionado.
Versiones anteriores a la 9 del navegador internet Explorer no soportan la etiqueta.
La sintaxis de la etiqueta es la siguiente.
<p>El <mark>texto siguiente esta remarcado</mark>, dentro del párrafo</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>LoremIpsum es simplemente el texto de relleno de las imprentas y
archivos de texto. LoremIpsum ha sido el texto de relleno estándar de las
de tal manera que logró hacer un libro de textos espécimen. </p>
<p><mark>No sólo sobrevivió 500 años, sino que también ingresó como texto
de relleno en documentos electrónicos, quedando esencialmente igual al
original.</mark></p>
</body>
</html>
El resultado en el navegador ha de ser similar al que se muestra en la siguiente imagen:

43
Etiqueta <CITE>
La etiqueta <cite>, se utiliza para resaltar el texto correspondiente al título de un trabajo, como obra,
autor, película, actor, etc.
<p>Texto <cite>resaltado como cita</cite> dentro de un párrafo</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p><cite>El grito</cite> por Edward Munch. Pintado en 1893.v/p>
</body>
</html>
El resultado en el navegador del ejemplo anterior ha de ser similar a la imagen que se muestra a
continuación.

44
3.8. Etiqueta I, S, U y SMALL
Etiqueta <I>
La etiqueta <i>, tiene como finalidad la de expresar semánticamente una parte del texto en una voz
alternativa o un estado de ánimo diferente. Anteriormente era usada para visualizar un texto en
itálica, siendo su efecto visible en el navegador.
Se puede utilizar para expresar un término técnico, una frase en un idioma distinto, nombres de
objetos concretos, pensamientos, etc.
El W3C recomienda utilizar la etiqueta siempre y cuando semánticamente no exista otra posibilidad
de utilizar una etiqueta distinta, como pueden ser em, strong, mark, etc.
<p>Texto que se <i>quiere</i> resaltar semánticamente</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>El coche <i>Rayo McQueen</i> es muy rápido.</p>
</body>
</html>

45
Etiqueta <S>
La etiqueta <s>, tiene como finalidad la de expresar que un texto en el documento no es correcto,
exacto o no es pertinente.
No se ha de utilizar para especificar un texto que ha sido reemplazado o borrado.
El efecto de visualización que se produce en el navegador es el de tachado.
<p>Este texto <s>no es correcto</s> y se define de esta forma</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Ejercicios y prácticas de programación en <i>www.tudominio.com</i>.</p>
<p>Cursos totalmente gratuitos y de <s>pago</s>.</p>
</body>
</html>

46
Etiqueta <U>
La etiqueta <u>, se utiliza en esta última versión de HTML5, para definir texto estilísticamente
diferente del texto normal o nombres propios en otros idiomas.
El consorcio W3C recomienda no utilizar esta etiqueta siempre y cuando se pueda emplear otra más
adecuada para realzar el texto.
El efecto visual sobre el texto al cual se aplica la etiqueta es que aparece subrayado, pudiendo llevar
a confundir el texto con enlaces, los cuales normalmente suelen estar subrayados.
La sintaxis para la etiqueta es la siguiente:
<p>Esto es un <u>texto subrayado</u> en un párrafo</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Este párrafo contiene <u>Texto</u> que podría no interpretarse
correctamente.</p>
</body>
</html>
El ejercicio anterior ha de mostrar un resultado similar al que se muestra a continuación.

47
Etiqueta <SMALL>
La etiqueta <small>, permite definir “texto pequeño”, es decir el texto que se encierre en la etiqueta
será representado por el navegador con un tamaño de fuente más pequeño que el normal.
<p>Este <small>Texto</small> destaca por su tamaño</p>
<!DOCTYPE HTML>
<html>
<head>
<title>
Ejercicios Etiqueta SMALL</title>
</head>
<body>
<p>
www. tudominio.com - Ejercicios y prácticas de programación web.</p>
<p>
<small>
Copyright 2006-2013 by Ruger Hauer</small>
</p>
</p>
</body>
</html>

48
3.9. Etiqueta SUB, SUP, BR y WBR
Etiqueta <SUB>
La etiqueta <sub>, permite definir un texto en subíndice, el texto subíndice aparece por debajo de la
línea base de representación del texto, un ejemplo de utilización podría ser en formulas químicas
como H20.
<p>El siguiente <sub>texto</sub> permite definir un subíndice</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>www. tudominio.com - Ejercicios y prácticas de programación web.</p>
<p>El siguiente texto contiene un <sub>subíndice</sub></p>
<p>Aunque también se utiliza en fórmulas como H<sub>2</sub>O</p>
</body>
</html>

49
Etiqueta <SUP>
La etiqueta <sup>, realiza la definición de un texto en formato superíndice, el texto en este formato
es visualizado por el navegador por encima de la línea base de texto.
Se suele utilizar en muchas ocasiones para definir notas a pie de página, similares a la siguiente
WWW1.
La sintaxis de la siguiente es la siguiente:
<p>El siguiente <sup>Texto</sup> está en superíndice</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>www.tudominio.com</p>
<p>Ejercicios y prácticas de programación web.<sup>1</sup></p><hr/>
<p>1. Curso práctico de programación Web en html5</p>
</body>
</html>

50
Etiqueta <BR> y <WBR>
Aunque en su editor HTML, deje líneas en blanco o introduzca saltos de línea forzados en un párrafo,
se ha comentado anteriormente que el navegador realiza la omisión de los mismos, ya que la forma
de indicar un salto es mediante las etiquetas de párrafo.
Pero se puede realizar el forzado de salto de línea, utilizando para ello la etiqueta <br>, esta etiqueta
permite realizar la inserción forzada de un salto de línea en el navegador.
Es una etiqueta de las denominadas “vacías”, es decir no tiene ni contenido, ni etiqueta de cierre.
El salto de línea se produce en el lugar donde se sitúe la etiqueta y se mantiene independientemente
aun cuando se altere el ancho de visualización del documento en el navegador.
Como recomendación se indica que se ha de utilizar esta etiqueta solo para insertar saltos de línea
forzados en el párrafo, y no utilizarla como separador de párrafos.
<p>Este párrafo contiene un<br> salto de línea forzado</p>
Otro posible pequeño problema, es cuando en un documento existen párrafos de gran tamaño, y en
ellos se pueden encontrar palabras de un tamaño considerable, posiblemente porque sean términos
técnicos. Si se intenta cambiar el ancho de visualización del navegador, el ajuste de párrafo que se
produce, puede ocasionar que el párrafo no se visualice lo más justificado posible.
Para solventar el problema expuesto, existe la siguiente etiqueta <wbr>, que permite definir por
donde se realiza el salto de línea en un término que sea muy grande. Mientras que el texto quepa sin
problemas en la línea del párrafo no se produce ningún corte en la palabra, si el termino no cabe en
la línea, el navegador corta la palabra en el lugar donde se encuentra la etiqueta. Al igual que la
etiqueta anterior, es una etiqueta denominada “vacía”, por tanto no tiene ni contenido, ni etiqueta
de cierre.
<p>En este párrafo la palabra Super<wbr>Fragilistico<wbr>Espialidoso es
muy amplia</p>

51
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Al contrario del pensamiento popular, el texto de LoremIpsum no es
simplemente texto aleatorio.<br>Tiene sus raíces en una pieza clásica de
la literatura del Latín, que data del año 45 antes de Cristo, haciendo que
este adquiera más de 2000 años de antigüedad.<br> Richard McClintock, un
profesor de Latín de la Universidad de <mark> Hampden <wbr>-Sydney </mark>
en Virginia, encontró una de las palabras más oscuras de la lengua del
latín, "consecteur", en un pasaje de LoremIpsum, y al seguir leyendo
distintos textos del latín, descubrió la fuente indudable. </p>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación.
3.10. Etiqueta INS, DEL y ABBR
Etiqueta <INS>
La etiqueta <ins>, permite definir que un texto ha sido actualizado o insertado en el documento web.
La representación visual en el navegador suele ser la de texto subrayado.
La sintaxis de la etiqueta con sus atributos posibles es la siguiente:
<p>El <ins cite=”URLr” datetime=” YYYY-MM-DDThh:mm:ssTZD”>texto</ins> se
ha insertado</p>

52
 cite: Este atributo permite establecer la URL en la que se encuentra el documento en el
cual se explican los razonamientos de la inserción de texto realizada. Se puede
especificar una dirección relativa o absoluta. Aunque visualmente no tiene ningún efecto
en el navegador.
 datetime: El atributo permite establecer la fecha y hora en la cual se ha realizado la
inserción de texto en el documento web. La siguiente tabla muestra el formato y valores
que se han de asignar al atributo. No tiene efectos visuales en el navegador.
El siguiente ejemplo muestra el uso de la etiqueta con sus atributos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>El trozo de texto estándar de LoremIpsum usado desde el año 1500 es
reproducido debajo para aquellos interesados. Las secciones 1.10.32 y
1.10.33 de "de FinibusBonorum et Malorum" por Cícero son también
reproducidas en su forma original exacta, acompañadas por versiones en
Inglés de la traducción realizada en 1914 <ins cite="http://www.
tudominio.com" datetime="2013-10-16T10:43:00Z"> por H. Rackham.</ins></p>
</body>
</html>

53
Etiqueta <DEL>
La etiqueta <del>, permite definir texto que se ha marcado como borrado en una fecha determinada,
la visualización del efecto en el navegador, es la de texto tachado. La sintaxis de la etiqueta con sus
atributos posibles es la siguiente:
<p>El <del cite=”URLr” datetime=” YYYY-MM-DDThh:mm:ssTZD”>texto</del> se
ha borrado</p>
 cite: Este atributo permite establecer la URL en la que se encuentra el documento, en el cual
se explican los razonamientos del borrado de texto realizado. Se puede especificar una
dirección relativa o absoluta. Aunque visualmente no tiene ningún efecto en el navegador.
 datetime: El atributo permite establecer la fecha y hora en la cual se ha realizado la
eliminación del texto en el documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Visítanos en <del cite="http://www.tudominio.com" datetime="2013-10-
16T10:43:00Z">www.tudominio.es</del></p>
<p>Perdón en <ins cite="http://www.tudominio.com" datetime="2013-
1016T10:43:00Z">www. tudominio.com</ins></p>
</body>
</html>

54
Etiqueta <ABBR>
La etiqueta <abbr>, permite definir texto indicando que es una abreviatura o acrónimo, como
pueden ser “WWW” o “NASA”.
El marcado de texto con esta etiqueta permite proporcionar información a los navegadores,
correctores ortográficos, sistemas de traducción y motores de búsqueda.
El efecto visual en la mayoría de los navegadores, es que al mover el puntero del ratón por encima de
la abreviatura, se visualiza un pequeño letrero con la información proporcionada por el atributo
“title” de la etiqueta.
<p>La siguiente <abbrtitle=”Descripción Abreviatura”>Palabra</abbr> es una
abreviatura</p>
La etiqueta utiliza el atributo global “title”, en el cual se ha de especificar la descripción del acrónimo
o abreviatura, para esta etiqueta.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>La siguiente palabra <abbrtitle="Objeto Volante No
Identificado">OVNI</abbr> es una abreviatura</p>
</body>
</html>

55
3.11. Etiqueta ADDRESS, BDO y DFN
Etiqueta <ADDRESS>
La etiqueta <address>, permite definir la información de contacto del autor o propietario del
documento o artículo.
Si la etiqueta se encuentra dentro del cuerpo “body” del documento, representa la información de
contacto del documento completo, mientras que si la etiqueta se encuentra dentro de un artículo
“article”, representa la información de contacto del autor del artículo.
Los navegadores suelen visualizar la información de contacto en letra cursiva y la mayoría de
navegadores insertan también un salto de línea antes y después de la etiqueta.
No se debe de utilizar la misma para indicar un código postal a menos que este último forme parte
de la información de contacto, y usualmente se suele ubicar la etiqueta de dirección dentro de otra
denominada “footer”.
<address>
Escrito por <a href=mailto:rugerhauer@gmail.com>Ruger Hauer</a>.<br>
Visítenos en: <br> www.tudominio.com<br>
C/ SinSentido, 44, 03202<br>
Spain<br>
</address>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Información de contacto...</p>
<footer>
<address>
Escrito por <a href=mailto:rugerhauer@gmail.com>Ruger Hauer</a>.<br>
Visítenos en: <br> www. tudominio.com<br>
C/ SinSentido, 44, 03202<br>
Spain<br>
</address>
</footer>
</body>
</html>

56
El resultado en el navegador del ejemplo anterior ha de ser similar al siguiente:
Etiqueta <BDO>
La etiqueta <bdo>, permite definir la dirección de visualización del texto contenido en la misma.
La sintaxis de la etiqueta con sus atributos posibles es la siguiente:
<p>El siguiente <bdodir=”Valor”>Texto</bdo> tiene cambiada su dirección de
visualización</p>
El atributo a destacar de la etiqueta <bdo> es el siguiente:
 dir: Permite especificar la dirección de visualización del texto. Tiene como valores rtl
(righttoleft) derecha a izquierda, y ltr (lefttoright) izquierda a derecha.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Opciones sobre el texto…</p>
<p>El siguiente <bdodir="ltr">Texto</bdo> está escrito de izquierda a
derecha</p><p>El siguiente <bdodir="rtl">Texto</bdo> está escrito de
derecha a izquierda</p>
</body>
</html>

57
El resultado en el navegador anterior ha de ser similar al siguiente.
Etiqueta <DFN>
La etiqueta <dfn>, se utiliza para realizar la definición de un término. El efecto visual en el navegador
es el de fuente cursiva, pero su significado semántico no es el mismo.
<dfn>Texto Definición del Termino</dfn>
La etiqueta utiliza el atributo global “title”, en el cual se ha de especificar la descripción del acrónimo
o abreviatura, para esta etiqueta.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p><abbrtitle="Basic Input Output System">BIOS</abbr></p>
<dfn>Sistema Básico de Entrada y Salida en un Sistema Informático</dfn>
</body>
</html>

58
3.12. Etiqueta PRE, Q y BLOCKQUOTE
Etiqueta <PRE>
La etiqueta <pre>, permite definir lo que se denomina texto con formato o preformateado.
Como se ha comentado anteriormente el navegador no respeta los saltos de línea y espacios en
blanco sobrantes en un documento web.
Al insertar en el contenido de esta etiqueta un texto, el mismo se visualiza normalmente con una
fuente de letra de ancho fijo, normalmente suele ser el tipo de letra Courier.
El utilizar esta fuente hace que los espacios en blanco y saltos de línea, que se inserten como
contenido de la etiqueta sean respetados y por tanto, el texto se ha de visualizar en el navegador tal
como se ha escrito.
<pre>El texto escrito aquí esta preformateado</pre>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
El ejemplo más usual en los lenguajes de programación
<pre>
#include<stdio.h>;
intmain(void)
{
printf("Hola Mundo, tudominio.com");
return 0;
}
</pre>
</body>
</html>

59
Etiqueta <Q>
La etiqueta <q>, se utiliza para insertar un texto acotado entre comillas dobles.
<p>El siguiente <q>Texto</q> esta resaltado entre comillas.</p>
El ejercicio siguiente muestra el uso de la etiqueta en un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Lo más importante que aprendí a hacer después de los cuarenta años fue a
<q>decir no</q> cuando es <q>no</q>. <cite>Gabriel García
Márquez</cite></p>
<p>Gracias por visitar <q> tudominio.com</q></p>
</body>
</html>

60
Etiqueta <BLOCKQUOTE>
La etiqueta <blockquote>, permite realizar la inserción de un texto, el cual visualmente en el
navegador se realiza sangría a la izquierda sobre el mismo, mientras que semánticamente se puede
utilizar para realizar una distinción sobre un texto al que se quiere hacer referencia. Por cada
etiqueta <blockquote>, anidadas una dentro de la otra, se realiza un nuevo sangrado sobre el texto
insertado en el documento. La sintaxis de la etiqueta es la siguiente.
<blockquote cite=”URL”>Texto al que referenciar y sangrar</blockquote>
El atributo a destacar de la etiqueta <blockquote> es:
 cite: El atributo permite especificar como valor, una URL o dirección de internet, de la cual se
ha extraído, consultado o simplemente se quiere referenciar al texto insertado en el
documento. La URL, puede ser absoluta o relativa.
El siguiente ejemplo muestra el uso de la etiqueta en el documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Frases celebres</p>
<blockquote cite="http://www.tudominio.com">
<p>Me lo contaron y lo olvidé; lo vi y lo entendí; lo hice y lo aprendí.
<cite>Confucio</cite></p></blockquote>
<blockquote>
<blockquote cite="http://www.tudominio.com">
<p>Yo no enseño a mis alumnos, solo les proporciono las condiciones en las
que puedan aprender. <cite>Albert Einstein</cite></p>
</blockquote>
</blockquote>
</body>
</html>

61
3.13. Etiqueta BDI, RUBI, RT, RP y DIALOG
Etiqueta <BDI>
La etiqueta <bdi>, permite definir lo que se denomina aislamiento bidireccional, es decir permite
insertar un texto contenido en otra etiqueta para ser escrito en otra dirección, como por ejemplo
derecha a izquierda. Se utiliza normalmente cuando se desconoce la direccionalidad del texto
insertado.
<p>Texto normal, <bdi>Texto Otra Dirección</bdi>, Texto normal</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Juan: 3 Visitas 1 Click</p>
<p>‫ﻣﻳﺭﻙﺄﻭﺑ‬ : 2 Visitas</p>
<p><bdi>Pedro: 6 Visitas</p>
</body>
</html>

62
Etiqueta <RUBY>, <RT>, <RP>
La finalidad de la etiqueta <ruby>, es la de crear anotaciones en formato ruby, que se utilizan para la
tipografía de Asia Oriental, permitiendo mostrar la pronunciación de los caracteres del este asiático.
La etiqueta se utiliza en conjunto con otras dos etiquetas <rt> y <rp>, la primera permite realizar la
explicación o pronunciación del texto, mientras que la segunda permite visualizar un texto en los
navegadores que no soporten la primera característica.
<p>El <ruby> Texto <rp>Pronunciación</rp><rt> Texto
Alternativo</rt></ruby></p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Las siguientes siglas significan
<ruby> PC <rp>(</rp><rt>Orange Juice</rt><rp>)</rp></ruby></p>
</body>
</html>

63
Etiqueta <DIALOG>
La finalidad de la etiqueta <dialog>, es la de semánticamente representar un dialogo, como si se
tratara de representar una conversación de chat, o un dialogo entre programa y usuario.
También se utiliza para abrir un cuadro de dialogo en la ventana del navegador la cual muestre
información al realizar un clic sobre un elemento del documento, aunque para que funcione esta
característica, se han de habilitar ciertas opciones avanzadas del navegador.
Por eso y debido a que todavía no es soportada por la mayoría de navegadores solo se explicara la
misma desde el punto de vista semántico.
El único atributo disponible de la etiqueta, es open, el cual hace que se visualice el contenido del
dialogo al cargar el documento web.
<dialog open>Contenido de texto del dialogo</dialog>
El siguiente ejemplo muestra el uso de la etiqueta en el documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Realice aquí sus preguntas para que puedan ser
contestadas...</p><dialog open>
<ul>
<li>Hola, en que puedo ayudarle..</li>
<li>- Necesito información sobre html5</li>
<li>puede consultar la siguiente página web www.tudominio.com</li>
<li>- Gracias por su ayuda...</li>
</ul>
</dialog>
</body>
</html>

64
Recuerda:
Con la etiqueta A podemos enlazar:
 Una URL
 Una imagen
Una ruta absoluta es http://www.google.es
Para resaltar un código fuente se utiliza la etiqueta CODE.

65
4. ATRIBUTOS EN HTML5
Las etiquetas del lenguaje HTML5, permiten definir un documento web, pero también muchas de
ellas tienen una serie de atributos u “opciones”, dependiendo del tipo de etiqueta que se inserte.
Los atributos permiten especificar en la mayoría de ocasiones el correcto funcionamiento de la
etiqueta, supongamos un enlace a documento, para realizar este enlace se emplea la etiqueta “<a>”,
pero si no se empleara un atributo para especificar donde apunta dicho enlace, la etiqueta por sí solo
no serviría de nada.
A la hora de utilizar los atributos el W3C recomienda que los valores que se asignan a los mismos, se
especifiquen entre comillas dobles (“valor”).
También como pequeña recomendación, aunque tanto los atributos como los valores, se permiten
especificarlos en mayúsculas o minúsculas indiferentemente, se recomienda especificar los mismos
en letras minúsculas, de esta forma si aparecieran nuevas versiones de (X)HTML, se cumpliría
directamente con el estándar.
Con esta última versión del lenguaje HTML5, se podrían establecer dos tipos de atributos, los
globales que todas las etiquetas tienen y pueden utilizar, y los específicos de cada etiqueta, que
dependiendo de la misma tendrá más o menos atributos.
4.1. Atributos Globales - accesskey, class y contenteditable
Los atributos globales se pueden aplicar a todas las etiquetas del lenguaje HTML5, permitiendo dar
sentido y significado a las mismas dentro del contexto en el que se apliquen.
Entre los atributos que se pueden utilizar encontramos los siguientes:
accesskey
El atributo permite especificar un acceso directo para establecer el foco o activar el elemento sobre
el que se aplica.
La sintaxis del atributo es la siguiente:
<Etiqueta accesskey=”Carácter”>
Como valor del atributo se ha de especificar el carácter que se quiere utilizar como acceso directo al
elemento.

66
El siguiente ejemplo muestra el uso del atributo en un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p accesskey="a">LoremIpsum es simplemente el texto de relleno de las
imprentas y archivos de texto. LoremIpsum ha sido el texto de relleno
estándar de las industrias desde el año 1500, cuando un impresor (N. del
T. persona que se dedica a la imprenta) desconocido usó una galería de
textos y los mezcló de tal manera que logró hacer un libro de textos
espécimen. No sólo sobrevivió 500 años, sino que también ingresó como
texto de relleno en documentos electrónicos, quedando esencialmente igual
al original.
</p>
<p accesskey="b">
Fue popularizado en los 60s con la creación de las hojas "Letraset", las
cuales contenían pasajes de LoremIpsum, y más recientemente con software
de autoedición, como por ejemplo Aldus PageMaker, el cual incluye
versiones de LoremIpsum.</p>
<p><a accesskey="c" href="#">Enlace</a></p>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la imagen siguiente.

67
class
Este atributo permite especificar un nombre o varios de clase (una clase es una estructura de
formato que se aplica a un elemento o varios de un documento web, estando construida la misma
mediante el lenguaje de hojas de estilo, CSS), para el elemento web sobre el cual se aplica el
atributo.
<p class=”NombreClase”>Texto de párrafo</p>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> h1.introduccion {color:blue;} p.importante
{color:green;}
p.destacado{ color: red; }
</style>
</head>
<body>
<h1 class="introduccion">Atributo Class</h1>
<p>Este párrafo no tiene aplicado atributos de clase.</p>
<p class="importante">Este párrafo tiene aplicado un atributo de clase.
:)</p>
<p class="destacado">gracias por visitar www.tudominio.com</p>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación en la imagen.

68
contenteditable
Es un nuevo atributo en esta versión de HTML5, el cual permite editar en línea el elemento sobre el
cual se aplica.
Obviamente se suele aplicar sobre elementos que visualizan información en modo texto, párrafos,
áreas de texto, etc.
El atributo puede tener cuatro valores, ninguno “”, verdadero (“true”), siendo estos últimos de
resultados idénticos, es decir da igual aplicar ninguno que verdadero, también dispone de falso
(“false”), y por ultimo heredado (“inherit”), que recogerá el valor del elemento padre.
<p contenteditable=”valor”>Texto del párrafo</p>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p contenteditable="false">Este párrafo no se puede editar.</p>
<p contenteditable="">Este párrafo si se puede editar.</p>
<p contenteditable="true">Otro párrafo editable.</p>
</body>
</html>

69
4.2. Atributos Globales - data, dir y draggable
data-*
El atributo data-*, se utiliza para almacenar datos privados que pueda utilizar el documento u
aplicación web.
Este tipo de atributo permite la posibilidad de insertar datos personalizados en cualquiera de los
elementos HTML del documento web.
Este tipo de dato, luego pueden ser utilizados por lenguajes como javascript, para interactuar con el
usuario en el documento web que se visualiza.
Los nombres de atributos de datos especificados de esta forma se han de teclear en letras
minúsculas.
<p data-nombre-dato=”valor dato”>Texto del párrafo</p>
El siguiente ejemplo muestra el uso del atributo en un documento web utilizando un elemento HTML
tipo lista.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<ul>
<li data-tipo-curso="web">Curso práctico HTML5</li>
<li data-tipo-curso="ofimática">Curso práctico Word</li>
<li data-tipo-curso="internet">Curso práctico Outlook</li></ul>
</body>
</html>
El resultado del ejercicio anterior en el navegador ha de ser similar al que se muestra a continuación.

70
dir
El atributo dir, permite especificar la dirección del texto contenido dentro de un elemento HTML.
La sintaxis del atributo en un elemento html es la siguiente:
<p><strongdir=”valor”>Texto del párrafo</strong></p>
Los posibles valores del atributo son: ltr, que especifica que el texto sea escrito de izquierda a
derecha, rtl, que indica que el texto sea escrito de derecha a izquierda, y por último auto, que deja al
navegador la elección de la dirección del texto, basándose en el contenido del elemento.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p dir="ltr">Este Texto es de izquierda a derecha.</p>
<p dir="rtl">Este Texto es de derecha a izquierda.</p>
<p dir="auto">Este Texto es automático.</p>
</body>
</html>

71
draggable
El atributo draggable, permite especificar si el elemento sobre el cual se aplica el atributo es un
elemento, sobre el cual se puede aplicar la acción de arrastrar y soltar (“drag and drop”).
Como es lógico para producir efectos sobre la visualización del documento en el navegador este
atributo se suele programar en conjunto con lenguajes de programación del cliente, como JavaScript.
Los valores posibles para el atributo son: true, que especifica que el elemento se puede arrastrar,
false, indica que no se puede arrastrar el elemento y por último auto, indicando que se deja al
navegador la elección de posibilidad de arrastrar o no el elemento.
La sintaxis del atributo aplicada a un elemento HTML, es la siguiente.
<p draggable=”valor”>Texto del párrafo</p>
El siguiente ejemplo muestra la aplicación del atributo a elementos de un documento web, aunque
no proporciona interactividad ya que no tiene asociada programación en JavaScript.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p draggable="true">Este Texto se puede arrastrar.</p>
<p draggable="false">Este Texto no se puede arrastrar.</p>
<p draggable="auto">Este Texto es automático.</p>
</body>
</html>

72
4.3. Atributos Globales - hidden, id y lang
hidden
El atributo hidden, permite especificar que un elemento o bien ya no existe, o no es relevante. Es un
atributo booleano, es decir no dispone de valores los cuales aplicar al atributo. Si aparece en un
elemento significa que está activado el atributo y el elemento no será mostrado en el navegador.
La sintaxis del atributo sobre un elemento HTML es la siguiente.
<p hidden>Texto del párrafo</p>
El siguiente ejemplo muestra el uso del atributo en un documento web utilizando un elemento HTML
tipo lista.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p hidden>Este párrafo no se visualizara.</p>
<p>Este párrafo es visible.</p>
<p><b>Nota:</b> El atributo hidden no es soportado por IE.</p>
</body>
</html>
El ejercicio anterior ha de mostrar un resultado similar al siguiente.

73
id
El atributo id, permite especificar un identificador único para cada uno de los elementos de un
documento web. El identificador ha de tener como mínimo un carácter, no puede contener espacios
en blanco y no realiza diferenciación entre mayúsculas y minúsculas.
Normalmente este atributo es usado para aplicar estilos sobre un elemento o interactuar con el
mismo mediante lenguajes de guion.
La sintaxis del atributo es la siguiente.
<p id=”Identificador”>Texto del párrafo</p>
El siguiente ejemplo muestra la utilización del atributo en un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p id="uno">Párrafo con identificador asignado.</p>
<p id="p_dos">Párrafo con <strong id="palabra">identificador</strong>
asignado.</p>
</body>
</html>

74
lang
El atributo lang, permite especificar el lenguaje en el que está redactado el contenido de texto del
elemento HTML sobre el cual se aplica el atributo.
<Etiqueta lang=”Código lenguaje”>Texto del elemento</Etiqueta>
El código de lenguaje que se quiere aplicar, se puede consultar en la siguiente dirección web.
http://www.w3schools.com/tags/ref_language_codes.asp
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p lang="en">I willcheckthewebsite www.tudominio.com</p>
<p lang="fr">Je vais consulter le site Web www.tudominio.com</p>
<p lang="es">voy a consultar la página web www.tudominio.com</p>
</body>
</html>

75
4.4. Atributos Globales - spellcheck, style y tabindex
spellcheck
El atributo spellcheck, permite que se realice por parte del navegador la corrección ortográfica del
contenido, que tenga el elemento sobre el cual se aplica.
Normalmente se suele aplicar sobre elementos de tipo texto de entrada (“input”), que no sean
contraseñas, sobre elementos de tipo área de texto (“textarea”) y en elementos de texto editables,
es decir que dispongan del atributo contenteditable activado.
Se puede aplicar solo dos posibles valores. True (“verdadero”), con lo que se activa la corrección y
False (“Falso”) desactivando la posible corrección del elemento.
<Etiqueta spellcheck=”valor”>Contenido del elemento</Etiqueta>
El siguiente ejemplo muestra el uso del atributo es un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p spellcheck="true" contenteditable="true">Este parrafo tiene la
activacion de correccionortografica activada.</p>
<p spellcheck="false">Este parrafo no tiene activada la
correccionortografica</p>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra en la siguiente imagen.

76
style
El atributo style, permite especificar un estilo CSS, asociado al elemento sobre el cual se aplica, para
cambiar su formato de presentación.
El estilo que se aplica es global, es decir tiene preferencia sobre cualquier otro estilo aplicado
mediante etiquetas style, u hojas de estilo externas al documento.
<Etiqueta style=”Reglas CSS”>Contenido del elemento</Etiqueta>
El siguiente ejemplo muestra el uso del atributo en varios elementos de un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p style=" color: red; ">El párrafo tiene un estilo de color asociado.</p>
<p style=" font-size: 2em; ">El párrafo tiene un estilo de fuente
asociado.</p>
<p style=" color: blue; font-size: 1.4em">Gracias por visitar
www.tudominio.com</p>
</body>
</html>

77
tabindex
El atributo tabindex, se utiliza para establecer el orden de tabulación en el documento web, cuando
se utiliza la tecla de tabulador para recorrer el mismo.
El orden de tabulación establece de qué forma el cursor se sitúa en los diferentes elementos del
documento cuando se va pulsando la tecla de tabulación.
<Etiqueta tabindex=”Valor Numérico”>Contenido del elemento</Etiqueta>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Enlace al buscador <a href="http://www.google.es"
tabindex="1">Google</a></p>
<p>Enlace al buscador <a href="http://www.bing.es"
tabindex="2">Bing</a></p><p>Enlace a <a href="http://www.tudominio.com"
tabindex="3">Tu dominio</a></p>
</body>
</html>

78
4.5. Atributos Globales - title y h1-h6
Títulos (title)
El atributo title, permite especificar información adicional sobre el elemento que se aplica.
Muchos navegadores suelen mostrar una notificación con el valor que se haya dado al atributo,
situando el puntero del ratón sobre el elemento.
<Etiqueta title=”Texto Adicional”>Contenido del elemento</Etiqueta>
El siguiente ejemplo muestra el uso del atributo es un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p></p>
<p title="Párrafo con información adicional">Puedes consultar toda la
información que necesites en <a href="http://www.tudominio.com"
title="Estudios Online">Tudominio</a></p>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra en la siguiente imagen.

79
Encabezados en el contenido (h1-h6)
Las siguientes etiquetas permiten la definición de encabezados o títulos dentro del documento web.
La etiqueta se representa mediante las etiquetas <hX></hX>, siendo X un número entre 1 y 6, que
establece el nivel del encabezado.
La presentación visual de los elementos de encabezado, suele ser en letra negrita, y dependiendo de
su nivel, de 1 a 3 suele ser mayor que la letra base establecida, mientras que los niveles de 4 a 6
suele ser de tamaño menor a la letra establecida como base.
Se utilizan semánticamente para establecer separaciones en el documento web, o dar más relevancia
a secciones del documento.
La sintaxis para las etiquetas de encabezado es la siguiente.
<h1>Contenido de texto del encabezado</h1>
El siguiente ejemplo muestra el uso de encabezados en el documento web para destacar secciones
en el mismo.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Titulo de Nivel 1</h1>
<p>LoremIpsum es simplemente el texto de relleno de las imprentas y
de tal manera que logró hacer un libro de textos espécimen. </p>
<h2>Titulo de Nivel 2</h2>
No sólo sobrevivió 500 años, sino que también ingresó como texto de
relleno en documentos electrónicos, quedando esencialmente igual al
original.
Titulo de Nivel 3</h3>
<p>Fue popularizado en los 60s con la creación de las hojas "Letraset",
las cuales contenían pasajes de LoremIpsum, y más recientemente con
software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye
versiones de LoremIpsum.</p>
</body>
</html>

80
El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación en la imag
4.6. Etiqueta IMG
La etiqueta <img>, permite definir una imagen en el documento web.
Técnicamente la imagen no es insertada dentro del documento, ya que lo que se hace es realizar un
enlace a la misma, encargándose el navegador de situarla en el documento.
Entre los formatos más populares de imagen aceptados, sin duda se encuentran el formato JPEG, y el
formato PNG. Aunque se pueden utilizar muchos más formatos.
Se ha de tener en cuenta que el tamaño de las imágenes influye en el proceso de carga de la página.
Y por tanto se suelen preparar las imágenes para que su “peso” (“tamaño en bytes”), sea menor,
observando que la imagen obtenga la menor pérdida de calidad de visualización en el proceso.
Se ha de observar que la etiqueta no tiene etiqueta de cierre.
<imgalt=”valor” height=”valor” width=”valor” src=”valor”
ismapusemap=”valor”>

81
Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los siguientes:
src
El atributo src, permite especificar el origen de la imagen, es decir su ubicación, bien mediante una
ruta absoluta o relativa.
Las posibles formas de sintaxis para definir esta etiqueta con el atributo src son las siguientes:
<img src=”URL Absoluta”>
<img src=”URL Relativa”>
height
El atributo height, permite especificar el alto de la imagen en pixeles.
Siempre que se especifique el ancho y alto de la imagen, el navegador reservara el espacio
correspondiente para la imagen cuando se produzca la carga del documento.
Si no se especifican los tamaños de la imagen, el navegador no podrá realizar la reserva de espacio en
el documento, hasta que se haya completado la carga de la imagen.
El especificar ancho y alto de la imagen, no significa que se realice una reducción o ampliación del
tamaño en bytes de la imagen, es decir la imagen se ha de leer completa, independientemente del
tamaño especificado.
Si se especifica un tamaño que no siendo el tamaño real de la imagen, se puede producir un efecto
de pixelado o dientes de sierra, con la respectiva pérdida de calidad en la visualización de la imagen.
Si se quiere realizar cambios de tamaño, escalado, calidad, etc. Sobre la imagen se han de hacer
sobre la misma con algún tipo de programa especial, ya que ni el navegador ni el lenguaje realizan
esta función.
La sintaxis de la etiqueta con el atributo height, es la siguiente:
<img src=”valor” height=”Valor En Pixeles”>
width
El atributo width, permite especificar el ancho de visualización de la imagen, con un valor numérico
en pixeles.
La sintaxis de la etiqueta con el atributo width aplicado es la siguiente:
<img src=”valor” height=”Valor En Pixeles” width=”Valor En Pixeles”>

82
alt
El atributo alt, permite especificar un texto alternativo para la imagen. Este texto alternativo es
visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el usuario
utiliza un lector de pantalla.
Algunos navegadores visualizan el texto de este atributo como una pequeña ventana emergente,
aunque no es el comportamiento correcto, para realizar la acción de visualizar la ventana emergente
es preferible utilizar el atributo title.
La sintaxis de la etiqueta con el atributo alt aplicado es la siguiente:
<img src=”Valor” alt=”Texto Alternativo de la imagen”>
ismap
El atributo ismap, permite indicar que la imagen que se está cargando es una imagen considerada
como imagen de mapa de servidor, es decir una imagen que puede tener zonas seleccionables que
sirven como enlaces.
Es un atributo booleano, es decir no tiene valor asociado si aparece en una etiqueta de imagen,
indica que la misma es un mapa de imagen.
El atributo solo está permitido en caso de que la etiqueta de imagen sea descendiente de una
etiqueta de enlace con una referencia valida de enlace.
La sintaxis de la etiqueta con el atributo ismapes es la siguiente:
<a href=”valor”><img src=”Valor” alt=”Texto Alternativo de la imagen”
ismap></a>
usemap
El atributo usemap, permite especificar que la imagen utilice un mapa de imagen con zonas
seleccionables, asociando la etiqueta con un mapa de imagen definido con la etiqueta <map>,
estableciendo de esta forma las zonas seleccionables de la imagen.
El atributo no está permitido utilizarlo si la etiqueta de imagen es descendiente de una etiqueta de
enlace o botón.
Como el atributo hace referencia a una etiqueta que define el mapa de imagen, comentamos la
sintaxis con la etiqueta asociada <map>, la cual permite crear y definir las zonas, aunque es muy
recomendable utilizar programas que generen el código de las zonas, ya que las mismas se han de
establecer mediante coordenadas de pixeles y por tanto es bastante tedioso establecerlas.

83
La sintaxis de la etiqueta con el atributo y etiquetas asociadas es la siguiente.
<img src=”valor” usemap=”#NombreMapa”>
<map name="NombreMapa">
<areashape="rect" coords="0,0,82,126" href="valorenlace" alt=”valor”>
<areashape="circle" coords="90,58,3" href="valorenlace" alt=”valor”>
<areashape="polygon" coords="124,58,8" href="valorenlace"
alt=”valor”></map>
Como se puede observar la etiqueta <map> permite establecer zonas rectangulares, circulares o
poligonales. Por eso se recomienda utilizar un programa a libre elección del usuario, de los muchos
existentes para crear las imágenes y generar el código html del mapa de imagen.
Se ha de tener en cuenta que si se alterase una vez creado el mapa de imagen, las características de
la imagen se ha de volver a crear el mapa de imagen ya que las coordenadas podrían haber variado
con respecto a la imagen original.
El siguiente ejemplo muestra el uso de la etiqueta con el atributo y etiquetas asociadas.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<img src="Temario/1461/mapamundi.jpg" usemap="#Mapa1" alt="MapaMundi" />
<map name="Mapa1">
<areashape="rect" coords="310,61,410,133" href="http://www.eu.com/"
alt="Europa" title="Europa" />
<areashape="rect" coords="141,64,284,291" href="http://www.america.com/"
alt="America" title="America" />
</map>
</body>
</html>
El resultado en el navegador ha de ser similar al que se muestra en la siguiente imagen.

84
4.7. Etiqueta TABLE
La etiqueta <table>, permite definir tablas. Una tabla es una cuadricula de casillas o celdas, divididas
en filas y columnas.
Las tablas para componerlas se hace uso de otras etiquetas, las cuales no tienen sentido sino están
situadas dentro de una etiqueta de tabla. Estas etiquetas son las siguientes.
Etiquetas Descripción
table Definición de una tabla.
th Definición de cabecera de tabla.
tr Define una fila en la tabla.
td Define una celda en la tabla.
caption Define el nombre o título de la tabla.
colgroup Especifica un grupo de una o más columnas
para aplicar formato.
col Especifica las propiedades de una columna de
las columnas definidas en un elemento
colgroup.
thead Define la cabecera de la tabla.
tbody Define el cuerpo de la tabla
tfoot Define el pie de la tabla.

85
4.8. Definición de una tabla sencilla
Para crear una tabla sencilla se ha de utilizar en primer lugar la etiqueta <table>, la cual define la
tabla. Y dentro de ella se han de situar por cada fila una etiqueta <tr>, mientras que por cada casilla o
celda dentro de la fila, se puede utilizar una etiqueta <th>o <td>, dependiendo de que sea una casilla
de cabecera o normal.
El siguiente ejemplo muestra la definición de una tabla de dos filas por dos columnas. Aunque en
versiones anteriores de HTML, se pueden aplicar varios atributos a la etiqueta <table>, actualmente
solo está permitido uno, el atributo border, al cual se le puede dar un valor de 0 o 1.
De esta forma se visualiza un borde en la tabla, este atributo solo se ha de utilizar cuando se está
realizando el documento web por motivos de visualización del diseño, siendo conveniente quitar el
mismo cuando se publique el documento y establecer los formatos de la tabla mediante hojas de
estilo.
Para los ejemplos utilizados y con el fin de poder apreciar el resultado en el navegador se ha
establecido el atributo border con un valor de 1.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<tableborder="1">
<caption>Titulo de la tabla</caption>
<tr>
<th>Col.Cab.1</th>
<th>Col.Cab.2</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado al que se muestra a continuación en la imagen.

86
4.9. Definición de una tabla con combinación de columnas
Uno de los atributos que se pueden aplicar a las etiquetas de celda, independientemente que sean
de encabezado o normales, es el atributo colspan, el cual permite realizar la combinación de varias
columnas en una sola. Para especificar el valor del atributo, se ha de indicar el número de columnas
sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre
comillas dobles. El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas
combinadas aplicada la combinación sobre las columnas.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table border="1">
<caption>Tabla con combinación de columnas</caption>
<tr>
<th colspan="2">Celda Combinada</th><th>Celda Normal</th>
<th colspan="2">Celda Combinada</th></tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
</tr>
<tr>
<td>C6</td>
<td>C7</td>
<td>C8</td>
<td colspan="2">C9 Comb.</td>
</tr>
</table>
</body>
</html>
Como se puede observar en el ejemplo, se ha realizado la combinación de las columnas 1 y 2, de la
primera fila, y también las columnas 4 y 5 de la misma fila. También se ha realizado la combinación
de las columnas 4 y 5 de la última fila de la tabla. El ejemplo anterior ha de mostrar un resultado
similar al que se muestra en la imagen siguiente.

87
4.10. Definición de una tabla con combinación de filas
Al igual que se puede realizar la combinación de columnas, también se puede realizar la combinación
de filas, mediante el atributo rowspan.
Para especificar el valor del atributo, se ha de indicar el número de filas sobre las que se quiere
realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles.
El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas combinadas aplicada la
combinación sobre las filas.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<tableborder="1">
<caption>Tabla con combinación de filas</caption>
<tr>
<th>Celda 1</th>
<th>Celda 2</th>
<th>Celda 3</th>
</tr>
<tr>
<tdrowspan="2">Celda Combinada</td><td>Celda 5</td>
<tdrowspan="2">Celda Combinada</td>
</tr>
<tr>
<td>Celda 7</td>
</tr>
</table>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen siguiente.

88
4.11. Definición de tabla con columnas y filas combinadas
Se puede realizar la aplicación de los dos atributos de combinación de filas y columnas a las celdas de
la tabla, formando así tablas que contienen celdas combinadas. El siguiente ejemplo muestra el uso
de los atributos de combinación aplicados sobre una tabla.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<tableborder="1">
<caption>Tabla con combinación de filas y columnas</caption>
<tr>
<th>celda 1</th>
<th>celda 2</th>
<th>celda 3</th>
<th>celda 4</th>
</tr>
<tr>
<tdrowspan="3">celda 5</td>
<td>celda 6</td>
<tdcolspan="2">celda 7</td>
</tr>
<tr>
<td>celda 8</td>
<td>celda 9</td>
<tdrowspan="2">celda 10</td>
</tr>
<tr>
<tdcolspan="2">celda 11</td>
</tr>
</table>
</body>
</html>

89
4.12. Definición de tablas avanzadas
En muchas ocasiones se puede necesitar tablas que tengan una mayor complejidad en su
estructuración, debido a que puedan tener secciones de datos distintas, o se quiera realizar
diferenciación entre los datos de la tabla y las secciones correspondientes a sus encabezados y pies.
Una de las características de estas tablas es que están compuestas por una sección de cabecera, que
se define mediante la etiqueta <thead> , una sección de pie de tabla, definida mediante la etiqueta
<tfoot> , y por ultimo una o varias secciones de cuerpo de tabla, donde se suele ubicar los datos de la
misma, representada por la etiqueta <tbody> ., una sección de pie de tabla, definida mediante la
etiqueta <tfoot> , y por ultimo una o varias secciones de cuerpo de tabla, donde se suele ubicar los
datos de la misma, representada por la etiqueta <tbody> .
Las etiquetas de cabecera y pie de tabla siempre se han de definir antes que cualquier etiqueta de
cuerpo de tabla.
Se pueden realizar agrupaciones de columnas para aplicar un formato por separado o en común a las
mismas, para realizar estas agrupaciones se ha de utilizar la etiqueta <colgroup>, especificando a
continuación como su contenido y mediante la etiqueta <col>, las columnas y el ámbito de las
mismas sobre el cual se quiere aplicar el formato.
El siguiente ejemplo muestra el uso de las etiquetas avanzadas.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<tableborder="1" style=”width: 100%”>
<caption>Titulo de tabla</caption><colgroup>
<col style="width: 20%"/>
</colgroup>
<thead>
<tr>
<throwspan="2">Tabla Avanzada</th>
<thcolspan="2">Cabecera Múltiples Columnas</th>
</tr>
<tr>
<th>Primera Col. Cab.</th>
<th>Segunda Col. Cab.</th>
</tr>
</thead>
<tfoot>
<tr>
<tdcolspan="3">Pie de tabla.</td>
</tr>
</tfoot>

90
<tbody>
<tr>
<th>Fila 1</th>
<td>Fila 1 Columna 1</td>
</tr>
<tr>
<th>Fila 2</th>
</tr>
</tbody>
</table>
</body>
</html>
NOTA: En primer lugar se han especificado estilos css para varios elementos de la tabla. El primero
de ellos en la propia etiqueta de la tabla, especificando que su ancho ha de ser el 100% del ancho de
visualización del navegador.
Como se puede observar en el ejercicio, se ha definido un grupo de columnas mediante la etiqueta
<colgroup>, y en el interior de la misma se han especificado los anchos de tres columnas mediante la
etiqueta <col>, representando cada etiqueta el orden de la columnas, de esta forma la primera
columna tiene un ancho del 20% y las dos siguientes columnas tienen un ancho del 40% cada una.
A continuación se especifica el encabezado de la tabla mediante la etiqueta <thead>, y seguidamente
el pie de la tabla, mediante la etiqueta <tfoot>, una vez especificados encabezado y pie, se especifica
el cuerpo de la tabla mediante la etiqueta <tbody>, la cual contiene las filas y columnas de datos.
Recuerda…
Mediante el atributo CLASS se puede aplicar una referencia para un estilo.
Mediante el atributo TITLE se específica un texto informativo sobre el elemento.
El atributo HIDDEN es compatible con todos los navegadores excepto con Internet Explore.

91
5. ESTRUCTURAS BÁSICAS
5.1. Etiqueta UL
La etiqueta <ul>, permite definir una lista desordenada (“UnorderedList”). Esta etiqueta es a su vez
contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de los elementos
de los que está compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de
especificar el texto que compone el elemento de la lista.
Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.
<ul>
<li> Elemento de la lista</li>
<li>Elemento de la lista</li>
<ul>...<ul>
</ul>
<!DOCTYPE HTML>
<html>
<head>
<title> Ejercicios prácticos HTML5 </title>
<meta name="generator" content="www.tudominio.com, Curso práctico HTML5"">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5"">
</head>
<body>
<p>Lista con elementos desordenados</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<p>Lista con sublistas anidadas</p>
<ul>
<li>Primero</li>
<li>Segundo</li>
<ul>
<li>Segundo Uno</li>
<li>Segundo Dos</li>
</ul>
</li>
<li>Tercero</li>
</ul>
</body>
</html>

92
El ejercicio anterior ha de mostrar un resultado similar al que se visualiza en la imagen siguiente.
5.2. Etiqueta OL
La etiqueta <ol>, permite definir listas o viñetas ordenadas (“OrderedList”), bien con numeración o
alfabéticamente. Esta etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las
que componen cada uno de los elementos de los que está compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li></li>, en la que se ha de
especificar el texto que compone el elemento de la lista.
Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.
<olreversedstart=”valor” type=”valor”>
<ul>...<ul>
</ol>

93
Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los siguientes.
type
El atributo type, permite especificar el tipo de orden que se de aplicar a la lista, estableciendo de
esta forma que la lista se represente mediante diferentes tipos de numeración.
Los diferentes valores que puede recibir este atributo son los siguientes:
Valor Descripción
1 Es el valor por defecto en caso de no especificarse el atributo.
Realiza la numeración de las lista utilizando valores numéricos.
(1,2,3…)
a Establece que la numeración de la lista se realice utilizando caracteres
alfabéticamente en letra minúscula. (a, b, c …)
A Establece que la numeración de la lista se realice utilizando caracteres
alfabéticamente en letra mayúscula. (A, B, C …)
i Establece que la numeración de la lista se realice utilizando numeración
en formato de números romanos en letra minúscula. (i, ii, iii, iv …)
l Establece que la numeración de la lista se realice utilizando numeración
en formato de números romanos en letra mayúscula. (I, II, III, IV …)
start
El atributo start, permite indicar el valor de inicio, por el cual ha de comenzar la lista ordenada,
siendo este un valor numérico, en caso de ser la lista ordenada de forma alfabética, el valor de inicio
que se exprese, se corresponderá con el orden el abecedario ASCII correspondiente.
La sintaxis de la etiqueta con el atributo es la siguiente.
<olreversedstart=”valor” type=”valor”>
<ul>...<ul>
</ol>
<olstart=”valor”>
<ul>...<ul>
</ol>

94
reversed
El atributo reversed, permite indicar que la numeración u orden que se haya establecido se
represente de forma inversa, si tuviéramos una lista con valor de inicio 1, 2, 3, sucesivamente, su
representación al encontrarse este atributo seria 3,2,1.
Es un atributo con valor booleano, en caso de aparecer el atributo en la etiqueta se aplica el valor.
La sintaxis del atributo aplicado a la etiqueta es la siguiente.
<olreversed>>
<ul>...<ul>
</ol>
El siguiente ejemplo muestra el uso de las listas ordenadas utilizando variaciones sobre la misma.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Lista ordenada numéricamente por defecto</p>
<ol>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<p>Lista ordenada alfabéticamente</p>
<oltype="a">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
<p>Lista con todos los atributos</p>
<oltype="I" start="10" reversed>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
</body>
</html>

95
El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la siguiente imagen.
5.3. Etiqueta DL
La etiqueta <dl>, permite definir lo que se denominan, listas de definición, las cuales a su vez están
compuestas por un término, y una definición.
Para realizar la lista se utilizan dos etiquetas más, la primera es </dt><//dt>, que permite especificar
el termino en la lista. Y otra etiqueta </dd></dd>, que permite especificar la definición.
La sintaxis de la lista con las etiquetas correspondientes, es la siguiente.
<dl>
<dt>Termino a definir </dt>
<dd>Definición del termino </dd>
<dt>Termino a definir </dt>
<dd>Definición del termino </dd>
</dl>
El siguiente ejemplo muestra el uso de la etiqueta, creando una lista de definición de términos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Listas de definición</p>
<dl>

96
<dt>BIOS </dt>
<dd>Basic Input Output System</dd>
<dt>RAM</dt>
<dd>Ramdon Access Memory</dd>
<dt>HTML5</dt>
<dd>Gracias por visitar www.tudominio.com</dd>
</dl>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que muestra a continuación.
5.4. Web semántica - Etiqueta DIV, SPAN y HEADER
Etiqueta <DIV> y <SPAN>
El lenguaje HTML5, define mediante etiquetas elementos dentro de un documento web. Estos
elementos pueden ser de dos tipos denominados, elementos de bloque y elementos en línea.
Su nombre es debido a la forma en que ocupan espacio dentro del documento que se está creando.
Un elemento en bloque significa que el elemento ocupa todo el ancho del documento disponible
produciendo un retorno de línea al final del mismo. Si se visualizarán los bordes alrededor del
elemento, un elemento en bloque quedaría de la siguiente forma en un documento:
Como se puede observar el elemento en bloque ocuparía todo el ancho de página del documento.
Los elementos en línea por el contrario solo utilizan el espacio que ocupan, observando la imagen
anterior el elemento en línea está insertando dentro de un elemento de bloque y tiene el tamaño
correspondiente al espacio que ocupa.

97
A continuación se muestra un ejemplo real de página en la cual se visualizan los bordes para varios
elementos en el cual se puede comprobar el espacio que ocupan cada tipo de elemento.
Las etiquetas <div> y <span>, no tienen ningún tipo de significado especial, solo que la primera se
define como un elemento de bloque y por tanto el navegador mostrara un salto de línea antes y
después de la misma. Mientras que la segunda es un elemento de línea.
Cuando se utilizan actualmente en un documento web, se pueden utilizar para establecer opciones
de formato mediante hojas de estilo a bloques completos o elementos individuales del documento.
Un uso muy común de las mismas era también para establecer el diseño del documento mediante
hojas de estilo. Aunque actualmente con la nueva versión de HTML5 que proporciona etiquetas para
establecer dicho diseño, se recomienda la utilización de las nuevas etiquetas en sustitución de div y
span.
La sustitución de las etiquetas div y span, por la nuevas etiquetas semánticas de HTML5, se ofrece
como alternativa recomendándose la utilización de las ultimas, pero muchos desarrolladores web,
siguen utilizando para establecer divisiones de sección, artículos, etc., en sus documentos las
etiquetas div y span. Aunque también todavía hay programadores que para maquetar el diseño del
documento siguen utilizando tablas, esta última opción ya no es recomendada por el consorcio W3C.
Las dos etiquetas en esta última versión del lenguaje no disponen de atributos que aplicar a las
mismas.
La sintaxis de las etiquetas es la siguiente:
<div> Contenido del bloque, Otras etiquetas, etc.</div>
<div>Contenido <span>del bloque</span> con elementos en línea</div>

98
El siguiente ejemplo muestra el uso de ambas etiquetas en un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1> Elementos de bloque y línea</h1>
<div style="color:#0000FF">
<h3> Encabezamiento de sección.</h3>
<p> Párrafo con formato aplicado. </p>
</div>
<div>
<p> Párrafo con formato <span style="color: blue">aplicado </span> a un
elemento en línea </p>
</div>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al mostrado en la imagen siguiente.
Etiqueta <HEADER>
La etiqueta <header>, es la primera de las nuevas etiquetas de HTML5, incluidas dentro de la
denominación de “web semántica”, que consiste en la utilización de estas etiquetas para la
estructura del documento, dotando al documento de sentido en su estructura y formato por el
nombre de las etiquetas.
Aunque no es obligatorio el uso de las mismas, si es recomendado. Ya que actualmente los
buscadores están empezando a dar importancia a la construcción semántica del documento web.
La finalidad de la etiqueta es la de especificar un encabezado dentro de un documento o sección. Se
suele utilizar como contenedor para el contenido de introducción o para enlaces de navegación.

99
Se pueden utilizar varios encabezados con esta etiqueta dentro de otras etiquetas semánticas.
Siempre y cuando estas no sean encabezados, pies de documento, o etiquetas de tipo encabezado
como la de dirección.
<header>
Contenido del encabezado …
</header>
El siguiente ejemplo muestra el uso de la etiqueta en un documento web con varias secciones
semánticas.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> Encabezamiento del documento.</h1>
<p> LoremIpsum es simplemente el texto de relleno de las imprentas y
de tal manera que logró hacer un libro de textos espécimen </p>
</header>
<section>
<h1> Encabezamiento de sección.</h1>
<p> No sólo sobrevivió 500 años, sino que también ingresó como texto de
relleno en documentos electrónicos, quedando esencialmente igual al
original. </p>
</section>
<article>
<header>
<h1> Encabezamiento de artículo..</h1>
</header>
<p> Fue popularizado en los 60s con la creación de las hojas "Letraset",
las cuales contenían pasajes de LoremIpsum, y más recientemente con
software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye
versiones de LoremIpsum. </p>
</article>
</header>
</body>
</html>

100
En el ejercicio anterior ha de mostrar un resultado similar al que se muestra a continuación.
5.5. Web semántica - Etiqueta NAV
La etiqueta <nav>, perteneciente también a las nuevas etiquetas semánticas. Permite especificar un
conjunto de vínculos o enlaces de navegación.
No significa que todos los enlaces de navegación por los documentos del sitio, hayan de estar
situados en el contenido de la etiqueta. Pero es una forma de agrupar opciones de navegación tipo
menú o mapas de enlaces del sitio.
<nav>
Contenido de la etiqueta
</nav>

101
El siguiente ejemplo muestra el uso de la etiqueta en un documento web, utilizando la misma para
establecer un menú de navegación. (70.html)
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> Enlaces de navegación</h1>
</header>
<nav>
<a href="#Inicio"> Inicio</a>
<a href="#Medio"> Medio </a href="#Inicio">
<a href="#Final"> Final </a href="#Inicio">
</nav>
<section id="Inicio">
<header>
<h2> Inicio</h2>
</header>
<p> Y, viéndole don Quijote de aquella manera, con muestras de tanta
tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no
hace más que otro. Todas estas borrascas que nos suceden son. </p>
</section>
<header>
<h2> Medio</h2>
</header>
<p> Todas estas borrascas que nos suceden son señales de que presto ha de
serenar el tiempo y han de sucedernos bien las cosas; porque no es posible
que el mal ni el bien sean durables, y de aquí se sigue que, habiendo
durado mucho el mal, el bien está ya cerca. </p>
</section>
<header>
<h2> Final</h2>
</header>
<p> Así que, no debes congojarte por las desgracias que a mí me suceden,
pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella
manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es
un hombre más que otro si no hace más que otro. </p>
</section>
</body>
</html>

102
5.6. Web semántica - Etiqueta SECTION y ARTICLE
Etiqueta <SECTION>
La etiqueta <section>, pertenece también a las etiquetas semánticas, nuevas en HTML5, y permite
definir secciones en el documento como pueden ser capítulos encabezados, pies, o cualquier otro
tipo de sección en el documento.
La sintaxis de la etiquetases la siguiente.
<section> Contenido de la sección...
</section>

103
El siguiente ejemplo muestra el uso de ambas etiquetas en un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> Secciones</h1>
</header>
<section id="Izquierda">
<header>
<h2> Inicio</h2>
</header>
<p> Loremipsum dolor sitamet, consectetueradipiscingelit. Aenean commodo
ligulaeget dolor. Aeneanmassa. </p>
</section>
<section id="Derecha">
<p> Cum sociisnatoquepenatibus et magnisdisparturient montes,
nasceturridiculus mus. Donecquamfelis, ultriciesnec, pellentesqueeu,
pretiumquis, sem. </p>
</section>
<section id="Pie">
<p> Nullaconsequatmassaquisenim. Donecpede justo, fringillavel,
aliquetnec, vulputateeget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. </p>
</section>
</body>
</html>
El anterior ejemplo ha de mostrar un resultado similar al que se muestra a continuación en la
imagen.

104
Etiqueta <ARTICLE>
La etiqueta <article>, permite especificar contenido independiente o autónomo. De forma que
debería que ser posible distribuir el mismo independientemente del resto del documento web.
Perteneciente también la etiqueta a las denominadas semánticas.
Se indica que su posible utilización podría ser para mensajes de foros, noticias, artículos de blog,
comentarios, etc.
<article>
Contenido del artículo …
</article>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> Utilización de artículos </h1>
</header>
<section>
<header>
<h1> Principio de sección</h1>
</header>
tristeza, le dijo:
Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
</p>
</section>
<article>
<header>
<h1> Articulo </h1>
</header>
<p> FSed ut perspiciatisundeomnis iste natus error
sitvoluptatemaccusantiumdoloremquelaudantium, totam rem aperiam,
eaqueipsaquae ab illo inventoreveritatis et quasiarchitectobeatae vitae
dicta suntexplicabo. </p>
</article>
</body>
</html>

105
El anterior ejemplo ha de mostrar un resultado similar al que se muestra a continuación.
5.7. Web semántica - Etiqueta ASIDE y FIGURE
Etiqueta <ASIDE>
La etiqueta <aside>, permite definir contenido al margen del contenido principal, que mantenga
relación con el mismo.
<aside>
Contenido relacionado con el principal …
</aside>

106
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1> Utilización de aside</h1>
<section id="Principal""><h1> Sección</h1>
tristeza, le dijo:
Sábete, Sancho, que no es un hombre más que otro si no hace más que
otro.</p>
</section>
<aside>
<h3> Aparte </h3>
<section id="Principal""><h1> Sección</h1>
<p> Así que, no debes congojarte por las desgracias que a mí me suceden,
pues a ti no te cabe</p>
</aside>
</body>
</html>

107
Etiqueta <FIGURE>
La etiqueta <figure>, perteneciente a las nuevas etiquetas semánticas. Permite especificar contenido
autónomo como pueden ser ilustraciones, diagramas, fotos, listas de código, etc.
Aunque el contenido de la etiqueta debe guardar relación el contenido principal, la posición de la
etiqueta se considera independiente, por tanto si se quitara la misma, no debería quedar afectado el
contenido principal.
Junto a la etiqueta, se suele utilizar otra etiqueta denominada <figcaption> </figcaption> , la cual
permite especificar una denominación o nombre para la figura insertada. Esta última etiqueta se ha
de situar bien como primer elemento de contenido de la etiqueta <figure>, o como último elemento
de la misma.
<figure>
<figcaption> Denominación de la figura </figcaption>
Contenido de la figura … </figure>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> Utilización de figure </h1>
</header>
<section id="Principal">
<header>
<h1> Sección </h1>
</header>
ligula eget dolor. Aeneanmassa. </p>
<figure>
<figcaption> Logotipo del lenguaje HTML5 </figcaption>
<img src="Temario/1461/images.png" title="logotipo html5" alt="logotipo
html5">
</figure>
</section>
</body>
</html>

108
El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la siguiente imagen.
5.8. Web semántica - Etiqueta FOOTER, TIME y DETAILS
Etiqueta <FOOTER>
La etiqueta <footer>, permite definir un pie de página de un documento o sección. Se recomienda
que el contenido de la etiqueta a de guardar relación con el elemento que la contiene.
Si se utiliza a pie de página, suele contener información relativa al autor del documento, copyright,
enlaces, términos de uso, información de contacto, etc.
Un documento web, puede contener varias etiquetas footer situadas en diferentes sitios,
correspondiéndose con secciones, artículos, etc.
<footer>
Contenido del pie …
</footer>

109
El siguiente ejemplo muestra el uso de la etiqueta en varios apartados de un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1>Utilización de footer</h1>
</header>
<header>
<h1> Sección</h1>
</header>
ligulaeget dolor. Aeneanmassa.</p>
</footer>
<footer>
<p> Cum sociisnatoquepenatibus et magnisdisparturient montes,
nasceturridiculus mus. Donecquamfelis, ultriciesnec, pellentesqueeu,
pretiumquis, sem. </p>
</footer>
<article>
<header>
<h1> Articulo </h1>
</header>
<p> Nullaconsequatmassaquisenim. Donecpede justo, fringillavel,
aliquetnec, vulputateeget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. </p>
<footer>
<p> Aeneanvulputateeleifendtellus. Aenean leo ligula, porttitoreu,
consequat vitae, eleifendac, enim. Aliquamlorem ante, dapibus in,
viverraquis, feugiat a, </p>
</footer>
</article>
<footer>
<h1> Pie de documento </h1>
<p> Nullamdictumfeliseupedemollispretium. Integertincidunt. Crasdapibus.
Vivamuselementumsempernisi. Aeneanvulputateeleifendtellus. Aenean leo
ligula, porttitoreu, consequat vitae, eleifendac, enim. Aliquamlorem ante,
dapibus in, viverraquis, feugiat a, </p>
</footer>
</body>
</html>

110
Etiqueta <TIME>
La etiqueta <time>, permite definir una hora con formato de 24 horas, o una fecha en formato
gregoriano, opcionalmente con un tiempo y desplazamiento de zona horaria.
Se debe de utilizar para establecer una codificación de fecha y hora, de forma legible para la
máquina. De manera que los agentes de usuario y motores de búsqueda, puedan establecer
recordatorios, eventos programados, o resultados de búsqueda más inteligentes.
<timedatetime=”valor”> Denominación de la figura </time>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> Días Festivos </h1>

111
</header>
<p> <time datetime="2013-11-01"> Halloween </time> </p>
<p> Reunión familiar <time datetime="2013-12-25"> Navidad </time> a las
<time> 10:00 </p> h. </p>
</section>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación.
Etiqueta <DETAILS>
La etiqueta <details>, permite definir contenido que el usuario puede visualizar u ocultar según le
interese. La etiqueta permite cualquier tipo de contenido, y para visualizar el mismo se ha de realizar
un clic sobre el símbolo correspondiente en el navegador, para que la etiqueta muestre su contenido,
ya que por defecto y si no se especifica lo contrario se establece como oculto.
<details open>
<summary> Titulo del contenido </summary>
Contenido de la etiqueta …</details>
La etiqueta tiene solo un atributo, open, si se especifica el contenido de la etiqueta se muestra visible
al cargar el documento web. Es un atributo booleano, por lo tanto solo está activado en caso de
reflejarse el mismo en la etiqueta, por defecto no se suele utilizar.
Por otra parte, para que se visualice como título de la etiqueta, sirviendo a su vez de texto de
referencia, para visualizar o no el contenido, se utiliza la etiqueta <summary> </summary>, en la que
se ha de teclear el título que se desea visualizar, esta etiqueta de título ha de ser la primera etiqueta
del contenido de la etiqueta <details>.

112
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1> Páginas webs interesantes </h1>
<details>
<summary> Buscadores </summary>
<ul>
<li> <a href="http://www.google.es"> Google </a> </li>
<li> <a href="http://www.bing.es"> Bing </a> </li> </ul>
</details>
<details>
<summary> Educación </summary>
<ul>
<li> <a href="http://www.tudominio.com"> Información online </a> </li>
<li> <a href="http://manualesimaginarios.com"> Libros </a> </li> </ul>
</details>
</body>
</html>
Recuerda…
La web semántica consiste en:
* Dotar al documento de sentido en estructura y formato.
* Usar etiquetas para la estructura del documento.
Para crear una lista desordenada se utiliza la etiqueta UL.
La etiqueta que especifica un conjunto de enlaces de navegación es NAV.

113
6. AUDIO Y VÍDEO
6.1. Etiqueta AUDIO
La etiqueta <audio>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un
archivo de audio.
Actualmente se pueden reproducir tres tipos de formato de audio, mp3, wav y ogg. Aunque también
depende del navegador que se permita su reproducción.
La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores.
Navegador MP3 Wav Ogg
Internet Explorer SI NO NO
Chrome SI SI SI
Firefox SI SI SI
Safari SI SI NO
Opera NO SI SI
<audio autoplay controls loop muted preload=”valor” src=”valor”>
Texto para navegadores que no soportan audio… <audio>
Entre los atributos de la etiqueta encontramos los siguientes:
src
caso el archivo que contiene el audio a cargar en el documento web.
Se ha de especificar el archivo de audio con el formato adecuado para el navegador donde se vaya a
reproducir el audio.
Como esta opción no es predecible por el desarrollador y depende del usuario final. Se recomienda
utilizar la etiqueta <source>, dentro de la etiqueta de audio, para especificar diferentes formatos, de
forma que el navegador utilizado cargue la primera que sea capaz de reconocer.

114
autoplay
El atributo permite especificar que el archivo de audio sea reproducido automáticamente, al ser el
archivo cargado por el navegador.
Es un atributo booleano, por tanto para que se ejecute el audio simplemente se ha de especificar el
atributo en la etiqueta.
controls
El atributo es booleano, por lo que al ser especificado en la etiqueta, permite que se visualicen los
controles de control de audio, entre los que se encuentran, el botón de reproducción, pausa,
búsqueda y volumen.
loop
Si se especifica el atributo, el archivo de audio es reproducido automáticamente en modo bucle,
cuando finalice el audio volverá a empezar de nuevo.
muted
Al especificar el atributo, el archivo de audio será cargado, pero se activara la opción de silenciar el
audio.
preload
El atributo tiene tres valores posibles valores: none, auto y metadata. El atributo permite definir si se
realiza una precarga inicial del archivo de audio.
Si se especifica el valor none, no se realiza ningún tipo de precarga y se espera que el usuario sea el
que active el audio pulsando sobre el control correspondiente.
Si se indica el valor auto, se realiza la precarga completa del archivo de audio, para que la
reproducción sea más homogénea y no se produzcan paros o saltos en la misma. Se ha de utilizar si
no se compromete la velocidad de descarga entre el cliente y servidor.
Por ultimo si se especifica el valor metadata, se realiza como precarga solo la información
concerniente al archivo de audio, como duración, dimensión, etc.
Se ha de tener en cuenta que para realizar una carga correcta del formato de audio, se habría de
utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de audio en varios formatos.
Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se
utilice la misma.
Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de
audio. Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME del archivo que se
quiere reproducir.

115
Entre los posibles tipos a utilizar por este último atributo <type> se encuentran los siguientes:
Valor MIME Audio/Video
video/ogg Video
video/mp4 Video
video/webm Video
audio/ogg Audio (*.ogg)
audio/mpeg Audio (*.mp3)
El siguiente ejercicio muestra el uso de la etiqueta en un documento web.
<!DOCTYPE HTML>
<html>
<head>
<meta name="generator" content="www.tudominio.com, Curso práctico HTML5">
</head>
<body>
<audio controls>
<source src="Temario/1461/lonesome.mp3" type="audio/mpeg"><source
src="Hoy.ogg" type="audio/ogg"> El Navegador NO SOPORTA AUDIO.
</audio>
</body>
</head>

116
6.2. Etiqueta VIDEO
La etiqueta <video>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un
archivo de video.
Actualmente se pueden reproducir tres tipos de formato de video, mp4, WebM y ogg. Aunque
también depende del navegador que se permita su reproducción.
La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores.
Navegador MP4 WebM Ogg
Chrome SI SI SI
Firefox SI SI SI
Safari SI NO NO
Opera NO SI SI
<videoautoplaycontrolsloopmutedpreload=”valor” src=”valor” poster=”valor”
width=”valor height=”valor””>
Texto para navegadores que no soportan video… <video>
Entre los atributos de la etiqueta encontramos los siguientes:
src
caso el archivo que contiene el video a cargar en el documento web.
Se ha de especificar el archivo de video con el formato adecuado para el navegador donde se vaya a
reproducir el video.
Como esta opción no es predecible por el desarrollador y depende del usuario final. Se recomienda
utilizar la etiqueta <source>, dentro de la etiqueta de video, para especificar diferentes formatos, de
forma que el navegador utilizado cargue la primera que sea capaz de reconocer.

117
autoplay
El atributo permite especificar que el archivo de video sea reproducido automáticamente, al ser el
archivo cargado por el navegador.
Es un atributo booleano, por tanto para que se ejecute el video simplemente se ha de especificar el
atributo en la etiqueta.
controls
El atributo es booleano, por lo que al ser especificado en la etiqueta, permite que se visualicen los
controles de control de video, entre los que se encuentran, el botón de reproducción, pausa,
búsqueda y volumen, pantalla completa, subtítulos y pista.
loop
Si se especifica el atributo, el archivo de video es reproducido automáticamente en modo bucle,
cuando finalice el video volverá a empezar de nuevo
muted
Al especificar el atributo, el archivo de video será cargado, pero se activara la opción de silenciar el
video.
preload
El atributo tiene tres valores posibles valores: none, auto y metadata. El atributo permite definir si se
realiza una precarga inicial del archivo de video.
Si se especifica el valor none, no se realiza ningún tipo de precarga y se espera que el usuario sea el
que active el audio pulsando sobre el control correspondiente.
Si se indica el valor auto, se realiza la precarga completa del archivo de video, para que la
reproducción sea más homogénea y no se produzcan paros o saltos en la misma. Se ha de utilizar si
no se compromete la velocidad de descarga entre el cliente y servidor.
Por ultimo si se especifica el valor metadata, se realiza como precarga solo la información
concerniente al archivo de audio, como duración, dimensión, etc.
height
El atributo permite especificar el alto del video que se quiere reproducir, expresando el valor en
pixeles.

118
width
El atributo permite especificar el ancho del video que se quiere reproducir, expresando el valor en
pixeles.
Se ha de tener en cuenta que para realizar una carga correcta del formato de video, se habría de
utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de audio en varios formatos.
Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se
utilice la misma.
Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de
audio. Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME del archivo que se
quiere reproducir. Entre los posibles tipos a utilizar por este último atributo se encuentran los
siguientes:
Valor MIME Audio/Video
video/ogg Video
video/mp4 Video
video/webm Video
El siguiente ejercicio muestra el uso de la etiqueta en un documento web.
<!DOCTYPE HTML>
<html>
<head>
<meta name="generator" content="www.tudominio.com, Curso práctico HTML5>
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5>
</head>
<body>
<video width="320" height="240" controls">
<source src="hoy.mp4" type="video/mp4">
<source src="hoy.ogg" type="video/ogg"> Su Navegador NO SOPORTA la
etiqueta VIDEO.
</video">
</body>
</html>

119
6.3. Etiqueta TRACK
La etiqueta <track>, permite especificar subtítulos “pistas de texto”, a los elementos de video y
audio.
Para realizar la visualización de los mismos esta etiqueta permite la inclusión de archivos especiales
que contienen el texto que se ha de visualizar mientras se reproducen los archivos multimedia.La
etiqueta se ha de incluir en el contenido de una de las etiquetas multimedia para audio o video. La
sintaxis de la etiqueta es la siguiente:
<Etiqueta Multimedia>
<track default kind=”valor” label=”valor” src=”valor” srclang=”valor>
</Etiqueta Multimedia>
Como se puede observar la etiqueta no tiene etiqueta de cierre.
Los atributos de la etiqueta son los siguientes:
Navegador MP3 Wav Ogg
Chrome SI SI SI
Firefox SI SI SI
Safari SI SI NO
Opera NO SI SI

120
La sintaxis de la etiqueta es la siguiente. Entre los atributos de la etiqueta encontramos los
siguientes.
src
caso el archivo que contiene el texto que se quiere utilizar como subtítulos.
El formato de archivo que se suele cargar es .vtt (“video track text”), es un formato especial de
archivo el cual comentaremos más adelante.
default
El atributo default permite especificar cuál es el archivo de subtítulos por defecto que se ha de
visualizar, en caso de existir varios archivos de subtítulos.
Es un atributo booleano, por tanto con solo especificar el atributo en la etiqueta el mismo es
aplicado.
label
El atributo permite especificar entre comillas, el titulo para la pista de texto que se está cargando.
loop
Si se especifica el atributo, el archivo de audio es reproducido automáticamente en modo bucle,
cuando finalice el audio volverá a empezar de nuevo.
kind
El atributo permite especificar según el valor que se indique varias opciones posibles para las pistas
de texto que se desean cargar. Entre los posibles valores se encuentran los siguientes.
Valor Descripción
captions
Define la traducción de diálogos y efectos de sonido. (Aptos para
personas con discapacidad auditiva.)
chapters
Define títulos de capítulos. Recomendable para navegación por
recursos multimedia.
descriptions Define una descripción textual del video que se está reproduciendo.
metadata Define contenido usado por scripts.
subtitles Define subtítulos. Utilizado para visualizar los subtítulos en un video.

121
srclang
El atributo define en su valor, utilizando los códigos de lenguaje, el lenguaje utilizado en la pista de
texto. El atributo es obligatorio si se utiliza en el atributo kind, el valor subtitles.
El archivo de pista de texto o subtítulos que se puede utilizar, es muy fácil de crear, ya que es un
archivo de texto plano, en el cual la primera línea ha de ser: WEBVTT
Y a continuación se añade en el archivo un salto de línea y lo que se denominan “cues”, que podemos
definir como los intervalos de tiempo, en los cuales se ha de visualizar el texto de los subtítulos
durante la reproducción del archivo multimedia.
Para crear un “cue” se ha de especificar un id, saltar a la línea siguiente y especificar a continuación
un rango de tiempo con el formato siguiente:
HH:MM:SS.MMM --> HH:MM:SS.MMM
Correspondiéndose el primer valor a inicio y el segundo a final, separados por espacios en blanco y
dos guiones con un símbolo de mayor.
Saltar de línea nuevamente y especificar la línea de texto que se quiere visualizar. Una vez escrita la
misma, se ha de dejar una línea en blanco, para poder escribir el siguiente “cue”. Este sería un
ejemplo de archivo de subtítulos con espacios de tiempo definidos en dos “cues”.
EJEMPLO: WEBVTT FILE
1
00:00:01.000 --> 00:00:05.500
Ejemplo de programación Android
2
00:00:06.200 --> 00:00:10.900
mediante una app
El siguiente ejemplo muestra el uso de la etiqueta en un documento web, visualizando subtítulos en
la reproducción de un video.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video width="640" height="480" controls">
<source src="hoy.mp4" type="video/mp4">
<track src="Temario/1461/subtitulos.vtt" kind="subtitles" srclang="es"
label="Spanish" /"> Su Navegador NO SOPORTA la etiqueta VIDEO.
</video">
</body>
</html>

122
NOTA: Tenga en cuenta que el elemento de pista no se puede utilizar desde una URL file://. Para ver
el funcionamiento de los elementos de pista, suba los archivos a un servidor web.
6.4. Etiqueta EMBED
La etiqueta <embed>, permite definir un contenedor para insertar una aplicación externa o un
contenido interactivo.
Es una etiqueta que no dispone de etiqueta de cierre por lo tanto solo se ha de utilizar la de
apertura, especificando los atributos dentro de la misma.
<embed src=”valor” type=”valor” width=”valor” height=”valor”>
La etiqueta hace uso de los siguientes atributos:
src
caso el archivo que contiene el objeto, animación, etc. Que se quiere utilizar.

123
type
<embed src=”valor” type=”ValorMime”>
Entre los tipos se puede encontrar el de objetos como flash “application/xshockwave-flash”, entre
otros.
width
El atributo permite especificar el ancho que ha de tener el contenedor del objeto que se quiere
insertar, expresando el valor en píxeles.
height
El atributo permite especificar el alto que ha de tener el contenedor del objeto que se quiere
insertar, expresando el valor en píxeles.
El siguiente ejemplo muestra el uso de la etiqueta en un documento web, visualizando una
animación realizada en flash.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<p>Inserción de objeto embebido FLASH</p>
</header>
<embed src="Temario/1461/scrollbar.swf" type="application/x-shockwave-
flash>
</body>
</html>

124
6.5. Etiqueta OBJECT
La etiqueta <object>, permite definir la inserción de un objeto incrustado dentro del documento
web. Se utiliza para insertar elementos multimedia como audio, video, applets de java, activex, pdf y
flash.
También es posible utilizar la etiqueta para insertar otras páginas web, dentro del propio documento.
Y si se quisieran pasar parámetros a los objetos incrustados se podría utilizar la etiqueta <param>,
que permite realizar esta acción.
El texto que se pueda teclear en el contenido de la etiqueta, se utiliza para expresar información
sobre el navegador, indicando que no es capaz de reproducir el objeto.
<object data=”valor” width=”valor” height=”valor” name=”valor”
type=”valor” usemap=”valor”>
Texto alternativo para navegadores que no soporten la reproducción…
</object>
Los atributos que puede utilizar la etiqueta son los siguientes:
width
El atributo permite especificar el ancho que ha de tener el contenedor del objeto que se quiere
insertar, expresando el valor en pixeles.

125
height
El atributo permite especificar el alto que ha de tener el contenedor del objeto que se quiere
insertar, expresando el valor en pixeles.
data
caso el archivo que contiene el objeto, animación, etc. Que se quiere utilizar.
name
El atributo permite especificar el nombre que se quiere aplicar al objeto insertado, para de esta
forma poder referenciarlo posteriormente, si se utilizara algún lenguaje de cliente.
type
<object data=”valor” type=”ValorMime”>
Entre los tipos se puede encontrar el de objetos como flash “application/xshockwave-flash”, entre
otros, consulte los tipos correspondientes al objeto a insertar en el enlace proporcionado
anteriormente.
El siguiente ejemplo hace uso de la etiqueta en un documento web, insertando un objeto de tipo
flash.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<p>Inserción de objeto FLASH</p>
</header>
<object width="400" height="200" data="scrollbar.swf"> </object>
</body>
</html>

126
Recuerda…
Existe, de momento, soporte HTML5 para audio en codecs libres en MP3 Vorbis.
La etiqueta de audio es un soporte nativo de audio.
La etiqueta de video de HTML5 es un soporte nativo de video.
LOS formatos de Audio/Vídeo que se admite son: Mp4, ogg, Flv y webm.

127
7. FORMULARIOS EN HTML
La mayoría de los ejercicios planteados tienen como objetivo mandar datos a otro archivo que
procese la información recogida por el formulario. En estos ejemplos se usan ficheros de lenguaje
dinámico PHP, por lo que para poder comprobar tales acciones sobre los datos (ej: codificación o
envío mediante post), se deben tener conocimientos de algún tipo de lenguaje dinámico (PHP ó ASP)
y ejecutarlos en un servidor web.
7.1. Etiqueta FORM
La etiqueta <form>, permite definir un formulario de datos, utilizados para traspasar datos al
servidor.
Un formulario puede contener a su vez, elementos de entrada como pueden ser campos de texto,
casillas de verificación, botones de radio, botones de envió, listas de selección, areas de texto, etc.
Los formularios permiten que el usuario pueda introducir datos en el documento web, para que
posteriormente estos datos sean enviados y tratados por el servidor, para almacenarlos en una base
de datos, interactuar con el usuario, geolocalización, etc.
La etiqueta tiene la siguiente sintaxis.
<form accept-charset=”valor” action=”valor” autocomplete=”valor”
enctype=”valor” method=”valor” name=”valor” novalidate target=”valor”>
Etiquetas de control de petición de datos del formulario … </form>
Los atributos que puede utilizar la etiqueta son los siguientes:
accept-charset
Este atributo permite establecer el conjunto de caracteres que ha de utilizar el formulario para el
envió de información al servidor. Si no se establece el atributo se toma por defecto el valor
“UNKNOWN” (“Desconocido”), el cual aplica el conjunto de caracteres que tenga aplicado el
documento web.
La sintaxis para definir esta etiqueta con el atributo accept-charset es la siguiente:
<form accept-charset = “conjunto de caracteres “>
Contenido del formulario … </form>
Los conjuntos de caracteres que más se suelen utilizar son UTF-8 y ISO8859-1, que se corresponden
con la codificación Unicode y el juego de caracteres para el alfabeto Latín.

128
El siguiente ejemplo establece un juego de caracteres Unicode para el formulario.
<html>
<head>
<title>Tudominio, Ejercicios HTML
</head>
<body>
<form accept-charset=”UTF-8” action=”recepcion.php”>
<label>Nombre</label>
<input type=”text” name=”nombre”>
<input type=”submit” name=”enviar” value=”enviar”>
</form>
</body>
</html>
action
El atributo permite especificar donde han de ser enviado los datos del formulario, cuando este es
enviado.
Normalmente suele ser un documento web, escrito en un lenguaje de programación de servidor, el
cual se encarga de procesar los datos.
Se ha de especificar la ruta relativa o absoluta al recurso encargado de procesar la información.
La sintaxis de la etiqueta con el atributo es la siguiente.
<form accept-charset=”valor” action=”URL”>
Contenido del formulario …
</form>
El siguiente ejemplo muestra el uso del atributo en un documento web, enviando los datos a un
archivo php que encargaría de procesar la información del formulario.
<form accept-charset=”UTF-8” action=”recepcion.php”>
<input type=”submit” name=”enviar” value=”enviar”></form>

129
autocomplete
El atributo especifica que el formulario pueda utilizar las entradas de datos anteriores que pueda
haber realizado el usuario, para autocompletar los campos que son solicitados por el formulario.
Se puede establecer como valores posibles on, que indica la activación. Y off, indicando que el auto
completado estaría desactivado.
Si se establece el valor del atributo como activado, se pueden indicar campos del formulario como
desactivados y viceversa.
<form accept-charset=”valor” action=”URL” autocomplete=”valor”>
Contenido del formulario …
</form>
El siguiente ejemplo muestra el uso del atributo.
<form accept-charset=”UTF-8” action=”recepcion.php” autocomplete=”on”>
<input type=”submit” name=”enviar” value=”enviar”></form>
enctype
El atributo permite especificar como han de ser codificados los datos del formulario, cuando este es
enviando. Solo se debe utilizar cuando el atributo method, tiene asignado un valor “POST”.
Los posibles valores para el atributo son los siguientes:
Valor Descripción
application/x-www-
form-urlencoded
Es el valor predeterminado por defecto. Todos los caracteres son
codificados, los espacios en blanco son convertidos en símbolos
“+”, y los caracteres especiales, convertidos a sus valores
hexadecimales en ASCII.
multipart/form-data
Los datos no son codificados, se ha de utilizar cuando se envíen
archivos asociados al formulario, con el control de carga de
archivos.
text/plain
Los datos son codificados, convirtiendo los espacios en blanco en
símbolos “+”, mientras que los caracteres especiales no son
convertidos.

130
El siguiente ejemplo muestra el uso del atributo.
<form action="procesar_datos.php" method="post" enctype="multipart/form-
data">
Nombre: <input type="text" name="nombre"><br>
Apellidos: <input type="text" name="apellidos"><br>
<input type="submit" value="enviar">
</form>
method
El atributo permite especificar la forma o método de envió de los datos contenidos en el formulario.
Los valores para el atributo son GET, o POST.
El primer valor del atributo, el valor GET, envía los datos del formulario utilizando la url, por lo tanto
los datos son añadidos a la dirección url mediante valores tipo nombre/valor, no se recomienda
utilizar este método cuando los datos son sensibles a la seguridad, ya que los valores son mostrados
en la barra de direcciones del navegador. Y también la cantidad de información que se puede enviar
por este método está limitada cerca de los 3000 caracteres.
El segundo valor del atributo, el valor POST, por el contrario no tiene limitación de tamaño y los
datos son enviados dentro de la petición HTTP, del atributo action. Por lo tanto los datos no son
visibles en su envió y la seguridad de los mismos se mantiene intacta.
El siguiente ejemplo muestra el uso del atributo en un formulario.
<form action="procesar_datos.php" method="post">
DNI: <input type="text" name="apellidos"> <br>
<input type="submit" value="enviar"></form>
name
El atributo permite especificar el nombre que se quiere asignar al formulario o los datos que se
solicitan en el mismo. El nombre puede ser utilizado posteriormente bien por lenguajes clientes, para
interactuar con el formulario, bien con lenguajes de servidor para procesar los datos recibidos.
El siguiente ejemplo muestra el uso del atributo aplicado al formulario y datos del mismo.
<form action="envio_datos.php" method="get" name="Formulario1">
Dirección: <input type="text" name="direccion"><br>
<input type="submit" value="enviar" name="enviar">
</form>

131
novalidate
El atributo permite especificar que los datos del formulario no sean validados, según las
características de los campos utilizados en el formulario, de esta forma el formulario envía los datos
sin realizar ningún tipo de comprobación sobre los datos.
Es un atributo booleano, por lo tanto su aparición en la etiqueta de formulario, hace que se active el
mismo. El siguiente ejemplo muestra el uso del atributo.
<form action="envio_datos.php" method="get" name="Formulario1" novalidate>
Dirección: <input type="text" name="direccion"><br>
<input type="submit" value="enviar" name="enviar"></form>
target
documento web.
<a href=”valor”” target=”valor”>Texto del enlace</a>
Target Descripción
_blank Especifica que el destino sea una nueva ventana del navegador,
o una nueva pestaña.
_self Por defecto. Abre el destino en el mismo lugar donde se haya
realizado el clic.
El siguiente ejemplo muestra el uso del atributo target en un formulario.
<form action="graba_datos.php" method="get" target="_blank">
Direccion: <input type="text" name="direccion"><br>
<input type="submit" value="Enviar" name="enviar"></form>

132
7.2. Etiqueta INPUT
La etiqueta <input>, es una de las etiquetas más importante para la solicitud de datos mediante
formularios, ya que es la que permite especificar los tipos de datos que se quieren solicitar para su
posterior envió.
La etiqueta permite mediante uno de sus atributos especificar el tipo de dato a solicitar, de forma
que se pueda componer un formulario que solicite los datos acordes a una estructura idónea para la
recepción de los mismos por parte del servidor.
También establece las reglas de validación de los datos, de forma que se reduce considerablemente
por parte del programador, el análisis de los datos enviados para su posterior corrección en caso de
ser incorrectos.
<input accept=”valor” alt=”valor” autocomplete=”valor” autofocus checked
disabled form=”valor” formaction=”valor” formenctype=”valor”
formmethod=”valor” formnovalidate formtarget=”valor” height=”valor”
list=”valor” max=”valor” min=”valor” multiple name=”valor” pattern=”valor”
placeholder=”valor” readonly required size=”valor” src=”valor”
step=”valor” value=”valor” width=”valor” type=”valor”>
Entre sus atributos encontramos los siguientes:
accept
El atributo se utiliza específicamente para los datos de entrada de tipo file, y permite especificar los
tipos de archivos que acepta el servidor que recibe los datos. No realiza la validación de los archivos
enviados comprobando su tipo y es en la recepción de los mismos donde se habría de procesar su
tipo correcto. La sintaxis del atributo es la siguiente.
<input type=”file” accept=”valor”>
Valor del atributo Descripción
audio/* Todos los archivos de audio son aceptados.
video/* Todos los archivos de video son aceptados.
image/* Todos los archivos de imagen son aceptados.
MIME Tipo Se ha de especificar un valor de tipo MIME, sin parámetros. Consultar
los tipos MIME en el enlace proporcionado anteriormente en el libro.

133
El siguiente ejemplo muestra el uso del atributo en un formulario, que solicita un archivo de tipo
imagen.
<!DOCTYPE HTML>
<html>
<head>
<meta name="generator" content="www.tudominio.com, Curso práctico
HTML5"">
</head>
<body>
<form action="graba_datos.php" method="post" enctype="multipart/form-
data">
Nombre: <input type="text" name="nombre"> <br>
Direccion: <input type="text" name="direccion"> <br>
Fotografía: <input type="file" name="fotografia" accept=”image/*”> <br>
<input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>
alt
El atributo alt, permite especificar un texto alternativo para la imagen. Este texto alternativo es
visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el usuario
utiliza un lector de pantalla.
Se puede especificar siempre y cuando el tipo de dato que se solicita, sea de tipo image, según se
haya especificado en el atributo type.

134
<input type=”image” alt=”Texto alternativo”>
El siguiente ejemplo muestra el uso del atributo en un formulario, que entre sus datos hay un tipo
imagen.
<!DOCTYPE HTML>
<html>
<head>
HTML5"">
</head>
<body>
<form action="graba_datos.php" method="post" ">
Direccion: <input type="text" name="direccion"> <br>
<input type="image" src="envio.jpg" alt="Enviar datos del formulario.">
</form>
</body>
</html>
El ejercicio anterior ha de mostrar un resultado similar al que se muestra en la imagen siguiente.

135
autocomplete
El atributo especifica que el dato solicitado pueda utilizar las entradas de datos anteriores que pueda
haber realizado el usuario, para autocompletar el campo que se está solicitando.
Se puede establecer como valores posibles on, que indica la activación. Y off, indicando que el auto
completado estaría desactivado.
<input type=”valor” autocomplete>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="enviar.php" autocomplete="on" ">
Apellidos: <input type="text" name="apellidos"> <br>
E-mail: <input type="email" name="email" autocomplete="off"> <br>
<input type="submit">
</form>
</body>
</html>
autofocus
El atributo permite especificar cuál es el control que recibe el “foco”, cuando se realiza la carga del
documento web en el navegador. Es un atributo booleano y solo con aparecer significa que está
activado.
Se ha de tener en cuenta que este atributo solo se puede especificar en un solo dato dentro del
formulario, ya que el cursor se ha de situar en el mismo cuando se produzca la carga de la página, y
como es lógico no se puede situar el cursor en varios sitios a la vez.
<input type=”valor” name=”valor” autofocus />

136
<!DOCTYPE HTML>
<html>
<head>
HTML5"">
</head>
<body>
Apellidos: <input type="text" name="apellidos" autofocus> <br>
<input type="submit" name="enviar" value="enviar">
</form>
</body>
</html>
checked
El atributo se puede utilizar en el caso de que en el atributo type, se haya especificado un tipo de
dato checkbox, o radio. Y permite especificar que el campo sobre el cual se aplica aparezca
inicialmente marcado, cuando se realiza la carga del documento web.
< input type=”checkbox|radio” checked>

137
<!DOCTYPE HTML>
<html>
<head>
HTML5"">
</head>
<body>
Vehiculo: <br>
<input type="checkbox" name="vehiculo" value="Bicicleta"> Bicicleta <br>
<input type="checkbox" name="vehiculo" value="Coche" checked> Coche <br>
</form>
</body>
</html>
disabled
El atributo especifica que el elemento sobre el que se aplica, se ha de desactivar. Un elemento
desactivado está bloqueado y no se puede cambiar ni realizar clic sobre el mismo.
Es un atributo booleano con lo cual simplemente para activar la opción se ha de incluir en la
etiqueta. La sintaxis del atributo es la siguiente.
< input type=”valor” disabled checked>

138
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Nombre: <input type="text" name="nombre" disabled> <br>
</form>
</body>
</html>

139
7.3. Atributos - form, formaction y formenctype
form
El atributo permite especificar a qué formulario pertenece el campo que se está solicitando
especificando el atributo identificador del formulario. De esta forma se puede situar un campo
incluso fuera del formulario, pero indicando que pertenece a un formulario concreto, de manera que
cuando los datos son enviados, se envía también el dato situado fuera del formulario.
< input type=”valor” form=”Identificador_del_formulario”>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="enviar.php" autocomplete="on" id="formulario1"
name="formulario1" method="get" >
Nombre: <input type="text" name="nombre" form="formulario1"> <br>
Apellidos: <input type="text" name="apellidos" form="formulario1"> <br>
<input type="submit" name="enviar" value="enviar" form="formulario1">
</form>
<br>
Teléfono: <input type="text" name="telefono" form="formulario1" autofocus>
<br> </body>
</html>
El resultado del ejercicio anterior ha de ser similar al que muestra en la imagen siguiente.

140
formaction
El atributo permite especificar una URL distinta de envió, sobrescribiendo la que aparece en el
atributo action, del formulario. De esta forma es posible situar diferentes botones de envió de
formulario, enviando los datos a diferentes sitios según se pulse un botón u otro.
El atributo se ha de utilizar cuando el atributo type, del campo tenga un valor submit, o image.
< input type=”submit|image” formaction=”URL Destino” >
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="envio.php" method="get" id="formulario1" >
<input type="submit" value="Enviar" />
<input type="submit" formaction="envio_admin.php" value="Enviar
Administración">
<br> </body>
</html>

141
formenctype
El atributo permite especificar como han de ser codificados los datos del formulario, cuando este es
enviando. Se aplica solo a botones de formulario de tipo submit o image. Solo se debe utilizar cuando
el atributo method, tiene asignado un valor “POST”. El atributo sobrescribe el método de envió del
formulario, permitiendo enviar según el botón de envió que se pulse con un método de codificación
diferente a distintos sitios.
Valor Descripción
application/x-
www-form-
urlencoded
Es el valor predeterminado por defecto. Todos los caracteres son
codificados, los espacios en blanco son convertidos en símbolos “+”, y
los caracteres especiales, convertidos a sus valores hexadecimales en
ASCII.
multipart/form-
data
Los datos no son codificados, se ha de utilizar cuando se envíen archivos
asociados al formulario, con el control de carga de archivos.
text/plain Los datos son codificados, convirtiendo los espacios en blanco en
símbolos “+”, mientras que los caracteres especiales no son
convertidos.
< input type=”submit|image” formenctype=”valor” >

142
El siguiente ejemplo muestra el uso del atributo en un formulario, que solicita un archivo de tipo
imagen.
<!DOCTYPE HTML>
<html>
<head>
HTML5"">
</head>
<body>
<form action="envio.php" method="get" id="formulario1">
<input type="submit" formaction="envio_admin.php"
formenctpe="multipart/formdata" value="Enviar Administración">
</form>
</body>
</html>

143
7.4. Atributos - formmethod, formnovalidate y formtarget
formmethod
El atributo permite especificar la forma o método de envió de los datos contenidos en el formulario.
Los valores para el atributo son GET, o POST. Sobrescribe el método de envió asignado al formulario,
según el botón sobre el cual se pulse, se acepta el atributo en botones de envió del tipo submit o
image.
Las reglas de envió dependiendo del valor del atributo get o post, son las mismas comentadas en el
atributo method, de la etiqueta <form>.
<input type=”submit|image” formmethod=”valor” >
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
DNI: <input type="text" name="apellidos"><br>
Usuario: <input type="text" name="usuario"><br>
Password: <input type="password" name="contrasena"><br>
<input type="submit" formaction="envio_admin.php" formmethod="post"
value="Enviar Administración">
</form>
</body>
</html>
El resultado del ejemplo anterior ha de mostrar un resultado similar al de la imagen siguiente.

144
formnovalidate
El atributo permite especificar que los datos del formulario no sean validados, según las
características de los campos utilizados en el formulario, de esta forma el formulario envía los datos
sin realizar ningún tipo de comprobación sobre los datos.
El atributo se ha de utilizar sobre campos de tipo submit o image, y se superpone sobre el atributo
aplicado al formulario, permitiendo así la posibilidad de incluir botones de envió de datos, los cuales
no hagan validación de datos en el envió.
Es un atributo booleano, por lo tanto con solo su aparición en la etiqueta sobra para activarlo.
Aunque también es posible utilizar otras formas de sintaxis para el mismo, en el ejemplo se muestra
una variante adaptada a XHTML.
<input type=”submit|image” formnovalidate=”formnovalidate” >
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="submit" formaction="envio_admin.php"
formnovalidate="formnovalidate" value="Enviar Sin Validación"></form>
</body>
</html>

145
formtarget
documento web. El atributo se ha de aplicar a campos de tipo envió datos como submit o image, y
sobrescribe el destino aplicado al formulario con el atributo target.
<input type=”submit|image” formtarget=”valor”>
Entre los posibles valores que se le pueden aplicar al atributo formtarget, encontramos los
siguientes:
target Descripción
_blank Especifica que el destino sea una nueva ventana del navegador, o una
nueva pestaña.
_self Por defecto. Abre el destino en el mismo lugar donde se haya realizado
el clic.

146
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="envio.php" method="get" id="formulario1" target="_self">
<input type="submit" formaction="envio_admin.php" formtarget="_blank"
value="Enviar nueva ventana">
</form>
</body>
</html>

147
7.5. Atributos - height, width y name
height
El atributo height, permite especificar el alto de la imagen en pixeles. El atributo se aplica solo a
campos de tipo image, y se suelen utilizar para los botones de envió del formulario cuando en lugar
de botones normales se quiere visualizar iconos o imágenes representativos del envió de datos.
<input type=”image” height=”Valor En Pixeles”>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Nombre: <input type="text" name="nombre">
Apellidos: <input type="text" name="apellidos">
<input type="image" src="envio.jpg" height="128">
</form>
</body>
</html>

148
width
El atributo width, permite especificar el ancho de la imagen en pixeles. El atributo se aplica solo a
campos de tipo image, y se suelen utilizar para los botones de envió del formulario cuando en lugar
de botones normales se quiere visualizar iconos o imágenes representativos del envió de datos.
<input type=”image” width=”Valor En Pixeles”>
<!DOCTYPE HTML>
<html>
<head>
<meta name="generator" content="content="www.tudominio.com, Curso práctico
HTML5">
</head>
<body>
Apellidos: <input type="text" name="apellidos"><br>
<input type="image" src="envio.jpg" height="128" width=”100”>
</form>
</body>
</html>

149
name
El atributo permite especificar el nombre que se quiere asignar al campo del formulario. El nombre
puede ser utilizado posteriormente bien por lenguajes clientes, para interactuar con el formulario,
bien con lenguajes de servidor para procesar los datos recibidos.
<input type=”valor” name=”NombreCampo” >
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Fecha Nacimiento: <input type="date" name="fecha_nacimiento"><br>
</form>
</body>
</html>

150
7.6. Atributos - readonly, required y placeholder
readonly
El atributo permite especificar que un campo sea de solo lectura, es decir su contenido será visible y
podrá ser seleccionado, pero no se podrá modificar. Se suele utilizar en conjunto con lenguajes de
programación de cliente, para alterar el valor de solo lectura, cuando se cumplan ciertas condiciones
en los datos. Es un atributo booleano por tanto su sola aparición en la etiqueta hace que sea activado
el atributo.
<input type=”valor” readonly>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script> function Activar() {
document.getElementById("marca").readOnly=!document.getElementById("marca"
).readOnly;
}
</script>
Fecha Nacimiento: <input type="date" name="fecha_nacimiento"><br>
Vehículo: <input type="checkbox" name="vehiculo" onclick="Activar()"><br>
Marca: <input type="text" name="marca" readonly id="marca"><br>
</form>
</body>
</html>

151
required
El atributo aplicado a un campo permite especificar que la introducción de datos en el campo ha de
ser obligatorio, es decir no se puede dejar en blanco.
El atributo es booleano, por lo que simplemente su aparición en el campo lo activa. En caso de estar
activado el atributo en campo y la validación también activa, si campo está vacío en el momento de
su envió, se paraliza el envió y advierte de que el campo ha de rellenarse.
El atributo se puede aplicar a campos de tipo texto, búsqueda, url, fechas, email, contraseñas, casillas
de verificación, radios, números y ficheros.
<input type=”valor” required>
El siguiente ejemplo muestra el uso del atributo en un formulario de datos.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
<form action="envio.php" method="post" id="formulario1">
Apellidos: <input type="text" name="apellidos" required ><br>
</form>
</body>
</html>

152
placeholder
El atributo permite especificar un texto de ayuda informativo sobre el contenido que ha de tener el
campo. El texto se muestra cuando el campo está vacío y desaparece cuando se escribe algo en el
mismo.
El atributo se puede aplicar a campos de tipo texto, búsqueda, teléfono y correo electrónico.
<input type=”valor” placeholder=”Texto descriptivo del contenido”>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Nombre: <input type="text" name="nombre" placeholder="Teclee nombre
completo"><br>
Email: <input type="email" name="correo" placeholder="Correo:
xxx@xxx.xx"><br>
</form>
</body>
</html>

153
7.7. Atributos - value, size y maxlength
value
El atributo permite especificar el valor de un campo del tipo input. Si el atributo se aplica a
elementos de tipo button, reset o submit, especifica el texto del botón. Si se aplica a elementos de
tipo text, hidden, o password, especifica el valor del campo por defecto.
Para campos de tipo radio, checkbox e image, especifica el valor asociado al campo y es obligatorio
en los dos primeros. El atributo no se puede utilizar en campos de tipo file.
<input type=”valor” value=”Texto como valor del campo” >
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
completo"><br>
Email: <input type="email" name="correo" placeholder="Correo:
xxx@xxx.xx"><br>
Localidad: <input type="text" name="localidad" value="Elx" ><br>
</form>
</body>
</html>

154
size
El atributo permite especificar el ancho visible del campo en caracteres, de una etiqueta de tipo
input, siempre que sea de tipo text, search, url, email o password.
Aunque especifique el ancho visible de la caja del campo, este atributo no establece el número de
caracteres máximos que puede tener el mismo.
<input type=”valor” size=”Valor Numérico” >
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
completo" size="80"><br>
Email: <input type="email" name="correo" placeholder="Correo: xxx@xxx.xx"
size="90"><br>
Localidad: <input type="text" name="localidad" value="Elx" size="60"
><br>
Teléfono:<input type="tel" name="telefono" placeholder="Teléfono"
size="15"><br>
</form>
</body>
</html>

155
maxlength
El atributo permite especificar el número de caracteres máximos que se permite teclear en una
etiqueta de tipo input. La sintaxis del atributo es la siguiente.
<input type=”valor” maxlength=”Valor Numérico” >
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Nombre: <;input type="text" name="nombre" placeholder="Teclee nombre
completo" maxlength="60" size="80"><br>
maxlength="50" size="90"><br>
Localidad: <input type="text" name="localidad" value="Elx" size="60"
maxlength="60" ><br>
Teléfono: <input type="tel" name="telefono" placeholder="Teléfono"
size="15" maxlength="12"><br>
</form>
</body>
</html>

156
7.8. Atributos - src, max, min, step y multiple
src
El atributo src, permite especificar el origen de la imagen, para un campo de tipo image, es decir su
ubicación, bien mediante una ruta absoluta o relativa.
Las posibles formas de sintaxis para definir esta etiqueta con el atributo src son las siguientes:
<input type=”image” src=”URL Absoluta”>
<input type=”image” src=”URL Relativa”>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
maxlength="50" size="90"><br><br>
<input type="image" src="envio.jpg" width="64" height="64" ><br>
</form>
</body>
</html>

157
max, min, step
Los siguientes atributos permiten especificar los valores mínimos, máximos y los intervalos de los
valores numéricos o de fecha que se puede aplicar a un campo, siempre y cuando este sea de tipo
number, range, date, datetime, datetime-local, month, time y week.
Se ha de tener en consideración que para los campos que reflejan fechas, esta se ha de expresar en
formato americano, es decir año, mes, dia.
La sintaxis de los atributos es la siguiente.
<input type=”valor” min=”Valor Numérico” max=”Valor Numérico” step=”Valor
Numérico” >
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Edad: <input type="number" name="edad" min="18" max="78" step="1"
id="edad" ><br>
Fecha Nacimiento: <input type="date" min="1940-01-01" max="2013-01-01"
><br> Puntuación : <input type="number" min="0" max="20" step="2"
value="0" name="puntuacion" ><br>
<input type="submit" name="enviar" value="enviar datos">
</form>
</body>
</html>

158
multiple
El atributo permite especificar en campos de tipo file o email. Que se puedan introducir en el campo
uno o más valores.
Es un atributo booleano, por lo tanto la simple aparición del mismo en la etiqueta del campo, activa
la opción.
La sintaxis para el atributo es la siguiente.
<input type=”email|file” multiple>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Edad: <input type="number" name="edad" min="18" max="78" step="1"
id="edad" ><br>
Email: <input type="email" name="correo" placeholder="Teclee las
direcciones de email" size="90" multiple ><br>
<input type="submit" name="enviar" value="enviar datos"><br> </form>
</body>
</html>

159
7.9. Atributos - list y pattern
list
El atributo permite especificar una lista de datos, la cual será asociada al campo de forma que
cuando se introduzca el valor del mismo se pueda seleccionar uno de los datos especificados en la
lista simplemente seleccionándolo.
Para que funcione correctamente el atributo trabaja en asociación con la etiqueta <datalist>, la cual
permite especificar los datos que han de aparecen en la lista. Para especificar los datos de la lista en
el interior de la etiqueta se ha de utilizar otra etiqueta denominada <option>.
La sintaxis de la etiqueta <datalist>, es la siguiente.
<datalist id=”Identificador de la lista” >
<option value=”Opción de la lista”>
<option value=”Opción de la lista”>
…
</datalist>
La etiqueta <option>, tiene varios atributos asociados, como son:
 disabled, que específica que el valor esta desactivado.
 El atributo label que permite especificar un texto corto para la opción.
 El atributo selected, el cual predetermina el elemento seleccionado de la lista y
 El atributo value, el cual permite indicar el valor que será enviado al servidor como dato.
La sintaxis del atributo option es la siguiente.
<option label=”TextoCorto” disabled selected value=”ValorServidor”>Texto
visualizado al desplegarse la lista</option>
La sintaxis del atributo list es la siguiente.
<input type=”valor” list=”Nombre Identificador de la lista” >

160
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Vehículo Marca: <input type="text" name="marca" list="marcas" ><br>
<datalist id="marcas">
<option label="Volvo">Volvo (Latin for "I roll")</option>
<option label="Saab">Saab (Swedish Aeroplane AB)</option>
<option label="Mercedes">Mercedes (Mercedes-Benz)</option>
<option label="Audi">Audi (Auto Union Deutschland
Ingolstadt)</option></datalist>
</form>
</body>
</html>

161
pattern
El atributo permite especificar un “patrón” de entrada de datos en el campo sobre el que se aplica,
de forma que si el valor introducido no cumple el patrón especificado, el campo no será validado por
el formulario.
El atributo trabajo con los campos de tipo text, search, tel, email y password. Como recomendación
se indica que se utilice el atributo global title, para mostrar ayuda sobre el patrón de forma que el
usuario sepa como introducir el mismo.
Un patrón es una cadena de texto, compuesta por símbolos o caracteres, los cuales significan algo
según sean compuestos. Los patrones que se utilizan son los denominados “Patrones Javascript”, los
cuales se puede consultar su codificación en el siguiente enlace.
http://www.javascriptkit.com/javatutors/redev2.shtml
Aunque para la utilización dentro de los elementos de HTML5, es casi preferible consultar la
siguiente dirección, la cual propone los patrones según su utilización.
http://html5pattern.com/
<input type=”valor” pattern=”CadenaPatron” >

162
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Fecha: <input type="text" name="fecha1" pattern="(0[1-9]|1[0-9]|2[0-
9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" title="DD.MM.AAAA" ><br>
DNI: <input type="text" name="dni" pattern="[0-9]{8}-[a-zA-Z]{1}"
title="XXXXXXXXA"><br>
</form>
</body>
</html>

163
7.10. Atributos - type
El atributo permite especificar el tipo de campo que se quiere solicitar. El tipo por defecto que se
aplica en caso de no aparecer el atributo es text, aunque se recomienda que el atributo siempre se
especifique.
<input type=”Tipo de Campo”>
Los posibles valores del atributo son los siguientes:
Valor del
atributo/strong>
Descripción
button Define un botón sobre el que se puede realizar clic. Es
frecuentemente usado para activar scripts.
checkbox Define una casilla de verificación.
color Define un campo de tipo selector de colores.
date Define un campo de tipo fecha en formato año, mes, dia. No se ha
de especificar hora.
datetime Define un campo de tipo fecha y hora en formato año, mes, dia,
hora, minuto, segundo y fracción de segundo, basado en zona
horaria.
datetime-local Define un campo de tipo fecha y hora en formato año, mes, dia,
hora, minuto, segundo y fracción de segundo, sin base de zona
horaria.
email Define un campo de tipo correo electrónico.
file Define un campo de tipo selector de ficheros, el cual visualiza un
botón y presenta un cuadro de dialogo, donde se puede
seleccionar el/los ficheros a seleccionar.
hidden Define un campo de tipo oculto, normalmente son utilizados por
los desarrolladores para el envió de información al servidor.
image Define un campo de tipo botón de envió representado mediante
una imagen especificada.
month Abre el destino en el marco del cual se especifica el nombre.
number Define un campo de tipo numérico entero.
password Define un campo de tipo contraseña, este tipo de campo visualiza
normalmente asteriscos en vez de mostrar el contenido que se
teclea.

164
Valor del
atributo/strong>
Descripción
radio Define un botón de radio, para selección única, es decir seleccionar
una opción entre varias posibles.
range Define un campo de tipo deslizador, en el cual arrastrando el
mismo se selecciona un rango de valor numérico.
reset Define un campo de tipo botón de limpieza, el cual borra el
contenido de los campos del formulario.
search Define un campo de tipo búsqueda, para teclear una cadena de
búsqueda, no realiza búsquedas en el sitio.
submit Define un campo de tipo botón de envió, al pulsarlo se realiza el
envió del formulario.
tel Define un campo de tipo introducción de teléfono.
time Define un campo para la introducción de horas.
text Define un campo de tipo texto, el ancho por defecto del campo es
de 20 caracteres.
url Define un campo para la introducción de direcciones web (url’s).
week Define un campo para la introducción de semana y mes.

165
El siguiente ejemplo muestra el uso del atributo con un campo de tipo button.
<!DOCTYPE HTML>
<html>
<head>
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas,
HTML5">
</head>
<body>
<script> function mensaje() { alert("Hola Mundo, Aqui Estoy...");
}
</script>
<input type="button" value="Haz Clic" onclick="mensaje()">
</form>
</body>
</html>

166
7.11. Tipo checkbox, color y date
checkbox
El siguiente ejemplo muestra el uso del atributo con un campo de tipo checkbox.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Vehículos disponibles:<br>
<input type="checkbox" name="vehiculo" value="Bicicleta"> Bicicleta <br>
<input type="checkbox" name="vehiculo" value="Coche"> Coche<br>
</form>
</body>
</html>

167
color
El siguiente ejemplo muestra el uso del atributo con un campo de tipo color.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Seleccione su color favorito: <input type="color"
name="colorfavorito"><br>
</form>
</body>
</html>
El resultado ha de ser similar al que se muestra en la imagen siguiente.

168
date
El siguiente ejemplo muestra el uso del atributo con un campo de tipo color.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Seleccione Fecha Nacimiento: <input type="date" name="bday">
<input type="submit" name="enviar" value="enviar"><br> </form>
</body>
</html>

169
7.12. Tipo datetime y datetime-local, email y file
datetime y datetime-local
El siguiente ejemplo muestra el uso del atributo en un formulario con un campo de tipo datetime y
datetime-local.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
completo"
maxlength="60" size="80"><br>
Seleccione Fecha Nacimiento: <input type="datetime"
name="fechanacimiento"><br>
Seleccione Fecha de Inicio: <input type="datetime-local"
name="fechainicio"><br>
</form>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar a la imagen siguiente.

170
email
El siguiente ejemplo muestra el uso del atributo en un formulario con un campo de tipo email.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Correo: <input type="email" name="correo" title="xxx@xxxx.xx"
placeholder="xxxx@xxx.xx"><br>
</form>
</body>
</html>
El ejercicio anterior ha de mostrar un resultado similar al de la imagen siguiente.

171
file
El siguiente ejemplo muestra el uso del atributo en un formulario con un campo de tipo file.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Selecc. Archivo de fotografía: <input type="file" name="imagen" ><br>
</form>
</body>
</html>

172
7.13. Tipo hidden, image y month y week
hidden
El siguiente ejemplo muestra el uso del atributo en un formulario con un campo de tipo hidden.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Dirección: <input type="text" name="direccion" placeholder="Calle,No."
><br>
<input type="hidden" name="localidad" value="Elx" >
<input type="hidden" name="direccionweb" value="www.tudominio.com">
</form>
</body>
</html>

173
image
El siguiente ejemplo muestra el uso del atributo en un formulario con un campo de tipo image.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
><br>
<input type="image" src="envio.jpg" alt="Enviar datos" >
</form>
</body>
</html>

174
month y week
El siguiente ejemplo muestra el uso del atributo en un formulario con un campo de tipo month y
week.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
><br>
Mes de inicio: <input type="month" name="mes"><br>
Semana de inicio: <input type="week" name="semana"><br>
<input type="submit" name="enviar" value="Envió de información" >
</form>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado similar a la imagen siguiente.

175
7.14. Tipo number, password, radio y reset
number
El siguiente ejemplo muestra el uso del atributo type, en un formulario con un campo de tipo
number.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
><br>
Articulo: <input type="text" name="articulo" ><br>
Cantidad (entre 2 y 12. pares): <input type="number" name="cantidad"
min="2" max="12" step="2" value="2"><br>
<input type="submit" name="enviar" value="Envió de información" >
</form>
</body>
</html>

176
password
El siguiente ejemplo muestra el uso del atributo type, en un formulario con un campo de tipo
password.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Contraseña: <input type="password" name="contra"><br/>
</form>
</body>
</html>

177
radio y reset
El siguiente ejercicio muestra el uso del atributo type, en un formulario con un campo de tipo radio,
y otro de tipo reset.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Contraseña: <input type="password" name="contra"><br/>
Sexo: <input type="radio" name="genero" value="Masculino"> Masculino
<input type="radio" name="genero" value="Femenino"> Femenino <br/>
<input type="reset" name="limpiar" value="limpiar formulario">
</form>
</body>
</html>

178
7.15. Tipo range y search
range
El siguiente ejercicio muestra el uso del atributo type, en un formulario con un campo de tipo range.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Apellidos: <input type="text" name="apellidos"><br/>
Valoración: <input type="range" min="1" max="10" step="1"
name="valoracion" value="5"><br>
</form>
</body>
</html>

179
search
El siguiente ejemplo muestra el uso del atributo type, en un formulario con un campo de tipo search.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Búsqueda: <input type="search" name="buscar" placeholder="Teclee su
búsqueda"><br>
</form>
</body>
</html>

180
7.16. Tipo text, time y url
text y time
El siguiente ejercicio muestra el uso del atributo type, en un formulario con dos campos de tipos text
y time.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Hora de entrada: <input type="time" name="hora"><br>
</form>
</body>
</html>

181
url
El siguiente ejercicio muestra el uso del atributo type, en un formulario con un campo de tipo url.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
Dirección Web: <input type="url" name="direccionweb" placeholder="URL"
><br>
</form>
</body>
</html>

182
7.17. Etiqueta BUTTON, FIELDSET y LABEL
Etiqueta <BUTTON>
La etiqueta <button>, permite definir un botón sobre el cual se puede realizar pulsaciones de ratón.
Si la etiqueta se utiliza dentro de un formulario se pueden utilizar prácticamente los mismos
atributos que los explicados anteriormente para la etiqueta <input>, con el atributo type, con un
valor de button. Aunque se recomienda que para incluir botones en el formulario se utilice la
etiqueta <input>.
Por otra parte la utilización fuera de un formulario de la etiqueta se suele realizar para asociar el
botón a la ejecución de una función JavaScript. La diferencia con los botones de un formulario, es
que con esta etiqueta se pueden utilizar en el contenido de la etiqueta texto o imágenes.
Se recomienda que utilice el atributo type de la etiqueta para especificar el valor button, ya que
dependiendo del navegador el tipo por defecto para la etiqueta se puede interpretar de diferente
forma.
La sintaxis de la etiqueta utilizada fuera de un formulario es la siguiente.
<button type=”button”>Contenido del botón, Texto o imágenes</button>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script> function BotonNormal() { alert("Se ha pulsado el botón
normal.");
}
function BotonImagen() { alert("Se ha pulsado el botón de imagen.");
}
</script>
Utilización de botones
<button type="button" onclick="BotonNormal()">Botón
Normal</button><br><button type="button" onclick="BotonImagen()"><img
src="envio.jpg" width="32" height="32"></button><br>
</body>
</html>

183
Etiqueta <FIELDSET>
La etiqueta <fieldset>, se utiliza como contenido dentro de formularios. Y su función es la de realizar
grupos de campos dentro del formulario. Estos grupos de campos son representados mediante un
marco con borde alrededor de los campos contenidos en el grupo.
<fieldset disabled form=”valor” name=”valor”>
Campos que se quieren agrupar … </fieldset>
Atributos
disabled El atributo especifica que los campos incluidos en el contenido de la etiqueta, estén
desactivados. Es un atributo booleano, por tanto su sola aparición en la etiqueta,
realiza la activación del mismo
form El atributo permite especificar a qué formulario pertenece el campo que se está
solicitando especificando el atributo identificador del formulario. Como valor se ha
de especificar el valor del atributo id, asociado al formulario donde se encuentra
incluido la etiqueta
name El atributo permite especificar el nombre que se quiere asignar al grupo de
controles del formulario. El nombre puede ser utilizado posteriormente bien por
lenguajes clientes, para interactuar con el formulario, bien con lenguajes de
servidor para procesar los datos recibidos e incluso por hojas de estilos, para
aplicar un formato concreto al formulario.
La etiqueta suele ir acompañada de otra etiqueta denomina <legend>, la cual
permite establecer el título del grupo de elementos en el contenido de la misma, y
se suele utilizar justo detrás de la etiqueta de apertura del grupo.

184
El siguiente ejemplo muestra el uso de la etiqueta en un formulario de datos.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
<form name="formulario_datos" id="formulario_datos" action="envio.php"
method="post" >
<fieldset form="formulario_datos" name="grupo_datos_personales">
<legend> Datos Personales </legend>
Nombre: <input type="text" name="nombre" value="" placeholder="Teclee
nombre..."><br>
Localidad: <input type="text" name="telefono" value="" placeholder="Teclee
telefono..."><br>
</fieldset>
<input type="submit" name="enviar" value="Enviar Datos...">
</form>
</body>
</html>

185
Etiqueta <LABEL>
La etiqueta <label>, permite definir una etiqueta o título para los campos de tipo input, el incluir un
título en el formulario no realiza ninguna función especial sobre los campos del mismo, pero sí de
cara al usuario representa una mejora en la presentación del formulario, ya que también al incluir los
títulos de los campos, el usuario puede realizar un clic sobre los mismos, permitiendo activar o recibir
el foco del control asociado al título.
<label for=”Identificador_Campo” form=”Nombre_formulario”>
Titulo del campo …
</label>
Atributos
solicitando especificando el atributo identificador del formulario. Como valor se
ha de especificar el valor del atributo id, asociado al formulario donde se
encuentra incluido la etiqueta.
for El atributo permite especificar el nombre del control, con el cual se ha de asociar
la etiqueta. El nombre que se ha de indicar es el utilizado en el atributo id del
control.

186
El siguiente ejercicio muestra el uso de la etiqueta en un formulario de datos.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
method="post" >
<label for="nombre" form="formulario_datos">Nombre: </label>
<input type="text" name="nombre" id="nombre" value="" placeholder="Teclee
nombre..."><br>
<label for="localidad" form="formulario_datos">Localidad: </label>
<input type="text" name="telefono" id="localidad" value=""
placeholder="Teclee telefono..."><br>
</fieldset>
</form>
</body>
</html>

187
7.18. Etiqueta KEYGEN, METER y PROGRESS
Etiqueta <KEYGEN>
La etiqueta <keygen>, permite crear claves codificadas, de forma que sean enviadas junto con los
datos del formulario, para añadir un nivel más de seguridad en el envío y recepción de los mismos.
Cuando el formulario es enviado la clave privada es almacenada en el ordenador cliente, mientras
que la clave pública, es enviada al servidor.
<keygen autofocus challenge disabled form=”valor” keytype=”valor”
name=”valor”>
La etiqueta es una de las que no tienen etiqueta de cierre. Entre los atributos de la misma se
encuentran los siguientes:
Atributos
autofocus El atributo permite especificar cuál es el control que recibe el “foco”, cuando se
realiza la carga del documento web en el navegador. Es un atributo booleano y
solo con aparecer significa que está activado.
disabled El atributo especifica que el elemento sobre el que se aplica, se ha de
desactivar. Un elemento desactivado está bloqueado y no se puede cambiar ni
realizar clic sobre el mismo.
name El atributo permite especificar el nombre que se quiere asignar al campo del
formulario. El nombre puede ser utilizado posteriormente bien por lenguajes
clientes, para interactuar con el formulario, bien con lenguajes de servidor para
procesar los datos recibidos.
challenge El atributo permite especificar que las claves generadas sean cambiadas
automáticamente, después de haberse producido el envió de los datos.
keytype El atributo permite especificar el tipo de codificación que se quiere utilizar para
el cifrado de las claves. Se pueden seleccionar tres tipos de codificación: rsa, dsa
y ec. Siendo la utilizada por defecto el primer tipo de codificación.

188
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
<form name="formulario_datos" id="formulario_datos" action="envio.
php" method="post" >
<input type="text" name="nombre" id="nombre" value="" placeholder=
"Teclee nombre..."><br>
<input type="text" name="telefono" id="localidad" value="" placeho
lder="Teclee telefono..."><br>
<label for="codificacion" form="formulario_datos">Encriptado:</lab
el>
<keygen name="codificacion" id="codificacion" keytype="rsa" >
</fieldset>
</form>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado similar al de la imagen siguiente.

189
Etiqueta <METER>
La etiqueta <meter>, permite definir un control que representa una medida escalar dentro de un
rango conocido. Se suele utilizar para expresar uso de discos, importancia de un resultado, etc.
No se recomienda su utilización para expresar un indicador o barra de progreso, utilizándose para
esa tarea la etiqueta progress.
Aunque se puede especificar un contenido de texto en la etiqueta, este por lo que se ha observado
no se tiene efecto visual en la representación en el navegador.
<meter form=”valor” high=”valor” low=”valor” max=”valor” min=”valor”
optimum=”valor” value=”valor” >
Contenido de la etiqueta …
</meter>
Atributos
form El atributo permite especificar a qué formulario pertenece el campo que se
está solicitando especificando el atributo identificador del formulario. Como
valor se ha de especificar el valor del atributo id, asociado al formulario
donde se encuentra incluido la etiqueta.
value El atributo permite especificar el valor de la barra indicadora.
low, high, optimum Los atributos permiten especificar los valores numéricos a partir de los
cuales se considera que son valores bajos y altos respectivamente. Así como
el valor considerado como optimo dentro del rango. Al indicar como valor de
la barra indicadora un valor comprendido entre los rangos de alto y bajo, se
cambia el color de visualización de la misma.
min, max Los atributos permiten especificar los valores numéricos considerados
mínimo y máximo respectivamente de la barra indicadora.

190
El siguiente ejemplo muestra el uso de la barra indicadora en un formulario de datos. Aunque se ha
de tener en cuenta que este control no envía ningún tipo de dato al servidor.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
method="get" >
nombre..."><br>
<label for="codificacion"
form="formulario_datos">Encriptado:</label></fieldset>
<meter form="formulario_datos" name="valor" id="valor" value="7" min="0"
max="10" low="4" high="8" optimum="6">2 sobre 10</meter><br>
</form>
</body>
</html>

191
Etiqueta <PROGRESS>
La etiqueta <progress>, permite especificar una barra indicadora, que sirve para representar el
progreso de una tarea que está realizando. Se suele utilizar en conjunto con lenguajes de
programación de cliente para mostrar el progreso de la tarea visualmente.
<progress max=”valor” value=”valor”></progress>
Entre sus atributos encontramos max, el cual permite especificar un valor numérico el cual
representaría, el 100% de la tarea que se está evaluando, y value, que representa el valor numérico,
realizado por el momento de la tarea.
El siguiente ejemplo muestra el uso de la etiqueta en un formulario de datos.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
method="get" >
<legend> Datos Personales</legend>
nombre..."><br>
</fieldset>
</form>
<p>Progreso realizado... </p>
<progress max="100" value="90"></progress>
</body>
</html>

192
7.19. Etiqueta OUTPUT y SELECT
Etiqueta <OUTPUT>
La etiqueta <output>, permite definir el resultado de un cálculo, utilizando los lenguajes de cliente,
su contenido para mostrar el resultado de la operación realizada.
<output for=”valor” form=”valor” name=”valor”></output>
Atributos
for El atributo permite especificar el o los nombres de los controles, con los que se asocia
la etiqueta. El nombre que se ha de indicar es el utilizado en el atributo id del control o
controles que se quieren asociar, separados por espacios en blanco.
solicitando especificando el atributo identificador del formulario. Como valor se ha de
especificar el valor del atributo id, asociado al formulario donde se encuentra incluido
la etiqueta.
formulario. El nombre puede ser utilizado posteriormente bien por lenguajes clientes,
para interactuar con el formulario, bien con lenguajes de servidor para procesar los
datos recibidos.

193
El siguiente ejemplo muestra el uso de la etiqueta para calcular un resultado con dos barras de
rango.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
php" method="get" >
<fieldset form="formulario_datos" name="grupo_datos_personales" on
input="resultado.value=parseInt(numeroa.value)+parseInt(numerob.value)">
0 <input type="range" id="numeroa" value="50"> 100 + 0 <i
nput type="range" id="numerob" value="50"> 100 = <output name="resultado"
for="numeroa numerob"></output>
</fieldset>
</form>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado similar al de la imagen siguiente.

194
Etiqueta <SELECT>
La etiqueta <select>, permite la creación de listas desplegables o listas abiertas, desde la que poder
realizar la selección de una o varias de las opciones que se presentan en la misma.
<select autofocus disabled form=”valor” multiple name=”valor” required
size=”valor”>
<option disabled label=”valor” selected value=”valor”>
Contenido de la opción
</option>
<option disabled label=”valor” selected value=”valor”>
Contenido de la opción
</option>
…
</select>
Atributos
disabled El atributo especifica que el elemento sobre el que se aplica, se ha de desactivar.
Un elemento desactivado está bloqueado y no se puede cambiar ni realizar clic
sobre el mismo.
multiple El atributo permite especificar en campos de tipo select. Que se puedan
seleccionar una o más opciones de la lista que se presenta.
formulario.
required El atributo aplicado a un campo permite especificar que la introducción de datos
en el campo ha de ser obligatorio, es decir no se puede dejar en blanco.
size El atributo permite especificar un valor numérico, el cual corresponderá con las
opciones visibles que se presentan de la lista en el campo.

195
El siguiente ejemplo muestra el uso de varias listas desplegables en un formulario de datos.
<!DOCTYPE HTML>
<html>
<head>
HTML5">
</head>
<body>
method="get" >
nombre...">
<br> <label for="localidad" form="formulario_datos">Localidad: </label>
placeholder="Teclee telefono..."> <br> </fieldset>
<fieldset form="formulario_datos" name="grupo_datos_comunes">
<legend> Otros datos ... </legend>
<label for="coche" form="formlario_datos">Vehiculo: </label>
<select name="coche" required size="4">
<option value="Ninguno" selected>Ninguno</option>
<optgroup label="Coches Suizos"> <option value="volvo">Volvo</option>
<option value="saab">Saab</option> </optgroup>
<optgroup label="Coches Alemanes">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select> <br>
<label for="coche" form="formlario_datos">Estado Civil: </label>
<select name="estado"> <option value="Ninguno" selected>Ninguno</option>
<option value="casado">Casado</option>
<option value="separado">Separado</option>
<option value="divorciado">Divorciado</option>
<option value="viudo">Viudo</option>
</select>
</fieldset>
</form>
</body>
</html>

196
7.20. Etiqueta TEXTAREA
La etiqueta <textarea>, permite definir un area de texto similar a un campo de texto, pero con la
diferencia que se pueden indicar tanto el número de filas, como de columnas, con las que se quiere
representar visualmente el control, no teniendo un límite definido para el numero de caracteres que
se pueden teclear en el area de texto.
Se suele utilizar para solicitar textos explicativos, opiniones, comentarios, etc. Normalmente el tipo
de letra utilizado por el control es Courier, aunque mediante hojas de estilos es posible variar las
opciones del control. La sintaxis de la etiqueta es la siguiente:
<textarea autofocus disabled form=”valor” cols=”valor” rows=”valor”
maxlength=”valor” name=”valor” placeholder=”valor” readonly required
wrap=”valor”>
Contenido inicial del area de texto …
</textarea>
Atributos
disabled El atributo especifica que el elemento sobre el que se aplica, se ha de
desactivar. Un elemento desactivado está bloqueado y no se puede cambiar ni
realizar clic sobre el mismo.
required El atributo aplicado a un campo permite especificar que la introducción de
datos en el campo ha de ser obligatorio, es decir no se puede dejar en blanco.
readonly El atributo permite especificar que un campo sea de solo lectura, es decir su
contenido será visible y podrá ser seleccionado, pero no se podrá modificar. Se
suele utilizar en conjunto con lenguajes de programación de cliente, para alterar
el valor de solo lectura, cuando se cumplan ciertas condiciones en los datos.
formulario.

197
maxlength El atributo permite especificar el número de caracteres máximos que se permite
teclear en una etiqueta de tipo entrada.
cols El atributo permite especificar el número de columnas visibles, que el control
visualiza.
rows El atributo permite especificar el número de filas visibles, que el control
visualiza en su representación en el navegador.
wrap El atributo permite especificar como se realiza el ajuste de palabras en el
contenido del control, se puede seleccionar entre dos posibles valores hard y
soft.
El siguiente ejemplo muestra el uso del control en un formulario de datos.
<!DOCTYPE HTML>
<html>
<head>
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML
5">
</head>
<body>
php" method="get" >
</fieldset>
<br> Comentarios... <br>
<textarea name="comentarios" rows="7" cols="70" placeholder="Tecle
e sus comentarios..."></textarea>
<input type="submit" name="enviar" value="Enviar Datos..."></form>
</form>
</body>
</html>

198
Recuerda…
No funcionaría de forma correcta un formulario sin “submit”, necesita un botón que envíe los datos
del formulario.
El atributo Multiple, emails, puede ser usado para especificar varias direcciones de mail mediante
comas.
La etiqueta Date no hace uso de Javascript.
La etiqueta URL comprueba si la dirección web es absoluta y correcta.
Es recomendable el uso de formularios, en ello reside la web 2.0.

199
8. MARCOS CONTENEDORES
8.1. Etiqueta IFRAME
La etiqueta < iframe>, permite realizar la inserción de un marco en línea, dentro del documento web.
Un marco le va a permitir insertar contenido dentro de un documento como puede ser otro
documento web, un mapa de googlemaps, etc.
<iframe height="valor" width="valor" name="valor" sandbox="valor"
seamless="valor" src="valor" srdoc="valor" >;</iframe>
Los atributos que se pueden especificar son los siguientes:
width
El atributo width, permite especificar el ancho del marco en pixeles.
height
El atributo height, permite especificar el alto del marco en pixeles.
name
El atributo permite especificar el nombre que se quiere asignar al marco insertado en el documento
web
src
El atributo src, permite especificar el origen del objeto que se quiere insertar en el marco, es decir su
ubicación, bien mediante una ruta absoluta o relativa.
srdoc
El atributo permite especificar el contenido del objeto en línea, es decir si se especifica contenido en
este atributo y el navegador soporta el mismo, se sobrescribe el contenido del atributo src,
presentándose el contenido especificado en este atributo.
seamless
El atributo permite especificar que el marco se presente sin barras de desplazamiento ni bordes, de
esta forma su integración dentro del documento web, es más suave. Es un atributo booleano, para
activarlo solo ha de estar presente en la etiqueta.

200
sandbox
El atributo permite especificar ciertas restricciones para el contenido del marco, siempre y cuando se
utilice el atributo. Si se especifica el atributo con un valor vacío ( “” ), se aplican todas las
restricciones, en otro caso se han de especificar las restricciones separadas por espacios en blanco
dentro de la cadena de texto que se utiliza como valor del atributo.Las restricciones que se pueden
aplicar son las siguientes:
Valor del
atributo
Descripción
“” Se aplican todas las restricciones.
allow-same-
origin
El contenido del marco se trata de la misma forma que el documento web
que lo contiene.
allow-top-
navigation
Permite que el contenido del marco, pueda interactuar con el contenido
del documento web que lo contiene en la “navegación” por el mismo.
allow-forms Permite que el contenido del marco pueda realizar envió de datos de
formularios.
allow-scripts Permite que el contenido del marco pueda ejecutar scripts.
El siguiente ejemplo muestra el uso de la etiqueta, visualizando un mapa de google.
<!DOCTYPE HTML>
<html>
<head>
<meta name="generator" content="www.tudominio.com, Curso práctico HTML
5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML
5">
</head>
<body>
<h1>Mapa insertado de google</h1>
<iframe width="425" height="350" frameborder="0" scrolling="no" margin
height="0" marginwidth="0" src="https://maps.google.es/maps?q=huerto+del+c
ura+elche+maps&ie=UTF8&am p;hq=huerto+del+cura&hnear=Elche,+Alicante,+Comu
nidad+Valenciana&t=h& amp;ll=38.277641,-0.667054&spn=0.032764,0.109217&out
put=embed"></iframe><br /><small>
<a href="https://maps.google.es/maps?q=huerto+del+cura+elche+maps&ie=U
TF8&a mp;hq=huerto+del+cura&hnear=Elche,+Alicante,+Comunidad+Valenciana&t=
h &ll=38.277641,-0.667054&spn=0.032764,0.109217&source=embed" style="color
:#0000FF;text-align:left">Ver mapa más grande</a></small>
</body>
</html>

201
Recuerda…
Un IFRAME permite insertar a tiempo real un contenido web dentro de otro.
Si queremos usar el marco sin barras de desplazamiento usamos la propiedad SEAMLESS.
Un IFRAME puede ejecutar un script mediante la propiedad Allow-scripts.

202
9. ESTILOS CSS Y MODELOS DE CAJA
9.1. Elementos block
Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de
acuerdo a su tipo:
 Elementos block: son posicionados uno sobre otro hacia abajo en la página.
 Elementos inline: son posicionados lado a lado, uno al lado del otro en la misma línea, sin
ningún salto de línea a menos que ya no haya más espacio horizontal para ubicarlos.
Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores
como elementos block por defecto. Esto significa que cada elemento HTML que representa una parte
de la organización visual será posicionado debajo del anterior.
<section>, <nav>, <header>, <footer>, <div>
Modelos de caja
Para aprender cómo podemos crear nuestra propia organización de los elementos en pantalla,
debemos primero entender cómo los navegadores procesan el código HTML. Los navegadores
consideran cada elemento HTML como una caja. Una página web es en realidad un grupo de cajas
ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos por los
navegadores o por los diseñadores usando CSS.
CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos provistos por
navegadores y obtener la organización deseada. Estas propiedades no son específicas, tienen que ser
combinadas para formar reglas que luego serán usadas para agrupar cajas y obtener la correcta
disposición en pantalla. La combinación de estas reglas es normalmente llamada modelo o sistema
de disposición. Todas estas reglas aplicadas juntas constituyen lo que se llama un modelo de caja.
Existe solo un modelo de caja que es considerado estándar estos días, y muchos otros que aún se
encuentran en estado experimental. El modelo válido y ampliamente adoptado es el llamado Modelo
de Caja Tradicional, el cual ha sido usado desde la primera versión de CSS
Conceptos básicos sobre estilos
Aplicar estilos a los elementos HTML cambia la forma en que estos son presentados en pantalla.
Como explicamos anteriormente, los navegadores proveen estilos por defecto que en la mayoría de
los casos no son suficientes para satisfacer las necesidades de los diseñadores. Para cambiar esto,
podemos sobrescribir estos estilos con los nuestros usando diferentes técnicas.

203
9.2. Estilos en línea
Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar
los estilos dentro de las etiquetas por medio del atributo style.
Se muestra un documento HTML simple que contiene el elemento <p> modificado por el atributo
style con el valor font-size: 20px. Este estilo cambia el tamaño por defecto del texto dentro del
elemento <p> a un nuevo tamaño de 20 píxeles.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este es el título del documento</title>
</head>
<body>
<p style=”font-size: 20px”>Mi texto</p>
</body>
</html>
Usar la técnica demostrada anteriormente es una buena manera de probar estilos y obtener una
vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento.
Cuando usamos esta técnica, debemos escribir y repetir cada estilo en cada uno de los elementos
que queremos modificar, incrementando el tamaño del documento a proporciones inaceptables y
haciéndolo imposible de mantener y actualizar.
9.3. Archivos externos
Este método nos permite cambiar los estilos por completo simplemente incluyendo un archivo
diferente. También nos permite modificar o adaptar nuestros documentos a cada circunstancia o
dispositivo.
Utilizando la línea <link rel=”stylesheet” href=”misestilos.css”> le decimos al navegador que cargue
el archivo misestilos.css porque contiene todos los estilos necesitados para presentar el documento
en pantalla.
La etiqueta <link>referenciando el archivo CSS será insertada en cada uno de los documentos que
requieren de esos estilos:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="Temario/1461/misestilos.css">
</head>
<body>
<p>Mi texto</p>
</body>
</html>

204
9.4. Referencias
Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada
documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo sin buenos
mecanismos que nos ayuden a establecer una específica relación entre estos estilos y los elementos
del documento que van a ser afectados.
Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas CSS:
Referenciando con palabra clave
Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la
misma clase en el documento. Por ejemplo, la siguiente regla cambiará los estilos de todos los
elementos <p>:
p { font-size: 20px }
Por supuesto, lo mismo funcionará para cualquier otro elemento HTML. Si especificamos la palabra
clave span en lugar de p, por ejemplo, cada texto entre etiquetas <span> tendrá un tamaño de 20
píxeles:
span { font-size: 20px }
Referenciando con el atributo id
El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este
atributo no puede ser duplicado. Este nombre debe ser único en todo el documento.
Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla
debe ser declarada con el símbolo # al frente del valor que usamos para identificar el elemento:
#texto1 { font-size: 20px }
La regla será aplicada al elemento HTML identificado con el atributo id=”texto1”. Ahora nuestro
código HTML lucirá de esta manera:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<p id=”texto1”>Mi texto</p>
</body>
</html>

205
Referenciando con el atributo class
Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que
comparte un diseño similar:
.texto1 { font-size: 20px }
Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre. La
ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para
asignar estos estilos a cualquier elemento que queramos:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<p class=”texto1”>Mi texto</p>
<p class=”texto1”>Mi texto</p>
<p>Mi texto</p>
</body>
</html>
La razón por la que debemos utilizar un punto delante del nombre de la regla es que es posible
construir referencias más complejas. Por ejemplo, se puede utilizar el mismo valor para el atributo
class en diferentes elementos pero asignar diferentes estilos para cada tipo:
p.texto1 { font-size: 20px }
En el ejemplo creamos una regla que referencia la clase llamada texto1 pero solo para los elementos
de tipo <p>. Si cualquier otro elemento tiene el mismo valor en su atributo class no será modificado
por esta regla en particular.
9.5. Aplicando CSS a una plantilla
Todo elemento estructural es considerado una caja y la estructura completa es presentada como un
grupo de cajas. Las cajas agrupadas constituyen lo que es llamado un Modelo de Caja.
Siguiendo con los conceptos básicos de CSS, vamos a estudiar lo que es llamado el Modelo de Caja
Tradicional. Este modelo has sido implementado desde la primera versión de CSS y es actualmente
soportado por cada navegador en el mercado, lo que lo ha convertido en un estándar para el diseño
web.

206
Modelo de caja tradicional
Todo comenzó con tablas. Las tablas fueron los elementos que sin intención se volvieron la
herramienta ideal utilizada por desarrolladores para crear y organizar cajas de contenido en la
pantalla. Este puede ser considerado el primer modelo de caja de la web. Las cajas eran creadas
expandiendo celdas y combinando filas de celdas, columnas de celdas y tablas enteras, unas sobre
otras o incluso anidadas. Cuando los sitios webs crecieron y se volvieron más y más complejos esta
práctica comenzó a presentar serios problemas relacionados con el tamaño y el mantenimiento del
código necesario para crearlos.
Estos problemas iniciales hicieron necesario lo que ahora vemos como una práctica natural: la
división entre estructura y presentación. Usando etiquetas <div> y estilos CSS fue posible reemplazar
la función de tablas y efectivamente separar la estructura HTML de la presentación. Con elementos
<div> y CSS podemos crear cajas en la pantalla, posicionar estas cajas a un lado o a otro y darles un
tamaño, color o borde específico entre otras características. CSS provee propiedades específicas que
nos permiten organizar las cajas acorde a nuestros deseos. Estas propiedades son lo suficientemente
poderosas como para crear un modelo de caja que se transformó en lo que hoy conocemos como
Modelo de Caja Tradicional.
Plantilla
Realizaremos una plantilla que contenga todos los elementos necesarios para proveer estructura a
nuestro documento e incorporaremos algunos detalles de estilos CSS y el Modelo de Caja
Tradicional.
Este modelo necesita agrupar cajas juntas para ordenarlas horizontalmente. Debido a que el
contenido completo del cuerpo es creado a partir de cajas, debemos agregar un elemento <div> para
agruparlas, centrarlas y darles un tamaño específico.
EL CÓDIGO DE LA PLANTILLA: 122-CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="Tudominio, HTML5, CSS">
</head>
<body>
<div id="agrupar">
<header id="cabecera">
<h1>Este es el título principal del sitio web</h1>
</header>
<nav id="menu">
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>

207
<sectionid="seccion">
<article>
<header>
<hgroup >
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<time datetime="2011-12-10" pubdate>
publicado 10-12-2011
</time>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src="Temario/1461/imagenes/myimage.jpg">
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
</hgroup>
<time datetime="2011-12-15" pubdate>
publicado 15-12-2011
</time>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<asideid="columna">
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footerid="pie">
Derechos Reservados © 2010-2011
</footer>
</div>
</body>
</html>
Con el documento HTML finalizado es tiempo de trabajar en nuestro archivo de estilos. Hemos
aglutinado, para los ejemplos, todas las reglas css en un solo archivo llamado misestilos.css

208
Selector universal
Comencemos con algunas reglas básicas que nos ayudarán a proveer consistencia al diseño:
* {
margin: 0px;
padding: 0px;
}
Normalmente, para la mayoría de los elementos, necesitamos personalizar los márgenes o
simplemente mantenerlos al mínimo. Algunos elementos por defecto tienen márgenes que son
diferentes de cero y en la mayoría de los casos demasiado amplios. A medida que avanzamos en la
creación de nuestro diseño encontraremos que la mayoría de los elementos utilizados deben tener
un margen de 0 pixeles. Para evitar el tener que repetir estilos constantemente, podemos utilizar el
selector universal.
La primera regla en nuestro archivo CSS, nos asegura que todo elemento tendrá un margen interno y
externo de 0 pixeles. De ahora en más solo necesitaremos modificar los márgenes de los elementos
que queremos que sean mayores que cero.
NOTA: Debemos escribir todas las reglas necesarias para otorgar estilo a nuestra plantilla en un
archivo CSS. El archivo ya fue incluido dentro del código HTML por medio de la etiqueta <link>, por lo
que lo único que tenemos que hacer es crear un archivo de texto vacío con nuestro editor de textos,
grabarlo con el nombre misestilos.css y luego copiar en su interior la regla y todas las presentadas a
continuación.
Nueva jerarquía para cabeceras
En nuestra plantilla usamos elementos <h1> y <h2> para declarar títulos y subtítulos de diferentes
secciones del documento. Los estilos por defecto de estos elementos se encuentran siempre muy
lejos de lo que queremos y además en HTML5 podemos reconstruir la jerarquía H varias veces en
cada sección:
h1 {
font: bold 20px verdana, sans-serif;
}
h2 {
}
La propiedad font, asignada a los elementos <h1> y <h2>, nos permite declarar todos los estilos para
el texto en una sola línea. Las propiedades que pueden ser declaradas usando font son: font-style,
font-variant, font-weight, font-size/line-height, y font-family en este orden. Con estas reglas estamos
cambiando el grosor, tamaño y tipo de letra del texto dentro de los elementos <h1> y <h2> a los
valores que deseamos.

209
Declarando nuevos elementos HTML5
Otra regla básica que debemos declarar desde el comienzo es la definición por defecto de elementos
estructurales de HTML5:
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display: block;
}
A partir de ahora, los elementos afectados por la regla serán posicionados uno sobre otro a menos
que especifiquemos algo diferente más adelante.
Centrando el cuerpo
El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por
diferentes razones de diseño, el contenido de este elemento debe ser posicionado horizontalmente.
Siempre deberemos especificar el tamaño de este contenido, o un tamaño máximo, para obtener un
diseño consistente a través de diferentes configuraciones de pantalla.
body {
text-align: center;
}
Por defecto, la etiqueta <body> (como cualquier otro elemento block) tiene un valor de ancho
establecido en 100%. Esto significa que el cuerpo ocupará el ancho completo de la ventana del
navegador.
Creando la caja principal
Siguiendo con el diseño de nuestra plantilla, debemos especificar un tamaño o tamaño máximo para
el contenido del cuerpo. De este modo, modificando el tamaño de este elemento lo hacemos al
mismo tiempo para todos los demás:
#agrupar {
width: 960px;
margin: 15px auto;
text-align: left;
}
Esta regla provee tres estilos para la caja principal. El primer estilo establece un valor fijo de 960
pixeles.

210
El segundo estilo es parte de lo que llamamos el Modelo de Caja Tradicional. La propiedad margin
usada para este propósito puede tener cuatro valores: superior, derecho, inferior, izquierdo, en este
orden. Esto significa que el primer valor declarado en el estilo representa el margen de la parte
superior del elemento, el segundo es el margen de la derecha, y así sucesivamente. Sin embargo, si
solo escribimos los primeros dos parámetros, el resto tomará los mismos valores. En nuestro ejemplo
estamos usando esta técnica.
Lo próximo que necesitamos hacer es prevenir un problema que ocurre en algunos navegadores. La
propiedad text-align es hereditaria. Esto significa que todos los elementos dentro del cuerpo y su
contenido serán centrados, no solo la caja principal. El estilo asignado a <body> será asignado a cada
uno de sus hijos. Debemos retornar este estilo a su valor por defecto para el resto del documento. El
tercer y último estilo incorporado en la regla logra este propósito.
La cabecera
Continuemos con el resto de los elementos estructurales. Siguiendo la etiqueta de apertura del <div>
principal se encuentra el primer elemento estructural de HTML5: <header>. Este elemento contiene
el título principal de nuestra página web y estará ubicado en la parte superior de la pantalla. En
nuestra plantilla, <header> fue identificado con el atributo id y el valor cabecera.
Como ya mencionamos, cada elemento block, así como el cuerpo, por defecto tiene un valor de
ancho del 100%. Esto significa que el elemento ocupará todo el espacio horizontal disponible. En el
caso del cuerpo, ese espacio es el ancho total de la pantalla visible (la ventana del navegador), pero
en el resto de los elementos el espacio máximo disponible estará determinado por el ancho de su
elemento padre. En nuestro ejemplo, el espacio máximo disponible para los elementos dentro de la
caja principal será de 960 píxeles, porque su padre es la caja principal la cual fue previamente
configurada con este tamaño.
#cabecera {
background: #FFFBB9; border: 1px solid #999999; padding: 20px;
}
Debido a que <header> ocupará todo el espacio horizontal disponible en la caja principal y será
tratado como un elemento block (y por esto posicionada en la parte superior de la página), lo único
que resta por hacer es asignar estilos que nos permitirán reconocer el elemento cuando es
presentado en pantalla. En la regla mostrada, le otorgamos a <header> un fondo amarillo, un borde
sólido de 1 pixel y un margen interior de 20 pixeles usando la propiedad padding.
Barra de navegación
Siguiendo al elemento <header> se encuentra el elemento, el cual tiene el propósito de proporcionar
ayuda para la navegación. Los enlaces agrupados dentro de este elemento representarán el menú de
nuestro sitio web. Este menú será una simple barra ubicada debajo de la cabecera. Por este motivo,
del mismo modo que el elemento <header>, la mayoría de los estilos que necesitamos para
posicionar el elemento <nav> ya fueron asignados: <nav> es un elemento block por lo que será
ubicado debajo del elemento previo, su ancho por defecto será 100% por lo que será tan ancho
como su padre (el <div> principal), y (también por defecto) será tan alto como su contenido y los
márgenes predeterminados.

211
Por lo tanto, lo único que nos queda por hacer es mejorar su aspecto en pantalla. Esto último lo
logramos agregando un fondo gris y un pequeño margen interno para separar las opciones del menú
del borde del elemento:
#menu {
background: #CCCCCC;
padding: 5px 15px;
}
#menu li
{
display: inline-block;
list-style: none;
padding: 5px;
}
La primera regla referencia al elemento <nav> por su atributo id, cambia su color de fondo y agrega
márgenes internos de 5px y 15px con la propiedad padding.
Dentro de la barra de navegación hay una lista creada con las etiquetas <ul> y <li>. Por defecto, los
ítems de una lista son posicionados unos sobre otros. Para cambiar este comportamiento y colocar
cada opción del menú una al lado de la otra, referenciamos los elementos <li> dentro de este
elemento <nav> en particular usando el selector #menu li, y luego asignamos a todos ellos el estilo
display: inline-block para convertirlos en lo que se llama cajas inline.
En esta última regla también eliminamos el pequeño gráfico generado por defecto por los
navegadores delante de cada opción del listado utilizando la propiedad list-style.
Section y aside
Los siguientes elementos estructurales en nuestro código son dos cajas ordenadas horizontalmente.
El Modelo de Caja Tradicional es construido sobre estilos CSS que nos permiten especificar la
posición de cada caja. Usando la propiedad float podemos posicionar estas cajas del lado izquierdo o
derecho de acuerdo a nuestras necesidades. Los elementos que utilizamos en nuestra plantilla HTML
para crear estas cajas son <section> y <aside>, cada uno identificado con el atributo id y los valores
seccion y columna respectivamente.
#seccion {
float: left;
width: 660px;
margin: 20px;
}
#columna {
float: left;
width: 220px;
margin: 20px 0px;
padding: 20px;
background: #CCCCCC;
}

212
La propiedad de CSS float es una de las propiedades más ampliamente utilizadas para aplicar el
Modelo de Caja Tradicional. Hace que el elemento flote hacia un lado o al otro en el espacio
disponible. Los elementos afectados por float actúan como elementos block (con la diferencia de que
son ubicados de acuerdo al valor de esta propiedad y no el flujo normal del documento). Los
elementos son movidos a izquierda o derecha en el área disponible, tanto como sea posible,
respondiendo al valor de float.
Afectado por estos valores, el contenido del elemento <section> estará situado a la izquierda de la
pantalla con un tamaño de 660 pixeles, más 40 pixeles de margen, ocupando un espacio total de 700
pixeles de ancho.
La propiedad float del elemento <aside> también tiene el valor left (izquierda). Esto significa que la
caja generada será movida al espacio disponible a su izquierda. Debido a que la caja previa creada
por el elemento <section> fue también movida a la izquierda de la pantalla, ahora el espacio
disponible será solo el que esta caja dejó libre. La nueva caja quedará ubicada en la misma línea que
la primera pero a su derecha, ocupando el espacio restante en la línea, creando la segunda columna
de nuestro diseño.
El tamaño declarado para esta segunda caja fue de 220 pixeles. También agregamos un fondo gris y
configuramos un margen interno de 20 pixeles. Como resultado final, el ancho de esta caja será de
220 pixeles más 40 pixeles agregados por la propiedad padding (los márgenes de los lados fueron
declarados a 0px).
Footer
Para finalizar la aplicación del Modelo de Caja Tradicional, otra propiedad CSS tiene que ser aplicada
al elemento <footer>. Esta propiedad devuelve al documento su flujo normal y nos permite
posicionar <footer> debajo del último elemento en lugar de a su lado:
#pie {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
}
La regla declara un borde de 2 pixeles en la parte superior de <footer>, un margen interno (padding)
de 20 pixeles, y centra el texto dentro del elemento. A sí mismo, restaura el normal flujo del
documento con la propiedad clear. Esta propiedad simplemente restaura las condiciones normales
del área ocupada por el elemento, no permitiéndole posicionarse adyacente a una caja flotante. El
valor usualmente utilizado es both, el cual significa que ambos lados del elemento serán restaurados
y el elemento seguirá el flujo normal (este elemento ya no es flotante como los anteriores). Esto,
para un elemento block, quiere decir que será posicionado debajo del último elemento, en una
nueva línea.

213
La propiedad clear también empuja los elementos verticalmente, haciendo que las cajas flotantes
ocupen un área real en la pantalla. Sin esta propiedad, el navegador presenta el documento en
pantalla como si los elementos flotantes no existieran y las cajas se superponen.
Cuando tenemos cajas posicionadas una al lado de la otra en el Modelo de Caja Tradicional siempre
necesitamos crear un elemento con el estilo clear: both para poder seguir agregando otras cajas
debajo de un modo natural.
El gráfico muestra una representación visual de este modelo con los estilos básicos para lograr la
correcta disposición en pantalla.
Últimos toques
Lo único que nos queda por hacer es trabajar en el diseño del contenido. Para esto, solo necesitamos
configurar los pocos elementos HTML5 restantes:
article {
background: #FFFBCC;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
articlefooter {
text-align: right;
}
time {
color: #999999;
}
figcaption {
font: italic 14px verdana, sans-serif;
}
La primera regla referencia todos los elementos <article> y les otorga algunos estilos básicos (color
de fondo, un borde sólido de 1 pixel, margen interno y margen inferior). El margen inferior de 15
píxeles tiene el propósito de separar un elemento <article> del siguiente verticalmente.

214
Cada elemento <article> cuenta también con un elemento <footer> que muestra el número de
comentarios recibidos. Para referenciar un elemento <footer> dentro de un elemento <article>,
usamos el selector articlefooter que significa “cada <footer> dentro de un <article> será afectado por
los siguientes estilos”. Esta técnica de referencia fue aplicada aquí para alinear a la derecha el texto
dentro de los elementos <footer> de cada <article>.
Al final del código cambiamos el color de cada elemento <time> y diferenciamos la descripción de la
imagen (insertada con el elemento <figcaption>) del resto del texto usando una tipo de letra
diferente.
Resultado final
Recuerda…
CSS es un lenguaje de estilos.
CSS puede modificar la apariencia y posición de elementos HTML5.
Se puede obviar totalmente las tablas de la maquetación en favor de CSS.
El uso de CSS es mejor que usar las tablas para maquetar una web.

215
Resumen General del Tema.
La web semántica consiste en:
- Dotar al documento de sentido en estructura y formato
- Usar etiquetas para la estructura del documento
Para establecer un icono de la web en la pestaña del buscador se establece dos formas:
-Enlazando con la etiqueta Link
- Mediante un gráfico con extensión .ico
La etiqueta que especifica un conjunto de enlaces de navegación es la etiqueta NAV.
La etiqueta de video de HTML5 es un soporte nativo de vídeo.
Lo recomendable es usar un archivo CSS mediante enlace externo.
Un IFRAME permite Insertar a tiempo real un contenido web dentro de otro.
Mediante el atributo TITLE se específica un texto informativo sobre el elemento.
HTML5 es una nueva tecnología que aglutina a otras como CSS y JavaScript.
No funcionaría de forma correcta un formulario sin “submit” pues necesita un botón que envíe los
datos del formulario.
El atributo Multiple, en emails, puede ser usado para especificar varias direcciones de mail mediante
comas.

Programación en HTML 5

Más contenido relacionado

La actualidad más candente (7)

Similar a Programación en HTML 5 (20)

Más de Jomicast (20)

Último (20)

Programación en HTML 5