Introducción HTML 5

Intro htmlHistoria, estructura, sintaxis.. buenas practicas

jueves 12 de agosto de 2010

primer elemento</img>



IETF (Internet Engineering Task

Force)Propuesta HTML 1993



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>


estructura simple


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


ANATOMIA ELEMENTOS HTML

1. Elemento principal

2. Elemento Secundario


ANATOMIA ELEMENTOS HTML

3. Etiquetas abiertas

4.Atributos

5. Etiquetas cerradas


Tooltip


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


Document Object Model(DOM)


<h1>The basics of <abbr title="Hypertext Markup Language">HTML</abbr><h1>


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".


DOM ES ESCENCIALDOM se asegura que los navegadores interpretan la

estructura de su página web correcta y sistemáticamente.


Nivel de bloque

• Elemento de nivel superior

• Informan la estructura de un documento

• Incluyen: Parrafos, Lista de items Encabezados,Tablas


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.


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


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>


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>


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>


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.


<div>s ? …

• Contenedores genéricos, No tienen ningún significado intrínseco, útiles para marcar titulares y párrafos


Contenedores Genéricos: <div>

Envolver elementos de nivel de bloque


Contenedores Genéricos: <div>

Envolver elementos de nivel de bloque


Contenedores Genéricos: <span>

• Envolver elementos de contenido a nivel de linea•Añadir características visuales distintivas


Buenas practicas


Tip

• La programación en la web es indulgente: es bendición y es maldición.. Cualquiera puede crear buen o mal código...


Separar la presentación del contenido!

Usar CSSNo usar elementos “Presentacionales” como <font>Contenido bien redactado & fácil lecturaUsable & accesible


Caracteres de referencia

•Una manera de incluir caracteres en un documento

•Imposible hacerlo con teclado

• (&) introduce la referencia

• (;) la finaliza


Stones&pounds


Referencias numéricastaquigráficas


Caracteres de referenciahttp://evolt.org/entities


http://evolt.org/entities

http://evolt.org/entities

whatwg.org


Por que necesitamos un nuevo HTML?


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


Ejemplo HTML 5


Date post:	08-Jul-2015
Category:	Technology
Upload:	jhon-gonzalez
View:	312 times
Download:	0 times

Introducción HTML 5

Technology