Introducción a html5

752 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
752
On SlideShare
0
From Embeds
0
Number of Embeds
289
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a html5

  1. 1. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Seminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS INTRODUCCIÓN A HTML5 Facilitadora: María Zeballos
  2. 2. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 El doctype Esta sería la DTD de un documento HTML 4.01 transicional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> La declaración de la DTD en HTML5 no puede ser más sencilla: <!DOCTYPE html> • Sintaxis breve • Ausencia del número de versión. Uno de los objetivos del HTML5 es el de dar soporte a las versiones anteriores y, también, a las futuras versiones del lenguaje. Precisamente, por ese motivo, indicar un número de versión ha quedado obsoleto, incluirlo no tendría absolutamente ninguna utilidad.
  3. 3. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 El documento HTML El elemento <html> indica, en una página web, el inicio del contenido de la página HTML. Hasta el momento hemos usado la etiqueta de inicio sin ningún atributo; observe como sería la sintaxis completa en XHTML 1.0 estricto: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" > En HTML5 lo que prima es la simplicidad, solo se conserva lo esencial. Esta sería la sintaxis completa en HTML5: <html lang="es" >
  4. 4. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 La codificación de los caracteres En HTML 4.01 transicional: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> En XHTML 1.0 estricto: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> La sintaxis en HTML5: <meta charset="UTF-8" /> Disponemos así de lo estrictamente necesario para una correcta gestión por parte de los navegadores web.
  5. 5. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 Los scripts La declaración de los scripts también ha perdido importancia y la sintaxis es ahora más concisa. Se ha pasado de: <script src="miScript.js" type="text/javascript"></script> A esto: <script src="miScript.js"></script> Esta simplificación se debe a que se da por sentado que los scripts están escritos en JavaScript. Será útil para el seminario de la otra semana
  6. 6. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 Los estilos CSS Partiendo siempre del mismo principio: simplificación y unificación del lenguaje, en la declaración de los estilos CSS se ha pasado de: <link href="miHoja.css" rel="stylesheet" type="text/css" /> a: <link href="miHoja.css" rel="stylesheet" />
  7. 7. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 La sintaxis de los elementos HTML5 no tiene las reglas estrictas de sintaxis del XHTML. Veamos algunas comparaciones: Uso de las comillas. Las comillas son facultativas para los valores de los atributos. Por ejemplo, para la codificación de los caracteres podemos usar las tres sintaxis siguientes: <meta charset=’UTF-8’> <meta charset="UTF-8"> <meta charset=UTF-8> Con comillas simples, con comillas dobles o sin comillas, en los tres casos la sintaxis será válida.
  8. 8. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 La sintaxis de los elementos Los elementos con una única etiqueta de apertura. Para los elementos HTML que disponen de una única etiqueta de apertura y no tienen etiqueta de cierre: img, br, etc. era necesario indicar el cierre del elemento en la etiqueta de apertura usando /. Ejemplos: <br /> <img src="imagen.png" /> En HTML5 no es obligatorio indicar el cierre de esas etiquetas. Ejemplos: <br> <img src="imagen.png">
  9. 9. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 La sintaxis de los elementos Los elementos con etiqueta de cierre facultativa En XHTML, cada vez que se abre una etiqueta es obligatorio cerrarla. HTML5 retoma la sintaxis permisiva del HTML 4, para algunos elementos. Así, el siguiente ejemplo sería válido en HTML5: <p>Mi párrafo sin etiqueta de cierre.
  10. 10. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 La sintaxis de los elementos Las mayúsculas y minúsculas HTML5 acepta sin problemas las mayúsculas y las minúsculas en la sintaxis de los elementos y de los atributos. Los siguientes ejemplos son totalmente válidos en HTML5: <SCRIPT src="miScript.js"></script> <script SRC="MIscript.JS"></SCRIPT> <sCriPt SrC="MiScript.js"></scRIpt> Es preferible respetar ciertas normas de uso, así como las prácticas recomendadas.
  11. 11. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 La sintaxis de los elementos Los elementos HTML, HEAD y BODY Los elementos html, head y body son ahora facultativos. Este sería un documento HTML totalmente válido y que se visualizaría correctamente: <!DOCTYPE HTML> <meta charset="UTF-8" /> <title>Mi primer documento HTML5 </title> <h1>Esto es HTML5</h1> <p>Mi contenido</p>
  12. 12. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS La nueva sintaxis HTML5 La sintaxis recomendada Acabamos de ver que el HTML5 es muy permisivo. Sin embargo se aconseja respetar las “buenas prácticas recomendadas" para los diseñadores web: • usar solamente minúsculas, • usar siempre las comillas, • cerrar con / las etiquetas que se auto-cierran, • cerrar los elementos para los cuales la etiqueta de cierre sea facultativa, • sangrar el código para aumentar la legibilidad.

×