Scribd
Cargar
69 vistas

HTML5 Tutorial

Este documento introduce HTML5, incluyendo sus nuevos elementos y atributos. Explica la estructura básica de un documento HTML5 y los principales elementos como encabezado, navegación, contenido y pie de página.

Cargado por

Odil Paredes
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
69 vistas

HTML5 Tutorial

Este documento introduce HTML5, incluyendo sus nuevos elementos y atributos. Explica la estructura básica de un documento HTML5 y los principales elementos como encabezado, navegación, contenido y pie de página.

Cargado por

Odil Paredes
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 54

CAPITULO 1

INTRODUCCION A HTML5
El desarrollo web es el poder de decidir una lnea de trabajo en concordancia con la razn y la
creatividad, sin vacilar; de innovar cuando es correcto innovar; de preservar cuando es adecuado
preservar.

1.1 HTML5 Qu es y en qu consiste?


HTML5 es la quinta revisin importante del lenguaje bsico de pginas web. Proporciona
una gama bastante robusta de caractersticas entre las que destacan: estructura, estilo y
funcionalidad; establece de forma nativa una serie de elementos fundamentales que toda
web moderna debe contener y reflejar. Dentro de esta nueva versin de HTML se combinan
la potencia, simplicidad, dinamismo, flexibilidad y estilizado de: HTML, CSS y JavaScript.
Proveyendo de una poderosa herramienta tecnolgica para el desarrollo de sitios web
adaptados a la internet moderna.

JS

HTML

CSS

HTML5

HTML5 tiene un conjunto definido de elementos y atributos que pueden ser utilizados en
un documento, cada uno diseado para un propsito especfico con su propio significado.
Considere este conjunto de elementos a ser equivalente a la lista de palabras en el
diccionario. Esto incluye elementos para los encabezados, prrafos, listas, tablas, enlaces,
controles de formulario y muchas otras caractersticas. Este es el vocabulario de HTML5.
Similar a los lenguajes naturales que tienen reglas gramaticales de como las palabras se
pueden utilizar en contextos diferentes, HTML5 tiene reglas para dnde y cmo cada
elemento y atributo se puede utilizar.
La estructura bsica de los elementos en un documento HTML5 es una estructura de rbol.
La mayora de los elementos tienen ms de un elemento primario, (a excepcin del
elemento raz la etiqueta <html> </html>), y puede tener cualquier nmero de elementos
secundarios. Esta estructura debe reflejarse en la sintaxis utilizada para escribir el
documento.

1.2 Nuevos elementos


HTML5 presenta un conjunto de nuevas etiquetas y atributos que reflejan el uso tpico de
los sitios web modernos. Algunos de ellos son tcnicamente similares en cuanto a
utilizacin a las etiquetas <div> y <span>, pero tienen un valioso significado semntico,
como por ejemplo la nueva etiqueta <nav> (bloque de navegacin del sitio web). Otros
elementos proporcionan nuevas funcionalidades a travs de una interfaz estandarizada,
como las etiquetas <audio> y <video>.
Mejoras en el elemento <canvas>, capaz de renderizar en los navegadores ms importantes
(Mozilla, Chrome, Opera, Safari e IE) elementos 2D y 3D (en un futuro cercano).
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos
puramente de presentacin, como <font> y <center>, cuyos efectos pueden ser manejados
por el CSS. Tambin hay un renovado nfasis en la importancia del scripting DOM para el
comportamiento dinmico de la web.

Estructura y estilo

Header,nav,aside,
section, articles y
footer...

Funcionalidad

CSS,Canvas, audio
y video...

Scripting

Entre las novedades ms destacadas se pueden mencionar:

Incorporacin de etiquetas (canvas 2D y 3D, audio, video) con cdecs para mostrar
los contenidos multimedia.

Etiquetas para el manejo de grandes volmenes de datos: Datagrid, Details, Men y


Command. Permitiendo generar tablas dinmicas que pueden filtrar, ordenar y
ocultar contenido a los usuarios.

Mejoras en los formularios. Nuevos tipos de inputs (e-mail, number, url,


datetime) y facilidades para validar el contenido sin necesidad de usar JavaScript.

Visores: MathML (frmulas matemticas) y SVG (grficos vectoriales).

Drag & Drop. Nueva funcionalidad para arrastrar objetos como imgenes, capas,
etc.

Hay algunas otras caractersticas que se incluyen dentro del estndar HTML5 aunque no
forman parte de la especificacin W3C lo hacen dentro de otras especificaciones:

Almacenamiento de datos en bases locales.


Aplicaciones off-line que funcionan sin estar conectados a la red.
Comunicaciones con el servidor web.
La tercera versin de la especificacin de las hojas de estilo en cascada (CSS3).
Geolocalizacin.

Importante: antes que nada es sumamente indispensable tener un editor web y varios
navegadores actualizados para ir probando nuestros ejemplos. Recomiendo utilizar un
editor de texto multilenguaje como gedit, Notepad++ o PSPad, o un entorno de desarrollo
ms avanzado como NetBeans (la versin 7.3 incluyo soporte para HTML5). En los
ejemplos realizados en este libro se utilizara Notepad++ y en algunos casos NetBeans para
visualizar se usaran los navegadores Mozilla, Chrome, Opera, Safari e Internet explorer.
Sitios para descargar herramientas:
http://ftp.gnome.org/pub/GNOME/binaries/win32/gedit/2.30/gedit-setup-2.30.1-1.exe
http://download.tuxfamily.org/notepadplus/6.3.2/npp.6.3.2.Installer.exe
https://netbeans.org/downloads/index.html
Sitios para descargar Navegadores:
http://www.mozilla.org/es-ES/download/?product=firefox-20.0&os=win&lang=es-ES
https://www.google.com/intl/es/chrome/browser/?hl=es
http://www.opera.com/es-419/computer/windows
http://support.apple.com/kb/DL1531?viewlocale=es_ES&locale=es_ES

1.3 Conozcamos la estructura de HMTL5.


Cuando hablamos de estructura de un documento web nos referimos al esqueleto interno
compuesto por etiquetas en pares ramificadas y ordenadas de tal forma que se comprenda a
simple vista los diversos nodos que forman el rbol estructural. En versiones anteriores de
HTML a la hora de estructurar una pgina web se haca uso excesivo de etiquetas <div>
para segmentar internamente nuestro documento; con HTML5 se vuelve mucho ms fcil la
creacin y estandarizacin de una estructura interna para toda nuestras pginas web.
Veamos un ejemplo de estructura de una pgina web con HTML5:

Ejemplo 1: estructurahtml5.html

Ahora desglosemos esta estructura interna para entender que significa cada segmento:
<!DOCTYPE HTML>

La etiqueta doctype (declaracin del tipo de documento) se


utiliza al comienzo de una pgina web para indicar al navegador
que tipo de estndar y versin cumple dicha pgina web.

<html> </html>
<head> </head>

Abre y cierra un documento HTML


Encabezado de la pgina - aqu se coloca ttulo, metatags, e
informacin para buscadores entre otras cosas. Est informacin
no es visible dentro del cuerpo de la pgina.
Muestra el ttulo de la pgina web en la parte superior del
navegador.
Cuerpo de la pgina donde se coloca y muestra el contenido.

<title> </title>
<body> </body>

<header> </header>

Sirve para mostrar informacin de cabecera til para un


documento u otras secciones principales. Tpicamente se utiliza
para agregar encabezados, es decir, etiquetas h1-h6 que definen
el ttulo y subttulos de la seccin, aunque tambin se puede
utilizar para dar informacin sobre fechas de publicacin,
versiones del contenido mostrado, o enlaces de navegacin
dentro del documento (por ejemplo, enlaces a la home,
informacin de contacto, o al mapa web de una pgina).
<nav> </nav>
Esta etiqueta indica al navegador la parte del documento web
que es destinada a ser un bloque de navegacin dentro del sitio.
<aside> </aside>
Aside sirve para indicar que ese bloque es solo un aadido a los
bloques que tiene al lado. Son datos extra sin lo que podramos
pasar perfectamente pero que hemos decidido aadir en el
documento. Conocida mejor como la etiqueta para colocar
contenido tangencial.
<section> </section>
El uso de section es muy parecido al de div pero aportando la
carga de significado mnima posible al contenido. Englobando
distintos elementos dentro de una etiqueta <section> lo que
estamos haciendo es declarar que todo su contenido est
relacionado y forma parte de un mismo significado o elemento.
<article> </article>
Etiqueta que se utiliza para mostrar la informacin del contenido
dentro del section dividida en partes y que a la vez comparten
caractersticas similares.
<footer> </footer>
Esta etiqueta reserva el espacio para informacin relativa al sitio
web ejemplos: derechos de autor, aviso legal, etc. Representa el
final de nuestro documento web.
Todos estos elementos en concordancia forman una estructura bsica dentro del cuerpo que
asemeja a la siguiente figura:

ENCABEZADO
<HEADER></HEADER>
BLOQUE DE NAVEGACION
<NAV></NAV>

CONTENIDO PRINCIPAL
<SECTION>
<ARTICLE></ARTICLE>

CONTENIDO
TANGENCIAL
<ASIDE></ASIDE>

</SECTION>

INFORMACION INSTITUCIONAL <FOOTER></FOOTER>

Ahora bien la estructura mostrada en la imagen anterior es totalmente relativa y depende de


diversos factores como por ejemplo el tipo de web que se va a desarrollar, las necesidades
en cuando a utilizacin del espacio y desde luego la esttica del sitio web la cual
pretendemos mostrar a los usuarios. Teniendo en cuenta estos tres aspectos no est de ms
mencionar que HTML5 en este caso nos proporciona un estndar adecuado para establecer
una estructura pero hace falta maquetar esa estructura con la utilizacin de CSS3 para darle
un acabado ms profesional e intuitivos a nuestro proyecto web.
Como se puede apreciar en el ejemplo anterior de estructura de un documento web esta
consiste en dos partes principales: el encabezado y el cuerpo. En el siguiente apartado
realizamos otro ejemplo ms detallado y sustancial sobre la creacin estructural de una
pgina web.

Encabezado

Estructura
del
documento
web
Cuerpo

1.3.1 El Encabezado
La cabecera o encabezado de un documento web se ubica en la parte superior de la pgina y
es una parte que los usuarios no pueden ver pues esta se mantiene oculta (a excepcin del
title) y se representa estructuralmente con la etiqueta <head> </head>. Dentro del
encabezado se colocan las llamadas a scripts externos e internos (JavaScript, CSS, etc.), las
diversas etiquetas meta y el ttulo principal de nuestra pgina.
Comenzando con nuestro ejemplo primero debemos especificar el doctype para sealarle al
navegador la versin y tipo de documento que estamos creando. Luego de esto lo que sigue
es colocar la etiqueta <html> </html> que es la contenedora principal y a la vez nos indica
la apertura del documento web. Ahora dentro de la etiqueta <html> procedemos a colocar
6

la etiqueta de encabezado de documento <head></head>. Para finalizar nuestro


encabezado de documento solo nos queda insertar entre las etiquetas <head> el ttulo
<title> </title> y unas cuentas etiquetas meta: la primera <meta charset=utf-8/> para
establecer un conjunto de caracteres adecuados a nuestro idioma, la segunda ser <meta
name="description" content="Ejemplo de encabezado de pgina en HTML5"/>
servir para colocar una descripcin de no ms de 200 caracteres de la pgina web que
estamos creando y por ltimo <meta name="keywords" content="HTML5, CSS3,
JavaScript, desarrollo, web"/> la cual especifica las palabras claves que definen mi sitio
web; las tres etiquetas meta son de mucha importancia para los buscadores.
Ahora veamos cmo queda nuestro ejemplo:

Ejemplo 2.1: encabezadoycuerpo.html

A diferencia del Ejemplo 1 ac podemos apreciar un encabezado ms formal y mejor


adaptado a los estndares de desarrollo web actual. En el siguiente apartado se abordara la
creacin del cuerpo y se incluirn algunos elementos de contenido visual.

1.3.2 El Cuerpo
El cuerpo o body de un documento web es la parte visual donde se coloca el contenido que
ser dado a conocer a los usuarios de nuestra web y por tal razn como lo mencionamos
anteriormente su estructura est totalmente liga a el tipo de web que se va a desarrollar, las
necesidades en cuando a utilizacin del espacio y desde luego la esttica del sitio web.
Teniendo en cuenta estos tres aspectos a cumplir es necesario maquetar de la mejor manera
posible el aspecto y orden visual del cuerpo de nuestro sitio web.
Continuando con el ejemplo 2 comencemos a darle forma al cuerpo de nuestra pgina web
primero vamos a insertar la etiqueta <body></body> la cual especifica el inicio y fin del
cuerpo del documento web, luego de esto vamos a colocar las etiquetas:
<header></header> la cual sirve para crear un segmento de encabezado de contenido a
diferencia de <head> lo que coloquemos dentro de <header> ser totalmente visible por
7

los usuarios de nuestra web; para efectos prcticos dentro del <header> se pueden colocar
logos, etiquetas de ttulo <h1> a <h6> y todo lo concerniente a un encabezado de
contenido. En nuestro caso de momento incluiremos dentro de <header> una etiqueta de
ttulo <h1></h1>.
Ya tenemos un encabezado de contenido con un ttulo el siguiente paso es establecer un
bloque de navegacin para ello utilizaremos la etiqueta <nav></nav> dentro de ella
podemos crear un pequeo men de navegacin y eso lo haremos con la con la etiqueta
<ul> la cual sirve para crear listas dentro de ella crearemos una pequea serie de elementos
que formaran nuestro men usando la etiqueta <li> para establecer cada elemento, por
efectos prcticos colocaremos cada elemento de la lista como un hipervnculo usando la
etiqueta <a href=> </a>.
Finalizamos ya el bloque de navegacin lo que sigue es colocar un espacio para contenido
tangencial utilizando la etiqueta <aside> </aside> dentro de aside colocaremos una etiqueta de
prrafo <p> </p> esta servir para mostrar un pequeo segmento de texto.
Ahora bien ya para finalizar nuestro ejemplo solo nos queda incrustar una seccin <section>
</section> dentro de la cual colocaremos un par de artculos <article> </article> estos

contendrn informacin (puede ser imgenes, texto, audio y video) a mostrar a los usuarios
y para terminar colocar un pie <footer> </footer> de nuestra pgina el cual podr mostrar
informacin institucional como derechos de autor, avisos legales entre otros.
Ya est finalizado nuestro ejemplo veamos cmo queda:

Ejemplo 2.2: encabezadoycuerpo.html

Ahora podemos visualizar este ejemplo en cualquier navegador y obtendremos lo siguiente:

Vale la pena mencionar que la distribucin del espacio debe realizarse con CSS3, as
mismo todo lo concerniente al aspecto (colores, fuentes, estilos de fuente, efectos, fondos,
9

etc.) tambin a de crearse con CSS3. En el siguiente captulo combinaremos ambas


herramientas (HTML5 y CSS3) para maquetar la distribucin de espacio as como el
aspecto visual de nuestros ejemplos.

1.4 Nuevas Etiquetas


Los nuevos retos del entorno web y tecnolgico demandan la utilizacin de nuevas
herramientas que hagan posible la adaptacin de nuestros sitios web a una inmensa gama de
dispositivos (telfonos celulares, tablets y computadoras entre otros). Desde hace algunos
aos se acuo el termino web 2.0 popularizado en 2004 por Tim O'Reilly el cual hace
referencia a sitios web que facilitan el compartir informacin, la interoperabilidad, el diseo
centrado en el usuario y la colaboracin en la World Wide Web. Teniendo en cuenta los
nuevos requerimientos que demanda internet de los sitios web, surge la pregunta Por qu
es importante HTML?
En primer lugar sabemos que HTML es la base fundamental de creacin de todos los sitios
web y por tanto ha venido evolucionando y adaptndose a las nuevas demandas de la web
por esta razn debemos entender que HTML5 es el presente y el inicio de un futuro
prometedor para el desarrollo de sitios web. Las versiones anteriores de HTML tienen una
carencia marcada de caractersticas, elementos y atributos necesarios para la creacin de
sitios web modernos, hasta cierto punto estas desventajas han disminuido en cuanto a su
impacto debido al creciente uso de herramientas y frameworks (JavaScript, JQuery, JQuery
UI, Flash, etc.). Lo que se pretende con HTML5 es incorporar una cantidad considerable de
nuevos tags o etiquetas acompaadas de muchos y novedosos atributos que en unin con
CSS3 y JavaScript doten al web master de los elementos necesarios para construir sitios
web funcionales y modernos.
En HTML5 existen un buen nmero de etiquetas nuevas las cuales podemos clasificar en:
1- Tags para estructura: etiquetas que ayudan a crear una estructura interna
del documento web y que no son visibles al usuario pues no representan
contenido sino segmentacin o maquetacin.
Etiqueta HTML5
<header>
<nav>
<section>
<article>
<aside>
<footer>

