html5

1. ¿Qué es HTML5?

• Especificación experimental del consorcio internacional W3C y del grupo de trabajo WHATWG que organiza tres tecnologías altamente dependientes como HTML, CSS y Javascript bajo un mismo propósito, la construcción de sitios y aplicaciones web.

• ¿Por qué estudiar estos lenguajes de programación? HTML5 permite a los programadores crear aplicaciones no nativas (web) que se comportan como si lo fueran, eliminando la pesada tarea que supone diseñar aplicaciones nativas para cada una de las plataformas (Android, iOS, Windows Mobile, Symbian, BlackBerry OS, Palm OS).

• A pesar de no ser un estándar oficial, actualmente la mayoría de navegadores web (Safari, Chrome, Firefox, Opera, Internet Explorer ) soportan los nuevos elementos (HTML y CSS) y APIs (Javascript) que incorpora HTML5. Sustituye al anterior estándar HTML 4.0.1. que data del año 1999.

• ¿Qué función desempeña cada tecnología? HTML5 lenguaje hipertexto de marcado usado para generar la estructura del documento (plantilla) y

facilitar la inserción tanto de contenido multimedia como de aplicaciones. CSS, versión 3, es el responsable de representar la estructura y su contenido. Javascript es el responsable de dotar de mayor funcionalidades a la web, haciendo que las

aplicaciones interactúen con el contenido y los servicios externos de la nube. Javascript permite añadir contenido dinámico a la estructura (Web 2.0).

HTML5 Francesc Pérez Fdez

http://www.w3schools.com/html/html5_intro.asp

http://dev.w3.org/html5/spec/

http://www.tucamon.es/contenido/apps-smartphones-html-css-javascript

2. Estructura del documento

• Con un editor de texto es posible crear un documento HTML, tan sólo se ha de guardar con la extensión .html. El código HTML debe ser introducido dentro del elemento “html” representado por las etiquetas de apertura <html> y cierre </html>.

• La estructura principal de un documento HTML está formada por dos elementos: la cabecera (<head>) y el cuerpo (<body>).

• La información de cabecera no se muestra en el navegador y se utiliza para referenciar estilos y scripts externos (<link>), además de proporcionar meta información a los motores de búsqueda (<meta>).

• El cuerpo es la parte más importante y visible del documento HTML y es donde se organiza la plantilla.

Cabecera

Cuerpo


Etiqueta <!DOCTYPE> define el tipo de archivo

El atributo “lang” de la etiqueta “html”, con valor “es”, define el idioma del contenido.

Head (no visible)

Body (visible)

3. Cabecera del documento

• La información de cabecera no es visible para el usuario; pero sí puede ser leída por ordenadores, navegadores web y motores de búsqueda que utilizan la meta información (descripción, etc) para realizar sus funciones.


Los archivos externos de estilos, imágenes y scripts deben ubicarse en la misma carpeta donde se aloja el archivo .html. Si no se hace referencia a archivos externos de estilos el navegador aplica los suyos por defecto.

Conjunto de caracteres que debe utilizar el navegador

 Comentarios. No afectan al código

4. Cuerpo del documento

• La imagen muestra un diseño, con una organización básica, hecho con los nuevos elementos estructurales que incorpora HTML5. Cada elemento del cuerpo desempeña un propósito diferente dentro de la plantilla.

• Un error común es confundir el elemento <head> con <header>. El primero hace referencia a la cabecera del documento HTML y no se muestra en el navegador, el segundo hace referencia a la cabecera del cuerpo del documento HTML y por lo tanto su contenido se muestra al usuario.


Cabecera del cuerpo(logo y título)

Barra de navegación

InformaciónPrincipal

Barra Lateral(info adicional)

Institucional, personal derechos de autor,

<header> </header>

<nav> </nav>

<section> </section><aside> </aside>

<footer> </footer>


• El siguiente código implementa la estructura básica de la plantilla anterior. Observe que todo el código relacionado con la estructura está alojado dentro del cuerpo <body>.


Header

Nav

Aside

Footer

Section

En nuestro ejemplo, hemos suprimido de la cabecera del documento la línea que hace referencia a archivos de estilo externos por lo que el navegador los representará con los estilos que tiene definidos por defecto. Para el navegador todos los elementos son elementos “block”, motivo por el cual los apila como cajas uno encima de otro. Como veremos más tarde, creando nuevos estilo se puede corregir este comportamiento hasta obtener el resultado esperado.


• Para crear unidades independientes de contenido dentro de la estructura básica creada, utilice el elemento <article>.


Insertar párrafo

Declara que el contenido esImagen, vídeo

Texto descriptivo de laimagen, vídeo

Sección

Artículo

Artículo


• Hasta aquí hemos diseñado y configurado la estructura básica y común de una web, pero carente de estilo. Todos los elementos (header, nav, section, aside, footer, article) son interpretados por el navegador como un conjunto de cajas apiladas. Creando nuevos estilos podemos reorganizar las cajas para que adopten la estructura básica propuesta (elemento aside aparezca al lado del section).

• Otras etiquetas relevantes: mark, small, cite, address, time, details, progress, ruby, rp, rt, wbr, datalist, audio, vídeo, source, embed, fieldset, keygen, meter, output,

• Nuevos type de Inputs: tel, search, url, email, datetime, date, month, week, time, datetime-local, range, color

• Nuevos tipos de atributos para Inputs: autocomplete, autofocus, loadform, formaction, formenctype, formmethod, formtarget, height, width, list, min, max, step, multiple, novalidate, pattern, placeholder, required

Ejemplo de plantilla básica


html5

Education

Transcript of html5