Noraelena's Blog











{octubre 1, 2010}   HTML ¿qué es y para que sirve?

HTML ¿qué es y para que sirve? – Presentation Transcript

  1. <H1>html</H1> <h2>Qué es el html y para qué sirve</h2> por Maximiliano Martin – http://www.maximiliano.cl http://www.maximiliano.cl
  2. Qué es HTML Lenguaje de Marcado más extendido http://www.maximiliano.cl
  3. Qué es HTML Lenguaje de Marcado más extendido •Codificar un documento •Industria Editorial •Dictado a viva voz Clases •Presentación •Procedimientos •Descriptivo http://www.maximiliano.cl
  4. Qué es HTML SGML 1986 Lenguaje de Marcado Generalizado Standard HTML 1991 Lenguaje de Marcas de Hipertextos http://www.maximiliano.cl
  5. Para qué sirve http://www.maximiliano.cl
  6. Para qué sirve Describir estructura y contenido http://www.maximiliano.cl
  7. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos http://www.maximiliano.cl
  8. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” http://www.maximiliano.cl
  9. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” Rodeada por Corchetes Angulares http://www.maximiliano.cl < >
  10. Modularización (XHTML) de elementos Declaración / DOCTYPE http://www.maximiliano.cl
  11. Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <html> http://www.maximiliano.cl
  12. Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <html> Modularización. Módulo de: Estructura / body, head, html, title Texto / abbr, acronym, address, etc. Hipertexto / a Lista / dl, dt, dd, ol, ul, li. Objetos / object, param. Presentación / b, big, hr, i, etc. etc. / http://www.maximiliano.cl
  13. Estructura de Elementos Elemento <a href=”” title=””>texto de enlace</a> http://www.maximiliano.cl
  14. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > <a href=”” title=””>texto de enlace</a> http://www.maximiliano.cl
  15. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Contenido <a href=”” title=””>texto de enlace</a> http://www.maximiliano.cl
  16. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> http://www.maximiliano.cl
  17. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> http://www.maximiliano.cl
  18. Declaración / DOCTYPE http://www.maximiliano.cl
  19. Declaración / DOCTYPE No es una etiqueta sino una instrucción •Definición del Tipo de Documento (DTD) •El 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”> http://www.maximiliano.cl
  20. Elemento Raiz / <html> http://www.maximiliano.cl
  21. 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> http://www.maximiliano.cl
  22. Estructura de documento <html> </html> http://www.maximiliano.cl
  23. Estructura de documento <html> <head> </head> </html> http://www.maximiliano.cl
  24. Estructura de documento <html> <head> </head> <body> </body> </html> http://www.maximiliano.cl
  25. Estructura de documento <html> <head> </head> <body> </body> </html> http://www.maximiliano.cl
  26. Estructura de documento Módulos de: <html> •Estructura •html, head, title, body <head> •Metainformación •Estilos <title> y otros elementos •Link •Base </head> <body> </body> </html> http://www.maximiliano.cl
  27. Estructura de documento Módulos de: <html> •Estructura •html, head, title, body <head> •Metainformación •Estilos <title> y otros elementos •Link •Base </head> Módulos de: •Texto <body> •p, code, div, em, strong, span, q, pre, samp, h1, h2, h3, etc elementos •Hipertexto •Lista •Objetos •Presentación •Edición •Formularios </body> •Tablas •Imágen </html> •Otros http://www.maximiliano.cl
  28. ¿Para quién? Usuarios Comunicamos/Informamos http://www.maximiliano.cl
  29. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos http://www.maximiliano.cl
  30. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” http://www.maximiliano.cl
  31. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 http://www.maximiliano.cl
  32. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p http://www.maximiliano.cl
  33. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. http://www.maximiliano.cl
  34. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, http://www.maximiliano.cl
  35. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, ➡ Valores de atributos http://www.maximiliano.cl
  36. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, ➡ Valores de atributos http://www.maximiliano.cl
  37. <head> o cabecera Contiene información sobre el documento que: no se muestra directamente al usuario http://www.maximiliano.cl
  38. <head> o cabecera Contiene información sobre el documento que: no se muestra directamente al usuario <title> <html> <head> <title>Gu&iacute;a de Referencia R&aacute;pida XHTML</title> </head> <body> …elementos del body… </body> </html> http://www.maximiliano.cl
  39. <head> o cabecera Contiene información sobre el documento que: referencia a metaetiquetas http://www.maximiliano.cl
  40. <head> o cabecera Contiene información sobre el documento que: referencia a metaetiquetas <meta> <meta name=”Description” content=”Qué es HTML y para qué sirve” /> <meta name=”Keywords” content=”HTML,XHTML,tutorial HTML” /> <meta name=”Author” content=”Maximiliano Martin” /> <meta name=”Copyright” content=”… http://www.maximiliano.cl
  41. <head> o cabecera Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos http://www.maximiliano.cl
  42. <head> o cabecera Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos <link> <link type=”text/css” rel=”stylesheet” href=”css/base.css” /> <link type=”text/css” media=”print” rel=”stylesheet” href=”css/print.css” /> <link type=”text/css” media=”aural” rel=”stylesheet” href=”css/aural.css” /> http://www.maximiliano.cl
  43. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador http://www.maximiliano.cl
  44. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>… Elementos en bloque Elementos en linea …</body> http://www.maximiliano.cl
  45. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>… Elementos en bloque Elementos en linea …</body> http://www.maximiliano.cl
  46. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>… Elementos en bloque Elementos en linea …</body> http://www.maximiliano.cl
  47. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>… Elementos en bloque Elementos en linea …</body> http://www.maximiliano.cl
  48. <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, a, img, em, h1, h2, h3, etc. strong, span, etc. …</body> http://www.maximiliano.cl
  49. <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, a, img, em, h1, h2, h3, etc. strong, span, etc. …</body> http://www.maximiliano.cl
  50. Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a> http://www.maximiliano.cl
  51. Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a> •href •hreflang •title •accesskey •class •rel •id •tabindex <a href=”http://www.wikipedia.com/ancla/” title=”Definición de Wikipedia” rel=”External”> vínculo o ancla </a> http://www.maximiliano.cl
  52. Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) <img src=”URI” /> •scr •height •alt •longdesc •class •width •id <img src=”http://www.w3c.es/img/eslogo-20030729.png” alt=”Oficina española del W3C” height=”52″ width=”279″ /> http://www.maximiliano.cl
  53. + Elementos Propiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title •Hipertexto: a •Texto: abbr, acronym, address, blockquote, br, •Lista: dl, dt, dd, ol, ul, li cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, •Objetos: object, param p, pre, q, samp, span, strong, var •Edición: del, ins •Presentación: b, big, hr, i, small, sub, sup, tt •Texto Bidireccional: bdo •Formularios: button, fieldset, form, input, label, •Módulo de Imagen: img legend, select, optgroup, option, textarea •Metainformación: meta •Tablas: caption, col, colgroup, table, tbody, td, •Scripting: noscript, script tfoot, th, thead, tr •Hoja de Estilo: style element •Mapa de Imagen del lado Cliente: area, map •Link: link •Mapa de Imagen del lado Servidor: Attribute •Base: base ismap on img http://www.maximiliano.cl
  54. + Elementos Propiedad de algunos elementos a los que se les Obj ect ject <ob m /> <pa ra s > Obj Par ect am ete r asigna Valores específicos (Humanos/Robots) nt s st me g /> d li Ele ere list pty <im t /> s Ord ed Em pu List der <in U nor k /> item list /> <lin a /> ea <ol> List ion <ar > et init rm se / <m /> <ul> Def n te <ba ram TML itio tion > <pa line X)H efin crip br / Out of ( <li> D des < l /> ent sion ent Ter m <co um Ver ocu m <dl> /> Doc Ld tion > <hr E> HTM rma <dt TYP info ts > ute s OC P age ten <dd ttrib sty le <!D l> e co n eA Pag s Cor sed htm field title eu < ad> ms For m of ot b ion yn , <he For ect d lass ma ar am dy> Coll gen c ute s a, p <bo > m le el ttrib l, met <fo rm For lab id eA ts. t> Cor htm lemen ldse In put put te: ad, e nts –> <fie nd> No , he itle me ext m in box ase or t Com nt T <le ge For own ions in b tyle me el> p-d t t, s – Com < lab Dro of op ion s scrip s <!- /> up opt ute put Gro wn ttrib tion •Estructura: body, head, html, title <in -do put be •Hipertexto: a rma RL > lect p> rop eA lan g not Info eU t in uag Bas data <se u D tex ang sm ay , hr , Pag e tgro Lar ge L ute set Met a e <op > ton ib Attr e, fram ts. e urc ion But s e /> le eso opt > ir age m en <ba a /> Tit tr < rea d ang u r, f ra m van ce xta e: L ase, b t ele et Rele resour <te > Not scrip •Texto: abbr, acronym, address, blockquote, br, <m tton •Lista: dl, dt, dd, ol, ul, li > le rce <bu in b am or <t itle Sty re sou u sed ar ipt ,p k /> Scr ifra me <lin s yle> s Tab le ute <st able ion ttrib ind ex ript > T t Cap heade r dA tab <sc oar re > eyb •Objetos: object, param tu le K le Tab cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, St ruc tab n> ody ent din g < ptio le b ter key um Hea ctio n <ca Tab oo ess Doc e se tion > le f up acc Pag ead Tab gro ]> sec <th > mn nts ad 1-6 Inli ne ody Colu n Eve nlo <h[ aph <tb t> m dow onU agr tfoo Colu row Win p, pre, q, samp, span, strong, var •Edición: del, ins <d iv> Par ak < up > bre rule lgro le an> Line tal <co Tab cell <sp der oad izon l /> Hea cell onL <p> Hor <co le r /> tr> Tab ts ese t <b < ven onR •Presentación: b, big, hr, i, small, sub, sup, tt /> > mE elec t <hr <th For •Texto Bidireccional: bdo > onS mit nk <td aps r on Sub e li age M lu s Pag link onB ge Link ail d Im ge han Em s an Ima onC us f=” “> :”> hor or age Map e Map oc Im ge onF •Formularios: button, fieldset, form, input, label, hre to nc nch ag <a mail e”> A to a Ima f Im f=” •Módulo de Imagen: img ao ts hre =”n am Link g /> Are ven eyu p <a “> <im > rd E onK n ame ame p boa <a f =”# n < ma Key hre /> s <a <ar ea Ent itie own pha sis ter rk eyd ss em rac ma onK re Cha eyp legend, select, optgroup, option, textarea kup ng tion •Metainformación: meta tM ar Str o sis mo n ta Quo rsand onK t Tex pha tion Com eou Em ta ” p e nts ous r > quo n Am an Eve onM ove r ong ong tatio 3 4; & s th han Mo use use <st L rt q uo &# Les t onM o eup m> Sho viation 38; ter ous rea •Tablas: caption, col, colgroup, table, tbody, td, e> < ol <e uot re &# G mb lick onM ckq Abb ym 60; ” sy onC •Scripting: noscript, script <blo &# > “At ck on blcli n Acr t 62; @ Eur o t onD dow <q> > ss tex &# ulle use br Add re tted 64; all b onM o ove <ab nym> ma &# € Sm ark em -for ; ous ro Pre 128 • dem onM <ac s> ion &# Tra spa ce res finit 9; tfoot, th, thead, tr d De 14 n d ing <ad &# ™ Pou eak •Hoja de Estilo: style element e ; -br bol e> Cod 153 £ Non ight s ym <pr tion &# ; fn> Cita t ext 163 Co pyr <d ted t &# ; .co m de> Dele ed tex 160 © tes <co &# dBy •Mapa de Imagen del lado Cliente: area, map e> ert 169 ; dde <cit Ins ript &# mA sc fro •Link: link <de l> Sub script ree er ion le f s> Sup ect ilab <in t dir Ava b> Tex <su •Mapa de Imagen del lado Servidor: Attribute p> <su o> •Base: base <bd ismap on img http://www.maximiliano.cl
  55. WYSIWYG http://www.maximiliano.cl
  56. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes http://www.maximiliano.cl
  57. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes http://www.maximiliano.cl
  58. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes http://www.maximiliano.cl
  59. Validación Verifica la correcta implementación del código según el DTD declarado http://validator.w3.org/ http://www.maximiliano.cl
  60. Validación http://www.maximiliano.cl
  61. Validación http://www.maximiliano.cl
  62. Accesibilidad http://www.maximiliano.cl
  63. Accesibilidad Proporciona alternativas para que lleguemos a más usuarios con nuestro mensaje/información •Metaetiquetas link •Texto de vínculos •Atributos alt, longdesc, rel, Acceskey, tabindex •Estructura de cabeceras h1, h2, h3 •Cambios de idioma http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML- TECHS_es.html/ http://www.maximiliano.cl
  64. Ejercicio Escribir las etiquetas identificadas http://www.maximiliano.cl
  65. Ejercicio ¿Cuántos elementos HTML puedes nombrar en 5 minutos? http://www.maximiliano.cl
  66. Gracias Maximiliano Martin http://www.maximiliano.cl http://www.maximiliano.cl


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

et cetera
A %d blogueros les gusta esto: