introduccion al html - unq.edu.ar · introduccion al html. características del html...
TRANSCRIPT
Introduccion al H
TML
HTML
HTML
HTML
Características del HTML
�M
ultip
lata
form
a�Sim
ple
�Est
áen
todos
lados
�N
o e
s m
ás q
ue
sim
ple
tex
to�Li
bre
Elementos del HTML
�Est
ruct
ura
�Pr
esen
taci
ón
�H
iper
text
o
Etiquetas
�La
est
ruct
ura
bási
ca d
e un d
ocu
men
to
HTM
L in
cluye
etiquet
as, que
rodea
n e
l co
nte
nid
o y
le
aplic
an form
ato.
<!D
OC
TY
PE
htm
l P
UB
LIC
"-/
/W3C
//D
TD
XH
TM
L 1
.0 S
tric
t//E
N”
"htt
p:/
/ww
w.w
3.o
rg/T
R/x
htm
l1/D
TD
/xh
tml1
-str
ict.
dtd
"><
htm
l><
bo
dy
> Ést
a es
mi p
rim
era
pági
na
web
</b
od
y>
</h
tml>
<!D
OC
TY
PE
htm
l P
UB
LIC
"-/
/W3C
//D
TD
XH
TM
L 1
.0 S
tric
t//E
N”
"htt
p:/
/ww
w.w
3.o
rg/T
R/x
htm
l1/D
TD
/xh
tml1
-str
ict.
dtd
"><
htm
l><
bo
dy
> Ést
a es
mi p
rim
era
pági
na
web
</b
od
y>
</h
tml>
Estructura de una página
�<
TIT
LE>
…<
/TIT
LE>
�<
!--
Com
enta
rio -
->�
Sal
tos
de
línea
y e
spaci
os
en
�bla
nco
->
Se
ignora
n�
–<
BR>
�–&
nbsp
;
Títulos
�H
emos
agre
gado d
os
elem
ento
s nuev
os
aquí, q
ue
empie
zan c
on la
etiq
uet
a head
y title
(y v
e co
mo a
mbas
se c
ierr
an).
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><
he
ad
> <ti
tle
>M
i p
rim
era
pá
gin
a w
eb
</t
itle
><
/he
ad
><b
ody> É
sta
es m
i pri
mer
a pá
gin
a w
eb</
bod
y></
htm
l>
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><
he
ad
> <ti
tle
>M
i p
rim
era
pá
gin
a w
eb
</t
itle
><
/he
ad
><b
ody> É
sta
es m
i pri
mer
a pá
gin
a w
eb</
bod
y></
htm
l>
Párrafos
�Agre
ga
otr
a lín
ea a
tu d
ocu
men
to:
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y> Ést
a es
mi p
rim
era
pági
na
web
Qu
ée
mo
cio
na
nte
</bo
dy>
</h
tml>
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y> Ést
a es
mi p
rim
era
pági
na
web
Qu
ée
mo
cio
na
nte
</bo
dy>
</h
tml>
Metadatos
�In
form
aci
ón s
obre
los
dato
s�
Sec
ción H
EAD
:–
<M
ETA H
TTP-E
QU
IV=
"pro
pie
dad
" CO
NTEN
T=
"conte
nid
o">
–<
META N
AM
E=
"pro
pie
dad"
CO
NTEN
T=
"conte
nid
o">
Metadatos
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e>
<ME
TA
HT
TP
-EQ
UIV
="R
efre
sh"
CO
NT
EN
T="
5;U
RL=
htt
p://
ww
w.u
nq.
edu
.ar"
><M
ET
A N
AM
E="
Au
tor"
CO
NT
EN
T=“
Pag
ina
de
la U
NQ
"></
hea
d>
<bod
y> Ést
a es
mi p
rim
era
pági
na
web
Qu
éem
ocio
nan
te c
ambi
ara
en 5
seg
un
dos
....
</bo
dy>
</h
tml>
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e>
<ME
TA
HT
TP
-EQ
UIV
="R
efre
sh"
CO
NT
EN
T="
5;U
RL=
htt
p://
ww
w.u
nq.
edu
.ar"
><M
ET
A N
AM
E="
Au
tor"
CO
NT
EN
T=“
Pag
ina
de
la U
NQ
"></
hea
d>
<bod
y> Ést
a es
mi p
rim
era
pági
na
web
Qu
éem
ocio
nan
te c
ambi
ara
en 5
seg
un
dos
....
</bo
dy>
</h
tml>
Otros Metadatos
�<
META N
AM
E=
“copyr
ight”
CO
NTEN
T=
“Em
pre
sa, au
tor,
dis
eñad
or”
>�
<M
ETA N
AM
E=
“key
wor
ds”
CO
NTEN
T=
“pal
abra
s, c
lave
, re
lativa
s, a
l, c
onte
nid
o, del
, si
tio, w
eb”>
�<
META N
AM
E=
“des
crip
tion”
CO
NTEN
T=
“Des
crip
ción d
el
conte
nid
o d
el s
itio
web
, fr
ases
im
port
ante
s re
laci
onad
as
con la
final
idad
del
sitio
”>�
<M
ETA N
AM
E=
“auth
or”
CO
NTEN
T=
“Quié
n lo h
a hec
ho,
per
sona
o em
pre
sa”>
�<
META N
AM
E=
"robots
" CO
NTEN
T=
"index
, fo
llow
">�
<M
ETA H
TTP-E
QU
IV=
“Conte
nt-
Typ
e”CO
NTEN
T=
“tex
t/htm
l; c
har
set=
iso-8
859-1
”>�
<M
ETA H
TTP-E
QU
IV=
"Conte
nt-
Languag
e" C
ON
TEN
T=
"ES">
�<
META H
TTP-E
QU
IV=
"Conte
nt-
Scr
ipt-
Typ
e"
CO
NTEN
T=
"Jav
aScr
ipt"
>
Ahora…Párrafos
�Cam
bia
las
dos
línea
s para
que
se
mues
tren
así
:
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y> <p
>É
sta
es m
i pri
mer
a pá
gin
a w
eb<
/p>
<
p>
Qu
éem
ocio
nan
te<
/p>
</bo
dy>
</h
tml>
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y> <p
>É
sta
es m
i pri
mer
a pá
gin
a w
eb<
/p>
<
p>
Qu
éem
ocio
nan
te<
/p>
</bo
dy>
</h
tml>
Énfasis
�Pued
es d
ar é
nfa
sis
a un t
exto
en u
n p
árra
fo
usa
ndo e
m (
énfa
sis)
y s
trong (
may
or
énfa
sis)
. Ést
as s
on d
os
man
eras
de
hac
er m
ás o
men
os
lo
mis
mo, au
nque
tradic
ional
men
te, lo
s nav
egad
ore
s m
ues
tran
em
en itá
licas
y s
trong e
n n
egrita
s.
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y> <p>É
sta
es m
i pri
mer
a pá
gin
a w
eb</
p>
<p>S
í, es
o <
em
>e
s</e
m>
lo q
ue
dije
. Es
<st
ron
g>
mu
y<
/str
on
g>
emoc
ion
ante
.</p
></
bod
y></
htm
l>
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y> <p>É
sta
es m
i pri
mer
a pá
gin
a w
eb</
p>
<p>S
í, es
o <
em
>e
s</e
m>
lo q
ue
dije
. Es
<st
ron
g>
mu
y<
/str
on
g>
emoc
ion
ante
.</p
></
bod
y></
htm
l>
Cortes de línea
�U
na e
tiquet
a de
cort
e de
línea
tam
bié
n
pued
e usa
rse
para
sep
ara
r lín
eas
así
:
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y> Ést
a es
mi p
rim
era
pági
na
web
<b
r />
Qu
éem
ocio
nan
te</
bod
y></
htm
l>
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp:
//w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y> Ést
a es
mi p
rim
era
pági
na
web
<b
r />
Qu
éem
ocio
nan
te</
bod
y></
htm
l>
Sin
em
bar
go e
ste
mét
odo
está
mu
y so
breu
sad
oy
no
deb
ería
ser
usa
do
si s
e qu
iere
sep
arar
tex
to e
n d
os lí
nea
s
Encabezados
�Son h1, h2, h3, h4, h5
y h6. Sie
ndo h
1
el m
ayor
y h6 e
l m
enor.
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y><
h1>
Mi
pri
me
ra p
ág
ina
we
b<
/h1>
<h
2>¿Q
ué
es
est
o?<
/h2>
<p
>U
na
pá
gin
a s
imp
le c
rea
da
usa
nd
o H
TM
L<
/p>
<h
2>¿P
ara
qu
ée
s e
sto
?</h
2><
p>
Pa
ra a
pre
nd
er
HT
ML
</p
></
bod
y></
htm
l>
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb</
titl
e></
hea
d>
<bod
y><
h1>
Mi
pri
me
ra p
ág
ina
we
b<
/h1>
<h
2>¿Q
ué
es
est
o?<
/h2>
<p
>U
na
pá
gin
a s
imp
le c
rea
da
usa
nd
o H
TM
L<
/p>
<h
2>¿P
ara
qu
ée
s e
sto
?</h
2><
p>
Pa
ra a
pre
nd
er
HT
ML
</p
></
bod
y></
htm
l>
Listas
�La
s hay
de
tres
tip
os:
ord
enadas
(ol)
, des
ord
enad
as
(ul)
y d
e def
inic
iones
(li).
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a p
ágin
a w
eb</
titl
e></
hea
d>
<bod
y><h
1>M
i pri
mer
a p
ágin
a w
eb</
h1>
<h2>
¿Qu
ées
est
o?<
/h2>
<p>U
na
pág
ina
sim
ple
cre
ada
usa
nd
o H
TM
L</
p>
<h2>
¿Par
a q
ué
es e
sto?
</h
2><
ul>
<li
>P
ara
ap
ren
de
r H
TM
L<
/li>
<li
>P
rob
ar<
/li>
<li
>L
ista
s e
n H
TM
L.<
/li>
</u
l></
bod
y></
htm
l>
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a p
ágin
a w
eb</
titl
e></
hea
d>
<bod
y><h
1>M
i pri
mer
a p
ágin
a w
eb</
h1>
<h2>
¿Qu
ées
est
o?<
/h2>
<p>U
na
pág
ina
sim
ple
cre
ada
usa
nd
o H
TM
L</
p>
<h2>
¿Par
a q
ué
es e
sto?
</h
2><
ul>
<li
>P
ara
ap
ren
de
r H
TM
L<
/li>
<li
>P
rob
ar<
/li>
<li
>L
ista
s e
n H
TM
L.<
/li>
</u
l></
bod
y></
htm
l>
Listas
�Ahora
cam
bia
las
etiq
uet
as u
lpor
ol.
�Lu
ego, re
empla
za e
l có
dig
o a
nte
rior
por
esto
:
<ul>
<li>
Par
a ap
ren
der
HT
ML<
/li>
<li>
Par
a P
roba
r<
ol>
<li>
A m
i mae
stra
</li
><l
i>A
mis
am
igos
</li
><l
i>A
mi g
ato<
/li>
<li>
Al p
equ
eño
pato
hab
lad
or e
n m
i cer
ebro
</li
></
ol>
</li
><l
i>Q
ue
pued
o h
acer
con
HT
ML.
</li
></
ul>
<ul>
<li>
Par
a ap
ren
der
HT
ML<
/li>
<li>
Par
a P
roba
r<
ol>
<li>
A m
i mae
stra
</li
><l
i>A
mis
am
igos
</li
><l
i>A
mi g
ato<
/li>
<li>
Al p
equ
eño
pato
hab
lad
or e
n m
i cer
ebro
</li
></
ol>
</li
><l
i>Q
ue
pued
o h
acer
con
HT
ML.
</li
></
ul>
Enlaces (Links)
�U
na e
tiquet
a ancl
a (a
) es
usa
da
para
def
inir u
n e
nla
ce p
ero t
am
bié
n n
eces
itará
s el
des
tino (href)
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a p
ágin
a w
eb</
titl
e></
hea
d>
<bod
y><h
1>M
i pri
mer
a p
ágin
a w
eb</
h1>
<h2>
¿Qu
ées
est
o?<
/h2>
<p>U
na
pág
ina
sim
ple
cre
ada
usa
nd
o H
TM
L</
p>
<h2>
¿Par
a q
ué
es e
sto?
</h
2><p
>Par
a ap
ren
der
HT
ML
</p
>
<h
2>E
nla
ce r
eco
me
nd
ad
o<
/h2>
<p
><
a h
ref=
“htt
p:/
/ro
ckte
ch.b
log
spo
t.co
m/”
>R
ock
& T
ech
</a
><
/p>
</b
ody>
</h
tml>
<!D
OC
TY
PE
htm
l PU
BL
IC "
-//W
3C//
DT
D X
HT
ML
1.0
Str
ict/
/EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a p
ágin
a w
eb</
titl
e></
hea
d>
<bod
y><h
1>M
i pri
mer
a p
ágin
a w
eb</
h1>
<h2>
¿Qu
ées
est
o?<
/h2>
<p>U
na
pág
ina
sim
ple
cre
ada
usa
nd
o H
TM
L</
p>
<h2>
¿Par
a q
ué
es e
sto?
</h
2><p
>Par
a ap
ren
der
HT
ML
</p
>
<h
2>E
nla
ce r
eco
me
nd
ad
o<
/h2>
<p
><
a h
ref=
“htt
p:/
/ro
ckte
ch.b
log
spo
t.co
m/”
>R
ock
& T
ech
</a
><
/p>
</b
ody>
</h
tml>
Imágenes
�La
etiquet
a img
es u
sada
par
a in
sert
ar u
na
imag
en e
n u
n d
ocu
men
to H
TM
L. A
gre
ga
lo
siguie
nte
ante
s de
/body:
�El at
ributo
src
le
dic
e al
nav
egad
or
dónde
está
la im
agen
. �
Los
atributo
s an
cho (
wid
th)
y la
altura
(h
eight)
son n
eces
ario
s.
�El at
ributo
alt e
s la
des
crip
ción a
lter
nat
iva.
Es
usa
da
para
gen
te q
ue
no p
ued
e o h
a el
egid
o
no v
er im
ágen
es. Es
requer
ido.
�Com
o la
etiq
uet
a br,
im
g n
o t
iene
etiq
uet
a par
a ce
rrar
, as
íque
se c
ierr
a a
sím
ism
a te
rmin
ando c
on “
/>”
<im
g s
rc=
" h
ttp
://w
ww
.go
og
le.c
om
/im
ag
es/
log
o.g
if "
wid
th=
"157
" h
eig
ht=
"70
" a
lt=
“Go
og
le L
og
o"
/><
img
src
="
htt
p:/
/ww
w.g
oo
gle
.co
m/i
ma
ge
s/lo
go
.gif
" w
idth
="1
57"
he
igh
t="7
0"
alt
=“G
oo
gle
Lo
go
" />
Tablas
�Copia
lo s
iguie
nte
:
�ta
ble
def
ine
la t
abla
�tr
def
ine
una
fila
�td
def
ine
una c
elda
(deb
en e
star
entr
e et
iquet
as t
r)
<ta
ble
><
tr>
<td
>F
ila
1,
celd
a 1
</t
d>
<td
>F
ila
1,
celd
a 2
</t
d>
<td
>F
ila
1,
celd
a 3
</t
d>
</t
r><
tr>
<td
>F
ila
2,
celd
a 1
</t
d>
<td
>F
ila
2,
celd
a 2
</t
d>
<td
>F
ila
2,
celd
a 3
</t
d>
</t
r><
tr>
<td
>F
ila
3,
celd
a 1
</t
d>
<td
>F
ila
3,
celd
a 2
</t
d>
<td
>F
ila
3,
celd
a 3
</t
d>
</t
r><
tr>
<td
>F
ila
4,
celd
a 1
</t
d>
<td
>F
ila
4,
celd
a 2
</t
d>
<td
>F
ila
4,
celd
a 3
</t
d>
</t
r><
/ta
ble
>
<ta
ble
><
tr>
<td
>F
ila
1,
celd
a 1
</t
d>
<td
>F
ila
1,
celd
a 2
</t
d>
<td
>F
ila
1,
celd
a 3
</t
d>
</t
r><
tr>
<td
>F
ila
2,
celd
a 1
</t
d>
<td
>F
ila
2,
celd
a 2
</t
d>
<td
>F
ila
2,
celd
a 3
</t
d>
</t
r><
tr>
<td
>F
ila
3,
celd
a 1
</t
d>
<td
>F
ila
3,
celd
a 2
</t
d>
<td
>F
ila
3,
celd
a 3
</t
d>
</t
r><
tr>
<td
>F
ila
4,
celd
a 1
</t
d>
<td
>F
ila
4,
celd
a 2
</t
d>
<td
>F
ila
4,
celd
a 3
</t
d>
</t
r><
/ta
ble
>
Tablas
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><t
able
BO
RD
ER
=“0”
BG
CO
LOR
=“re
d”>
<tr>
<td
>Nor
mal
</td
><t
d>N
orm
al</
td>
</tr
><t
rB
GC
OLO
R=“
yello
w”>
<t
d>N
orm
al</
td>
<td
BG
CO
LOR
=“bl
ue”
> A
zul<
/td
></
tr>
</ta
ble>
</bo
dy>
</h
tml>
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><t
able
BO
RD
ER
=“0”
BG
CO
LOR
=“re
d”>
<tr>
<td
>Nor
mal
</td
><t
d>N
orm
al</
td>
</tr
><t
rB
GC
OLO
R=“
yello
w”>
<t
d>N
orm
al</
td>
<td
BG
CO
LOR
=“bl
ue”
> A
zul<
/td
></
tr>
</ta
ble>
</bo
dy>
</h
tml>
Tablas
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><t
able
BO
RD
ER
=“0”
BG
CO
LOR
=“re
d”
CE
LLSP
AC
ING
=“0”
><t
r><t
d>N
orm
al</
td>
<td
>Nor
mal
</td
></
tr>
<tr
BG
CO
LOR
=“ye
llow
”>
<td
>Nor
mal
</td
><t
dB
GC
OLO
R=“
blu
e”>
Azu
l</t
d>
</tr
></
tabl
e></
bod
y></
htm
l>
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><t
able
BO
RD
ER
=“0”
BG
CO
LOR
=“re
d”
CE
LLSP
AC
ING
=“0”
><t
r><t
d>N
orm
al</
td>
<td
>Nor
mal
</td
></
tr>
<tr
BG
CO
LOR
=“ye
llow
”>
<td
>Nor
mal
</td
><t
dB
GC
OLO
R=“
blu
e”>
Azu
l</t
d>
</tr
></
tabl
e></
bod
y></
htm
l>
Tablas
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><t
able
BO
RD
ER
=“1”
BG
CO
LOR
=“re
d”
CE
LLSP
AC
ING
=“15
”><t
r><t
d>N
orm
al</
td>
<td
>Nor
mal
</td
></
tr>
<tr
BG
CO
LOR
=“ye
llow
”>
<td
>Nor
mal
</td
><t
dB
GC
OLO
R=“
blu
e”>
Azu
l</t
d>
</tr
></
tabl
e></
bod
y></
htm
l>
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><t
able
BO
RD
ER
=“1”
BG
CO
LOR
=“re
d”
CE
LLSP
AC
ING
=“15
”><t
r><t
d>N
orm
al</
td>
<td
>Nor
mal
</td
></
tr>
<tr
BG
CO
LOR
=“ye
llow
”>
<td
>Nor
mal
</td
><t
dB
GC
OLO
R=“
blu
e”>
Azu
l</t
d>
</tr
></
tabl
e></
bod
y></
htm
l>
Tablas
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><C
EN
TE
R>
<tab
leB
OR
DE
R=“
1”B
GC
OLO
R=“
red
”C
ELL
SPA
CIN
G=“
15”>
<tr
BG
CO
LOR
=“ye
llow
”>
<td
><FO
NT
siz
e=“5
”>O
tro
tam
año
de
Fuen
te</
FON
T><
/td
></
tr>
</ta
ble>
</C
EN
TE
R>
</bo
dy>
</h
tml>
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><C
EN
TE
R>
<tab
leB
OR
DE
R=“
1”B
GC
OLO
R=“
red
”C
ELL
SPA
CIN
G=“
15”>
<tr
BG
CO
LOR
=“ye
llow
”>
<td
><FO
NT
siz
e=“5
”>O
tro
tam
año
de
Fuen
te</
FON
T><
/td
></
tr>
</ta
ble>
</C
EN
TE
R>
</bo
dy>
</h
tml>
Insertando HTML externo
�Es
tan fác
il co
mo c
opia
r y
peg
ar
el c
ódig
o
que
se n
os
pro
porc
iona.
�Si se
req
uie
re s
e le
pued
e dar
form
ato
des
pués
.�
Inte
nta
peg
ando e
ste
códig
o:
<o
bje
ct w
idth
="4
25"
he
igh
t="3
50">
<p
ara
m n
am
e=
"mo
vie
" v
alu
e=
"htt
p:/
/ww
w.y
ou
tub
e.c
om
/v/a
1Y73
sPH
Kx
w">
</p
ara
m>
<p
ara
m
na
me
="w
mo
de
" v
alu
e=
"tra
nsp
are
nt"
><
/pa
ram
><
em
be
d
src=
"htt
p:/
/ww
w.y
ou
tub
e.c
om
/v/a
1Y73
sPH
Kx
w"
typ
e=
"ap
pli
cati
on
/x-s
ho
ckw
av
e-
fla
sh"
wm
od
e=
"tra
nsp
are
nt"
wid
th=
"425
" h
eig
ht=
"350
"><
/em
be
d>
</o
bje
ct>
<o
bje
ct w
idth
="4
25"
he
igh
t="3
50">
<p
ara
m n
am
e=
"mo
vie
" v
alu
e=
"htt
p:/
/ww
w.y
ou
tub
e.c
om
/v/a
1Y73
sPH
Kx
w">
</p
ara
m>
<p
ara
m
na
me
="w
mo
de
" v
alu
e=
"tra
nsp
are
nt"
><
/pa
ram
><
em
be
d
src=
"htt
p:/
/ww
w.y
ou
tub
e.c
om
/v/a
1Y73
sPH
Kx
w"
typ
e=
"ap
pli
cati
on
/x-s
ho
ckw
av
e-
fla
sh"
wm
od
e=
"tra
nsp
are
nt"
wid
th=
"425
" h
eig
ht=
"350
"><
/em
be
d>
</o
bje
ct>
Imágenes
�<
IMG
>–SRC
–W
IDTH
y H
EIG
HT
–BO
RD
ER
–ALT
ÆRec
om
endable
�Im
agen
de
fondo d
e una
págin
a–
<BO
DY B
ACKG
RO
UN
D=
“”>
Imágenes
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y>Si
n T
amañ
o <
IMG
SR
C=“
foto
.jpg”
>10
0 x
50 <
IMG
SR
C=“
foto
.jpg”
WID
TH
=“10
0”H
EIG
HT
=“50
”>
</bo
dy>
</h
tml>
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
> <tit
le>M
i pri
mer
a pá
gin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y>Si
n T
amañ
o <
IMG
SR
C=“
foto
.jpg”
>10
0 x
50 <
IMG
SR
C=“
foto
.jpg”
WID
TH
=“10
0”H
EIG
HT
=“50
”>
</bo
dy>
</h
tml>
Carga de datos en Formularios
�Clie
nte
ÆSer
vidor
<FO
RM
NAM
E=
”nom
bre
”ACTIO
N=
”pag
ina.
htm
l”M
ETH
OD
=”m
etodo”>
Contr
ole
s del
form
ula
rio
</F
ORM
>�
Mét
odo:
–PO
ST:
sin lim
itac
ión d
e dat
os,
men
saje
más
la
rgo
–G
ET:
limitac
ión d
e dat
os,
tra
nsa
cció
n m
ás
senci
lla
Carga de datos en Formularios
�Atr
ibuto
s N
AM
E y
VALU
E�
Boto
nes
(par
a en
viar
info
rmac
ión, borr
ar y
otr
as a
ccio
nes
):
<IN
PU
T T
YPE
=”S
UBM
IT”>
, <
INPU
T T
YPE
=”R
ESET”>
, <
INPU
T T
YPE
=”B
UTTO
N”>
�Im
ágen
es q
ue
actú
an c
om
o b
oto
nes
(par
a en
viar
in
form
ació
n):
<IN
PU
T T
YPE
=”I
MAG
E”>
�Cam
pos
de
verifica
ción:
<IN
PUT T
YPE
=”C
HECKBO
X”>
�Cam
pos
excl
uye
nte
s (b
oto
nes
de
radio
): <
INPU
T
TYPE
=”R
AD
IO”>
�Cam
pos
de
text
o:
<IN
PUT T
YPE
=”T
EXT”>
Carga de datos en Formularios
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
>
<tit
le>M
i pri
mer
a p
ágin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><F
OR
M>
Nom
bre:
<IN
PU
T T
YP
E=“
TE
XT
”N
AM
E=“
nom
bre”
SIZ
E=“
10”
MA
XLE
NG
TH
=“30
”><b
r>T
urn
o qu
e cu
rsa:
<IN
PU
T T
YP
E=“
RA
DIO
”N
AM
E=“
turn
o”V
ALU
E=“
1”>M
añan
a<I
NP
UT
TY
PE
=“R
AD
IO”
NA
ME
=“tu
rno”
VA
LUE
=“2”
>Tar
de
<IN
PU
T T
YP
E=“
RA
DIO
”N
AM
E=“
turn
o”V
ALU
E=“
3”>N
och
e<b
r>M
ater
ia q
ue
curs
a:<I
NP
UT
TY
PE
=“C
HE
CK
BO
X”
NA
ME
=“R
edes
”V
ALU
E=“
si”>
Red
es
<IN
PU
T T
YP
E=“
CH
EC
KB
OX
”N
AM
E=“
S O
pera
tivo
s”V
ALU
E=“
si”>
S O
pera
tivo
s<I
NP
UT
TY
PE
=“C
HE
CK
BO
X”
NA
ME
=“A
lgeb
ra”
VA
LUE
=“si
”> A
lgeb
ra</
FOR
M>
</bo
dy>
</h
tml>
<!D
OC
TY
PE
htm
l PU
BLI
C "
-//W
3C//
DT
D X
HT
ML
1.0
Stri
ct//
EN
”"h
ttp
://w
ww
.w3.
org/
TR
/xh
tml1
/DT
D/x
htm
l1-s
tric
t.d
td">
<htm
l><h
ead
>
<tit
le>M
i pri
mer
a p
ágin
a w
eb c
on t
abla
s</t
itle
></
hea
d>
<bod
y><F
OR
M>
Nom
bre:
<IN
PU
T T
YP
E=“
TE
XT
”N
AM
E=“
nom
bre”
SIZ
E=“
10”
MA
XLE
NG
TH
=“30
”><b
r>T
urn
o qu
e cu
rsa:
<IN
PU
T T
YP
E=“
RA
DIO
”N
AM
E=“
turn
o”V
ALU
E=“
1”>M
añan
a<I
NP
UT
TY
PE
=“R
AD
IO”
NA
ME
=“tu
rno”
VA
LUE
=“2”
>Tar
de
<IN
PU
T T
YP
E=“
RA
DIO
”N
AM
E=“
turn
o”V
ALU
E=“
3”>N
och
e<b
r>M
ater
ia q
ue
curs
a:<I
NP
UT
TY
PE
=“C
HE
CK
BO
X”
NA
ME
=“R
edes
”V
ALU
E=“
si”>
Red
es
<IN
PU
T T
YP
E=“
CH
EC
KB
OX
”N
AM
E=“
S O
pera
tivo
s”V
ALU
E=“
si”>
S O
pera
tivo
s<I
NP
UT
TY
PE
=“C
HE
CK
BO
X”
NA
ME
=“A
lgeb
ra”
VA
LUE
=“si
”> A
lgeb
ra</
FOR
M>
</bo
dy>
</h
tml>
Otros tipos de entrada
�Cam
pos
de
contr
aseñ
a (p
ass
word
):
<IN
PU
T T
YPE=
”PASSW
ORD
”>�
Cam
pos
ocu
ltos:
<IN
PU
T
TYPE=
”HID
DEN
”>�
Enví
o d
e fich
eros:
<IN
PU
T T
YPE=
”FIL
E”>
�Li
stas
de
sele
cció
n:
<SELE
CT>
, <
OPTIO
N>
�Áre
as d
e te
xto:
<TEXTAREA>
Otros tipos de entrada
<html>
<head><title>Mi primera página webcon Form</title></head>
<body>
<formaction="ejemplo.php">
Lista Normal
<selectname="Provincia">
<optionvalue="1">Buenos Aires
<optionvalue="2">Cordoba
<optionvalue="3">Mendoza
</select>
Lista de tamaño 3
<selectname="Universidad" size="3">
<optionvalue="UNQ">Universidad Nacde Quilmes
<optionvalue="UNLP">Universidad Nacde La Plata
<optionvalue="UBA">Universidad Nacde Buenos Aires
<optionvalue="UNOBA">Universidad Nacdel Noroeste de Buenos Aires
</select>
Lista de selección múltiple
<selectname="Carrera" multiple>
<optionvalue="TPI">Tecnicaturaen ProgramacionInformatica
<optionvalue="BiTec">Biotecnologia
<optionvalue="Nav">Arquitectura Naval
<optionvalue="IACI">Ingen Automatizaciony control Industrial
</select>
</form>
</body>
</html>
<html>
<head><title>Mi primera página webcon Form</title></head>
<body>
<formaction="ejemplo.php">
Lista Normal
<selectname="Provincia">
<optionvalue="1">Buenos Aires
<optionvalue="2">Cordoba
<optionvalue="3">Mendoza
</select>
Lista de tamaño 3
<selectname="Universidad" size="3">
<optionvalue="UNQ">Universidad Nacde Quilmes
<optionvalue="UNLP">Universidad Nacde La Plata
<optionvalue="UBA">Universidad Nacde Buenos Aires
<optionvalue="UNOBA">Universidad Nacdel Noroeste de Buenos Aires
</select>
Lista de selección múltiple
<selectname="Carrera" multiple>
<optionvalue="TPI">Tecnicaturaen ProgramacionInformatica
<optionvalue="BiTec">Biotecnologia
<optionvalue="Nav">Arquitectura Naval
<optionvalue="IACI">Ingen Automatizaciony control Industrial
</select>
</form>
</body>
</html>
Otros tipos de entrada
<html>
<head><title>Mi primera página webcon Form</title></head>
<body>
<formaction="ejemplo.php">
<select>
<optgrouplabel="Lenguajes del lado servidor">
<option>PHP</option>
<option>ASP</option>
</optgroup>
<optgrouplabel="Lenguajes del lado cliente">
<option>JavaScript</option>
<option>VBScript</option>
</optgroup>
</select>
</form>
</body>
</html>
<html>
<head><title>Mi primera página webcon Form</title></head>
<body>
<formaction="ejemplo.php">
<select>
<optgrouplabel="Lenguajes del lado servidor">
<option>PHP</option>
<option>ASP</option>
</optgroup>
<optgrouplabel="Lenguajes del lado cliente">
<option>JavaScript</option>
<option>VBScript</option>
</optgroup>
</select>
</form>
</body>
</html>
Mas Información
�htt
p:/
/ww
w.h
tmlq
uic
k.co
m/e
s/tu
torial
s.htm
l