Introducción HTML 5
-
Upload
jhon-gonzalez -
Category
Technology
-
view
319 -
download
0
description
Transcript of Introducción HTML 5
![Page 1: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/1.jpg)
Intro htmlHistoria, estructura, sintaxis.. buenas practicas
jueves 12 de agosto de 2010
![Page 2: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/2.jpg)
primer elemento</img>
jueves 12 de agosto de 2010
![Page 3: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/3.jpg)
jueves 12 de agosto de 2010
![Page 4: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/4.jpg)
IETF (Internet Engineering Task
Force)Propuesta HTML 1993
jueves 12 de agosto de 2010
![Page 5: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/5.jpg)
jueves 12 de agosto de 2010
![Page 6: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/6.jpg)
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
![Page 7: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/7.jpg)
estructura simple
jueves 12 de agosto de 2010
![Page 8: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/8.jpg)
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
![Page 9: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/9.jpg)
ANATOMIA ELEMENTOS HTML
1. Elemento principal
2. Elemento Secundario
jueves 12 de agosto de 2010
![Page 10: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/10.jpg)
ANATOMIA ELEMENTOS HTML
3. Etiquetas abiertas
4.Atributos
5. Etiquetas cerradas
jueves 12 de agosto de 2010
![Page 11: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/11.jpg)
Tooltip
jueves 12 de agosto de 2010
![Page 12: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/12.jpg)
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
![Page 13: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/13.jpg)
Document Object Model(DOM)
jueves 12 de agosto de 2010
![Page 14: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/14.jpg)
<h1>The basics of <abbr title="Hypertext Markup Language">HTML</abbr><h1>
jueves 12 de agosto de 2010
![Page 15: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/15.jpg)
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
![Page 16: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/16.jpg)
DOM ES ESCENCIALDOM se asegura que los navegadores interpretan la
estructura de su página web correcta y sistemáticamente.
jueves 12 de agosto de 2010
![Page 17: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/17.jpg)
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
![Page 18: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/18.jpg)
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
![Page 19: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/19.jpg)
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
![Page 20: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/20.jpg)
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
![Page 21: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/21.jpg)
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
![Page 22: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/22.jpg)
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
![Page 23: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/23.jpg)
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
![Page 24: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/24.jpg)
<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
![Page 25: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/25.jpg)
Contenedores Genéricos: <div>
Envolver elementos de nivel de bloque
jueves 12 de agosto de 2010
![Page 26: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/26.jpg)
Contenedores Genéricos: <div>
Envolver elementos de nivel de bloque
jueves 12 de agosto de 2010
![Page 27: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/27.jpg)
Contenedores Genéricos: <span>
• Envolver elementos de contenido a nivel de linea•Añadir características visuales distintivas
jueves 12 de agosto de 2010
![Page 28: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/28.jpg)
Buenas practicas
jueves 12 de agosto de 2010
![Page 29: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/29.jpg)
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
![Page 30: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/30.jpg)
Separar la presentación del contenido!
Usar CSSNo usar elementos “Presentacionales” como <font>Contenido bien redactado & fácil lecturaUsable & accesible
jueves 12 de agosto de 2010
![Page 31: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/31.jpg)
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
![Page 32: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/32.jpg)
Stones£s
jueves 12 de agosto de 2010
![Page 33: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/33.jpg)
Referencias numéricastaquigráficas
jueves 12 de agosto de 2010
![Page 34: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/34.jpg)
Caracteres de referenciahttp://evolt.org/entities
jueves 12 de agosto de 2010
![Page 35: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/35.jpg)
whatwg.org
jueves 12 de agosto de 2010
![Page 36: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/36.jpg)
Por que necesitamos un nuevo HTML?
jueves 12 de agosto de 2010
![Page 37: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/37.jpg)
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
![Page 38: Introducción HTML 5](https://reader033.fdocuments.us/reader033/viewer/2022052910/559c1ab31a28ab22598b47d2/html5/thumbnails/38.jpg)
Ejemplo HTML 5
jueves 12 de agosto de 2010