HTML 5

Desarrollo de Interfaces Grficas con HTML5
Estructura de contenido
Mapa Conceptual 2
Introduccin 3
1. HTML5 4
1.1 Estructura bsica de un archivo HTML5. 4
1.2 Definicin de zonas con HTML5. 4
2. Incluyendo CSS 7
2.1 Pseudo Clases. 8
2.2 Personalizando el modelo de interpretacin del navegador Web. 9
3. Otros elementos HTML y CSS 14
3.1 Otras etiquetas HTML5. 14
3.2 Otros estilos CSS. 17
4. JavaScript 19
4.1 Referenciando elementos HTML desde JavaScript. 19
4.2 Asignando eventos a los elementos HTML5 desde JavaScript. 20
5. Los Formularios Web 22
5.1 Otros tipos input. 22
5.2 Otros atributos para la etiqueta input. 23
5.3 Otros elementos para formularios. 24
Glosario 28
Bibliografa 29
Crditos 30
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje

2
HTML5
Integra las tecnologas
HTML5 CSS
incluye nuevas JavaScript
define
define
Etiquetas implementa
MAPA CONCEPTUAL
como incluye
Estilo
article Zonas Funcionalidad
Estructura
audio hgroup propiedades a travs de la gestin de
como
como
video eventos
nav como
section border-Radius
linear-gradient
aside load
text-shadow
header
box-shadow mousemove
transform clic
footer
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Introduccin
El diseo de aplicaciones web consiste en presentar servicios a travs de

internet con la incorporacin de diversos tipos de tecnologas, para ser
visualizadas a travs de navegadores. Algunas de las posibles tecnologas
a considerar incluyen la utilizacin de lenguajes de programacin del lado
del servidor tales como JSP (Java Server Pages), PHP(Hipertext Preproce-
sor) o ASP (Active Server Pages); herramientas para creacin de pginas
automticas o a partir de la implementacin de textos en HTML y JavaS-
cript entre otros. En este material se concentrar en la utilizacin de HTML
en su versin 5.
HTML5 es la evolucin y unificacin de diferentes tecnologas Web que

venan trabajando de manera separada: HTML, CSS 3 y JAVASCRIPT,
estableciendo la estructura el estilo y la funcionalidad de una manera
integral. No se trata de un nuevo lenguaje de programacin, sino de la
incorporacin de nuevas reglas semnticas y sintcticas al bsico HTML
con el fin de poder sacar el mejor provecho de los avances en el mundo
de la Web y satisfacer las necesidades de interactuar con aplicaciones que
puedan ejecutarse en diferentes dispositivos sin necesidad de crear un
cdigo diferente para cada uno de ellos.
En su desempeo como Analista y Desarrollador de Sistemas de Informa-

