01HTML5

1
HTML5
MGTI. Alejandro Csar Valencia Garca
HTML5
Es el nuevo estndar para HTML
La versin anterior, HTML 4.01, vio la luz en
1999.
MTI. Alejandro Csar Valencia Garca
Cmo surge HTML5?

Es el resultado de la colaboracin entre el World
Wide Web Consortium (W3C) y el Web Hypertext
Application Technology Working Group (WHATWG)
Se establecieron algunas reglas:
Las Nuevas caractersticas deben estar basadas en HTML,
CSS, DOM y Javascript
Se reduce la necesidad de plugins (como Flash)
Mejor manejo de errores
Debe ser independiente del dispositivo
Novedades
Un documento HTML5 debe iniciar con:
<!DOCTYPE HTML>
Entre las primeras novedades tenemos una etiqueta
llamada <header> (para el contenido del
encabezado de nuestro sitio) y otra llamada <footer>
(en la cual tendremos el contenido del pie de
pgina).
Ejemplo 1
<html>
<head>
</head>
<body>
<header>
<h1>Mi Web en HTML5</h1>
</header>
Contenido de la pagina<br/><br/>
<footer>
Pie de pagina
</footer>
</body>
</html>
<nav>
La etiqueta <nav> indica que tendremos elementos
de navegacin en el sitio (un men, un conjunto de
enlaces, etc.)
Se puede colocar en cualquier parte, aunque lo ms
comn ser agregarla dentro del <header>.
Agrega al ejemplo anterior el siguiente cdigo, en el
cual utilizamos una lista con vietas para simular un
conjunto de enlaces o links:
Ejemplo 1 (<nav>)
<header>
<h1>Mi Web en HTML5</h1>
<nav>
<ul>
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>Enlace 3</li>
<li>Enlace 4</li>
</ul>
</nav>
</header>
<article>, <section> y <aside>

Son etiquetas estructurales. <section> nos sirve para
definir secciones dentro de la pgina web.
Dentro de la <section>, podemos agregar etiquetas
<article> que representan artculos (contenidos).
<aside> se utiliza para lo que se llama contenido
tangencial de la web.
Ejemplo 1
<section>
Contenido de la pagina<br/>
<article>
<h2>Ttulo del artculo</h2>
<p>Contenido</p>
</article>
<aside>
<h3>Contenido tangencial</h3>
<p>Texto texto</p>
</aside>
</section>
<video>
Una de las novedades ms importantes de HTML5 es
que permite la insercin de videos sin necesidad de
contar con plugins de terceros. Ahora basta utilizar la
etiqueta <video> e indicar la fuente del archivo de
video y este podr reproducirse.
Por ejemplo, vamos a colocar un archivo llamado
video.mp4 en nuestra carpeta y agregaremos el
siguiente cdigo:
<video>
<video src="video.mp4" controls="controls">
Tu navegador no soporta video HTML5
</video>
Tambin podemos agregar width y height para indicar
el tamao del video.
<audio>
Para insertar un clip de sonido, se utiliza la etiqueta
<audio> de manera muy similar. Por ejemplo si
tenemos un archivo llamado clip1.mp3 el cdigo
sera:
<audio src="clip1.mp3" controls="controls">

Tu navegador no soporta audio HTML5
</audio>
<audio> y <video>
Investigar de qu manera se resolvera la
problemtica de que el usuario no cuente con el
cdec apropiado para un formato especfico de
audio o video.
Investigar para qu sirven los parmetros:

autoplay
preload
loop
<canvas>
Permite la generacin de grficos dinmicamente por
medio de Javascript. Tambin puede ser til para
crear animaciones.
Tenemos que especificar el ancho y el alto del canvas
y dentro de l por medio de cdigo Javascript,
generar los grficos.
<canvas>
Revisar y realizar los ejemplos incluidos en la pgina:
http://www.w3schools.com/html/html5_canvas.asp
Formularios
Algunas de las mejoras ms interesantes de HTML5
estn en los formularios.
Una de las propiedades nuevas es required, la cual
nos servir para indicar aquellos campos del
formulario que son obligatorios para el usuario.
Por medio de estilos podemos diferenciarlos de los
dems campos.
Formularios - required
<form>
<table>
<tr>
<td>Nombre:</td>
<td><input type="text" name="nombre" required /></td>
</tr>
<tr>
<td>Apellido:</td>
<td><input type="text" name="apellido"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Enviar" /></td>
</tr>
</table>
</form>
Formularios - required
Agregamos un estilo para resaltar los campos
required:
<style type="text/css">
[required]{
border-color: red;
box-shadow: 0px 0px 5px red;
}
</style>
Formularios - email
Otra de las nuevas caractersticas de HTML5 es la
posibilidad de validar campos. Por ejemplo, para
pedir un correo electrnico al usuario y validar que
ste
tenga
el
formato
correcto
(usuario@dominio.com) basta con colocar un input
de tipo email:
<input type="email" name="email"/>
Formularios - date
Un atributo muy til es date. Sirve para pedir una
fecha al usuario. Es muy comn que en las
aplicaciones web requerimos pedir fechas y
anteriormente solo se resolva con DatePickers en
Javascript. Ahora HTML5 trae este componente
nativo. La mala noticia es que algunos navegadores
an no lo soportan:
<input type="date" name="fecha" />
Formularios - slider
El slider es un componente que permite establecer
rangos de valores numricos, y el usuario solo debe
ajustar el valor arrastrando la posicin del slider:
<input type="range" name="calif" max="10" min="1"
/>
Algunos navegadores an no lo soportan.
Formularios - number
El componente number es similar al slider, permite
seleccionar un valor numrico dentro de un rango
establecido.
<input type="number"
max="10" />
name="numero"
min="1"
Algunos navegadores an no lo soportan, aunque si

soportan la validacin.
Elementos eliminados:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
Complementar
Para complementar el aprendizaje de este tema,
consulta el tutorial de HTML5 de la pgina W3
Schools:
http://www.w3schools.com/html/html5_intro.asp

01HTML5

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

01HTML5

Загружено:

Авторское право:

Доступные форматы

1

MTI. Alejandro Csar Valencia Garca

Cmo surge HTML5?

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

<article>, <section> y <aside>

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

<audio src="clip1.mp3" controls="controls">

MTI. Alejandro Csar Valencia Garca

Investigar para qu sirven los parmetros:

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

Algunos navegadores an no lo soportan, aunque si

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

MTI. Alejandro Csar Valencia Garca

Вам также может понравиться