Introducción HTML 5
•
0 recomendaciones•255 vistas
Introducción HTML 5: Por que necesitamos un nuevo HTML?
Recomendados
Más contenido relacionado
Destacado
Destacado (13)
Similar a Introducción HTML 5
Similar a Introducción HTML 5 (20)
Último
Último (11)
Introducción HTML 5
- 1. Intro html Historia, estructura, sintaxis.. buenas practicas jueves 12 de agosto de 2010
- 2. primer elemento </img> jueves 12 de agosto de 2010
- 3. jueves 12 de agosto de 2010
- 4. IETF (Internet Engineering Task Force) Propuesta HTML 1993 jueves 12 de agosto de 2010
- 5. jueves 12 de agosto de 2010
- 6. estructura simple <h1>A simple HTML example</ h1> <p>This is a simple paragraph of text, marked up in HTML. Above it there is a heading, or title, which tells you instantly what this HTML page is all about.</p> jueves 12 de agosto de 2010
- 7. estructura simple jueves 12 de agosto de 2010
- 8. Definiciones 1.Definición Tipo de Documento o DOCTYPE 2.<html> ...</html> 3.<head> ( Metadata) 4. <title> Titulo barra navegador 5. <body> contenido de la pagina 6. <h1> Un simple titulo jueves 12 de agosto de 2010
- 9. ANATOMIA ELEMENTOS HTML 1. Elemento principal 2. Elemento Secundario jueves 12 de agosto de 2010
- 10. ANATOMIA ELEMENTOS HTML 3. Etiquetas abiertas 4. Atributos 5. Etiquetas cerradas jueves 12 de agosto de 2010
- 11. Tooltip jueves 12 de agosto de 2010
- 12. Tipos elementos Enfasis Marcado listas numéricas / viñetas Datos tabulados (datos de tablas) Formularios (entrada de datos) Insertar imágenes Enlazar documentos Especificaciones semánticas y divisiones en contenido jueves 12 de agosto de 2010
- 13. Document Object Model (DOM) jueves 12 de agosto de 2010
- 14. <h1>The basics of <abbr title="Hypertext Markup Language">HTML</abbr><h1> jueves 12 de agosto de 2010
- 15. Jerarquia • <h1> es el nodo elemento principal • El elemento <abbr> se conoce como un nodo de elemento secundario del elemento <h1> • <abbr> contiene dos hijos propios: un nodo de atributo de título, y otro nodo de texto que contiene el texto "HTML". jueves 12 de agosto de 2010
- 16. DOM ES ESCENCIAL DOM se asegura que los navegadores interpretan la estructura de su página web correcta y sistemáticamente. jueves 12 de agosto de 2010
- 17. Nivel de bloque • Elemento de nivel superior • Informan la estructura de un documento • Incluyen: Parrafos, Lista de items Encabezados,Tablas jueves 12 de agosto de 2010
- 18. Nivel en linea • Contenidos dentro de nivel bloque estructural elementos • Aparecen párrafos y agrupaciones de contenido. • Enlaces de hipertexto, énfasis y/o hincapié en palabras y abreviaturas, citas breves y extensas. jueves 12 de agosto de 2010
- 19. La buena semántica Significado de una palabra, frase u oración. El código HTML debe auto-describir el contenido de los elementos Coincidir con función y propósito de los contenidos jueves 12 de agosto de 2010
- 20. Jerarquías <font size="5">Informaciòn sobre gatos</font> <font size="2">Este documento contiene informacion sobre gatos.</font> <font size="4">Comida para gatos</font> <font size="2">Cuidado para gatos.</font> <font size="4">Juegos para gatos</font> <font size="2">Los gatos les gusta jugar con ovillos de lana y perseguir ratones. </font> jueves 12 de agosto de 2010
- 21. Estructura legible por maquina <h1>Informaciòn sobre gatos</h1> <p>Este documento contiene informacion sobre gatos.</p> <h2>Comida para gatos</h2> <p>Cuidado para gatos.</p> <h2>Juegos para gatos</h2> <p>Los gatos les gusta jugar con ovillos de lana y perseguir ratones. </p> jueves 12 de agosto de 2010
- 22. Marcado Significativo <div id="top-heading">Informaciòn sobre gatos</div> <div class="paragraph">Este documento contiene informacion sobre gatos</div> <div class="second-level-heading">Comida para gatos</div> <div class="paragraph">Cuidado para gatos. </div> <div class="second-level-heading">Juegos para gatos</ div> <div class="paragraph">Los gatos les gusta jugar con ovillos de lana y perseguir ratones. </div> jueves 12 de agosto de 2010
- 23. La falta de semántica es tan mala? • En primer lugar la tecnología de asistencia: lector de pantalla para leer páginas web. • En segundo lugar, los motores de búsqueda usan palabras clave en páginas de inició y dan más peso a las palabras en los títulos. jueves 12 de agosto de 2010
- 24. <div>s ? … • Contenedores genéricos, No tienen ningún significado intrínseco, útiles para marcar titulares y párrafos jueves 12 de agosto de 2010
- 25. Contenedores Genéricos: <div> Envolver elementos de nivel de bloque jueves 12 de agosto de 2010
- 26. Contenedores Genéricos: <div> Envolver elementos de nivel de bloque jueves 12 de agosto de 2010
- 27. Contenedores Genéricos: <span> • Envolver elementos de contenido a nivel de linea •Añadir características visuales distintivas jueves 12 de agosto de 2010
- 28. Buenas practicas jueves 12 de agosto de 2010
- 29. Tip • La programación en la web es indulgente: es bendición y es maldición.. Cualquiera puede crear buen o mal código... jueves 12 de agosto de 2010
- 30. Separar la presentación del contenido! Usar CSS No usar elementos “Presentacionales” como <font> Contenido bien redactado & fácil lectura Usable & accesible jueves 12 de agosto de 2010
- 31. Caracteres de referencia •Una manera de incluir caracteres en un documento •Imposible hacerlo con teclado • (&) introduce la referencia • (;) la finaliza jueves 12 de agosto de 2010
- 32. Stones£s jueves 12 de agosto de 2010
- 33. Referencias numéricas taquigráficas jueves 12 de agosto de 2010
- 34. Caracteres de referencia http://evolt.org/entities jueves 12 de agosto de 2010
- 35. whatwg.org jueves 12 de agosto de 2010
- 36. Por que necesitamos un nuevo HTML? jueves 12 de agosto de 2010
- 37. Las razones son.. • La actual versión “solo” crea documentos estáticos y enlace entre ellos • Scripting y hacking complicados • HTML 5 • Validación formularios • Almacenamiento en linea • Procesamiento de video jueves 12 de agosto de 2010
- 38. Ejemplo HTML 5 jueves 12 de agosto de 2010