HTML

<H1>html</H1>
<h2>Qu es el html y para qu sirve</h2>
por Maximiliano Martin - www.maximiliano.cl

www.maximiliano.cl
Qu es HTML
Lenguaje de Marcado ms extendido
www.maximiliano.cl
Qu es HTML
Lenguaje de Marcado ms extendido
Codificar un documento
Industria Editorial
Dictado a viva voz
Clases
Presentacin
Procedimientos
Descriptivo
www.maximiliano.cl
Qu es HTML
1986
SGML
Lenguaje de Marcado
Generalizado Standard
1991
HTML
Lenguaje de Marcas de Hipertextos
www.maximiliano.cl
Para qu sirve
www.maximiliano.cl
Para qu sirve
Describir estructura y contenido
www.maximiliano.cl
Para qu sirve
Complementar el texto con Objetos
www.maximiliano.cl
Para qu sirve
Se escribe en forma de Etiquetas
www.maximiliano.cl
Para qu sirve
Se escribe en forma de Etiquetas
Rodeada por Corchetes Angulares
www.maximiliano.cl
<
>
Modularizacin (XHTML)
de elementos
Declaracin / DOCTYPE
www.maximiliano.cl
de elementos
Elemento Raiz / <html>
www.maximiliano.cl
de elementos
Modularizacin. Mdulo de:
Estructura / body, head, html, title
Texto / abbr, acronym, address, etc.
Hipertexto / a
Lista / dl, dt, dd, ol, ul, li.
Objetos / object, param.
Presentacin / b, big, hr, i, etc.
etc. /
www.maximiliano.cl
Estructura de Elementos
Elemento
<a href= title=>texto de enlace</a>

www.maximiliano.cl
Elemento
<Etiqueta inicial>
</Etiqueta final >

www.maximiliano.cl
Elemento
<Etiqueta inicial>
</Etiqueta final >

Contenido

www.maximiliano.cl
Elemento
<Etiqueta inicial>
Atributo=valor
</Etiqueta final >

Contenido

www.maximiliano.cl
Elemento
<Etiqueta inicial>
Atributo=valor
</Etiqueta final >

Contenido

www.maximiliano.cl
www.maximiliano.cl
No es una etiqueta sino una
instruccin
Definicin 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
www.maximiliano.cl

Etiqueta que contiene todo el HTML
Informa al navegador que lo contenido
por l debe ser interpretado como HTML

Inicio y trmino 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
Estructura de documento
<html>
</html>
www.maximiliano.cl
<html>
<head>
</head>
</html>
www.maximiliano.cl
<html>
<head>
</head>
<body>
</body>
</html>
www.maximiliano.cl
<html>
<head>
</head>
<body>
</body>
</html>
www.maximiliano.cl
Mdulos de:
Estructura
html, head, title, body
Metainformacin
Estilos
Link
Base
<html>
<head>
<title> y otros elementos
</head>
<body>
</body>
</html>
www.maximiliano.cl
Mdulos de:
Estructura
html, head, title, body
Metainformacin
Estilos
Link
Base
Mdulos de:
Texto
p, code, div, em, strong, span, q,
pre, samp, h1, h2, h3, etc
Hipertexto
Lista
Objetos
Presentacin
Edicin
Formularios
Tablas
Imgen
Otros
www.maximiliano.cl
<html>
<head>
<title> y otros elementos
</head>
<body>
elementos
</body>
</html>
Para quin?
Usuarios
Comunicamos/Informamos
www.maximiliano.cl
Para quin?
Humanos
Usuarios
Mquinas
www.maximiliano.cl
Para quin?
Humanos
Usuarios
Mquinas
Visible
www.maximiliano.cl
Invisible
Para quin?
Humanos
Usuarios
Mquinas
Visible
Titular principal
www.maximiliano.cl
Invisible
h1
Para quin?
Humanos
Usuarios
Mquinas
Visible
Titular principal
Contenido del artculo
www.maximiliano.cl
Invisible
h1
p
Para quin?
Humanos
Usuarios
Mquinas
Visible
Titular principal
Lista de elementos
www.maximiliano.cl
Invisible
h1
p
ol, ul, li, li, li, li, li.
Para quin?
Humanos
Usuarios
Mquinas
Visible
Titular principal
Lista de elementos
Datos en excel
www.maximiliano.cl
Invisible
h1
p
table, td, tr,
Para quin?
Humanos
Usuarios
Mquinas
Visible
Titular principal
Lista de elementos
Datos en excel
www.maximiliano.cl
Invisible
h1
p
table, td, tr,
Valores de atributos
Para quin?
Humanos
Usuarios
Mquinas
Visible
Titular principal
Lista de elementos
Datos en excel
www.maximiliano.cl
Invisible
h1
p
table, td, tr,
Valores de atributos
<head> o cabecera
Contiene informacin sobre el documento que:
no se muestra directamente al usuario
www.maximiliano.cl
<head> o cabecera
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
<head> o cabecera
referencia a metaetiquetas
www.maximiliano.cl
<head> o cabecera
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
<head> o cabecera
relaciona mediante vnculos a otras URL o archivos
www.maximiliano.cl
<head> o cabecera
relaciona mediante vnculos 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
<body> o cuerpo
Define el contenido del documento. Lo que se
muestra a travs del navegador
www.maximiliano.cl
<body> o cuerpo
<body>...
Elementos en bloque
Elementos en linea
...</body>
www.maximiliano.cl
<body> o cuerpo
<body>...
Elementos en bloque
Elementos en linea
...</body>
www.maximiliano.cl
<body> o cuerpo
<body>...
Elementos en bloque
Elementos en linea
...</body>
www.maximiliano.cl
<body> o cuerpo
<body>...
Elementos en bloque
Elementos en linea
...</body>
www.maximiliano.cl
<body> o cuerpo
<body>...
Elementos en bloque
Elementos en linea
p, div, ol, ul, li,

