Descargado 1015 veces
![+ 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](https://image.slidesharecdn.com/html-091110200456-phpapp02/85/HTML-que-es-y-para-que-sirve-54-320.jpg)
Subido porMaximiliano Martin
HTML ¿qué es y para que sirve?
El documento describe el lenguaje de marcado HTML y para qué sirve. HTML es el lenguaje de marcado más extendido para crear páginas web y describir la estructura y contenido de un documento a través de etiquetas. Sirve para comunicar e informar a usuarios y máquinas sobre el contenido de una página web de forma visible e invisible.
Más contenido relacionado
Similar a HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
- 1. <H1>html</H1> <h2>Qué es el html y para qué sirve</h2> por Maximiliano Martin - www.maximiliano.cl www.maximiliano.cl
- 2. Qué es HTML Lenguaje de Marcado más extendido 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 www.maximiliano.cl
- 4. Qué es HTML SGML 1986 Lenguaje de Marcado Generalizado Standard HTML 1991 Lenguaje de Marcas de Hipertextos www.maximiliano.cl
- 5.
- 6. Para qué sirve Describir estructura y contenido www.maximiliano.cl
- 7. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos www.maximiliano.cl
- 8. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” 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 www.maximiliano.cl < >
- 10. Modularización (XHTML) de elementos Declaración / DOCTYPE www.maximiliano.cl
- 11. Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <html> 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. / www.maximiliano.cl
- 13. Estructura de Elementos Elemento <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 14. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 15. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 16. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 17. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final > Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 18.
- 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. Elemento Raiz /<html> 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> www.maximiliano.cl
- 22. Estructura de documento <html> </html> www.maximiliano.cl
- 23. Estructura de documento <html> <head> </head> </html> www.maximiliano.cl
- 24. Estructura de documento <html> <head> </head> <body> </body> </html> www.maximiliano.cl
- 25. Estructura de documento <html> <head> </head> <body> </body> </html> 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> 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 www.maximiliano.cl
- 28. ¿Para quién? Usuarios Comunicamos/Informamos www.maximiliano.cl
- 29. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos www.maximiliano.cl
- 30. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” www.maximiliano.cl
- 31. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 www.maximiliano.cl
- 32. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p 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. 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, 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 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 www.maximiliano.cl
- 37. <head> o cabecera Contiene información sobre el documento que: no se muestra directamente al usuario 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ía de Referencia Rápida XHTML</title> </head> <body> ...elementos del body... </body> </html> www.maximiliano.cl
- 39. <head> o cabecera Contiene información sobre el documento que: referencia a metaetiquetas 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="... www.maximiliano.cl
- 41. <head> o cabecera Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos 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" /> www.maximiliano.cl
- 43. <body> o cuerpo Define el contenido del documento. Lo que se muestra a través del navegador 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> 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> 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> 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> 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> 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> 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> 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> 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" /> 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 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 www.maximiliano.cl
- 55.
- 56. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes www.maximiliano.cl
- 57. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes www.maximiliano.cl
- 58. WYSIWYG What You See Is What You Get Lo que ves es lo que obtienes www.maximiliano.cl
- 59. Validación Verifica la correcta implementación del código según el DTD declarado http://validator.w3.org/ www.maximiliano.cl
- 60.
- 61.
- 62.
- 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. Ejercicio Escribir las etiquetas identificadas www.maximiliano.cl
- 65. Ejercicio ¿Cuántos elementos HTML puedes nombrar en 5 minutos? www.maximiliano.cl
- 66. Gracias Maximiliano Martin www.maximiliano.cl www.maximiliano.cl