• Like
  • Save
Html 5. Estructura de un documento para la Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Html 5. Estructura de un documento para la Web

  • 1,625 views
Published

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

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

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • buen aporte
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,625
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML 5Estructura de un documentopara la Web
  • 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. 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. 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. 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. 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. 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. 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.  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. 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. 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. 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. Clasificación de atributos Atributos básicos (class, id, style ytitle). Atributos de internacionalización(dir, lang). Atributos de accesibilidad (accesskeyy tabindex).
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. El elemento <nav> Representa un grupo de enlaces parala navegación. Es posible utilizar mas de unelemento nav en una página.
  • 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. El elemento <footer> Representa un pie de página,sección, artículo o contenedoranterior. Normalmente contendrá informaciónde copyright, lista de enlacesrelacionados …
  • 38. ELEMENTOS PARA ELTRABAJO CON LISTAS
  • 39. Tipos de listas En HTML se pueden crear 3 tipos delistas:• Desordenadas• Ordenadas• Listas de definición
  • 40. Listas desordenadas El elemento <ul> se utiliza paracrear listas desordenadas Cada elemento que compone la listadebe tener su correspondienteelemento <li>
  • 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. 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. 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. 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. 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. 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>