Definicin
Define un encabezado de un documento o seccin de una
pgina web.
Establece una seccin de vnculos de navegacin (mens).
Reserva un espacio de una seccin de un documento.
Define un artculo que puede ser parte de una seccin.
Define contenido aparte del contenido de la pgina mejor
conocido como: contenido tangencial.
Establece un pie de pgina de un documento o seccin.
10

2- Tags para contenido: etiquetas que se utilizan para incrustar contenido


(imgenes, texto, listas, audio, video, controles para formularios, etc.).
Las siguientes etiquetas se utilizan en los formularios, las veremos ms a fondo en los
siguientes temas.
Etiqueta HTML
<datalist>
<keygen>
<output>
<input>

Definicin
Etiqueta que especifica una lista de opciones predefinidas para
los controles de entrada.
Establece un campo generador de par de claves.
Etiqueta que define el resultado de un clculo.
Lo novedoso en la etiqueta input que todos conocemos se
encuentra en los nuevos tipos de input que podemos invocar
desde su atributo type entre ellos estn: search, tel, url, email,
datetime, date, month, week, time, number, range y color.

Las siguientes etiquetas se utilizan para agregar elementos multimedia de vdeo y audio en
nuestra Web, las veremos ms a fondo en los siguientes temas.
Etiqueta HTML
<video>
<audio>
<track>
<source>

Definicin
Inserta un vdeo o una pelcula.
Inserta el contenido de sonido.
Etiqueta que define las pistas de texto para <video> y <audio>.
Define los recursos de medios mltiples para <video> y
<audio>.

La siguiente etiqueta es la de canvas que la veremos ms a fondo en el tema que le


corresponde.
Etiqueta HTML
<canvas>

Definicin
Inserta un lienzo para dibujar los grficos a travs de
secuencias de comandos de un lenguaje de programacin web
(normalmente JavaScript).

Otras etiquetas de contenido importante son:


Etiqueta HTML
<bdi>
<command>
<details>

Definicin
Etiqueta que asla una parte del texto que pueda ser formateada
desde fuera. (Bi-Direccional Isolation)
Crea un botn de comando que un usuario puede invocar.
Etiqueta que inserta los detalles adicionales que el usuario
pueda ver u ocultar.
11

<embed>
<figcaption>
<figure>

<hgroup>
<mark>
<meter>
<progress>

<rp>
<rt>
<ruby>
<summary>
<time>
<wbr>

Define un contenedor para una aplicacin externa o de


contenido interactivo (un plug-in).
Etiqueta que define un ttulo para un elemento <figure>.
Etiqueta que especifica contenido autnomo, como
ilustraciones, diagramas, fotos, listas de cdigos...
Etiqueta que agrupa un conjunto de elementos <h1> a <h6>
cuando un ttulo tiene varios niveles.
Etiqueta que define el texto marcado o resaltado.
Etiqueta que define una medida escalar de forma grfica.
Este elemento puede ser usado (en conjunto con JavaScript)
para mostrar el progreso de una tarea o de un proceso que est
ocurriendo en la pgina web, como por ejemplo un archivo o
recurso que se est subiendo o descargando
Etiqueta que define lo que se muestra en los navegadores que
no son compatibles con anotaciones de rub.
Etiqueta que define una explicacin o pronunciacin de los
caracteres rub (para la tipografa del Este de Asia).
Etiqueta que define una anotacin de rub (para la tipografa
del Este de Asia).
Etiqueta que define un ttulo visible para un elemento
<details>.
Etiqueta que define una fecha u hora.
Etiqueta que define una posible ruptura de una palabra larga.

1.5 Trabajando con las nuevas Tags.

<bdi>
Como su nombre indica (Bi-Direccional Isolation) asla una parte de texto que puede tener
una orientacin de escritura diferente a la del resto del documento, por ejemplo, contenido
en otros idiomas que se escriben de derecha a izquierda. Este elemento es til al integrar
contenido generado por usuarios cuya escritura tiene una direccionalidad desconocida.
Ejemplo:

Ejemplo 3: bdi.html

12

El resultado en el navegador ser:

<command>
Esta etiqueta inserta un botn de comando que el usuario puede invocar. Puede aparecer
como un botn, casilla de verificacin o botn de radio. Es decir, es un elemento al cual le
podemos asignar una funcin determinada que se ejecutar cuando ocurra un evento
predefinido que lo invoca. Esta etiqueta hasta la fecha no est en funcionamiento
todava, nicamente funciona en Internet Explorer 9 y no con todas sus opciones.
Los atributos que podemos utilizar para esta etiqueta son:
Atributo
Checked

Valor
Checked

Disabled
Icon

Disabled
url

Label
Radiogroup

Texto
Nombre de grupo

Type

checkbox
command
radio

Descripcin
Define si el command est activado o no. Utilice
slo si el tipo es de seleccin mltiple.
Define si el command est disponible o no.
Define la direccin URL de una imagen para
mostrar que el command.
Define la etiqueta visible para el command
Define
el nombre
del
grupo
de este
command. Use slo si el tipo es radio.
Define el tipo de command. El valor por
defecto es command

Ejemplo:

Ejemplo 4: command.html

13

El resultado en el navegador internet explorer 9 ser:

<details>
Es un elemento interactivo que se abre para mostrar detalles cuando el usuario lo solicite.
Aparece una flecha para mostrar u ocultar el contenido.
Los atributos que podemos utilizar para esta etiqueta son:

open: Especifica si los datos deben estar visibles para el usuario. Si no se lo


especificamos, por defecto aparecern ocultos.

<summary>
Esta etiqueta define el encabezado visible de la etiqueta <details>.
Importante: hasta la fecha esta etiqueta es compatible nicamente con el navegador
Chrome.
Ejemplo:

14

Ejemplo 5: detailsysummary.html

En el navegador Chrome se ver as:

Ahora podemos apreciar cmo hemos creado dos elementos details, el primero con el
atributo open y el segundo sin l. En el primer caso, vemos como la flecha aparece hacia
abajo, y el contenido del elemento aparece visible. En el segundo caso, la flecha aparece
hacia la derecha, y el contenido oculto. Si hacemos clic sobre las flechas, se oculta o se
muestra el contenido segn cul sea su estado. En ambos casos, el elemento summary
aparece visible al lado de las flechas, en forma de encabezado de dichos detalles.

<embed>
Esta etiqueta permite incorporar un elemento creado con otras aplicaciones, por lo general
los plug-ins. Por ejemplo vdeo, audio, algn elemento flash o cualquier otro tipo de
elemento.
Los atributos que podemos utilizar para esta etiqueta son:

height: Especifica la altura del elemento que vamos a insertar.


src: Especifica la direccin del elemento que queremos insertar.
type: Especifica el tipo MIME del elemento que vamos a insertar.
width: Especifica la anchura del elemento que vamos a insertar.

La etiqueta embed es una buena herramienta para mostrar contenido multimedia en en


nuestra web.
A continuacin se muestra un ejemplo de su utilizacin:

15

Ejemplo 6: embed.html

El resulta es el siguiente:

Podemos apreciar como el elemento flash es incrustado y mostrado en el navegador.

<figure>
Dentro de un documento web representa cualquier contenido autnomo como ilustraciones,
diagramas, fotos, listas de cdigos, etc. Es acompaado de manera opcional por una
leyenda utilizando la etiqueta <figcaption>. Todo lo que contenido dentro del tags <figure>
es un nico elemento. De esta manera, se nos facilita mucho el trabajo de poner un
comentario o cualquier otro tipo de contenido al pie de un diagrama, foto u otro elemento,
trabajo que hasta ahora no resultaba nada cmodo.

<figcaption>
Esta etiqueta fue bastante debatida, ya que la especificacin en sus comienzos quera
utilizar elementos como <legend> en vez de introducir uno nuevo. Finalmente, el elemento
<figcaption> fue elegido como el elemento que se encargar de representar una leyenda
para el elemento <figure>.
El elemento <figcaption> es opcional y puede aparecer una sola vez dentro de un elemento
<figure> por ms que este posea multiples hijos (ejemplo: <img>, <code>).

16

Ejemplo:

Ejemplo 7: figureyfigcaption.html

El resultado es el siguiente:

Ahora podemos apreciar cmo hemos insertado un elemento figure que contiene una
imagen. Mediante el elemento figcaption, podemos incluir cualquier contenido a manera
de leyenda.

17

<hgroup>
Esta etiqueta se utiliza para agrupar un conjunto de elementos <h1> - <h6> cuando el ttulo
tiene varios niveles tales como subttulos, ttulos alternativos, o frases.
Ejemplo:

Ejemplo 8:hgroup.html

El resultado en el navegador es el siguiente:

Podemos ver como agrupamos ttulos sin influir en los dems, aparte de esto el uso de
hgroup no afecta de ninguna manera el SEO (Search Engine Optimization) de nuestro sitio
web.

<mark>
Esta etiqueta marca o resalta parte del contenido de un documento web con el fin de
referenciarlo debido a su grado de importancia en otro contexto.
18

Ejemplo:

Ejemplo 9: mark.html

El resultado en el navegador es:

Notamos como el texto encerrado con la etiqueta <mark> aparece con mayor nfasis
resaltado en fondo amarillo y que el resto de contenido se mantiene igual.

<meter>
La funcin de la nueva etiqueta meter de la especificacin HTML5 es la de indicar una
medida escalar dentro de un rango conocido, o un valor fraccional. Es sumamente
importante recalcar que meter solamente representa un valor y que tanto como su ancho
como su alto pueden modificarse con CSS.
Los atributos que podemos utilizar para esta etiqueta son:

form: Identificador del formulario al que pertenece el elemento.


high: Especifica el intervalo que se considera que es un valor alto.
low: Especifica el intervalo que se considera que es un valor bajo.
max: Especifica el valor mximo de la medida.
min: Especifica el valor mnimo de la medida.
optimum: Especifica cul es el valor ptimo para el indicador.
value: Especifica el valor por defecto para el indicador.

Meter puede convertirse en u elemento que permite la cuantificacin de datos en tiempo


real combinado desde luego con un lenguaje del lado del servidor como JavaScript.
A continuacin presentamos un ejemplo:

19

Ejemplo 10: meter.html

En el navegador tendremos el siguiente resultado:

Ahora bien podemos apreciar las tres escalas de valores previamente definidos en el cdigo
como barras, pero no hay que confundir meter con una barra de progreso son dos cosas
totalmente distintas en esencia aunque a simple vista meter parezca una barra de progreso
no lo es recordemos que es la representacin de una escala numrica, fraccin o conteo.

<progress>
Muestra una barra de progreso que puede ser usado (en conjunto con JavaScript) para
mostrar el progreso de una tarea o de un proceso que est ocurriendo en la pgina web,
como por ejemplo un archivo o recurso que se est subiendo o descargando.
Los atributos que podemos utilizar para esta etiqueta son:

form: Identificador del formulario al que pertenece el elemento.


max: Especifica el valor mximo de la barra de progreso.
value: Especifica el valor en el que se encuentra el progreso.

A continuacin se muestra un ejemplo:

20

Ejemplo 11: progress.html

En el navegador veremos lo siguiente:

Como podemos notar tanto progress como meter son visualmente casi iguales pero el
propsito esencial y funcional es totalmente diferente. Con progress vemos una barra de
progreso como las que todos comnmente conocemos.

<ruby>, <rty> y <rp>


La etiqueta <ruby> especifica una anotacin de rub (Las anotaciones rub se utilizan para
la tipografa del Este de Asia). <ruby> se utiliza en conjunto con las etiquetas <rt> y <rp>:
el elemento <rt> provee informacin acerca de la pronunciacin, y el elemento opcional
<rp> define lo que se mostrar en los navegadores que no soportan las anotaciones de rub.

21

Ejemplo 12: rubyrtyrp.html

El resultado en el navegador Chrome es el siguiente:

Vemos como la ayuda fontica que viene dada por la etiqueta rt, aparece sobre el smbolo.
El contenido de la etiqueta rp solo ser visible si el navegador no soporta anotaciones rub,
pero siempre que la etiqueta forme parte del cdigo. Veamos un ejemplo de navegador que
no soporta anotaciones ruby:

En esta imagen podemos notar la diferencia y tambin vemos como aparece el mensaje que
colocamos con la etiqueta rp.

<time>
Esta etiqueta establece una fecha o una hora. Puede ser utilizada como una forma de
codificar las fechas y horas en una forma legible por mquina. Por ejemplo, mostramos las
palabras 'Da de la independencia de El Salvador', pero detrs de ese texto estar
almacenada la fecha de dicho evento (15 de Septiembre), de esta forma los motores de
bsqueda pueden producir resultados ms inteligentes de bsqueda.
Los atributos que podemos utilizar para esta etiqueta son:

datetime: Contiene la fecha u hora que se especifica. De lo contrario, la fecha u


hora est dada por el contenido del elemento.
22

pubdate: Indica que la fecha u hora en el elemento <time> es la fecha de


publicacin del documento.

Ejemplo:

Ejemplo 13: time.html

El resultado en el navegador es:

Si observamos con detalle pues no se muestra ningn cambio en apariencia. La


funcionalidad de esta etiqueta es ms para el buscador pues en cuanto a SEO se refiere
proporciona un elemento de referencia adicional de bsqueda.

<wbr>
Esta etiqueta ayuda al navegador a identificar donde un texto o palabra demasiado larga va
a cortarse evitando que el texto o palabra se corte en lugares donde no se debe cortar.
Muchas veces el redimensionamiento del navegador por parte del usuario puede causar que
el contenido textual de una pgina web se corte de forma inadecuada wbr ofrece una
solucin sencilla a ese problema.
A continuacin se muestra un ejemplo:

23

Ejemplo 14: wbr.html

En el navegador tendremos el siguiente resultado:

Como podemos observar si redimensionamos el navegador podemos ver como se realizan


los cortes con la etiqueta wbr justo donde la colocamos en el cdigo evitando as que se
corte de una forma inadecuada.

<audio>
Esta etiqueta permite incrustar archivos de sonido dentro de nuestras pginas web.
Actualmente soporta tres formatos de audio: mp3, wav y ogg. Se utiliza en combinacin
con la etiqueta <source> la cual nos permite enlazar un origen desde donde incrustamos el
archivo de audio.
Navegadores y su compatibilidad con los formatos de archivos de audio:
Navegador
MP3
Wav
Ogg
Internet Explorer 9+ SI
NO
NO
Chrome 6+
SI
SI
SI
Firefox 3.6+
NO
SI
SI
Safari 5+
SI
SI
NO
Opera 10+
NO
SI
SI

24

Atributos:
Atributo
autoplay

Valor
Autoplay

controls

Controls

loop
muted

Loop
Muted

preload

auto
metadata
none
URL

src

Descripcin
Especifica que el reproductor auto reproducir el
archivo de audio al cargar la pgina.
Este atributo proporciona los botones o controles al
reproductor (pausar, reproducir, etc.)
Atributo que determina la reproduccin continua.
Especifica que el archivo de audio estar en modo
silencio.
Determina la precarga del archivo de audio la cual
comenzar al cargar la pgina.
Determina la direccin desde donde incrustaremos el
archivo de audio.

Ejemplo:

Ejemplo 15: audio.html

En el navegador se ver as:

Podemos ver que al utilizar la etiqueta <audio> se crea un pequeo reproductor en el


navegador el cual para el caso presenta las caractersticas que se le han asignado con los
atributos utilizados.
25

<video>
Esta nueva etiqueta de html5 permite incrustar un archivo de video en nuestro sitio web.
Actualmente los formatos de video soportado son: mp4, webM y ogg. Al igual que la
etiqueta audio esta se vale de la etiqueta <source> para enlazar el origen del archivo a
reproducir.
Navegadores y su compatibilidad con los formatos de archivos de video:
Buscador
MP4
WebM
Ogg
Internet explorer 9+
SI
NO
NO
Chrome 6+
SI
SI
SI
Firefox 3.6+
NO
SI
SI
Safari 5+
SI
NO
NO
Opera 10.6+
NO
SI
SI
Atributos:
Atributo
Valor
Descripcin
autoplay
autoplay
Especifica que el reproductor auto reproducir el
archivo de video al cargar la pgina.
controls
controls
Este atributo proporciona los botones o controles
al reproductor (pausar, reproducir, etc.)
height
pixeles
Determina el alto en pixeles que tendr en
reproductor.
loop
loop
Atributo que determina la reproduccin continua.
muted
muted
Especifica que el archivo de audio estar en modo
silencio.
poster
URL
Especifica una imagen que se muestra mientras el
vdeo se descarga, o hasta que el usuario pulsa el
botn de reproduccin.