cin, se hace necesario el uso de este tipo de tecnologas para la construc-
cin de soluciones de software basadas en la Web, maximizando la intero-
perabilidad y proporcionando todos los recursos necesarios para una
agradable experiencia al usuario.
3
1. HTML5
1.1 Estructura bsica de un archivo HTML5
Etiqueta Significado
<!DOCTYPE html> Primera lnea del archivo, indica que se est
creando un archivo HTML y habilita al
navegador para su interpretacin.
<html> En HTML5 la etiqueta principal html
contiene el atributo lang que recibe el
<html lang=es>
cdigo del idioma del contenido del
documento.
<head> Indica el encabezado de la pgina
<meta> Enva informacin oculta para el usuario
sobre las caractersticas de la pgina
<meta charset=iso-8859-1
/>
<meta name=description
content=Ejemplo />
<meta name=keywords
content=pagina, html, web>
<link> Para incorporar en la pgina elementos
<link rel=stylesheet
desde archivos externos
href=miEstilo.css>
Pseudoclase
<title> Aplica a Ttulo deEjemplo
la pgina Significado
<body> Cuerpo de la pgina Todos los elementos
Todos los elementos
* *{ margin: 0px } tendrn un margen
de la pgina
de 0px
1.2 Definicin de zonas con HTML5 p:nth-child(3){

El tercer elemento P
background: de la pgina tendr
nth-child() Un determinado hijo
#FFDDAA un determinado color
HTML5 incorpora nuevas etiquetas que} ayudan a definir las principales
zonas que generalmente dividen a una pgina Web. El uso de fondo
de estas
etiquetas proporciona informacin valiosa a los dispositivos
p:first-child{
El sobreelemento
primer la P
El primer hijo de un
manera de interpretar la informacin contenida en ellas. de la pgina tendr
background:
first-child determinado
elemento }
de fondo
p:last-child{
El ltimo elemento P
El ltimo hijo de un
Pseudoclase Aplica a Ejemplo
background: de Significado
la pgina tendr
last-child determinado
#FFDDAA Todos los elementos
un determinado color
Todos los elementos
elemento }
*
Pseudoclase Aplica a Ejemplo
*{ margin: 0px } tendrn un margen
Significado
de fondo
de la pgina
de
El 0px
elemento P de la
p:nth-child(3){
El tercer tendr
pgina elemento un
P
El nico hijo de un p:only-child{
background: de la pginacolor
determinado tendr
de
4 nth-child()
only-child Un determinado hijo
determinado #FFDDAA un determinado
fondo siemprecolory
elemento SENA - Servicio Nacional de Aprendizaje
}
de fondosea el nico
cuando
<header> </header>
<nav> </nav>
<section> <aside>
<section> <aside>
<footer> </footer>
Etiqueta / Seccin Significado

<header> Encabezado del cuerpo del documento
<nav> Define la zona de navegacin de la pgina,
donde normalmente se encuentra un men
<section> Especifica la zona donde se encuentra el
contenido principal de la pgina Web
<aside> Zona lateral que normalmente contiene
informacin secundaria o que da origen a la
informacin principal
<footer> Delimita el pie de la pgina Web,
normalmente contiene informacin
institucional
Estos elementos aunque claramente delimitan las principales secciones

de una pgina Web, tambin pueden incluirse al interior de otros
elementos para seccionarlos internamente.
En un bloc de notas, los elementos anteriormente mencionados podran

verse de la siguiente manera de forma integrada en un ejemplo:
5
<!DOCTYPE html>
<html lang=es>
<head>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content=HTML5, CSS3, JavaScript>
<title>Este texto es el ttulo del documento</title>
<link rel=stylesheet herf=misestilos.css>
</head>
<body>
<header>
<h1>Encabezado de la pagina web, elemento header</h1>
</header>
</nav>
<h4>barra de menu, elemento nav</h4>
</nav>
</section>
Este es el contenido principal<br/> de la
pagina web, elemento section
</section>
<aside>
Elemento barra lateral<br />
uno<br />dos<br />tres<br />
</aside>
<footer>
Informacin de la empresa, elemento footer
</footer>
</body>
</html>
Si guardamos el contenido del anterior archivo con la extensin .html y lo

abrimos en un navegador Web, el resultado ser el siguiente:
6
Como se aprecia en la imagen anterior, pese a haber estructurado la

pgina Web con las respectivas zonas header, nav, aside y footer, el
resultado obtenido difiere mucho de lo esperado; esto se debe al modelo
de interpretacin por defecto de los navegadores Web conocido como
modelo de caja. Para personalizar este modelo de interpretacin y darle
el diseo por zonas esperado a la pgina Web, se requiere emplear la
tecnologa CSS como veremos ms adelante.
2. Incluyendo CSS
HTML5, integra la estructura, el estilo y la funcionalidad de una pgina

Web bajo tres tecnologas que son de origen independiente (HTML, CSS y
JAVASCRIPT). El estilo est a cargo de la tecnologa CSS proporcionando
elementos de diseo como color, fuente, tamao.
Dentro de un archivo CSS se deben definir las reglas de estilo que se

deben aplicar a las etiquetas HTML de una pgina Web. Cada regla de
estilo se puede aplicar a todos los elementos del mismo tipo, a un
conjunto de etiquetas identificadas con la misma clase o a un elemento en
particular.
Objetivo Estilo
Cambiar el tamao de todos los
p { font-size: 20px }
elementos de tipo <p> en una pgina
Cambiar el tamao de todos los
elementos de la pgina identificados
.miClase { font-size: 20px }
con la misma clase
<p class=miClase>
<b class=miClase>
Cambiar el tamao del elemento que

contenga un determinado identificador #miID { font-size: 10px }
<p id=miID>
7
2.1 Pseudo Clases
Adems de poder referenciar un elemento por su tipo, nombre de clase o

identificacin, CSS permite referenciar elementos por su posicin o
jerarqua dentro de una pgina Web, de esta manera, no es necesario
para el diseador conocer el nombre o identificacin especfica de un
elemento para referenciarlo a travs de un archivo CSS.
Pseudoclase Aplica a Ejemplo Significado

Todos los elementos
Todos los elementos
* *{ margin: 0px } tendrn un margen
de la pgina
de 0px
p:nth-child(3){
El tercer elemento P
nth-child() Un determinado hijo
}
de fondo
El primer elemento P
El primer hijo de un p:first-child{
elemento }
de fondo
p:last-child{
El ltimo elemento P
El ltimo hijo de un
elemento }
de fondo
El elemento P de la
p:only-child{
pgina tendr un
El nico hijo de un
background: determinado color de
only-child determinado
#FFDDAA fondo siempre y
elemento }
cuando sea el nico
P en la pgina
Un determinado Los elementos P que
elemento siempre estn en una
que ocupe una P:nth-child(even){ posicin par dentro
background:
even posicin par dentro
#FFDDAA
de la lista de
de la lista de } elementos P tendrn
elementos del mismo un determinado color
tipo de fondo
elemento siempre estn en una
8 que ocupe una P:nth-child(odd){ posicin impar dentro
background:
odd FAVA - Formacin en Ambientes Virtuales
posicin impar dentro
#FFDDAA
de Aprendizaje deSENAla- Servicio
listaNacional
de de Aprendizaje
de la lista de } elementos P tendrn
Un determinado background: Los elementos P que
#FFDDAA
elemento siempre un determinado
estn en color
una
elemento }
que ocupe una P:nth-child(even){ de fondo par dentro
posicin
background:
even posicin par dentro p:last-child{
El
de ltimo
la elemento
lista P
de
El ltimo hijo de un #FFDDAA
de la lista de } background: de la pgina
elementos tendr
P tendrn
elementos del mismo #FFDDAA un determinado color
elemento }
Pseudoclase Aplica
tipo a Ejemplo Significado
de fondo
Un determinado El
Loselemento P Pdeque
elementos la
elemento siempre pgina
estn tendr
en un
una
El nico hijo de un p:only-child{
que ocupe una P:nth-child(odd){ determinado
posicin color
impar de
dentro
background:
only-child determinado background:
odd posicin impar dentro #FFDDAA fondo la siempre
de lista y
de
elemento #FFDDAA
}
de la lista de } cuando seaP eltendrn
elementos nico
elementos del mismo P en
un la pgina color
determinado
Un determinado
tipo Losfondo
de elementos P que
elemento siempre
Un elemento que se
not(p:nth-child(3){ estn en
Un determinado una
color
not que ocupe
background:
P:nth-child(even){
quiera dejaruna
por fuera #FFDDAA
posicin parse dentro
de fondo no aplica
background:
even posicin par dentro
#FFDDAA
de la lista de
de la lista de elementos P tendrn
Para obtener un listado de los diferentes
} estilos que pueden ser aplicados
elementos
a elementos o etiquetas dedeluna
mismo un determinado
pgina Web, se recomienda visitar color
el
siguiente tipo de fondo enlace:
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
2.2 Personalizando elemento siempre

el modelo estn Web
de interpretacin del navegador en una
que ocupe una P:nth-child(odd){ posicin impar dentro
El modelo
odd de interpretacin
posicin impardedentro
etiquetas del navegador Web
background:
de porla defecto
lista de
es un modelo por bloques, este modelo dispone en la pantalla del
#FFDDAA
de la lista de
navegador los elementos incorporados
} uno debajo delelementos
otro, de P tendrn
esta
elementos del mismo un determinado
forma, cada elemento interpretado ocupa una fila completa de la pgina color
Web. tipo
<!DOCTYPE html> de fondo
<html lang=es>
<head> not(p:nth-child(3){ Un determinado color
Un elemento que se
not <meta charset=iso-8859-1
background:
<meta name=description content=Ejemplo de HTML5> de fondo no se aplica
quiera
<meta dejar por fueracontent=HTML5,
name=keywords #FFDDAA CSS3, JavaScript>
</head>
<body>
<header>
1 <h1>Encabezado de la pagina web, elemento header</h1>
</header>
</nav>
2 <h4>barra de menu, elemento nav</h4>
</nav>
</section>
3 pagina web, elemento section
</section>
<aside>
4 uno<br />dos<br />tres<br />
</aside>
<footer>
5 Informacin de la empresa, elemento footer
</footer>
</body>
</html>
9
Para personalizar este modelo de interpretacin y lograr la distribucin de

las zonas en la pgina Web de acuerdo con un diseo especfico, se debe
identificar cada seccin, encapsular el cuerpo dentro de una etiqueta div
para que permita mayor flexibilidad y dejar que CSS haga el resto.
<!DOCTYPE html>
<html lang=es>
<head>
<title>Este texto es el ttulo delSignificado
Etiqueta documento</title>
<article>
</head> Define unidades independientes de
<body> contenido. Debe ubicarse dentro del
<div id=cuerpo> elemento section
<hgroup> <header id= encabezado>
Etiqueta usada dentro de la seccin header
</header> cuando esta contiene dos o ms elementos
<hgroup> <nav id=menu> de tipo h como h1, h2, h3 su objetivo es
<h1>titulo</h1> <h4>barra de menu, elemento nav</h4>
<h2>subtitulo</h2>
ayudar al navegador a interpretar y procesar
</nav>
</hgroup> correctamente la pgina Web.
<section id=menu>
<mark> Permite principal<br/>
Este es el contenido hacer nfasis en deuna
la palabra o
frase section
pagina web, elemento
</section>
<small> Muestra una palabra o frase en letra
<aside id=lateral>
Elemento barrapequea con />
lateral<br fuente de informacin legal
<address> Para
uno<br />dos<br definir/> informacin de contacto,
/>tres<br
</aside> normalmente usado dentro de la seccin
<footer id=pie>
footer
<time> </footer> Usada para especificar datos relacionados
</div> con fecha u hora
<time datetime=2013-08-27>
</body>
Fecha: 27/08/2013
</html>
</time>
<audio> Usada para reproducir archivos de audio
10 con extensin ogg o mp3 Dependiendo del
<audio navegador podr reproducir SENA un - Servicio
tipo Nacional
de
src=miAudio.mp3></audio> de Aprendizaje
archivo u otro, por esta razn es
o recomendable incluir ambos archivos y
Ahora debemos crear el archivo CSS donde se definirn las caractersticas

de diseo inicial aplicables a la pgina Web. Para ello, basta con digitar el
siguiente cdigo en un archivo nuevo del block de notas o en un editor de
archivos CSS como Dreamweaver:
1 @charset utf-8
2 *{
3 margin:0px;
4 padding:0px;
5 }
6 h1{
7 font:bold 20px Verdana, Geneva, sans-serif;
8 }
9 h2{
10 font:bold 14px Verdana, Geneva, sans-serif;
11 }
12 body{
13 text-align:center;
14 }
15 #cuerpo{
16 width:960px:
17 margin:15px auto;
18 text-align:left;
19 }
Explicacin del cdigo
Lnea Explicacin
2..5 Se establece mediante el selector * que todos los elementos
van a tener un margen de 0 pixeles y un espacio entre el
contenido de una etiqueta y su contenedor de 0px
6..11 Se define un estilo, tamao y tipo de fuente especfico para
todas las etiquetas H1 y H2
12..14 Se define la alineacin del texto central para el cuerpo de la
pgina Web
15..19 Se establece el ancho, las mrgenes y la alineacin del texto
del elemento identificado con el ID cuerpo, el cual
corresponde a la etiqueta div que encierra al resto de
etiquetas
11
20 @encabezado{
21 background:#fffbb9;
22 border: 1px solid #999999;
23 padding: 20px;
24 }
25 #menu{
26 background: #cccccc;
27 padding: 5px 15px;
28 }
29 #seccion{
30 float:left;
31 width:660px;
32 margin:20px;
33 }
34 #lateral{
35 float:left;
36 width:220px;
37 margin:20px 0px;
38 padding:20px;
39 background:#cccccc;
40 }
41 #pie{
42 clear:both;
43 text-align:center;
44 padding:20px;
45 border=top:px solid #999999;
46 }
Lnea Explicacin
20..24 Se establece un color de fondo, borde y espacio entre el texto
y el elemento contenedor para la seccin identificada como
encabezado, la cual corresponde a la seccin header de la
pgina Web
25..28 Se define un color de fondo y un espacio entre el texto y su
contenedor para la etiqueta identificada con el nombre menu,
correspondiente a la seccin nav de la pgina Web
29..33 Se establece una ubicacin (izquierda del rea disponible),
ancho y margen para la etiqueta identificada con el nombre
seccion, correspondiente a la seccin section de la pgina
Web
34..40 Se establece una ubicacin (izquierda del rea disponible),
ancho, margen y color de fondo para la etiqueta identificada
con el nombre lateral, correspondiente a la seccin aside de
la pgina Web
41..46 Se restaura el flujo normal de la pgina Web (propiedad
clear), es decir que la ubicacin y posicin del elemento no
est ligada a la posicin del elemento anterior y se define la
alineacin del texto, el espacio entre el texto y su contenedor
y el estilo del borde para la etiqueta identificada con el
nombre pie, correspondiente a la seccin footer de la pgina
Web
12
tipo de fondo
not(p:nth-child(3){ Un determinado color
Un elemento que se
not background:
de fondo noHTML5
se aplica
quiera dejarDesarrollo de Interfaces Grficas
por fuera #FFDDAA con
Ahora guardamos el archivo con el nombre misestilos.css en el mismo

directorio donde se encuentra la pgina web HTML
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<div id=cuerpo>
<header id= encabezado>
</header>
<nav id=menu>
<h4>barra de menu, elemento nav</h4>
</nav>
<section id=menu>
pagina web, elemento section
</section>
<aside id=lateral>
uno<br />dos<br />tres<br />
</aside>
<footer id=pie>
</footer>
</div>
</body>
</html>
Y al abrir nuevamente la pgina Web, tendramos el siguiente resultado:
Encabezado de la pagina Web, elemento header

barra de enu, elemento nav
Este es el contenido principal

de la paguna Web, elemento section Elemento barra lateral
uno
dos
tres
13
3. Otros elementos HTML y CSS
3.1 Otras etiquetas HTML5
Con las anteriores etiquetas header, nav, section, aside, footer, se define
la estructura bsica de una pgina Web con HTML5, a continuacin, se
presentarn nuevas etiquetas a utilizar dentro del contenido de la pgina
Web:
<article> Define unidades independientes de
contenido. Debe ubicarse dentro del
elemento section
<hgroup> Etiqueta usada dentro de la seccin header
cuando esta contiene dos o ms elementos
<hgroup> de tipo h como h1, h2, h3 su objetivo es
<h1>titulo</h1>
<h2>subtitulo</h2>
ayudar al navegador a interpretar y procesar
</hgroup> correctamente la pgina Web.
<mark> Permite hacer nfasis en una palabra o
frase
<small> Muestra una palabra o frase en letra
pequea con fuente de informacin legal
<address> Para definir informacin de contacto,
normalmente usado dentro de la seccin
footer
<time> Usada para especificar datos relacionados
con fecha u hora
Fecha: 27/08/2013
</time>
<audio> Usada para reproducir archivos de audio
con extensin ogg o mp3 Dependiendo del
<audio navegador podr reproducir un tipo de
src=miAudio.mp3></audio>
especificar las dos posibles fuentes con la
<audio> etiqueta interna source, para que el
<source navegador procese el archivo apropiado.
src=miAudio.mp3>
<source
src=miAudio.ogg> Atributos:
</audio> src url o nombre archivo a reproducir
controls Presenta los controles de reproduccin
autoplay Reproduccin automtica del audio
loop Reproducciones infinitas del audio
<video> Usada para reproducir archivos de video con

extensin ogg o mp4 Dependiendo del
<video navegador podr reproducir un tipo de
src=miVideo.mp4></video>
14
FAVA - Formacin en Ambientes Virtualeslas
especificar dos posiblesSENA
de Aprendizaje - Servicio
fuentes conNacional
la de Aprendizaje
<video> etiqueta interna source, para que el
<source
src=miAudio.mp3>
<source
src=miAudio.ogg> Atributos:de Interfaces Grficas con HTML5
Desarrollo
</audio> src url o nombre archivo a reproducir
autoplay Reproduccin automtica del audio
loop Reproducciones infinitas del audio
<article>
<video> Define unidades
Usada para reproducir independientes
archivos de devideo con
contenido.
extensin ogg Debe oubicarse dentro del
mp4 Dependiendo del
<video elemento section
navegador podr reproducir un tipo de
<hgroup> Etiqueta usada dentropor de laestaseccin header
archivo u otro, razn es
o cuando esta
recomendable contiene
incluir dos o
ambos ms elementos
archivos y
<hgroup> de tipo h como
especificar las h1,
dosh2, h3 su
posibles objetivo
fuentes es la
con
<h1>titulo</h1>
<video>
<h2>subtitulo</h2>
ayudar
etiqueta al navegador
interna a interpretar
source, para y procesar
que el
<source correctamente
navegador la pgina
procese Web. apropiado.
el archivo
</hgroup>
src=miVideo.mp3>
<mark>
<source Permite hacer nfasis en una palabra o
src=miVideo.ogg> Atributos:
frase
</video> src url o nombre archivo de video a reproducir
<small> Muestra
controls unaPresentapalabra o de
los controles frase en letra
reproduccin
pequea con fuente de informacin legal
autoplay Reproduccin automtica del video
loop Reproducciones infinitas del video
<address> Para
poster definirProveeinformacin
una imagen que ser demostrada
contacto,
normalmente usado dentro de la seccin
En la seccin nav y section defooter
la pgina Web, se han incluido algunas
<time>
otras etiquetas como se aprecia en la para
Usada especificar
siguiente imagen: datos relacionados
con fecha u hora
Fecha: 27/08/2013
10 <body>
</time>
11 <div id=cuerpo
<audio>
12 <header id=encabezado>Usada para reproducir archivos de audio
13 con extensin
<h1>Enacabezado de la pagina ogg header</h1>
Web, elemento o mp3 Dependiendo del
14
<audio </header>
15 <nav id=menu> navegador podr reproducir un tipo de
src=miAudio.mp3></audio>
16 <ul> archivo u otro, por esta razn es
17
o 18
<li>menu 1</li> recomendable incluir ambos archivos y
<li>menu 2</li>
19 <li>menu 3</li> especificar las dos posibles fuentes con la
<audio>
20 </ul> etiqueta interna source, para que el
<source
21 </nav> navegador procese el archivo apropiado.
src=miAudio.mp3>
22 <section id=seccion>
<source <article>
23
24 <h2>Titulo del primerAtributos:
src=miAudio.ogg> artculo</h2>
25
</audio> <p>Este es el contenidosrcprincipal del
url o nombre archivo a reproducir
<mark>artculo 1</mark></p>
26 <footer> controls Presenta los controles de reproduccin
27 autoplay
<small> fin artculo 1</samll> Reproduccin automtica del audio
28 </footer> loop Reproducciones infinitas del audio
29 </article>
<video>
30 <article> Usada para reproducir archivos de video con
31 <h2>Titulo del segudoextensin
artculo</h2>ogg o mp4 Dependiendo del
32
<video <p>Este es el contenido principal del <mark>artculo 2</mark></p>
33 <footer>
navegador podr reproducir un tipo de
34 archivo
<samll> fin artculo u otro, por esta razn es
2</samll>
o 35 </footer> recomendable incluir ambos archivos y
36 </article> especificar las dos posibles fuentes con la
37 </section>
<video> etiqueta interna source, para que el
src=miVideo.mp3>
<source
loop Reproducciones infinitas del video
poster Provee una imagen que ser mostrada
15
Al guardar la pgina y abrirla nuevamente, se puede observar el nuevo

contenido:

. menu 1
. menu 2
. menu 3
Titulo del primer articulo

Este es el contenido principal del articulo 1 Elemento barra lateral
Fin articulo 1 uno
Titulo del segundo articulo dos
Este es el contenido principal del articulo 2 tres
Fin articulo 2
Ahora podemos pasar a cambiar el estilo de este contenido, incorporando

las siguientes lneas de cdigo al archivo misestilos.css
48 article{
49 background:#FFFBCC;
50 bprder: 1px solid #999999;
51 padding: 20px;
52 margin-bottom: 15px;
53 }
54 article footer{
55 text-align: right;
56 }
57 #menu li{
58 display: inline-block;
59 list-style: none;
60 padding: 5px;
61 font: bold 14px verdana, sans-serif;
62 }
Lnea Explicacin
48..53 Se establece un color de fondo, borde y espacio entre el texto
y el elemento contenedor para cada etiqueta tipo article
presente en la pgina Web
54..56 Define la alineacin del texto a la derecha para toda etiqueta
footer que se encuentre dentro de una etiqueta article
57..62 Se establece para cada elemento li (lista) dentro de la
seccin identificada como menu, la forma en la que se debe
mostrar (horizontal, sin vieta, espacio y fuente)
16
El resultado despus de aplicar los estilos es el siguiente:

menu 1 menu 2 menu 3
Titulo del primer articulo Elemento barra lateral

Este es el contenido principal del articulo 1 uno
Fin articulo 1 dos
tres
Titulo del segundo articulo
Este es el contenido principal del articulo 2
Fin articulo 2
3.2 Otros estilos CSS.
Durante las ltimas versiones de CSS y gracias a su integracin con

HTML5, han sido grandes los avances que en relacin a estilo e incluso
interactividad ha tenido esta tecnologa. Para el uso de estos nuevos
estilos, es recomendable incluir los prefijos moz- y webkit- para su
correcta interpretacin en los navegadores basados en motores Gecko y
WebKit como Firefox, Safari y Google Chrome. Ejemplo, para definir la
propiedad border-radius a un valor de 20px, se hara as:
-moz-border-radius: 20px y webkit-border-radius: 20px.
Propiedad/Estilo Efecto/Estilo Ejemplo
Esquinas redondeadas. Recibe el
Border-radius border-radius: 20px
valor de la curvatura
Sombras. Recibe el color,
Box-shadow desplazamiento horizontal y box-shadow: #000000 5px 5px 10px
vertical y la difuminacin
Sombra para texto. Recibe el
text-shadow: #000000 5px 5px
Text-shadow color, desplazamiento horizontal y
10px
vertical y la difuminacin
Funcin aplicada a la propiedad
background para dar un efecto de background:linear-
Linear-gradient
difuminacin a un fondo. Recibe el gradient(top,color,color)
punto inicial y los dos colores

Modifica la forma de un elemento
transform: scale (2)
a travs de las funciones scale
transform: rotate (45deg)
Transform (escalar), rotate (rotar), skew
transform: skew (20deg,20deg)
(inclinar) y translate (trasladar) transform: translate (50px)
17
Aplicando los nuevos estilos:
57 article{
58 background:#FFFBCC;
59 bprder: 1px solid #999999; Titulo del primer articulo
60 padding: 20px; Fin articulo 1
61 margin-bottom: 15px;
62 -moz-border-radius: 20px; Titulo del segundo articulo
63 -webkit-border-radius: 20px; Fin articulo 2
64 border-radius: 20px;
65 -moz.box-shadow: rgb(150,150,150) 5px 5px;
66 -webkit-box-shadow: rgb(150,150,150) 5px 5px;
67 box-shadow: rgb(150,150,150) 5px 5px;
68 }
27 #menu{
29 padding: 5px 15px; menu 1 menu2 menu3
30 background: -webkit-linear-gradient(tap, #FFFFFF, #006699;

31 background: -moz-linear-gradient(top, #FFFFFF, #006699;
32 }
38 #lateral{
39 float: left;
40 width: 220px;
Elemen
41 margin: 20px 0px; uno
to barr
a latera
l
42 padding: 20px; dos
43 background:#cccccc; tres
44 -moz-transform: rotate(10deg);
45 -webkit-transfor: rotate(10deg);
46 }
Se obtienen los siguientes cambios en la pgina Web:

menu 1 menu2 menu3
Titulo del primer articulo Elemen

to barr
Este es el contenido principal del articulo 1 uno a latera
Fin articulo 1 l
dos
tres
Fin articulo 2
18
Desarrollo
loop
de Interfaces Grficas con HTML5
Reproducciones infinitas del video
poster Provee una imagen que ser mostrada
4. JAVASCRIPT
La tecnologa encargada de brindar interactividad en HTML5 es

JavaScript, el cdigo JavaScript puede estar embebido dentro de la pgina
HTML o en un archivo aparte con su propia extensin .js. En este ltimo
caso que es el ms recomendado, se debe incluir la etiqueta
<script>dentro del encabezado de la pgina Web, referenciando el
nombre del archivo .js en su atributo src. Ejemplo: <script
src=miArchivoJavaScript.js></script>
4.1 Referenciando elementos HTML desde JavaScript
Para acceder a un determinado elemento HTML desde JavaScript existen

diferentes mecanismos llamados selectores:
Selector Accede a Ejemplo

getElementsByTagName Todos los elementos de getElementsByTagName(p)
Retorna un arreglo con todos los elementos
una determinada Pexistentes en la pgina Web.
etiqueta
getElementsByTagName(p)[0]
Accede al primer elemento tipo P de la
pgina Web.
getElementByID Un elemento en getElementById(miID)

Accede al elemento de la pgina Web cuyo
particular identificado ID es miID
con un determinado ID
getElementsByClassName Uno o varios elementos getElementsByClassName(miClase)
Accede a los elementos cuyo className
con un className sea miClase
determinado
querySelector Un elemento mediante querySelector(p:first-child)
Accede al primer elemento P de la pgina
la sintaxis de seleccin Web
de CSS
querySelectorAll Una lista de elementos querySelectorAll(#principal p)
Retorna un arreglo con todos los elementos
que coincida con el P que sean hijos de principal
patrn de bsqueda
CSS
19
4.2 Asignando eventos a los elementos HTML5 desde JavaScript
El mecanismo estndar para asignar eventos a los elementos HTML5 es

utilizando el mtodo addEventListener, el cual posee la siguiente
sintaxis:
Elemento.addEventListener(evento,funcin,boolean)
Donde:
Elemento: Es la referencia a cualquier elemento HTML
Evento: Nombre del evento que se desea controlar
Funcin: Nombre de la funcin encargada de gestionar el evento
Boolean: Recibe el valor True o False dependiendo si se desea emplear
el evento anidado con otros eventos o no. Generalmente este parmetro
es False
Ejemplo:
document.querySelector(#miTitulo).addEventListener(click,
procesarClick,false);
Define que la funcin procesarClick se debe ejecutar al hacer click

sobre el elemento HTML identificado con el id miTitulo
Ahora es posible con cdigo JavaScript asignar eventos al men de la

pgina Web para que cada vez que se d clic en alguna de sus opciones,
se presente un respectivo mensaje:

menu 1 menu2 menu3
x
Alerta de JavaScript
Titulo del primer articulo Elemen
to barr
Este es el contenido principal
Hizo clic endel articulo
el menu 1 1 uno a latera
Fin articulo 1 l
Aceptar dos
tres
Fin articulo 2
20
La pgina HTML debe indicar su acceso a un archivo Javascript:
1 <!DOCTYPE html>
2 <html lang=es>
3 <head>
4 <meta charset=iso-8859-1
5 <meta name=description content=Ejemplo de HTML5>
6 <meta name=keywords content=HTML5, CSS3, JavaScript>
7 <title>Este texto es el ttulo del documento</title>
8 <link rel=stylesheet herf=misestilos.css>
9 <script src=miArchivoJavaScript.js></script>
10 </head>
El cdigo JavaScript, guardado en un archivo llamado

miArchivoJavaScript.js y ubicado en el directorio donde se encuentra el
archivo HTML es el siguiente:
1 window.addEventListener(load,asignarEventos,false);
2 function asignarEventos()
3 {
4 document.getElemensById(menu1).addEventListener(click,clic1,false);
7 }
8 function click1()
9 {
10 window.alert(Hizo click en el menu 1);
11 }
12 function click2()
13 {
15 }
16 function click3()
17 {
19 }
Lnea Explicacin
1 Al cargar la pgina (evento load) llama a la funcin asignarEventos
2..7 Accede a los elementos de la pgina Web identificados como
menu1, menu2 y menu3 y le asigna al evento clic la ejecucin de
una determinada funcin (clic1, clic2 o clic3)
8..19 Funciones que se ejecutan al hacer clic sobre alguno de los mens
y que presentan un respectivo mensaje
21
5. Los Formularios Web
Los formularios Web en HTML5 incluyen nuevos tipos y controles que

facilitan el ingreso de informacin por parte del usuario.
5.1 Otros tipos input.
Etiqueta <input> atributo type: bre

Nom
ail
e-m
c cin
Dire
Type Imagen Ejemplo Descripcin

email <input type="email" Valida el correcto
name="miEmail" /> ingreso de una
direccin de correo
electrnico
url <input type="url" Valida el correcto

name="miUrl" /> ingreso de una url
number <input type="number" Permite seleccionar

name="miNumero" nmeros dentro de un
min="0" max="50" rango especificado
step="5"/>
range <input type="range" Permite posicionar una

name="miRango" barra de
min="0" max="10" desplazamiento en una
step="1"> posicin relativa a un
valor dentro de un
rango determinado
date <input type="date" Permite seleccionar

name="miFecha" /> una fecha
time <input type="time" Permite seleccionar

name="miHora" /> una hora
color <input type="color" Permite seleccionar un

name="miColor" /> color
22
5.2 Otros atributos para la etiqueta input.
Atributo Valor Significado Imagen

esperado
placeholder Texto Texto presentado dentro
del campo como
sugerencia para la
entrada
required No aplica Valida que el campo no

se enve vaco
pattern Expresin Permite ingresar una

expresin regular para
regular
realizar cualquier tipo de
validacin personalizada
form Nombre de un Permite asociar un <input type="text"

form="formulario">
elemento o control a un
formulario en
formulario Web, aunque
la pgina el control no est
contenido dentro del
formulario
list Id de un Presenta un listado de

valores sugeridos para
elemento de
ser introducidos en la
formulario tipo entrada del formulario
<datalist>
23
5.3 Otros elementos para formularios.
Etiqueta Significado Imagen

<datalist> Permite construir una lista de
<datalist id="postal"> elementos sugeridos para ser

<option value=1001 utilizados en un elemento de
label=Telfono 1>
<option value=1002 entrada en un formulario
label=Telfono 2>
</datalist>
<progress> Permite visualizar el avance
<progress value="5" en la ejecucin de una tarea

max="15"></progress>
<meter> Similar a progress pero con la
<meter value="5" min="1" intencin de mostrar una

max="15"></meter> medida
Ahora es posible agregar un formulario Web a la pgina que se viene

construyendo, para esto reemplazamos en el archivo html el cdigo de la
seccin <aside> por las etiquetas necesarias para crear el formulario
Web.
24 <article>
25 <h2>Titulo del primer articulo</h2>
26 <p>Este es el contenido princinpal del <mark>articulo1</mark></p>
27 <footer>
28 <small> fin articulo 1</small>
29 </footer>
30 </article>
31 <article>
32 <h2>Titulo del segundo articulo</h2>
33 <p>Este es el contenido princinpal del <mark>articulo2</mark></p>
34 <footer>
35 <small> fin articulo 2</small>
36 </footer>
37 </article>
38 </action>
39 <aside id=lateral>
40 <form name=formulario>
41 <h2> Formulario Web </h2>
42 <table border=0>
43 <tr><td>Nombre:</td><td><input type=text name=txtNombre required></td></tr>
44 <tr><td>Correo:</td><td><input type=email name=miEmail placeholder=Ingrese email/></td></tr>
45 <tr><td>Estrato:</td><td><input type=number name=numEdad min=1 max=6 step=1/></td></tr>
46 <tr><td>Fecha:</td><td><input type=text name=txtNombre equired></td></tr>
47 <tr><td><input type=submit name=btnEnviar value=Enviar/></td></tr>
48 </table>
49 </form>
50 </aside>
51 <footer id=pie>
52 Informacin de la empresa, elemento footer
53 </footer>
54 </div>
55 </body>
56 </html>
24
Lnea Explicacin
40 Define el inicio del formulario Web
41 Ttulo para el formulario Web
42 Inicio de tabla, esta tabla de borde cero se utiliza para que los
elementos del formulario queden correctamente alineados
43..47 Definicin de los campos del formulario Web (nombre, correo,
estrato y fecha)
48 Fin de la tabla
49 Fin del formulario Web
Mejoramos la apariencia del formulario Web a travs del archivo

misEstilos.css incluyendo las siguientes lneas:
25
17 table{
18 text-shadow: #369 2px 2px 2px;
19 font-family:Verdana, Geneva, sans-serif;
20 font-sizw:10px
21 }
22 #cuerpo{
23 width:960px;
24 margin:15px auto;
25 text-align:left;
26 }
27 #encabezado{
28 background: #ffbb9;
29 border: 1px solid #999999;
30 padding: 20px;
31 }
32 #menu{
34 padding: 5px 15px;
35 background: -webkit-linear-gradient(top, #FFFFFF, #006699);
36 background: -moz-linear-gradient(top, #FFFFFF, #006699);
37 }
38 #seccion{
39 floar:left;
40 width:660px;
41 margin:20px;
42 }
43 #lateral{
44 float:left;
45 width:220px;
46 margin:20px 0px;
47 padding:20px;
48 background:#cccccc;
49 -moz-border-radius: 20px;
50 -webkit-border-radius: 20px;
51 border-radius: 20px;
52 -moz-box-shadow: rgb(150,150,150) 5px 5px;
53 -webkit-box-shadow: rgb(150,150,150) 5px 5px;
54 box-shadow: rgb(150,150,150) 5px 5px:
55 }
Lnea Explicacin
17..21 Establece el estilo para las tablas presentes en el archivo HTML
49..54 Define puntas redondeadas y sombreadas para el elemento
identificado con el id lateral, el cual corresponde a la seccin aside
justamente donde se encuentra el formulario
26
Ahora la pgina Web luce de esta manera:

menu 1 menu2 menu3 x
Alerta de JavaScript
Hizo clic en el menu 3
Titulo del primer articulo

Este es el contenido principal del articulo 1 Aceptar Formulario Web
Fin articulo 1 Nombre:
Correo: Ingrese email
Titulo del segundo articulo Estrato:

Este es el contenido principal del articulo 2 Fecha: dd/mm/aaaa
Fin articulo 2 Enviar
27
GLOSARIO
HTML: HyperText Markup Language, Lenguaje de marcacin de hiper-

texto, es un estndar que, en sus diferentes versiones, define una estruc-
tura bsica y un cdigo para la definicin de contenido de una pgina
web, como texto, imgenes, etc..
CSS: Las hojas de estilo en cascada o (Cascading Style Sheets por sus
siglas en ingls) hacen referencia a un lenguaje de hojas de estilos usado
para describir la presentacin semntica (el aspecto y formato) de un
documento escrito en lenguaje de marcas. Su aplicacin ms comn es
dar estilo a pginas webs escritas en lenguaje HTML y XHTM.
BROWSER: Tambin denominado Navegador. Es un software que permi-

te 10
el acceso a Internet, interpretando la informacin de archivos y sitios
web para que stos puedan
FAVA ser
- Formacin ledos.Virtuales de Aprendizaje
en Ambientes SENA - Servicio Nacional de Aprendizaje
28
BIBLIOGRAFA
Gauchat, Juan Diego. (2012). El gran libro de HTML5, CSS3 y Javascript

