01. html 5
DESCRIPTION
html5TRANSCRIPT
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
Nuevos APIs javascript
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 />
<input type="checkbox" name="fruta"value="Naranja" checked="checked" />
<input type="checkbox" name="fruta"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 URLsrelativas 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 --
<!-- aquí van los comentarios -->
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.
Estructurando el UI usando markup semántico
Antes se usaban divs para la estructura de laspáginas:
Estructurando el UI usando markup semántico
Antes se usaban divs para la estructura de laspáginas.
• El proposito de los elementos div se basabaen el id o class del div
• No es posible para screen readers o motoresde busqueda entender el proposito de los elementos
Elementos semánticos de HTML5
Elementos semánticos
Proveen significado para el programador y paralos 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 de HTML5
Elementos semánticos
<article>
• Una unidad de contenido completa por simisma.
<section>
• Define una parte o sección que pertenece al contenido actual
<aside>
• Define una sección de contenido que puedeestar fuera del conexto del contenido actual.
Elementos semánticos de HTML5
Elementos semánticos de HTML5
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>
Elementos semánticos de HTML5
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>
Elementos semánticos de HTML5
Details y Summary
• Permite crear un elemento collapsable
<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
• month
• number
• range
• search
• tel
• time
• url
• week
<input type="color" />
Elementos de ingreso de datos
Nuevos elementos de ingreso de datos
• Color
Nuevos elementos de ingreso de datos
• Date
<input type= "date" />
Nuevos elementos de ingreso de datos
• Time
<input type= "time" />
Nuevos elementos de ingreso de datos
• datetime
• datetime-local <input type= "datetime-local" />
<input type= "datetime" />
Nuevos elementos de ingreso de datos
• month
<input type= "month" />
Nuevos elementos de ingreso de datos
• week
<input type= "week" />
Nuevos elementos de ingreso de datos
• Url
<input type= "email" />
<input type= "url" />
Nuevos elementos de ingreso de datos
• range
<input type= "range" />
Nuevos elementos de ingreso de datos
• number
<input type= "number" />