Diseo Web con HTML5

y CSS3
Captulo 3: HTML 5 y
Responsive Web
Design
Sesin 1: Elementos HTML5
Al trmino de esta sesion, Ud.
podr:
Conocer los nuevos elementos
HTML5
Crear una pgina HTML usando
HTML5
 Sesin 1: Elementos
HTML5
Introduccin a HTML5
Estructura en HTML5
Texto e Imgenes en
HTML5
Nuevos elementos
Input
Media en HTML5
Grfcos en HTML5
 Introduccin a HTML5
HTML5, tiene nuevas
funcionalidades que refejan como
la web es usada. Por ejemplo,
soporta validacin y media.
Nuevas APIs que soportan las
capacidades de los navegadores de
escritorio y mviles.
Nuevos elementos que mejoran la
estructura semntica de un
elemento.
 Estructura en HTML5
HTML5 provee nuevos elementos
para defnir la estructura de una
pagina web
Header, cabecera
Nav, navegacin
Article, contenido principal
Section, seccin del articulo
Aside, contenido destacado
 Texto e Imgenes en
HTML5
HTML5 defne nuevos
elementos:
<time>, define un tiempo para un
elemento
<mark>, para marcar un texto
<small>, para un texto pequeo
<figure>
<img
<figure> y <figcaption>
src="img_huaraz.jpg" alt="Vacaciones"
width="304" height="228">
<figcaption>Viaje de vacaiones</figcaption>
</figure>
 Nuevos elementos
Input
<input type="number">,
para valores numricos
<input type="date">, para
campos del tipo fecha
<input type="range">, para valores
dentro de un rango
<input type="email">, para
correos electrnicos
 Media en HTML5
HTML 5 soporta archivos
de video
<video width="320" height="240"
controls>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg"
type="video/ogg"> Your browser
does not support the video tag.
</video>

HTML 5 soporta archivos

de audio
<audio controls>
<source src="horse.ogg"
type="audio/ogg">
<source src="horse.mp3"
 Grfcos en HTML5
HTML canvas, permite construir un grfico
en tiempo de ejecucin usando JavaScript:
<canvas id="myCanvas" width="200"
height="100" style="border:1px solid
#000000;">
</canvas>

var c =
document.getElementById("myCanva
s"); var ctx = c.getContext("2d");
ctx.fillStyle =
"#FF0000";
ctx.fillRect(0,0,150,
75);
HTML svg, permite crear grficos
vectoriales escalables. Usa objetos
Demostracin:
Creacin de una Web con
HTML 5
En esta demostracin vamos
a:
Crear una pagina web usando
los nuevos elemento de HTML5
 Resumen de Sesin
HTML5 permite crear paginas web
semnticas
Podemos agregar videos a una
pagina HTML sin usar fash