Upload
neldonet
View
226
Download
0
Embed Size (px)
Citation preview
7/25/2019 Diseo Web - Curso HTML
1/20
FRRf l lU I I FNTA
TM
C o m o
y a
s a b e m o s
e l c d i g o b s i c o d e
I n t e r n e t
e s e l H T M L p o r l o q u e u n a v e z
q u e t e n g a m o s n u e s t r as i t i od i s e a d o n e c e s i t r a m o st r a n s f e r i re s e d i s e o a l n e a s
d e
c d i g o q u e
p u e d a n
s e r
i n t e r p r e t a d a s
p o r l o s
n a v e g a d o r e s
d e l o s
u s u a r i o s .
I p r o c e s o
de
c r e a r pginas
se
d e n o m i n a , en la
j e r g a , m a q u e -
tac in,
y
dac o m o r e s u l ta d o t e
n e r n u e s t r o diseoc o n v e r t i d o
en
u n
sition avegab le . Luego , encasod e q u e
el proyecto lo requiera , faltarla adicin
de
cdigo JavaScript AJAX ASP
o
PHPpara
hacer que las pginas dinmicaso b t e n g a n
co nte nid o de las basesde datos .
Un p rob le ma que sue le p resenta r se
ai
desarrollar HTMLes lograr qu e e l diseo
sea v isua l izado de igua l fo rm a en la mayora
de los naveg adores de In ternet .
Este i n c o n v e n i e n t e s e d e b e , p r i n c i p a l m e n
t e
a que a lgunos fabr icantes no han incor
p o r a d o
en sus produ cto s los estndares
que d e te rm in an la e s t ruc tu ra de l a W eb .
En con secuen c ia , t en d rem os que ap l i c a r
p a r c h e s en e lcdigo CSS
y
HTMLpara que
la ma que ta sea com pa t ib le con lo s n avega
dores m s f recue ntes : In ternet Explorer 6 ,
7 y8; Moz illa F irefox 3.5 y3.6; Ch ro m e 5.0 y
Safar
4.0.
Esta prctica
s e d e n o m i n a c ro s s-
b r o w s i n g . Es i m p o r t a n t edist ingui ren t re
las d is t in tas vers iones de cada naveg ador ,
ya que cada una in te rpreta e l cdigo
de
form a diferente.
Si n os a seguram os de qu e
n ues t rositiosea com pa t ib le con los s ie te
n a v e g ad o r e s m e n c i o n a d o s , e l 9 6
de los usuar ios de In terne t podrver
s in
prob lem as e l t r aba jo que
es tamos desa r ro l l an do .
H R R M I N T S
GENERAR
CODIGO HTML YCSS
La
aplicacin
m s p o t e n t e d e l m e r c a d o
para generar cdigo HTMLes Ad ob e Drea
mw eave r CSS, qu e com en za rem os a es tu
diar en las prximas pginas.S in emba rgo ,
adems
de e l l a, ex i s ten o tr a s qu e po de m os
utilizarpara redactar
y
gen e ra r cdigo
l eceaa [ . ] ; ?> >
I n t e r f az d e No t e p ad + + ,
d o n d e v e m o s c o m o e j e m p l o
e l c d i go d e una p g i n a
e s c r i t a
en PHP.
t
-:dlv
la33
* zocaio 3^7ie *palding-top: Hpjt^>
i SCHC}
?
< d i v 3t y l
^*'color ;6l>6FTl;
JLine-heigtit:l ^ x ; barde r -bot toM: 2VM o l id 4 3 ] a 3 S . - l d t h : 1 0 0 % : paddUg-hott;
^d iv cia33='fDE*wlario-
3
- y l 3
='width:100%: border-bottOM:2pM o i d 4 J 3 a 3 8 ; - >
< d i v ^ I a 3 3 * * c e n t
>
< d l v id la be i >dlv> i tipar. ryp^ '-t
CSS
y
HTMLpara nuestrossitios.
S i b ien es c ier to que cua lquier ed i tor
d et e x t o p l a n o , c o m o e l Blocde notas
de Win do ws , es suf ic ien te para redactar
cdigo
HTML
y
CSS, nos
convendr
recurrir
a p r o g r a m a s diseadosespec ia lmen te pa ra
t a l fin,
ya que en e l lo s ten d rem os a yudas
v isua les (co m o e l uso dedist in tosco lores
para e l text o ) qu e nos
orientarn
en la tarea
ysimplificarne l t raba jo .
NOTEPAD
Notepad-i~i-
(http://notepad-plus-plus.
o rg ) es unaaplicacinq u e b i e n podramos
def in i rc o m o u na versinm u y m e j o r a d a
de l ed i to r de
t e x to
oel Blocde n o ta si n c l u i
d o
en todos lo s s i stemas W in dow s . Si no
es tamos a cos tumbrados a r edac ta r cdigo
d e
programacin
w e b
a
c iegas ,
n o serc o n v e n i e n t eutilizarlo,y a q u e
no
c u e n t a c o n u n p r e v i e w i n c o r p o r a d o .
De todas man eras , desde un s imp le
a ta jo de te c lad o , pod em os v i sua li z ar
el HTML en los navegadores
de
I n te rn e t qu e ten g am os in s ta lados .
En tre los pr inc ipa les puntos
a favor de es ta
aplicacin
en co n t ram os lo s s igu ien tes :
Es gra t u i ta .
S in tax is co lorea da .
Numeracind e lnea.
Mu y l iv i ana , con sum e
poco s recursos de l s is tema.
Cdigo autocompletable
en d i ferentes lengua jes .
7/25/2019 Diseo Web - Curso HTML
2/20
r eduse r s . com
4: # 4 3 i t
i i - , e i : i a i p a o p s c i c y - S O ) j
- inoz-o f i6c i t y iO,5 i
- k h ^ m l - c p a c i t y i 0.5;
p a c i t y i
O.Sj
l iM f l lB lOpK J id th lOO' . )
) M l C t o u i S t u i : l ( . . / i n i ( / o n d o , J P ( J c e n t t
top i
ocssi o c s H of 0 *9
CSSSilteUr*
" O. lmg
Es
posib le abr i r
y
ges t i onar
arch ivos de
t e x t o
pesados
por
e j e m p l o ,logs de acceso
a serv idores) s in per derestabi l idad.
T OPST Y L EPR O
TopStyle Pro
( w w w . t o p s t y l e 4 . co m )
es uno de l os m e jo res ed i to res de
cdigo
CSS
y, engene ra l ,e s r e c o m e n d a b l e
uti l izar
loc o m oc o m p l e m e n t od e leditorde HTML
principal
qu e em p lee m os pa ra t raba j ar .
Entre suspr inc ipa lesv e n ta ja s p o d e m o s
menc ionar :
Preview del
cdigo
escr i to
; .
en t i em po rea l.
Val idador de est i los
CSS.
Sintaxis
a u t o c o m p l e t a b l e
del
cdigoque es t amos esc r i b i endo .
R Q U DREAMWEAVER?
La
eleccin
d e A d o b e D re a m w e a v e r c o m o
principal her ram ient a de t raba jo
se deb e a que es una
plic cin
m u y
p o t e n t epara desarro l larsitiosw e b
respet ando
los
estnd res CSS y
HTML.
C o n e l la , p o d e m o sdise rsitios de
f o rma
v i sual
od i r e c t a m e n t e
sob re
el cdigo, yt e n e m o s lapos ibi l idad
de t rabajar con
distintos
e n t o r n o s
de p rog ramac in , c om o XHTML ,
CSS,
XML ,
JavaScript, AJAX, PHP
y
ASP.
D reamweaver nosp e r m i t eco n f igu ra rsitios
y de es ta man era ,
de f in i r
u n
mbito
de
desarrollo
ytesteo para losdiseos yap l i ca
c i ones we b qu e gener em os , s in neces idad
de usa r un p rog ram a ex t e rn o pa ra ta l fin.
Adems, esta nueva
versin
de la herra-
E l p a n e l [CSS
Palette
E d i t o r ]
(TopStyle
P r o ), m u e s t r a l o s c o l o r e s u t i l i z a d o s
e n lah o j a dees t i l o s y
cuntas
v e c e s
a p a r e c e c a d a u n o .
ADO BE
D R E A M W E A V E R CSS
< MCTYP ntiHl PUBLIC
Mttp://mw..3.org/T/i
html xalrit.. http://i'wvr H3lHil l i illHiili^^
" Cont
nc-Type"
cont nt- tel lMi^lBPl iWIW ' PWWle>Mer\di
fl iv c lass-"contaiier">
- - onref
-"blo9/\nciEx
.pnp
Locol Voi M'/ oxd iv ciass."Bran(lng">\.fflg src -
"as5ets/%/10BO.png" io~'logo" olt-"lOCa1 tnogazine" ividtn-"2
ieigrt-"73"
/> a
i)."sijBscrH)e" href-"">Jon l
SuBierlb ond buy bocii lsgeK/sponx/a>
< u l x t i >
m i e n t a CSS)c u e n t a c o n u n af unc io na l idad
m u y des t acab l e : e l
a s i s t e n t e d e co d i f i c a
cin i n t e l i gen te .
Su
funcin
esop t im i za r
la
ve l oc i dad de esc r i t u ra de cd igo ,
d a d o q u e e l p r o g r a m a r e c o n o c e ysug i e re
S t r i n g s
d e
cdigo
en d i fe rent es lengua j es
de programacin.
Estas
sugerenc i as
a p a r e c e n
t a n t o
e n f u n c i o n e s p r e d e f i n i d a s
de l l engua j e co m o en o t ras persona l i z adas
q u e h a y a m o s u s a d o e n e l m i s m o d e s a r ro
llo.
P or
o t r o
lado ,c o n A d o b e D r e a m w e a v e r
t e n e m o s
una vent a j a s im p l e pero
f u n d a m e n t a lsob re o t ros ed i t o res
d e H TM L : p o d e m o sinser ta rt ags
co r r i endoslou n c o m a n d o d e l
p r o g r a m a ,c o m o
[ I nse r t a r / Imagen ] .
Verem os m s de t a l les de l a plic cin a
m e d i d a q ue avanc em os en l a co l ecc in .
^
D r e a m w e a v e r es
la
aplicacin de la
s u i t e
Adobe
Web
Premium e s p e c i a l m e n t e
d e s a r r o l l a d a p a r a la
creacin
des i t i o s w e b .
0U ES DftEAMWEAVER?
.HOVEDAOES
tMFORUiCINDCTaLUOA
PARA CEHTES DEL
SECTO EOyCATIVO
A5ISTENCU
V
FOflMAClH
LOCAL
D i s e o . Desarrolo. omprobacn yp u b l ic a ci n . M s r ( ^ .
Ailub^
D i s a T i w ? C>> p-riiitRa
Un
l ieBat o f es y
dtsanoIMuies cfr
cm
UX t a n i a
tUKrs
A basadosm
K lH lD< i
l)-E^>p^bina W 0 ( i c l w i ( i l > r ai n o lc a .d vs wi Aep d ^ n c o n selsrii KilRgmMnfc
'.iXTipabCiMxl i r pedas
a
l> r tK^n c i Adobe
SnnnBUb.
iI I U H D nlKa >eM H S
1 L M
39 r t&5* : r
. t f i -v i r ea ta sMa n t e a nU r n v i i n AA i
Ver nueSEas
MMdnln
7/25/2019 Diseo Web - Curso HTML
3/20
r e d u s e r s . c o m
t t
U ^ D
MWE VER
E s t a a p l i c a c i nc o m b i n au n af u e r t e h e r r a m i e n t a v i s u a lc o nf u n c i o n e sd ed e s a r r o l l o
y
e d i c i n d e c d i g o d e p r o g r a m a c i n . A
p a r t i r
d e
a h o r a c o m e n z a r e m o s
a d a r
n u e s t r o s
j r i m e r o sp a s o s c o n l a v e r s i n C S 5 d e e s t ee d i t o rd e p g i n a s w e b d eA d o b e
I n l i d a d es una de las
l a l i d a d e s m s d e s t a c a d a s d e
D r e a m w e a v e r . staaplicacin
pued e s e r u s ad a po r aque l l a s
p e r s o n a s q u e t e n g a n p o c a e x p e r i e n c i a
e n e l a r m a d o d e u n a pginaHTML ,
p o r q u e
a l i n s e r ta r e l e m e n t o s d e s d e
lo s
m e n s ,
e l p r o g r a m a s e e n c a r g a d e
redactar a laperfeccine lcdigoH T M L
y CSS. Tambinestilpa ra u sua r io s
a v a n z a d o s , y a q u e p e r m i t e m a n i p u l a r
m a n u a l m e n t e lo s t a g s c o n a s is t e n ci a s d e
edicinexcep c io na l e s , qu e ace l e r an e l
p r o c e s o d eredaccind e c d i g o .L u e g o
d e i n i ci a r D r e a m w e a v e r p o r p r i m e r a v e z ,
e s r e c o m e n d a b l e d e f i n i r la
distribucin
d e l e s p a c i o d e t r a b a j o . Estod e t e r m i
nar
la
ubicacin
d e l o s d i s t i n to s
mens
y o p c i o n e s d e n t r o d e l a
ap l i c ac in ,
y es
u n a
seleccin
q u e
quedar
r e g i s t r a d a
para lasprximasv e c e sq u e l o u s e m o s .
Para hace r lo , no s d i r i g im o s a l
men
[Ventana Diseod e l e s p a c i o d e t r a -
ba jo ] . La
distribucin
l l a m a d a
[Clsico]
es sum am en te f l ex ib le e
i n t u i t i v a ,
y
resul ta f a m i l i a r p a r a q u i e n e s v i e n e n
t r a
ba j a nd o co n ve r s io nes an te r i o r e s d e e s te
p r o g r a m a .S in e m b a r g o , c a d a u s u a r i o e l e
gir la qu e l e r e su l te m s ad e cuad a .
E L
R E A
E
TR B JO
C u a n d o a b r im o s u n d o c u m e n t o
(o c r eamo s un o nuevo , co m o ve remo s m s
ade lante ) , por defe c to aparece la panta l la
d i v i d i daen dos zonas pr inc ipa les :[Cdigo]
L a p r i m e r a v e z q u e ejecutamos
Dreamw/eaver, deb emo s definirsi
ser
e l editor
predeterminado p a r a
lo s tiposd e archivoq u e s o p o r t a .
y
[ D i s e o ] .
C o m o s u n o m b r e lo i n d i c a ,
en e lrea [ C d i g o ] ,ub i c ad a en l a pa r te
sup er i o r ,v e r e m o s e lcdigoHTMLde la
p g i n a . qu tambinp o d r e m o s e s c r ib i r
c u a l q u i e r
o t r o
cdigod e programacin
w e b q u e n e c e s i t e m o s ( c o m o A SR P HR
J a vaSc r i p t ,
e tctera ) .
Por su pa r te , en la
seccin [ D i s e o ] ,que s e encuen t r a en l a
p a r t e i n fe r io r ,se mues t r a l a p re v i sua l i z a-
cin
preview)
d e lcdigoi n t e r p r e t a d o .
El r e s to d e l a pan ta l l a se co m p o n e d e l a
s i g u i e n t e
m a n e r a : e n l a p a r t e s u p e r i o r
estne lmeny l a ba r r a d e he r r amien tas ;
en l a d e re cha , la ba r r a d e ven t ana s ;
y en l a pa r tei n fe r io r ,l a barra de
p r o
p i e d a d e s
H T M L
y CSS. Ve rem os es tas
sec c io nes e n d e ta l l e en l a sprximas
pg inas ,d o n d e c o n o c e r e m o s l as p a r t es
d e la i n t e r f a z d e l p r o g r a m a .
N U V S C R CTERSTIC S
Ad o be D reamweave r CSS i nc lu ye
mejoras resp ecto a su an tecesor ;
las ms destacad as son las s iguien tes:
Inspeccinde ho jas de es t i lo :
se pu ed e n c am b ia r la s p ro p i ed a d es CSS
s in
neces ida d de escr ib i r
cd igo ,
s i m p l e m e n t e ,
desde un pan e l ub icad o :
a la derech a de lreade traba jo .
Integracinc o n Adobe
B r o w s e r L a b :
stees un servic io en
lnea d e A d o b e q u e p e r m i t e p r o b a r
y co m para r nues t ro d esa rro l lo en
di feren tes
navegad o res d e I n te rne t .
S u g e r e n c i a s d ecdigoPHP
p e r s o n a l i z a d o : se trata de un asistente
para escr ib i r s intaxis adecua da de
nuestras fu nd on es persona l izadas de PHP
Au nq ue tr aba j a r emo s co n CSS m s ad e l an
t e
vale destacar en este caso la nueva carac
tersticade Drea mw eave r CSS q ue realiza la
inspeccind e C S S e n t i e m p oreal.
Gracias
a esta f un c i on a l i d a d ,es pos ib le cam biar las
prop iedad es de un a ho ja de est i los s in nece
s idad dei n terpreta rcd igo .Desde e l pane l
[Est i los
CSS ] , p o d r em o s mo d i f i c a r co lo re s y
otros
parmetrosde manera muy senc i l la .
[Editor p r e d e t e r m i n a d o
Adobe
Dreamweaver
C S 5
seestablecercomo editorpredeterminadopara los siguientes
tiposde archivo:
f V ]
Active Server Pagesasp)
O
Java Server Pagessp)
3
ColdFusion cfm, efe)
A S P . N E T
aspx, ascx)
H PH P php , ph p 3 , php4)
g] JavaScript
s)
Hojas
de esti los en cas cad a css)
|V l Lenguajede formatoextensible xml)
m
Hojasde estilo X S L xsl, xsit]
Seleccionar
todo
Anular todaslas selecciones
[ j A c e p t a r
7/25/2019 Diseo Web - Curso HTML
4/20
redusers . com
w
0 7
l i D O B E D R EAMWEAV ER CS S
A b r i r u n e l e m e n t o r e c i e n t e
L ) A b r ir . ..
Co m en zar a t raba jar
N ue v a s f un c i o n e s
R e c u r s o s
D r e a m w e a v e r E x c h a n g e
P R S T R
T E N C I O NAL
ODIGO
A u n q u e p o d e m o st r aba j a r
exc lus i v a-
m e n t e en la
vista
jDiseo] , es
c o n v e n i e n t e
ut i l i zar
lapan t a l l a
d i v i d i da de Dreamw/eaver .
De esta
f o r m a ,
am e d i d a q u e h a g a m o s
e l d iseo de una pg ina , t am bin ve re -
m o s
e l c d ig o q u e s e v a g e n e r a n d o .
En e tapas de
a p r e n d i z a j e ,
e s t o n o s
ayudar af am i l i a r i za rnos co n lasintaxis
HTML y r e l ac iona r c a d a u n o d e l o s
e l e m e n t o s q u e
i n s e r t e m o s
c o n sus
e t i -
q u e t a sya t r i b u t o s H T M L ( v e r e m o s e s t o s
t e m a ss o b r e e lf i n a l de la c lase ) . Ms
a de l a n t e ,c u a n d o t e n g a m o s m s
c o n o c i m i e n t o s ,ve r e l cd igo nos
permitir c u i d a rq u e s te
c u m p l a
o n los estndaresd e f i n i d o sp o r e l W 3 C
www. w3 . o r g ) . Si
b i e n
ste es unt e m a
q u e v e r e m o s e nde ta l l e en la prxima
c lase , cab e ad e lan ta r q ue , a l
t r aba j a r
o n lain te r fazd i v i d i d a ,e n c o n t r a r e m o s
q u e a l g u n a s p a l a b ra s c o m i e n z a n
o n e ls igno
ampersand .
T e n d r e m o s
q u e
f am i l i a r i za rnos
c o n
estos
c a r a c t e r e s p a r ap o d e r l e e r HTML
o n na tu ra l i d ad ,y a q u e seut i l i zan
para ind i ca r l ea l n a v e g a d o r e l u so d e
a l g u n o s s mbo los o pa lab ra s e spec ia le s .
Has ta aqu , hem os hec ho unp r i m e r
c o n t a c t o
c o n A d o b e D r e a m w e a v e r C SS;
a
m e d i d a
q u e a v a n c e m o s e n l a s c l as e s ,
remos
d e s c u b r i e n d o
n u e va s
caractersticas y
v i r t u d e s
d en u e s t r o
ed i t o r
de HTM L y CSS
p re f e r i do .
C r e a r
n u e v o
TML
C o ld F us i o n
i
PHP
A S P V B S c r i p t
X S L T p g in a c o m p le t a )
C S S
JavaScript
mi
S it io d e D re a m w e a v e r . . .
Q
Ms...
E l e m e n t o s d e s t a c a d o s
d e
inspecc in
d e C S S
A c t i v . / d e s a c t l v . d e C S S
A r c h i v o s r e l a c . d i n m i ca m e n t e
N a v e g a c i n d e v i s t a e n vivo
I n te g ra c i n d e B r o w s e r L a b
L u e g o d e s e l e c c i o n a r u n e s ti l o , b u s c a m o s la p r o p i e d a d q u e q u e r e m o s m o d i f i c a r
y e l e g im o s e l n ue v o v a l o r q ue d e s e a m o s d a r l e .
7/25/2019 Diseo Web - Curso HTML
5/20
RE MWE VER
SS
o m
A n t e s d e c o m e n z a r a t r a b a j a r h a r e m o s u n r e p a s o d e l a v e n t a n a p r i n c i p a l
d e D r e a m w e a v e r p a r a c o n o c e r d n d e e s t n u b i c a d a s l a s p r i n c i p a l e s
u t i l i d a d e sq u e n o s b r i n d a e s t a a p l i c a c i n .
d o b e D r e a m w e a v e r p o s e e
una
i n t e r f a zf il de
uti l izar
q u e n o s da lapos i b i l i dad de
m a n i p u l a r
lo sd i s t i n tos
arch i vosq u ec o m p o n e n
uns i t io
def o r m a
muy
senc i l la c m o d a . C o n o c e r l a nospermitirahorrar
t i e m p o c u a n d o e m p e c e m o s aa rm ar n ue s t r a s pg i n as. 4
B a r r a dem e n s , que
c o n t i e n e t o d a s las
f u n c i o n e s del p r o g r a m a .
B a r r a del d o c u m e n t o ,
e n d o n d e c o l o c a m o s el
ttulo den u e s t ro s i t i o .
V i s t a de p a n t a l l a e l e g i d a .
P o d e m o s c a m b i a r l a de
a c u e r d o con el rol
q u e t e n e m o s alut i l iz ar
e l p r o g r a m a . Pore j e m p l o ,
d i s e a d o r ,
d e s a r r o l l a d o r
o p r o g r a m a d o r , e n t r e
o t r a s o p c i o n e s
C u a d r o
debsqued
q u e nosp e r m i t e l o c a l i z a r
t e x t o
o
s i n t a x i s
de
progr m cin d e n t r o
d e l d o c u m e n t o a b i e r t o .
L i v e . Nos da
la o p o r t u n i d a d
d e c o n e c t a r n o s
a l s i t io de
Adob e
d e f o r m a d i r e c ta .
P a n e l e s d e s d e d o n d e
p o d e m o s a g r e g a r ,
c a m b i a r
o
e l i m i n a r
d i s t in t a s p r o p i e d a d e s
d e los d o c u m e n t o s
(n o spermitird e s d e
c r e a r una r c h i v o
n u e v o h a s t a e l i m i n a r
u n a c l a s e en CSS .
P r o p i e d a d e s
g e n e r a l e s
d e l d o c u m e n t o :
d e s d e
elt m o
h a s t a
el UTF
e n el
queest
g e n e r a d o
e l a r ch i v o .
A r c h i v t j
Unt l t le d-2 >
^
OStSgo
D r v i d
E d i c i n
Ver
J n j e rt s r M o d i f i c , F o r m a t o C o m s o d o
C3
m
body>i
DlseAo
D i r e c c i n
Vf l ^ a nv i v o
DOCT vT e t m l PUBLIC -//USCZ/PTO XHTML4 .
O
Tcajisit.ion-Hi
//El i
< B e c a
h c c p - e q u i v = C o n t e n t : - T y p e c o n C e n t - ' * c x t / l i c a l ;
c l a t s e t , = u t - 8
>
< c k c l > D o c u M n t
s i n
t i c u l K / t l c l O
< / h e a d >
< / h c i i l >
'* **' ** ~EZZZ
Z 3 8 i
dase i r t g i s \ a
t de t
p gin
7/25/2019 Diseo Web - Curso HTML
6/20
redusers.com i jg 1
Panel [ P r o p i e d a d e s ] , d o n d e
p o d e m o s verl a s p r o p i e d a d e s
d e u n a e t i q u e t a
en
pa r t i cu l a r .
V i s t a p r e v i a pa r a lapos i c i n
de l o s ob j e t o s de uns i t io . s t a
e s u n a p r e v i su a l i zac i n de l s i t i o ,
qu e n os pe rm i t e u b i ca r lo s ob j e t o s
e n e le s p a c i o de lap g i n a .
Permitec a m b i a r e n t r e las
p r o p i e d a d e s
HTML y
CS S
d e l d o c u m e n t o ene j e cu c i n .
M u e s t r a l a s e t i q u e t a s d e f i n i d a s .
S i h u b i e s e u n a e t i q u e t a
< p > ,
la
mos t r a r a
a
c o n t i n u a c i n
de
< b o d y > ,
y a q u e e s t a l t i m a c o n t i e n e a la
a n t e r i o r . Pore j e m p l o ,< b o d y > < p > .
B a r r a d o n d e s e m u e s t r a laU R L de
n u e s t r o s i t i o , s i t e n e m o s
e l
p r o g r a m a
c o n f i g u r a d o p a r a a c c e d e r a l s e r v i d o r .
S e c c i n de lap a n t a l l a d e s t i n a d a
a
v e r e l cd ig o de l s i t i o .
B a r r a q u e p e r m i t e e l e g i r c m o v e r
la
p a n t a l l a
de
D r e a m w e a v e r .
Es
m u y
p r c t i c a p o r q u e p o d e m o s vers lo el
d i s e o ,
e l
c d i g o
o
a m b o s ( l a f o r m a
m s u t i l i z a d a es la l t ima ) .
B a r r a
de
p r o g r a m a c i n . N o s p e r m i t e
d e s d e c o n t r a e r e lcd ig o de l s i t i o
h a s t a
o r d e n a r l o p a r a o b t e n e r
u n a l e c t u r a f c il y r p ida .
Nombre de l d o c u m e n t o
( de l a r ch i v o
HTML,
PHP , e t c t e r a ) .
A y u d a
D n c * f k > r
e
Tftuio: Oo ciJf rt o
i n
t itulo
Todo
No x apf i ca n inguna r e ^ CSS a la t i q u e t
salecctonada.
A c t u a l
l a s * l c c i
r
n g u n a de tas propi edades CSS se apJKa a
la sa lecck ^ actua l . Se lecc ione un
elemento
con estSos
p a r ^
v erc u l e s soo las
IMTfMsdades
CS S
ap
&cafales.
Admin s Tar
sit ios
i T a m - l T l D C
escri torio
Equipo
R
r06
S l x 7 3 1 ^
I K j l s
Unicode(UTF-8)
i u EIcnertos
de
ase...
itulo
oe E^
7/25/2019 Diseo Web - Curso HTML
7/20
. 1 0
r e d u s e ra c o m
QU
S
HTML
A h o r a
q u e y a c o n o c e m o s l ai n t e r f a zd e A d o b e
I r e a m w e a v e r
v e r e m o s l o s a s p e c t o s b s i c o s d e
l e n g u a j e
H T M L a s c o m ot a m b i n l a sp r i n c i p a l e s
c a r a c t e r s t i c a s d e X H T M L C o n e s t a i n f o r m a c i n
c o m p r e n d e r e m o sm e j o r l a c r e a c i n d e p g i n a s
o d a pgin w e b estc o n f o r m a d a
p o r
u n
cdigo
e s t r u c t u r a d o d e n o
m i n a d o TM L
{HyperText arkup
Language . B s ic a m e n t e ste
c u e n t a c o n u n a s e ri e d e i n s t r u c c i o n e s
p a r a i n d i c a r l e a l n a v e g a d o r q u e e s t e m o s
u t i l i z a n d o
la m a n e ra e n qu e lapgin
de be s e r v i s u a l i z a da
y
r e p r e s e n t a d a .
Una de las
c r cterstic s
d e
e s t e
l e n
gua je es su s i m p l i c i d a d , d a d o q u e p a ra
c re ar u n d o c u m e n t o
HTIVIL
lo nicoq u e
n e c e s i t a m o s e s u n e d i t o r d e
t e x t o
c o m o
W o r d P a d o
e l
B l o c
d e n o ta s d e W i n d o w s .
C o n
e s tas
dos s e n c i l l a s h e r r a m i e n t a s
es
p o s i b l e e s t r u c t u r a r u n apginw e b p o r
m e d i o d e l a
inclusin
de las
e t i q u e t a s
t a g s )
prop i a s de l l e n g u a j e . st si n d i c a n
e l c o m i e n z o
y
e l f i n a l de l os e l e m e n t os
q u e in t e g r a n e l d o c u m e n t o d e s d e
las
c r cterstic s
de l os t e x t os h a s t a
lo s e l e m e n t o s m u l t i m e d i a c o m o
HTML S
D E M R C
E T I Q U E T S
QU L
L
LENGU J
C O N
A L
N A V E G A D O R
D E B E
M O S T R A R
i m g e n e s
v i d e o s
y
s o n i d o s .
A u n q u e
HTIVIL
e s u n l e n g u a j e n o l o es
d e
p r o g r a m a c i n
s i n o qu e e s u n l e n -
g u a j e
d e m a r c a d o . Set r a t a de u n s i s t e
m a d e e t i q u e t a s q u e i n d i c a a l n a v e g a d o r
p o r
e j e m p l o cundos u b ra ya r u n t tu lo
cmod e f i n i r el c o l o r d e l
t e x t o o
dnde
i n s e r ta r u n a i m a g e n . S i e l n a v e g a d o r
d e t e c t a r a lgne r ro r e n e lcdigoq u e
d e b e r e p r e s e n t a r mostr re l d o c u m e n
t o
t a l c o m o l o h u b i e r a in t e r p r e t a d o .
XHTML
L a s i g l a p r o v i e n e d e
EXtensible
HyperText Markup
Language es
l e n g u a j e q u e c u e n t a c o n u n e t i q u e t a d o
m s e s t r i c t o qu e HT fV lL c o n l o c u a l
p e r m i t e u n a c o r r e c t a
interpret cin
d e l c o n t e n i d o d el d o c u m e n t o .
Posee
u n a m a y o r
f l e x i b i l i d a d
ya qu e l og ra s e r
r e p r e s e n t a d o p o r t o d o s l os n a v e g a d o
r es i n c l u y e n d o lo s d e d i s p o s i t i v o s p o r
t t i l e s c o m o PD s
y
telfonosc e l u l a r e s
e n t r e o t r o s .
G r a c i a s aX H T M L
e l m i s m o
d o c u m e n t o es tilp a r a t o d o s l o s
s o p o r t e s ; e s d e c i r n o es n e c e s a r i o
d e s a rr o l la r u n d o c u m e n t o p a r a n a
v e g a d o r e s w e b
yo t r o
d i f e r e n t e p a r a
c o n t e n i d o m v i lp o r e j e m p l o .
A d e m s
l os e l e m e n t o s c o r r e s p o n d i e n t e s
al
diseo- c o m o c o lo r e s t i p o s d e f u e n t e
o f o n d o s - s e r e p r e s e n t a n e n
h o j a s d
e s t i l o e n c a s c a d a C S S) p o r s e p a r a d o
l o
q u e p e r m i t e t e n e r u n
cdigo
m u c h o
m s
l i m p i o
yd e m e n o r
t a m a o .
D I F E R E N C I S E N T R E HTMLY XHTM
Hasta quh e m o s a n a l i z a d oc a d a
l e n g u a j e d e m a r c a d o p o r s e p a r a d o .
En es ta s e c c i nl os d e t a l l a r e m o s c o n
m s p r o f u n d i d a d
y
a n a l i z a r e m o s l a s
p r i n
c i pa l e s c r cterstic sd ec a d au n o pa ra
c o m p r e n d e r m e j o r s u s d i f e r e n c i a s .
El cdigoX TML t i e n eu n a
m e n o r
c a n t i d a dd e e r r o r e sd e c o m p a t i b i l i d a d
y u n a m a y o r integr cinc on l a s
d i f e r e n t e s p l a t a f o r m a s
d e visu liz cin
d e
c o n t e n i d o s
w e b .
7/25/2019 Diseo Web - Curso HTML
8/20
r e d u s e r s . c o m
La
evolucin
d e
H T M L
h a s i d o c o m p l e j a ,
yavanzs o b r e d i f e r e n t e s
t emt i cas ,
q u e
c a m b i a r o n a s p e c t o s d e l l e n g u a j e a o
t ras ao hasta l l egar a la
versin
a c t u a l
H T M L
4.0) .
sta
i n c lu y e e l e m e n t o s q u e
e n e l p a s a d o n o e s t a b a n i n t e g r a d o s y
q u e f u e r o n s u r g i e n d o g r a ci a s a lo s
d i s t i n
t o s f a b r i c a n t e s d e n a v e g a d o r e s w e b .
S i n em ba rg o , ho y en d a no se nave ga
p o r
la W e b nicamented e s d e u n a c o m
p u t a d o r a ,
s i no qu e cada vez s e u t i l i z an
ms l o s d i spo s i t i vo s mvilesy d e
o t ro
t i p o .
D e b id o a e s t o , s e h i zo neces a r i o
c re a r un m e c a n i s m o q u e p e r m i t i e r a
mane j a r l a
informacin
d e m a n e r a m s
es t anda r i z ada y pa ra que f ue ra un i ve r s a l -
m e n t e a c c e s i b l e .
X H T M L
e s e l n u e v o l e n g u a j e
estndar
g e n e r a l i z a d o p a r a la W e b d e s d e e l a o
2 0 0 0 .
C o m o
est
b a s a d o e n X M L
[Extensible
arkup
Language ,
es
p o s i b l e c o n s i d e r a r l o c o m o u n a
combinacin
e n t r e
H T M L
y XML.
E N E F I I O S
E
X TML
Los p r i n c i pa l e s ben e f i c i o s d e
X H T M L
f r en t e a o t ro s l engua j e s
so n l o s s i gu i en t es :
Tambin p o d e m o s n a v e g a r
po r s i t i o s
TMLd e s d e
n u e s t r o s
telfonosm v i l e s .
^
C o m p a t i b i l i d a d
c o n
n a v e g a d o r e s
a n t i g u o s :
X H T M L
f u ediseadoco n e l
o b j e t i v o
d e c u m p l i r c o n lo s r e q u e r i m i e n
t o s d e t o d o s i o s b r o w s e r s .
educcin
d e e r r o r e s : c o m o
m e n c i o n a m o s a n t e r i o r m e n t e ,
a l s e r ms e s t r i c t o , e l im ina una g ra n
c a n t i d a d d e e r r o r e s p r o p i o s d e H T M L .
F a c i l i d a d
d e
e d i c i n :
po r se r un
cdigo
m s e s t r u c t u r a d o - q u e ,
a d e m s ,
separa
lo s e l e m e n t o s d e l
diseo
en ho jas
d e es t i lo- ,es ms leg ib le para edi ta r .
^
C o m p a t i b i l i d a d
c o n
estndares
w e b : e s c o m p a t i b l e c o n l o s n u e v o s
estndares
s u g e r i d o s p o r e l W 3 C
{World WdeWeb
Consortium .
C o n t e n i d o s
P r e s e n t a c i n
C S S
P r e s e n t a c i n )
TML
i n c l u y elos
c o n t e n i d o s
y la
f o r m a
d e
p r e s e n t a c i n .
X TMLslot r a t ac o n
c o n t e n i d o s q u e s e
r e p r e s e n t a nsegn
lo
i n d i c a d oe n C S S .
M u c h a s
h e r r a m i e n t a s
d e d i s e o w e b a n n o
p r o d u c e n
c d i g o X H T I V I L
c o m p l e t a m e n t e
v l i d o , e s
d e d r ,
q u e
c u m p l a
c o n l o s e s t n d a r e s d e l W 3 C . E s p o r e s o q u e ,
a n t e s
d e
p u b l i c a r
u n a
p g i n a w e b e n
I n t e r n e t ,
d e b e m o s
r e a l i z a r
s u c o m p r o b a c i n e n e l
s i t i oo f i d a l
d e l
W 3 C{ h t t p : / / v a l i d a t o r
w
. o r g ,
q u e n o s
i n d i c a r
s ie x i s t e n e r r o r e s
y
n o s s u g e r i r l a
m a n e r a
d e
c o r r e g i r l o s .
7/25/2019 Diseo Web - Curso HTML
9/20
. 1 5
E n e s t as e c c i nc o n o c e r e m o sd o sp a r t e s f u n d a m e n t a l e sd e l ae s t r u c t u r a
d e lX H T M Le l e m e n t o se s e n c i a l e s e n e lp r o c e s od ea r m a d od e u n a p g i n a
w e b V e a m o sl o s s e c t o r e sb s i c o s d ec u a l q u i e rp g i n a .
o r
s u e s t r u c t u r a , las pgin sw e b
pu ed en d i v id i r s e en do s pa r tes :
h e a d
cabecera) yb o d ycuerpo ) .
El head es el enc arga do d ed e t e r m i -
nar el
t i po
d e d o c u m e n t o ysus p ro p ie-
dades , demsde o trasc r cterstic sn o
vis ibles para el usuario q ue vis ita la
pgina.
Por su par te , e l bo dy es e l responsable
de
darle a lapginlos e lem ent os v is ib les,
es dec ir, elt ex to ,las
imgenes ,
la s a n im a -
c iones Flash yto do lo qu e e l usuar io
pue de o bse r va r en pa n ta l l a . . ..
HE D
Estaseccinco n t i en e d i r e c t i v a s
qu e e l naveg ador neces i ta para leer e l
d o c u m e n t o
co r r e c ta m en te . En tr e e s tos
e lemen to s ,enco n t r a m o s elttulode la
pgina ,
las me ta e t ique tas , las f u n c i o n e s
JavaScript
ylo se n l a c e s de referencia.
IGO
El d o c u m e n t o
HTML
le
c o m u n i c a
a l
n a v e g a d o r cmo
d e b e
m o s t r ar
la
informacin
que
co n t i e n e .
.iitmi
Po dem o s m enc io na r s i ete e t ique ta s
p r inc ip a l es
en la cabecera , presentes
en
casi tod as laspgin sw e b : D O C T Y P E ,
h tml , t i t le,m e t a D E S C R I P T I O N ,m e t a
KEYWORDS,
l i nk
a ho jas de es t i lo en
cascada
CSS) y
l i nke x t e rn o a f unc io nes
JavaScr ipt .U n e n c a b e z a d obsico est r
c o n f o r m a d o
c o m o e lCdigo
indica .
En e ste e j emp lo , o bse r v a m o s l adefinicin
< D O C T Y P E
h t m l
PUBLIC
" - / / W 3 C / / D T D XHTML
1.0
S t r i c t / / E N "
" h t t p : / / w w w . w 3 . o r g / T R / x h t n i l l / D T D / x h t m l l - s t r i c t . d t d ">
< h t m l >
< t i t l e > T n t u l o
de l a
Pgina W e b < / t i t l e >
7/25/2019 Diseo Web - Curso HTML
10/20
redusers .com
E T I Q U E T S
T R I B U T O S
: s m o m e n t od ea b o r d a rm sp r o f u n d a m e n t ee ll e n g u a j eH T M L
E n t r a r e m o s
e n d e t a l l e a
t r v s
d e l a s e t i q u e t a s
y
a t r i b u t o s
d o s
p e l d o s
q u e n o s
p e r m i t i r n
m o s t r a r n u e s t r o s i t i o d e l a f o r m a e n q u e d e s e a m o s .
I H T M Lesti n t e g r a d o p o r e l e-
m e n t o s q u e e n
c o n j u n t o
f o r m a n
la b ase des u e s t r u c t u r a . Deesta
m a n e r a c u a n d o d e f i n i m o s u n a
e t i q u e t a e s t a m o s i n d i c a n d o q u e en
funcin de
ella
se
r e p r e s e n t e a l g o que
puede ser v is ib le a l usuar io
o
n o .
S
ETIQUET S
Para d e f i n i r u n a e t i q u e t a d e b e m o s r e a l i
z a r una a pe r tu ra yun c ie r r e . En t r e a m bo s
t e n d r e m o se l c o n t e n i d o q u e se d pt r
a la s c o n d i c i o n e s q u e e l l a d i s p o n g a .
Po r e j emp lo pa ra subra ya r unt e x t o
utiliz r mos las i g u i e n t elned e cd igo :
< u > T e x t o S u b r a y a c l o < / u >
Ex i s ten 93 e t ique ta sestnd rq u e t i e n e n
u na represent cin
e s pec f ic a
l o qu e n o s
faci l i ta lare liz cin deu n d o c u m e n t o
s i l as u t i l i z a mo s co m o h e r r a m ien ta s pa ra
i n t r o d u c i rla inform cinpo r mo s t r a r .
S TRIBUTOS
Los a tr ibutos son d irec t ivas que
n o s p e r m i t e ndef in i rva lo res para
ca da una
de
las e t iq ueta s agreg adas
en elcdigo
f u e n t e .
So n in t ro duc ido s
en las e t iquetas con elo b j e t o d e o t o r g a r
a lguna s c r cterstic sp u n t u a l e s c o m o
ela l to e l a ncho un bo rde etctera.
U n a t r i b u t o p u e d e d e f i n i r d e s d e
va lo res
numr icos
co m o l a a l tu r a
d e u n d e t e r m i n a d o b l o q u e h as ta
co lo res yestilos det ipografas.T o d o
a t r i bu
t o c o n t i ene unv a l o rque debe e s tar ence
r radoen t r ecomi l las .Vea mo s e l e j e mp lo de l
Cdigo2. S i empre deb em o s r e co rda r qu e
las e t iqueta s debe n l levar una ap er tura
y
u n
cierre
po rq ue as l o g ra remo si n f o r m arcul
es e l co n ten id o que d ebe s er r ep re sen ta do
atr vsde las dec la rac iones qu e hace m os
en e l la s. Cua ndo dec la r a mo s p o r co m p le
t o la e t ique ta p o de mo s o bse r var cua t ro
in terventores:la e t ique ta p ro p ia m en te d i cha
losatr ibutos los valores d e losatr ibutos yel
c o n t e n i d oe ncuest inco mo en
e l
Cdigo3
< VOC r C t L h X M l
PUBLIC- //V 3C // tTD XHTUL 1.0T t e n s l t l o n a l Z / n T http://w(
< b m xmDS- http://inr.w3.or5/1999/xhcal >
7/25/2019 Diseo Web - Curso HTML
11/20
4
redusers.com
AMWEAVER
P S O
P S O
[,Archiwp
j
Edicin Ver
Inse r ta r
N u e v o , , ,
Abrir
Exam ina ren
Bridge.,.
Abr i r
re c iente
A b r i r en
r n a r c o . . .
C e r r a r
C e r r a r t o d o s
Comp a r t i r
m i
panta l l a
G u a r d a r
GENER CION ELDOCUMENTO
A c o n t i n u a c i n , r e i
u n
n u e v o d o c u n i e n o e n H T M
e a m w e a v e rc o m oe d i t o r , '
HTM
FHariaa
HTML
Eterr>ento de biblotecs
XSLT (fragmento)
XSLT (pgina completa)
ActlonScript
tPJavaScrpt
ASPVBScript
_ A5P
NET
C
^ ASPNET
VB
ConporwrtedeCodFuA
5 columna fija, centrada
I columna fija, centrada, ancabeiado y pit
I columna flotante, centrada
1 cokjmna flotante, centrada, encabezado
2 columnas jas, barra iateral derecha
Z cc^mnas jas, barra lateral derecha, en
2 columnas fi)as, barra lateral Izquierda
2 columnas fijas, barra lateral Hqulera, sr
2 columnas lotantes, barra lateral derech
2 columnas lotantes, barra lateral derechi
2 columnas notantes, barra lateral Inquiere
2 columnas
lotantes,
barra lateral izqJerc
3 columnas
jas
3 columnas Fi)as, er abezado y pie
3 columnas flotantes
3 columnas flotarles, ervabezado y pte
DocumentodQHTH
T ^ de documento: IJHTMlOTrartsItand
Adjuntar
archtwCSS
:ActfmCcn eit Ed-tma
Ampliar inf onracion sobre
BUSH
C o n t i n u a r
co n
n u e s t r oa p r e n d i z a j e
e
in t r o d u c i r n o s
en la prctica de HTML,A d o b e
D r e a m w e a v e rb r i n d a
la
p o s i b i l i d a d
d e
c r e a rd o c u m e n t o s
e n unag r a n v a r i e d a d de
f o r m a t o s ,
alm i s m o
t i e m p o
q u e p e r m i t e a b r i rt o d ot i p o
dea r c h i v o s basados en
t e x t o ,t a l e s
c o m o ASP, PHP, JavaScript yh o ja s de
es t i l o
en cascada
(CSS),
a u n q u e no hayan
s i d o
creados
u t i l i z a n d o
este
p r o g r a m a .
Adems,p o d e m o s
a b r i r
ye d i t a ra r c h i v o s de cdigo
f u e n t eV i sua l
Basic,
Java
y C .
PASOl
Paara
c r e a r
un
d o c u m e n t o
HTML,
p o d e m o s hacerc l i c en la opcin
[HTML] que aparece en la seccin
[Crear nuevo],delc u a d r o deb i e n v e n i d a del
p r o g r a m a .
O t r a a l t e r n a t i v a ,
si yat e n e m o s el
p r o g r a m aa b i e r t o ,
es
d i r i g i r n o s
al men [Archivo/Nuevo...].
PASO
2
Desde
elc u a d r o q ue sep r e s e n t a ,
p o d e m o s
escoger
e n t r e
una
g r a n
c a n t i d a d de
f o r m a t o s
y, alc r e a r un
d o c u m e n t o n u e v o ,o p t a r
po r
a l g u n o
de los diseos de
pgina
p r e d e f i n i d o s
o
t o m a r
und o c u m e n t ob a s a d o
e n
una
p l an t i l l ae x i s t e n t e .
En este caso,
d e n t r o
de la pestaa
[Pgina en blanco],e l e g i m o s [HTML]en elr e c u a d r o
[Tipo de pgina].En la seccin [Diseo]
s e l e c c i o n a m o s
[Ninguno]y,
l u e g o ,
p r e s i o n a m o s el botn[Crear].
7/25/2019 Diseo Web - Curso HTML
12/20
redusers.com
Archi vo Edi c i n
Ver
I n s e r ta r M o d i f i c a r f o r m a t o C o m a ndo s St b o Ve n t a na
' " o QO Dmdr | Diseo Ccgoenvivo
Vistaen vivo
Inspecdonar fjjjl ^,
Drecon:
< D O C T y p E
h t m lP U B L I C
' - / , 'U3 C//DTTi :ar n;L
1.0
Tr :
an s i
t io n a l , / / E N
" h t t p :
T J W . w 3 . o r g y ' T R y ' x h t i i i l l y ' D T D / > : h c i i i l i- C E a n 3 i c i o n a i. d t d " >
< h t ] B x i i i l i i 3 = " h t t p :/ / w w . T3 o r g y ' 1 9 9 9 / x h t i i i l " >
< h e a d >
C u e c a h c c p - e q u i v = " C o n c e n t . - T y p e "c o n c e n c = " c e > : c / h t a l ;
c h a r 3 e c
= u t - 8 "
/>
T
< / h e a d >
^^^
INCLUIRTTULO
TML
Archivo Edicn
V hicitv
Modcar Fonmto Commios Sitio Ventana Ayuda
I
Drvkfcj sea
SasoVVO Inspecoorat ^ TfaJo; esWebOs
DOCTYPE
h ta l PUBLIC /UC/,-DTD .-aiTIlL
l.G
" i i t cp ;
//in.n.aS. cg/TR/xhtfflll/LiTlJ.'Xhuall-tiQ.'-.Sit-.ioni,
o i e c a htcp-ec iu w-"Co i i cent-Type" contenf ' cext/hc j i l ;
c h a r s e t - u t t - S "
/>
D3eEa BebD e s i g i K / c i c l o
' " 'authoi:" coiicenC"*'03er3">
' " c o p y c i g h c " concei ic-"tcopy; 2010 U3eESCoEp,">
' k f f ^ o ts CDncenc-"Beb ,de3 gn,di seo,3 l c l o ">
"dece"
concenc-"210-?-20T08: 37+00:00":^
Archivo
Edicin ver
Insertar Modificar Formato Comandos Sitio ventana
MET T GS
Cago
C i o e n v i vo
F4
sta e n v i vo
Inspecdonar
5i.
con nt
2010073CrTe
r
s
< DOCTYPE htJJl PUBLIC "-//W3C//DTt' XHTIIL i.O
Transit ionaiy/EH"
"http: //TJWW
.wS.org/TR/xhUQll/DTD./xhutill trans
t i nal.dtd">
Docnimeiito s in t itulo
y,
elt e x t o
q ue f igurar en lav e n t a n a d e l n a v e g a d o r .
En este caso,
esc r ib imos
Users Web
Des ign .
P or l t im o , a lm a ce n a m o s el
d o c u m e n t o
e n
n u e s t r o d i s co at ra vs de l men
[ A r c h i v o / G u a r d a r c o m o . . . ] .
En elc u a d r o q u e a p a re c e , c o l o c a m o s eln o m b r e que
l e da re m o s
y
p r es i o na m o s
el
bo tn
[ G ua r d a r ] .
RESUMEN
Has t aaqu l i em o s e s t ab l e c i d o l o s a s p ec t o s i n i c i a l e s de
c o n f i g u r ac i n den ues t r o d o c um en t o HT IV I L . Am e d i d a
a v a n c e m o s c o n n u e s t r o a p r e n d i z a j e , s e r e m o s c a p a c e s
de
i n c o r p o r a r t ex t o s , im g en es
y
o t ro s e l e m e n t o s
7/25/2019 Diseo Web - Curso HTML
13/20
r t
E n e s t a sp g i n a sr e a l i z a r e m o s u n a
s n t e s i s
d e l o s p r i n c i p a l e s e l e m e n t o s d e
H T M L
y s u
p l i c c i n
e nl o s s i t i o s w e b . M s a d e l a n t e
c u a n d o c o m e n c e m o s at r a b a j a rl o s u t i l i z a r e m o s
s a b r e m o s m s d e t a l l e s s o b r e e l l o s .
n
l o q u e r e s p e c t a
al
l e n g u a j e
r
> _
HT ML se
c o n s i d e r a
a
l o s e l e m e n t o s
c o m o la s i n d i c a c i o n e s
o
p a r t e s
q u e e l n a v e g a d o r
interpret r
m s a d e l a n t e . D u r a n t e
laprogr m cin
d e u n s it io w e b e n c o n t r a r e m o s v a r i o s
t i p o s
de
e l e m e n t o s q u e n o s permitirn
m o d e l a r l o
a
n u e s t r o g u s t o .
U N R E P A S O P O R L O S
PRINCIPALES ELEMENTOS
Si
b i e n h a y u n a g r a n c a n t i d a d
de
e l e m e n t o s
acontinu cin
c i t a r e m o s
a l g u n o s
de
l o s ms u t i l i z ado s :
< p > :p e r m i t e d i v i d ir u n t e x t o e n
p r ra-
f o s . Si
pre f e r imo s rea l i z a r un s a l t o
delne
e n ve z d e c o m e n z a r u n n u e v o
prrafo
r e c u r r i m o s a l e l e m e n t o < b r > .
< u l > :c o r r e s p o n d e
a
u n a l i s t a
o
n u m e r a d a .
En
e ll a ca d a e l e m e n t o d e b e
e s ta r i d e n t i f i c a d o c o n
la
e t i q u e t a
.
< o l > :e n e s te c as o c o r r e s p o n d e
a
u na l i s t a
n u m e r a d a yt mbin se
comp a
c a d a e l e m e n t o
de la
l ista
c o n
la
e t i q u e t a
.
,
, . . . , :
i d e n t i f i c a n
lo se n c a b e z a d o s d e l s i t io w e b .
E s m u y i n t e r e s a n t e o b s e r v a rc m od i f e r e n t e s m a n e r a s d e i n t r o d u c i r e lc d i g op u e d e n h a c e r v a r ia r s n
t a m a o
e n c u a n t o a l n e a s s i n m o d i f i c a r l a
e s t t i c a
d e l s i t i o w e b . S ie m p r e e s a c o n s e j a b l e q u e n u e s t r o
s i t i o
w e b t e n g a s uc d i g ov a l i d a d o p o r e l W 3 C
y
q u e s t es e a l i v i a n o p a r a a c e l e r a r lai n t e r p r e t a c i nd e l o s
n a v e g a d o r e s . E n e s t e s e n t i d o m s a d e l a n t e v e r e m o s q u e p a r a d e t e r m i n a r c u e s t i o n e s d e f o r m a
y
e s t t i c a
e s c o n v e n i e n t e u t i l i z a r C S S e n v e z d e i n d u i r t o d a s l a s I n d i c a d o n e s d e n t r o d e l d o c u m e n t o HMl
Su
t m o e
i m p o r t a n c i a
vara;
1 es
e l m a y o r
y 6 es
e l m e n o r .
< a > :e s ta e t i q u e t a i n d i c a
la
r e f e renc i a
a
lgn
r e c u r s o
y
es
comp d
p o r
e l a t r i b u t o
h r e f ,
que s i r ve pa ra
d e f i n i r
la
direccin
d e l
v n cu lo .
L S I F I I ND EE L E M E N T O S : LLENOS
VACIOS
Y CON
ARGUMENTOS
P o d e m o sd i s t i n g u i r
t r e s t i p o s
de
e l e m e n -
t o s
en el
l e n g u a j e
HT ML :
L l e n o s : e s t o s e l e m e n t o s c u e n t a n
con
u n a a p e r t u r a
y
un c i e r re .
El
c i e r re
es
i d n -
t i c o a la
a p e r t u r a p e r o t i e n e u n a b a r r a
d i a g o n a l
/). Por
e j e m p l o si q u e r e m o s
a g r e g a r u n a
lne de
t e x t o
en
d o n d e
una f r a se apa rezc a re sa l t ada
en
n e g r i t a
i n g r e s a m o s
lo
s i g u i e n t e :
p>Aqu
una
lnea
d e
t exto
< b > c o n u n a
p a r t e
r e sa l t ada
en neg r i t a
i
V '
1 3
7/25/2019 Diseo Web - Curso HTML
14/20
redusers.coin
Vac o s :
enes tec a so l os e l em en to s no
r e q u i e r e n
de
un c i e r re.
Un
e j e m p l o
de
este
t i p o
es lae t i q u e t a < b r > ,q u e d a la
p o s i b i l i d a d
de
real izar un salto
de
l nea.
C o n a r g u m e n t o s : qus e e n c u e n t r a n
l o s e l e m e n t o s q u e p o s e e n a t r i b u t o s
d e f i n i d o s ;p o r e j e m p l o :
< t a b l e w i d t h = 7 0 0 p x > U n a t a b l a
d e 7 0 0pxeles
de
a n c h o < / t a b l e >
L S I F J I N
D EE L E M E N T O S
EN
LINEA
Y E BLOQUE
l
l engua j e H T M Lc l a s i f i c a l os e l emen tos
e n d o s g r a n d e s g r u p o s : e n
lne ( in i ine)
y d e b l o q u e
( b lock ) . La
d i f e ren c i a en t re
a m b o s r a d i c a
en laposicin
q u e a b a r c a n
sob re e l e s p a c i od i s p o n i b l e e n
lapg i na .
Los e l emen tos
deb l o q u e
s i e m p r e c o -
m i e n z a n e n u n a
lne
n u e v a ,
de
m o d o
q u e o c u p a n t o d o e l e s p a c i o d i s p o n i b l e
de e l l a hasta
el
final.Por su pa rte
los
e l e m e n t o s e n
lne
o c u p a n
nic mente
el espa c io nec esar io pa ra su
v i sua l izac in.
O t r a d if e r e n c i a e n t r e a m b o s g r u p o s
e s su c o n t e n i d o : m i e n t r a s q u e l o s de
b l o q u e a d m i t e n
en su
i n t e r i o r o t ros e l e-
m e n t o s deb l o q u e ye n
l nea
los
e l e m e n t o s e n
lne
n o a d m i t e n
a los
d e b l o q u e en su c o n t e n i d o .
Esto
s i gn i f i c a
q u e u n e l e m e n t o
de
b l o q u e
slo
p u e d e
a p a r e ce r c o n t e n i d o e n
o t r o
e l e m e n t o
d e b l o q u e p e r o u n o e n
lne
p u e d e
apa rece r en o t ros enlnea s c o m o
t mbin en
lo s
de
b l o q u e
body>
L os e l e m e n t o s p e r m i t e nve r fcilmentela sp a r t e s
de l cdigo ym e j o r a n lap o s t e r i o rvisu liz cin enlo sn a v e g a d o r e s .
I L
TIPO DE L M NTO
E l e m e n t o s
e n
l n e a
E l e m e n t o s
e n b l o q u e
L M NTO
a a b b r a c r o n y m b b a s e f o n t b d o b i g b r c i t e
c o d e d f n e m f o n t i i m g i n p u t k b d l a b e l qs
s a m p s e l e c t s m a l l s p a n s t r i k e s t r o n g s u b s u p
t e x t a r e a t t u v a r j
a d d r e s s b l o c k q u o t e c e n t e r d d d t d i r d i v d i
f i e i d s e t
f o r m
f r a m e - s e th 1h 2 h 3 h 4 h S h 6 h r
i s i n d e x
l i
m e n
n o f r a m e s n o s - c r i p t o l pp r e
t a b l e
t b o d y
t dt f o o t
t h t h e a d t r u l .
E l e m e n t o sq u e p u e d e n s e r c o n s i d e r a d o s
e n l n e ao d e b l o q u es e g ne lc a s o
b u t t o nd e l i f r a m e i n s m a p o b j e c t s c r i p t
7/25/2019 Diseo Web - Curso HTML
15/20
redusers.com
: n
e s t e
a p a r t a d o a b o r d a r e m o s d e f o r m a d e t a l l a d a l o s a t r i b u t o s
d e s c u b r i r e m o s q u n o s p e r m i t e n r e a l i z a ry
c m o
p o d e m o s i n c l u i r l o s
e n l a s
p g i n s
d e n u e s t r a s i t i o w e b
o r n o yah e m o s v i s t o ,
c a d a d o c u m e n t o H T M L
e s e s t r u c t u r a d o por los
e l e m e n t o s , q u e
le
i n d i c a n
a l n a v e g a d o r de qum a n e r a
deber v e r s e
el
s i t i o
we b que
est
a b r i e n d o . C u a n d o sep r e c i s a
m s inform cin
en los
e l e m e n t o s ,
e n t r a n
en
j u e g o
los
d e n o m i n a d o s
a t r i b u t o s ,
q u e
den
d a t o s
e x t r a p a ra seri n t e r p r e t a d o s
p o r
los n a v e g a d o r e s .
COMBINACION
Q U T S
Y ATRIBUTOS
PERMITE
LOGRAR
DIST INT S V ISU L iZ C IONES
E
U N
S I T I O
REP SO
L o s a t r i b u t o s sei n c l u y e n s i e m p r e
e n
las
e t i q u e t a s
de
a p e r t u r a
de los
e l e m e n t o s , y laf o r m a dei n t r o d u c i r l o s
es
la
s i g u i e n t e :
< i m g s r c = 1 o g o . j p g
a l t = L o g o > < / i m g >
C o m o p o d e m o s o b s e rv a r en ele j e m p l o
a n t e r i o r ,
lo
p r i m e r o q u e a p a r e c e
en el
a t r i b u t o
es sun o m b r e , s e g u i d o p o r el
c rcteri g u a l = )
y
p o r
l t i m o ,
el
v a l o r
d e l a t r i b u t o i n c l u i d o e n t r e c o m i l l a s. En
e s t e c a so , h e m o s d e f i n i d o
una
i m a g e n c o n lae t i q u e t a img]
y ,
en su
p r o p i e d a d [ ser ] , e s p e c i f i c a m o s
e l n o m b r e d e l a r c h i v o dei m a g e n .
La
combin cin
e n t r e
las
d i s t i n t a s
e t i q u e t a s yl os d i f e r e n t e s a t r i b u t o s
n o s a b r e
un
g r a n a b a n i c o
de
p o s i b i l i d a d e s enc u a n t o a laso p c i o n e s
d e visu liz cin
de un
s i t io .
A s, p o d e m o s m o d i f i c a r
c r cterstic s
v i s ua l es r e c u r r i e n d o e x c l u s i v a m e n t e
al
cdigo
f u e n t e , s i n q u e sean e c e s a r i a
la inclusin
de
p e s a d a simgenes
q u e
h r n
r e t r a s a r lac a r g a
d e
la
pgin
en el
n a v e g a d o r .
A
e s t e
g r u p o dea t r i b u t o st mbin se
lo
d e n o m i n a
i18n que es la
a b r e v i a t u r a
de
la
pa labra i n t e r n a c i o n a l i z a c i n
u t i l i z a n d o
elnmero de
l e t r a s
quet i e n e
e ltrmino e n t r e lai
in ic ia l
y lan
f ina l .
7/25/2019 Diseo Web - Curso HTML
16/20
redusers com
1 9
L O S C U T R OG R U P O S
DE
ATRIBUTOS
Si
b i e n
c a d a
e t i q u e t a
H T M L
c u e n t a
c o n susp o s i b l e s a t r i b u t o s yad e f i n i d o s
p o d e m o s d i s ti n g u i r a l gu n o s que son
c o m u n e s encas itodas e l las .
Es
por
e s t o q u e
H T M L
d i v i d e l o s a t r i b u t o s
e n c u a t r o g r u p o s d i f e r e n c ia d o s por
s u s f u n c i o n a l i d a d e s :
bs icos
para
i n t e rnac i ona l i zac i n
dee v e n t o s
ydef o c o .
A
p a r t i r dea h o r a
c o n o c e r e m o s end e t a l l e los
c o r r e s p o n d i e n t e s
ac a d a
g r u p o .
L O S J T R I B U T O S
MAS
FRECUENTES
BASICOS
Estos
a t r ibu tos son los qu e se presentan
en elcdigofu e n t e d e l os d ocu m e n t os
HTMLcon mayor f recuencia
y
la
r zn
es bien clara: se util izan en lam yor
de las et ique tas existentes.
Ene l g ru po de los at r ibu tos bsicos
podemos encont rar los s igu ien tes :
Id :
iden t i f i ca dem an e ranic
a
cada
e l e m e n t o d e n t ro d e un
d o c u m e n t o H T M L
C l a ss :
de te rmin a la
clase
CSS
q u e fect ral e lemento.
Style
d e t e rm i n a demanera d i recta las
prop i e d ad e s CSSq u e fect rna l e l e m e n t o .
D E L O ST G S
E n g e n e r a l u n t a g p u e d e c o n t e n e ro t r ot a g e i n c l u s o p a r t e s d e d o c u m e n t o sH T M L .S in e m b a r g o
a l g u n o s t a g s n o p u e d e n c o n t e n e r a o t r o s os l op u e d e n c o n t e n e r d e t e r m i n a d o s t a g s . A u n q u e h a y
e x c e p d o n e s l o s e l e m e n t o s d e b l o q u e p u e d e n c o n t e n e r e l e m e n t o s d el n e a
y
e l e m e n t o s d e b l o q u e
a u n q u e n o
s u c e d e
l o m i s m o c o n lo s e l e m e n t o s d el n e aq u e n o p u e d e n c o n t e n e r e l e m e n t o s d e b l o q u e .
T i t l e :
de
un
ttulo
ale l e m e n t o .
Esto es
de
u t i l i d a d p a r a m e j o r a r
la
a c ce s i b il id a d d e l d o c u m e n t o ya que
su
n o m b r e esv i s u a l i z a d o als i t u a r
e l c u r s o r s o b r e ele l e m e n t o .
C a b e
a cl a ra r q u e l o s a t r i b u t o s
[id]
y [ c l a s s ] p u e d e n c o n t e n e r l e t r a s
nmeros y
g u i o n e s m e d i o s
y
ba j os
c o m o v a lo r p e r o nop u e d e n e m p e z a r
c o n
n m e r o s .
C o m o
r e c o m e n d a c i n
n o se
deber nut i l i za r
l e tr a s c o m o
la, ya que
podr n
nof u n c i o n a r
e n a l g u n o s n a v e g a d o r e s .
L O S
A T R I B U T O S D E ID I O M A ;
PARA INTERNACIONALIZACION
S o n u t i l i z a d o s p a r a d e f i n i r
y
a d a p t a r los
e l e m e n t o s i n s e r t a d o s en
el
d o c u m e n t o
auni d i o m a
e s p e c f i c o .
Se l o s e m p l e a en
pgin s
q u e m u e s t r a n suc o n t e n i d o
en
v a r i o s i d i o m a s
o
ena q u e l l a s que
q u i e r e n e s p e c i f i c ar en qui d i o m a
est
sud o c u m e n t o .
En
e s t e
g r u p o e n c o n t r a m o s
l o s s i g u i e n t e s t r e s a t r i b u t o s :
L a n g : i n d i c a
el
i d i o m a dele l e m e n t o .
X m h L a n g :
i n d i c a eli d i o m a
d e l e l e m e n t o a u n q u e en
e s t e
c a s o t i e n e
ms
p r i o r i d a d
qu e
el
a t r i b u t o
a n t e r i o r ;
es
d e c i r p r e v a l e c e
e s t e a t r i b u t o p o r s o b r e L a n g .
Dir
i n d i c a
la
direccin
del
t e x t o .
Se lo
ut i l i za
alt r a b a j a r c o n i d i o m a s
q u e no
se
e s c r i b e n
de
i z q u i e r d a
a d e r e c h a .
7/25/2019 Diseo Web - Curso HTML
17/20
SA I R I B U T O S
DINAMICOS
DE EVENTOS
E n c o n t r a m o s d e n t r o
de
este
'^ rupo
m u c h o sa t r i b u t o s ,d e b i d o
i q u e s o n l o s e n c a r g a d o s dee x h i b i r
lo sefectos ylas a n i m a c i o n e s de
las pginasq u e i n c l u y e n l e n g u a j e
JavaScript.V e a m o s , a continuacin
cules s on es to s a t r i b u to s :
O n c l i c k : e s t a b l e c e la accin
q u e
se va a
r ea l i z a r cuando
se
h a g a unc l i c sob re ele l e m e n t o .
O n d b i c l i c k : e s t a b l e c e
la
accin
:;
q u e ser e al iz a c u a n d o se hace un
d o b l e
c l i c sob re
el
e l e m e n t o .
O n m o u s e d o w n : see j e c u t a la
accin c u a n d o
se
d e t e c t a
el
botn
d e l m o u s e p r e s i o n a d o .
O n m o u s e u p : see j e c u t a
la
accin c u a n d o sed e t e c t a
q u e
el
botn
f u e s o l t a d o .
Onmouseover :e s t a b l e c e
la accin c u a n d o sed e t e c t a que
e l cu r so r se sitas o b r e ele l e m e n t o .
O n m o u s e m o v e : e s t a b l e c e la
accin c u a n d o sed e t e c t a q u e el
c u r s o r see n c u e n t r a enm o v i m i e n t o
s o b r e ele l e m e n t o .
O n m o u s e o u t : see j e c u t a la accin
c u a n d o elc u r s or a b a n d o n a ele l e m e n t o .
O n k e y p r e s s : see j e c u t a la accin
c u a n d o sepres i ona una tec la de l t e c lado .
Onkeydown: see j e c u t a la accin
c u a n d o
se
d e t e c t a q u e estp u l s a d a
la te c la d e l t e c l ado .
O n k e y u p :
se
e j e c u t a
la
accin
c u a n d o lat e c la de l t e c lado fue so l tada .
CI SCO
,,;nange)
Product Servcss
Support
Train ing
Events
Partner Central
A r c n i t e c t u r e s
S o l u t i o n s
Border lessNetvvofks
C
o
abofaron
Data CenterVirtualization
Business Video
S o l u t i o n s
F o r
Enerpnse
Small
Business
Serv'ce
Provider
Home
IncJustries
Education
Government
Mediaand
Enterlainment
(Cisco Eos)
>
All
indusnes
J
Solutions
Latest
Nev;s
< >
Cisco
introducesf. o ;ileCoilaboration
Business T3Dle-29 Jun
2010
FollowUs
i fe
See H o w V i d e o
B o o s t s C o m m u n
T r y
Showa n d Share
free for 30 d avs.
,1 i i r ii:;tl(_:t
N9W partnrs and
( ^ ' '
locatiorisworidwtdo'
About I S O
InvestorReiaticns
Corporate
Social Responsibity
Errvron
mental
Sustaina&ity
HumanNetwerR
CarerOpportunities
News Alerts
r4ews@
Cisco
Sgcurity'.Advisortes
Newsleters
F t e i d
Notices
Bio5
7/25/2019 Diseo Web - Curso HTML
18/20
mt u
Eig r u p o dea t r i b u t o s deeve r t t o s
sio
e s u t i l i z a d o c u a n d o
el
d o c u m e n t o
H T M L
i n c o r p o r a
el
l e n g u a j e
JavaScript,
ya
que
a
tr vs de
e l los
es
p o s i b l e l o g r a r q u e
el
s i t io
w e b r e s p o n d a a n te la
inter ccin
del
usua r i o . Por
e j e m p l o p o d e m o s v e r lo s
en
ccin
yd e s c u b r i r s u p o t e n c i a l alv i s i t a r
sit ios en
l o s qu e
se
e m p l e a n
mens de
n veg cin J av aScr i p t
l o s c u a l e s d e s p l i e -
g a n
su
l ista
de
e l e m e n t o s c u a n d o
nos
s i t u a m o s s o b r e c a d a u n o del o s b o t o n e s .
S
T R I B U I O S
DE
SELECCION DE
FOCO
Elf o c o
a p a r e c e
d u r a n t e la
inter ccin
d e l v i s i t a n t e en eis i t i o .
Es tos
a t r i b u t o s
n o s p e r m i t e n a si g n a r a c c i o n e s que se
re liz rn enc a d a c a s o . C u a n d o nos
r e f e r i m o s ad e t e c t a r op e r d e r elf o c o
e s t a m o s h a b l a n d o de que elu s u a r i o
h a s e l e c c i o n a d o
o
had e s e l e c c i o n a d o
e l e le m e n t o .
Por
e j e m p l o
si
t e n e m o s
u n f o r m u l a r i o w e b
dir mos
que
c u a n d o
el
u s u a r i o
est
e s c r i b i e n d o
e n u n o de susc a m p o s e s te e l e m e n t o
t i e n e
el
f o c o . C u a n d o
el
u s u a r i o
contin
h a ci a o t r o c a m p o el
e l e m e n t o a n t e r i o r
ha
p e r d i d o
el
f o c o
ya que lot i e n e ele l e m e n t o
a c t u a l
queest
u t i l i z a n d o .
V e a m o s a
c o n t i n u a c i n cules
s o n l o s a t r i b u t o s
de
f o c o :
A c c e s s K e y :
e s t a b l e c e
u n a t e c l a de
a c c e s o rpido
a und e t e r m i n a d o e le m e n t o .
T a b l n d e x :
e s t a b l e c e elo r d e n de la
t bul cin
deld o c u m e n t o
y
suv a l o r
est
c o m p r e n d i d o e n tr e O
y
32 .767 .
O n F o c u s :
see j e c u t a la
ccin
c u a n -
d o
se
d e t e c t a
el
f o c o s o b r e
el
e l e m e n -
t o ,
loq u e s i g n i f i c a que
ct
c u a n d o el
e l e m e n t o ess e l e c c i o n a d o .
O n B l u r :
see j e c u t a la
ccin
c u a n d o
se
d e t e c t a
que el
e l e m e n t o
ha
p e r d i d o elf o c o ; esd e c i r
ct
c u a n d o
e l e l e m e n t o
se had e s e l e c c i o n a d o .
El
a t r i b u t o
a c c e s s K e y
a s i g n a t e c l a s
d e a c c e s o
rpido
al os e l e m e n t o s de
u n s i t io w e b
lo
c u a l t i e n e
un
p r o b l e m a
imp l c i t o :
losn a v e g a d o r e s .
Este
i n c o n -
v e n i e n t e c o n s i s t e
en
q u e
si
b i e n
H T M L
d e f i n e
qu
t e c l a s
se
d e b e n p r e s i o n a r
p a r a a c c e d e r
al
e l e m e n t o
enc u e s t i n
I n t e r n e t E x p l o r e r i n t e r p r e t a ala c c e s o
rpido atr vs de la
t e c l a
< A l t >
m i e n t r a s queM o z i l l a F i r e f o x i n t e r p r e t a
es t a t e c l a a
tr vs
de la
combin cin
< A l t
S h i f t >
eln a v e g a d o r Sa fa r ir e a l i -
za la
ccin
a
tr vs
de lat e c l a
< C t r l >
P I N C E L E S
Y
F I L T R O S
E n
H T M L ,
l o s e v e n t o s s o n a c c i o n e s q u e s i r v e n p a r a a s o c i a r t a g s
H T I V I L
c o n l o s s c r i p t s q u e c o n t i e n e e l
d o c u m e n t o .
U n s c r i p t e s u n p r o g r a m a d e l l a d o d e l d i e n t e
y
m e d i a n t e l o s e v e n t o s , c u a n d o e l u s u a r i o
r e a l i z a u n a d e t e r m i n a d a
a c d n
c o m o p a s a r e l m o u s e s o b r e u nb o t n ,p o r e j e m p l o ) , s e r e a l iz a u n a
l l a m a d a a l s c r ip t , q u e e j e c u t a s uf u n c i n c o m op o d r as e r, p o r e j e m p l o , l a c a r g a d e u n a i m a g e n ) .
L a s i n t a x i s p a r a d e f i n i r u n e v e n t o e s s i m i l a r a l a q u e s e e m p l e a e n l a
d e f i n i c i n
d e a t r i b u t o s y l o s
e v e n t o s d i s p o n i b l e s d e p e n d e n d e l t a g u t i l i z a d o e n c a d a c a s o .
JUNTO
JAVASCRIPT
LOS
ATRIBUTOS
DE
EVENTO YUD N
D R INTER CCIN
o s DOCUMENTOSHTML
y por
l t im o .
O p e r a lai n t e r p r e t a
a tr vs de lacombin cin
< S h i f t E s o .Es to
q u i e r e d e c i r
q u e ela c c e s o ac a d a p a r t e de una
pgin
u t i l i z a n d o last e c l a s d e p e n d e
e x c l u s i v a m e n t e d e l n a v e g a d o r
q u e t e n g a elu s u a r i o . Ela t r i b u t o
t a b l n d e x
p o r sup a r t e e x h i b e
s u m a y o r f u n c i o n a l i d a d c u a n d o
e s t a m o s m a n e j a n d o p o r e j e m p l o
l o s f o r m u l a r i o s del o g i n
o
der e g i s t r o .
C u a n d o
un
u s u a r i o
se
e n f r e n t a
un
f o r m u l a r i o
en el qued e b e i n g r e s a r sus
d a t o s
en
d i f e r e n t e s c a m p o s
al
u t i l i z a r
la
t e c l a
< T a b >
p a ra m o v e r s e e n t r e e l lo s
l o
h r en el
o r d e n i n d i c a d o m e d i a n t e
e s t e a t r i b u t o .
Para
d e c i r l o
de
o t r a
m a n e r a
al
d e f i n i r
el
a t r i b u t o
t a b l n d e x
d e ca d a e l e m e n t o e s t a re m o s d e f i n i e n -
d o
la
s e c u e n c i a
en la que el
u s u a r i o
entr r
enc a d a c a m p o si nor e c u r r e
a l m o u s e
es
d e c i r
si
p a s a
de un
c a m p o ao t r o p u l s a n d o
< T a b > .
7/25/2019 Diseo Web - Curso HTML
19/20
re users
co
tIUESTR S PRIME
^ A S -
' A S -
irinfti
iontrnuacin
cmo
W cdigoen
eamweav
os
cambos
que se
^^Gcinde dseo
Archivo Edicin t t Insertsi Modificar Foi
omsndo i
Stio
Ventana Ayuda
CdKto Drvid Disefto
Ajuttartado
Ajutr ancho
Cdigo
Dividir cdigo
:
V Diefto
Cdigo ydii lo .
i y Dividir verb c lmtote
Alternar v i tai
Actualizar vista
de
dieo
Ctr l Mayus 0
CtriAlt MayitO
C U
ESCRIBIRETQUET S
Cdigo
Ver Insertar
Modificar
Formato Comandos Sitio Ventana Ayuda
Acercar CtrUt
Alejar Ctrl+-
Aumentar
y
reducir
A rch i vo
Edicion
Dividir Diseo
Direccin:
"^'i
'DOCTYPFhc
T r a n s i c i o n a i /
h z t p : / / w m . v .
D o c u m e
< head>
Ajustartodo
Ajustar ancho
Cdigo
Dividir cdigo
Diseo
Cdigo
y
diseo
Dividirverticalmente
VistaDiseo a la izquieraa
Alternarvistas
CtrkA t*0
Ctrl+Mays+O
Ctrl+Alt+Mays+0
i
- j ^ n q u e yac r e a m o s ym o d i f i c a m o s a l g u n as
e t i q u e t a s enD r e a m w e a v e r p a ra c o n f i g u r a r
e lttulo de lapgina ya g r e g a r t a g s d e s c r i p t i v o s ,
an noh e m o s g e n e r a d o m o d i f i c a c i o n e s
e n el c o n t e n i d ode lapgina ya que no
i n c o r p o r a m o s
t e x t o sni imgenes.
PASOl
Para e s c r i b ir e t i q u e t a s
en
D r e a m w e a v e r d e s d eel cdigo
s e l e c c i o n a m o s en
la
ba r r adev is tas
d e la i n t e r f a zla qued i c e [Dividir].O t r a f o r m a deha ce r lo
es ir al men [Ver]
y
alle l e g i r[Cdigo ydiseo].
PASO102
Luego , pa raque no sec o r t e n las
lneas de cdigo yelt r a ba jo r e su l te
ms cmodo en elm i s m omen
h a c e m o s c l i cen[Dividir vertcalmen te],dem o d o
q u ela divisin de lap a n t a l l asea
h o r i z o n t a l .
PASO
103
D e n t r o de lae t i q u e t a [body],
p r e s i o n a m o s lat e c l a < E n t e r >
y c o m e n z a m o s ae s c r i b i r lap r i m e r a e t i q u e t a ,
que
p u e d e
ser
c u a l q u i e r a delase x i s t e n t e s . Enes te c a so , ser< d i v > .
7/25/2019 Diseo Web - Curso HTML
20/20
| < ^ U > D o t m e i i t Q s i n t i Y i c i < / c i U f
i soa >
| < / h a >
ET S
4 |
PERTUR CIERRE
TML
thflvo C U ^
ftf
&Utffbr MdtfA
^M
FwTVtfto Covtwk ^
SKM Vttittti^
^DM*_^:ea*te
OMowiw>
r-4.
i iwpettan4
. ^ 0
ifctKto jwm t(t dte
-
. . -M*:
: ttean
Cdigo
^Dividir
Dbste '^' m^tin^^ ^^^'' Ws^-^^ ' ]^^
< t i t l e >D o c u a e n t o s i n
t i t u l c K C i t l O
< heacl> i
^ E s t a
s
n u e s t c ap r i m e r a e t i j i e t ^C i l v^^
PRIMER
ETQUET
CIERREFN L
| 6
L as e t i q u e t a s l l e va n u n a a p e r t u r a
y un c i e rr e l o q u e s i g n i f i c a q u e
c u a n d o a b r i m o s u n a e t i q u e t a
Parace r rar , d e b e m o s e s c ri b ir .
c ierre
d e b e a p a r e ce r
a l f i n a l d e l c o n t e n i d o d e l a e t i q u e t a ;
d e c ir e l c o n t e n i d o t i e n e q ue ir e n t r e l a ap e r tu r a yel c ierre .
SO
1 5
D r e a m w e a v e rn o s d a
l a p o s i b i l i d a d d e
u t i l i z a r
u n g e s t o r d e e t i q u e t a s . E s to
y
n o s d a m s r a p i d e z a
la
s i t i o .
Este
g e s t o ra p a r e c ec u a n d o
o s e l s i g n o < p a r a a b r i r u n a e t i q u e t a .
la e t i q u e t a e n e l g e s t o r
s p o r e l m o u s e
o
l o s c u r s o r e s d e
yu n a v e z h e c h o e s to p r e s i o n a m o s
P SOl
C u a n d o t e r m i n e m o s d e e s c ri b ir
J e l c o n t e n i d o d e la e t i q u e t a
b st r
c o n e sc r i b i r [