lenguaje de programación web dinámico multiplataforma estándar abierto y accesible elementos...
TRANSCRIPT
• Lenguaje de Programación Web• Dinámico• Multiplataforma• Estándar abierto y accesible• Elementos nuevos• Retrocompatible• Nueva filosofía de trabajo• Impulsado por los grandes y pequeños
El lenguaje de programación web HTML 5, el nuevo estándar de programación para el diseño web.
Tim Berners-Lee a principios de 1990 define el lenguaje HTML (Hypertext Markup Language “Lenguaje de marcas hipertextuales”) y crea algo más el World Wide Web ( También conocido como la Web, es un sistema de documentos de hipertexto y/o hipermedios enlazados entre si y accesibles desde Internet.).
En 1991 crea el primer navegador de HTML que funcionaría en modo texto y para el sistema UNIX.
HTML 5 desarrollada a partir del año 2007 por el grupo The Web Standards Project (Proyecto de estándares Web), el nuevo estándar era muy ambicioso ya que pretendía crear un nuevo lenguaje HTML capaz de ejecutar aplicaciones completas
Actualmente casi todos los navegadores soportan la mayoría de etiquetas HTML 5, y se ha de tener en cuenta que va a ser el nuevo estándar para la creación de sitios web.
COMPATIBILIDAD
• Firefox 3.5+
• Chrome 3.0+
• Safari 3.1+
• Opera 10.5+
• iPhone
• iPod Touch
• iPad
• Android OS
Pero siempre es importante hacer pruebas de validación
1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5
Hace algunos años se planteo la posibilidad de enviar junto a la información el formato correspondiente a la misma, como atributos del texto, color, tamaño, alineación, etc. Una de las soluciones propuestas fue la de crear una serie de marcas que insertadas en la información a enviar establecieran dicho formato. A estas marcas se les llama Etiquetas y al conjunto de las mismas que determinan el formato se le conoce como un lenguaje de marcado o lenguaje de marcas.
El siguiente ejemplo pretende mostrar una demostración de un lenguaje de marcado o lenguaje de marcas. Suponga que se desea enviar la siguiente información, destacando algunas de sus palabras:
Hola Mundo ¡Buenos días!
Su codificación utilizando etiquetas podría ser la siguiente:
<texto>Hola <negrita>Mundo</negrita>¡Buenos días!</texto>
Como se puede observar al incluir las etiquetas se puede establecer con bastante claridad que es lo que se desea resaltar.
TIPO DE DOCUMENTO
• Tipo de Documento
<!DOCTYPE html>
• Lenguaje del Documento
<html lang="ES">
• Codificación del Documento
<meta charset="UTF-8">
• Enlaces a CSS, Favicon y RSS <link rel="stylesheet" href="estilos.css"> <script src=jquery.js></script>
ESTRUCTURA MINIMA DE UN DOCUMENTO
<!DOCTYPE html><html lang="ES"><head><title>Este es un ejemplo de HTML5</title><meta charset="UTF-8"><link rel="stylesheet" href="estilo.css"></head><body>Este es el cuerpo de la página, donde irá todo el contenido.</body></html>
ESTRUCTURA SEMANTICA
<header> El elemento header debe utilizarse para marcar la cabecera de una página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc).
El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se utiliza para la cabecera de la página).
<nav> El elemento nav representa una parte de una página que enlaza a otras páginas o partes dentro de la página. Es una sección con enlaces de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav. únicamente las secciones que consisten en bloques de navegación más importantes son adecuados para el elemento de navegación.
<section> El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc.
<footer> El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.
<aside> El elemento aside representa una nota, un consejo, una explicación. Esta área son representados a menudo como barras laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro contenido que se considera por separado del contenido principal de la página.
<article> El elemento article representa una entrada independiente en un blog, revista, periódico etc.
Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario.