HTML Contenedores y tipos de elementos
0 recomendaciones6,555 vistas
El documento presenta la estructura básica de HTML para crear páginas web. Explica los elementos principales como <head>, <body> y <title> y describe brevemente los tipos de elementos como en bloque, en línea, de texto, de lista, de objetos e imágenes. También define atributos comunes como href, src y valores.
![+ 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](https://image.slidesharecdn.com/clase03-100905205633-phpapp01/85/HTML-Contenedores-y-tipos-de-elementos-24-320.jpg)
HTML Contenedores y tipos de elementos
- 1. Quiz Escribir la estructura de en HTML del siguiente contenido <!-- Nombre Curso URL -->
- 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 -->
- 4. HTML Contenedores y tipos de elementos Computación Multimedia I - Clase 3 Maximiliano Martin - DUOC 2010
- 6. 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
- 7. <head> o cabecera Contiene información sobre el documento que: no se muestra directamente al usuario www.maximiliano.cl
- 8. <head> o cabecera Contiene información sobre el documento que: no se muestra directamente al usuario <title> <html> <head> <title>Guía de Referencia Rápida XHTML</title> </head> <body> ...elementos del body... </body> </html> www.maximiliano.cl
- 9. <head> o cabecera Contiene información sobre el documento que: referencia a metaetiquetas www.maximiliano.cl
- 10. <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
- 11. <head> o cabecera Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos www.maximiliano.cl
- 12. <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
- 13. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador www.maximiliano.cl
- 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. <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. <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. <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
- 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. <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
- 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> www.maximiliano.cl
- 21. 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
- 22. 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
- 23. + 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
- 24. + 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
- 25. 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.