introducción html 5
Post on 08-Jul-2015
321 Views
Preview:
DESCRIPTION
TRANSCRIPT
Intro htmlHistoria, estructura, sintaxis.. buenas practicas
jueves 12 de agosto de 2010
primer elemento</img>
jueves 12 de agosto de 2010
jueves 12 de agosto de 2010
IETF (Internet Engineering Task
Force)Propuesta HTML 1993
jueves 12 de agosto de 2010
jueves 12 de agosto de 2010
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
estructura simple
jueves 12 de agosto de 2010
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
ANATOMIA ELEMENTOS HTML
1. Elemento principal
2. Elemento Secundario
jueves 12 de agosto de 2010
ANATOMIA ELEMENTOS HTML
3. Etiquetas abiertas
4.Atributos
5. Etiquetas cerradas
jueves 12 de agosto de 2010
Tooltip
jueves 12 de agosto de 2010
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
Document Object Model(DOM)
jueves 12 de agosto de 2010
<h1>The basics of <abbr title="Hypertext Markup Language">HTML</abbr><h1>
jueves 12 de agosto de 2010
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
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
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
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
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
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
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
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
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
<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
Contenedores Genéricos: <div>
Envolver elementos de nivel de bloque
jueves 12 de agosto de 2010
Contenedores Genéricos: <div>
Envolver elementos de nivel de bloque
jueves 12 de agosto de 2010
Contenedores Genéricos: <span>
• Envolver elementos de contenido a nivel de linea•Añadir características visuales distintivas
jueves 12 de agosto de 2010
Buenas practicas
jueves 12 de agosto de 2010
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
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
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
Stones£s
jueves 12 de agosto de 2010
Referencias numéricastaquigráficas
jueves 12 de agosto de 2010
Caracteres de referenciahttp://evolt.org/entities
jueves 12 de agosto de 2010
whatwg.org
jueves 12 de agosto de 2010
Por que necesitamos un nuevo HTML?
jueves 12 de agosto de 2010
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
Ejemplo HTML 5
jueves 12 de agosto de 2010
top related