html
- 1. <H1>html</H1> <h2>Qué es el html y para qué sirve</h2> Por Erika Montesdeoca
- 2. Qué es HTML Lenguaje de Marcado más extendido
- 3. Qué es HTML Lenguaje de Marcado más extendido •Codificar un documento •Industria Editorial •Dictado a viva voz Clases •Presentación •Procedimientos •Descripttivo
- 4. 1986 1991 SGML Lenguaje de Marcado Generalizado Standard Qué es HTML HTML Lenguaje de Marcas de Hipertextos
- 6. Para qué sirve Describir esttructtura y conttenido
- 7. Para qué sirve Describir esttructtura y conttenido Complementtar el texto con Objetos
- 8. Para qué sirve Describir esttructtura y conttenido Complementtar el texto con Objetos Se escribe en forma de “Ettiquettas”
- 9. Para qué sirve Describir esttructtura y conttenido Complementtar el texto con Objetos Se escribe en forma de “Ettiquettas” Rodeada por Corchettes Angulares
- 10. Modularización (XHTML) de elementos Declaración / DOCTYPE
- 11. Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <httml>
- 12. Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <httml> Modularización. Módulo de: Esttructtura / body, head, html, title Textto / abbr, acronym, address, etc. Hiperttextto / a Listta / dl, dt, dd, ol, ul, li. Objettos / object, param. Presenttación / b, big, hr, i, etc. ettc. /
- 13. <a href=”” title=””>texto deenlace</a> Estructura deElementos Elementto
- 14. <a href=”” title=””>texto deenlace</a> <Etiqueta inicial> Estructura deElementos Elementto </Etiqueta final >
- 15. <a href=”” title=””>texto deenlace</a> <Etiqueta inicial> Estructura deElementos Elementto </Etiqueta final > Contenido
- 16. <a href=”” title=””>texto deenlace</a> <Etiqueta inicial> Estructura deElementos Elementto Atributo=”valor” </Etiqueta final > Contenido
- 17. <Etiqueta inicial> Estructura deElementos Elementto Atributo=”valor” </Etiqueta final > Contenido <a href=”” ttiittllee==””””>>texto deeennllaaccee</a>
- 18. Declaración / DOCTYPE No es una etiqueta sino una insttrucción •Definición del Tipo de Documentto (DTD) •E l DTD especifica las reglas para el lenguaje de marcado •XHTML 1.0 Strict / XHTML 1.0 Transitional •XHTML 1.1 •HTML 4.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">
- 19. Elemento Raiz / <html> Etiqueta que contiene todo el HTML •Informa al navegador que lo contenido por él debe ser interpretado como HTML •Inicio y término del documento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> ...elementos del head... </head> <body> ...elementos del body... </body> </html>
- 24. <body> </body> </html> </head> Estructura de documento <html> <head> <title> y otros elementos Módulos de: •Estructura •html, head, title, body •Metainformación •Estilos •Link •Base
- 25. </body> </html> </head> Estructura de documento <html> <head> <title> y otros elementos <body> elementos Módulos de: •Estructura •html, head, title, body •Metainformación •Estilos •Link •Base Módulos de: •Texto •p, code, div, em, strong, span, q, pre, samp, h1, h2, h3, etc •Hipertexto •Lista •Objetos •Presentación •Edición •Formularios •Tablas •Imágen •Otros
- 29. ¿Para quién? Humanos Titular principal MáquinasUsuarios Comunicamos/Informamos Visible “Invisible” ➡ h1
- 30. ¿Para quién? Humanos MáquinasUsuarios Comunicamos/Informamos Visible “Invisible” Titular principal Contenido del artículo ➡ ➡ h1 p
- 31. ¿Para quién? Humanos MáquinasUsuarios Comunicamos/Informamos Visible “Invisible” Titular principal Contenido del artículo Lista de elementos ➡ ➡ ➡ h1 p ol, ul, li, li, li, li, li.
- 32. ¿Para quién? Humanos MáquinasUsuarios Comunicamos/Informamos Visible “Invisible” Titular principal Contenido del artículo Lista de elementos Datos en excel ➡ ➡ ➡ ➡ h1 p ol, ul, li, li, li, li, li. table, td, tr,
- 33. ¿Para quién? Humanos MáquinasUsuarios Comunicamos/Informamos Visible “Invisible” Titular principal Contenido del artículo Lista de elementos Datos en excel ➡ ➡ ➡ ➡ ➡ h1 p ol, ul, li, li, li, li, li. table, td, tr, Valores de atributos www.maximiliano.cl
- 34. ¿Para quién? Humanos MáquinasUsuarios Comunicamos/Informamos Visible “Invisible” Titular principal Contenido del artículo Lista de elementos Datos en excel ➡ ➡ ➡ ➡ ➡ h1 p ol, ul, li, li, li, li, li. table, td, tr, Valores de atributos
- 35. <head> o cabecera Contiene información sobre el documento que: no se muestra directamente al usuario
- 36. <head> o cabecera <html> <head> <title>Guía de Referencia RápidaXHTML</title> </head> <body> ...elementos del body... </body> </html> Contiene información sobre el documento que: no se muestra directamente al usuario <ttittle>
- 37. <head> o cabecera Contiene información sobre el documento que: referencia a metaetiquetas
- 38. <head> o cabecera <meta name="Description" conttentt="Qué es HTML y para qué sirve" /> <meta name="Keywords" <meta name="Author" <meta name="Copyright" conttentt="HTML,XHTML,tutorial HTML" /> conttentt="Maximiliano Martin" /> conttentt="... Contiene información sobre el documento que: referencia a metaetiquetas <metta>
- 39. <head> o cabecera Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos
- 40. <head> o cabecera <link ttype="text/css" rel="stylesheet" href="css/base.css" /> <link ttype="text/css" media="print" rel="stylesheet" href="css/print.css" /> <link ttype="text/css" media="aural" rel="stylesheet" href="css/aural.css" /> Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos <link>
- 41. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador
- 42. ...</body> <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea
- 43. ...</body> <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea
- 44. ...</body> <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea
- 45. ...</body> <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea
- 46. ...</body> <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea p, div, ol, ul, li, h1, h2, h3,etc. a, img, em, strong, span, etc.
- 47. ...</body> <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea p, div, ol, ul, li, h1, h2, h3,etc. a, img, em, strong, span, etc.
- 48. Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos(Humanos/Robots) <a> vínculo o ancla </a>
- 49. Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos(Humanos/Robots) <a> vínculo o ancla </a> <a href=”http://www.wikipedia.com/ancla/” ttittle=”Definición de Wikipedia” rel=”External”> vínculo o ancla </a> •href •title • class •i d •hreflang •accesskey •r el •tabindex
- 50. Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos(Humanos/Robots) <img src=”URI” /> •scr •alt • class •i d <img src=”http://www.w3c.es/img/eslogo-20030729.png” altt="Oficina española del W3C" heightt="52" widtth="279" /> •height •longdesc •width
- 51. + Elementos Propiedad de algunos elementos a los que se les asigna Valores específicos(Humanos/Robots) •Esttructtura: body, head, html, title •Textto: abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var •Presenttación: b, big, hr, i, small, sub, sup, tt •Formularios: button, fieldset, form, input, label, legend, select, optgroup, option, textarea •Tablas: caption, col, colgroup, table, tbody, td, tfoot, th,thead, tr •M a p a de Imagen del lado Clientte: area, map •M a p a de Imagen del lado Servidor: Attribute ismap on img •Hiperttextto: a •Listta: dl, dt, dd, ol, ul, li •Objettos: object, param •Edición: del, ins •Textto Bidireccional: bdo •Módulo de Imagen: img •Mettainformación: meta •Scriptting: noscript, script •H o j a de Esttilo: style element •L i n k : link •Base: base
- 52. + Elementos Propiedad de algunos elementos a los que se les asigna Valores específicos(Humanos/Robots) •Esttructtura: body, head, html, title •Textto: abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var •Presenttación: b, big, hr, i, small, sub, sup, tt •Formularios: button, fieldset, form, input, label, legend, select, optgroup, option, textarea •Tablas: caption, col, colgroup, table, tbody, td, tfoot, th,thead, tr •M a p a de Imagen del lado Clientte: area, map •M a p a de Imagen del lado Servidor: Attribute ismap on img •Hiperttextto: a •Listta: dl, dt, dd, ol, ul, li •Objettos: object, param •Edición: del, ins •Textto Bidireccional: bdo •Módulo de Imagen: img •Mettainformación: meta •Scriptting: noscript, script •H o j a de Esttilo: style element •L i n k : link •Base: base
- 53. WYSIWYG
- 54. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes
- 55. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes
- 56. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes
- 57. Validación Verifica la correcta implementación del código según el DTD declarado http://validator.w3.org/
- 58. Validación
- 59. Accesibilidad http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML- TECHS_es.html/ Proporciona alternativas para que lleguemos a más usuarios con nuestro mensaje/información •Metaetiquetas link •Texto devínculos •Atributos alt, longdesc, rel, Acceskey, tabindex •Estructura de cabeceras h1, h2, h3 •Cambios deidioma
- 61. Ejercicio ¿Cuántos elementos HTML puedes nombrar en 5 minutos?
- 62. Gracias