HTML

Prof. Mara Teresa Jimnez

Tips:
La mayora de las instrucciones tiene un tag para comenzar y otro para terminar.
Formato general:
<nomre!tag atriuto"#$alor"% atriuto&#$alor&%'( contenido afectado por el tag <)nomre!tag(
*ada elemento estructural de HTML dee ponerse en una lnea aparte y sangrar para
mostrar como est+ anidado.
*ada elemento para controlar apariencia se inserta en la lnea ,ue afecta. -.. <( para old.
-$ite di$idir un /0L en & lneas.
0ecuerde ,ue cada 1ro2ser3 interpreta las instrucciones de HTML a su manera. Por lo
tanto el nfasis dee ser primero ,ue nada en el contenido y tratar dentro de eso ,ue se
presente de forma atracti$a.
Los atriutos son muc4as $eces opcionales% si no se utilizan se presume un $alor.
5i se tiene tags anidados% 4ay ,ue terminar primero el reciente. -. :
<ody( cuerpo informe <a 4ref#222.oracle.com( mas te6to <( esto en old <)(<)a(
<)ody(
Comentarios:
<7!! comentario !!(
Skeletal Tags:
1. Documento en html
<HTML( documento en 4tml <)HTML(
atriuto: 8ersion
le dice al ro2ser ,ue esto es un arc4i$o de 4tml
$9.:: manifest ! para indicar ,ue esa p+gina $a a ser cac4ed para acceso fuera de lnea
2. Cabeza del documento
<Head( informaci;n general sore el documento <)Head(
<o tiene atriutos. Puede contener $arios otros tags:
<ase(% <isinde6(% <lin=(% <meta(% <ne6tid(% <title(% <style(
-lementos ,ue se ponen dentro del tag <4ead(
<ase( ! define un /0L default para todo elemento ,ue re,uiere un /0L
<lin=( ! usado mayormente para enlazar style s4eets
<meta( ! datos sore los datos: descripci;n de la p+gina% autor y =ey2ords
<script( ! para definir un client!side script
<style( ! definir estilos de elementos de la p+gina
<title( ! ttulo de la p+gina
3. Cuerpo del documento
<ody( cuerpo del documento% el contenido en s <)ody(
Header tags
. T!tulo
<title( titulo del documento <)title(
-l titulo lo usa el ro2ser para desplegarlo en algun lugar: title ar o status line
Tamin se usa como el titulo 1default3 al poner la p+gina como 1fa$orite3.
-n $9.: es oligatorio y solo uno
0ecuerde ,ue esta informaci;n la usa tamin los 1searc4 engines3. Muy importante esco.a
ttulo significati$os a>n para ,uien no est+ $iendo el documento entero. Puede 4acer la
diferencia entre ,ue alguien se decida a $er la pagina o no.
4ttp:))222.2?sc4ools.com)tags)[email protected]
"od# tags
$. Di%isiones # p&rrafos
Di%isiones:
<di$( di$ision del documento <)di$(
-sta instrucci;n se utiliza para definir di$isiones o secciones en un documento HTML y
aplicar ciertos atriutos a todo lo ,ue est+ en la di$isi;n. Atriutos: class% dir% lang% style
y title
5e usa a menudo con *55 para definir el layout de una p+gina de 2e.
'&rrafos:
-l ro2ser () di$ide el te6to del contenido en los p+rrafos y lneas ,ue el usuario ingresa con el
editor. Los 1enter3 son >tiles solo para 4acer ,ue el documento en 4tml sea mas legile. Para
,ue el 1ro2ser3 di$ida en p+rrafos se usa el tag <p( y para forzar un lnea nue$a <r(
<p( parrafo <)p(
<p( causa ,ue se de.e una lnea en lanco y un 1line rea=3
Atriutos: ALBC<% *LA55 y 5TDL-
Tags b&sicos para apariencia # contenido:
*ncabezados
<H"(% <H&(% <H?(% <HE(% <H9(% <HF(
-.emplo: <H"( *af TaascoGs Home Page <)H"(
Mientras mas pe,ueHo el n>mero mas grande la letra al desplegar y m+s importante
es el 4eading.
La intenci;n es pro$eer encaezados de diferentes ni$eles Isecciones y
suseccionesJ
Atriutos: ALBC<% *LA55 y 5TDL-
-s com>n repetir el titulo de la pagina como un H" en el 1ody3 para ,ue as salga al
principio de la pagina.
5e puede incluir im+genes como parte de un ttulo:
<H"( <BMC 50*#3cafeta.gif3 ALT#3Fac4ada3( *af TaascoGs Home Page <)H"(
"reak
<r( causar ,ue el ro2ser inserte un line rea= I<r )( en KHTMLJ
Te+t ,arkup - f!sicos:
4ttp:))222.2?sc4ools.com)tags)tryit.aspLfilename#try4tml@formatting@te6t
"old: <( texto <)(M Nrdene <( antes de las ?:::pm <)( para entrega al da
siguiente #( Nrdene antes de las 3:..pm para entrega al da siguiente
italics: <i( texto <)B(
underline: <u( texto <)u( <ota: 4a sido 1deprecated3 pues confunde al parecer un
lin=
strike Ite6to con una lnea encimaJ: <s( o <stri=e( texto <)s( o <)stri=e( !
deprecated
agrandar letra <ig( texto <)ig( se puede usar mas de uno corrido para agrandar
m+s
achicar letra <small( texto <)small( se puede usar mas de uno corrido para ac4icar
m+s
suscrito <su( texto <)su(M H<su(&<)su(N #( H&N
e+ponente IsuperscriptJ: <sup( texto <)sup(M K<sup(&<)sup(O" #( K
&
O"
teletipo Iletra no!proporcionalJ: <tt( texto <)tt(M Proporcional <tt( no!proporcional
<)tt( #( Proporcional no!proporcional
Te+t ,arkup - basados en contenido
4ttp:))222.2?sc4ools.com)tags)tryit.aspLfilename#try4tml@p4rase@test
Cita: <cite( texto <)cite(M tpicamente despliega en italics
C/digo: Iinstrucciones en un lengua.e de programaci;nJ: <code( texto <)code(M
tpicamente desplegado en un font no proporcional.
Definici/n: <dfn( texto <)dfn( M en -6plorer con italics% nada en los dem+s
*nfasis: <em( texto <)em( usualmente en italics
Teclado: <=d( texto <)=d( usualmente en te6to no!proporcional
0uerte: <strong( texto <)strong( usualmente en old
0ont 1 Tipo de letra *Es major hacer esto con CSS
<basefont( texto P<)asefont(Q define el tipo de letra ase para el documento.
Atriutos: *NLN0#color% 5BR-#n o 5BR-#On o 5BR-#!n Idefault es ?% puede ser un
n>mero con signo lo cual indica decrementar)aumentar por una cantidadJFA*-#tipo
Itipo: Times <e2 0oman% etc.J. Puede ponerse mas de un tipo de letra separado por
comas% de este modo el ro2ser cote.a si en esta m+,uina el primero est+
disponile% si no el 5egundo y as sucesi$amente. -.emplo: <font face#3Sragadoccio%
Mac4ine% Rapf Tingats3(
<font( texto <)font(permite camiar el tipo de letra de una porci;n del te6to.
Atriutos: size% face y color. -l tamaHo puede tener signo para aumentar o disminuir.
2m&genes 3gr&ficos4
Bm+genes <img src#3arc4i$o del grafico3 ALT#te6to ,ue descrie el grafico(
Atriutos: 5rc U Ire,ueridoJ /0L de la imagen% ALT U alternati$e Ite6to , aparece en
lugar del gr+ficoJ U no para mouse o$erJ. <o tiene endtag en HTML% en KHTML:
<img src#3arc4i$o3 alt #3 te6to3 )(
H#perlinks 3anchors4:
Te6to: <a H0-F#3222.2orld.com3(te6to ,ue sale surayado <)a(
Cr+ficos: <a 4ref#3222.2orld.com3(<img src#3gloo.gif3 alt#32orld.com3( <)a(
A p+ginas locales: <a 4ref#page&.4tml(P+gina &<)a(
A una parte especfica de una p+gina:
". Bdentificar la parte:
a. *on el ta de anc4or: <a name#3listacursos3(<)a(
. *on el atriuto id: <di$ id#3listacursos3( ' <)di$(
&. Poner el 4yperlin= a la parte especificada:
a. 5i es en la misma p+gina: <a 4ref#3Vlistacursos3(Lista de cursos<)a(
. 5i es en otra p+gina: <a 4ref#3page&.4tmlVlistacursos3(Lista de
cursos<)a(
Para en$iar un e!mail:
<a 4ref#3mailto:m.imenezWupracd.upr.clu.edu3(Xemaster <)a(
5e puede especificar ,ue el mensa.e tenga un 1su.ect3 y)o 1cc3 en particular:
<a 4ref#3mailto:m.imenezWupracd.upr.clu.eduLsu.ect#*ustomer ,uestion7
Ycc#cfigueroWupracd.upr.clu.edu3(Xemaster<)a(
T4umnails Iuna foto pe,ueHa ,ue al 4acer clic= trae la grandeJ
<a 4ref#3igimage..pg3(<img src#3t4umnailimage..pg3 alt#3*lic= to enlarge
I"9:ZSJ3(<)a(
Control del contenido
*entralizar: <center( texto, grficos, tables <)center(
*ita e6tensa: <loc=,uote( texto <)loc=,uote(. 5e despliega tpicamente
sangrado.
Bnsertar caracteres especiales: Ynomre est+ndar o YV4e6adecimal. -.emplo:
mayor ,ue: Ygt o YVF& Ntros: Yamp IampersandJ Ycopy Icopyrig4tJ
Lneas 4orizontales: <4r( Ino tiene end!tagJ. Atriutos: align Irig4t%center%leftJ% color%
nos4ade% size IgruesoJ% 2idt4 Ilargo 4oriz.M puede ser asoluto o un porciento:
2idt4#E: o 2idt4 #3[9\3
5istas
Html pro$ee para $arios tipos de listas: ulleted% enumeradas% de definici;n.
Listas con bullets (unordered lists)
<ul( <li( "er elemento <li( &ndo elemento ' <)ul(
Atriuto: t#pe#tipo 6 tipo puede ser: disc% circle o s,uare
-.emplo:
<p( Los cursos re,uisito de la concentraci;n son:
<ul(
<li( 5B*B ?&99 Algoritmos y programaci;n
<li( 5B*B E&FF Aplicaciones comerciales
<li( 5B*B E:&9 An+lisis y diseHo de sistemas
<li( 5B*B E:"9 Sases de datos
<)ul(
Listas numeradas (ordered lists)
<ol(<li( "er elemento <li( &ndo elemento ' <)ol(
Atriutos: start#n t#pe#tipo
n es el n>mero en el cual empezar
tipo puede ser: A Iletras may>sculasJ% a Iletras min>sculasJ% B In>meros romanos may>sculasJ% B
In>meros romanos min>sculasJ% " In>meros ar+igosJ
<p( Pasos para poner sus p+ginas en el ser$idor:
<ol(
<li( Aseg>rese ,ue la p+gina principal est+ en un arc4i$o llamado: inde6.4tml
<li( *ada una de las p+ginas est+ en un arc4i$o con e6tension .4tml
<li( 5i el sistema es /ni6 se espera generalmente ,ue las p+ginas se colo,uen en
un sudirectorio llamado: pulic@4tml
<li( /tilice un programa de FTP para copiar los arc4i$os .4tml% los ,ue contienen
gr+ficos y los .css al directorio en el ser$idor.
<)ol(
<ota importante: Las listas numeradas y de 1ullets3se pueden anidar tanto si son del mismo
tipo como de tipos diferentes.
Listas de definicin (definition lists)
-ste tipo de lista se utiliza para 4acer glosarios% diccionarios% listas de trminologa.
<dl( <dt( "er termino a definir <dd( definicion del "er termino <dt( &ndo termino <dd( definici;n
&do ' <)dl(
-.emplo:
<H&( Trminos communes relacionados al sistema inario <)H&(
<dl(
<dt(Sit
<dd(Tgito inario% un " o un :.
<dt(Syte
<dd(Nc4o its% la cantidad de its para almacenar un caracter.
<)dl(
5ale desplegado as:
Trminos communes relacionados al sistema binario
Sit
Tgito inario% un " o un :.
Syte
Nc4o its% la cantidad de its para almacenar un caracter.
St#le Sheets
HTML se cre; para decriir el contenido de un documento% no para formatearlo. Muc4as
personas consideran ,ue una de las aportaciones principales de HTML E.: es el apoyo y nfasis
en el uso de *adcading 5tyle 54eets I*55J. *55 se utiliza para controlar formateo del
documento tales como tipo de letra% colores% etc. La intenci;n es aplicar las mismas reglas de
formato a todo el documento. Te 4ec4o% esto tra.o como consecuencia ,ue una serie de tags de
uso muy com>n 4ayan sido ya identificadas como 1deprecated3 o sea ,ue no se recomienda su
uso ya ,ue $an a ser eliminadas en pr;6imas $ersions de HTML. Algunos de estos tags son:
asefont% font y center.
HTML E.: pro$ee E formas de usar styles:
72n1line8 U especificaciones de estilo ,ue aplican >nicamente al tag donde se definen.
Para esto se usa el atriuto de 15TDL-3. -.emplo: <H" style#3color:lueM font!style:
italic3( -ste 4eader sale en azul e italics <)H"( <H"(D este no <)H"(
7*mbedded8 U especificaciones de estilo ,ue aplican a la p+gina entera. 5e define y
utiliza en el documento mismo.
<4ead(
<title(-.emplo emedded styles <)title(
<style type#3te6t)css3(
<7]
H" ^color:lueM font!style:italic_
!! (
<)style(
<)4ead(
<ody(
<4"(-ste encaezado sale en azul e italic <)4"(
<4"(D este tamin <)4"(
<)ody(
<)4tml(
75ink8 U se prepara una 4o.a general de estilo y se 4ace referencia a la misma desde
todas las p+ginas del documento. 5i se 4ace un camio al style s4eet este se refle.a en
todas las p+ginas del documento.
". 5e crea un arc4i$o con e6tension .css. -.emplo: estilo5B*B.css
&. -l arc4i$o contiene instrucciones de estilo:
H" ^color:lueM font!style: italic_
?. -n el documento ,ue 4ace referencia al 1style s4eet3:
<4ead(
<title(-.emplo de lin=ed styles <)title(
<lin= rel#styles4eet type#3te6t)css3
4ref#3estilo5B*B.css3(
<)4ead(
<ody(
<4"(-ste encaezado sale en azul e italic <)4"(
<4"(D este tamin <)4"(
<)ody(
<)4tml(
72mported8 U se prepara una 4o.a de estilo y se importa a la p+gina por mdeio del
directi$o: Wimport.
Sintxis
5elector ^declaration"M declaration&M '. TeclarationnM_
*ada declaration tiene el formato declaration property: declaration value
-.emplo: 4" ^color:purpleM text-align:center}
Colores
Para especificar el color de alg>n elemento de la p+gina% puede utilizar $arios mtodos:
9:" color U Los monitores despliegan los colores utilizando una cominaci;n de
intensidades de ro.o I9edJ% $erde I:reenJ y azul I"lueJ. Los $alores de intensidad son
n>meros del : al &99. La forma m+s com>n de e6plesar los ? n>meros es en
4e6adecimal usando & dgitos para cada uno: VFF::::% pero se pueden e6presar en
decimal tamin: rgI&99%:%:J
(ombre del color: -6iste una lista de "E[ colores predefinos para *55.
I4ttp:))222.2?sc4ools.com)cssref)[email protected]
HS5 U Ntra forma de especificar color de forma numrica y se compone de Hue I: a
?F:J% 5aturation I\J% Lig4tness I\J 4slI"&:% F9\% [9\J.
<ota: -n ro2sers m+s recientes se puede utilizar: 0CSA y H5LA los cuales tienen un cuarto
$alore ,ue corresponde a la opacidad el cual es un n>mero entre : y " donde : es
completamente transparente y " es completamente opaco.
La cominaci;n de colores utilizada en una p+gina de Xe es un elemento importante en 4acer
,ue una p+gina de Xe sea atracti$a y efecti$a. -6isten $arios lugares de Xe ,ue generan
es,uemas de colores% como: 4ttp:))colorsc4emedesigner.com). Adem+s est+ 222.colr.org ,ue
genera un es,uema a ase de los colores en una imagen.
IDs y Class
*55 permite definir estilos ,ue apli,uen a solo algunas instancias de un elemento por medio de
los atriutos 1id3 y 1class3. BT se usa para definir estilos para un elemento% el elemento con el id
especificado. /na p+gina dee tener un solo elemento con un id en especfico y un elemento
puede tener un solo id.
*;emplo 1: id
<4ead(
<style type#`te6t)css`(
V4doc
^
te6t!align:centerM
color:greenM
_
<)style(
<ody(
<4" id # 4doc( -ste p+rrafo es afectado por el estilo 4doc <)4"(
<4"( Los dem+s 4eaders no se afectan <)4"(
*;emplo 2: id
<4ead(
<style type#`te6t)css`(
.$erde
^
color:greenM
_
<)style(
<ody(
<4" class#$erde( -ste 4eader es afectado por el estilo $erde <)4"(
<4"( Los 4eaders sin el class $erde no se afectan <)4"(
<4" class#$erde( -ste 4eader se afecta <)4"(
<p class#$erde(-ste p+rrafo tamin se afecta<)p(
Mltiples Estilos
Tado ,ue una misma p+gina puede tener estilos inline% emedded y lin=ed y y stos pueden
afecta un mismo elemento% los estilos $an a formar uno $irtual en cascada de acuerdo a la
siguiente prioridad Ide mayor a menorJ:
". Bnline style
&. -medded
?. -6ternal
E. Sro2ser default
Estilos
Hay estilos para descriir: ac=grounds% te6to% fonts% lin=s% listas% talas% etc. 8er tutorial de
2?scools para la lista completa.
Fonts en CSS
propiedades:
Font!2eig4t U oldness numrico "::% &::% 'a:: o te6to: normal% old% older% lig4ter
Font style U italics Inormal% italic% oli,ue
Font!size ! numeric en pi6els ""p6 o point size "bpt o te6to : 66!small% 6!small% small%
medium% large% 6!large% 66!large
Font!family: typefaces: arial% etc.
Te6t!align : left% rig4t% center
Uso de CSS para describir el formato de una pgina
Box Model
Los elementos de HTML se consideran ca.as para prop;sito de diseHo. La ca.a se compone de:
margen% orde% relleno IpaddingJ y contenido: IFuente: 2?sc4oolsJ
Usando div para layout
Hasta 4ace relati$amente poco% se itilizaa mayormente talas para alinear componentes de una
p+gina ya ,ue los ro2sers se tardaronmuc4o en apoyar los directi$os *55 para definir el layout
de una di$isi;n Idi$J. Por lo tanto% m+s recientemente se usa di$ y *55 como mecanismo para
definir el formato de una p+gina.
-.emplo:
Tefinir el formato de & di$isiones di$" y di$&.

-n la secci;n de style:
.di$" ^ 2idt4: &::p6M
Heig4t: &::p6M
Sac=gound!color: lueM
Sorder: das4edM
Padding: 9p6M
_
.di$& ^ 2idt4: "::p6M
Heig4t: "::p6M
Sac=gound!color: yello2M
Sorder: ridgeM
Padding: 9p6M
Margin: ":p6
_
-n el ody:
Pruea " ! separadas:
<di$ class#3di$"3(
*a.a n>mero uno
<)di$(
<di$ class#3di$&3(
*a.a numero dos
<)di$(
Pruea & ! anidadas:
<di$ class#3di$"3(
*a.a n>mero uno
<di$ class#3di$&3(
*a.a numero dos
<)di$(
<)di$(
Propiedades CSS para posicionamiento
Position
La propiedad position indica el tipo de posici;n ,ue se $a a especificar para el elemento.
8alores:
Static Iel defaultJ indica ,ue $a a utilizar el flu.o normal para colocarlo% no se puede usar
propiedades para controlar posicionamiento 4orizontal o $ertical.
9elati%e al utilizar esta opci;n se puede utilizar las propiedades left)rig4t para
posicionamiento 4orizontal y top para $ertical. Las posiciones especificadas mediante
top o left)rig4t son relati$as al elemento ,ue la contiene y constituye un desplazamiento.
<bsolute al utilizar esta opci;n se puede utilizar las propiedades left)rig4t para
posicionamiento 4orizontal y top para $ertical. Las posiciones especificadas mediante
top o left)rig4t son relati$as al elemento ,ue la contiene y constituye una posici;n
especfica con relaci;n al ,ue lo contiene.
Left, Right, Top
5e utilizan para especificar cantidad a desplazarse Irelati$eJM posici;n IasolutoJ. 8alores:
Auto Ilo calcula el ro2serJ
Pi6els o centimetros -.. ":p6 o "cm Ipueden ser negati$osJ
Porciento. -.. "9\
-n secci;n de style:
4" ^ac=ground!color: yello2M padding: 9p6M color: redM _
Vmaincontent ^position:relati$eM left:E:p6M _
-n el ody :
<4"(*af Taasco <)4"(
<di$ id#maincontent(
<p( *af Taasco es una nue$a propuesta grastrn;mica. <)p(
<)di$(
loat
-l ro2ser posiciona el elemento de acuerdo al flu.o normal% pero lo 1flota3 4acia la derec4a o
iz,uierda dentro del elemento ,ue lo contiene. 8alores:
Left o rig4t
Clear
*lear se utiliza para terminar un 1float3. 8alores:
Left% rig4t o ot4
!"emplo de divs para definir el formato de una p#gina
Sanner
<a$igation Sar
5idear Main content
Footer
*n el bod# de la p&gina:
<di$ style#container(
<di$ style#4eader(
<di$ style#anner(
Sanner
<)di$(
<di$ style#na$(
<a$igation Sar
<)di$(
<)di$(
<di$ style#sidear(
5idear
<)di$(
<di$ style#maincontent(
Main content
<)di$(
<di$ style#footer(
Footer
<)di$(
<)di$(
*n el element st#le en el head o en un archi%o.css:
C$mo hacer %arras de navegaci$n hori&ontales
Para 4acer una arra de na$egaci;n 4orizontal se utiliza un 1unordered list3 <ul( con las
siguientes propiedades para el tag <li(: displa#:inline Ien la misma lneaJ # list1st#le:none Ino
desplegar un ulletJ
-.emplo:
*n el bod#:
<ul id#na$list(
<li(-nlace " <)li(
<li(-nlace &<)li(
<li(-nlace ? <)li(
<li(-nlace E <)li(
<)ul(
*n el elemento st#le o un .css
Vna$list li
^
displa#: inline6
list1st#le1t#pe: none6
padding!rig4t: &:p6M
_
Ta%las
Las talas se utilizan para desplegar datos de forma taular.
Los elementos de una tala son: los datos% encaezados de fila y columna y 1captions3.
5int+6is general:
<tale(<tr( fila "<)tr( <tr( fila &<)tr(' <)tale(
Tala con descripci;n IcaptionJ
<tale(<caption( Te6to al pie de la tala <)caption( <tr( fila "<)tr( <tr( fila &<)tr(' <)tale(
*ada fila a su $ez puede contener:
<td( dato <)td(
<t4( 4eading <)t4(
Table
-l elemento 1tale3 define una tala.
Tr
Tag para cada fila de una tala. Los atriutos principales son:
align= bgcolor= %aligin como en 1tale3% pero controlando la apriencia de las celdas de la fila.
Th # Td
Tags para los 14eadings3It4J y datos ItdJ en una tala. T4 se utiliza para indicar ,ue el contenido
de la celda es un encaezado Ide fila o de columnaJ. Td se utiliza para indicar ,ue el contenido
de la celda es un dato.
>idth#n el anc4o de la celda
colspan#n una celda puede ocupar $arias columnas de anc4o. n es la cantidad de columnas.
-sto se usa a menudo en los encaezados de las talas.
ro>span#n la celda puede tamin ocupar $arias celdas de alto. n es la cantidad de celdas
-.emplo:
<tale (
<caption (cuin Tesarroll; el 5ite <)caption(
<tr(
<t4 ( Tesarrollador <)t4(
<t4 (Frecuencia<)t4(
<)tr(
<tr(
<t4 (<p(<<)t4(
<t4 \<)t4(
<)tr(
<tr(
<td(Bn!4ouse<)td(
<td("[<)td(
<td(Fb<)td(
<)tr(
<tr(
<td(Bn!4ouse con consultores<)td(
<td(?<)td(
<td("&<)td(
<)tr(
<tr(
<td(Firma de consultora<)td(
<td(&<)td(
<td(b<)td(
<)tr(
<tr(
<td(Parte del costo del pro$eedor de acceso al Bnternet<)td(
<td("<)td(
<td(E<)td(
<)tr(
<tr(
<td(Ntro<)td(
<td(&<)td(
<td(b<)td(
<)tr(
<)tale(
5e despliega as:
Desarrollador
0recuencia
(
?
Bn!4ouse "[ Fb
Bn!4ouse con consultores ? "&
Firma de consultora & b
Parte del costo del pro$eedor de acceso al Bnternet " E
Ntro & b
cuin Tesarroll; el 5ite
2mage ,aps
Bmagen ,ue dependiendo del lugar donde est el cursor al 4acer clic= transfiere a diferentes
4yperlin=s. Para lograr esto se asocia con el gr+fico un 1image map3 indicando las areas donde
$a cada 4yperlin= y el /0L asociado con el mismo.
-l image map puede ir en el ser$idor Iser$er!side image mapJ o en el mismo documento en 4tml
Iclient!side image mapJ.
Client-side image map
<map name#3nomre del map3 ( <)map(
<area s4ape#forma coords#3coordenadas area3 4ref#3url3 alt#3te6to descripti$o3(
form puede ser: circle IcircJ% polygon IpolyJ% rectangle IrectJ
coordenadas 5i es un crculo: 6%y%r Icoordenadas centro y el radioJ
5i es un polgono: 6"%y"%6&%y&%' Icoordenadas de $erticesJ
5i es un rect+ngulo: 6"%y"%6&%y& Icoordenadas diagonalesJ
-.emplo:
". -n alg>n lugar en el documento :
<map name@8uprmap3(
<area s4ape#3rect3 coords#3"9:%??[%"[[%?EF3 4ref#3fac4um.4tml3(
<area s4ape#3rect3cords#3'. (
<)map(
&. -n el <ody( en el lugar d;nde $a la imagen ,ue tiene el mapa:
<img alt#3/pr Map3 src#3upr.gif3 usemap@8Auprmap3(
Hay soft2are para crear el mapa: 4ttp:))222.image!maps.com) o us,ue en google.
C/mo montar las p&ginas en el ser%idor
1. <segBrese Cue la p&gina principal estD en un archi%o llamado: inde+.html o inde+.htm
&. Tetermine los arc4i$os necesarios. Tee incluir: cada arc4i$o con e6tension .4tml ,ue
contiene una p+gina de su site% cada arc4i$o de gr+ficos utilizados en las p+ginas: .gif o ..pg%
style s4eets: .css
?. Bndague sore d;nde en el ser$idor poner las p+ginas. -n el caso especfico de este curso
se $an a colocar en el sudirectorio S2C2 a.o "?F."E9."Fa.?. -l ser$idor de Xe espera ,ue
las p+gina se colo,uen a.o un sudirectorio de la cuenta llamado >>>root. "a;o este
directorio se cre/ uno llamado S2C2 # ba;o este uno con el primer nombre de cada uno
de ustedes= la primera letra en ma#Bscula= el resto minBscula. *ste nombre es
tambiDn su login # su contraseEa.
a. 8an a colocar sus arc4i$os a.o el folder con su nomre usando un programa cliente
de FTP como: X5!FTP.
. Para acceder luego las p+ginas ,ue mont; escria en 1address3 del ro2ser: 4ttp:)
"?F."E9."Fa.?)5B*B)nombre Idonde nomre es su primer nomreJ
E. Monte IuploadJ las p+ginas en el ser$idor. -6iste un programa 1s4are2are3 ,ue est+
disponile en el Xe llamado X5!FTP ,ue es muy f+cil de usar. -n el *A** tienen
montado en F m+,uinas un cliente llamado *N0- FTP
a. Ponga a funcionar X5@FTP o *N0-!FTP. 5i es en el *A**% proalemente ya
est+ configurado para conectarse a 1sici3.
. X5!FTP tiene & +reas para mostrar arc4i$os: una para los arc4i$os de su
computadora y otra para los del Xe 5er$er. 5i est+ 4acindolo desde su m+,uina%
lo primero ,ue tiene ,ue 4acer es definir una cone6i;n al 2e ser$er. 5i ya est+
configurado aparecer+ en la $entana: un nomre ,ue identifica al ser$idor del
*A** . 5i no est+ configurado 4aga clic en el enlace para definir una cone6i;n
remota e ingrese: 5er$idor *A** para el 5ite <ame% "?F."E9."Fa.? como el Host
<ame e ingrese su primer nomre con may>scula la primera letra como /ser BT y
Pass2ord.
c. Haga clic en NZ para conectarse. 8er+ mensa.es de las acciones lle$adas a cao
en el espacio sore los otones. 5i todo est+ ien aparecer+ el directorio de sici
listado en el marco derec4o en la $entana.
d. Haga dole clic en sici para $er los folders a.o sici y 4aga dole clic en el suyo.
e. Te forma similar a M5 -6plorer 4aga ,ue en el marco de la iz,uierda salga listado el
directorio donde est+n los arc4i$os a montar. 5elecci;nelos y 4aga clic en el ot;n
de la flec4a 4acia la derec4a.
f. 8erifi,ue lo montado con el ro2ser: 4ttp:) "?F."E9."Fa.?)5B*B)nombre Idonde
nomre es su primer nomreJ
g. 5i no le sale su p+gina inicial% aHada el nomre del arc4i$o de la p+gina Iinde6.4tmlJ
al /0L anterior: 4ttp:) "?F."E9."Fa.?)5B*B)nombre/inde6.4tml.
0orms
Los forms son utilizados para solicitar informaci;n de los usuarios o clientes% como por e.emplo
datos para una orden Inomre cliente% direcci;n postal% forma de pago% etc.J. -l form se
compone de controles Ite6to6es% radio uttons% etc.J y contenido regular del 1ody3 de un
documento en 4tml. -l form es delimitado por el tag de <form(.
<form atriutos(
contenido del formulario
<)form(
Los atriutos mas importantes son:
action#3url de la aplicacion ,ue procesa el form3
-.emplos: action#3mailto:m.menezWupracd.upr.clu.edu3 Ien$iar datos por e!
mailJ
action#3 4ttp:))222.geo!engineering.com)cgi!in)register.asp3
Iin$ocar el programa 1register.asp3 ,ue se encuentra en el
ser$idor.
met4od#metodo
-l metodo es la forma en ,ue se en$iar+n los datos ingresados por medio del
form a la aplicaci;n.
')ST en$ia los datos en & pasos: primero in$oca la aplicaci;n especificada en
1action3 y luego en una transmisi;n por separado en$a los datos.
:*T el ro2ser en$a los datos .unto con el /0L de 1Action3 al ser$idor
<ota: como parte del /0L se puede siempre en$iar par+metros e6plicitamente: 14ttp:))222.geo!
engineering.com)cgi!in)register.aspLnum#&:Ytype#&3
Elementos de un form
/n form puede contener todos los tags $alidos de 1ody3 de un documento. Adem+s 4ay una
serie de controles ,ue se utilizan >nicamente en los forms: <input(% <select(% <te6tarea( y
<utton(
FinputG
5a ma#oria de los controles se definen con este tag. -ste tag tiene el atriuto: t#pe el cual
especifica el tipo de control: te6t% c4ec=o6% radio% etc. A continuaci;n un resumen de cada tipo:
su uso y los atriutos principales usados con ese tipo. HTML9 tiene tipos nue$os: email% url%
numer% range% date pic=ers% searc4 y color.
checkbo+
/sado para ,ue el usuario mar,ue si desea o no una opcion.
Atriutos:
t#pe#c4ec=o6
name#nomre del dato
%alue#$alor asignado si el c4ec=o6 es marcado
checked si se usa indica ,ue por defecto el c4ec=o6 est+ marcado
-.emplo".
<p(Periodicamente le en$iamos a nuestros clientes anuncios sore ofertas y otros e$entos de
inters.
<p(<input type#c4ec=o6 name#MailList $alue#3Des3 c4ec=ed(Teseo reciir anuncios de
ofertas
5i la persona marca este c4ec=o6 se reciir+ el dato: MailList#Des
-.emplo &.
<p(Mar,ue los lengua.es en los ,ue sae programar:
<p(<input type#c4ec=o6 name#Language $alue#3*3( *
<p(<input type#c4ec=o6 name#Language $alue#3*OO3( *OO
<p(<input type#c4ec=o6 name#Language $alue#38S3( 8isual Sasic
5uponga ,ue la persona marca el primero y el ultimo% los datos en$iados ser+n:
Language#* Language#8S
-.emplo ?.
<p(Mar,ue los lengua.es en los ,ue sae programar:
<p(<input type#c4ec=o6 name#* $alue#3Des3( *
<p(<input type#c4ec=o6 name#*plus $alue#3Des3( *OO
<p(<input type#c4ec=o6 name#8S $alue#3Des3( 8isual Sasic
5uponga ,ue la persona marca el primero y el ultimo% los datos en$iados ser+n:
*#Des 8S#Des
radio
/sado para ,ue el usuario eli.a una sola de entre $arias opciones.
Atiutos:
t#pe#radio
name#nomre del dato
%alue#$alor asignado si el ot;n es marcado
checked si se usa indica ,ue por defecto el ese ot;n est+ marcado
-.emplo:
<p(5e6o:
<p(<input type#radio name#se6o $alue#3F3(Femenino
<p(<input type#radio name#se6o $alue#3M3(Masculino
5i el usuario marca Masculino% el dato ,ue se en$a es: se6o#M
te+t
Pro$ee lanco para ,ue el usuario ingrese un dato por medio del teclado.
Atriutos:
t#pe#te6t
name#nomre del dato
%alue#$alor asignado por defecto
ma+len#largo ma6imo del dato en caracteres
size#largo del lanco% si es menor ,ue ma6len% se 4ace 1scrolling3
-.emplos:
<p(<omre <input type#te6t name#cliente size#&: ma6len#?9(
<p(Rip *ode<input type#te6t name#zip size#9 ma6len#9(
<p(Pais <input type#te6t name#pais size#& ma6len#& $alue#3P03(
pass>ord
Pro$ee un lanco para ingresar datos% pero el usuario no puede $er los caracteres.
Atriutos:
Atriutos:
t#pe#pass2ord
name#nomre del dato
%alue#$alor asignado por defecto
ma+len#largo ma6imo del dato en caracteres
size#largo del lanco% si es menor ,ue ma6len% se 4ace 1scrolling3
-.emplo:
<p(*ontraseHa <input type#pass2ord name#pass $alue#3none3(
<ota importante: -sto solo pro$ee para ,ue no se despliegue el dato en el form% pero al en$iarlo
lo $a en$iar como te6to sin encryption.
file
Pro$ee un lanco con un ot;n ,ue dice 1Sro2se3 para ,ue el usuario indi,ue el nomre de un
arc4i$o en su computadora. *omo consecuencia% se $a a en$iar el arc4i$o.
Atriutos:
t#pe#file
name#nomre del dato
size#largo del lanco

<p(-n$ienos un arc4i$o: <input type#file name#arc4i$o(

"otones de acci/n
-stos son los & otones ,ue suelen aparecer en casi todo form. Hay & tipos: sumit y reset. -l
primero causa ,ue se en$e al ser$idor el url a.o 1action3 y los datos ingresados. -l 5egundo
orra el formulario.
Atriutos:
t#pe#sumit o reset
name#nomre del dato
%alue#<omre ,ue aparecer+ en el ot;n
-.emplos:
<input type#sumit $alue#3-n$iar3(
<input type#reset $alue#3Sorrar3(
"otones a la medida
5e puede poner una imagen cual,uiera como ot;n para crear otones a su gusto.
Atriutos:
t#pe#image
name#nomre del dato
src#3url de la imagen3
align#alineacion
-.emplo:
<p( 5earc4 for <input type#te6t name#searc4te6t size#&: (<input type#image src#3go.gif3
name#go(
5i la persona 4ace clic en el ot;n se en$iar+n las coordenadas del punto con respecto al origen
en el e6tremo superior iz,uierdo de la imagen. *ada coordenada $a precedida del nomre del
campo: go."? go.&:
hidden
-ste tipo de control pro$ee para colocar campos 1escondidos3. N sea est+n a4% pero no se
despliegan. Al en$iar los datos del form se en$ian estos datos a>n cuando no se despliegan. /n
uso es para ,ue el ser$idor pueda en$iar datos y almacenarlos a4% para ,ue luego se en$ien
.unto con los demas ingresados por el usuario. Por e.emplo en una aplicaci;n de un form de
mas de una pagina se podria tener un 4idden field en la 5egunda pagina coninformaci;n de la
primera Ipor e.empo el nomre del clienteJ% as el usuario no la tiene ,ue teclear otra $ez% pero el
ser$idor recie el dato .unto con lo de la segunda pagina.
Atriutos:
t#pe#4idden
name#nomre del dato
%alue#$alor del dato
FselectG
-ste tag pro$ee un control an+logo a un list o6. 5e utiliza .unto con otros tags: <option(.
<optgroup(
Atriutos de <select(:
name# nomre del dato
size# n>mero de opciones $isiles
multiple el usuario puede seleccionar mas de uno con ctrl!clic
Atriutos de <option(:
%alue# $alor a ser asignado si la opcion es seleccionada
selected si por defecto esta opci;n aparece selccionada
label#te6to ,ue aprecera en la lista
-.emplo":
<p( Bndi,uenos la razon principal para la de$oluci;n
<p(
<5elect name#return (
<option $alue#3<F3( <o funciona
<option $alue#3TF3( <o era lo ,ue creia
<option $alue#3*L3( <o me gusto el color
<option $alue#3NT3( Ntra
<)select(
-.emplo &:
<p( Bndi,uenos las razones para la de$oluci;n: *trl!clic para cada raz;n a incluir
<p(
<5elect name#return multiple (
<option $alue#3<03( -li.a las razones
<option $alue#3<F3( <o funciona
<option $alue#3TF3( <o era lo ,ue creia
<option $alue#3*L3( <o me gusto el color
<option $alue#3NT3( Ntra
<)select(
Fte+tareaG
Pro$ee un area para un dato de multiples lineas.
Atriutos:
name#nomre del dato
ro>s@cantidad de filas
cols#cantidad de columnas
-.emplo:
<p(*omentarios:
<p(<te6tarea name#comments cols#9: ro2s#F( -scria a,ui sus comentarios <)te6tarea(
FbuttonG
Tefinir un ot;n. 0e>ne en un solo tag lo logrado por: <input type#sumit(% <input type#reset(
y <input type#utton(
Atriutos:
t#pe#sumit% reset o utton
-.emplo ":
<utton type#sumit(<)utton(
-.emplo &:
<utton type#sumit(-n$iar <)utton(
-.emplo?:
<utton type#sumit( -n$iar <img src#3sore.gif3 align#middle(<)utton(
Otras opciones
-6isten otras opciones relacionadas con forms ,ue solo $amos a mencionar: Los campos de un
form pueden ser puestas como read1onl#. Tamin pueden ser 7disabled8 temporeramente.
Los campos pueden ser agupados con el tag <fieldset(
5o "&sico de D#namic HT,5
Procesando el form
HTML pro$ee para e.ecutar aplicaciones ,ue corren en el cliente Ila computadora del usuarioJ:
client1side scripts y para aplicaciones ,ue corren en el ser$idor:ser%er1side scripts.
Tpicamente los datos ingresados son $alidados al ingresarse por client!side scripts y al
oprimirse el ot;n de 1sumit3 son entonces procesados por ser$er!side scripts. La $alidicai;n
puede tamin realizarse ser$er!side.
4ttp:))222.2?sc4ools.com)sitemap)default.asp
Hay La forma est+ndar de in$ocar un ser$er!side script es *CB I*ommon Cate2ay BnterfaceJ.
Los programas *CB pueden ser escritos en cal,uier lengua.e de programaci;n apoyado por el
ser$idor% como por e.emplo: /ni6 s4ell% PHP% 8isual Sasic% *V. P4p puede tamin correr como
un Apac4e Module I*NMPBLATNJ
-l programa de aplicaci;n procede tpicamente a 4acer un ,uery o almacenar los datos a una
ase de datos. /na $ez procesa los datos el resultado o contestaci;n es tpicamente producido
en HTML de manera ,ue al reciirlo el ro2ser% ste proceda a desplegarlo.
5i el resultado es en HTML% este tiene el siguiente formato:
". TN*TDP-'
&. <4tml(
?. <4ead(
E. '.
9. <)4tml(
La l;gica tpica de un programa ,ue procesa la forma es la siguiente:
B. -6traer los datos del form. 0ecuerde ,ue los datos son en$iados de la
forma: nomredato#$alor y ,ue adem+s si se usa el mtodo de C-T% los
espacios en lanco son en$iados como signos de 1O3. Por lo tanto la
primera parte consiste de encontrar para cada dato: su nomre y $alor% y por
ultimo reemplazar los signos de O por espacios en lanco.
BB. Procesar los datos. Almacenarlos% o 4acer el ,uery% etc.
BBB. Producir el resultado: -n$iar las lneas de te6to ,ue corresponden a un
documento en HTML:
i. Lnea ,ue contiene: *ontent!type:te6t)4tml
ii. Lnea en lanco
iii. Lnea con <4tml(
i$. Lnea con <4ead(
$. '
$i. Lnea con <)4tml(
Ser%er1side scripting: 'H'
P4p es un lengua.e paraprogramar p+ginas de 4tml din+micas% o sea p+ginas ,ue $aran su
contenido de acuerdo a programaci;n. -.emplos de aplicaciones de p+ginas din+micas: p+ginas
,ue listan un tala de una ase de datos% p+ginas producidas como resultado de procesar un
form.
Las instrucciones de p4p% se intercalan con el 4tml. Las instrucciones se encierran en los tags:
FHphp instrucciones en p4p.
Primer programa
". *on <otepadOO Iindi,ue ,ue el lengua.e es p4pJ u otro editor de te6to o 4tml% cree un
arc4i$o con el contenido siguiente% y gu+rdelo con el nomre: primerphp.php.
&. Pul,uelo en el ser$idor
?. Pruelo: sunomre.2ootzie.com)primerp4p.p4p
E. 8ea el resultado en el ro2ser y $ea el source I$ie2 sourceJ
<7TN*TDP- HTML P/SLB* `!))X?*))TTT HTML E.:"))-<`
`4ttp:))222.2?.org)T0)4tmlE)strict.dtd`(
<4tml(
<4ead(
<title( Primera p+gina din+mica <)title(
<M-TA content#`te6t)4tmlM c4arset#iso!bb9a!"` 4ttp!e,ui$#content!type(
<)4ead(
<ody(
<4"(Primera p+gina din+mica<)4"(
<Lp4p ec4o 1<P(Hola Mundo777<)p(<p( -spero ,ue tengas un onito da<)p(3 L(
<r(<r(
&:"" Ycopy MTJ
<)ody(
<)4tml(
Primera forma p!p "ue la procesa
Cree el html con la forma
". *on <otepadOO Iindi,ue ,ue el lengua.e es 4tmlJ u otro editor de te6to o 4tml% cree un
arc4i$o con el contenido siguiente% y gu+rdelo con el nomre: primeraforma.html.
&. Pul,uela en el ser$idor
<7TN*TDP- HTML P/SLB* `!))X?*))TTT HTML E.:"))-<`
`4ttp:))222.2?.org)T0)4tmlE)strict.dtd`(
<4tml(
<4ead(
<title( Primer form <)title(
<M-TA content#`te6t)4tmlM c4arset#iso!bb9a!"` 4ttp!e,ui$#content!type(
<)4ead(
<body>
<form action#`registro.php` met4od#`post`(
<omre: <input type#`te6t` name#`uname` )(
-dad: <input type#`te6t` name#`age` )(
<input type#`sumit` )(
<)form(
<)ody(
<)4tml(
Cree el php 'ue procesa la forma
Nser$e ,ue la forma indica ,ue $a a ser procesada por el p4p en: registro.p4p% el cual dee
crear a4ora.
". *on <otepadOO Iindi,ue ,ue el lengua.e es p4pJ u otro editor de te6to o 4tml% cree un
arc4i$o con el contenido siguiente% y gu+rdelo con el nomre: registro.php.
&. Pul,uelo en el ser$idor
<7TN*TDP- HTML P/SLB* `!))X?*))TTT HTML E.:"))-<`
`4ttp:))222.2?.org)T0)4tmlE)strict.dtd`(
<4tml(
<4ead(
<title( Primer p4p para procesar un form <)title(
<M-TA content#`te6t)4tmlM c4arset#iso!bb9a!"` 4ttp!e,ui$#content!type(
<)4ead(
<ody(
<4"( Sien$enido a *af Taasco <)4"(
<P(<Lp4p ec4o IJ')STKLunameLMM L( nos alegramos ,ue te 4ayas registrado con
nosotros.<)p(
<p(8emos ,ue tienes <Lp4p ec4o IJ')STKLageLMM L( aHos. Pronto reciir+s noticias nuestras
,ue seguro ser+n de tu inters.<)p(
<)ody(
<)4tml(
Prue%e la forma
". Pruee a4ora la forma solocitando con el ro2ser la p+gina:
sunombre.>ootzie.comNprimeraforma.html
&. Bngrese los datos en los te6to6es
?. Haga clic en 5umit
La diferencia entre P(ST y )!T
-n amos arc4i$os del e.emplo anterior% camie la palara PN5T% por la palara C-T y $uel$a a
pulicarlos. Pruee la forma. Al 4acer clic en el ot;n de sumit% oser$e el /0L generado.
<otar+ ,ue el /0L contiene los datos ingresados por usted% incluyendo los nomres de los
campos.
#ariables de ambiente
/n programa *CB no recie input de la forma regular Iteclado por e..J. 5in emargo es
importante pro$eer el mecanismo para ,ue pueda otener datos pro$istos por el ser$idor. -l
mecanismo utilizado es: %ariables de ambiente Ien$ironment $arialesJ. /ni6 y Xindo2s
pro$een para definir $ariales de amiente% las cuales pueden ser accesadas por cual,uier
programa.
*CB define una serie de $ariales de amiente ,ue se agrupan en tres clases: las ,ue pro$en
informaci;n sore el usuario IclienteJ% las del ser$idor y las del pedido Ire,uestJ.
Oariables sobre el usuario
La s $ariales sore el usuario son:
HTTP@/5-0@AC-<T contiene el nomre y $ersi;n del ro2ser del usuario: name/version
library/version
-.emplo: Mozilla)&.:"J IXindo2sM BM ?& itJ
HTTP@A**-PT Los MBM- formats ,ue el ro2ser acepta: type/subtype,type/subtype
-.emplo: image)gif% image)6!6itmap% image).peg% image% d)d
0-MNT-@HN5T Tirecci;n BP en te6to IT<5J
0-MNT-@ATT0 BP address en notaci;n decimal con puntos
Oariables sobre el ser%idor
Las $ariales sore el ser$idor son:
5-08-0@5NFTXA0
-
nomre y $ersion del soft2are del ser$idor
5-08-0@<AM- pro$ee el nomre del ser$idor IBP o T<5J
CAT-XAD@B<T-0FA
*-
$ersion de *CB ,ue utiliza este ser$idor: C!"/version
Oariables sobre el pedido
c/-0D@5T0B<C 5arta ,ue contiene los par+metros pasados por el mecanismo de L
name#$alorYname#$alorYname#$alor'
5*0BPT@<AM- nomre del arc4i$o de la aplicaci;n *CB
5-08-0@P0NTN*NL nomre y $ersion del protocolo usado para 4acer el pedido:
name/version
-.emplo: HTTP)".:
5-08-0@PN0T n>mero del puerto por el cual $ino el pedido
PATH@B<FN
PATH@T0A<5LAT-T
/n pedido puede incluir un pat4:
4ttp:))222.prue.com)cgi)cgiprog.cgi)a))c Ia))c es un pat4 incluido
como parte del pedidoJ. 5i el pedido incluye un pat4: el pat4 tal y
como estaa en el pedido IPATH@B<FNJ y el pat4 $erdadero
IPATH@T0A<5LAT-TJ
-.emplo: PATH@B<FN # )a))c
PATH@T0A<5LAT-T#)$ar)2e)temp)a))c
*N<T-<T@TDP-
*N<T-<T@L-<CTH
5e llenan si el pedido es del mtodo PN5T. *N<T-<T@TDP-
contiene el tipo de dato: type/subtype y *N<T-<T@L-<CTH
contiene el n>mero de ytes.
A/TH@TDP- Aut4entication met4od
$esplegando las %ariables de un pedido PO&T o 'ET con p!p
". Al arc4i$o p4p del e.emplo anterior Iregistro.p4pJ aH+da las siguientes instrucciones .usto
antes de <)ody(
&. Haga sae y $uel$a a pulicar el arc4i$o.
?. Pruee a4ora la forma solocitando con el ro2ser la p+gina:
sunombre.>ootzie.comNprimeraforma.html
<4"( Mira los $alores de las $ariales *CB generados por tu pedido<)4"(
<p( CAT-XAD@B<T-0FA*-#<Lp4p ec4o eCAT-XAD@B<T-0FA*-M L(<)p(
<p( 0-c/-5T@M-THNT#<Lp4p ec4o e0-c/-5T@M-THNTM L(<)p(
<p( 5*0BPT@<AM-#<Lp4p ec4o e5*0BPT@<AM-M L(<)p(
<p( c/-0D@5T0B<C#<Lp4p ec4o ec/-0D@5T0B<CM L(<)p(
<p( 5-08-0@5NFTXA0-#<Lp4p ec4o e5-08-0@5NFTXA0-M L(<)p(
<p( 5-08-0@<AM-#<Lp4p ec4o e5-08-0@<AM-M L(<)p(
<p( 5-08-0@P0NTN*NL#<Lp4p ec4o e5-08-0@P0NTN*NLM L(<)p(
<p( 5-08-0@PN0T#<Lp4p ec4o e5-08-0@PN0TM L(<)p(
<p( HTTP@/5-0@AC-<T#<Lp4p ec4o eHTTP@/5-0@AC-<TM L(<)p(
<p( HTTP@A**-PT#<Lp4p ec4o eHTTP@A**-PTM L(<)p(
<p( PATH@B<FN#<Lp4p ec4o ePATH@B<FNM L(<)p(
<p( PATH@T0A<5LAT-T#<Lp4p ec4o ePATH@T0A<5LAT-TM L(<)p(
<p( 0-MNT-@HN5T#<Lp4p ec4o e0-MNT-@HN5TM L(<)p(
<p( 0-MNT-@ATT0#<Lp4p ec4o e0-MNT-@ATT0M L(<)p(
<p( 0-MNT-@/5-0#<Lp4p ec4o e0-MNT-@/5-0M L(<)p(
<p( 0-MNT-@BT-<T#<Lp4p ec4o e0-MNT-@BT-<TM L(<)p(
<p( A/TH@TDP-#<Lp4p ec4o eA/TH@TDP-M L(<)p(
<p( *N<T-<T@TDP-#<Lp4p ec4o e*N<T-<T@TDP-M L(<)p(
<p( *N<T-<T@L-<CTH#<Lp4p ec4o e*N<T-<T@L-<CTHM L(<)p(
Client1side scripting
/n documento HTML puede contener 1scripts3 IprogramasJ escritos en lengua.es para este
prop;sito. Los dos lengua.es mas utilizados son: Ja$ascript y 8Sscript.
Ja$ascript fue desarrollado por <etscape como el lengua.e Li$escript. *uando salio Ja$a%
<etscape 4izo un acuerdo con 5un para llamarle Ja$ascript. La $ersion de Microsoft se llama:
Jscript.
8Sscript fue desarrollado por Microsoft y 4asta donde s en <etscape se puede usar solo si se
tiene un plug!in para este proposito.
5e le llama 1script3 a programas en lengua.e de alto ni$el% ,ue son entonces e.ecutados por
medio de interpretes.
Para incluir un 1script3 se utiliza el tag: <script(. A continuaci;n un e.emplo:
<4tml(
<4ead(
<title(*lient!5cripting test<)title(
<)4ead(
<ody(
<p(T4is is a page containing a 8S5cript script and a Ja$ascript script.<)p(
<script language#`8S5cript`(
<7!!
MsgSo6 `Hello Xorld7`%:%`My first acti$e document`
!!(
<)script(
<script language#`Ja$a5cript`(
<7!!
document.2riteIf<H0(Local time isf O TateIJJM
document.2riteIf.<-M(X4atgfs <e2 <)-M(2as last modified onfO document.lastModifiedJM
document.2riteIf<H0(fJM
!!(
<)script(
<)ody(
<)4tml(
<ote ,ue el script en s est+ encerrado dentro de un comentario. -s recommendale 4acerlo
para ,ue en ro2sers ,ue no pueden procesar el 1script3 no le salgan cosas 1e6traHas3 a los
usuarios. -l script tamien podria estar almacenado dentro de un arc4i$o aparte:
<script language#3Ja$a5cript3 src#3test..s3( <)script(
A continuaci;n las pantallas de como procesa el ro2ser el documento.
Al 4acer clic en NZ% aparece lo siguiente: