Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML 5Estructura de un documentopara la Web
El lenguaje HTML HyperText Markup Language (HTML) El desarrollo del lenguaje essupervisado por W3C (World WideWeb Consor...
Lenguaje de marcas Permite identificar la estructura deun documento. Utiliza «etiquetas» o «marcas» paradelimitar los el...
Documentos HTML Un documento HTML no es más queun archivo de texto. La extensión de su nombre suele ser.html o .htm. Un...
Estructura y apariencia<!doctype html><html><head><meta charset="utf-8"><title>Mi primer documento</title></head><body><h1...
Elementos y etiquetas Una etiqueta se encuentra encerradaentre los símbolos ‘<‘ y ‘>’. Un elemento del documento secompo...
Estructura jerárquica Los elementos de un documentoHTML pueden contener a su vezotros. Dos elementos son hermanos si see...
Formato de las etiquetas Es indiferente utilizar mayúsculas ominúsculas, incluso una combinaciónde ambas en las etiquetas...
 Todo documento HTML se encuentra delimitadopor las etiquetas <html> y </html> Dentro, aparecen siempre dos elementos:• ...
Cabecera y cuerpoTodo documento HTML seencuentra delimitado por lasetiquetas <html> y</html>Dentro, aparecensiempre dos el...
Atributos Dentro de la etiqueta inicial de unelemento puede haber uno o variosatributos. Lo más habitual es que un atrib...
Ejemplo de atributo<p><a href="google.com">Pulse para ir aGoogle</a></p>Elemento padre (un párrafo)Elemento hijo (unenlace...
Clasificación de atributos Atributos básicos (class, id, style ytitle). Atributos de internacionalización(dir, lang). A...
Atributos básicos I id se utiliza para identificar un únicoelemento dentro de un documento. Sintaxis: id="nombre_element...
Atributos básicos II title sugiere un título asociado a unelemento. Sintaxis: title="título_elemento" style permite esp...
Atributos deinternacionalización dir este atributo permite indicar alnavegador la dirección en la quedebe fluir el texto....
Elementos básicos Todo documento HTML contiene lossiguientes elementos y forman parte de laestructura básica. Son: html, ...
Estructura mínima<!doctype html><html><head><title>Estructura mínima de un documento html</title></head><body></body></htm...
El elemento head Todo elemento head debería contener un elemento titleque asigne un título al documento (visible en el br...
Compatibilidad con anterioresversiones Para permitir la compatibilidad con InternetExplorer 8 y anteriores versiones, cua...
Detección de capacidades deun navegador Podemos incluir también una librería opensourceJavaScript para poder identificar ...
Elementos de contenido Encabezados Párrafos y secciones Elementos de agrupación Elementos de presentación Elementos a...
Tratamiento de los espacios enblanco y nuevas líneas Los navegadores se comportan deigual manera cuando:• Encuentran una ...
Creación de cabeceras Es posible crear un encabezado de distintotamaño utilizando los elementos<h1>, <h2>..<h6>. Utiliza...
Cabeceras<body><h1>Cabecera de nivel 1</h1><h2>Cabecera de nivel 2</h2><h3>Cabecera de nivel 3</h3><h4>Cabecera de nivel 4...
Párrafo y nueva línea Para incluir un elemento párrafo seutilizan las etiquetas <p> </p>. Cuando se muestra un párrafo s...
Ejemplo: párrafos y nueva línea<p>Este elemento es el primer p&aacute;rrafo de este documento.<br>Dentro de este p&aacute;...
Texto preformateado Con la etiqueta <pre></pre> se evitaque el navegador interprete el texto delelemento, apareciendo de ...
Tipos de elementos Elementos de bloque• Aquellos que se encuentran separados por unanueva línea, antes y después de ser m...
Agrupación de contenido HTML5 permite agrupar contenido deforma más precisa que sus versionesanteriores. Las nuevas etiq...
El elemento <div> Está pensado para utilizarlo comobloque que puede ser identificado yal que se puede aplicar un estilo o...
El elemento <header> Definido como «un grupo auxiliarpara la navegación». No hay restricción a la hora de incluirmas de ...
El elemento <section> Ha sido implementado para ser partede la estructura del documento. Por ejemplo, los artículos de u...
El elemento <article> Similar a la sección, pero representauna composición independiente y/oreusable o distribuible. Por...
El elemento <nav> Representa un grupo de enlaces parala navegación. Es posible utilizar mas de unelemento nav en una pág...
El elemento <aside> Se debería utilizar para marcar loscontenidos relacionados, con elcontenido principal, pero que nofor...
El elemento <footer> Representa un pie de página,sección, artículo o contenedoranterior. Normalmente contendrá informaci...
ELEMENTOS PARA ELTRABAJO CON LISTAS
Tipos de listas En HTML se pueden crear 3 tipos delistas:• Desordenadas• Ordenadas• Listas de definición
Listas desordenadas El elemento <ul> se utiliza paracrear listas desordenadas Cada elemento que compone la listadebe ten...
Ejemplo lista desordenada<ul><li><a href="http://www.google.com">Google</a></li><li><a href="http://www.yahoo.com">Yahoo</...
Lista ordenada El contenedor de una lista ordenadadebe ser <ol> Cada uno de los elementos que lacomponen debe ir delimit...
Atributos para listas ordenadas start, permite modificar el número de inicio de la lista reversed, permite invertir el o...
Ejemplo lista ordenada<ol type="I" start="50"><li><a href="http://www.google.com">Google</a></li><li><a href="http://www.y...
Listas de descripción Una lista de definición estácompuesta de pares de elementos, elprimero formado por un término adefi...
Ejemplo de lista de descripción<dl><dt>HTML</dt><dd> HyperText Markup Language </dd><dt>SQL</dt><dd>Structured Query Langu...
Upcoming SlideShare
Loading in …5
×

Html 5. Estructura de un documento para la Web

Primera parte de una serie de presentaciones con las novedades de HTML 5

  • Be the first to comment

Html 5. Estructura de un documento para la Web

  1. 1. HTML 5Estructura de un documentopara la Web
  2. 2. El lenguaje HTML HyperText Markup Language (HTML) El desarrollo del lenguaje essupervisado por W3C (World WideWeb Consortium) La última versión HTML 5 Las anteriores:• HTML 4.01 (año 1999)• XHTML (año 2000)
  3. 3. Lenguaje de marcas Permite identificar la estructura deun documento. Utiliza «etiquetas» o «marcas» paradelimitar los elementos de laestructura. Los navegadores interpretan laestructura del documento.
  4. 4. Documentos HTML Un documento HTML no es más queun archivo de texto. La extensión de su nombre suele ser.html o .htm. Un editor de texto es suficiente parapoder elaborar un documento HTML.
  5. 5. Estructura y apariencia<!doctype html><html><head><meta charset="utf-8"><title>Mi primer documento</title></head><body><h1>&Eacute;ste es unencabezado</h1><p>El primerp&aacute;rrafo estar&aacute;separado del siguiente.</p><p>El segundop&aacute;rrafo es este texto</p></body></html>
  6. 6. Elementos y etiquetas Una etiqueta se encuentra encerradaentre los símbolos ‘<‘ y ‘>’. Un elemento del documento secompone de las etiquetas que lodelimitan y su contenido.<h1>Es un encabezado </h1>Etiqueta de apertura Etiqueta de cierre
  7. 7. Estructura jerárquica Los elementos de un documentoHTML pueden contener a su vezotros. Dos elementos son hermanos si seencuentran contenidos en el mismoelemento. Un elemento es hijo de otro, si seencuentra contenido en aquel.
  8. 8. Formato de las etiquetas Es indiferente utilizar mayúsculas ominúsculas, incluso una combinaciónde ambas en las etiquetas de HTML5. No es necesario que las etiquetas seencuentren en minúsculas como enXHTML. Lo más habitual es encontrar lasetiquetas en minúsculas.
  9. 9.  Todo documento HTML se encuentra delimitadopor las etiquetas <html> y </html> Dentro, aparecen siempre dos elementos:• El elemento <head>, que contiene informaciónsobre el documento HTML• El elemento <body> información que aparece enel contenido del navegador.
  10. 10. Cabecera y cuerpoTodo documento HTML seencuentra delimitado por lasetiquetas <html> y</html>Dentro, aparecensiempre dos elementos:El elemento <head>, quecontiene información sobreel documento HTMLEl elemento <body>contenido que aparece en elnavegador.
  11. 11. Atributos Dentro de la etiqueta inicial de unelemento puede haber uno o variosatributos. Lo más habitual es que un atributoesté compuesto de un nombre y unvalor, separados por el símbolo «=». El nombre identifica el atributo y elvalor especifica el comportamiento omodificación del elemento.
  12. 12. Ejemplo de atributo<p><a href="google.com">Pulse para ir aGoogle</a></p>Elemento padre (un párrafo)Elemento hijo (unenlace), con un atributoAtributo (par nombre/valor)
  13. 13. Clasificación de atributos Atributos básicos (class, id, style ytitle). Atributos de internacionalización(dir, lang). Atributos de accesibilidad (accesskeyy tabindex).
  14. 14. Atributos básicos I id se utiliza para identificar un únicoelemento dentro de un documento. Sintaxis: id="nombre_elemento" class se utiliza para especificar que unelemento pertenece a una clase (útil conCSS) Sintaxis: class="lista clases" un elementopuede pertenecer a varias clases
  15. 15. Atributos básicos II title sugiere un título asociado a unelemento. Sintaxis: title="título_elemento" style permite especificar reglas CSSdentro de un elemento. Serecomienda no utilizarla e incluir lasreglas en un archivo de estilosexterno.
  16. 16. Atributos deinternacionalización dir este atributo permite indicar alnavegador la dirección en la quedebe fluir el texto. Únicamente puede tener los valoresltr o rtl (left to right o right to left). lang permite especificar el idiomautilizado en un documento. El valorde este atributo son dos caracteresincluidos en el estándar ISO-639-1.
  17. 17. Elementos básicos Todo documento HTML contiene lossiguientes elementos y forman parte de laestructura básica. Son: html, head, title ybody. Un elemento previo cualifica a todo eldocumento HTML 5 e indica al navegadorcomo mostrar el documento y es:<!doctype html>
  18. 18. Estructura mínima<!doctype html><html><head><title>Estructura mínima de un documento html</title></head><body></body></html>Podemos encontrar estructuras de archivos para empezar acrear documentos HTML 5 en:http://www.html5boilerplate.com/http://html5reset.org/
  19. 19. El elemento head Todo elemento head debería contener un elemento titleque asigne un título al documento (visible en el browser enla barra de título). Además, puede contener los siguientes elementos, encualquier orden e incluso algunos duplicados:• <base> que afecta al comportamiento de los enlaces• <link> permite hacer referencia a un archivo externo• <script> para incluir un script en el documento• <meta> permite incluir información sobre el documento. Importante es la etiqueta <meta charset=utf-8> paraindicar que el documento utiliza el conjunto de caracteres.
  20. 20. Compatibilidad con anterioresversiones Para permitir la compatibilidad con InternetExplorer 8 y anteriores versiones, cuando se creaun documento HTML5 se suele incluir la siguientelibrería en el elemento <head>, de la siguienteforma:<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>Para una explicación mas detallada:http://paulirish.com/2011/the-history-of-the-html5-shiv/
  21. 21. Detección de capacidades deun navegador Podemos incluir también una librería opensourceJavaScript para poder identificar si el navegadorque muestra el documento HTML dispone de lasfuncionalidades básicas de HTML5 y CSS3. Podemos hacerlo incluyendo este código en elelemento <head> de nuestro documento:<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
  22. 22. Elementos de contenido Encabezados Párrafos y secciones Elementos de agrupación Elementos de presentación Elementos asociados a frases Elementos de edición
  23. 23. Tratamiento de los espacios enblanco y nuevas líneas Los navegadores se comportan deigual manera cuando:• Encuentran una secuencia de caracteresen blanco, mostrando uno.• Encuentran una secuencia de líneasvacías, mostrando únicamente unacarácter de nueva línea.
  24. 24. Creación de cabeceras Es posible crear un encabezado de distintotamaño utilizando los elementos<h1>, <h2>..<h6>. Utilizados para crear una estructura de títulos ysubtítulos similar a la de un libro. Sin atributo, el navegador mostrará cadaencabezado con un tamaño menor cuanto mayores el número. El tamaño del texto del elemento <h4> tiene elmismo tamaño del tamaño del texto por defecto.
  25. 25. Cabeceras<body><h1>Cabecera de nivel 1</h1><h2>Cabecera de nivel 2</h2><h3>Cabecera de nivel 3</h3><h4>Cabecera de nivel 4</h4><h5>Cabecera de nivel 5</h5><h6>Cabecera de nivel 6</h6></body>
  26. 26. Párrafo y nueva línea Para incluir un elemento párrafo seutilizan las etiquetas <p> </p>. Cuando se muestra un párrafo se insertauna línea nueva antes del siguienteelemento y se añade un espacio verticalextra. Para que los elementos aparezcan en unanueva línea, se puede insertar unelemento <br>
  27. 27. Ejemplo: párrafos y nueva línea<p>Este elemento es el primer p&aacute;rrafo de este documento.<br>Dentro de este p&aacute;rrafo se ha incluido un salto del&iacute;nea.</p>Algunos dise&nacute;adores no utilizan un p&aacute;rrafo y losustituyen por dos saltos de l&iacute;nea como estos<br><br>
  28. 28. Texto preformateado Con la etiqueta <pre></pre> se evitaque el navegador interprete el texto delelemento, apareciendo de forma literal acomo aparece en el elemento.
  29. 29. Tipos de elementos Elementos de bloque• Aquellos que se encuentran separados por unanueva línea, antes y después de ser mostrados• Ejemplos: párrafos, cabeceras Elementos «inline»• Aquellos que pueden aparecer en oraciones sinnecesidad de estar separados• Ejemplos: <strong>, <b>, <small>…
  30. 30. Agrupación de contenido HTML5 permite agrupar contenido deforma más precisa que sus versionesanteriores. Las nuevas etiquetas tales como<header>, <section>, <article> o <nav>permiten agrupar el contenido de unaforma mas adecuada.
  31. 31. El elemento <div> Está pensado para utilizarlo comobloque que puede ser identificado yal que se puede aplicar un estilo outilizarlo para aplicar algún script. No tiene asignado ningúnsignificado, independientemente deque le sea asignado un identificadoro una clase.
  32. 32. El elemento <header> Definido como «un grupo auxiliarpara la navegación». No hay restricción a la hora de incluirmas de un elemento de este tipo. Puede estar asociado a una sección oa la página entera.
  33. 33. El elemento <section> Ha sido implementado para ser partede la estructura del documento. Por ejemplo, los artículos de unperiódico podrían estar agrupados enuna sección por «tema» (actualidad,deportes…)
  34. 34. El elemento <article> Similar a la sección, pero representauna composición independiente y/oreusable o distribuible. Por ejemplo, el artículo de unperiódico o revista, la entrada de unblog, los post de un foro…
  35. 35. El elemento <nav> Representa un grupo de enlaces parala navegación. Es posible utilizar mas de unelemento nav en una página.
  36. 36. El elemento <aside> Se debería utilizar para marcar loscontenidos relacionados, con elcontenido principal, pero que noforma parte de aquel. Por ejemplo, podrían conteneranuncios, una barra de navegaciónsecundaria, una barra lateral…
  37. 37. El elemento <footer> Representa un pie de página,sección, artículo o contenedoranterior. Normalmente contendrá informaciónde copyright, lista de enlacesrelacionados …
  38. 38. ELEMENTOS PARA ELTRABAJO CON LISTAS
  39. 39. Tipos de listas En HTML se pueden crear 3 tipos delistas:• Desordenadas• Ordenadas• Listas de definición
  40. 40. Listas desordenadas El elemento <ul> se utiliza paracrear listas desordenadas Cada elemento que compone la listadebe tener su correspondienteelemento <li>
  41. 41. Ejemplo lista desordenada<ul><li><a href="http://www.google.com">Google</a></li><li><a href="http://www.yahoo.com">Yahoo</a></li><li><a href="http://www.bing.com">Bing</a></li></ul>
  42. 42. Lista ordenada El contenedor de una lista ordenadadebe ser <ol> Cada uno de los elementos que lacomponen debe ir delimitado por elelemento <li> Es posible modificar alguno de suscomportamientos utilizandoatributos.
  43. 43. Atributos para listas ordenadas start, permite modificar el número de inicio de la lista reversed, permite invertir el orden de la lista (de mayor amenor) type, permite seleccionar el tipo de marcador usado (vertabla).Valor delatributoEstado1 Decimala Alfabético minúsculasA Alfabético mayúsculasi Romano minúsculasI Romano mayúsculas
  44. 44. Ejemplo lista ordenada<ol type="I" start="50"><li><a href="http://www.google.com">Google</a></li><li><a href="http://www.yahoo.com">Yahoo</a></li><li><a href="http://www.bing.com">Bing</a></li></ol>
  45. 45. Listas de descripción Una lista de definición estácompuesta de pares de elementos, elprimero formado por un término adefinir y el segundo, por su definición Los elementos a utilizar son<dl>, <dt> y <dd>.
  46. 46. Ejemplo de lista de descripción<dl><dt>HTML</dt><dd> HyperText Markup Language </dd><dt>SQL</dt><dd>Structured Query Language</dd><dt>UML</dt><dd>Unified Modeling Language</dd></dl>

×