HTML Contenedores y tipos de elementos

9,256 views

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
9,256
On SlideShare
0
From Embeds
0
Number of Embeds
313
Actions
Shares
0
Downloads
64
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.

    ×