Diseño Web - Curso HTML

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 .

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>



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 lDp^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


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


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 .

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



< 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

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

 ,

la

mos t r a r a

a

c o n t i n u a c i n

de

 ,

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 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/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 .


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 .

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 >

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 :

 T e x t o S u b r a y a c l o 

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(


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].

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

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 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 .

 :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

 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

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 ,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

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 :

 

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 .


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 .

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

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 > .

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 > .

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 [

Diseño Web - Curso HTML

Documents

Transcript of Diseño Web - Curso HTML