Programacion Web Isc Unidad I

Porgramacion WEB ISC Unidad I
PROGRAMACION WEB
UNIDAD I
INTRODUCCIN A LA TECNOLOGIA WEB.
1.1. Perspectiva Histrica del Internet.
Es la red de redes. Sistema mundial de redes de computadoras interconectadas. Fue
concebida a fines de la dcada de 19! por el "epartamento de "efensa de los Estados Unidos#
m$s precisamente% por la &'P&. Se la llam( primero &'P &net ) fue pensada para cumplir
funciones de in*estigaci(n. Su uso se populari+( a partir de la creaci(n de la World Wide Web.
&ctualmente es un espacio p,blico utili+ado por millones de personas en todo el mundo como
-erramienta de comunicaci(n e informaci(n.
.istoria de Internet.
19/0
1a Uni(n So*itica lan+a el Sputni2% el primer satlite artificial. En respuesta a este
-ec-o% Estados Unidos crea el &'P&34rganismo de Pro)ectos de In*estigaci(n &*an+ada5
dentro del 6inisterio de "efensa a fin de establecer su lidera+go en el $rea de la ciencia ) la
tecnolog7a aplicadas a las fuer+as armadas.
19/
El &'P& promue*e un estudio sobre 8'edes cooperati*as de computadoras de tiempo
compartido9.
: El ;<:= en el laboratorio 1incoln del 6I; ) el &>?FS@:A= de la S)stem "e*elopment
Corporation Buedan *inculadas directamente 3sin conmutaci(n por paBuetes5 por medio de una
l7nea telef(nica dedicada de 1=!! bps# m$s tarde se agrega la computadora de la "igital
EBuipment Corporation 3"EC5 en &'P& ) as7 conforma la red eCperimental.
Instituto ;ecnol(gico de Ciudad.Du$re+
1
19E
Se presenta la red conmutada por paBuetes 3PS : >etFor25 ante el &'P&.
199
Se ponen en ser*icio los nodos a medida Bue BB> constru)e cada I6P G.one)Fell
""P:/1 con 1= H de memoriaI# &;J; pro*ee l7neas de /! 2pbs
>odo 1K UC1& : Uni*ersidad de 1os Lngeles% California. 3A! de &gosto5
: Funci(nKCentro de e*aluaci(n de redes.
: Sistema% Sistema operati*oKS"S SIM6& 0%
>odo =K Instituto de In*estigaciones de Stanford.3S'I5 31 de 4ctubre5
: Centro de Informaci(n de 'edes 3>etFor2 Information Center53>IC5
: S"S 9N!?Menie
: Pro)ecto de "oug Engelbart sobre 8"ebate sobre el intelecto -umano9.
>ode AK Uni*ersidad de California Santa Barbara 3UCSB5 31 de >o*iembre5
: 6atem$tica Interacti*a de Culler : Fried.
: IB6 A!?0/% 4S?6O;
>odo NK Uni*ersidad de Uta-. 3"iciembre5
: Mr$ficos.
: "EC P"P:1!% ;eneC
=
1901
1/ nodos 3=A -osts5K UC1&% S'I% UCSB% Uni*ersidad de Ut-a% BB>% 6I;% '&>"% S"C%
.ar*ard% 1aboratorio 1incoln% Stanford% UIUP% CW'U% C6U% >&S&?&mes.
'a) ;omlinson de BB> in*enta un programa de correo electr(nico para mandar mensaQes
en redes distribuidas. El programa original es producto de otros dosK un programa interno de
correo electr(nico 3SE>"6SM5 ) un programa eCperimental de transferencia de arc-i*os
3CPR>E;5.
190=
'a) ;omlinson modifica el programa de correo electr(nico para &'P&>E; donde se
transforma en un Cito.Se elige el signo S entre los signos de puntuaci(n de la m$Buina de
teletipos ;omlinson 6odelo AA para representar el 8en9.
1arr) 'oberts crea el primer programa de administraci(n de correo electr(nico para listar%
leer selecti*amente% guardar% re en*iar ) responder mensaQes.
'FC A1EK Especificaci(n ;elnet
19E!
&'P&>E; deQa de funcionar por completo el =0 de 4ctubre a ra7+ de una ad*ertencia de
*irus propagada accidentalmente
19EA
El ser*idor de nombres desarrollado en la Uni*ersidad de Wisconsin )a no reBuiere Bue
el usuario cono+ca la ruta eCacta para acceder a otros sistemas.
Paso de >CP a ;CP?IP 31 Enero5
"esaparecen los I6Ps .one)Fell o Pluribus # los ;IPs son reempla+ados por ;&Cs
A
19EN
Se introduce el "omain >ame S)stem3">S5 3Sistema de nombre de dominio5
19E Se crea la >SF>E; 3Con una *elocidad principal de /Hbps5.
>SF establece / centros de super computadoras para pro*eer alto poder de proceso.
3DO>CSPrinceton% PSCSPittsburg-% S"SCSUCS"% >CS&SUIUC% ;-eor)
CenterSCornell5.
Esto permite una eCplosi(n de coneCiones% especialmente por parte de las uni*ersidades.
199!
&'P&>E; deQa de eCistir.
1991
CE'> lan+a la World:Wide Web 3WWW5 creada por ;im Berners : 1ee.
199A
1a Casa Blanca se conecta en l7nea 3 -ttpK??FFF.F-ite-ouse.go*?5K
Presidente Bill ClintonK presidentSF-ite-ouse.go*
Oicepresidente &l MoreK *ice:presidentSF-ite-ouse.go*
Worms (gusanos) de una nueva clase aparecen en la Red - los Worms WWW (W4) a
los que se les unen los Spiders (araas) , Wanderers (vagabundos) , Crawlers
(orugas) y Snakes (serpienes)!
6osaic genera un crecimiento asombrosoK la WWW crece a una tasa del AN1.ANT anual para el
fluQo de ser*icio. Mop-er crece a una tasa del 990T.
199/
Sun lan+a D&O& el =A de 6a)o
'eal &udio% una tecnolog7a de audio% permite Bue los usuarios de la 'ed reciban el sonido casi en
tiempo real.
N
WWW supera a ftp:data en 6ar+o ) se transforma en el ser*icio de ma)or fluQo en la >SF >et ?
en base al conteo de paBuetes ) en &bril en base al conteo de b)tes.
=!!!
El Controlador de tiempo de los EE. UU. 3US>45 ) otros pocos ser*icios de tiempo de
todo el mundo reportan el nue*o aUo como 191!! el primero de Enero.
Un ataBue de rec-a+o de ser*icio masi*o es lan+ado contra importantes sitios Feb%
inclu)endo a Ra-oo% &ma+on% ) eBa) a comien+os de Febrero.
El tamaUo de la Web estimado por >EC:'I e In2tomi sobrepasa los mil millones de
p$ginas susceptibles de ser catalogadas.
1.. Pr!t!c!l! H""P #Pr!t!c!l! de "rans$erencia de Hiperte%t!&.
"esde 199!% el protocolo .;;P 3Protocolo de transferencia de -iperteCto5 es el protocolo
m$s utili+ado en Internet. 1a *ersi(n !.9 s(lo ten7a la finalidad de transferir los datos a tra*s de
Internet 3en particular p$ginas Web escritas en .;615. 1a *ersi(n 1.! del protocolo 3la m$s
utili+ada5 permite la transferencia de mensaQes con encabe+ados Bue describen el contenido de
los mensaQes mediante la codificaci(n 6I6E.
El prop(sito del protocolo .;;P es permitir la transferencia de arc-i*os 3principalmente% en
formato .;615. entre un na*egador 3el cliente5 ) un ser*idor Feb 3denominado% entre otros%
httpd en eBuipos U>I<5 locali+ado mediante una cadena de caracteres denominada direcci(n
U'1.
/
C!'(nicacin entre el nave)ad!r * el servid!r
1a comunicaci(n entre el na*egador ) el ser*idor se lle*a a cabo en dos etapasK
El na*egador reali+a una s!licit(d H""P
El ser*idor procesa la solicitud ) despus en*7a una resp(esta H""P
En realidad% la comunicaci(n se reali+a en m$s etapas si se considera el procesamiento de
la solicitud en el ser*idor. "ado Bue s(lo nos ocupamos del protocolo .;;P% no se eCplicar$ la parte
del procesamiento en el ser*idor en esta secci(n del art7culo. Si este tema les interesa% puede
consultar el art7culo sobre el tratamiento de CMI.
+!licit(d H""P
Una solicitud .;;P es un conQunto de l7neas Bue el na*egador en*7a al ser*idor. Inclu)eK
,na l-nea de s!licit(dK es una l7nea Bue especifica el tipo de documento solicitado% el mtodo
Bue se aplicar$ ) la *ersi(n del protocolo utili+ada. 1a l7nea est$ formada por tres elementos
Bue deben estar separados por un espacioK
el mtodo
la direcci(n U'1
la *ersi(n del protocolo utili+ada por el cliente 3por lo general% HTTP/1.05

.!s ca'p!s del enca/e0ad! de s!licit(dK es un conQunto de l7neas opcionales Bue permiten
aportar informaci(n adicional sobre la solicitud )?o el cliente 3na*egador% sistema operati*o%
etc.5. Cada una de estas l7neas est$ formada por un nombre Bue describe el tipo de encabe+ado%
seguido de dos puntos 3K5 ) el *alor del encabe+ado.
El c(erp! de la s!licit(dK es un conQunto de l7neas opcionales Bue deben estar separadas de las
l7neas precedentes por una l7nea en blanco )% por eQemplo% permiten Bue se en*7en datos por un
comando P4S; durante la transmisi(n de datos al ser*idor utili+ando un formulario.
Por lo tanto% una solicitud .;;P posee la siguiente sintaCis 3<crlf> significa retorno de carro )
a*ance de l7nea5K
"#$%&% '(RS)*+ ,R-<crlf>
(+C./(0.&%1 'alor<crlf>
2 2 2 (+C./(0.&%1 'alor<crlf>
Lnea en blanco <crlf>
C,(R3% &( -. S%-)C)$,&
& continuaci(n se encuentra un eQemplo de una solicitud .;;PK
4($ 5p166es2kioskea2ne 7$$36829 .ccep 1 $e:65ml );-"odi;ied-Since 1
Saurday, 8<-=anuary->999 841?@188 4"$ ,ser-.gen 1 "oAilla6429 (compaibleB
"S)( <29B Windows C<)
C!'and!s
Comand
o
Descripcin
GET Solicita el recurso ubicado en la URL especifcada
HEAD
Solicita el encabezado del recurso ubicado en la URL
especifcada
POST Enva datos al prora!a ubicado en la URL especifcada
PUT Enva datos a la URL especifcada
DELETE "orra el recurso ubicado en la URL especifcada
0
Enca/e0ad!s
Nombre del
encabezado
Descripcin
Accept Tipo de contenido aceptado por el naveador #por e$e!plo% texto/html&' (onsulte Tipos de )*)E
Accept+(,arset -ueo de caracteres .ue el naveador espera
Accept+Encodin (odifcaci/n de datos .ue el naveador acepta
Accept+Lanuae *dio!a .ue el naveador espera #de 0or!a predeter!inada% inl1s&
Aut,orization *dentifcaci/n del naveador en el servidor
(ontent+Encodin Tipo de codifcaci/n para el cuerpo de la solicitud
(ontent+Lanuae Tipo de idio!a en el cuerpo de la solicitud
(ontent+Lent, E2tensi/n del cuerpo de la solicitud
(ontent+T3pe Tipo de contenido del cuerpo de la solicitud #por e$e!plo% texto/html&' (onsulte Tipos de )*)E
Date 4ec,a en .ue co!ienza la trans0erencia de datos
4or5arded Utilizado por e.uipos inter!ediarios entre el naveador 3 el servidor
4ro! Per!ite especifcar la direcci/n de correo electr/nico del cliente
4ro!
Per!ite especifcar .ue debe enviarse el docu!ento si ,a sido !odifcado desde una 0ec,a en
particular
Lin6 7nculo entre dos direcciones URL
Ori+URL Direcci/n URL donde se oriin/ la solicitud
Re0erer Direcci/n URL desde la cual se realiz/ la solicitud
User+Aent
(adena con in0or!aci/n sobre el cliente% por e$e!plo% el no!bre 3 la versi/n del naveador 3 el
siste!a operativo
Resp(esta H""P
Una respuesta .;;P es un conQunto de l7neas Bue el ser*idor en*7a al na*egador. Est$
constituida porK Inclu)eK
,na l-nea de estad!K es una l7nea Bue especifica la *ersi(n del protocolo utili+ada ) el estado
de la solicitud en proceso mediante un teCto eCplicati*o ) un c(digo. 1a l7nea est$ compuesta
por tres elementos Bue deben estar separados por un espacioK 1a l7nea est$ formada por tres
elementos Bue deben estar separados por un espacioK
la *ersi(n del protocolo utili+ada
el c(digo de estado
el significado del c(digo
E
.!s ca'p!s del enca/e0ad! de resp(estaK es un conQunto de l7neas opcionales Bue permiten
aportar informaci(n adicional sobre la respuesta )?o el ser*idor. Cada una de estas l7neas est$
compuesta por un nombre Bue califica el tipo de encabe+ado% seguido por dos puntos 3K5 ) por
el *alor del encabe+ado Cada una de estas l7neas est$ formada por un nombre Bue describe el
tipo de encabe+ado% seguido de dos puntos 3K5 ) el *alor del encabe+ado.
El c(erp! de la resp(estaK contiene el documento solicitado.
Por lo tanto% una respuesta .;;P posee la siguiente sintaCis 3<crlf> significa retorno de carro )
a*ance de l7nea5K
'(RS)*+-7$$3 C*&)4% (D3-)C.C)*+ <crlf>
(+C./(0.&%1 'alor<crlf>
2 2 2 (+C./(0.&%1 'alor<crlf>
Lnea en blanco <crlf>
C,(R3% &( -. R(S3,(S$.
& continuaci(n se encuentra un eQemplo de una respuesta .;;PK
7$$36829 >99 %E &ae1 Sa, 8< =an >999 841?@18> 4"$ Server 1 "icroso;-))S6>29
Conen-$ype 1 e:67$"- Conen--eng5 1 8>4< -as-"odi;ied 1 Fri, 84 =an
>999 9G1><18? 4"$
Enca/e0ad!s de resp(esta
Nombre del
encabezado
Descripcin
(ontent+Encodin Tipo de codifcaci/n para el cuerpo de la respuesta
(ontent+Lanuae Tipo de idio!a en el cuerpo de la respuesta
(ontent+Lent, E2tensi/n del cuerpo de la respuesta
(ontent+T3pe
Tipo de contenido del cuerpo de la respuesta #por e$e!plo% texto/html&' (onsulte
Tipos de )*)E
Date 4ec,a en .ue co!ienza la trans0erencia de datos
E2pires 4ec,a l!ite de uso de los datos
4or5arded Utilizado por e.uipos inter!ediarios entre el naveador 3 el servidor
Location Redirecciona!iento a una nueva direcci/n URL asociada con el docu!ento
Server (aractersticas del servidor .ue envi/ la respuesta
9
.!s cdi)!s de resp(esta
Son los c(digos Bue se *en cuando el na*egador no puede mostrar la p$gina solicitada. El
c(digo de respuesta est$ formado por tres d7gitosK el primero indica el estado ) los dos siguientes
eCplican la naturale+a eCacta del error.
Cdig
o
Mensaje Descripcin
10x
Mensaje de
informacin
Estos cdigos no se utilizan en la versin 1.0 del protocolo
0x !xito Estos cdigos indican la correcta ejecucin de la transaccin
899 O: La solicitud se llev/ a cabo de !anera correcta
89; (REATED
Siue a un co!ando POST e indica el 12ito% la parte restante del cuerpo indica la direcci/n URL
donde se ubicar< el docu!ento creado reciente!ente'
898 A((EPTED La solicitud ,a sido aceptada% pero el procedi!iento .ue siue no se ,a llevado a cabo
89=
PART*AL
*>4OR)AT*O>
(uando se recibe este c/dio en respuesta a un co!ando de GET indica .ue la respuesta no est<
co!pleta'
89? >O RESPO>SE El servidor ,a recibido la solicitud% pero no ,a3 in0or!aci/n de respuesta
89@ RESET (O>TE>T El servidor le indica al naveador .ue borre el contenido en los ca!pos de un 0or!ulario
89A PART*AL (O>TE>T
Es una respuesta a una solicitud .ue consiste en el encabezado range' El servidor debe indicar el
encabezado content-Range
"0x #edireccin Estos cdigos indican $ue el recurso %a no se encuentra en la ubicacin especi&cada
=9; )O7ED Los datos solicitados ,an sido trans0eridos a una nueva direcci/n
=98 4OU>D
Los datos solicitados se encuentran en una nueva direcci/n URL% pero% no obstante% pueden
,aber sido trasladados
=9= )ETHOD
Sinifca .ue el cliente debe intentarlo con una nueva direcci/nB es pre0erible .ue intente con
otro !1todo en vez de GET
=9? >OT )OD*4*ED
Si el cliente llev/ a cabo un co!ando GET condicional #con la solicitud relativa a si el docu!ento
,a sido !odifcado desde la Clti!a vez& 3 el docu!ento no ,a sido !odifcado% este c/dio se
enva co!o respuesta'
'0x
Error debido al
cliente
Estos cdigos indican $ue la solicitud es incorrecta
?99 "AD REDUEST
La sinta2is de la solicitud se encuentra 0or!ulada de !anera err/nea o es i!posible de
responder
?9; U>AUTHOR*EED
Los par<!etros del !ensa$e aportan las especifcaciones de 0or!ularios de autorizaci/n .ue se
ad!iten' El cliente debe re0or!ular la solicitud con los datos de autorizaci/n correctos
?98
PAF)E>T
REDU*RED
El cliente debe re0or!ular la solicitud con los datos de pao correctos
?9= 4OR"*DDE> El acceso al recurso si!ple!ente se deniea
?9? >OT 4OU>D
Un cl<sico' El servidor no ,all/ nada en la direcci/n especifcada' Se ,a abandonado sin de$ar
una direcci/n para redireccionar''' G&
1!
(0x
Error debido al
servidor
Estos cdigos indican $ue existe un error interno en el servidor
@99 *>TER>AL ERROR
El servidor encontr/ una condici/n inesperada .ue le i!pide seuir con la solicitud #una de esas
cosas .ue les suceden a los servidores'''&
@9; >OT *)PLE)E>TED El servidor no ad!ite el servicio solicitado #no puede saberlo todo'''&
@98 "AD GATEHAF
El servidor .ue actCa co!o una puerta de enlace o pro23 ,a recibido una respuesta no v<lida del
servidor al .ue intenta acceder
@9=
SER7*(E
U>A7A*LA"LE
El servidor no puede responder en ese !o!ento debido a .ue se encuentra conestionado
#todas las lneas de co!unicaci/n se encuentran conestionadas% int1ntelo de nuevo !<s
adelante&
@9? GATEHAF T*)EOUT
La respuesta del servidor ,a llevado de!asiado tie!po en relaci/n al tie!po de espera .ue la
puerta de enlace poda ad!itir #e2cedi/ el tie!po asinado'''&
1.1.2 Intr!d(ccin Al H"M.. .en)(a3e de 4esplie)(e del We/.
H"M. es el len)(a3e c!n el 5(e se escri/en las p6)inas 7e/. 1as p$ginas Feb pueden
ser *istas por el usuario mediante un tipo de aplicaci(n llamada na*egador. Podemos decir por lo
tanto Bue el .;61 es el lenguaQe usado por los na*egadores para mostrar las p$ginas Febs al
usuario% siendo -o) en d7a la interface m$s eCtendida en la red. Este lenguaQe nos permite aglutinar
teCtos% sonidos e im$genes ) combinarlos a nuestro gusto. &dem$s% ) es aBu7 donde reside su
*entaQa con respecto a libros o re*istas% el .;61 nos permite la introducci(n de referencias a otras
p$ginas por medio de los enlaces -iperteCto.
El .;61 se cre( en un principio con obQeti*os di*ulgati*os. >o se pens( Bue la Feb
llegara a ser un $rea de ocio con car$cter multimedia% de modo Bue% el .;61 se cre( sin dar
respuesta a todos los posibles usos Bue se le iba a dar ) a todos los colecti*os de gente Bue lo
utili+ar7an en un futuro. Sin embargo% pese a esta deficiente planificaci(n% si Bue se -an ido
incorporando modificaciones con el tiempo% estos son los est$ndares del .;61. >umerosos
est$ndares se -an presentado )a. El .;61 N.!1 es el ,ltimo est$ndar a septiembre de =!!1.
Esta e*oluci(n tan an$rBuica del .;61 -a supuesto toda una seria de incon*enientes )
deficiencias Bue -an debido ser superados con la introducci( n de otras tecnolog7as accesorias
capaces de organi+ar% optimi+ar ) automati+ar el funcionamiento de las Febs. EQemplos Bue pueden
sonaros son las CSS% Da*aScript u otros. Oeremos m$s adelante en Bu consisten algunas de ellas.
4tros de los problem$s Bue -an acompaUado al .;61 es la di*ersidad de na*egadores presentes
11
en el mercado los cuales no son capaces de interpretar un mismo c(digo de una manera unificada.
Esto obliga al Febm$ster a% una *e+ creada su p$gina% comprobar Bue esta puede ser le7da
satisfactoriamente por todos los na*egadores% o al menos% los m$s utili+ados.
&dem$s del na*egador necesario para *er los resultados de nuestro trabaQo% necesitamos
e*identemente otra -erramienta capa+ de crear la p$gina en si. Un arc-i*o .;61 3una p$gina5 no
es m$s Bue un teCto. Es por ello Bue para programar en .;61 necesitamos un editor de teCtos. Es
recomendable usar el Bloc de notas Bue *iene con FindoFs% u otro editor de teCtos sencillo. .a)
Bue tener cuidado con algunos editores m$s compleQos como Wordpad o 6icrosoft Word% pues
colocan su propio c(digo especial al guardar las p$ginas ) .;61 es 8nica'ente te%t! plan!% con
lo Bue podremos tener problemas.
ECisten otro tipo de editores espec7ficos para la creaci(n de p$ginas Feb los cuales
ofrecen muc-as facilidades Bue nos permiten aumentar nuestra producti*idad. >o obstante% es
aconseQable en un principio utili+ar una -erramienta lo m$s sencilla posible para poder prestar la
m$Cima atenci(n a nuestro c(digo ) familiari+arnos lo antes posible con l. Siempre tendremos
tiempo m$s delante de pasarnos a editores m$s *ers$tiles con la consiguiente ganancia de tiempo.
Para tener m$s claro todo el tema de editores ) los tipos Bue eCisten% *isita los art7culosK
Editores de .;61.
Bloc de notas.
;ambin puedes acceder a descripciones editores m$s compleQos Bue el Bloc2 de >otas% pero
m$s potentes como .omesite o UltraEdit.
Es importante tener claro todo ello puesto Bue en funci(n de *uestros obQeti*os puede Bue%
m$s Bue aprender .;61% resulte m$s interesante aprender el uso de una aplicaci(n para la creaci(n
de p$ginas.
&s7 pues% una p$gina es un arc-i*o donde est$ contenido el c(digo .;61 en forma de
teCto. Estos arc-i*os tienen eCtensi(n .-tml o .-tm 3es indiferente cu$l utili+ar5. "e modo Bue
cuando programemos en .;61 lo -aremos con un editor de teCtos ) guardaremos nuestros
trabaQos con eCtensi(n .-tml% por eQemplo mip$gina.-tml
Un na*egador del WWW o lo Bue se denomina programa cliente Bue permite el acceso a
p$ginas WWW de Internet. El programa cliente permite *er una p$gina antes de introducirla en un
1=
ser*idor. "e este modo% se pueden comprobar las modificaciones de las distintas p$ginas Bue se
diseUan.
Con el procesador de teCtos se crea un fic-ero con un nombre al Bue necesariamente -a)
Bue aUadirle la eCtensi(n -tml. Por eQemploK prueba.-tml. Si se aUade algo nue*o se deben
guardar los cambios antes de *isuali+ar el nue*o documento en el na*egador. El documento se
abre con el comando 4pen File del men, File del programa cliente. 1os cambios son refleQados
en la pantalla. Si se trabaQa con el programa cliente ) el procesador de teCtos al mismo tiempo%
acti*ando simplemente la opci(n 'eload se pueden comprobar los cambios efectuados.
ECisten ciertos programas Bue nos a)udan a automati+ar este proceso 3editores de
lenguaQe .;615% pero es mu) con*eniente comen+ar a -acerlo de manera manual para
comprender bien la estructura del lenguaQe .;61. 1as etiBuetas del lenguaQe .;61.: El
lenguaQe .;61 usa etiBuetas o directi*as 3tags5 para indicarle al programa cliente de Web como
mostrar el teCto. 1as etiBuetas est$n formadas por determinados caracteres metidos entre los
signos 9:; ) con la barra 9<: cuando se trata de la segunda etiBueta de un efecto 3la de cierre5.
Por eQemploK 9title: para abrir ) 9<title: para cerrar.
1.1.1.2 Estr(ct(ra de (n d!c('ent! H"M..
Un documento .;61 comien+a con la etiBueta 9=t'l: % ) termina con 9<=t'l:. "entro
del documento -a) dos +onas bien diferenciadasK el encabe+amiento% delimitado por 9HEA4:
*9<HEA4:; Bue sir*e para definir di*ersos *alores *$lidos en todo el documento. R el cuerpo%
delimitado por 9BO4>: ) 9<BO4>:; donde reside la informaci(n del documento.
El elemento 9"I".E: permite
especificar el t7tulo de un documento .;61.
<HTML>
(ncabeAado <HEAD>
<TITLE>$Hulo del documeno</TITLE>
</HEAD>
<BODY>
Cuerpo $e:o del documeno
</BODY>
</HTML>
1A
Este t7tulo no forma parte del documento en s7K no aparece% por eQemplo% al principio del
documento sino Bue sir*e como t7tulo de la *entana del programa Bue la muestra. ECisten
muc-os otros elementos Bue se engloban dentro del encabe+amiento pero para la estructura
b$sica del lenguaQe -tml en su ni*el b$sico no son necesarios. El cuerpo de un documento
.;61 contiene el teCto Bue% con la presentaci(n ) los efectos Bue se decidan% se presentar$ ante
el usuario. "entro del cuerpo son aplicables todos los efectos Bue se *an a mencionar en el resto
de esta gu7a. "ic-os efectos se especifican eCclusi*amente a tra*s de Vdirecti*asV.
Estil!s * e$ect!s /6sic!s
;odas las etiBuetas Bue siguen a continuaci(n se introducen a partir del tag 9BO4>:% es
decir% dentro del cuerpo del documento.
;7tulos.:
6ediante los t7tulos% en sus diferentes ni*eles de importancia% se puede definir el
esBueleto del documento% su estructura b$sica. .;61 tiene seis ni*eles de cabeceras numeradas
del uno al seis.
<H1>"uc5a imporancia</H1> "uc5a imporancia
<H2>"enos imporancia</H2> "enos imporancia
<H3>"uc5a menos imporancia</H3> "uc5a menos imporancia
4e$inicin de /l!5(es.
.a) Bue tener en cuenta% como )a se -a dic-o antes% Bue al presentar el documento se
-ace caso omiso de los espacios% tabulaciones ) retornos de carro Bue se encuentren en el teCto
fuente. Por esta ra+(n se utili+an una serie de etiBuetas Bue sustitu)en a estos elementosK
<P> y <BR>
Cuando se Buiera for+ar un final de l7nea es necesario utili+ar dos directi*as especialesK
1N
<P> para marcar un ;in de pIrra;o
<BR> para un Jnico reorno de carro
1a diferencia entre ambas es Bue la separaci(n de l7neas Bue pro*oca WPX es algo ma)or
Bue la de WB'X% para Bue los p$rrafos se distingan bien entre s7. 1as dos directi*as mencionadas
se sit,an en el punto en Bue se Buiere poner la separaci(n.
>inguna de las dos directi*as se cierra% s(lo constan de una marca inicial. Por eQemploK
<HTML>
<HEAD>
<TITLE>(l eKemplo 7$"- mas sencilloL6$)$-(M
</HEAD>
<BODY>
<H1>(sa es una cabecera de nivel uno</H1>
/ienvenido al mundo 7$"-2
(se es el primer pIrra;o2L3MN ese es el segundo.<BR>
Fin de la pagina
</BODY>
</HTML>
Se trata del m7nimo documento de H"M..
<PRE>
El teCto preformateado 3etiBueta 9pre:5 se aplica cuando se Buiere Bue en la presentaci(n
final del documento se respeten los espacios ) retornos de carro Bue -a)amos puesto en el teCto
fuente. &dem$s% se utili+ar$ un tipo de letra de espaciado fiQo% parecido al de una m$Buina de
escribir% m$s peBueUo Bue el del teCto normal. Este estilo de teCto puede ser adecuado% por
eQemplo% para una tabla numrica sencilla.
<BLOCKQUOTE>
1/
Indica Bue un teCto es una cita de otra fuente. Se suele representar con tabulaciones a
i+Buierda ) derec-a ) en cursi*a.
<HR>
1a directi*a 9HR: sit,a en el documento una l7nea -ori+ontal de separaci(n. Este
elemento utili+a una serie de tamaUos Bue se indican mediante la opci(n 9HR +I?E@1:; 9HR
+I?E@:; 9HR +I?E@1: etc. ECisten seis tamaUos de .'.

Marcad! tip!)r6$ic! de $rases
Oeamos c(mo se marcan topogr$ficamente las frasesK
1.Ne)rita * c(rsiva
Se pueden dar tambin los atributos m$s tradicionales% negrita ) cursi*aK
9B:Esto en negrita9<B: ) 9I:esto en cursi*a9<I:% Esto en negrita ) esto en cursi*a
.9"":
Se puede utili+ar un tipo de letra similar al de una m$Buina de escribirK
<TT>"Iquina de escribir</TT>
6$Buina de escribir
9CEN"ER:
Para centrar teCto 3o% en general% cualBuier cosaK un gr$fico% por eQemplo5 se usa la directi*a
9CEN"ER:A
<CENTER>,niversidad de +avarra</CENTER>
1
Caracteres especiales.: En el desarrollo del mtodo de trabaQo se -ace referencia a las
eCistencia de una serie de caracteres especiales del lenguaQe .;61. Esos caracteres se refieren a
las *ocales acentuadas ) a la letra VUV. ECisten tambin ciertas limitaciones relati*as al uso de
algunos s7mbolos Bue significan algo en .;61% como el de menor Bue 3W5 o el signo ingls de
and 3llamado ampersandK J5.
Se tratar$ primero el caso m$s sencillo. ECiste una ra+(n e*idente Bue impide Bue se
pueda escribir ciertos s7mbolos directamente en un teCto .;61% como por eQemplo el W% dic-os
s7mbolos tienen un significado en .;61% ) es necesario diferenciar claramente cu$ndo poseen
ese significado ) cuando se Buiere Bue apare+can literalmente en el documento final. Por
eQemplo% W indica el comien+o de una directi*a ) por ello% para Bue apare+ca en el teCto como tal
-a) Bue escribir algo Bue no d lugar a confusi(n% en este caso Jlt# los s7mbolos afectados por
esta limitaci(n ) la forma de escribirlos% se detallan a continuaci(nK
* < ("enor que)1 <
* > ("ayor que)1 &tB
* & (sHmbolo de and, o ampersand)1 &!"#;
* $ (comillas dobles)1 &%&'tB
* $ (inerrogaciOn de aperura)1 &(%&)*tB SOlo acepan ese sHmbolo los navegadores a
parir de la versiOn ?292
Es decir% Bue para escribir 9B: en el teCto H"M. original se debe poner CltDC5(!tDC)tD
El otro caso especial se da cuando en un teCto .;61 se Buiere escribir una eUe. ECisten
dos formas de -acerlo. 1a primera% Bue es a la Bue obliga el est$ndar de .;61% consiste en
utili+ar entidades como las Bue antes se presentaron para escribir ciertos s7mbolos. 1as entidades
comien+an siempre con el s7mbolo J% ) terminan con un punto ) coma 3#5. Entre medias *a un
identificador del car$cter Bue se Buiere Bue escribir. 1as entidades necesarias en nuestro idioma
sonK
* +, &!!-&t);
10
* ., &&&"l;
* /, &)!-&t);
*0, &U&"l;
* 1, &(!-&t);
*2, &3t(l4);
* 5, &'!-&t);
*6, &7181;
* 9, &&!-&t);
* :, &71;1;
1as *ocales acentuadas se identifican aUadiendo el sufiQo VacuteV a la *ocal sin acentuar
3puesto Bue se trata de un acento agudo5. Para la ( con diresis ) la eEe se usan uml tras una ( )
tilde detr$s una ene% respecti*amente. Para utili+ar la opci(n "Y% se utili+a la opci(nK "r.
.as .istas.
.;61 permite reali+ar listados numerados% sin numerar ) listas para definir.
1..istas sin n('erar
Para crear una lista sin numerar
1. Se empie+a escribiendo un tag de apertura de lista 9,.:
=. Se escribe el tag 9.I: seguido por el trmino Bue se Buiera numerar 3no es necesario la
etiBueta de cierre5.
A. Se termina con el tag de cierre de la lista 9<,.:
.e aBu7 una lista de dos trminosK
9,.:
El resultado esK
9.I:Facultades
1E
Facultades
9.I:Institutos
Institutos
9<,.:
..istas n('eradasA una lista numerada 3tambin llamada lista ordenada% de a-7 la
denominaci(n de la marca5 es idntica a una lista sin numerar% eCcepto Bue se usa9O.: en lugar
de 9,.:. "elante de los trminos se pone la marcaW1IX% Bue es la misma Bue se utili+a en las
otras listas.
El siguiente c(digo H"M.K da el siguiente formatoK
9O.:9.I:Facultad de "erec-o
1. Facultad de "erec-o
9.I:Facultad de 6edicina
=. Facultad de 6edicina
9.I:Facultad de Ciencias9<O.:
A. Facultad de Ciencias
.as listas de de$inici!nes
Una lista de definici(n consiste en trminos alternati*os 3abre*iados como ";5 ) una
definici(n 3abre*iada como ""5. >ormalmente los broFsers del Feb dan la definici(n en una
nue*a l7nea.
.e aBu7 un eQemplo de una lista de definici(nK
94.:
94": 9B:H"M.9<B:A
944:H*per"e%t MarF(p .an)(a)e 22 H"M. es (n +GM. 4"4. En trminos pr$cticos% es
una colecci(n de estilos 3indicados por tags 3marcas5 de mar2up5 Bue definen los componentes
*ariados de un documento World Wide Web.
19
9<4.:
El resultado esK
H"M.A H*per"e%t MarF(p .an)(a)e 22 H"M. es (n +GM. 4"4. En trminos
pr$cticos% es una colecci(n de estilos 3indicados por tags 3marcas5 de mar2up5 Bue definen los
componentes *ariados de un documento World Wide Web. ;anto la marca 94": como la marca
944: pueden contener m,ltiples p$rrafos 3basta con separarlos con las marcas indicati*as de
p$rrafo 9P: 5% listas% o cualBuier otra informaci(n en la definici(n. Comentarios.: Para incluir un
comentario en un documento .;61% es decir% una aclaraci(n Bue no aparece en la presentaci(n
final del documento% se encierra el teCto Bue formar$ el comentario entre los s7mbolos 9G22
c!'entari! 22:.
Enlaces * )r6$ic!s.
&dem$s de los muc-os estilos ) capacidades de presentaci(n Bue ofrece .;61 para
estructurar el documento en s7% eCisten *arias directi*as Bue permiten definir relaciones entre
diferentes documentos ) estructurar todo un conQunto de documentos para crear una unidad
l(gica. 1a facilidad para definir este tipo de enlaces es una de las ra+ones de la potencia )
*ersatilidad de .;61.
1os enlaces en .;61 se eCpresan insertando entre la directi*a 9A: el obQeto 3Bue puede
ser un fragmento de teCto o un gr$fico5 Bue *a)a a ser*ir como anclaQe para el enlace. Por
eQemplo% si se marca con 9A: un gr$fico% cuando en el documento final se pulse con el rat(n
sobre dic-o gr$fico se saltar$ al obQeto referenciado en el enlaceK otro documento% un *7deo
musical% o cualBuier imagen.
Z@u es un U'1[ .: Para especificar de manera uniforme el obQeto al Bue apunta el
enlace% se utili+a una forma estandari+ada Bue se denomina U'1 3Uniform 'esource 1ocator% es
decir% 1ocali+ador Uniforme de 'ecursos 5. Un U'1 est$ formado de la siguiente maneraK
es5(e'aA<<'a5(ina<r(ta.
=!
El esBuema es un nombre Bue identifica el tipo de ser*icio Bue *a a proporcionarse en el
destino del enlace. 1a ra+(n de esta aparente complicaci(n es Bue el WWW pretende unificar el
acceso a ser*icios de informaci(n Bue pre*iamente eran incompatibles entre s7% como $tp;
)!p=er ! telnet. El esBuema m$s utili+ado es -ttp% correspondiente al propio WWW 3es decir%
cualBuier referencia a un documento .;61 deber7a comen+ar con -ttpK??5. 4tros esBuemas mu)
frecuentes son ftp% telnet% gop-er o Fais.
1a m$Buina ) la ruta sir*en para locali+ar el obQeto al Bue apunta el enlace. 1a m$Buina
es la identificaci(n del ser*idor en el cual est$ situado el obQeto al Bue apunta el enlace. 1a ruta
es el nombre del arc-i*o Bue contiene el documento en concreto% inclu)endo el nombre del
subdirectorio en el Bue se encuentra. 1a estructuraci(n -abitual de la informaci(n en un ser*idor
de WWW suele empe+ar% con una p$gina de bien*enida 3-ome page5 Bue podr7a compararse con
la portada de un peri(dico o re*ista. El resto de la informaci(n Bue se puede encontrar en un
ser*idor de WWW se distribu)e a partir de ese directorio ra7+ en distintos subdirectorios )
arc-i*os.
.!s enlaces.
Para definir un enlace es necesario marcar con la directi*a 9A: el obQeto del cual *a a
partir dic-o enlace. "ic-a directi*a debe incluir el par$metro HREH@B,R.B para especificar el
destino del enlace. Es decir% Bue antes del obQeto elegido se debe abrir con 9A HREH@B,R.B:%
) despus cerrar con W?&X. Por eQemplo% si se Buiere Bue el teCto Vpulse aBu7 para *isitar la
Uni*ersidad de >a*arraV condu+ca a la -ome page de la Uni*ersidad de >a*arra% se deber$
escribir en el teCto .;61K
9A HREH@B=ttpA<<777.(nav.es<B:P(lse a5(- para visitar la ,niversidad de Navarra9<A:
=1
En la pantalla aparecer$ un teCto subra)ado de color a+ul: es el est$ndar: Bue indica la
eCistencia de un lin2 o de -iperteCto Bue lle*a a la direcci(n Bue se indica. Enlaces dentro de la
misma p$gina.: & *eces% en el caso de documentos mu) eCtensos puede interesar dar un salto
desde una posici(n a otra determinada. Para esto% lo Bue antes se -a llamado el destino del enlace
es el sitio dentro de la p$gina al Bue se Buiere llegar.
Se sustitu)e p!r I'arca 3la palabra marca puede ser cualBuier palabra5. 1as palabras Bue
*a)an entre las etiBuetas 9A HREH@BI'arcaB: Pala/ras9<A: aparecer$n en la pantalla en
color 3en forma de -iperteCto5. Su estructura ser7aK
<A HRE<=$7"!>-!$> ?)! )l )@)"#l' 4)l )3l!-) )3 &3! #+(3! </A>
R en el sitio eCacto a donde se Buiere saltar% se debe poner la siguiente etiBuetaK
<A NAME=$"!>-!$>E3l!-) 4)3t>' 4) &3! #+(3! </A>
Por eQemplo% si se Buiere saltar desde el principio del documento al final del documento
se coloca la siguiente etiBuetaK
<A HRE<=$7A(3!l$> P&l*! #!>! (> !l A(3!l</A>
@ue resulta comoK Pulsa para ir al final 3se puede comprobar c(mo salta a la pantalla
final5. R en el final del documento se pone esta otra etiBuetaK
<A NAME=$A(3!l$> </A>
Ese enlace en lugar de lle*ar a otro documento lle*a a la parte final del mismo
documento. El mismo efecto se consigue con la -erramienta V;opV. Utili+ando el tagK 9A
HREH@BIt!pB: se consigue Bue se *uel*a al principio de la p$gina.
==
.!s )r6$ic!s.
Para incluir un gr$fico en un documento .;61 se utili+a la directi*a 9IMG:. En dic-a
directi*a debe incluirse un par$metro +RC@B,R.B% con el cual se indica d(nde est$ el fic-ero
con el gr$fico concreto Bue se Buiere para el documento. Esto pone a disposici(n una gran
fleCibilidad% )a Bue se puede complementar el contenido del documento tanto con gr$ficos Bue se
encuentren disponibles en el ser*idor de WWW% como con una foto situada en un ser*idor de la
>&S& o del 6inisterio de Cultura% por eQemplo% sin Bue el lector final tenga por Bu apreciar
ninguna diferencia.
ECiste alguna limitaci(n respecto a los formatos gr$ficos Bue los programas lectores de
.;61 puede interpretar sin problemas. El formato m$s utili+ado es el MIF% Bue cualBuier
programa con capacidades gr$ficas deber7a poder mostrar directamente 36osaic ) >etscape
pueden -acerlo5. .a) un par$metro optati*o de la directi*a 9IMG: Bue sir*e para proponer un
teCto alternati*o a un gr$fico. Este teCto aparecer$ cuando se est usando para leer el .;61 un
programa sin capacidades gr$ficas 3por eQemplo 1)nC% Bue s(lo trabaQa con teCto5. Se trata de
alt@Bte%t!B. Con*iene utili+arlo cuando los gr$ficos sir*en como origen a -iperenlaces% porBue
si no los programas sin capacidades gr$ficas no podr$n mostrar los enlaces establecidos.
Para colocar en este punto del documento una imagen Bue est$ en el mismo subdirectorio
Bue este manual% en el fic-ero fotografia.gif% se escribeK
<IMB CRC=$URL/A't'>!A(!.(A$ ><P>
1os documentos de informaci(n gr$fica deben optimi+arse para la *isuali+aci(n% es decir%
-a) Bue minimi+ar la tabla de colores con el fin de disminuir el tamaUo Bue ocupan las im$genes.
;ags adicionales.: 1o anterior es suficiente para producir documentos .;61 b$sicos. Para crear
documentos mas compleQos% el .;61 tiene tags para *arios tipos de listas% secciones
pre*iamente creadas% citas eCtensas% tablas% mapas% formularios ) otras utilidades. Esto entrar7a
dentro de un ni*el m$s ele*ado en el aprendi+aQe del lenguaQe .;61.
=A
,n e3e'pl! '6s lar)!
<HTML>
<HEAD>
<TITLE>E@)"#l' "!* l!>' </TITLE>
</HEAD>
<BODY>
<H1>U3 )@)"#l' "!* l!>' </H1>
(se es un documeno 7$"- sencillo2 (se es el primer #&!!-&t);>>!A'. <P>
(se es el segundo pPaacueBrra;o, con e;ecos especiales2 (sa es una
palabra en <I>-&>*(D!</I>2 (sa es una palabra en <B>3)>(t!</B>2
H) !%&&(!-&t)B una imagen BI<,<P>
<IMB CRC=$Ett#,//FFF.&3!D.)*/(-'3'*/-!G)H!.(A$>. <P>
(se es el ercer pPaacueBrra;o, que demuesra links2 7e aqui un
5ypere: de la palabra L.
7R(FQR5p166www2unav2es6un6in;ounav25mlRM.cerca de la ,niversidad de
+avarraL6.M a un documeno llamado1Rin;ounav25mlR2 L3M
<H2>U3! -!G)-)>! 4) *)&34' 3(D)l </H2>
H) !%&&(!-&t)B una secciPoacueBn de e:o que se debe mosrar como una
;uene de anc5o ;iKo1L3M
<PRE>C'3 4()H -!&3t(l4);'3)* #'> G!34!,
vieno en popa a oda vela
no cora el mar sino vuela
&3 D)l)>' G)>!3t&(!-&t);3</PRE>
<HR>
Fin del documeno
</BODY>
L67$"-M
=N
,n E3e'pl!.
L7$"-M
L7(.&M
L$)$-(M(Kemplo mas largo L6$)$-(M
L67(.&M
L/%&NM
L78M,n eKemplo mas largo L678M
(se es un documeno 7$"- sencillo2 (se es el primer
pPaacueBrra;o2 L3M
(se es el segundo pPaacueBrra;o, con e;ecos especiales2 (sa es
una palabra en L)McursivaL6)M2 (sa es una palabra en
L/MnegriaL6/M2
7e aquPiacueB una imagen 4)F1L3M
L)"4 SRCQR5p166www2unav2es6iconos6cabeAa2gi;RM2 L3M
(se es el ercer pPaacueBrra;o, que demuesra links2 7e aqui un
5ypere: de la palabra L.
7R(FQR5p166www2unav2es6un6in;ounav25mlRM.cerca de la ,niversidad
de +avarraL6.M a un documeno llamado1Rin;ounav25mlR2 L3M
L7>M,na cabecera de segundo nivel L67>M
7e aquPiacueB una secciPoacueBn de e:o que se debe mosrar como
una ;uene de anc5o ;iKo1L3M
L3R(MCon dieA caPnildeBones por banda,
vieno en popa a oda vela
no cora el mar sino vuela
un velero berganPiacueBnL63R(M
L7RM
Fin del documeno
L6/%&NM
L67$"-M
=/
1.1..2 "a/las en H"M.
1as tablas son una de las -erramientas m$s ,tiles de Bue disponemos en .;61% )a Bue
nos *an a permitir en cierto modo VmaBuetarV nuestro documento% a)ud$ndonos a situar dentro
del mismo los diferentes elementos Bue lo componen% siendo esta la ,nica forma co-erente Bue
-ab7a antes de la introducci(n de las .oQas de Estilo ) de las etiBuetas.
Es por esta facilidad a la -ora de organi+ar con tablas nuestras p$ginas el Bue el 99T de
las Bue *eamos en Internet las usen% aunBue muc-as *eces no las *eamos directamente porBue
est$n VocultasV. Pero no todo es coser ) cantar a la -ora de trabaQar con tablas% )a Bue a *eces
act,an un poco Va su aireV% por lo Bue podemos llegar a desesperarnos al pasar *arias -oras
intentando Bue una tabla se comporte como nosotros Bueremos.
Esto es debido a Bue en el origen del lenguaQe .;61 las tablas fueron diseUadas por
cient7ficos de las uni*ersidades para contener ) organi+ar informaci(n% no como una a)uda para
el diseUo gr$fico de la p$gina% )a Bue en esa poca el lenguaQe ) las p$ginas Feb se conceb7an
como una forma de transmitir teCto plano% en monitores monocromos ) de poca resoluci(n% ) no
fu -asta el posterior desarrollo de Internet% de la WWW ) de la tecnolog7a de ordenadores
personales a*an+ados cuando se empe+( a tener en cuenta la importancia del diseUo *isual de
una p$gina Feb como un medio global para transmitir no solo teCto plano% si no tambien
contenidos gr$ficos ) multimedia.
Para solucionar estas carencias -ace falta conocer bien todas las etiBuetas ) atributos de
Bue disponemos para la creaci(n de tablas% as7 como unos cuantos truBuillos Bue *eremos m$s en
el desarrollo de este cap7tulo.
Estr(ct(ra de (na ta/la
1as tablas est$n formadas por filas% columnas ) celdas. Cada espacio -ori+ontal
continuado es una fila ) cada espacio *ertical continuado esuna columna% definindose una celda
como el espacio formado por la intersecci(n de una fila ) una columna.
=
columna 8 columna > columna ?
;ila 8
celda(8,8) celda(8,>) celda(8,>)
celda(>,8) celda(>,>) celda(>,?)
celda(?,8) celda(?,>) celda(?,?)
fila =
fila A
1o primero Bue tenemos Bue -acer cuando Bueremos introducir una tabla es decirle al
na*egador d(nde empie+a ) d(nde acaba esta# esto se consigue mediante la etiBueta de inicio
W;&B1EX ) su correspondiente de cierre W?;&B1EX.
Seguidamente debemos decirle cuantas filas *amos a tener en nuestra tabla% cosa Bue -acemos
con las etiBueta de inicio de fila W;'XX ) su correspondiente de cierre de filaW?;'X% por lo Bue
deberenos insertar una pareQa de etiBuetas por cada fila Bue Bueramos Bue tenga la tabla.
Por ,ltimo% dentro de cada fila deberemos indicar cuantas celdas *a a -aber% Bue inicialmente
deben corresponderse con el n,mero de columnas Bue deseemos tenga la tabla. Esto se consigue
mediante las pareQas de etiBuetas W;"X ) W?;"X. "e esta forma% ) siguiendo con nuestra tabla
inicial de EQemplo % el esBuema de etiBuetas ser7a el siguienteK
L$./-(M
L$RM
L$&M222L6$&M L$&M222L6$&M L$&M222L6$&M
L$&M222L6$&M L$&M222L6$&M L$&M222L6$&M
L$&M222L6$&M L$&M222L6$&M L$&M222L6$&M
L6$RM
L$RM L6$RM
L$RM L6$RM
L6$./-(M
Este es el esBuema general de toda tabla simple% Bue traducido a c(digo .;61 Buedar7a
de la formaK
L$./-(M
L$RM
L$&M celda(8,8) L6$&M
L$&M celda(8,>) L6$&M
L$&M celda(8,?) L6$&M
L6$RM
L$RM
L$&M celda(>,8) L6$&M
L$&M celda(>,>) L6$&M
L$&M celda(>,?) L6$&M
L6$RM
L$RM
L$&M celda(?,8) L6$&M
L$&M celda(?,>) L6$&M
L$&M celda(?,?) L6$&M
=0
L6$RM
L6$./-(M
1a cantidad de celdas debe ser el mismo en cada uno de las filas% para Bue la tabla tenga
la misma cantidad de columnas. Se debe definir la cantidad de columnas Bue *a a tener la tabla
mediante el n,mero de celdas Bue definamos en la primera fila.
1a *isuali+aci(n de una tabla se genera autom$ticamente a partir de las filas ) las
columnas definidas. Sin embargo para un na*egador no es f$cil interpretar a tiempo como debe
aparecer la tabla. Primero tiene Bue leer la tabla completa antes de poder *isuali+ar alguna cosa.
En caso de tablas mu) grandes eso puede conducir a Bue en la pantalla aparecen espacios *acios
desagradables mientras Bue la p$gina se carga. .;61 N.! ofrece una nue*a sintaCis para
comunicarle al na*egador al principio de la tabla cuantas columnas ella tiene.
"e tal manera el na*egador puede cargar la tabla muc-o m$s rapido% o sea Bue una parte
de la tabla es *isuali+ada antes de Bue la totalidad de la tabla -a)a sido le7da. Esto se debe
implementar mediante el atributo C41M'4UP. &dem$s de estas etiBuetas b$sicas eCisten otras
*arias Bue nos *an a permitir adaptar la tabla a nuestras necesidades. R cada etiBueta posee
adem$s *arios atributos% Bue *an a modificar la forma en Bue se comportan. Bue empe+aremos a
*er.
1.1.1.2 H!r'(lari!s en H"M..
1os formularios son una caracter7stica del est$ndar .;61 3lenguaQe de marcas
-iperteCtual5 Bue permite a los autores colectar informaci(n pro*ista por los *isitantes. Estos
formularios pueden ser ,tiles para recolectar informaci(n personal% informaci(n de contacto%
preferencias u opiniones% o cualBuier tipo de entrada por parte del *isitante Bue el autor pueda
necesitar. En este tutorial eCploraremos todas las caracter7sticas disponibles para construir
formularios en documentos .;61.
Un formulario puede ser insertado en un documento .;61 mediante el tag .;61 form
el cual act,a como contenedor para todos los elementos de entrada 3input5. ;oda la informaci(n
recolectada por un formulario puede ser entregada a un agente procesador Bue es usualmente
=E
especificado en el atributo VactionV 3el cual puede ser suprimido mediante el uso de Da*aScript5.
1o Bue el agente procesador -ace con la informaci(n ) c(mo la maneQa es un tema Bue no ser$
tratado en este sitio dado Bue no pertenece al est$ndar .;61. Para maneQar datos de un
formulario debes usar un script del lado ser*idor.
;ambin puedes necesitar especificar c(mo la informaci(n ser$ en*iada en el *alor del
atributo Vmet-odVK VpostV 3los datos son adQuntados al cuerpo del formulario5 o VgetV 3los datos
son adQuntados a la U'1 3locali+ador uniforme de recursos55. Se supone Bue el agente
procesador conoce ) maneQa el mtodo de en*7o del formulario.
"e esta forma% un formulario simple puede tener la siguiente declaraci(nK
<form method="post" action="manejador.php">
...Controles...
</form>

Elementos de entrada (input
1a ma)or7a de los elementos de entrada son *isuales ) pueden interactuar con el usuario.
Su uso depende del tipo de control ) tambin del tipo de informaci(n Bue pueden recolectar. 1os
elementos de entrada de un formulario pueden ser definidos usando tres tagsK el tag .;61 input%
el tag .;61 button% el tag .;61 select ) el tag .;61 teCtarea. En este tutorial di*idiremos los
controles de acuerdo con su funcionalidad. >otaK como las descripciones ) atributos de cada
control son tratados bre*emente en este tutorial% por fa*or refirete a dic-os tags para m$s
informaci(n.
4bser*a Bue el atributo VnameV de cada control ser$ el nombre utili+ado para identificar
los datos para el agente procesador% ) el *alor depender$ de la naturale+a del control 3algunas
*eces% como en las casillas de *erificaci(n o botones radio% ser$ el contenido del atributo
V*alueV5.
Entrada de te%t!
ECisten tres tipos de entradas de teCto Bue pueden recolectar informaci(n teCtual como
nombres% comentarios% etc.
=9
Entrada de te%t! de l-nea
Este control recopila informaci(n teCtual en una sola l7nea% lo Bue significa Bue el
usuario no podr$ utili+ar la tecla VenterV para ir a la siguiente l7nea. Este control es
insertado en documentos .;61 usando el tag .;61 input con el *alor VteCtV para el
atributo Vt)peV.
L;orm me5odQRposR
acionQRmaneKador2p5pRM
LpM)ngresa e:o1 Linpu
nameQRe:oenradaR ypeQRe:R 6ML6pM
L6;ormM
)ngresa e:o1
El *alor pasado al agente procesador ser$ el teCto ingresado por el usuario% o sea el
contenido dentro de la caQa de teCto.
Entrada de te%t! c!ntraseEa #pass7!rd&
Este control act,a eCactamente como la entrada de teCto de l7nea% con la eCcepci(n de Bue
este control VescondeV los caracteres mostr$ndolos como puntos o asteriscos para e*itar
Bue los usuarios *ean el teCto ingresado. Es com,nmente usado para el ingreso de
contraseUas.
L;orm me5odQRposR
LpM)ngresa conrasePnildeBa1 Linpu
nameQRconrasenaR ypeQRpasswordR
6ML6pM
L6;ormM
)ngresa conrasea1
El *alor pasado al agente procesador ser$ el teCto ingresado por el usuario% o sea el
contenido dentro de la caQa de teCto.
A!
Entrada de te%t! de '8ltiples l-neas
Este control permite a los usuarios ingresar teCto en una o m$s l7neas. Es insertado
utili+ando el tag .;61 teCtarea ) puede ser usado para recolectar p$rrafos% comentarios%
cartas% etc. En este tag% el contenido ser$ el *alor inicial del teCto.
L;orm me5odQRposR
LpM)ngresa us comenarios1Lbr
6MLe:area nameQRcomenariosR rowsQR>R
colsQR?9RM222$us comenarios
aquPiacueB222L6e:areaML6pM
L6;ormM
)ngresa us comenarios1
>ota Bue los atributos VroFsV ) VcolsV establecen las dimensiones de la caQa de teCto )
son reBueridos por algunos ";"s 3declaraci(n de tipo de documento5. El *alor pasado al
agente procesador ser$ el teCto ingresado por el usuario% o sea el contenido dentro de la
caQa de teCto.
Opci!nes
1os autores tambin pueden permitir a sus *isitantes escoger opciones preestablecidas de una
lista. Esto puede ser logrado usando uno de los tres controles siguientes% Bue pueden construir
diferentes tipos de listas de opciones.
Casillas de veri$icacin
1a casilla de *erificaci(n es una opci(n simple Bue puede tomar uno de dos *aloresK
VmarcadoV o VdesmarcadoV. 1as casillas de *erificaci(n pueden ser *isualmente
agrupadas como una lista de opciones% pero cada una de ellas es tratada indi*idualmente.
Este control es insertado mediante el tag .;61 input con el *alor Vc-ec2boCV para el
atributo Vt)peV.
A1
L;orm me5odQRposR
LpMSelecciona us inereses1Lbr 6M
Linpu nameQRcbipeliculasR
ypeQRc5eckbo:R
6M3elPiacueBculasLbr 6M
Linpu nameQRcbilibrosR ypeQRc5eckbo:R
6M-ibrosLbr 6M
Linpu nameQRcbiinerneR
ypeQRc5eckbo:R 6M)nerne
L6pM
L6;ormM
Selecciona us inereses1
3elHculas
-ibros
)nerne
En este caso% el *alor pasado ser$ un *alor booleano ) representar$ el estado de
*erificaci(n de la opci(n. "ependiendo del agente procesador podr7a ser Von?offV%
Vc-ec2ed?unc2ec2edV% Vtrue?falseV% etc.
B!t!nes radi!
1os botones radio funcionan en la misma forma Bue las casillas de *erificaci(n con
peBueUas diferenciasK los botones radio Bue comparten un mismo nombre conforman un
grupo de opciones donde los usuarios no pueden seleccionar m$s de una opci(n a la *e+.
Esto significa Bue cuando el usuario selecciona una opci(n% el resto es autom$ticamente
deseleccionado.
L;orm me5odQRposR
LpMSelecciona us inereses1Lbr 6M
Linpu nameQRineresesR ypeQRradioR
valueQRrbipeliculasR
6M3elPiacueBculasLbr 6M
valueQRrbilibrosR 6M-ibrosLbr 6M
valueQRrbiinerneR 6M)nerne
L6pM
L6;ormM
Selecciona us inereses1
3elHculas
-ibros
)nerne
Para los botones radio el *alor pasado al agente procesador es el contenido del atributo
V*alueV% lo Bue significa Bue una lista de opciones con *arias opciones s(lo pasar$ un
*alor.
A=
.istas
Estas lista pueden ser insertadas usando tres tagsK el tag .;61 select 3contenedor
principal5% el tag .;61 option 3declaraci(n de opci(n5 ) el tag .;61 optgroup 3grupo
de opciones5. Este tipo de lista puede ser usado como una lista de botones radio o como
una lista de casillas de *erificaci(n% dependiendo de la presencia del atributo VmultipleV.
L;orm me5odQRposR acionQRmaneKador2p5pRM
LpMSelecciona una sola opciPoacueBn, como
en los boones radio1Lbr 6M
Lselec nameQRenradaselecRM
Lopgroup labelQR(nradas de e:oRM
LopionM&e una sola lPiacueBneaL6opionM
LopionMConrasePnildeBaL6opionM
LopionM"ulilPiacueBneaL6opionM
L6opgroupM
Lopgroup labelQR%pcionesRM
LopionMCasillas de
veri;icaciPoacueBnL6opionM
LopionM/oones radioL6opionM
LopionM-isas selecL6opionM
L6opgroupM
L6selecM
L6pM
LpMSelecciona anas opciones como desees,
como en las casillas de veri;icaciPoacueBn
(maneniendo presionada la ecla RCrlR)1Lbr
6M
Lselec nameQRenradaselecSTR
mulipleQRmulipleRM
Lopgroup labelQR(nradas de e:oRM
LopionM&e una sola lPiacueBneaL6opionM
LopionMConrasePnildeBaL6opionM
LopionM"ulilPiacueBneaL6opionM
L6opgroupM
Lopgroup labelQR%pcionesRM
LopionMCasillas de
veri;icaciPoacueBnL6opionM
LopionM/oones radioL6opionM
LopionM-isas selecL6opionM
L6opgroupM
L6selecM
L6pM
L6;ormM
Selecciona una sola opciOn, como en los
boones radio1
Selecciona anas opciones como desees,
como en las casillas de veri;icaciOn
(maneniendo presionada la ecla RCrlR)1
Para la primera lista sin el atributo VmultipleV% el *alor pasado al agente
procesador ser$ la opci(n seleccionada% pero para el segundo eQemplo el *alor pasado ser$
una lista 3arra)5 conteniendo las opciones seleccionadas. Es por ello% Bue para las listas
con el atributo VmultipleV presente% debes agregar al nombre del control VselectV los
corc-etes 3VGIV5. El *alor indi*idual pasado en ambos casos es el contenido del atributo
V*alueV si es Bue se encuentra presente% ) en su defecto el contenido del tag.
AA
Elementos de entrada (input
B!t!nes
1os botones son ,tiles en formularios para en*iarlos% reestablecerlos o para eQecutar
funciones personali+adas. Pueden ser insertados usando el tag .;61 input 3submit% reset e
image5 o el tag .;61 button 3botones con contenido5.
B!t!nes de env-!
Este tipo de botones en*7a autom$ticamente el formulario al ser presionados. Son
insertados usando el tag .;61 input con el *alor VsubmitV para el atributo Vt)peV.
B!t!nes de reesta/leci'ient!
Este tipo de botones reestablecen los controles de un formulario a sus *alores iniciales al
ser presionados. Son insertados usando el tag .;61 input con el *alor VresetV para el
atributo Vt)peV.
B!t!nes de i'a)en
1os botones de imagen funcionan eCactamente como los botones de en*7o con la ,nica
diferencia de Bue lo los botones de imagen son mostrados *isualmente con la imagen
apuntada en el atributo VsrcV. Estos botones adem$s en*7an las coordinadas donde el clic2
-a ocurrido 3por eQemplo% para un bot(n de imagen llamado Vboton1V las coordenadas
ser$n en*iadas con el formulario como Vboton1.CV ) Vboton1.)V5. Son insertados usando
el tag .;61 input con el *alor VimageV para el atributo Vt)peV.
B!t!nes c!n c!ntenid!
1os botones con contenido pueden ser usados como botones de en*7o o de
reestablecimiento% o pueden no tener ninguna acci(n preestablecida 3dependiendo del
*alor del atributo Vt)peV5% pero s7 permiten a los autores insertar contenido dentro de
ellos. Esto dignifica Bue un tro+o de c(digo .;61 puede ser mostrado dentro del bot(n
3*7nculos% p$rrafos% teCto en negrita% im$genes% etc.5.
AN
L;orm me5odQRposR
LpMLbuon ypeQRbuonRM
(l LbMag 7$"- buonL6bMLbr 6M
permie conenido2Lbr 6M
L6buonML6pM
L6;ormM
(l t! HTML G&tt'3
permie conenido2
Entrada de arc=iv!s
1a entrada de arc-i*os puede ser utili+ada para subir arc-i*os al ser*idor. El control
muestra una caQa de teCto donde el usuario debe especificar la ubicaci(n del arc-i*o 3Bue ser$
procesada localmente por el na*egador5 Bue ser$ en*iado -acia el ser*idor. "e esta forma% los
autores pueden pedir a los *isitantes el en*7o de arc-i*os mediante la p$gina. El control
usualmente muestra un bot(n para elegir el arc-i*o *isualmente.
>ota Bue para formularios con subida de arc-i*os debes especificar el *alor
Vmultipart?form:dataV en el atributo Venct)peV del tag .;61 form.
L;orm me5odQRposR
acionQRmaneKador2p5pR
encypeQRmulipar6;orm-daaRM
LpMLinpu nameQRimagenR ypeQR;ileR
6ML6pM
L6;ormM
Eti!uetando "ontroles
1as etiBuetas de los elementos pueden -acer Bue tu p$gina se *ea meQor ) agregar una
peBueUa funcionalidad para na*egadores *isuales 3cuando un *isitante -ace clic2 en la etiBueta la
acci(n es transmitida al control asociado5% pero seguramente tendr$n muc-o sentido para
personas con discapacidades o na*egadores no *isuales. Una etiBueta establece una relaci(n
entre un control ) un tro+o de teCto 3Bue se supone -a de dar un Vt7tuloV para el control5.
1as etiBuetas pueden ser insertadas usando el tag .;61 label ) son asociadas al control
mediante el atributo VforV. Para lograr esto% el *alor del atributo VforV del tag .;61 label debe
coincidir con el *alor del atributo VidV del control.
A/
L;orm me5odQRposR
acionQRmaneKador2p5pRMLdivM
Llabel ;orQRidnombreRM+ombre1L6labelM Linpu
ypeQRe:R idQRidnombreR nameQRnombreR
6MLbr 6M
Llabel ;orQRidapellidoRM.pellido1L6labelM
Linpu ypeQRe:R idQRidapellidoR
nameQRapellidoR 6MLbr 6MLbr 6M
4PeacueBnero1Lbr 6MLinpu ypeQRradioR
idQRidmasculinoR nameQRgeneroR 6MLlabel
;orQRidmasculinoRM"asculinoL6labelMLbr 6M
Linpu ypeQRradioR idQRid;emeninoR
nameQRgeneroR 6MLlabel
;orQRid;emeninoRMFemeninoL6labelM
L6divML6;ormM
+ombre1
.pellido1
4Unero1
"asculino
Femenino
A#rupando elementos
;odos los elementos de un formulario pueden tambin ser agrupados tem$ticamente con
el tag .;61 fieldset. Este tag contiene a un grupo de controles Bue se relacionan unos con otros
de alguna forma 3por eQemplo% informaci(n personal% informaci(n laboral% informaci(n
financiera% intereses% etc.5. El t7tulo para cada grupo de elementos puede establecerse con el tag
.;61 legend Bue debe ser definido Qusto a continuaci(n del tag de apertura del fieldset% )
pro*eer un t7tulo descripti*o para el grupo de controles.
L;orm me5odQRposR acionQRmaneKador2p5pRM
L;ieldseM
LlegendM)n;ormaciPoacueBn personalL6legendM
+ombre1 Linpu ypeQRe:R nameQRnombreR
6MLbr 6M
.pellido1 Linpu ypeQRe:R nameQRapellidoR
6MLbr 6M
&irecciPoacueBn1 Linpu ypeQRe:R
nameQRpdireccionR 6MLbr 6M
$elPeacueB;ono1 Linpu ypeQRe:R
nameQRpele;onoR 6M
L6;ieldseM
L;ieldseM
LlegendM)n;ormaciPoacueBn laboralL6legendM
&irecciPoacueBn1 Linpu ypeQRe:R
nameQRldireccionR 6MLbr 6M
$elPeacueB;ono1 Linpu ypeQRe:R
nameQRlele;onoR 6M
L6;ieldseM
L6;ormM
)n;ormaciOn personal+ombre1
.pellido1
&irecciOn1
$elU;ono1 )n;ormaciOn
laboral&irecciOn1
$elU;ono1
El uso de estas agrupaciones es amplio ) depende de cada formulario espec7fico% pero
puede ser mu) ,til para los *isitantes al llenar formularios largos 3especialmente para
na*egadores no *isuales5.
A
1.J.2 Ev!l(cin del 4esarr!ll! de Aplicaci!nes We/.
Cuando ;im Berners:1ee in*ent( la Web moderna en CE'>% se pretend7a Bue sta
sir*iera como un sistema Bue -iciera posible Bue los documentos est$ticos se almacenaran en un
sistema basado en la red con *7nculos al mismo. Con el paso de los aUos% se fueron incorporando
inno*aciones ) el siguiente paso l(gico fueron los documentos 8acti*os9 Bue se generan en el
momento en Bue se solicitan% con informaci(n espec7fica del momento o del usuario. ;ecnolog7as
como CMI acti*aron este aspecto.
6$s adelante% la capacidad para generar documentos en la Web se con*irti( en algo
primordial ) la tecnolog7a e*olucion( de CMI% a Da*a% &SP )% posteriormente% a &SP.>E;.
&SP.>E; supuso un -ito en la capacidad de los desarrolladores para desarrollar aplicaciones Feb
de calidad con un paradigma de desarrollo de ser*idores ) con las meQores -erramientas de la
l7nea de productos Oisual +t(di!. 1a eCperiencia del usuario result( ser una gran barrera en las
aplicaciones Feb% donde las restricciones tcnicas e*itaban Bue stas pudieran ofrecer la misma
*ariedad de uso Bue una aplicaci(n cliente con datos locales.
El obQeto <61.ttp'eBuest% Bue 6icrosoft lan+( como parte de Internet ECplorer en
=!!!% se con*irti( en la base de la tecnolog7a as7ncrona de Da*aScript ) <61 3&D&<5 Bue -i+o
posible Bue las aplicaciones Feb pudieran proporcionar una respuesta m$s din$mica a las
entradas de los usuarios% mediante la actuali+aci(n de peBueUas porciones de una p$gina Feb sin
necesidad de *ol*er a cargar totalmente los contenidos. 1as soluciones inno*adores Bue se
generaron con &D&<% como los mapas regionales de WindoFs 1i*e% lle*aron a las aplicaciones
Feb a dar un paso adelante en su capacidad para lograr un uso similar a las aplicaciones cliente.
Sil*erlig-t representa el paso siguiente en el desarrollo del potencial de riBue+a en
utili+aci(n Bue los desarrolladores ) diseUadores de aplicaciones pueden presentar a sus clientes.
Esto se consigue permitiendo a los diseUadores eCpresar su creati*idad ) guardar su trabaQo en un
formato Bue funcione directamente en la Web. En el pasado% los diseUadores creaban un sitio Feb
) ofrec7an una utili+aci(n a los usuarios a tra*s de -erramientas Bue proporcionaban resultados
*ariados% pero el desarrollador ten7a Bue sol*entar las restricciones de la plataforma Feb siendo
capa+ de ofrecer tales resultados.
A0
En el modelo de Sil*erlig-t% los diseUadores pueden generar el tipo de utili+aci(n para el
usuario Bue desean ) eCpresarlo como <&61. Un desarrollador puede incorporar este <&61
directamente en una p$gina Feb mediante el tiempo de eQecuci(n de Sil*erlig-t. "e esta forma%
ambos pueden trabaQar m$s estrec-amente Bue antes con el fin de proporcionar una utili+aci(n
completa ) *ariada al usuario.
Como <&61 es <61% est$ basado en teCto% lo cual proporciona una descripci(n de sus
ricos contenidos f$cil de inspeccionar ) totalmente compatible con los fireFall. &unBue se
pueden usar otras tecnolog7as \como subprogramas en Da*a% &cti*e< ) Flas-\ para
implementar contenidos m$s ricos Bue ".;61% CSS ) Da*aScript% todas ellas en*7an contenidos
binarios al eCplorador. Esto resulta dif7cil de auditar% sin mencionar la dificultad de actuali+aci(n%
)a Bue para cualBuier cambio es necesario Bue la aplicaci(n se *uel*a a instalar% lo Bue no es tan
f$cil para el usuario ) podr7a pro*ocar estancamientos en las p$ginas.
Cuando se usa Sil*erlig-t ) es necesario reali+ar un cambio en el contenido enriBuecido%
se genera un nue*o arc-i*o <&61 en el ser*idor. 1a pr(Cima *e+ Bue el usuario *a)a a la
p$gina% se descargar$ este <&61 ) se actuali+ar$ la eCperiencia sin ninguna reinstalaci(n.
En el n,cleo de Sil*erlig-t est$ el m(dulo de meQora del eCplorador Bue genera <&61 )
ofrece los gr$ficos resultantes en la superficie del eCplorador. Se trata de una descarga peBueUa
3menos de = 6B5% Bue se puede instalar cuando el usuario se encuentra con un sitio con
contenido de Sil*erlig-t. Este m(dulo eCpone el marco de trabaQo sub)acente de la p$gina
<&61 a los desarrolladores de Da*aScript% de forma Bue se -ace posible la interacci(n con el
contenido en la p$gina )% por tanto% el desarrollador puede% por eQemplo% escribir controladores de
e*entos o manipular los contenidos de la p$gina <&61 mediante el c(digo de Da*aScript.
AE
Con la introducci(n de Internet ) del Web en concreto% se -an abierto infinidad de
posibilidades en cuanto al acceso a la informaci(n desde casi cualBuier sitio. Esto representa un
desaf7o a los desarrolladores de aplicaciones% )a Bue los a*ances en tecnolog7a demandan cada
*e+ aplicaciones m$s r$pidas% ligeras ) robustas Bue permitan utili+ar el Web.
&fortunadamente% tenemos -erramientas potentes para reali+ar esto% )a Bue -an surgido nue*as
tecnolog7as Bue permiten Bue el acceso a una base de datos desde el Web% por eQemplo% sea un
mero tr$mite. El ,nico problema es decidir entre el conQunto de posibilidades la correcta para
cada situaci(n.
El *ieQo CMI -a cumplido con el prop(sito de aUadir interacti*idad a las p$ginas Web
pero sus deficiencias en el desarrollo de aplicaciones ) en la escalabilidad de las mismas -a
conducido al desarrollo de &PIs espec7ficos de ser*idor como &cti*e Ser*er Pages% &SP% ) P.P%
Bue son m$s eficientes Bue su predecesor CMI.
Para apro*ec-ar el potencial de estas tecnolog7as ) ofertar una soluci(n de ser*idor m$s
eCtensible ) portable% Sun -a desarrollado la tecnolog7a llamada ser*let. 1os ser*lets Da*a son
mu) eficientes% debido al esBuema de t-reads en el Bue se basan ) al uso de una arBuitectura
est$ndar como la DO6% Da*a Oirtual 6ac-ine.
4tra nue*a tecnolog7a *iene a sumarse a las Bue eCtienden la funcionalidad de los
ser*idores Web% llamada Da*a Ser*er ? Pages% DSP. 1os DSP permiten Quntar .;61% aplicaciones
Da*a% ) componentes como las Da*a Beans creando una p$gina Web especial Bue el ser*idor Web
compila din$micamente en un ser*let la primera *e+ Bue es llamada.
K(L es la We/ .M?
1a Web =.! es la representaci(n de la e*oluci(n de las aplicaciones tradicionales -acia
aplicaciones Feb enfocadas al usuario final. El Web =.! es una actitud ) no precisamente una
tecnolog7a. Cuando el Feb inici(% nos encontr$bamos en un entorno est$tico% con p$ginas en
.;61 Bue sufr7an pocas actuali+aciones ) no ten7an interacci(n con el usuario.
A9
1a Web =.! es la transici(n Bue se -a dado de aplicaciones tradicionales -acia
aplicaciones Bue funcionan a tra*s del Feb enfocadas al usuario final. Se trata de aplicaciones
Bue generen colaboraci(n ) de ser*icios Bue reemplacen las aplicaciones de escritorio. ;odo
inici( cuando "ale "oug-ert) de 4]'eill) 6edia utili+( este trmino en una conferencia en la
Bue comparti( una llu*ia de ideas Qunto a Craig Cline de 6edia 1i*e ? en la Bue -ablaba del
renacimiento ) e*oluci(n de la Feb.
Constantemente estaban surgiendo nue*as aplicaciones ) sitios con sorprendentes
funcionalidades. R as7 se dio la pauta para la Web =.! conference de =!!N. Esta conferencia no
solo fue eCitosa sino Bue )a tu*o seguimiento en la Web =.! Conference del =!!/ celebrada en
4ctubre. En la c-arla inicial del Web Conference se -abl( de los principios Bue ten7an las
aplicaciones Web =.!K
1a Feb es la plataforma 1a informaci(n es el procesador Efectos de la red mo*idos por
una arBuitectura de participaci(n. 1a inno*aci(n surge de caracter7sticas distribuidas por
desarrolladores independientes. El fin del c7rculo de adopci(n de softFare 38Ser*icios en beta
perpetuo95 1a Web =.! con eQemplos 1a forma m$s f$cil de comprender lo Bue significa la Web
=.! es a tra*s de eQemplos. Podemos comparar ser*icios Feb Bue marcan claramente la
e*oluci(n -acia el Web =.!K
We/ 1.M : We/ .M
"oubleclic2 ^ Moogle &d Sense ? 3Ser*icios Publicidad5 4foto ^ Flic2r 3Comunidades
fotogr$ficas5 &2amai ^ Bit ;orrent ? 3"istribuci(n de contenidos5 mpA.com ^ >apster
3"escargas de m,sica5 Britannica 4nline ^ Wi2ipedia 3Enciclopedias5 Sitios personales ^
Blogs 3P$ginas personales5 Especulaci(n con dominios ^ 4ptimi+aci(n en motores de b,sBueda
Page *ieFs ^ Cost per clic2 C6Ss ^ Wi2is 36aneQo de contenidos5 Categor7as?"irectorios ^
;agging
N!
Z@u tecnolog7as apo)an a la Web =.![ El Web =.! no significa precisamente Bue eCiste
una receta para Bue todas nuestras aplicaciones Feb entren en este esBuema. Sin embargo%
eCisten *arias tecnolog7as Bue est$n utili+$ndose actualmente ) Bue deber7amos de eCaminar con
m$s cuidado en busca de seguir e*olucionando Qunto al Feb.
Al)(nas tecn!l!)-as 5(e dan vida a (n pr!*ect! We/ .MA
;ransformar softFare de escritorio -acia la plataforma del Feb. 'espeto a los est$ndares
del <.;61. Separaci(n de contenido del diseUo con uso de -oQas de estilo. Sindicaci(n de
contenidos. &QaC 3&sincronical Qa*ascript and Cml5. Uso de Flas-% FleC o 1a+lo. Uso de 'ub) on
'ails para programar p$ginas din$micas. Utili+aci(n de redes sociales al maneQar usuarios )
comunidades. "ar control total a los usuarios en el maneQo de su informaci(n.
Pro*eer & Pis ? o <61 para Bue las aplicaciones puedan ser manipuladas por otros.
Facilitar el posicionamiento con U'1 sencillos. ZEn Bu nos sir*e la Web =.![ El uso de el
trmino de Web =.! est$ de moda% d$ndole muc-o peso a una tendencia Bue -a estado presente
desde -ace alg,n tiempo. En Internet las especulaciones -an sido causantes de grandes burbuQas
tecnol(gicas ) -an -ec-o fracasar a muc-os pro)ectos. &dem$s% nuestros pro)ectos tienen Bue
reno*arse ) e*olucionar.
El Web =.! no es precisamente una tecnolog7a% sino es la actitud con la Bue debemos
trabaQar para desarrollar en Internet. ;al *e+ all7 est$ la refleCi(n m$s importante del Web =.! )
como los Febmasters deber7an de prepararse. Ro )a esto) trabaQando en reno*ar ) meQorar
algunos pro)ectos% no por Bue busBue etiBuetarlos con nue*as *ersiones% sino por Bue creo
firmemente Bue la ,nica constante debe ser el cambio% ) en Internet% el cambio debe de estar
presente m$s frecuentemente.
N1
1.N H!3as de Estil! en Cascada e Intr!d(ccin al OM..
C!ncept!s B6sic!s.
$%or !u&'
1as -oQas de estilo *ienen a intentar *ol*er a separar en un documento el estilo l(gico del
estilo f7sico% deQando este ,ltimo en bloBues de definici(n de estilos separados de la estructura
del documento. CSS son las siglas de VCascade St)leS-eetV. Se trata de una especificaci(n sobre
los estilos f7sicos aplicables a un documento .;61% ) trata de dar la separaci(n definiti*a de la
l(gica 3estructura5 ) el f7sico 3presentaci(n5 del documento.
Estilos.
El estilo l(gico se refiere a la l(gica del documentoK cabeceras% p$rrafos% ... no se
preocupa de la apariencia final% sino de la estructura del documento. Por el contrario% el estilo
f7sico no se preocupa de la estructura del documento% sino por la apariencia finalK p$rrafos con un
cierto tipo de letra% tablas con un determinado color de fondo% ...
1a finalidad de las -oQas de estilo es crear unos estilos f7sicos% separados de las etiBuetas
.;61 3en lugar de como par$metros de las etiBuetas5% ) aplicarlos en los bloBues de teCto en los
Bue se Buieran aplicar. Estos estilos podr$n ser modificados en algunas ocasiones desde
Da*aScript% ) esto empie+a a darnos un poco m$s de interacti*idad.
Capas.
Por otra parte% tenemos las capas% Bue *ienen a darnos la soluci(n al problema de poner
elementos Qusto en la posici(n Bue Bueramos% e*it$ndonos tener Bue -acer artificios para obtener
el resultado buscado. Una capa ser$ una parte m$s del documento Bue puede ser situada en
cualBuier posici(n del mismo% consiguiendo Bue se solape sobre algunos elementos si es lo Bue
necesitamos% adecuando sus m$rgenes ) otras propiedades a lo Bue Bueramos -acer...
Aplicacin directa en eti5(etas
;enemos *arias posibilidades para definir un estiloK especificarlo directamente en la
etiBueta en la Bue Bueremos usarlo% definirlo aparte ) aplicarlo en las etiBuetas Bue Bueramos% o
N=
definir estilos globales para las etiBuetas 3Bue podr$n ser cambiados en las Bue no se desee
aplicarlos5.
Para aplicar un estilo a una etiBueta concreta% usaremos la sintaCisK
<)t(%&)t! CTYLE=$#>'#()4!41,D!l'>;...;#>'#()4!4N,D!l'>$> ... </)t(%&)t!>
EtiBueta es la etiBueta de .;61 en la Bue Bueremos dar una apariencia concreta 3WPX%
WBX% WIX% ...5. S;R1E es el par$metro Bue indica Bue *amos a aplicar el estilo definido a
continuaci(n a la etiBueta en la Bue se encuentra. 1a definici(n del estilo son pares
propiedadK*alor separados por punto ) coma. Propiedad ser$ la caracter7stica de la etiBueta Bue
Bueramos modificar 3el color% el tamaUo de la fuente% el tipo de letra% ...5 ) *alor es el *alor Bue
Bueremos darle 3color negro% E puntos de tamaUo de letra% ...5. Por eQemplo% si tenemos un teCto
en negrita ) Bueremos Bue salga con un tamaUo de letra 1N ) en color roQo% -aremosK
L! 3)>(t! %&) D)"'* <B CTYLE=$A'3tI*(H),1J#t;-'l'>,>)4$>)* "+* >!34) K )*t+ )3 >'@'</B>.
cuyo efecto es: La negrita que vemos es ms grande y est en rojo.
Rede$inicin de eti5(etas.
Suele ocurrir es Bue Bueremos definir estilos Bue se apliBuen a todas las etiBuetas del
documento% es decir% Bueremos Bue todo el documento tenga un cierto tipo de letra% Bue las tablas
tengan otro% Bue las cabeceras tengan un color determinado% para ello% definiremos estilos
globales por medio de la etiBueta LS$N-(M ... L6S$N-(M como sigueK
<CTYLE TYPE=$t)Lt/-**$>
<MII
Et(%&)t!1N Et(%&)t!2 , O#>'#()4!41,D!l'>P
Et(%&)t!3 , O#>'#()4!41,D!l'>;...;#>'#()4!4C,D!l'>P
Et(%&)t!J , O#>'#()4!41,D!l'>;...;#>'#()4!4T,D!l'>P
.Cl!*)1 , O#>'#()4!41,D!l'>;...;#>'#()4!4T,D!l'>P
//II>
</CTYLE>
Podemos aplicar el mismo estilo a *arias etiBuetas% escribindolas separadas por comas )%
a continuaci(n% la especificaci(n del estilo seg,n pares propiedad1valor separados por punto )
coma ) encerrados entre lla*es VW. En un bloBue de estilo global podremos definir cuantos estilos
Bueramos. &parece un 2Clase8# se refiere a las llamadas clases% Bue nos permitir$n Bue una
NA
etiBueta concreta tenga una apariencia distinta a la definida como global. Es recomendable Bue
definamos estos estilos globales dentro de la cabecera del documento 3entre L7(.&M ... L67(.&M5
para asegurarnos de Bue se aplicar$n a todas las etiBuetas para las Bue se -a)a definido un estilo.
Oeamos un eQemploK
<MII M!3&!l 4) CCC 4) Q)GE*t(l'.-'" II>
<HTML>
<HEAD>
<TITLE> E@)"#l' -'3 Gl'%&) 4) )*t(l' </TITLE>
<MII
BODY OA'3tIA!"(lK,?)>4!3!N*!3*I*)>(A;A'3tI*(H),LI*"!ll;
"!>(3Il)At,R.2S(3; "!>(3I>(Et,R.2S(3P
H2 OA'3tIA!"(lK,?)>4!3!N*!3*I*)>(A;A'3tI*(H),1J#t;-'l'>,>)4P
BN TD OA'3tIA!"(lK,?)>4!3!N*!3*I*)>(A;A'3tI*(H),LI*"!ll;-'l'>,'l(D)P
TH OA'3tIA!"(lK,?)>4!3!N*!3*I*)>(A;A'3tI*(H),LI*"!ll;
-'l'>,FE(t);G!-T>'&34I-'l'>,7RRURCRP
PREN TTN CODE OA'3tIA!"(lK,C'&>()> N)FNC'&>()>;A'3tI*(H),8#t;-'l'>,"!>''3P
//II>
</CTYLE>
</HEAD>
<BODY BBCOLOR=FE(t)>
<H2>P>&)G! 4) 4)A(3(-(53 4) )*t(l'* )3 &3 Gl'%&) !#!>t)</H2>
C'"' #&)4) D)>*)N l! !#!>()3-(! 4) )*t! #+(3! %&)4!
-'"#l)t!")3t) 4)A(3(4! #'> l'* )*t(l'* %&) E)"'*
)*#)-(A(-!4' )3 )l Gl'%&) CTYLE )3 l! -!G)-)>! 4)l
4'-&")3t'. L'* "+>)3)* *'3 "+* !"#l('* 4) l' E!G(t&!lN
l! <B>3)>(t!</B> t()3) &3 t!"!2' K &3 -'l'> A(@'*N l'*
t>'H'* 4) t)Lt' )3 t)l)t(#' -'"' <TT>)*t) A>!")3t'</TT>
t!"G(/3 t()3)3 4)A(3(4! *& A&)3t)N t!"!2' K -'l'>N
K D!"'* ! D)> -5"' %&)4!3 l!* t!Gl!*N #!>! A(3!l(H!>
)l )@)"#l', <P>
<CENTER>
<TABLE BORDER=1 CELLCPACINB=2 CELLPADDINB=2>
<TR> <TH>C!G)-)>! 1</TH> <TH>C!G)-)>! 2</TH> </TR>
<TR> <TD>C)l4! V1N1W</TD> <TD>C)l4! V1N2W</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
+eparar H"M. de C++.
Como sabemos definir estilos globales% ser7a interesante tenerlos definidos en un arc-i*o
aparte% pues si Bueremos dotar a todas las p$ginas de los mismos estilos% no es tarea grata copiar
) pegar la definici(n de los estilos en cada una de las p$ginas. &fortunadamente% s7 podemos
definir los estilos en un fic-ero distinto al documento .;61% ) despus referenciarlo desde el
propio documento .;61. Esto lo -aremos con la siguiente etiBueta% dentro de la cabecera del
documento 3entre L7(.&M ... L67(.&M5K
<LINK REL=$*tKl)*E))t$ TYPE=$t)Lt/-**$ HRE<=$URLXH'@!.-**$>
NN
Veamos un ejemplo:
<HTML>
<HEAD>
<TITLE> E@)"#l' -'3 E'@! 4) )*t(l' )Lt)>3! </TITLE>
<LINK REL=$*tKl)*E))t$ TYPE=$t)Lt/-**$ HRE<=$)@)"#l'.-**$>
</HEAD>
<H2>P>&)G! 4) 4)A(3(-(53 4) )*t(l'* )3 &3! E'@! 4)
)*t(l' )Lt)>3!</H2>
C'"' #&)4) D)>*)N l! !#!>()3-(! 4) )*t! #+(3! %&)4!
-'"#l)t!")3t) 4)A(3(4! #'> l'* )*t(l'* %&) E)"'*
)*#)-(A(-!4' )3 )l Gl'%&) CTYLE )3 l! -!G)-)>! 4)l
4'-&")3t'. L'* "+>)3)* *'3 "+* !"#l('* 4) l' E!G(t&!lN
l! <B>3)>(t!</B> t()3) &3 t!"!2' K &3 -'l'> A(@'*N l'*
t>'H'* 4) t)Lt' )3 t)l)t(#' -'"' <TT>)*t) A>!")3t'</TT>
t!"G(/3 t()3)3 4)A(3(4! *& A&)3t)N t!"!2' K -'l'>N
K D!"'* ! D)> -5"' %&)4!3 l!* t!Gl!*N #!>! A(3!l(H!>
)l )@)"#l', <P>
<CENTER>
<TR> <TH>C!G)-)>! 1</TH> <TH>C!G)-)>! 2</TH> </TR>
<TR> <TD>C)l4! V1N1W</TD> <TD>C)l4! V1N2W</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Si Buisiramos Bue otros documentos tu*ieran el mismo estilo% s(lo tendr7amos Bue usar
la etiBueta 1I>H para aplicarlos. Esa es la *entaQa de las -oQas de estilo eCternas.
ejemplo.css
/* M!3&!l 4) CCC 4) Q)GE*t(l'.-'" */
/* D)A(3(-(53 4) )*t(l'* )3 &3 !>-E(D' !#!>t) */
/* E*t(l' #!>! )l 4'-&")3t' */
"!>(3Il)At,R.2S(3; "!>(3I>(Et,R.2S(3P
/* E*t(l' #!>! l! -!G)-)>! 4) 3(D)l 2 */
H2 OA'3tIA!"(lK,?)>4!3!N*!3*I*)>(A; A'3tI*(H),1J#t;-'l'>,>)4P
/* E*t(l'* #!>! 't>!* )t(%&)t!* */
BN TD OA'3tIA!"(lK,?)>4!3!N*!3*I*)>(A;A'3tI*(H),LI*"!ll;
-'l'>,'l(D)P
PREN TTN CODE OA'3tIA!"(lK,C'&>()> N)FNC'&>()>;
A'3tI*(H),8#t;-'l'>,"!>''3P
Herencia de Estil!s.
En el conQunto de las etiBuetas .;61 podemos establecer una QerarBu7a de etiBuetas Bue
contienen a otras% para darnos una relaci(n de -erencia. En primer lugar% tendr7amos la etiBueta
L/%&NM ... L6/%&NM% Bue -ace referencia a todo el documento% ) podemos considerarla como la
etiBueta VpadreV de todas las dem$s etiBuetas de formato% puesto Bue todas ellas se encuentran
contenidas en el cuerpo 3bod)5 del documento.
N/
"espus% tenemos las etiBuetas de p$rrafo 3L3M222L63M, L&)'M222L6&)'M%
cabeceras% ...5 ) etiBuetas de elementos insertados en l7nea 3L/M222L6/M, L)M222L6)M,
LS3.+M222L6S3.+M% ...5. 1as etiBuetas de p$rrafo ser$n contenedoras de las etiBuetas de
elementos insertados en l7nea 3en el sentido Bue les estamos dando5% establecindose as7 una
nue*a relaci(n Vpadre:-iQoV.
Esto es interesante porBue la ma)or7a de los estilos Bue se definen se -eredan% es decir% si
definimos un cierto estilo para una etiBueta% este estilo ser$ -eredado por las etiBuetas V-iQasV%
con lo Bue no tendremos Bue *ol*er a definirlo para ellas. Por eQemplo% si definimos un tipo de
letra ) un color para la fuente para la etiBueta L/%&NM 222 L6/%&NM%este estilo ser$ -eredado por
todas las etiBuetas del documento ) no tendremos Bue definirlo para las otras etiBuetas.
Sin embargo% si tenemos definido un estilo para una etiBueta VpadreV% podremos definir
un estilo distinto para una etiBueta V-iQaV% es decir% un estilo -eredable se -ereda a no ser Bue
especifiBuemos lo contrario. Se -eredar$n aBuellas caracter7sticas Bue no pongamos% ) se
aplicar$n aBuellas Bue definamos para la etiBueta Bue no tenga la etiBueta VpadreV.
Veamos un ejemplo:
<HTML>
<HEAD>
<TITLE> E@)"#l' 1 4) E)>)3-(! </TITLE>
</HEAD>
T'4' )l t)Lt' t()3) 4)A(3(4' )l )*t(l' <&)3t),?)>4!3!N
T!"!2',LI*"!llN M!>)3 (H%&()>4',R.2S(3N M!>)3
4)>)-E',R.2S(3N <CPAN CTYLE=$-'l'>,>)4$>#)>'
)*t) t>'H' 4) l13)! )* 4) &3 -'l'> 4(*t(3t'N
-'3*)>D!34' )l >)*t' 4) #>'#()4!4)*</CPAN>N K
)*' E!-) (3t)>)*!3t) l! E)>)3-(! K l! #'*(G(l(4!4
4) -!"G(!> )3 #!>t)* -'3->)t!* l'* )*t(l'* E)>)4!4'*.
</BODY>
</HTML>
N
ejemplo.css
/* M!3&!l 4) CCC 4) Q)GE*t(l'.-'" */
/* D)A(3(-(53 4) )*t(l'* )3 &3 !>-E(D' !#!>t) */
/* E*t(l' #!>! )l 4'-&")3t' */
"!>(3Il)At,R.2S(3; "!>(3I>(Et,R.2S(3P
/* E*t(l' #!>! l! -!G)-)>! 4) 3(D)l 2 */
/* E*t(l'* #!>! 't>!* )t(%&)t!* */
-'l'>,'l(D)P
A'3tI*(H),8#t;-'l'>,"!>''3P
Estil! en $(ncin del c!nte%t!.
4tro tema a comentar aBu7 es la posibilidad de definir% en lugar de un estilo para una
etiBueta% sin m$s% es definir un estilo en funci(n del conteCto. Por eQemplo% es posible Bue
s(lamente Bueramos Bue el teCto en negrita sea de color *erde cuando se encuentre en una celda
de una tabla% o Bue sea de color p,rpura cuando forme parte de una lista.
Esto lo definiramos como sigue:
<HTML>
<HEAD>
<TITLE> E@)"#l' 4) )*t(l'* *)&3 )l -'3t)Lt' </TITLE>
<MII
TD B O-'l'>,>))3P
UL B O-'l'>,#&>#l)P
//II>
</CTYLE>
</HEAD>
E3 )*t) )@)"#l'N *)&("'* -'3 l'* )*t(l'* 4) l! E'@!
)Lt)>3!N #)>' D!"'* ! -'"#>'G!> %&) *) D)>(A(-!3 l'*
)*t(l'* 4)A(3(4'* )3 A&3-(53 4)l -'3t)Lt', l! 3)>(t!
4) &3! -)l4! -&!l%&()>! 4) &3! t!Gl! 4)G) *)> 4) -'l'>
D)>4)N K l! 3)>(t! 4) &3! l(*t! 4)G) *)> 4) -'l'>
#9>#&>!. <P>
<UL TYPE=DICC>
<LI>U3 )l)")3t' -&!l%&()>!</LI>
<LI>U3 )l)")3t' -'3 &3! #!l!G>! )3 <B>3)>(t!</B></LI>
<LI>Ot>' )l)")3t' -&!l%&()>!</LI>
</UL><P>
<CENTER>
<TR><TH>C!G)-)>! 1</TH><TH>C!G)-)>! 2</TH></TR>
<TR><TD>C)l4! V1N1W</TD><TD>C)l4! V1N2W</TD></TR>
<TR><TD><B>C)l4! V2N1W )3 3)>(t!</B></TD><TD>C)l4! V2N2W</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
N0
ejemplo.css
/* M!3&!l 4) CCC 4) Q)GE*t(l'.-'" */
/* D)A(3(-(53 4) )*t(l'* )3 &3 !>-E(D' !#!>t) */
/* E*t(l' #!>! )l 4'-&")3t' */
"!>(3Il)At,R.2S(3; "!>(3I>(Et,R.2S(3P
/* E*t(l' #!>! l! -!G)-)>! 4) 3(D)l 2 */
/* E*t(l'* #!>! 't>!* )t(%&)t!* */
-'l'>,'l(D)P
A'3tI*(H),8#t;-'l'>,"!>''3P
Clases.
Es normal Buerer definir unos estilos globales en -oQas eCternas Bue -omogeneicen el
aspecto de nuestras p$ginas% ) luego% en una p$gina concreta Buerer *ariar el estilo en alguna
etiBueta concreta. Como )a sabemos% esto podemos -acerlo definiendo el estilo localmente en
esa etiBueta.
Pero tambin puede suceder Bue esta definici(n de un estilo concreto Bueramos aplicarla
a otra etiBueta. 1o primero Bue se nos ocurre es copiar esta definici(n del estilo a la otra etiBueta
en la Bue tambin Bueremos aplicarlo. Sin embargo% este estilo concreto Bue Bueremos aplicar a
algunas etiBuetas concretas puede ser definido en un bloBue de estilo global o% incluso% en la -oQa
eCterna% ) aplicarlo% gracias a un identificador% a las etiBuetas concretas en las Bue Bueramos Bue
se apliBue dic-o estilo. Con este fin se definen las clases.
Una clase es una definici(n de un estilo Bue en principio no est$ asociado a alguna
etiBueta .;61% pero Bue podemos asociar% en el documento% a etiBuetas concretas. Para ello% en
primer lugar definimos la clase 3en el bloBue de estilos o en la -oQa eCterna5 como un estilo m$s%
de esta formaK
.N'"G>)X4)Xl!XCl!*) O#>'#()4!41,D!l'>;...;#>'#()4!4N,D!l'>P
Es decir% escribiendo un punto seguido del nombre Bue le Bueramos dar a la clase% )
definiendo el estilo como lo definimos para cualBuier otra etiBuetaK pares propiedad1valor
separados por punto ) coma ) encerrados entre lla*es. &dem$s% podremos definir cuantas clases
necesitemos.
NE
Ahora, para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el parmetro CLACC
como sigue:
<)t(%&)t! CLACC=$N'"G>)X4)Xl!XCl!*)$> ... </)t(%&)t!>
donde N'"G>)X4)Xl!XCl!*) es el nombre que le hemos dado a la clase, sin el punto.
<HTML>
<HEAD>
<TITLE> E@)"#l' 4) &*' 4) -l!*)* </TITLE>
<MII
BODY OA'3tIA!"(lK,?)>4!3!N*!3*I*)>(A;A'3tI*(H),LI*"!llP
PNANB O-'l'>,>)4P
.BAH&l O-'l'>,Gl&)P
//II>
</CTYLE>
</HEAD>
E3 )*t) )@)"#l' D!"'* ! D)> -5"' *) !#l(-!3 l!* -l!*)*.
P'> )@)"#l'N <B>)*t! 3)>(t!</B> &t(l(H! )l )*t(l' 4)A(3(4'
)3 )l Gl'%&)N #)>' <B CLACC=$BAH&l$>)*t! 't>! 3)>(t!</B>
t()3) &3 -'l'> 4(*t(3t'. Y 3' *5l' #'4)"'* &*!> l! -l!*)
#!>! l! 3)>(t!. P'> )@)"#l'N <CPAN CLACC=$BAH&l$>)*t) t>'H'
4) l13)! t!"G(/3 &t(l(H! l! -l!*) #!>! *& )*t(l' #!>t(-&l!></CPAN>.
</BODY>
</HTML>
Eti5(etas.
Oamos a-ora a estudiar el atributo )& de una etiBueta .;61 en relaci(n a la definici(n
de estilos. CualBuier etiBueta .;61 puede tener como par$metro la etiBueta )& seguida de un
nombre% por eQemploK
<)t(%&)t! ID=$N'"G>)R)A)>)3-(!$> ... </)t(%&)t!>
Este V>ombre'eferenciaV debe ser ,nico en el documento .;61 3es decir% no debe
-aber dos etiBuetas con el mismo )&5% puesto Bue nos ser*ir$ para tratarla 3si lo necesitamos5
desde Da*aScript% ) por esto no debe -aber confusi(n con el nombre como referencia. Para
definir un estilo mediante un )&% usaremos la siguiente notaci(n 3en un bloBue de estilo o en la
-oQa eCterna5K
7N'"G>)X4)lXID O#>'#()4!41,D!l'>;...;#>'#()4!4N,D!l'>P
N9
Es decir% escribiendo X seguido del nombre Bue le Bueramos dar al )&% ) definiendo el
estilo como )a sabemosK pares propiedad1valor separados por punto ) coma ) encerrados entre
lla*es. Podremos definir todos los )& Bue Bueramos% pero cada )& s(lo debe ser asociado a una
,nica etiBueta concreta de la siguiente formaK
<)t(%&)t! ID=$N'"G>)X4)lXID$> ... </)t(%&)t!>
&s7 identificaremos de forma un7*oca a esa etiBueta concreta% asign$ndole la definici(n
del estilo -ec-a en el bloBue o en la -oQa para ese )&% ) adem$s nos permitir$ tratarlo 3por
eQemplo% cambiando algunas caracter7sticas del estilo definido5 desde Da*aScript% Bue usar$ ese
identificador para saber sobre Buin -a de actuar% suponiendo Bue Buisiramos -acerlo.
Pse(d!clases.
.a) ocasiones en las Bue .;61 da a algunas etiBuetas un estilo propioK por eQemplo% los
enlaces aparecen por defecto de otro color ) subra)ados. Estos elementos son las pseudoclases.
Por a-ora% s(lo est$n definidas para la etiBueta L.M. 1a forma de definir un estilo para una
pseudoclase es la siguienteK
)t(%&)t!,#*)&4'-l!*) O#>'#()4!41,D!l'>;...;#>'#()4!4N,D!l'>P
) las pseudoclases de Bue disponemos sonK
l(3T
os dice el estilo de un enlace que no ha sido !isitado.
D(*(t)4
os dice el estilo de un enlace que ha sido !isitado.
!-t(D)
os dice el estilo de un enlace que est siendo pulsado.
E'D)>
os dice el estilo de un enlace sobre el que est pasando el rat"n.
Por eQemplo% si deseasemos Bue apareciesen todos los enlaces sin subra)ar% definiriamos
los siguientes estilosK
A,l(3TNA,D(*(t)4NA,!-t(D) Ot)LtI4)-'>!t('3,3'3)P
1as pseudoclases pueden usarse de forma conQunta con las clases% para aplicar ese estilo
s(lo en casos concretos% siguiendo la notaci(nK
A.N'"G>)Cl!*),#*)&4'-l!*)
) tambin se pueden usar en funci(n del conteCto.
/!
Pr!piedades.
&-ora Bue )a -emos *isto c(mo se definen estilos en un documento .;61% as7 como
todas las posibilidades en cuanto a QerarBu7as% clases% ...% nos *amos a centrar en Bu es lo Bue
podemos poner en cada una de esas pareQas propiedad1valor Bue dec7amos Bue definen un
estilo. Para facilitar su identificaci(n% los *amos a di*idir en las siguientes categor7asK
PropiedadesK
H!r'at! de /l!5(e
.as $(entes
"e%t!
C!l!r * $!nd!
.istas
.a) propiedades en las Bue necesitaremos especificar alguna longitud 3por eQemplo% en los
m$rgenes5. Para ello% usaremos esta notaci(nK
S-T++ipo
- es el signo% ) es opcional 3es lo Bue Buieren decir los corc-etes% Bue se trata de algo opcional%
los corc-etes no -a) Bue ponerlos5.
++ es la cantidad% ) tipo es la magnitud. Esta ,ltima puede ser relati*a o absoluta. 1as
magnitudes relati*as son em 3el alto de la 6 ma),scula5% e: 3la mitad de la altura de la 6
ma),scula% Bue *iene a ser aproCimadamente la altura de la C min,scula5% p: 3p7Cel5. 1as
magnitudes absolutas son p 3puntos5% pc3picas5% in 3inc-es% es decir% pulgadas5% mm 3mil7metros5%
cm 3cent7metros5.
.a) otras propiedades en las Bue tendremos Bue especificar un color# para ello -a) tres
posibilidadesK escribindolo de la misma forma Bue en .;61% con la notaci(n XRR44//% siendo
RR% 44% // los *alores en -eCadecimal de las componentes roQa% *erde ) a+ul del color% usando
alg,n nombre predefinido% o usando la funci(n rgb3'%M%B5% donde '% M% B son los *alores en
decimal de las componentes roQa% *erde ) a+ul del color.
/1
Un ,ltimo detalle a comentar antes de pasar al estudio de las propiedades ) sus posibles
*alores% es el siguienteK desde el punto de *ista de las -oQas de estilo% eCisten tres tipos de
elementos .;61K de /l!5(e 3Bue son los Bue -acen empe+ar l7nea nue*a% como L3M% las
cabeceras% ...5% incrustados en l-nea 3Bue no alteran la l7nea en la Bue se encuentran% como L/M%
L)M% ...5 ) de lista 3Bue son los elementos de una lista delimitados por L-)M5. ;odo elemento de
bloBue se considera rodeado por una caQa% con propiedades de m$rgenes% borde% padding ) fondo.
&dem$s% la caQa Bue lo rodea tiene un cierto anc-o% ) una cierta alineaci(n con respecto al
documento.
Bl!5(e.
ombre
margin-le;, margin-
rig5, margin-op,
margin-boom,
margin
padding-le;,
padding-rig5,
padding-op, padding-
boom, padding
border-le;-wid5,
border-rig5-wid5,
border-op-wid5, border-
boom-wid5, border-
wid5
border-syle
Valores
posibles
longitud, porcentaje,
auo
longitud, porcentaje longitud
none, solid,
double, inse,
ouse, groove,
ridge
Valor por
defecto
0 0 0 none
Aplica a todos todos todos todos
#eredado No No No No
Valor
porcentual
Relativo al ancho del
padre
Relativo al ancho del
padre
- -
ombre
border-color wid5 ;loa clear
Valores posibles none, color longitud, porcentaje, auo le;, rig5, none none, le;, rig5, bo5
Valor por defecto none auto none none
Aplica a todos elementos a nivel de loque todos todos
#eredado No No No No
Valor porcentual - Relativo al ancho del padre - -
&claraciones sobre algunos *aloresK
1ongitudK "ebe ser un n,mero seguido de una unidad de medida% tal ) como se
comentaba unos p$rrafos m$s arriba. Por eQemplo% un *alor posible es 1=pt% ( !.=in.
PorcentaQeK FiQa el tamaUo en *alor porcentual respecto al padre.
/=
H(entes.
ombre
;on-siAe ;on-;amily ;on-weig5 ;on-syle
Valores posibles
asoluto, relativo, porcentaje,
longitud
familia
bolder, lig5er, !00-
"00
normal, bold,
ialic
Valor por
defecto
medium
user
preferences
normal normal
Aplica a todos todos todos todos
#eredado #$ #$ #$ #$
Valor porcentual Relativo al padre - - -
En ;on-siAe -emos dic-o Bue puede tomar un *alor absoluto# los posibles *alores
absolutos sonK ::-large% :-large% large% medium% small% :-small% ::-small.
En ;on-;amily -emos dic-o Bue el *alor ser$ famil)# esto -ace referencia a una lista de
nombres de familias de fuentes% separadas por comas. El na*egador buscar$ por orden cada una
de las fuentes especificadas% ) usar$ la primera Bue encuentre instalada en el sistema. Por
eQemplo% podemos poner ;on-;amily1'erdana,.rialB esto significar$ Bue el na*egador
buscar$ la fuente Oerdana% ) si no est$ instalada en el ordenador de Buien *e la p$gina% buscar$ la
fuente &rial% por ser la siguiente en la lista. &s7 continuar7amos si -ubiera m$s fuentes en la lista.
Si no encuentra ninguna% usar$ la fuente por defecto. Es importante saber Bue eCisten
unas familias de fuentes genricas Bue est$n en todos los ordenadores% a fin de ponerlas como
,ltima alternati*a en la lista. Estas familias sonK seri;% sans-seri;% monospace% cursive%
;anasy.
En ;on-weig5 ten7amos las posibilidades bolder% lig5er ) 899-C99. 1as dos
primeras son relati*as al *alor actual. 1!!:9!! Buiere decir decir Bue podemos especificar un
*alor numrico entre 1!! ) 9!!. 1!! ser$ el m$s ligero ) 9!! el m$s pesado.
/A
;eCto.
ombre
line-5eig5 e:-decoraion e:-rans;orm e:-align e:-inden
Valores
posibles
n%mero, longitud,
porcentaje, normal
none, underline,
line-5roug5,
blink
capialiAe,
uppercase,
lowercase
le;, rig5,
cener, Kusi;y,
none
longitud,
porcentaje
Valor por
defecto
normal none none left 0
Aplica a
elementos a nivel
de loque
todos todos
elementos a nivel
de loque
elementos a nivel
de loque
#eredado #$ No #$ #$ #$
Valor
porcentual
Relativo al tama&o
de la fuente
- - -
Relativo al ancho
del elemento
padre
El line-5eig5 s(lo se aplica a elementos a ni*el de bloBue. Si se indica un n,mero o
porcentaQe% esta distancia ser$ el producto de este n,mero por el tamaUo de la fuente del
elemento actual. 1a diferencia est$ en Bue% al indicar un n,mero% los elementos -iQos -eredan el
factor% mientras Bue% en otro caso% -eredan el tamaUo de la separaci(n.
C!l!r * $!nd!.
ombre
color background-color background-image
Valores posibles color color 'RL entre par(ntesis
Valor por defecto lac) ninguno ninguno
Aplica a todos todos todos
#eredado #$ No No
Valor porcentual - - -
Para especificar un color -a) tres posibilidadesK
Escribindolo de la misma forma Bue en .;61% con la notaci(n _''MMBB% siendo ''%
MM% BB los *alores en -eCadecimal de las componentes roQa% *erde ) a+ul del color.
Usando alg,n nombre predefinido.
Usando la funci(n rgb3'%M%B5% donde '% M% B son los *alores en decimal de las
componentes roQa% *erde ) a+ul del color.
/N
.istas.
ombre
display lis-syle-ype w5ie-space
Valores
posibles
block, inline,
lis-iem, none
disc, circle, square, decimal, upper-roman,
lower-roman, upper-alp5a, lower-alp5a
normal, pre, none
Valor por
defecto
seg%n *+,L disc seg%n *+,L
Aplica a todos elementos cuya propiedad display es list-item
elementos a nivel
de loque
#eredado No #$ #$
Valor
porcentual
- - -
En displa) se indica si un elemento es de ni*el de bloBue 3block5% incrustado 3inline5 o de ni*el
de lista 3lis-iem5. Si se aQusta el *alor a none% el elemento no ser$ mostrado% lo Bue se
eCtiende a sus V-iQosV ) la caQa Bue lo rodea. 1os elementos de bloBue no responden si se les
aQusta como inline. Son muc-as las posibilidades Bue tenemos para *ariar propiedades% pero al
final terminaremos aprendindonos las seis o siete Bue m$s usemos. Es un interesante eQercicio
practicar aplicando los posibles estilos en tro+os del documento para ir adBuiriendo m$s pr$ctica.
Intr!d(ccin al OM..
<61 es una tecnolog7a en realidad mu) sencilla Bue tiene a su alrededor otras
tecnolog7as Bue la complementan ) la -acen muc-o m$s grande ) con unas posibilidades muc-o
ma)ores. <61% con todas las tecnolog7as relacionadas% representa una manera distinta de -acer
las cosas% m$s a*an+ada% cu)a principal no*edad consiste en permitir compartir los datos con los
Bue se trabaQa a todos los ni*eles% por todas las aplicaciones ) soportes.
&s7 pues% el <61 Quega un papel important7simo en este mundo actual% Bue tiende a la
globali+aci(n ) la compatibilidad entre los sistemas% )a Bue es la tecnolog7a Bue permitir$
compartir la informaci(n de una manera segura% fiable% f$cil. &dem$s% <61 permite al
programador ) los soportes dedicar sus esfuer+os a las tareas importantes cuando trabaQa con los
datos% )a Bue algunas tareas tediosas como la *alidaci(n de estos o el recorrido de las estructuras
corre a cargo del lenguaQe ) est$ especificado por el est$ndar% de modo Bue el programador no
tiene Bue preocuparse por ello.
//
Oemos Bue <61 no est$ s(lo% sino Bue -a) un mundo de tecnolog7as alrededor de l% de
posibilidades% maneras m$s f$ciles e interesantes de trabaQar con los datos )% en definiti*a% un
a*ance a la -ora de tratar la informaci(n% Bue es en realidad el obQeti*o de la inform$tica en
general. <61% o meQor dic-o% el mundo <61 no es un lenguaQe% sino *arios lenguaQes% no es una
sintaCis% sino *arias ) no es una manera totalmente nue*a de trabaQar% sino una manera m$s
refinada Bue permitir$ Bue todas las anteriores se puedan comunicar entre si sin problemas% )a
Bue los datos cobran sentido.
<61 es interesante en el mundo de Internet ) el e:bussiness% )a Bue eCisten muc-os
sistemas distintos Bue tienen Bue comunicarse entre si% pero como se -a podido imaginar%
interesa por igual a todas las ramas de la inform$tica ) el tratamiento de datos% )a Bue permite
muc-os a*ances a la -ora de trabaQar con ellos.
C!'entari!s.
1os comentarios en los documentos <61 empie+an por W`:: ) acaban por ::X. Pueden
contener cualBuier cadena de teCto eCcepto el literal ::. Pueden colocarse en cualBuier parte del
documento.
Ej:
$%&& Esto es comentario $'''''&d(dd &&)
+ecci!nes C4ata.
1e indican al parser Bue ignore todos los caracteres de marcas Bue se encuentren en el
interior de esta?s secci(n?es. 3ed% son como comentarios a lo bestia5. Son mu) ,tiles cuando
Bueremos 3C eQ. a modo de tutorial5 *isuali+ar c(digo <61 como parte del teCto. ;odos los
caracteres Bue eCistan entre son pasados directamente a la aplicaci(n sin interpretaci(n. El ,nico
literal Bue no puede ser utili+ado dentro de la secci(n es% l(gicamente% el IIX.
Ejemplo.
<MYCDATAY <MENTITY !"# $&$> <MII &= !"#)>*!34 II>
<CODIBO>
*#=&%I>-!"#';
!=VL<KWZ33,JJ;
</CODIBO>
[[>
/
Ele'ent!s
Son las etiBuetas m$s frecuentemente utili+adas dentro de un documento <61.
Est$n delimitadas por los s7mbolos W ) X% sintaCis de todos conocida% puesto B era la usada en
.;61. Si el contenido de la etiBueta es *ac7o 3al igual B WB'X ( WI6MX en .;615% entonces
se delimitan por los s7mbolos W ) ?X. 1as etiBuetas de apertura 3las Bue empie+an por X5 pueden
incluir atributos% los cuales son pares nombre?*alor al estilo coloraV*erdeV. 3C eQ% en .;61 Wfont
coloraVgreenVX5. 4D4`` En <61 los atributos siempre deben ir encerrados entre comillas
dobles.
Ejemplos:
<3'"G>) (4=$*&>3!")$>P)>)H</3'"G>)>
<D!-(! -'l'>=$D)>4)$/>
Re$erencias a entidades.
1as entidades3entit)5 se usan en <61 b$sicamente como representaci(n alternati*a de
los caracteres especiales 3como por eQemplo las comillas dobles ( la marca de apertura en un
elemento5% aunBue tambin pueden emplearse para incluir el contenido de otros documentos (
para -acer referencia a tro+os de teCto repetiti*os. SintaCisK JCCC# donde CCC es el nombre de
la entidad% ) % JCCC# es la manera de referirse a la entidad.
Ejemplo: &)!-&t); &&&&) *epresenta al smbolo +.

ECiste una referencia a entidades VespecialV% denominada referencia a caracteres. bsta se
usa para representar caracteres Bue no pueden ser escritos desde el teclado. >o tienen un nombre
de cadena 3como eacute C eQ5 sino B su nombre es% ( un nc decimal% ( un nc -eCadecimal.

Ej: ,(-./ $%&& Ampersand &&)
;ambin se pueden crear constantes 3( macros5 para Bue no nos tengamos B acordar de
los numeros.Para ello usamos la definici(n VrealV de entidadK
/0
Ejemplo:
<MENTITY !"# $&73U;$&t;
0ara referenciarlo: ,amp/
"icen Bue el <61 es un 1!T del SM61 ) de *erdad lo es% porBue en realidad las normas
Bue tiene son mu) simples. Se escribe en un documento de teCto &SCII% igual Bue el .;61 ) en
la cabecera del documento se tiene Bue poner el teCto.
$12ml !ersion345.641)
En el resto del documento se deben escribir etiBuetas como las de .;61% las etiBuetas
Bue nosotros Bueramos% por eso el lenguaQe se llama <61% lenguaQe de etiBuetas eCtendido. 1as
etiBuetas se escriben anidas% unas dentro de otras.
$E7895)...$E789:)...$;E789:)...$;E7895)
CualBuier etiBueta puede tener atributos. 1e podemos poner los atributos Bue Bueramos.
$E789 atributo534!alor54 atributo:34!alor:4...)
1os comentarios de <61 se escriben igual Bue los de .;61.
$%&& <omentario &&)
R esto es todo lo Bue es el lenguaQe <61 en si% aunBue tenemos Bue tener en cuenta Bue
el <61 tiene muc-os otros lenguaQes ) tecnolog7as trabaQando alrededor de l. Sin embargo% no
cabe duda Bue la sintaCis <61 es realmente reducida ) sencilla.
Para definir Bu etiBuetas ) atributos debemos utili+ar al escribir en <61 tenemos Bue
fiQarnos en la manera de guardar la informaci(n de una forma estructurada ) ordenada. Por
eQemplo% si deseamos guardar la informaci(n relacionada con una pel7cula en un documento
<61 podr7amos utili+ar un esBuema con las siguientes etiBuetas.
/E
$12ml !ersion345.641)
$0E=8<>=A nombre34El 0adrino4 a'o35?.@)
$0E*ABA=)
$;C8*E<7B* nombre34Deorgie =ucar4)
$;87E*0*E7E nombre34Earlon Frando4 interpreta&a34Con <orleone4)
$;87E*0*E7E nombre34Al 0acino4 interpreta&a34Eichael <orleone4)
$;0E*ABA=)
$;A*D>EE7B descripci"n340elicula de mafias sicilianas en Estados >nidos4)
$;0E=8<>=A)
Como podis *er% nos -emos in*entado las etiBuetas Bue nos *en7an en gana para poner
este eQemplo ) las -emos anidado de manera Bue la etiBueta m$s grande es la PE1ICU1& )
dentro de ella tenemos el P'ES4>&1 ) el &'MU6E>;4. & su *e+% dentro de PE'S4>&1
tenemos tanto al "I'EC;4' como a los actores 3I>;E'P'E;E5. Esto no trae problemas si
trabaQamos solos# pero% Z) si trabaQamos en eBuipo[%Z) si Bueremos eCportar nuestros
documentos[ZBue est$ndar seguiremos[
Ejemplo:
4A4 puede escribir el nombre como sigue:
$nombre)Guan$;nombre)
Ain embargo, 4F4 puede hacerlo as:
$nombre id34Guan4;)
1as = *ersiones son igual de correctas pero son diferentes# si eCtrapolamos esto a muc-as
marcas% entonces la lectura )?o modificaci(n de documentos por diferentes personas puede ser un
caos. 3) como me enseUaron a m7 en la uni*ersidad% Vno es planV Bue -agas una aplicaci(n Bue
s(lo entiendas t,% de forma B si se Buiere modificar% la empresa te tiene B pedir de rodillas a ti B
lo -agas5. Para resol*er estos problemas% proporcionando un peBueUo estandar acerca de la
sintaCis a utili+ar% Cml ofrece dos posibles solucionesK
1as ";"ds.
1os <ml Sc-emas.
/9
En las ";"ds podemos -acer N tipos de declaracionesK
1. "eclaraciones de tipo de elemento 3Element ;)pe "eclarations5.
=. "eclaraciones de listas de atributos 3&ttribute 1ist "eclarations5.
A. "eclaraciones de Entidades 3Entit) "eclarations5.
N. "eclaraciones de notaci(n 3>otation "eclarations5.
1as tratar una a una en los siguientes apdos.
4eclaraci!nes de tip! de ele'ent!.
Estas declaraciones establecen Bu elementos pueden formar parte del documento )
cuales pueden formar parte de su interior 3los elementos se anidan unos dentro de otros5.
+inta%isA
1os elementos Bue puede contener cada elemento 3*alga la redundancia5 *an siempre
encerrados entre parntesis ) precedidos de la etiBueta W`E1E6E>;. "entro de las etiBuetas%
cada elemento 3atributo5 podr$ lle*ar uno de los siguientes s7mbolos detr$s de su nombreK
AHEFB=B A8D8I8<ACB J8ndica...K
, #ecuencia de elementos
1 0 - ! ocurrencias
L 0 - m.s ocurrencias
M ! - m.s ocurrencias
Empty
que el elemento est. vac$o.
/stos elementos N0 tienen etiqueta de cierre.
Any
1ualquier contenido es v.lido.
No se recomiendo su uso.
(0<CA7A que el contenido de la cadena puede ser una cadena de te2to.
Ejemplos:
<MELEMENT 3'"G>) V7PCDATAW>
<MELEMENT 3'"G>) EMPTY>
<MELEMENT -l()3t) V3'"G>)N!#)ll(4'*N3(AZNtlA*N4(>)--('3\W>
!
Este ,ltimo eQemplo Buiere eCpresar lo siguienteK
El elemento cliente debe contener a nombre ) apellidos% puede contener a nif ) tlf : a este
incluso m$s de una *e+: ) debe contener al menos una *e+ la direcci(n del cliente 3para poder
en*iarle el pedido a casa5.
NO"AA 1uego podemos -acer una redefinici(n de los subelementos si Bueremos.
Ejemplo:
<MELEMENT -l()3t) V3'"G>)N!#)ll(4'*N3(AZNtlA*N4(>)--('3\W>
<MELEMENT 3'"G>) V7PCDATAW>
<MELEMENT !#)ll(4'*V!#)1N!#)2ZW>
.....
&dem$s de esto% tambien podemos indicar Bue eCisten *arias alternati*as# para ello se usa
el s7mbolo e 3relci(n 4'5. EQemploK
<MELEMENT !#)ll(4'* V7PCDATA]V!#)1N!#)2WW>>
<MELEMENT !#)1 V7PCDATAW>
<MELEMENT !#)2 V7PCDATAW>
indica Bue se puede eleQir entre teclear los = apellidos Quntos ( por separadoK
WapellidosX Pere+ 1(pe+ W?apellidosX
WapellidosX Wape1X Pere+ W?ape1X Wape=X 1(pe+ W?ape=X W?apellidosX
4eclaraci!nes de listas de atri/(t!s.
Ra -emos *isto como denotar los elementos B puede tener el documento. Pero% ZBu pasa
con los atributos 3si es B tienen5 de todos ) acada uno de los elementos[. Para definirlos se usan
las declaraciones de listas de atributos% cu)a sintaCis es la siguienteK
SintaCisK
;odas las definiciones de atributos empe+ar$n porK W`&;;1IS; Cada atributo est$
formado por A partesK
1
>ombre
;ipo del atributo
Oalor por defecto
1as posibilidades para describir el tipo de un atributo3campo5 ) el *alor por defecto del
mismo las podeis *er en las siguientes tablasK
"ip! del atri/(t!
VA=B* A8D8I8<ACB
<CA7A
/l atriuto ser. una cadena de caracteres.
No todos los caracteres son v.lidos.
'saremos secciones 3145+5 cuando queramos incluir los car.cteres no v.lidos.
8C
/l atriuto sirve para identificar al elemento dentro del documento.
#-lo puede haer un atriuto de tipo 64 por elemento.
8C*EI;A
/ste atriuto se emplear. para referenciar a otros elementos del documento a
partir de su 64.
E787N;A 1ontiene nomres de entidades. Ver siguiente apdo.
E7BOE;A 1ontiene una %nica cadena de te2to 7ed, una s-la palara8.
J$$enumerados))K
5qu$ especificamos /L conjunto de valores q puede tomar el atriuto9 esto lo
hacemos separandolos con :.
NO"AA El *alor para los atributos acabados en S 3eQ. I"E'EFS5 ser$ una lista de *alores
separados por espacios en blanco.
Pal!res p!r de$ect!
VA=B* A8D8I8<ACB
;R/<'6R/4 1on esto indicamos que es oligatorio darle un valor al atriuto.
;6,3L6/4 1on esto indicamos que es opcional darle un valor al atriuto.
==valor>>
3odemos poner un valor 7N0 lista de valores8 opcional directamente9 entonces, si no se le otorga
un nuevo valor posteriormente, asumir. el dado 7ed, es el valor 2 por defecto8.
No es oligatorio darle un valor en el doc.
;?6@/4
==valor>>>
1on esto oligamos a q el atriuto tome necesariamente el valor especificado en ==valor>>
EGemplo:
<MATTLICT -l()3t)
3&"-l( ID 7REQUIRED
)4!4 V$M)3'* 4) 1U$ ] $)3t>) 1U K ;S$ ] $M+* 4) ;S$W 7IMPLIED
>
=
&l ser numcli de tipo I" indicamos B no puede -aber = clientes con idntico numcli.
Edad es un atributo no obligatorio Bue s(lo puede tomar los *alores de la lista enumerada.
A

Programacion Web Isc Unidad I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programacion Web Isc Unidad I

Uploaded by

Copyright:

Available Formats

Porgramacion WEB ISC Unidad I

Porgramacion WEB ISC Unidad I

You might also like