Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Explicación HTML
Explicación HTML
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$.?.