01. Creando documentos HTML5
•
0 recomendaciones•317 vistas
Este documento proporciona una introducción a HTML5, incluyendo nuevos elementos semánticos como article, aside, audio y video, nuevos tipos de entrada de datos como color, fecha y hora, y la estructura básica de un documento HTML5. También cubre comentarios, entidades y cómo usar marcadores semánticos para estructurar el contenido de una manera más significativa.
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 (12)
01. Creando documentos HTML5
- 1. Creando documentos HTML 5 Danae Aguilar Guzmán MCT, MS, MCTS, MCP danaeaguilar@gmail.com
- 2. 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 =
- 3. 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
- 5. Estructura básica Estructura básica de un documento HTML5 <!DOCTYPE html> <html> <head> <title>titulo aquí</title> </head> <body> contenido aquí </body> </html>
- 6. 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="" />
- 7. 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
- 8. 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>
- 9. 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
- 10. 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
- 11. Comentarios Comentarios • No se permite espacio entre el símbolo <! y los caracteres -- <!-- aquí van los comentarios -->
- 12. 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
- 13. 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.
- 14. Estructurando el UI usando markup semántico Antes se usaban divs para la estructura de las páginas:
- 15. Estructurando el UI usando markup 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
- 16. 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.
- 17. Elementos semánticos de HTML5 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.
- 18. Elementos semánticos de HTML5
- 19. Elementos semánticos de HTML5 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>
- 20. Elementos semánticos de HTML5 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>
- 21. Elementos semánticos de HTML5 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>
- 22. 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
- 23. Nuevos elementos de ingreso de datos • Color
- 24. Nuevos elementos de ingreso de datos • Date <input type= "date" />
- 25. Nuevos elementos de ingreso de datos • Time <input type= "time" />
- 26. Nuevos elementos de ingreso de datos • datetime • datetime-local <input type= "datetime-local" /> <input type= "datetime" />
- 27. Nuevos elementos de ingreso de datos • month <input type= "month" />
- 28. Nuevos elementos de ingreso de datos • week <input type= "week" />
- 29. Nuevos elementos de ingreso de datos • Email • Url <input type= "email" /> <input type= "url" />
- 30. Nuevos elementos de ingreso de datos • range <input type= "range" />
- 31. Nuevos elementos de ingreso de datos • number <input type= "number" />