preload

src

auto
metadata
none
URL

width

pixeles

Determina la precarga del archivo de video la


cual comenzar al cargar la pgina.
Determina
la
direccin
desde
donde
incrustaremos el archivo de audio.
Determina el ancho en pixeles del reproductor.

Ejemplo:

26

Ejemplo 16: video.html

El resultado en el navegador ser el siguiente:

Podemos notar ya el video mostrndose en un reproductor dentro de nuestro navegador.


Otra caracterstica que vale la pena mencionar sobre esta etiqueta es que el video incrustado
es fcilmente descargable solo dando click derecho sobre el reproductor y luego en la
opcin Guardar video como, seleccionamos la ruta y guardar.

<canvas>
Esta etiqueta se utiliza para dibujar grficos, sobre la marcha, a travs de secuencias de
comandos (normalmente JavaScript). La etiqueta <canvas> es slo un contenedor de
grficos, debe utilizar un script para crear los grficos.
Atributos de esta etiqueta:
Width: representado por un valor en pixeles del ancho del canvas.
Height: representado por un valor en pixeles del alto del canvas.
Ejemplo:

27

Ejemplo 17: canvas.html

En el navegador podemos ver lo siguiente:

Si observamos bien el cdigo podemos notar que el canvas por s solo no presenta ningn
elemento visual pues es solo un contenedor, la creacin del grfico se realiza mediante
JavaScript. Diseccionando el cdigo del <script> podemos ver la creacin de dos variables:
primero la variable var canvas (en JavaScript la declaracin de variables se hace con la
palabra reservada var seguido del identificador de la variable) que la convertimos en el
canvas cuyo id es micanvas utilizando el objeto document quien es el que tiene el
contenido de toda la pgina que se est visualizando. Esto incluye el texto, imgenes,
enlaces, formularios, Gracias a este objeto vamos a poder aadir dinmicamente contenido
a la pgina, o hacer cambios, segn nos convenga. Dentro de document hacemos uso del
mtodo getElementById ('') el cual invoca a un elemento contenido dentro de la pgina
web a travs de su atributo id. Segundo declaramos la variable var ctx la cual igualamos a
la primer variable canvas y ms especficamente la convertimos en el contexto, mbito o
espacio de dibujo invocando el mtodo getContext ('') el cual retorna un objeto provisto de
mtodos y propiedades para crear grficos o dibujos en dos dimensiones dentro de un
elemento contenedor.
Para este ejemplo solo creamos un recuadro de color LawnGreen dentro del espacio del
canvas. El relleno de color se realiza usando la variable ctx que representa el contexto o
espacio de dibujo, invocamos mediante esta variable al mtodo fillStyle=LawnGreen
igualado aun color y as rellenamos dicho espacio. Por ultimo solo definimos el tipo de
forma que vamos a insertar dentro del contexto para el caso es un cuadrado, para realizar
este proceso lo hacemos con el mtodo fillRect (5,5,120,120) invocado desde la variable
ctx este mtodo necesita de cuatro parmetro en primero represente el punto de inicio del
cuadrado en el eje X de izquierda a derecha, el segundo el inicio del cuadrado en el eje Y
28

de arriba hacia abajo, el tercero representa el ancho del cuadrado en pixeles en el eje X y el
ultimo valor el alto del cuadrado en pixeles en el eje Y.

1.6 Novedades en Formularios


HTML5 ofrece una enorme variedad de novedades entre las que destacan una nueva serie
de tipos de input que a diferencia de los clsicos ofrecen mejoras en cuanto a funcionalidad,
estilos visuales y utilizacin, estos nuevos tipos de input vienen dotados de nuevos
atributos que los hacen superiores a los ya conocidos, as mismo permiten que los
navegadores adopten nuevos comportamientos que sin lugar a dudas harn del trabajo del
desarrollador algo ms fcil.
Algo muy importante a tener en cuenta es que si bien estos elementos todava no son
soportados por todos los navegadores modernos, el uso de los mismos no afectar de
ningn modo en los navegadores que no los soporten, actuarn simplemente como si
fuesen del tipo text y esa es una ventaja pues no afectara prcticamente en mucho el
funcionamiento normal de nuestros sitios.
Por qu se necesita de nuevas caractersticas de formulario?
Siendo mucho ms que realistas, los formularios HTML siempre han sido un dolor de
cabeza. No es muy divertido etiquetarlos y puede ser complicado aplicarles estilos,
especialmente si desea que tengan una apariencia consistente en todos los navegadores y
que se ajusten al aspecto general de su sitio. Adicionalmente, rellenarlos puede ser
frustrante para los usuarios de su sitio web, an si los ha creado con mucho cuidado y
consideracin para hacerlos tan usables y accesibles como sea posible. Crear un buen
formulario es ms un asunto de limitar los daos que generar experiencias de usuario
agradables.
Hace tiempo atrs, cuando el HTML 4.01 se convirti en una recomendacin estable, la
web era un lugar mayormente esttico. S, exista el singular formulario de comentarios o el
libro de visitantes, pero generalmente los sitios web estaban all para que los visitantes
simplemente leyeran el contenido que haba sido publicado. Desde entonces, la web ha
evolucionado. Para muchas personas, el navegador se ha convertido en una ventana a un
mundo de aplicaciones complejas basadas en la web que intentan lograr una experiencia
casi similar a la de su computador o una compleja similitud con el mundo que nos rodea.
Ah surge la necesidad de satisfacer con una variedad de controles ms sofisticados
necesarios para tales aplicaciones, los desarrolladores han estado aprovechando las
bibliotecas y frameworks de JavaScript (como jQueryUI o YUI). Estas soluciones sin duda
han madurado a lo largo de los aos, pero en esencia son una solucin alternativa para
compensar los limitados controles de formulario disponibles en HTML. stos "falsifican"
los widgets ms complejos (como selectores de fecha y controles deslizantes)
superponindoles etiquetado adicional (no siempre semntico) y una gran cantidad de
cdigo JavaScript en la parte superior de las pginas.
HTML5 pretende estandarizar algunos de los controles de formulario mejorando los ms
comunes, desplegndolos de forma nativa en el navegador y obviando la necesidad de estas
29

soluciones alternativas basadas en pesadas secuencia de cdigo muchas veces difciles de


comprender para quienes inician en el mundo del desarrollo.

<input >
La etiqueta <input> especifica un campo de entrada donde el usuario puede introducir
datos. Los elementos <input> se utilizan dentro de un elemento <form> para declarar
controles de entrada que permiten a los usuarios ingresar datos. Un campo de entrada puede
variar de muchas maneras, dependiendo del tipo de atributo type que se le designe.
Atributos:
Atributo
accept

align

alt