h1, h2, h3, etc.
a, img, em,
strong, span,
etc.
...</body>
www.maximiliano.cl
<body> o cuerpo
<body>...
Elementos en bloque
Elementos en linea
p, div, ol, ul, li,

h1, h2, h3, etc.
a, img, em,
strong, span,
etc.
...</body>
www.maximiliano.cl
Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores especficos (Humanos/Robots)
<a> vnculo o ancla </a>
www.maximiliano.cl
<a> vnculo o ancla </a>
href
title
class
id
hreflang
accesskey
rel
tabindex
<a href=http://www.wikipedia.com/ancla/
title=Definicin de Wikipedia rel=External> vnculo
o ancla </a>
www.maximiliano.cl
<img src=URI />
scr
alt
class
id
height
longdesc
width
<img src=http://www.w3c.es/img/eslogo-20030729.png
alt="Oficina espaola del W3C" height="52" width="279" />
www.maximiliano.cl
+ Elementos
Estructura: body, head, html, title
Texto: abbr, acronym, address, blockquote, br,
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
p, pre, q, samp, span, strong, var
Presentacin: b, big, hr, i, small, sub, sup, tt
Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
Tablas: caption, col, colgroup, table, tbody, td,
tfoot, th, thead, tr
Mapa de Imagen del lado Cliente: area, map
Mapa de Imagen del lado Servidor: Attribute
ismap on img
www.maximiliano.cl
Hipertexto: a
Lista: dl, dt, dd, ol, ul, li
Objetos: object, param
Edicin: del, ins
Texto Bidireccional: bdo
Mdulo de Imagen: img
Metainformacin: meta
Scripting: noscript, script
Hoja de Estilo: style element
Link: link
Base: base
+ Elementos
ect
r
Obj
ete
am
Par
ect
Obj
>
ject
<ob m />
ra
<pa
s
List
ent
um
Doc
line
Out
E>
TYP
OC
<!D l>
m
t
h
<
ad>
<he
dy>
<bo
ML
)HT
f (X
no
nt
e
io
s
m
Ver
ocu
n
Ld
atio
HTM
form s
t
e in
n
g
e
a
t
P
n
e co
Pag
<ol>
<ul>
<li>
<dl>
>
<dt
>
<dd
st
d li
ere
list
Ord
red
rde
o
n
U
m
e
it
list
List
ion
rm
init
Def
n te
io
ion
init
ript
Def
esc
d
m
Ter
nt
me
Ele
pty
Em
/>
ea
<ar
>
se /
<ba
/>
r
b
<
l />
<co
/>
<hr
g />
<im t />
pu
<in
k />
<lin a />
et
/>
<m
ram
<pa
s
ute
ttrib
eA
le
sty
title
d
use
be
not
,
ay
m
a
m
c
par
tes
ta,
ibu
me
.
Attr
id
nts
ml,
ore
me
, ht
:C
le
d
e
e
t
a
No
nts
->
itle
, he
me
xt or t
ase
e
m
b
T
o
le
C
in
nt
ty
me
t, s
om
scrip
-C
tes
<!ibu
n
io
Attr
be
g
at
RL
ge
not
lan
form
gua
se U a
ay
n
n
a
I
r,
a
B
t
e
L
sm
a
t, h
e
d
t
e
Pag
s
u
a
e
Met
e
ttrib
am
>
urc
s.
, fr
eA
/
t
o
e
g
n
s
le
e
a
ir
e
m
e
s
u
d
Tit
m
ra
tr
<ba a />
ang
r, f
van
t ele
ce
e: L ase, b
et
Rele resour
scrip
Not
<m
e
in b am or
>
urc
yle
d
t
o
le
e
r
s
S
it
s
a
u
re
<t
,p
ipt
me
k />
Scr
ifra
<lin
s
le
ute
yle>
Tab
les
n
ex
b
ttrib
<st
a
io
>
T
t
r
ind
rd A
ript
tab
Cap heade
boa
<sc
y
e
e
r
>
le
K
le
tu
y
ab
c
b
T
d
a
u
t
r
o
<
g
St
n>
le b ter
key
din
ent
ptio
Tab
ess
tion
Hea
oo
um
<ca
acc
sec
le f
up
Doc
n
ad>
Tab
gro
age
the
ctio
P
n
e
<
s
>
m
ad
nts
]>
ne
nlo
ody
Eve
Colu n
1-6
h
Inli
onU
<tb t>
ow
m
<h[
rap
ind
o
olu
rag
>
o
C
W
f
a
w
k
>
t
iv
P
o
a
<
up
<d
le r
bre
lgro
rule
Tab
an>
cell
Line
tal
<co
oad
<sp
der
izon
onL
l />
Hea cell
Hor
<co
<p>
t
>
able
>
/
T
r
ts
t
r
ese
<
ven
<b
onR
t
>
mE
/>
elec
For
<th
<hr
onS
it
>
bm
s
td
u
p
k
<
S
a
n
r
M
on
lu
e li
age
onB
k
Pag
s
ge
n
m
k
n
I
li
a
in
h
L
ail
ge
and
onC us
Em
">
Ima
ges
Map e Map
or
">
oc
or
f="
Ima
ge
g
nch
ilto:
hre
onF
nch
Ima
Ima
<a
"ma
> A k to a
"
f
=
ts
e
f
o
e
>
p
/
hr
ea
ven
nam > Lin
g
r
"
eyu
A
<a
=
dE
e
<im >
e"
onK
oar
nam #nam
ap
eyb
K
<a
"
m
=
<
f
s
/>
hre
ea
titie
own
<a
<ar
sis
r En
eyd ss
pha
ark
cte
onK
em
pre
ara
p
nm
y
h
u
g
io
e
C
k
n
t
o
n
ar
ta
onK
Str
mo
tM
t
sis
Quo rsand
n
Tex
eou
Com
pha
ts
pe
"
tatio
ous
Em
er
ven
Am
quo
onM
ion
g>
eE
han n
eov
g
t
;
t
s
n
s
n
a
4
u
o
u
t
s
o
r
3
&
o
L
Mo
Les
tha
p
quo
&#
<st
onM
;
n
ter
seu
ort
>
8
a
u
>
h
io
l
3
<
e
o
t
e
m
S
o
r
ia
G
&#
<e
uot
mb
onM
lick
rev
ckq
" sy
60;
>
onC
Abb ym
ck
"At
&#
<blo
blcli
wn
on
62;
onD
@
Acr
xt
edo
et
uro
#
s
e
s
ll
E
t
&
s
<q> >
u
u
o
b
re
ove
tted
br
all
64;
onM
Add
em
ma
Sm
&#
<ab nym>
ark
ous
;
-for
ro
dem
128
onM
Pre
e
n
Tra
&#
<ac
itio
pac
ss>
;
s
e
in
9
d
f
r
n
d
14
ing
De
Pou
&#
<ad
eak
;
bol
e
-br
e>
ym
153
Cod
Non ight s
n
&#
<pr
3;
r
atio text
>
6
y
it
n
1
p
f
C
m
Co
&#
<d
ted
;
t
s.co
de>
160
Dele ed tex
yte
&#
<co
;
edB
ert
e>
169
Add
t
Ins
#
ip
m
&
r
<cit
sc
fro
l>
Sub script
ree
<de
le f
er
ilab
tion
s>
Sup
irec
Ava
<in
d
t
b>
Tex
<su
p>
<su
>
o
<bd
s
field
m
of
For
ion
ect
end
Coll
leg
>
m
rm
For
bel
<fo
t>
ut la ut
ldse
Inp
<fie nd>
inp
box
rm
e
o
g
F
wn
ns
<le
-do
ptio
rop
o
bel>
D
ns
f
la
o
<
/>
ptio
up
no
put
Gro
w
o
<in
put
t>
p-d
c
in
o
r
le
t
D
tex
<se
up>
ge
tgro
Lar
<op
n
>
tion
utto
p
B
o
>
<
rea
xta
<te
>
tton
<bu
ms
For
Cor
lass
Estructura: body, head, html, title

Texto: abbr, acronym, address, blockquote, br,
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
p, pre, q, samp, span, strong, var
Presentacin: b, big, hr, i, small, sub, sup, tt
Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
Tablas: caption, col, colgroup, table, tbody, td,
tfoot, th, thead, tr
Mapa de Imagen del lado Cliente: area, map
Mapa de Imagen del lado Servidor: Attribute
ismap on img
www.maximiliano.cl
Hipertexto: a
Lista: dl, dt, dd, ol, ul, li
Objetos: object, param
Edicin: del, ins
Texto Bidireccional: bdo
Mdulo de Imagen: img
Metainformacin: meta
Scripting: noscript, script
Hoja de Estilo: style element
Link: link
Base: base
WYSIWYG
www.maximiliano.cl
WYSIWYG
What You See Is What You Get
Lo que ves es lo que obtienes
www.maximiliano.cl
WYSIWYG
www.maximiliano.cl
WYSIWYG
www.maximiliano.cl
Validacin
Verifica la correcta implementacin del cdigo segn
el DTD declarado
http://validator.w3.org/
www.maximiliano.cl
Validacin
www.maximiliano.cl
Validacin
www.maximiliano.cl
Accesibilidad
www.maximiliano.cl
Accesibilidad
Proporciona alternativas para que lleguemos a ms
usuarios con nuestro mensaje/informacin
Metaetiquetas link
Texto de vnculos
Atributos alt, longdesc, rel, Acceskey, tabindex
Estructura de cabeceras h1, h2, h3
Cambios de idioma
http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTMLTECHS_es.html/
www.maximiliano.cl
Ejercicio
Escribir las etiquetas identificadas
www.maximiliano.cl
Ejercicio
Cuntos elementos HTML puedes
nombrar en 5 minutos?
www.maximiliano.cl
Gracias
Maximiliano Martin
www.maximiliano.cl
www.maximiliano.cl

HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

<H1>html</H1>

<h2>Qu es el html y para qu sirve</h2>

por Maximiliano Martin - www.maximiliano.cl

Lenguaje de Marcas de Hipertextos

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

</Etiqueta final >

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

</Etiqueta final >

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

</Etiqueta final >

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

</Etiqueta final >

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

XHTML 1.0 Strict / XHTML 1.0 Transitional

Elemento Raiz / <html>

Elemento Raiz / <html>

por l debe ser interpretado como HTML

<title>Guía de Referencia Rápida XHTML</title>

<meta name="Description" content="Qu es HTML y para qu sirve" />

<link type="text/css" rel="stylesheet" href="css/base.css" />

p, div, ol, ul, li,

p, div, ol, ul, li,

Estructura: body, head, html, title

Potrebbero piacerti anche

HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

<H1>html</H1>

<h2>Qu es el html y para qu sirve</h2>

por Maximiliano Martin - www.maximiliano.cl

Lenguaje de Marcas de Hipertextos

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

</Etiqueta final >

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

</Etiqueta final >

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

</Etiqueta final >

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

</Etiqueta final >

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

XHTML 1.0 Strict / XHTML 1.0 Transitional

Elemento Raiz / <html>

Elemento Raiz / <html>

por l debe ser interpretado como HTML

<title>Gu&iacute;a de Referencia R&aacute;pida XHTML</title>

<meta name="Description" content="Qu es HTML y para qu sirve" />

<link type="text/css" rel="stylesheet" href="css/base.css" />

p, div, ol, ul, li,

p, div, ol, ul, li,

Estructura: body, head, html, title

Potrebbero piacerti anche

<title>Guía de Referencia Rápida XHTML</title>