01. Creando documentos HTML5

Creando documentos HTML 5
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

Que es HTML5?
• HTML5 (HyperText Markup Language, versión
5) es la quinta revisión importante del
lenguaje básico de la World Wide Web, HTML
Markup
nuevo + APIs
Javascript =

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

Estructura básica
Estructura básica 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
• hidden
• id
• lang
• spellcheck
• style
• tabindex
• title
• accesskey
• class
• contenteditable
• contextmenu
• dir
• draggable
• dropzone

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 línea
<col> Define las propiedades de una o más columnas dentro de un
elemento <colgroup>
<command> Un comando que puede ser invocado por un usuario
<hr> Especifica un cambio temático 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 relación 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 parámetro 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 símbolo <!
y los caracteres --

Estructura básica
Entidades HTML (caracteres especiales)
Caracter a
mostrar
Nombre Numero Descripción
& & & signo &
> > > Signo mayor que
< < < Signo menor que
" " " Comilla doble
© © © derechos de autor
® ® ® marca registrada
™ ™ ™ Marca de fábrica
  $#160; Espacio sin salto de línea

Estructurando el UI usando markup
semántico
Markup Semántico
• Los elementos HTML 5 proveen estructura
y no comportamiento ni presentación.
• Las hojas de estilos CSS proveen la
presentación
• JavaScript provee el comportamiento.

semántico
Antes se usaban divs para la estructura de las
páginas:

semántico
Antes se usaban divs para la estructura de las
páginas.
• El propósito de los elementos div se basaba
en el id o class del div
• No es posible para screen readers o motores
de búsqueda entender el propósito de los
elementos

Elementos semánticos de HTML5
Elementos semánticos
Proveen significado para el programador y para
los browsers.
<header>
• Define una cabecera, de una página o de un
article
<footer>
• Define un pie, de una página o de un article
<nav>
• Define una sección que contiene enlaces de
navegación.

Elementos semánticos
<article>
• Una unidad de contenido completa por si
misma.
<section>
• Define una parte o sección que pertenece al
contenido actual
<aside>
• Define una sección de contenido que puede
estar fuera del contexto del contenido
actual.

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

Figuras
• Usar figcaption para mostrar un título 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 colapsable
• Aun solo disponible en Chrome.
<details>
<summary>Título</summary>
<p>
contenido
</p>
<p>
mas contenido
</p>
</details>

Nuevos elementos de ingreso de datos
• color
• datalist
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
<input type="color" />
Elementos de ingreso de datos

• Color

• Date
<input type= "date" />

• Time
<input type= "time" />

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

• month
<input type= "month" />

• week
<input type= "week" />

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

• range
<input type= "range" />

• number
<input type= "number" />

01. Creando documentos HTML5

Recomendados

Recomendados

Más contenido relacionado

Similar a 01. Creando documentos HTML5

Similar a 01. Creando documentos HTML5 (20)

Más de Danae Aguilar Guzmán

Más de Danae Aguilar Guzmán (20)

Último

Último (6)

01. Creando documentos HTML5