Valor
audio/*
video/*
image/*
MIME_type
left
right
top
middle
bottom
texto

Descripcin

Especifica los tipos de archivos que el


servidor acepta (slo para type =
"file").
No es compatible con HTML5.
Desaprobado
en
HTML
4.01.
Especifica la alineacin de una entrada
de imagen (slo para type = "image")
Especifica un texto alternativo para las
imgenes (slo para type = "image")
Especifica si un elemento <input> debe
tener
habilitada
la
funcin
Autocompletar.
Especifica que un elemento <input>
debe recibir automticamente el foco
cuando se carga la pgina.
Especifica que un elemento <input>
debe ser pre-seleccionado cuando se
carga la pgina (para type =
"checkbox" o type = "radio").
Especifica que un elemento <input>
debe desactivarse.

autocomplete

on
off

autofocus

autofocus

checked

checked

disabled

disabled

form

Id de un formulario

Especifica una o ms formas del


elemento <input> pertenecen a otro
elemento <form>.

formaction

URL

formenctype

application/x-www-form-urlencoded
multipart/form-data
text/plain

formmethod

get
post

formnovalidate

formnovalidate

Especifica la direccin URL del


archivo que va a procesar el control de
entrada cuando se enva el formulario
(para type = "submit" y type =
"image").
Especifica cmo se deben codificar los
form-data al enviar al servidor (para
type = "submit" y type = "image").
Define el mtodo HTTP para enviar
datos a la URL del action (para type =
"submit" y type = "image").
Define que los elementos de formulario
30

formtarget

height

_blank
_self
_parent
_top
framename
Numero de pixeles

list

lista de un datalist

max

Un numero
una fecha
Cantidad numrica

maxlength

no deben ser validados cuando se


presenten.
Especifica dnde mostrar la respuesta
que se recibe despus de enviar el
formulario (para type = "submit" y type
= "image").
Especifica el alto de un elemento
<input> (slo para type = "image").
Se refiere a un elemento <datalist> que
contiene opciones predefinidas para un
elemento <input>.
Especifica el valor mximo para un
elemento <input>.
Especifica el nmero mximo de
caracteres permitidos en un elemento
<input>.

min

Un numero
una fecha

Especifica un valor mnimo para un


elemento <input>.

multiple

multiple

name

texto

pattern

Expresin regular

placeholder

texto

readonly

readonly

required

required

size

Un numero de caracteres

src

URL

step

Un numero

type

button
checkbox
color
date
datetime
datetime-local
email
file

Especifica que el usuario puede


introducir ms de un valor en un
elemento <input>.
Especifica el nombre de un elemento
<input>.
Especifica una expresin regular con el
cual el valor de un elemento <input>
se compara.
Especifica una breve alusin que
describe el valor esperado de un
elemento <input>.
Especifica que un campo de entrada es
de slo lectura.
Especifica que un campo de entrada
debe ser completado antes de enviar el
formulario.
Especifica el ancho en caracteres de un
elemento <input>.
Especifica la direccin URL de la
imagen que desea utilizar como un
botn de envo (slo para type =
"image").
Especifica los intervalos de nmeros
legales para un campo de entrada.
Especifica el tipo de elemento <input>
a mostrar.

31

value

hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Texto

width

pixeles

Especifica el valor de un elemento


<input>.
Especifica el ancho de un elemento
<input> (slo para type = "image").

<input type="number">
Este crea un tipo especial de campo de entrada para la introduccin de un nmero. En los
navegadores que lo soportan, aparece como un campo de entrada de texto con un control o
botones de nmero, que le permite aumentar o disminuir su valor.
Compatible hasta la fecha con: Chrome, Opera y Safari las versiones ms recientes.
Ejemplo:

Ejemplo 18: inputnumber.html

Resultado:

32

Como podemos notar en el resultado del navegador vemos un cuadro de texto con pequeos
botones para incrementar o disminuir valores de uno en uno tal como lo definimos con el
atributo step=1, tambin si nos fijamos detenidamente en el cdigo fuente notamos que
establecimos un inicio del rango de valores permitidos min=0 y un mximo max=12 y
por ultimo un valor por defecto value=0.

<input type="range">
Crea un control deslizante que le permita elegir entre un rango de valores. Esta tarea sola
ser una propuesta complicada, semnticamente dudosa, pero con el HTML5 es fcil: slo
tiene que utilizar el tipo de campo de entrada range. Tengamos en cuenta que, por defecto,
este campo de entrada no suele mostrar el valor seleccionado en el momento actual, o
incluso el rango de valores que abarca. Los desarrolladores deben proporcionarlos mediante
otros medios; por ejemplo, para mostrar el valor actual, podramos utilizar un elemento
<output> junto con algo de JavaScript para actualizar la representacin del control cuando
el usuario ha interactuado con el formulario.
Compatible hasta la fecha con: Chrome, Opera y Safari las versiones ms recientes.
Ejemplo:

Ejemplo 19: inputrange.html

Resultado:

Ahora podemos ver el resultado y notaremos una lnea de escala la cual podemos ubicar en
cualquiera de los puntos y tendr un resultado predefinido en los atributos. En la escala se
avanzara de 5 en 5 tal como se define en el atributo step=5, la escala o rango de valores
va de un mnimo min=0 hasta un mximo max=50 y un valor por defecto de 5
value=5.

33

<input type="date"> y otros controles de fecha/hora


HTML5 tiene un nmero de campos de entrada diferentes para crear selectores complejos
de fecha/hora; por ejemplo, calendarios, relojes y sus derivados. Estos se creaban
utilizando trucos y diversas tcnicas basadas en JavaScript u otros frameworks no
semnticos, por lo que es realmente bueno que ahora tengamos formas estandarizadas
fciles de utilizar para crearlos.
Compatible hasta la fecha con: Chrome, Opera y Safari las versiones ms recientes.
Ejemplo:

Ejemplo 20: inputdateytime.html

Resultado:

Como podemos ver se crean tanto un calendario como un selector de hora ambos
totalmente funcionales. Pero all no termina todo hay un nmero de otros campos de
entrada relacionados con fechas que estn disponibles:

datetime: combina la funcionalidad de los dos que hemos analizado anteriormente,


permitindole elegir una fecha y una hora.

month: le permite elegir un mes, almacenado internamente como un nmero entre


1-12; aunque los diferentes navegadores pueden proporcionarle mecanismos
34

visuales y de seleccin ms elaborados, como una lista desplegable con los nombres
de los meses.

week: le permite elegir una semana, almacenada internamente en el formato 2013W16 (semana 16 del ao 2013) donde se muestra el ao y la letra W de la palabra
week (semana) junto al nmero de la semana elegida mediante un selector de fecha
similar a los que ya hemos visto.

Ejemplo:

Ejemplo 21: inputdatetimemonthyweek.html

Resultado:

Al ver el resultado vemos los controles ya dispuestos y funcionales solo hay que clickear
sobre las flechas de los controles y elegir.

<input type="color">
Este campo de entrada muestra un selector (cuadro de dialogo donde se puede elegir un
color) de color. Los navegadores Opera y Chrome le permite al usuario elegir entre una
seleccin de colores, introducir valores hexadecimales directamente en un campo de texto o
invocar el selector de colores nativo del Sistema Operativo.
Compatible hasta la fecha con: Chrome y Opera las versiones ms recientes.

35

Ejemplo:

Ejemplo 22: inputcolor.html

Resultado:

Como podemos apreciar en el resultado se muestra un cuadro de dialogo que permite


seleccionar un color de una paleta o personalizar uno mediante valores numricos o
seleccionndolo.

<input type="search">
El campo de entrada search podemos decir es nada ms que un campo de entrada de texto
destinado a realizar bsquedas. Los navegadores aplican a estos campos de entrada el
mismo estilo que a cualquier funcionalidad de bsqueda especfica del sistema operativo
aunque un poco ms simple. Sin embargo, ms all de esta consideracin puramente
esttica y visual, sigue siendo importante tener en cuenta que el etiquetar explcitamente
campos de bsqueda abre la posibilidad para los navegadores, ayudas tcnicas o
rastreadores automatizados, de hacer algo inteligente con estas entradas en el futuro; por
ejemplo, un navegador podra, posiblemente, ofrecer al usuario una opcin para crear
automticamente una bsqueda personalizada para un sitio especfico las posibilidades para
esta etiqueta son enormes.
36

Compatible hasta la fecha con: Chrome y Safari las versiones ms recientes.


Ejemplo:

Ejemplo 23: inputsearch.html

Resultado:

Observemos en el resultado como la apariencia del input search es aunque simple la de un


cuadro de bsqueda personalizada.

<datalist> y su atributo list


Cuando hablamos de controles de seleccin o lista hasta ahora hemos estado acostumbrados
a utilizar los elementos <select> y <option> para crear listas desplegables de opciones
donde nuestros usuarios pueden elegir entre diversos tems. Pero, qu pasa si deseamos
crear una lista que les permita a los usuarios elegir entre un conjunto de opciones sugeridas,
as como la posibilidad de introducir su propia opcin? Esto sola requerir secuencias de
comandos complicadas en un lenguaje de programacin, pero ahora puede simplemente
usar el atributo list para conectar un campo de entrada corriente a una lista de opciones,
definidas dentro de un elemento <datalist>.
Compatible hasta la fecha con: Opera y Mozilla las versiones ms recientes.
Ejemplo:

37

Ejemplo 24: inputdatalist.html

Resultado:

Si nos percatamos detenidamente en el cdigo de este ejemplo podemos darnos cuenta que
tenemos dos elementos el primero una etiqueta <input> de tipo texto y que a su vez posee
el atributo list igualado al id de un elemento datalist. Segundo una etiqueta datalist que
proporciona un conjunto de opciones o sugerencias en el subelemento <option> que
pueden ser elegidos e introducidos en el input.

<input type="tel">, <input type="email"> e <input type="url">


Como sus nombres lo indican, estos nuevos campos de entrada se refieren a nmeros de
telfono, direcciones de correo electrnico y direcciones web. En los navegadores se
mostrarn como campos de entrada de texto normales, pero hay que sealar claramente qu
tipo de contenido estamos esperando en estos campos ya que esto juega un papel
importante en la validacin de formularios del lado del cliente. Adems, en ciertos
dispositivos mviles el navegador cambiar su teclado en pantalla para entrada de texto
comn por sus variantes ms relevantes al contexto. Una vez ms, es concebible que en el
futuro los navegadores aprovecharn mejor estas entradas explcitamente definidas para
ofrecer funcionalidades adicionales y ms especficas, como el autocompletado de
direcciones de correos electrnicos y nmeros telefnicos basndose en la lista de contactos
o la libreta de direcciones del usuario.

38

Compatible hasta la fecha con: Opera y Mozilla las versiones ms recientes.


Ejemplo:

Ejemplo 25: inputemailurlytel.html

Resultado:

Vemos como el navegador identifica automticamente el contenido y define si es adecuado


o no para el tipo de input que hemos colocado.

<output>
Ya hemos mencionado la etiqueta <output> cuando hablamos del campo de entrada range.
Este elemento sirve como una forma de mostrar el resultado de un clculo, o ms
generalmente, para proporcionar una salida explcitamente identificada a una secuencia de
comandos previamente creada (en lugar de simplemente colocar un texto dentro de un span
o div al azar). Para hacer an ms explcito a que controles de formulario en particular est
vinculado el <output>, podemos, de una manera similar al elemento <label>, pasar una
lista de ids en el atributo opcional for del mismo elemento.

39

Compatible hasta la fecha con: Opera, Chrome y Safari las versiones ms recientes.
Ejemplo:

Ejemplo 26: output.html

Resultado:

Veamos el cdigo fuente de este ejemplo y comenzamos por <form action="."


oninput="mostrar_valores.value = rango.valueAsNumber"> desde ac podemos definir
algunos elementos importantes primero un formulario <form> segundo
oninput="mostrar_valores.value = rango.valueAsNumber" donde oninput es un evento
de JavaScript que se produce cuando se cambia el contenido de un elemento a travs de la
interfaz de usuario, mostrar_valores.value es el output definido as por su atributo name y
ms especficamente su valor actual el cual oscile en el rango de valores dado por los
atributos step="1" min="1" max="10" Value="5 y rango.valueAsNumber se refiere a
pasar un valor numrico mediante la propiedad valueAsNumber del elemento <input>
cuyo atributo id es igual a rango. Ahora bien podemos notar como el valor por defecto
cambia si desplazamos el apuntador del control de izquierda a derecha.

<keygen>
La etiqueta <keygen> especifica un campo generador de par de claves utilizado para
formularios. Cuando se enva el formulario, la clave privada se almacena localmente, y la
clave pblica se enva al servidor.
Compatible hasta la fecha con: Mozilla, Opera, Chrome y Safari
recientes.

las versiones ms

40

Ejemplo:

Ejemplo 27: keygen.html

Resultado:

Como ya lo haba mencionado la etiqueta <keygen> crea para el caso un cuadro de lista
donde se elige un grado de encriptacin (es el proceso para volver ilegible informacin
considera importante. La informacin una vez encriptado slo puede leerse aplicndole
una clave) y elabora dos claves una local y otra que puede ser enviada a un servidor todo
esto sin necesidad de un complicado script facilitando de esta forma el trabajo de los
desarrolladores.

1.7 Validaciones en Formularios


El proceso de validacin de formularios es muy importante tanto del lado del cliente, como
del lado del servidor, para facilitar a los desarrolladores esta tarea de corregir los errores
utilizando complejos script en JavaScript y/o PHP y a la vez para evitar que usuarios
maliciosos enven datos que pudieran causar daos a nuestra aplicacin. Adems dado que
41

los navegadores pueden ahora tener una idea de qu tipo de valores se esperan para los
diversos controles de formulario (ya sea mediante su type, o cualquier lmite
superior/inferior establecido en valores numricos, fechas y horas), pueden ofrecer
adicionalmente validacin de formulario nativa; otra tarea tediosa, que, hasta ahora,
requera que los desarrolladores crearan resmas de JavaScript o utilizaran algn biblioteca
de validacin ya existente. Ahora HTML5 incorpora dentro de los variados tipos de input y
atributos caractersticas propias o nativas para evaluar los contenidos y decidir sin
necesidad de complicados scripts si los datos que los usuarios insertan en las entradas son
los que realmente deben ser.
Nota: para que los controles de formulario sean validados, necesitan tener un atributo name
definido en sus atributos, ya que sin l no sern enviados como parte del formulario.

required
Uno de los aspectos ms comunes y a la vez muy importante de la validacin de
formularios es la designacin de campos obligatorios, no permitiendo que un formulario
sea enviado hasta que ciertas piezas de informacin hayan sido introducidas por el usuario.
Esto puede hacerse ahora simplemente aadindole el atributo required a un elemento
input, select o textarea.
Compatible hasta la fecha con: Mozilla, Opera y Chrome las versiones ms recientes.
Ejemplo:

Ejemplo 28: validacionRequired.html

Resultado:

42

En el resultado podemos apreciar fielmente como el navegador identifica el atributo


required colocado en la etiqueta input y lo interpreta de forma nativa. Para ver el
funcionamiento de este ejemplo basta con dar clic en botn enviar y de forma automtica
nos muestra un mensaje de advertencia y no permite que se envi el formulario hasta que se
llene el campo obligatorio. Otra cosa importante de mencionar es que el cuadro de mensaje
es personalizable mediante el atributo title= podemos agregar texto que ser visto por los
usuarios actualmente esta caracterstica solo es compatible con el navegador Chrome.

pattern
Como hemos visto hasta ahora, los desarrolladores pueden predefinir los tipos de entradas
(etiquetas inputs) que necesitan en sus campos de formulario. En lugar de simple y
llanamente definir campos de entrada de texto (<input type=text>), fcilmente pueden
crear de forma explcita campos de entrada para cosas como nmeros, direcciones de correo
electrnico, nmeros de telfonos y direcciones web. Como agregado de validacin del
lado cliente, los navegadores ahora pueden comprobar que los datos introducidos por el
usuario en estos campos ms especficos coinciden con la estructura de datos prevista por el
desarrollador. En esencia, los navegadores evalan e identifican los valores de entrada en
base a un patrn basado en expresiones regulares e integrado al atributo pattern que define
como deben ser las entradas vlidas en esos tipos de inputs y le advertir al usuario cuando
su entrada no coincida con los criterios preestablecidos.
Compatible hasta la fecha con: Mozilla, Opera y Chrome las versiones ms recientes.
Ejemplo:

Ejemplo 29: validacionPattern.html

43

Resultado:

Desglosando el ejemplo anterior notamos que el atributo pattern se aplica mediante


expresiones regulares (es una expresin que describe un conjunto de cadenas sin
enumerar sus elementos). pattern="[a-z]{6,8}" nos indica que para el presente <input>
solo se aceptan letras de la a-z en minscula y con un mnimo de 6 y un mximo de 8
caracteres a manera de prueba podemos ver en el resultado el valor ingresado en el <input>
Miuser cumple el mnimo de caracteres pero no cumple con lo descrito en la expresin
regular solo letras minsculas. Tambin podemos notar que lo combinamos con el atributo
required para que la introduccin de datos en este campo sea obligatoria.

placeholder
Un truco comn dentro de los formularios web es tener un contenido predeterminado en los
campos de entrada de texto, es decir una especie de texto explicativo que nos d una idea
del tipo de entrada a ingresar, y que desaparecer dejando el control en blanco cuando
dicho control de formulario reciba la informacin del usuario. Aunque esto sola requerir
algo de JavaScript para poder realizar esa tarea, ahora podemos simplemente utilizar el
atributo placeholder, este se encarga de especificar una breve alusin que describe el valor
esperado de un elemento <input>.
Ejemplo:

Ejemplo 30: validacionplaceholder.html

44

Resultado:

En el resultado podemos ver como el atributo placeholder inserta un texto explicativo del
tipo de entrada que se espera en el input, esto en combinacin con la expresin regular
utilizada en el atributo pattern y el required pueden ser herramientas tiles para crear
validaciones muy completas del lado del cliente.
1.8 Otras Etiquetas Importantes de HTML

<select>
La etiqueta select inserta una lista desplegable de opciones en un formulario web. Este tipo
de control presenta un conjunto de opciones <option>, que pueden organizarse en grupos
<optgroup>.
Listado de atributos:
Atributo
autofocus

Valor
autofocus

disabled
multiple
name
required

disabled
multiple
name
required

size

Un numero

Descripcin
Especifica que la lista desplegable debe recibir
automticamente el foco cuando se carga la pgina.
Especfica que una lista desplegable esta desactivada.
Especfica varias opciones se pueden seleccionar a la vez.
Define un nombre para la lista desplegable.
Especifica que se requiere que el usuario seleccione un
valor antes de enviar el formulario,
Define el nmero de opciones visibles en una lista
desplegable.

45

Ejemplo:

Ejemplo 31: select.html

Resultado:

Como podemos ver tenemos ya nuestra lista de opciones creada con la etiqueta <select
autofocus=autofocus> a la cual le asignamos el enfoque por defecto con el atributo
autofocus, luego creamos dos grupos de opciones con la etiqueta <optgroup label=""> y
les asignamos una leyenda o ttulo con el atributo label=, dentro de cada grupo
designamos diversas opciones con la etiqueta <option> y el resultado pues es una lista de
elementos funcional.

46

<textarea>
La etiqueta <textarea> define un control de entrada de texto de varias lneas. Un rea de
texto puede contener un nmero ilimitado de caracteres.
Listado de atributos:
Atributo
autofocus

Valor
autofocus

cols
disabled
maxlength

Un numero
disabled
Un numero

name
placeholder

texto
texto

readonly
required
rows
wrap

readonly
required
Un numero
hard
soft

Descripcin
Especifica que un rea de texto de forma automtica debe
obtener el foco cuando se carga la pgina.
Especifica el ancho visible de un rea de texto.
Especifica que un rea de texto esta desactivada.
Especifica el nmero mximo de caracteres permitidos en
el rea de texto.
Especifica el nombre de un textarea.
Especifica una corta descripcin del valor esperado en un
textarea.
Especifica que un textarea debe ser de slo lectura
Convierte el textarea en un campo obligatorio.
Especifica el nmero de lneas visibles en un rea de texto.
Define como el texto debe cortarse cuando se
redimensiona el textarea.

Ejemplo:

Ejemplo 32: textarea.html

Resultado:

47

Ahora bien en el resultado podemos apreciar un rea de texto funcional y disponible para
ser llenada.

<table>
Este elemento incrusta una tabla como las que ya todos conocemos, una tabla puede venir
acompaada de algunos subelementos como lo son: filas con la etiqueta <tr>, celdas con la
etiqueta <td>, encabezados de celda con la etiqueta <th> y un ttulo con la etiqueta
<caption>.
Ejemplo:

Ejemplo 33: tabla.html

Resultado:

Como podemos ver el resultado de nuestro ejemplo es una tabla que contiene dos filas
definidas con la etiqueta <tr>, dentro de cada fila insertamos tres celdas con la etiqueta
<td>.

48

<img>
Este elemento permite visualizar una imagen en una pgina web. Las imgenes no se
insertan tcnicamente en una pgina HTML, las imgenes estn vinculadas a las pginas.
La etiqueta <img> crea un espacio de contencin para la imagen de referencia.
Listado de atributos:
Atributo
alt
crossorigin

Valor
texto
anonymous
use-credentials

height
ismap

Numero de
pixeles
ismap

src
usemap

URL
#mapname

width

Numero de
pixeles

Descripcin
Especifica un texto alternativo para una imagen.
Permite imgenes de sitios de terceros que permiten el
acceso a travs del origen que se utilizarn usando un
canvas.
Especifica la altura de una imagen.
Especifica una imagen como un servidor del lado de la
imagen-map.
Especifica la direccin URL de una imagen.
Especifica una imagen como un cliente del lado de la
imagen de mapa.
Especifica la anchura de una imagen.

Ejemplo:

Ejemplo 34: img.html

Resultado:

Tenemos el resultado y vemos una imagen vinculada a nuestro documento web.


49

<a>
La etiqueta <a> define un hipervnculo, que se utiliza para vincular una pgina con otra. El
atributo ms importante del elemento <a> es el atributo href, que indica el destino del
enlace.
Por defecto, los enlaces aparecern de la siguiente manera en todos los navegadores:

Un enlace sin visitar est subrayado y azul.

Un enlace visitado est subrayado y prpura.

Un vnculo activo est subrayado y rojo.

Listado de atributos:
Atributo
href
hreflang
media
rel

target

type

Valor
URL
Cdigo del
lenguaje
media_query
alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
_blank
_parent
_self
_top
framename
MIME_type

Descripcin
Especifica la direccin URL de la pgina vinculada.
Especifica el lenguaje del documento vinculado.
Especifica qu medio / dispositivo del documento
vinculado est optimizado para media.
Especifica la relacin entre el documento actual y el
documento vinculado.

Especifica donde se abrir el documento vinculado.

Especifica el tipo MIME del documento vinculado.

50

Ejemplo:

Ejemplo 35: a.html

Resultado:

El resultado final de este ejemplo muestra un hipervnculo a otra pgina el cual fue definido
en el atributo href de la etiqueta <a>.

<iframe>
La etiqueta <iframe> inserta un marco flotante. Un marco integrado se utiliza para insertar
otro documento dentro del documento HTML actual.
Lista de atributos:
Atributo
height
name
sandbox

seamless

Valor
Numero de
pixeles
Nombre
""
allow-forms
allow-sameorigin
allow-scripts
allow-topnavigation
seamless

Descripcin
Especifica la altura de un <iframe>.
Especifica el nombre de un <iframe>.
Permite un conjunto de restricciones adicionales para el
contenido en el <iframe>.

Especifica que el <iframe> debe parecer que es una parte


del documento que contiene.

51

src

URL

srcdoc

HTML_code

width

Numero de
pixeles

Especifica la direccin del documento a insertar en el


<iframe>.
Especifica el contenido HTML de la pgina a mostrar en el
<iframe>.
Especifica el ancho de un <iframe>.

Ejemplo:

Ejemplo 36: iframe.html

Resultado:

Veamos bien este ejemplo si nos enfocamos en el <body> notaremos tres elementos
primarios que son:
1. El header que se encarga de crear un encabezado estructural dentro del documento
web y dentro de este un ttulo <h1>.
52

2. El nav que se encarga de insertar de forma estructural un segmento reservado para


navegacin y dentro del nav dos hipervnculos <a> que llamaran las paginas a
mostrar en el iframe, como parte de los hipervnculos tenemos dos atributos
target=contenido donde se especifica el nombre del marco en el cual se
mostrarn las pginas vinculadas y href= donde se define la ruta y el nombre del
elemento vinculado.
3. Y por ltimo el iframe quien ser el contenedor donde se mostraran las paginas
vinculadas en los hipervnculos. Junto con el iframe podemos apreciar los
siguientes atributos: id establece un identificador del elemento, name asigna un
nombre el cual ser utilizado para referirse al iframe desde los hipervnculos, src
asigna la URL del documento que se mostrara por defecto al cargar la pgina,
width determina el ancho del marco y height determina el alto del marco.
Ahora bien si vemos el ejemplo en un navegador podremos comprobar como carga los
documentos vinculado dentro del iframe.

<object>
La etiqueta <object> define un objeto incrustado en un documento HTML. Se utiliza este
elemento para insertar objetos multimedia (como audio, vdeo, applets de Java, ActiveX,
PDF y Flash) en sus pginas web. Tambin puede utilizar esta etiqueta para incrustar otra
pgina en el documento HTML al igual como lo hara con un iframe. Podemos utilizar la
etiqueta <param> pasar parmetros a los plugins que se han integrado con la etiqueta
<object>.
Listado de atributos:
Atributo
data

Valor
URL

form
height
name
type

Id del formulario
Numero de
pixeles
nombre
Tipo de MIME

usemap

#mapname

width

Numero de
pixeles

Descripcin
Especifica la direccin URL del recurso a ser utilizado por
el objeto.
Especifica que el objeto pertenece a un formulario.
Especifica la altura del objeto.
Especifica un nombre del objeto
Especifica el tipo MIME de los datos especificados en el
atributo de datos.
Especifica el nombre de un mapa de imagen del lado del
cliente para ser utilizado con el objeto.
Especifica la anchura del objeto.

53

Ejemplo:

Ejemplo 37: object.html

Resultado:

Comparando este ejemplo con el anterior (iframe) podemos ver que en apariencia el
resultado tanto de iframe como de object son bastante similares con la diferencia que
object es la propuesta de HTML5 para este tipo de trabajos y dejar de lado todos los
obstculos que el trabajo con marcos ofrece en especial con los buscadores.

54

También podría gustarte