Ahora, procederemos a crear una pgina web de ejemplo y veremos cmo puede hacerse simplemente con

ciertos conocimientos bsicos del lenguaje HTML. na pgina web es una pgina normal con in!ormaciones
en cuyo te"to intercalamos cdigos o eti#uetas $tags en ingl%s& #ue determinan la !orma en #ue es
mostrada en 'nternet y los enlaces con otras pginas en la red. A!ortunadamente, las pginas web, como
simples archivos de te"to #ue son, !uncionan tambi%n sin necesidad de 'nternet y podemos hacer el
ejercicio a continuacin sin necesidad de conectarnos a la red o colocar nuestros archivos en servidor
alguno.
(sta !acilidad es )til tambi%n para presentar nuestros proyectos, propuestas o muestras de pgina web
antes de subirlas a 'nternet, o en lugares sin acceso a la red. Tan slo necesitamos copiar nuestras pginas
webs y los archivos adicionales usados $gr*cos, !otos, etc.& en nuestra computadora.
(l Hypertext MarkUp Language $HTML& es el lenguaje para la creacin de pginas con enlaces y re!erencias
insertando marcas o cdigos en el te"to normal o in!ormacin de las mismas. (sos enlaces y re!erencias en
el te"to #ue nos llevan a otras pginas web se conocen como hipertexto.
+ota, La pgina #ue a#u- crearemos slo ser visible en nuestra computadora y si #ueremos mostrarla al mundo a trav%s de la
red necesitamos de un lugar para alojarla en 'nternet.
Qu se necesita para
realizar el ejercicio?
Lo primero #ue debemos aclarar a#u- es #ue el ejemplo siguiente mostrar cmo crear una pgina
web sin ninguna herramienta au"iliar, trabajando directamente con el .cdigo !uente. de la pgina.
("isten numerosos programas, tal como se mencion antes, #ue nos permiten crear pginas webs
sin tener #ue ver todos los cdigos incluidos y #ue son tan simples de usar como un procesador de
palabras. (sos programas van desde sencillos au"iliares, hasta completos pa#uetes de dise/o y es
recomendable obtener uno de acuerdo con nuestras habilidades en la computadora y las
e"pectactivas para crear nuestras pginas web. 'ncluso las versiones recientes de los programas
procesadores de palabras incluyen opciones #ue nos permiten crear pginas webs a partir de
nuestros documentos $ver opcin 0ave as HTML o Guardar como HTML en Microsoft Word por
ejemplo&.
1e todos modos, el ejemplo a continuacin es un interesante ejercicio #ue le permitir conocer y
entender un poco mejor la naturale2a de las pginas web. (sto es importante adems por#ue lo #ue
los programas de dise/o de pginas web hacen en todo caso es generar un cdigo similar al de
nuestro ejemplo.
3ara el ejercicio, necesitaremos,
Un editor de texto.
+o importa cual, basta con #ue grabe los archivos como te"to puro o A04'' . Los usuarios de
5indows pueden usar el +otepad incluido en el sistema operativo. 0i lo desea, puede usar
tambi%n su procesador de palabras !avorito, pero tendr #ue asegurarse de grabar los archivos
como "archivos de texto" o "archivos AS!!" $"text "#es" o "AS!! "#es" en ingl%s&.
Un programa navegador.
3ara poder ver las pginas creadas. 6asta con el mismo programa #ue usamos para navegar por
'nternet, ya sea +etscape, 'nternet ("plorer o cual#uier otro.
Etiquetas que
se abren y se cierran
Todas las instrucciones o cdigos #ue colocamos en las pginas HTML se insertan en el te"to
enmarcadas por los s-mbolos 7 y 8. 3or ejemplo, el cdigo o eti#ueta para indicar letras itlicas o
cursivas es 7'8. 6uena parte de estos cdigos tienen su correspondiente eti#ueta para cancelar o
cerrar el comando, usndose generalmente el mismo cdigo, precedido de un .9.. As-, por ejemplo
para mostrar la !rase .la potenciacin de la mujer debe ser parte integral de los programas de
desarrollo. con potenciacin de la mujer en cursivas, escribir-amos .la 7i8potenciacin de la
mujer79i8 debe ser parte integral de los programas de desarrollo..
(l uso de may)sculas o min)sculas no tiene relevancia alguna al usar los cdigos HTML.
Estructura de una
pgina HTML
Toda pgina HTML inicia con la eti#ueta 7html8, indicando as- a los programas navegadores #ue no
se trata de un simple archivo te"to sino de una pgina web y #ue debe ser interpretada como tal.
4orrespondientemente, la )ltima eti#ueta o cdigo insertado en una pgina web debe ser 79html8.
(ntre ambas eti#uetas $o tags en ingl%s& se deben encontrar las dos reas principales #ue componen
la pgina,
La Cabecera (head).
1emarcada por las eti#uetas <head> y </head> $head signi*ca cabe2a en ingl%s&, contiene
in!ormacin sobre el t-tulo de la pgina, su contenido, su autor, temas tratados, etc.
El cuerpo del documento (body).
(s a#u- donde colocamos la in!ormacin #ue ser desplegada en nuestra pgina web, delimitada
por las eti#uetas <body> y </body> $$ody signi*ca cuerpo en ingl%s&.
:eamos entonces un ejemplo simple del te"to #ue con!orma una pgina web t-pica,
<html>
<head>
<title>
Mi Pgina de prueba
</title>
</head>
<body>
<p>
Bienvenido a mi primera <i>pgina web</i>.
<p>
Espero se sientan a gusto y disfruten su visita.
</body>
</html>
(n el ejemplo anterior se usaron di!erentes espaciados para ilustrar las secciones en las pginas,
pero ni las l-neas ni los espacios en blanco o sangr-as, tienen e!ecto alguno en el aspecto *nal de la
pgina web. 4omo vemos, la eti#ueta <title> sirve para de*nir el t-tulo de la pgina, el cual es
desplegado en la barra superior del navegador cuando abrimos la pgina. Tambi%n es usada para
catalogar y archivar nuestra pgina en los directorios y herramientas de b)s#ueda en 'nternet.
1entro del cuerpo $body&, encontramos las eti#uetas <p>, #ue sirven para se/alar el inicio de cada
prra!o y dejar un poco de espacio vertical en su lugar.
Fig. !. "esultado del e#er$i$io% visuali&ado en 'nternet E(plorer.
(scriba las l-neas del ejemplo en un editor de te"to y grbelas en un archivo llamado practica%htm en
!ormato A04'' o de te"to $aun#ue el archivo puede contener acentos, el nombre no debe llevarlos,
as- #ue recuerde no acentuar la primera .a. en practica%htm&. Luego vea ese archivo en su
navegador !avorito escribiendo el nombre completo del archivo y el nombre o directorio donde se
encuentra en la barra de direcciones $donde t-picamente aparece
http&''(((%#adireccion%com'de#sitio')uevisitamos%htm#&. ; si lo desea use la opcin de Abrir en el
men) *i#e y localice el archivo en su disco duro. Al ver dicho archivo en su navegador, se le mostrar
el te"to de la pgina, pero sin las eti#uetas usadas.
Dar colores a una
pgina HTML
0i deseamos introducir un poco de color en la pgina, podemos hacerlo agregando las instrucciones
correspondientes a la eti#ueta <body> en la !orma siguiente, <body bg$olor)blue te(t)yellow>. (sto har #ue el
color de !ondo de la pgina $$ackground co#or o $gco#or en ingl%s& sea a2ul $$#ue en ingl%s& y el color
del te"to sea amarillo $ye##o( en ingl%s&. La eti#ueta body de clausura sigue siendo simplemente
</body> sin importar las opciones incluidas en la eti#ueta body inicial.
Tambi%n podemos colorear ciertas !rases o palabras por separado. sando la eti#ueta <font $olor)red>,
por ejemplo hacemos todo el te"to #ue le siga rojo $font es tipo de letra y red es rojo en ingl%s&,
hasta #ue cancelemos la instruccin con una eti#ueta </font>.
(n ambos casos mencionados, podemos e"perimentar con otros nombres de colores en ingl%s como
(hite+ $#ack+ gray+ maroon+ ye##o(+ #ime+ green+ navy+ a)ua+ o#ive+ purp#e, etc.
lineaci!n del te"to
3ara escribir un te"to centrado o cuyas l-neas est%n alineadas con el margen derecho de la pgina,
incluimos la opcin deseada en la eti#ueta <p>, de !orma tal #ue <p align)$enter> produce te"to centrado
y <p align)right> produce te"to alineado con el margen derecho de la pantalla. 3osteriormente se agreg
otra opcin, la de <p align)#ustify>, #ue produce un te"to espaciado de !orma tal #ue tanto el inicio como
el *nal de cada l-nea terminan en el margen correspondiente de la pgina.
#esaltando
los t$tulos
(l HTML nos o!rece seis eti#uetas distintas para se/alar rpidamente seis niveles jerr#uicos de
t-tulos, cada uno con un tama/o distinto de letras y espaciado vertical antes y despu%s del t-tulo. <h>
es la eti#ueta para indicar un t-tulo principal o grande y se cancela con </h>. As-, para insertar un
te"to o t-tulo grande en la pgina escribimos <h> y este te"to a continuacin aparecer-a grande
hasta #ue insertemos </h>.
Al igual #ue con la eti#ueta de prra!os <p>, podemos incluir dentro de ella las opciones align)$enter y
align)right para centrar el t-tulo o alinear sus l-neas al margen derecho.
Adems de h podemos usar en la misma !orma h*, h+, h,, h- y h.. 4ada una de estas opciones produce
t-tulos de menor tama/o y jerar#u-a #ue h.
L$neas separadoras
4onjuntamente con los t-tulos, el HTML nos brinda una )til eti#ueta #ue nos permite separar
visualmente el contenido y los elementos de nuestra pgina en di!erentes secciones. sando la
eti#ueta <hr> introducimos una simple l-nea separadora #ue atraviesa la pantalla hori2ontalmente.
%altos de l$nea y
prra&os
<a mencionamos el uso de la eti#ueta <p> para indicar el inicio de un prra!o. (sto es necesario
por#ue los navegadores, al leer nuestras pginas escritas en HTML, ignoran los saltos de l-nea y los
espacios en blanco #ue dejamos en el te"to. 0i deseamos #ue el te"to contin)e en la l-nea siguiente,
pero sin el espacio vertical #ue deja la eti#ueta <p>, entonces debemos usar la eti#ueta <br> $del
ingl%s $reak o rotura de l-nea&.
Ta'a(o
del te"to
(n ocasiones deseamos un tama/o menor o mayor para una parte del te"to. 0abemos #ue esto se
puede hacer con las eti#uetas <h>, <h*>, etc., pero dichas eti#uetas inician una nueva l-nea antes y
despu%s del te"to #ue abarcan y, adems, dejan un espacio vertical. 'ncluyendo la opcin si&e)/
dentro de la eti#ueta <font> podemos hacer #ue el te"to hasta la pr"ima eti#ueta </font> apare2ca con
un tama/o menor al normal. 0i #ueremos un te"to a)n ms chico, podemos usar si&e)/*. 1el mismo
modo, si lo #ue deseamos es hacer el te"to mayor, podemos usar si&e)0 si&e)0* para lograr el e!ecto
deseado. ("perimente con diversos tama/os y observe #u% ocurre.
La opcin si&e) puede ser usada en combinacin con la #ue vimos antes de $olor) sin problemas y sin
importar el orden en #ue las colo#uemos. As- da igual escribir <font $olor)red si&e)0> #ue <font si&e)0
$olor)red>.
:eamos un nuevo ejemplo ahora con las cosas #ue hemos aprendido.
<html>
<head>
<title>
'123"45 en la red
</title>
</head>
<body bg$olor)navy te(t)white>
<h align)$enter>
<font $olor)yellow> 'nstituto 'nterna$ional de 'nvestiga$iones y 6apa$ita$i7n para la Promo$i7n de la Mu#er<br>
/ '123"45 /
</font>
</h>
<hr>
<p align)$enter>
Bienvenidos a nuestras ofi$inas virtuales% donde esperamos brindarles un me#or servi$io y una v8a dire$ta alternativa de
$omuni$a$i7n e informa$i7n de apoyo para la <i>poten$ia$i7n de la mu#er</i>.
<hr>
<h,>
67mo $onta$tarnos
</h,>
<p align)right>
<font $olor)lime si&e)/>
69sar 1i$ols Penson :*/4<br>
2anto ;omingo% "ep<bli$a ;omini$ana<br>
=>:!?.>-/* / fa( =>:!?.>-/*@<br>
$orreo/eA instraw.hB.sdC$odetel.net.do
</font>
</body>
</html>
)nsertar listas
en el te"to
4uando preparamos material en l-nea, !recuentemente preparamos listas de art-culos u opciones al
resumir los te"tos, en la !orma,
Los o$,etivos de# !-ST!TUT. son&
/stimu#ar y asistir e# avance de #a mu,er+ por medio de #a investigaci0n+ #a capacitaci0n y #a reco#ecci0n y
diseminaci0n de informaci0n%
Hacer m1s visi$#e #a contri$uci0n de #a mu,er a# desarro##o%
Apoyar #os esfuer2os de organi2aciones inter3gu$ernamenta#es+ gu$ernamenta#es y no gu$ernamenta#es
para estos "nes%
(n HTML podemos crear !cilmente dichas listas y poner sangr-a a cada uno de sus componentes
usando las eti#uetas <ul>, <ol> y <li>. 4on <ul> $inciales de un3ordered #ist o lista no ordenada en ingl%s&
indicamos #ue vamos a introducir una lista no numerada como en el ejemplo mostrado arriba. Luego,
usamos <li> delante de cada uno de los elementos de la lista y *nalmente cerramos o indicamos el
*nal de la lista con </ul>.
(l ejemplo anterior, se escribir-a as- en HTML,
<p>
Dos ob#etivos del '123"45 sonA
<ul>
<li>
Estimular y asistir el avan$e de la mu#er% por medio de la investiga$i7n% la $apa$ita$i7n y la re$ole$$i7n y disemina$i7n de
informa$i7n.
<li>
Ea$er ms visible la $ontribu$i7n de la mu#er al desarrollo.
<li>
4poyar los esfuer&os de organi&a$iones inter/gubernamentales% gubernamentales y no gubernamentales para estos fines.
</ul>
(n caso de #ue deseemos #ue cada opcin sea numerada automticamente, usamos <ol> $iniciales de
ordered #ist o lista ordenada en ingl%s& con su correspondiente </ol> para abrir y cerrar la lista y cada
uno de sus elementos ser numerado automticamente como =., >., ?., etc. 0i deseamos #ue la
numeracin se haga en !orma al!ab%tica $a., b., c., etc.& en ve2 de num%rica, simplemente iniciamos
la lista entonces con la eti#ueta <ol type)a>.
)nsertar gr&icos
en nuestras pginas
3ara colocar imgenes, !otos, ilustraciones o cual#uier tipo de gr*cos en nuestras pginas HTML,
debemos usar !ormatos gr*cos estndares #ue puedan ser vistos por la mayor-a de los usuarios en
'nternet. Los dos !ormatos ms comunes y #ue son mostrados sin problemas por prcticamente por
todos los navegadores gr*cos en cual#uier plata!orma son el gi! $ompuserve Graphics !nterchange
*ormat& y el ,peg $4oint 5hotographic /xperts Group&. (l !ormato gi! se usa com)nmente para gr*cos
e ilustraciones #ue re#uieren menos de >@A colores $%ste es el l-mite de colores #ue muestra&,
mientras #ue el !ormato 45/G es la opcin de pre!erencia para !otogra!-as e imgenes coloridas
por#ue permite hasta =A millones de colores y comprime el tama/o del archivo, permitiendo #ue se
puede mostrar ms rpido en nuestras pantallas.
Aseg)rese de tener su gr*co en uno de estos dos !ormatos, antes de intentar colocarlo en una
pgina web. 0i por el contrario estuviera en otro !ormato, use un programa gr*co para convertirlo a
gif o ,peg. La mayor-a de los programas gr*cos le permiten grabar sus imgenes e ilustraciones en
estos !ormatos.
'nsertar una imagen en su pgina web es simple una ve2 #ue la tenemos en uno de estos !ormatos.
0i nuestro gr*co se llama logo.gi! entonces basta con usar la eti#ueta <img sr$)logo.gif>. 0i deseamos
#ue la imagen apare2ca a un lado de la pgina y el te"to corra a su alrededor, entonces har-amos
<img sr$)logo.gif align)left> para colocarla a la i2#uierda o <img sr$)logo.gif align)right> para colocarla a la
derecha.
0i #ueremos #ue las imgenes muestren un te"to e"plicativo o alternativo en pantalla cuando el
visitante pasa el mouse por encima de ellas, podemos indicarlo incluyendo la opcin alt dentro de la
eti#ueta en la !orma siguiente <img sr$)logo.gif align)left alt)Fte(to des$riptivoF>.
)ntroducir enlaces
con otras pginas
1esde el inicio de esta gu-a hemos se/alado repetidamente la importancia de los enlaces en las
pginas webs. Adems de permitirnos hacer re!erencia a otras pginas en 'nternet, los enlaces nos
permiten segmentar nuestra propia in!ormacin en di!erentes pginas conectadas entre s- para hacer
ms gil y organi2ada la presentacin a nuestros visitantes.
0i, por ejemplo, deseamos incluir un enlace para la pgina de las +aciones nidas en nuestra pgina,
escribir-amos <a href)httpA//www.un.org> 0eleccione a#u- para visitar las +aciones nidas6'a7. B-jese #ue la
eti#ueta inicial es <a href)G> y #ue se cierra con un simple </a>.
(l te"to #ue #ueda entre las eti#uetas <a href)G> y </a> aparecer subrayado en la mayor-a de los
navegadores para indicar #ue es un enlace de hiperte"to.
Adems de te"to, podemos incluir imgenes como enlaces entre las eti#uetas y as- hacer ms
vistosas nuestras pginas, por ejemplo <a href)prin$ipal.html><img sr$)fle$hita.gif alt)Fsele$$ione aBu8 para volver a la
pgina prin$ipalF></a>. (n este caso, la imagen 8echita%gif aparecer con un borde a su alrededor y si la
seleccionamos con el mouse, nos llevar al archivo principa#%htm#. 0i por ra2ones est%ticas no
deseamos #ue se muestre el borde alrededor de la imagen, basta con escribir border): dentro de la
eti#ueta img as-, <img sr$)fle$hita.gif alt)Fsele$$ione aBu8 para volver a la pgina prin$ipalF border):>.
0i deseamos #ue las personas puedan escribirnos directamente a nuestro correo electrnico,
podemos incluir un enlace especial usando el protocolo mailto en nuestra pgina.
(n el caso de 'nstraw, ser-a algo as-, <a href)mailtoAinstraw.hB.sdC$odetel.net.do>2ele$$ione aBu8 para enviarnos un
mensa#e de $orreo ele$tr7ni$o</a>. 4uando el visitante, seleccione con el mouse la opcin anterior, se le
abrir una ventana o su programa de correo electrnico !avorito $depende de cmo el visitante tenga
con*gurada su computadora&, desde la cual podr enviarnos un mensaje de correo por la red.
:olvamos a nuestro ejemplo anterior y pongamos en prctica lo #ue hemos visto en las )ltimas
pginas.
<html>
<head>
<title>
5el$ome to '123"45 </title>
</head>
<body bg$olor)navy te(t)white linH)yellow vlinH)lime>
<a href)httpA//www.un.org/instraw>
<img sr$)httpA//www.$ivila.$om/instraw/grafi$os/logos/instraw/:.gif align)left alt)Fsele$$ione aBu8 para visitar la pgina ofi$ial de
'nstrawF border):>
</a>
<a href)httpA//www.un.org/spanish>
<img sr$)httpA//www.$ivila.$om/instraw/grafi$os/logos/onu/:.gif align)right alt)Fsele$$ione aBu8 para visitar la pgina ofi$ial de las
1a$iones Inidas en espaJolF border):>
</a>
<h* align)$enter>
<font $olor)yellow>
'nstituto 'nterna$ional de 'nvestiga$iones y 6apa$ita$i7n para la Promo$i7n de la Mu#er<br>
/ '123"45 /
</font>
</h*>
<p>
Bienvenidos a nuestras ofi$inas virtuales% donde esperamos brindarles un me#or servi$io y una v8a dire$ta alternativa de
$omuni$a$i7n e informa$i7n de apoyo para la <i>poten$ia$i7n de la mu#er</i>.
<hr>
<img sr$)httpA//www.$ivila.$om/instraw/grafi$os/mis$/mu#eres/:.gif align)left>
<ul>
<li>
<a href)httpA//www.$ivila.$om/instraw/e#emplo/Bue/es.html>
KLu9 es 'nstrawM
</a>
<li>
<a href)httpA//www.$ivila.$om/instraw/e#emplo/$omo.html>
K67mo traba#a 'nstrawM
</a>
<li>
<a href)httpA//www.$ivila.$om/instraw/e#emplo/re$ursos.html>
K;e d7nde vienen los re$ursos finan$ieros de 'nstrawM
</a>
<li>
<a href)httpA//www.$ivila.$om/instraw/e#emplo/donde.html>
K;7nde est 'nstrawM
</a>
</ul>
<hr>
<p align)right>
<a href)httpA//www.un.org/instraw>
<img sr$)httpA//www.$ivila.$om/instraw/grafi$os/logos/instraw/:*.gif align)right alt)Fsele$$ione aBu8 para visitar la pgina ofi$ial de
'nstrawF border):>
</a>
<font $olor)lime si&e)/>
69sar 1i$ols Penson :*/4<br>
2anto ;omingo% "ep<bli$a ;omini$ana<br>
=>:!?.>-/* / fa( =>:!?.>-/*@<br>
$orreo/eA <mailtoAinstraw.hB.sdC$odetel.net.do>instraw.hB.sdC$odetel.net.do</a>
</font>
</body>
</html>
Fig. *. "esultado final del e#er$i$io $ompleto
visuali&ado en el programa navegador.
Trucos y consejos adicionales
al construir sus pginas *eb
A continuacin incluimos una serie de instrucciones
avan2adas #ue le ayudarn a mejorar sus pginas y
darlas a conocer una ve2 #ue tenga cierta e"periencia y
conocimientos al construirlas. 0i las indicaciones debajo
le parecen complicadas, simplemente ignrelas por
ahora y vuelva a consultarlas cuando tenga un poco ms
de e"periencia o pselas a alguien #ue s- pueda tomar
provecho de ellas.
Los n+'eros de los colores
0i lo deseamos, podemos indicar libremente
combinaciones de rojo, verde y a2ul para una mayor
variedad de colores en nuestra pgina. (n ve2 de indicar
un nombre en el atributo color, indicamos un s-mbolo
num%rico 9:; y el cdigo de A n)meros y letras,
correspondientes a tres pares he"adecimales #ue representan la cantidad de cada color a usar. 4ada
par de d-gitos puede tener un valor desde CC $CD& hasta BB $=CCD&. As-, el valor del negro, ausencia
de todo color, es :<<<<<<, mientras #ue el blanco, todos los colores al mismo tiempo es :******.
Las primeras dos posiciones corresponden al rojo, las siguientes dos al verde y las )ltimas dos al
a2ul. As-, el rojo puro es :**<<<<, el verde es :<<**<< y el a2ul es :<<<<**.
,olor ,olor He"- ,!digo te"to
1egro N:::::: Bla$H
Marr7n N>::::: Maroon
Oerde Ps$uro N::>::: Qreen
Oerde Pliva N>:>::: Plive
4&ul Marino N::::>: 1avy
Morado N>:::>: Purple
4&ul Plido N::>:>: 3eal
Qris N>:>:>: Qray
Plata N6:6:6: 2ilver
"o#o NFF:::: "ed
Oerde 6laro N::FF:: Dime
4marillo NFFFF:: Rellow
4&ul N::::FF Blue
Dila NFF::FF Fu$hsia
4&ul 6laro N::FFFF 4Bua
Blan$o NFFFFFF 5hite
3odemos usar variantes de los colores, como vino $@CD rojo o :=<<<<<&, verde oscuro $@CD verde o
:<<=<<<&, a2ul marino $@CD a2ul o :<<<<=<& e incluso hacer combinaciones de los mismos, como
amarillo $=CCD rojo y =CCD verde o :****<<& y morado $@CD rojo y @CD a2ul o :=<<<=<&.
Ahora bien, no es cosa de complicarnos mucho con esos n)meros, recuerde #ue para los principales
colores podemos escribir su nombre en ingl%s sin necesidad de usar cdigos he"adecimales. Tambi%n
las herramientas para crear pginas webs nos asisten en esto, mostrndonos com)nmente una
amplia paleta de colores en la cual seleccionamos el color deseado $o creamos uno nuevo
combinando& y el programa inserta el cdigo correspondiente en el te"to.
,olocar '+sica de &ondo
en sus pginas
0i #uiere #ue al mostrar su pgina tenga una m)sica de !ondo, la opcin ms com)n es cargar un
archivo midi o de m)sica instrumental digital, ya #ue los mismos t-picamente no son muy grandes
$desde unos =CE hasta FCE la mayor-a& y pueden o!recer una agradable melod-a de !ondo sin
perturbar la atencin del visitante.
Hasta hace poco +etscape e 'nternet ("plorer manejaban la m)sica de !ondo de !orma distinta, por
lo #ue es recomendable usar un pe#ue/o cdigo en Gavascript para colocarla correctamente en
nuestras pginas. 4opie las l-neas debajo e"actamente $ya #ue en Gavascript la separacin de l-neas
cuenta& y sustituya por el nombre de su archivo de m)sica donde se indica,
<26"'P3 D41QI4QE)FSava2$riptF>TU
<V//
var Browser1ame)navigator.app1ame
var BrowserOersion)navigator.appOersion.substring=:%?
if =Browser1ame )) FMi$rosoft 'nternet E(plorerF WW BrowserOersion < ,?
// para versiones de 'E(plorer anteriores a la ,.:
do$ument.write=F<BQ2PI1; 2"6)Ttuar$hivo.midT>F?
else
// para 1ets$ape e 'E(plorer ,.:
do$ument.write=F<EMBE; 2"6)Ttuar$hivo.midT 5';3E),- EE'QE3).: 4I3P234"3)true></EMBE;>F?
// //>
</26"'P3>
A#u-, el bgsound sr$) es usado cuando el visitante tiene una versin del 'nternet ("plorer anterior a la H,
mientras #ue el em$ed src> es usado para el 'nternet ("plorer H y todas las versiones de +etscape.
)ncluir un canal de c.at
en su pgina
0i desea hacer su pgina interactiva con sus visitantes, puede colocar un canal de conversaciones
con java en la misma e incluso canales e"istentes en la red del Microso!t 4hat $conocido por muchos
como el omic hat&, usando los cdigos debajo,
<applet $ode)M26hat ar$hive)ms$hat.#ar $odebase)httpA//ir$.msn.$om/Sava width)::X height)!*X>
<param name)$abbase value)ms$hat.$ab>
<param name)port value)...@>
<param name)room value)1ombreYdelY6anal>
<param name)autodis$onne$t value)true>
</applet>
-ota& -om$re?de#?ana# es e# nom$re de #a sa#a en #os servidores de Microsoft hat+ donde ser1
visi$#e a todos sus usuarios+ inc#usive a a)ue##os )ue no est@n en su p1gina% /sto #e permite acceder
a cana#es popu#ares ya esta$#ecidos en #a red%
na muestra de este chat es el #ue hemos colocado a#u- como complemento a la gu-a en
www.$ivila.$om/instraw/$hat.
;tra alternativa es crear una sala de conversaciones independiente usando los servicios gratuitos o
comerciales de 3ara4hat, siguiendo las instrucciones en www.para$hat.$om.
Dar a conocer
sus pginas
0i desea #ue su pgina apare2ca en los principales directorios latinos, use uno de los dos servicios
listados para registrarse semiIautomticamente en ms de =CC herramientas y directorios de
b)s#ueda,
Atajos I Autoreg-stralo
httpA//www.(y&.$om.m(/ata#os/autoregistralo.html
1ejar Huella
httpA//web.#et.es/lp/huella/inde(.html
3ero antes de registrar su pgina en los directorios, aseg)rese de haberla preparado correctamente
para ser encontrada por las personas #ue buscan la in!ormacin sobre la #ue trata siguiendo las
instrucciones en la seccin siguiente.
/ara ser encontrado en los
directorios de b+squeda
4on miles y hasta millones de pginas registradas, se hace cada ve2 ms di!-cil #ue cuando una
persona busca in!ormacin sobre un tema en una herramienta de b)s#ueda o directorio, apare2ca
nuestra pgina entre las primeras #ue son listadas.
3ara garanti2ar #ue nuestra pgina sea identi*cada y clasi*cada correctamente en los directorios y
herramientas de b)s#ueda debemos incluir los siguientes tags HTML en su cabecera o seccion <head>,
donde nos identi*camos como autores e indicamos un t-tulo, una descripcin y los temas tratados o
las palabras claves para ser usadas en su identi*cacin.
3uede copiar los tags debajo y llevarlos a su pgina HTML, sustituyendo con sus propias
in!ormaciones los datos correspondientes en el ejemplo. Al hacerlo, aseg)rese de no duplicar la
seccin <head> y de #ue %sta slo apare2ca una ve2 en su pgina.
<EE4;>
<3'3DE>
Es$ribimos aBu8 el t8tulo de la pgina
</3'3DE>
<ME34 14ME)author 6P13E13)F2u nombre o el de su institu$i7nF>
<ME34 14ME)Heywords 6P13E13)F3opi$o % 3opi$o *% 3opi$o +% 3opi$o ,% et$.F>
<ME34 14ME)des$ription 6P13E13)FBreve des$rip$i7n en una frase de la paginaF>
</EE4;>
0i le parece complicado escribir esos tags, puede siempre visitar la siguiente pgina, responder un
!ormulario y recibir en su correoIe los tags preparados para incluir en su pgina,
3reparar huella
httpA//web.#et.es/lp/huella/generadormetas.html
na ve2 preparada correctamente nuestra pgina, podemos proceder a registrarla en los principales
directorios de b)s#ueda con los servicios descritos en la seccin anterior.
0btener estad$sticas detalladas
sobre nuestras 1isitas
0i contratamos servicios comerciales pro!esionales para colocar nuestras pginas web, es probable
#ue incluyan un reporte peridico y detallado sobre las visitas #ue recibimos. 3ero si este servicio no
es incluido o si alojamos las pginas en un servidor gratuito y deseamos conocer ms sobre #ui%nes
nos visitan $incluyendo su pa-s de origen y de #u% pgina vienen&, podemos usar los servicios
gratuitos de -edstat A1sico, suscribi%ndonos en su pgina web,
+edstat
(spa/a
httpA//es.nedstat.net
D!nde obtener ele'entos gr&icos
para nuestras pginas
(n 'nternet encontramos numerosos lugares #ue o!recen imgenes, -conos, !ondos e incluso sonidos
#ue podemos usar e incluir en nuestras pginas web sin costo alguno.
Desktop Publishing: 4uenta con ms de @,CCC pginas #ue incluyen elementos gr*cos gratis,
gu-as e"plicativas, trucos, enlaces, tienda de libros y programas, enlaces, revistas en l-nea y
mucho ms, orientados a la produccin electrnica de material in!ormativo, tanto pginas de
'nternet como impresos $brochures, etc.&
httpA//www.desHtoppublishing.$om
icroso!t "allery: A#u- podemos obtener gratis -conos, botones, l-neas separadoras, !ondos,
sonidos e incluso porciones de cdigo avan2ado.
httpA//www.mi$rosoft.$om/gallery
)ncluir e&ectos especiales y
aplicaciones de 2a1a
0i deseamos agregar dinamismo y atractivo a nuestras pginas, podemos usar aplicaciones de Gava
sin tener #ue saber programar ni preocuparnos mucho por el complicado cdigo usado para crearlas.
(n la bouti#ue de Gava encontramos ms de =HC aplicaciones de Gava o Gava applets #ue incluyen
e!ectos de sonido y visuales, aplicaciones educativas y mucho ms,
Gava 6outi#ue
httpA//me(i$o.internet.$om/#ava/#avaboutiBue.htm
)ncluir &or'ularios y aplicaciones
a1anzadas en nuestras pginas
("iste un potencial inmenso para lo #ue podemos hacer con la in!ormacin #ue nos proporciona un
visitante al llenar un !ormulario, desde incluirlo en un directorio de personas o crear un !oro
interactivo hasta actuali2ar un calendario de actividades e incluso mandar tarjetas postales o
mensajes de saludo. 3ara esto es necesario un poco de programacin, o al menos obtener el cdigo
de aplicaciones ya escritas, y tener un directorio con permiso para ejecutar programas en nuestro
servidor $t-picamente conocido como cgiIbin&.
#he C"$ %esource $ndex: 'ncluye ms de =,CCC aplicaciones listas para su uso.
httpA//www.$gi/resour$es.$om
&reeCode: 'ncluye ms de HCC aplicaciones y herramientas #ue podemos usar.
httpA//www.free$ode.$om
'ira(s )eb #oolbox: 'ncluye un completo tutor sobre programacin 4J'. 0lo para las dispuestas
a introducirse en el aspecto t%cnico de las cosas.
httpA//lightsphere.$om/dev/$lass
0btener progra'as en l$nea
0i a)n no encuentra lo #ue busca o necesita un programa para sus necesidades espec-*cas, tanto en
l-nea como en el trabajo normal, consulte los completos directorios de programas #ue podemos
copiar e instalar en nuestras computadoras por 'nternet,
Programas*et: 4ientos de programas e instrucciones en
espa/ol.
httpA//www.programasnet.$om
Do+nload: Miles de programas en todas las categor-as
imaginables.
httpA//www.download.$om
426''% siglas de 4meri$an 2tandar 6ode for 'nformation 'nter$hange o 67digo 4meri$ano Estndar para el 'nter$ambio de 'nforma$i7n. En
general se refiere a te(tos $ompuestos e($lusivamente por letras y s8mbolos del alfabeto o$$idental $on unos $uantos $ara$teres no visibles
reservados para indi$ar saltos de l8nea% fin de do$umento% et$.
2i est usando Mi$rosoft 5ord for 5indows% no use la op$i7n 2ave as E3MD. Qrbe su ar$hivo en el formato Fte(t/onlyF.
Para una lista $ompleta de las op$iones de $olores y $7mo indi$ar nuestra propia sele$$i7n de $olores libremente% refi9rase a la se$$i7n
$orrespondiente FDos n<meros de los $oloresF ms adelante en F3ru$os y $onse#os adi$ionales al $onstruir su pgina webF.
Sava es un lengua#es de programa$i7n diseJado espe$ialmente para $rear apli$a$iones Bue sean in$luidas en las pginas de 'nternet. Permiten
in$luir anima$iones y apli$a$iones =$ono$idas $omo FSava appletsF? en las $uales se intera$t<a $on la usuaria =el visitante ha$e $li$H en un lugar y
la apli$a$i7n responde de inmediato% o entra un valor y la apli$a$i7n le retorna una respuesta% et$.?.