Quiz
Escribir la estructura de en
HTML del siguiente contenido




  <!-- Nombre Curso URL -->
Quiz
Escribir la estructura de en
HTML del siguiente contenido

 •20 minutos
 •Imágenes similares
 •Textedit
 •Entrega vía...
HTML
Contenedores y tipos de
      elementos



  Computación Multimedia I - Clase 3
       Maximiliano Martin - DUOC 2010
Declaración / DOCTYPE




www.maximiliano.cl
Declaración / DOCTYPE
       No es una etiqueta sino una instrucción

                 •Definición del Tipo de Documento (D...
<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 archiv...
<head> o cabecera
       Contiene información sobre el documento que:
    relaciona mediante vínculos a otras URL o archiv...
<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                                                      ...
Tarea
Publicar un post con:
  Tipos de elementos que se pueden anidar dentro de
  otros
Ejemplificar utilizando el editor d...
HTML Contenedores y tipos de elementos
Upcoming SlideShare
Loading in...5
×

HTML Contenedores y tipos de elementos

8,240

Published on

Formalización y tipo de Documento HTML Doctype. Contenedores y tipos de elementos según sus comportamientos como Elementos de Bloque y elementos de linea.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
8,240
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide












































  • HTML Contenedores y tipos de elementos

    1. 1. Quiz Escribir la estructura de en HTML del siguiente contenido <!-- Nombre Curso URL -->
    2. 2. Quiz Escribir la estructura de en HTML del siguiente contenido •20 minutos •Imágenes similares •Textedit •Entrega vía email a m.martin@profesor.duoc.cl <!-- Nombre Curso URL -->
    3. 3. HTML Contenedores y tipos de elementos Computación Multimedia I - Clase 3 Maximiliano Martin - DUOC 2010
    4. 4. Declaración / DOCTYPE www.maximiliano.cl
    5. 5. 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
    6. 6. <head> o cabecera Contiene información sobre el documento que: no se muestra directamente al usuario www.maximiliano.cl
    7. 7. <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
    8. 8. <head> o cabecera Contiene información sobre el documento que: referencia a metaetiquetas www.maximiliano.cl
    9. 9. <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
    10. 10. <head> o cabecera Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos www.maximiliano.cl
    11. 11. <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
    12. 12. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador www.maximiliano.cl
    13. 13. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea www.maximiliano.cl
    14. 14. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea www.maximiliano.cl
    15. 15. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea www.maximiliano.cl
    16. 16. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador <body>... Elementos en bloque Elementos en linea www.maximiliano.cl
    17. 17. <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, a, img, em, h2, h3, etc. strong, span, etc. www.maximiliano.cl
    18. 18. <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, a, img, em, h2, h3, etc. strong, span, etc. www.maximiliano.cl
    19. 19. 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
    20. 20. 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
    21. 21. Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) <img src=”URI” /> •scr •height •alt •width •class •longdesc •id <img src=”http://www.w3c.es/img/eslogo-20030729.png” alt="Oficina española del W3C" height="52" width="279" /> www.maximiliano.cl
    22. 22. + 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, cite, •Lista: dl, dt, dd, ol, ul, li code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, •Objetos: object, param 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, tfoot, th, thead, tr •Scripting: noscript, script •Mapa de Imagen del lado Cliente: area, map •Hoja de Estilo: style element •Mapa de Imagen del lado Servidor: Attribute •Link: link ismap on img •Base: base www.maximiliano.cl
    23. 23. + Elementos Propiedad de algunos elementos a los que se les Obj ect ject s <ob m /> <pa ra > Obj Par ect am ete r asigna Valores específicos (Humanos/Robots) st nts d li Ele me g /> 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 HTM L itio tion > <pa line X) efin crip br / Out of ( <li> D des < l /> ent sion nt Ter m <co Ver me <dl> um ocu tion /> Doc Ld > <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> orm ion of ot b <he Fo rms F ct s ma yn am , dy> Coll e gen d clas ute s ar <bo a, p rm> m le el ttrib l, met <fo For lab id eA ts. t> Cor htm lemen ldse In put t te: ad, e nts --> <fie nd> pu 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 o f op io ns scrip s <!- /> up opt ute put Gro own put ttrib tion <in be •Estructura: body, head, html, title RL > p-d eA •Hipertexto: a rma g not eU lect p> Dro t in uag lan Info Bas data <se ro u tex ang sm ay , hr , Pag e ptg ge L set a Lar ute Met e <o ion > ton ib Attr e, fram ts. e e /> urc opt But age s Tit le tr eso < rea > d ir u ra m en <ba a /> van ce xta ang r, f t ele m et Rele resour <te e: L ase, b scrip <m tton > Not > le rce <bu in b am or <t itle Sty re sou u sed ar •Texto: abbr, acronym, address, blockquote, br, cite, •Lista: dl, dt, dd, ol, ul, li 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 tu re > le K eyb ruc tab le Tab ody St g < n> le b ter key ent Hea din n ptio Tab ess um ctio <ca le f oo acc Doc e se tion ead > Tab gro up code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, •Objetos: object, param Pag sec <th mn ]> ne ody > nts ad 1-6 Inli <tb t> Colu n Eve onU nlo <h[ aph m dow agr tfoo Colu row Win <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 q, samp, span, strong, var le r /> tr> Tab ts ese t •Edición: del, ins <b < ven onR /> > mE elec t <hr <th For onS > mit nk <td aps r on Sub e li age M lu s Pag link onB ge Link d Im han •Presentación: b, big, hr, i, small, sub, sup, tt ail s an ge onC us Em Ima f=" "> :"> hor or age Map e Map oc hre to nc nch Im ge ag onF <a mail e"> A to a Ima f Im •Texto Bidireccional: bdo f=" 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 •Formularios: button, fieldset, form, input, label, em rac ma onK re kup ng Cha tion eyp tM ar Str o sis mo n ta Quo rsand onK t Tex pha tion Com eou •Módulo de Imagen: img Em ta " p e nts ous r > quo n Am an Eve onM ove rong 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 <e uot e> &# < rea ol ckq re G mb lick onM Abb ym 60; > " sy onC ck <blo &# "At legend, select, optgroup, option, textarea 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 •Metainformación: meta <ab nym> ma &# € Sm ark em -for ; ous ro Pre 128 • dem onM <ac s> ion &# Tra spa ce d res De finit 14 9; n d ing <ad &# ™ Pou eak bol •Tablas: caption, col, colgroup, table, tbody, td, tfoot, e ; -br 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 •Scripting: noscript, script e> ert 169 ; dde <cit Ins ript &# mA sc fro <de l> Sub script ree er ion le f s> Sup ect ilab th, thead, tr <in t dir Ava b> Tex <su p> <su •Hoja de Estilo: style element o> <bd •Mapa de Imagen del lado Cliente: area, map •Mapa de Imagen del lado Servidor: Attribute •Link: link ismap on img •Base: base www.maximiliano.cl
    24. 24. Tarea Publicar un post con: Tipos de elementos que se pueden anidar dentro de otros Ejemplificar utilizando el editor de HTML de WordPress Apuntes de la clase, lo que les quedó claro y los que no y les gustaría ver nuevamente.
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×