html5

503 views

Published on

Ver más en http://www.francescperez.net/templates/original/html/si/articulos/art_1_html5.html

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
503
On SlideShare
0
From Embeds
0
Number of Embeds
121
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

html5

  1. 1. 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
  2. 2. 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 HTML5 Francesc Pérez Fdez 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. 3. 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. HTML5 Francesc Pérez Fdez 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. 4. 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. HTML5 Francesc Pérez Fdez Cabecera del cuerpo (logo y título) Barra de navegación Información Principal Barra Lateral (info adicional) Institucional, personal derechos de autor, <header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer>
  5. 5. 4. Cuerpo del documento • 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>. HTML5 Francesc Pérez Fdez 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.
  6. 6. 4. Cuerpo del documento • Para crear unidades independientes de contenido dentro de la estructura básica creada, utilice el elemento <article>. HTML5 Francesc Pérez Fdez Insertar párrafo Declara que el contenido es Imagen, vídeo Texto descriptivo de la imagen, vídeo Sección Artículo Artículo
  7. 7. 4. Cuerpo del documento • 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 Francesc Pérez Fdez

×