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.
<H1>html</H1>
         <h2>Qué es el html y para qué sirve</h2>




                     por Maximiliano Martin - www.maxi...
Qué es HTML
       Lenguaje de Marcado más extendido




www.maximiliano.cl
Qué es HTML
       Lenguaje de Marcado más extendido

                           •Codificar un documento
                  ...
Qué es HTML

                           SGML
                                1986
                           Lenguaje de M...
Para qué sirve




www.maximiliano.cl
Para qué sirve
           Describir estructura y contenido




www.maximiliano.cl
Para qué sirve
           Describir estructura y contenido
         Complementar el texto con Objetos




www.maximiliano....
Para qué sirve
           Describir estructura y contenido
         Complementar el texto con Objetos
         Se escribe ...
Para qué sirve
           Describir estructura y contenido
         Complementar el texto con Objetos
         Se escribe ...
Modularización (XHTML)
                     de elementos
                      Declaración / DOCTYPE




www.maximiliano.cl
Modularización (XHTML)
                     de elementos
                      Declaración / DOCTYPE

                    ...
Modularización (XHTML)
                     de elementos
                      Declaración / DOCTYPE

                    ...
Estructura de Elementos
                      Elemento




      <a href=”” title=””>texto de enlace</a>

www.maximiliano....
Estructura de Elementos
                                Elemento

           <Etiqueta inicial>              </Etiqueta fin...
Estructura de Elementos
                                Elemento

           <Etiqueta inicial>               </Etiqueta fi...
Estructura de Elementos
                                        Elemento

           <Etiqueta inicial>                   ...
Estructura de Elementos
                                        Elemento

           <Etiqueta inicial>                   ...
Declaración / DOCTYPE




www.maximiliano.cl
Declaración / DOCTYPE
                     No es una etiqueta sino una
                            instrucción
           ...
Elemento Raiz / <html>




www.maximiliano.cl
Elemento Raiz / <html>
          Etiqueta que contiene todo el HTML

                •Informa al navegador que lo contenid...
Estructura de documento
                     <html>




                     </html>
www.maximiliano.cl
Estructura de documento
                     <html>

                     <head>


                     </head>




      ...
Estructura de documento
                     <html>

                     <head>


                     </head>

         ...
Estructura de documento
                     <html>

                     <head>


                     </head>

         ...
Estructura de documento
  Módulos de:                 <html>
  •Estructura
   •html, head, title, body   <head>
  •Metainf...
Estructura de documento
  Módulos de:                            <html>
  •Estructura
   •html, head, title, body         ...
¿Para quién?
                             Usuarios


                     Comunicamos/Informamos




www.maximiliano.cl
¿Para quién?
                     Humanos      Usuarios    Máquinas


                          Comunicamos/Informamos



...
¿Para quién?
                     Humanos      Usuarios      Máquinas


                          Comunicamos/Informamos
 ...
¿Para quién?
                     Humanos      Usuarios           Máquinas


                          Comunicamos/Informa...
¿Para quién?
                     Humanos      Usuarios           Máquinas


                          Comunicamos/Informa...
¿Para quién?
                     Humanos      Usuarios                Máquinas


                          Comunicamos/In...
¿Para quién?
                     Humanos      Usuarios                Máquinas


                          Comunicamos/In...
¿Para quién?
                     Humanos      Usuarios                Máquinas


                          Comunicamos/In...
¿Para quién?
                     Humanos      Usuarios                Máquinas


                          Comunicamos/In...
<head> o cabecera
          Contiene información sobre el documento que:
             no se muestra directamente al usuari...
<head> o cabecera
          Contiene información sobre el documento que:
             no se muestra directamente al usuari...
<head> o cabecera
          Contiene información sobre el documento que:
                   referencia a metaetiquetas



...
<head> o cabecera
          Contiene información sobre el documento que:
                   referencia a metaetiquetas
   ...
<head> o cabecera
        Contiene información sobre el documento que:
     relaciona mediante vínculos a otras URL o arch...
<head> o cabecera
        Contiene información sobre el documento que:
     relaciona mediante vínculos a otras URL o arch...
<body> o cuerpo
            Define el contenido del documento. Lo que se
                 muestra a través del navegador


...
<body> o cuerpo
            Define el contenido del documento. Lo que se
                 muestra a través del navegador
  ...
<body> o cuerpo
            Define el contenido del documento. Lo que se
                 muestra a través del navegador
  ...
<body> o cuerpo
            Define el contenido del documento. Lo que se
                 muestra a través del navegador
  ...
<body> o cuerpo
            Define el contenido del documento. Lo que se
                 muestra a través del navegador
  ...
<body> o cuerpo
            Define el contenido del documento. Lo que se
                 muestra a través del navegador
  ...
<body> o cuerpo
            Define el contenido del documento. Lo que se
                 muestra a través del navegador
  ...
Valores de Atributos
         Propiedad de algunos elementos a los que se les
          asigna Valores específicos (Humanos...
Valores de Atributos
         Propiedad de algunos elementos a los que se les
          asigna Valores específicos (Humanos...
Valores de Atributos
         Propiedad de algunos elementos a los que se les
          asigna Valores específicos (Humanos...
+ Elementos
         Propiedad de algunos elementos a los que se les
          asigna Valores específicos (Humanos/Robots)
...
+ Elementos
         Propiedad de algunos elementos a los que se les                                                      ...
WYSIWYG




www.maximiliano.cl
WYSIWYG
                     What You See Is What You Get
                     Lo que ves es lo que obtienes




www.maxim...
WYSIWYG
                     What You See Is What You Get
                     Lo que ves es lo que obtienes




www.maxim...
WYSIWYG
                     What You See Is What You Get
                     Lo que ves es lo que obtienes




www.maxim...
Validación
   Verifica la correcta implementación del código según
                     el DTD declarado
                  ...
Validación




www.maximiliano.cl
Validación




www.maximiliano.cl
Accesibilidad




www.maximiliano.cl
Accesibilidad
     Proporciona alternativas para que lleguemos a más
         usuarios con nuestro mensaje/información
   ...
Ejercicio
                     Escribir las etiquetas identificadas




www.maximiliano.cl
Ejercicio
                     ¿Cuántos elementos HTML puedes
                         nombrar en 5 minutos?




www.maxim...
Gracias
                     Maximiliano Martin
                         www.maximiliano.cl




www.maximiliano.cl
Upcoming SlideShare
Loading in …5
×

HTML ¿qué es y para que sirve?

75,212 views

Published on

Introducción al HTML para periodistas y/o administradores de contenido.

Published in: Technology

HTML ¿qué es y para que sirve?

  1. 1. <H1>html</H1> <h2>Qué es el html y para qué sirve</h2> por Maximiliano Martin - www.maximiliano.cl www.maximiliano.cl
  2. 2. Qué es HTML Lenguaje de Marcado más extendido www.maximiliano.cl
  3. 3. Qué es HTML Lenguaje de Marcado más extendido •Codificar un documento •Industria Editorial •Dictado a viva voz Clases •Presentación •Procedimientos •Descriptivo www.maximiliano.cl
  4. 4. Qué es HTML SGML 1986 Lenguaje de Marcado Generalizado Standard HTML 1991 Lenguaje de Marcas de Hipertextos www.maximiliano.cl
  5. 5. Para qué sirve www.maximiliano.cl
  6. 6. Para qué sirve Describir estructura y contenido www.maximiliano.cl
  7. 7. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos www.maximiliano.cl
  8. 8. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” www.maximiliano.cl
  9. 9. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” Rodeada por Corchetes Angulares www.maximiliano.cl < >
  10. 10. Modularización (XHTML) de elementos Declaración / DOCTYPE www.maximiliano.cl
  11. 11. Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <html> www.maximiliano.cl
  12. 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. / www.maximiliano.cl
  13. 13. Estructura de Elementos Elemento <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
  14. 14. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
  15. 15. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
  16. 16. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
  17. 17. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
  18. 18. Declaración / DOCTYPE www.maximiliano.cl
  19. 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"> www.maximiliano.cl
  20. 20. Elemento Raiz / <html> www.maximiliano.cl
  21. 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> www.maximiliano.cl
  22. 22. Estructura de documento <html> </html> www.maximiliano.cl
  23. 23. Estructura de documento <html> <head> </head> </html> www.maximiliano.cl
  24. 24. Estructura de documento <html> <head> </head> <body> </body> </html> www.maximiliano.cl
  25. 25. Estructura de documento <html> <head> </head> <body> </body> </html> www.maximiliano.cl
  26. 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> www.maximiliano.cl
  27. 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 www.maximiliano.cl
  28. 28. ¿Para quién? Usuarios Comunicamos/Informamos www.maximiliano.cl
  29. 29. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos www.maximiliano.cl
  30. 30. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” www.maximiliano.cl
  31. 31. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 www.maximiliano.cl
  32. 32. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p www.maximiliano.cl
  33. 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. www.maximiliano.cl
  34. 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, www.maximiliano.cl
  35. 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 www.maximiliano.cl
  36. 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 www.maximiliano.cl
  37. 37. <head> o cabecera Contiene información sobre el documento que: no se muestra directamente al usuario www.maximiliano.cl
  38. 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> www.maximiliano.cl
  39. 39. <head> o cabecera Contiene información sobre el documento que: referencia a metaetiquetas www.maximiliano.cl
  40. 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="... www.maximiliano.cl
  41. 41. <head> o cabecera Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos www.maximiliano.cl
  42. 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" /> www.maximiliano.cl
  43. 43. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador www.maximiliano.cl
  44. 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> www.maximiliano.cl
  45. 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> www.maximiliano.cl
  46. 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> www.maximiliano.cl
  47. 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> www.maximiliano.cl
  48. 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> www.maximiliano.cl
  49. 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> www.maximiliano.cl
  50. 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> www.maximiliano.cl
  51. 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> www.maximiliano.cl
  52. 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" /> www.maximiliano.cl
  53. 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 www.maximiliano.cl
  54. 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 www.maximiliano.cl
  55. 55. WYSIWYG www.maximiliano.cl
  56. 56. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes www.maximiliano.cl
  57. 57. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes www.maximiliano.cl
  58. 58. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes www.maximiliano.cl
  59. 59. Validación Verifica la correcta implementación del código según el DTD declarado http://validator.w3.org/ www.maximiliano.cl
  60. 60. Validación www.maximiliano.cl
  61. 61. Validación www.maximiliano.cl
  62. 62. Accesibilidad www.maximiliano.cl
  63. 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/ www.maximiliano.cl
  64. 64. Ejercicio Escribir las etiquetas identificadas www.maximiliano.cl
  65. 65. Ejercicio ¿Cuántos elementos HTML puedes nombrar en 5 minutos? www.maximiliano.cl
  66. 66. Gracias Maximiliano Martin www.maximiliano.cl www.maximiliano.cl

×