(1.Ed). Barcelona, Espaa: Ediciones tcnicas Marcombo.
Wikipedia La enciclopedia libre. Consultado en septiembre 30 de 2013,

disponible en http:es.wikipedia.org.
924
29
CREDITOS
Control de documento
Construccin Objeto de Aprendizaje
Desarrollador de contenido
Experto temtico Andrs Julin Valencia Osorio
Asesor pedaggico Claudia Milena Hernndez Naranjo
Carlos Alberto Espinosa Gmez

Produccin multimedia
Victor Hugo Tabares Carreo
Programador Daniel Martnez
Lder expertos temticos Ana Yaqueline Chavarro Parra
Lder lnea de produccin Santiago Lozada Garcs
25
30

HTML 5

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML 5

Caricato da

Copyright:

Formati disponibili

Desarrollo de Interfaces Grficas con HTML5

FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje

Integra las tecnologas

FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

El diseo de aplicaciones web consiste en presentar servicios a travs de

HTML5 es la evolucin y unificacin de diferentes tecnologas Web que

En su desempeo como Analista y Desarrollador de Sistemas de Informa-

1.1 Estructura bsica de un archivo HTML5

1.2 Definicin de zonas con HTML5 p:nth-child(3){

Etiqueta / Seccin Significado

Estos elementos aunque claramente delimitan las principales secciones

En un bloc de notas, los elementos anteriormente mencionados podran

Si guardamos el contenido del anterior archivo con la extensin .html y lo

Como se aprecia en la imagen anterior, pese a haber estructurado la

HTML5, integra la estructura, el estilo y la funcionalidad de una pgina

Dentro de un archivo CSS se deben definir las reglas de estilo que se

Cambiar el tamao del elemento que

2.1 Pseudo Clases

Adems de poder referenciar un elemento por su tipo, nombre de clase o

Pseudoclase Aplica a Ejemplo Significado

2.2 Personalizando elemento siempre

Para personalizar este modelo de interpretacin y lograr la distribucin de

Ahora debemos crear el archivo CSS donde se definirn las caractersticas

Explicacin del cdigo

Ahora guardamos el archivo con el nombre misestilos.css en el mismo

Y al abrir nuevamente la pgina Web, tendramos el siguiente resultado:

Encabezado de la pagina Web, elemento header

Este es el contenido principal

Informacin de la empresa, elemento footer

3. Otros elementos HTML y CSS

3.1 Otras etiquetas HTML5

<video> Usada para reproducir archivos de video con

Al guardar la pgina y abrirla nuevamente, se puede observar el nuevo

Encabezado de la pagina Web, elemento header

Titulo del primer articulo

Ahora podemos pasar a cambiar el estilo de este contenido, incorporando

El resultado despus de aplicar los estilos es el siguiente:

Encabezado de la pagina Web, elemento header

Titulo del primer articulo Elemento barra lateral

Informacin de la empresa, elemento footer

3.2 Otros estilos CSS.

Durante las ltimas versiones de CSS y gracias a su integracin con

punto inicial y los dos colores

Aplicando los nuevos estilos:

60 padding: 20px; Fin articulo 1

30 background: -webkit-linear-gradient(tap, #FFFFFF, #006699;

Se obtienen los siguientes cambios en la pgina Web:

Encabezado de la pagina Web, elemento header

Titulo del primer articulo Elemen

Informacin de la empresa, elemento footer

La tecnologa encargada de brindar interactividad en HTML5 es

4.1 Referenciando elementos HTML desde JavaScript

Para acceder a un determinado elemento HTML desde JavaScript existen

Selector Accede a Ejemplo

getElementByID Un elemento en getElementById(miID)

4.2 Asignando eventos a los elementos HTML5 desde JavaScript

El mecanismo estndar para asignar eventos a los elementos HTML5 es

Define que la funcin procesarClick se debe ejecutar al hacer click

Ahora es posible con cdigo JavaScript asignar eventos al men de la

Encabezado de la pagina Web, elemento header

Informacin de la empresa, elemento footer

La pgina HTML debe indicar su acceso a un archivo Javascript: