HTML 5

Ing.
Danae Aguilar Guzmn

MCT, MS, MCTS, MCSD
danae.aguilar@jalasoft.com
Que es HTML5?
Markup
nuevo
APIs
Javascript
HTML5 (HyperText Markup Language, versin

5) es la quinta revisin importante del
lenguaje bsico de la World Wide Web, HTML
Nuevos elementos
article
aside
audio
bdi
canvas
datalist
details
embed
figcaption
figure
footer
header
main
math
mark
meter
nav
output
progress
section
source
summary
svg
time
track
video
wbr
Nuevos APIs javascript
Estructura bsica
Estructura bsica de un documento HTML5
<!DOCTYPE html>
<html>
<head>
<title>titulo aqu</title>
</head>
<body>
contenido aqu
</body>
</html>
Atributos Booleanos
Atributos Booleanos
checked
selected
disabled
readonly
<input type="checkbox" name="fruta"
value="Manzana" checked />
value="Naranja" checked="checked"
value="Naranja" checked="" />
/>
Atributos globales
Atributos globales
Son atributos que pueden ser aplicados a
cualquier elemento de HTML5
accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
Atributos expando
Atributos expando
Son atributos que tu defines.
Para evitar conflictos de nombres se les
pone el prefijo data<span data-codigo='ABC123'>Juanito Perez</span>
Elementos void
Elementos void
No pueden tener contenido
Elemento
Descripcion
<area>
Un rea de enlace con un texto en un mapa de imagen.
<base>
Especifica la URL base del documento para todas las URLs

relativas en el documento.
<br>
Representa un salto de lnea
<col>
Define las propiedades de una o ms columnas dentro de un

elemento <colgroup>
<command>
Un comando que puede ser invocado por un usuario
<hr>
Especifica un cambio temtico en el contenido
<img>
Define una imagen
<input>
Un campo de datos con tipo que permite al usuario editar los

datos
Elementos void
Elementos void
No pueden tener contenido
Elemento
Descripcion
<link>
Una relacin entre un documento y un recurso externo, como una

hoja de estilo en cascada
<keygen>
Un control generador de claves para cifrar los datos de los

formularios se pasaran al servidor
<meta>
Define los metadatos que describen el documento HTML
<param>
Define un parmetro para un objeto
<source>
Define un recurso multimedia para un elemento de <video> o de

<audio>
<wbr>
Opcionalmente rompe una palabra grande en el lugar en que esta

este elemento
Comentarios
Comentarios
No se permite espacio entre el smbolo <!
y los caracteres -
Estructura bsica
Entidades HTML (caracteres especiales)
Caracter a
mostrar
Nombre
Numero
Descripcin
&
&
&
signo &
>
>
>
Signo mayor que
<
<
<
Signo menor que
"
"
"
Comilla doble
©
©
derechos de autor
®
®
marca registrada
™
™
Marca de fbrica

$#160;
Espacio sin salto de lnea
Estructurando el UI usando markup

semntico
Markup Semntico
Los elementos HTML 5 proveen estructura
y no comportamiento ni presentacin.
Las hojas de estilos CSS proveen la
presentacin
JavaScript provee el comportamiento.

semntico
Antes se usaban divs para la estructura de las
pginas:

semntico
Antes se usaban divs para la estructura de las
pginas.
El proposito de los elementos div se basaba
en el id o class del div
No es posible para screen readers o motores
de busqueda entender el proposito de los
elementos
Elementos semnticos de HTML5

Elementos semnticos
Proveen significado para el programador y para
los browsers.
<header>
Define una cabecera, de una pgina o de un
article
<footer>
Define un pie, de una pgina o de un article
<nav>
Define una seccin que contiene enlaces de
navegacin.

Elementos semnticos
<article>
Una unidad de contenido completa por si
misma.
<section>
Define una parte o seccin que pertenece al
contenido actual
<aside>
Define una seccin de contenido que puede
estar fuera del conexto del contenido actual.

Anotando el contenido
<em>
<strong>
<mark>
<abbr title="As soon as
possible">ASAP</abbr>
<address> del autor
<code> codigo
<samp> ejemplo de codigo
<pre>
<var>

Figuras
Usar figcaption para mostrar un titulo de la
imagen
Usar alt para mostrar un texto alternativo a la
imagen.
<figure id="figure1">
<img src="images/mascota.jpg"
alt="la foto de mi mascota" />
<figcaption>Figure 1 La foto de mi mascota.</figcaption>
</figure>

Details y Summary
Permite crear un elemento collapsable
<details>
<summary>Ttulo</summary>
<p>
contenido
</p>
<p>
mas contenido
</p>
</details>
Nuevos elementos de ingreso de datos
Elementos de ingreso de datos
color
datalist
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
<input type="color" />

Color

Date
<input type= "date" />

Time
<input type= "time" />

datetime
<input type= "datetime" />
datetime-local
<input type= "datetime-local" />

month
<input type= "month" />

week
<input type= "week" />

Email
<input type= "email" />
Url
<input type= "url" />

range
<input type= "range" />

number
<input type= "number" />

HTML 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 5

Uploaded by

Copyright:

Available Formats

Ing.

Danae Aguilar Guzmn

HTML5 (HyperText Markup Language, versin

Nuevos APIs javascript

Un rea de enlace con un texto en un mapa de imagen.

Especifica la URL base del documento para todas las URLs

Representa un salto de lnea

Define las propiedades de una o ms columnas dentro de un

Un comando que puede ser invocado por un usuario

Especifica un cambio temtico en el contenido

Define una imagen

Un campo de datos con tipo que permite al usuario editar los

Una relacin entre un documento y un recurso externo, como una

Un control generador de claves para cifrar los datos de los

Define los metadatos que describen el documento HTML

Define un parmetro para un objeto

Define un recurso multimedia para un elemento de <video> o de

Opcionalmente rompe una palabra grande en el lugar en que esta

Signo mayor que

Signo menor que

Espacio sin salto de lnea

Estructurando el UI usando markup

Estructurando el UI usando markup

Estructurando el UI usando markup

Elementos semnticos de HTML5

Elementos semnticos de HTML5

Elementos semnticos de HTML5

Elementos semnticos de HTML5

Elementos semnticos de HTML5

Elementos semnticos de HTML5

Nuevos elementos de ingreso de datos

Elementos de ingreso de datos

<input type="color" />

Nuevos elementos de ingreso de datos

Nuevos elementos de ingreso de datos

Nuevos elementos de ingreso de datos

Nuevos elementos de ingreso de datos

<input type= "datetime" />

<input type= "datetime-local" />

Nuevos elementos de ingreso de datos

Nuevos elementos de ingreso de datos

Nuevos elementos de ingreso de datos

Nuevos elementos de ingreso de datos

Nuevos elementos de ingreso de datos

You might also like