30/10/2019 Ejercicio práctico: creando una página web

Ir a: La red y la mujer
selecciona la sección deseada y aprieta el botón...

Ahora, procederemos a crear una página web de ejemplo y veremos cómo puede hacerse
simplemente con ciertos conocimientos básicos del lenguaje HTML. Una página web es una página
normal con informaciones en cuyo texto intercalamos códigos o etiquetas (tags en inglés) que
determinan la forma en que es mostrada en Internet y los enlaces con otras páginas en la red.
Afortunadamente, las páginas web, como simples archivos de texto que son, funcionan también
sin necesidad de Internet y podemos hacer el ejercicio a continuación sin necesidad de conectarnos
a la red o colocar nuestros archivos en servidor alguno.

Esta facilidad es útil también para presentar nuestros proyectos, propuestas o muestras de página
web antes de subirlas a Internet, o en lugares sin acceso a la red. Tan sólo necesitamos copiar
nuestras páginas webs y los archivos adicionales usados (gráficos, fotos, etc.) en nuestra
computadora.

El Hypertext MarkUp Language (HTML) es el lenguaje para la creación de páginas con enlaces y
referencias insertando marcas o códigos en el texto normal o información de las mismas. Esos
enlaces y referencias en el texto que nos llevan a otras páginas web se conocen como hipertexto.

Nota: La página que aquí crearemos sólo será visible en nuestra computadora y si queremos mostrarla al mundo a través
de la red necesitamos de un lugar para alojarla en Internet como se explica en la sección anterior.

¿Qué se necesita para

realizar el ejercicio?

Lo primero que debemos aclarar aquí es que el ejemplo siguiente mostrará cómo crear una
página web sin ninguna herramienta auxiliar, trabajando directamente con el "código fuente"
de la página. Existen numerosos programas, tal como se mencionó antes, que nos permiten
crear páginas webs sin tener que ver todos los códigos incluidos y que son tan simples de
usar como un procesador de palabras. Esos programas van desde sencillos auxiliares, hasta
completos paquetes de diseño y es recomendable obtener uno de acuerdo con nuestras
habilidades en la computadora y las expectactivas para crear nuestras páginas web. Incluso
las versiones recientes de los programas procesadores de palabras incluyen opciones que nos
permiten crear páginas webs a partir de nuestros documentos (ver opción Save as HTML o
Guardar como HTML en Microsoft Word por ejemplo).

De todos modos, el ejemplo a continuación es un interesante ejercicio que le permitirá

conocer y entender un poco mejor la naturaleza de las páginas web. Esto es importante
además porque lo que los programas de diseño de páginas web hacen en todo caso es
generar un código similar al de nuestro ejemplo.

Para el ejercicio, necesitaremos apenas:

Un editor de texto.
No importa cual, basta con que grabe los archivos como texto puro o ASCII . Los
www.onu.org.do/instraw/practica/index.html 1/13
30/10/2019 Ejercicio práctico: creando una página web

usuarios de Windows pueden usar el Notepad incluido en el sistema operativo. Si lo

desea, puede usar también su procesador de palabras favorito, pero tendrá que
asegurarse de grabar los archivos como "archivos de texto" o "archivos ASCII" ("text files"
o "ASCII files" en inglés).
Un programa navegador.
Para poder ver las páginas creadas. Basta con el mismo programa que usamos para
navegar por Internet, ya sea Netscape, Internet Explorer o cualquier otro.

Etiquetas que
se abren y se cierran

Todas las instrucciones o códigos que colocamos en las páginas HTML se insertan en el texto
enmarcadas por los símbolos < y >. Por ejemplo, el código o etiqueta para indicar letras
itálicas o cursivas es <I>. Buena parte de estos códigos tienen su correspondiente etiqueta
para cancelar o cerrar el comando, usándose generalmente el mismo código, precedido de un
"/". Así, por ejemplo para mostrar la frase "la potenciación de la mujer debe ser parte integral
de los programas de desarrollo" con potenciación de la mujer en cursivas, escribiríamos "la
<i>potenciación de la mujer</i> debe ser parte integral de los programas de desarrollo".

El uso de mayúsculas o minúsculas no tiene relevancia alguna al usar los códigos HTML.

Estructura de una
página HTML

Toda página HTML inicia con la etiqueta <html>, indicando así a los programas navegadores
que no se trata de un simple archivo texto sino de una página web y que debe ser
interpretada como tal. Correspondientemente, la última etiqueta o código insertado en una
página web debe ser </html>.

Entre ambas etiquetas (o tags en inglés) se deben encontrar las dos áreas principales que
componen la página:

La Cabecera (head).
Demarcada por las etiquetas <head> y </head> (head significa cabeza en inglés), contiene
información sobre el título de la página, su contenido, su autor, temas tratados, etc.
El cuerpo del documento (body).
Es aquí donde colocamos la información que será desplegada en nuestra página web,
delimitada por las etiquetas <body> y </body> (body significa cuerpo en inglés).

Veamos entonces un ejemplo simple del texto que conforma una página web típica:

<html> Fig. 19. Resultado del ejercicio, visualizado en Internet Explorer.

<head>

<title>
Mi Página de prueba
</title>

</head>

<body>
<p>
Bienvenido a mi primera <i>página web</i>.
<p>
www.onu.org.do/instraw/practica/index.html 2/13
30/10/2019 Ejercicio práctico: creando una página web

Espero se sientan a gusto y disfruten su visita.

</body>

</html>

En el ejemplo anterior se usaron

diferentes espaciados para ilustrar las
secciones en las páginas, pero ni las
líneas ni los espacios en blanco o
sangrías, tienen efecto alguno en el
aspecto final de la página web. Como
vemos, la etiqueta <title> sirve para
definir el título de la página, el cual es
desplegado en la barra superior del navegador cuando abrimos la página. También es usada
para catalogar y archivar nuestra página en los directorios y herramientas de búsqueda en
Internet.

Dentro del cuerpo (body), encontramos las etiquetas <p>, que sirven para señalar el inicio de
cada párrafo y dejar un poco de espacio vertical en su lugar.

Escriba las líneas del ejemplo en un editor de texto y grábelas en un archivo llamado
practica.htm en formato ASCII o de texto (aunque el archivo puede contener acentos, el
nombre no debe llevarlos, así que recuerde no acentuar la primera "a" en practica.htm). Luego
vea ese archivo en su navegador favorito escribiendo el nombre completo del archivo y el
nombre o directorio donde se encuentra en la barra de direcciones (donde típicamente
aparece http://www.ladireccion.com/delsitio/quevisitamos.html). O si lo desea use la opción de
Abrir en el menú File y localice el archivo en su disco duro. Al ver dicho archivo en su
navegador, se le mostrará el texto de la página, pero sin las etiquetas usadas.

Dar colores a una

página HTML

Si deseamos introducir un poco de color en la página, podemos hacerlo agregando las

instrucciones correspondientes a la etiqueta <body> en la forma siguiente: <body bgcolor=blue
text=yellow>. Esto hará que el color de fondo de la página (background color o bgcolor en inglés)
sea azul (blue en inglés) y el color del texto sea amarillo (yellow en inglés). La etiqueta body de
clausura sigue siendo simplemente </body> sin importar las opciones incluidas en la etiqueta
body inicial.

También podemos colorear ciertas frases o palabras por separado. Usando la etiqueta <font
color=red>, por ejemplo hacemos todo el texto que le siga rojo (font es tipo de letra y red es rojo
en inglés), hasta que cancelemos la instrucción con una etiqueta </font>.

En ambos casos mencionados, podemos experimentar con otros nombres de colores en inglés
como white, black, gray, maroon, yellow, lime, green, navy, aqua, olive, purple, etc.

Alineación del texto

Para escribir un texto centrado o cuyas líneas estén alineadas con el margen derecho de la
página, incluimos la opción deseada en la etiqueta <p>, de forma tal que <p align=center>
produce texto centrado y <p align=right> produce texto alineado con el margen derecho de la
pantalla. Posteriormente se agregó otra opción, la de <p align=justify>, que produce un texto
espaciado de forma tal que tanto el inicio como el final de cada línea terminan en el margen
correspondiente de la página.
www.onu.org.do/instraw/practica/index.html 3/13
30/10/2019 Ejercicio práctico: creando una página web

Resaltando
los títulos

El HTML nos ofrece seis etiquetas distintas para señalar rápidamente seis niveles jerárquicos
de títulos, cada uno con un tamaño distinto de letras y espaciado vertical antes y después del
título. <h1> es la etiqueta para indicar un título principal o grande y se cancela con </h1>. Así,
para insertar un texto o título grande en la página escribimos <h1> y este texto a continuación
aparecería grande hasta que insertemos </h1>.

Al igual que con la etiqueta de párrafos <p>, podemos incluir dentro de ella las opciones
align=center y align=right para centrar el título o alinear sus líneas al margen derecho.

Además de h1 podemos usar en la misma forma h2, h3, h4, h5 y h6. Cada una de estas opciones
produce títulos de menor tamaño y jerarquía que h1.

Líneas separadoras

Conjuntamente con los títulos, el HTML nos brinda una útil etiqueta que nos permite separar
visualmente el contenido y los elementos de nuestra página en diferentes secciones. Usando
la etiqueta <hr> introducimos una simple línea separadora que atraviesa la pantalla
horizontalmente.

Saltos de línea y
párrafos

Ya mencionamos el uso de la etiqueta <p> para indicar el inicio de un párrafo. Esto es

necesario porque los navegadores, al leer nuestras páginas escritas en HTML, ignoran los
saltos de línea (o retornos de carro como se les llama en mecanografía) y los espacios en
blanco que dejamos en el texto. Si deseamos que el texto continúe en la línea siguiente, pero
sin el espacio vertical que deja la etiqueta <p>, entonces debemos usar la etiqueta <br> (del
inglés break o rotura de línea).

Tamaño
del texto

En ocasiones deseamos un tamaño menor o mayor para una parte del texto. Sabemos que
esto se puede hacer con las etiquetas <h1>, <h2>, etc., pero dichas etiquetas inician una nueva
línea antes y después del texto que abarcan y, además, dejan un espacio vertical. Incluyendo
la opción size=-1 dentro de la etiqueta <font> podemos hacer que el texto hasta la próxima
etiqueta </font> aparezca con un tamaño menor al normal. Si queremos un texto aún más
chico, podemos usar size=-2. Del mismo modo, si lo que deseamos es hacer el texto mayor,
podemos usar size=+1 ó size=+2 para lograr el efecto deseado. Experimente con diversos
tamaños y observe qué ocurre.

La opción size= puede ser usada en combinación con la que vimos antes de color= sin
problemas y sin importar el orden en que las coloquemos. Así da igual escribir <font color=red
size=+1> que <font size=+1 color=red>.

Veamos un nuevo ejemplo ahora con las cosas que hemos aprendido.

<html>

<head>
<title>

www.onu.org.do/instraw/practica/index.html 4/13
30/10/2019 Ejercicio práctico: creando una página web

INSTRAW en la red
</title>
</head>

<body bgcolor=navy text=white>

<h1 align=center>
<font color=yellow> Instituto Internacional de Investigaciones y Capacitación para la Promoción de la
Mujer<br>
- INSTRAW -
</font>
</h1>

<hr>

<p align=center>
Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un mejor servicio y una vía
directa alternativa de comunicación e información de apoyo para la <i>potenciación de la mujer</i>.

<hr>

<h4>
Cómo contactarnos
</h4>

<p align=right>
<font color=lime size=-1>
César Nicolás Penson 102-A<br>
Santo Domingo, República Dominicana<br>
(809)685-211 - fax (809)685-2117<br>
correo-e: [email protected]
</font>

</body>
</html>

Insertar listas
en el texto

Cuando preparamos material en línea, frecuentemente preparamos listas de artículos u

opciones al resumir los textos, en la forma:

Los objetivos del INSTRAW son:

Estimular y asistir el avance de la mujer, por medio de la investigación, la capacitación y la

recolección y diseminación de información.
Hacer más visible la contribución de la mujer al desarrollo.
Apoyar los esfuerzos de organizaciones inter-gubernamentales, gubernamentales y no
gubernamentales para estos fines.

En HTML podemos crear fácilmente dichas listas y sangrar cada uno de sus componentes
usando las etiquetas <ul>, <ol> y <li>. Con <ul> (inciales de un-ordered list o lista no ordenada en
inglés) indicamos que 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
finalmente cerramos o indicamos el final de la lista con </ul>.

El ejemplo anterior, se escribiría así en HTML:

<p>
Los objetivos del INSTRAW son:
<ul>
<li>
Estimular y asistir el avance de la mujer, por medio de la investigación, la capacitación y la
recolección y diseminación de información.

www.onu.org.do/instraw/practica/index.html 5/13
30/10/2019 Ejercicio práctico: creando una página web

<li>
Hacer más visible la contribución de la mujer al desarrollo.
<li>
Apoyar los esfuerzos de organizaciones inter-gubernamentales, gubernamentales y no
gubernamentales para estos fines.
</ul>

En caso de que deseemos que cada opción sea numerada automáticamente, usamos <ol>
(iniciales de ordered list o lista ordenada en inglés) con su correspondiente </ol> para abrir y
cerrar la lista y cada uno de sus elementos será numerado automáticamente como 1., 2., 3.,
etc. Si deseamos que la numeración se haga en forma alfabética (a., b., c., etc.) en vez de
numérica, simplemente iniciamos la lista entonces con la etiqueta <ol type=a>.

Insertar gráficos
en nuestras páginas

Para colocar imágenes, fotos, ilustraciones o cualquier tipo de gráficos en nuestras páginas
HTML, debemos usar formatos gráficos estándares que puedan ser vistos por la mayoría de
los usuarios en Internet. Los dos formatos más comunes y que son mostrados sin problemas
por prácticamente por todos los navegadores gráficos en cualquier plataforma son el gif
(Compuserve Graphics Interchange Format) y el jpeg (Joint Photographic Experts Group). El
formato gif se usa comúnmente para gráficos e ilustraciones que requieren menos de 256
colores (éste es el límite de colores que muestra), mientras que el formato JPEG es la opción
de preferencia para fotografías e imágenes coloridas porque permite hasta 16 millones de
colores y comprime el tamaño del archivo, permitiendo que se puede mostrar más rápido en
nuestras pantallas.

Asegúrese de tener su gráfico en uno de estos dos formatos, antes de intentar colocarlo en
una página web. Si por el contrario estuviera en otro formato, use un programa gráfico para
convertirlo a gif o jpeg. La mayoría de los programas gráficos le permiten grabar sus
imágenes e ilustraciones en estos formatos.

Insertar una imagen en su página web es simple una vez que la tenemos en uno de estos
formatos. Si nuestro gráfico se llama logo.gif entonces basta con usar la etiqueta <img
src=logo.gif>. Si deseamos que la imagen aparezca a un lado de la página y el texto corra a su
alrededor, entonces haríamos <img src=logo.gif align=left> para colocarla a la izquierda o <img
src=logo.gif align=right> para colocarla a la derecha.

Si queremos que las imágenes muestren un texto explicativo o alternativo en pantalla cuando
el visitante pasa el mouse por encima de ellas, podemos indicarlo incluyendo la opción alt
dentro de la etiqueta en la forma siguiente <img src=logo.gif align=left alt="texto descriptivo">.

Introducir enlaces
con otras páginas

Desde el inicio de esta guía hemos señalado repetidamente la importancia de los enlaces en
las páginas webs. Además de permitirnos hacer referencia a otras páginas en Internet, los
enlaces nos permiten segmentar nuestra propia información en diferentes páginas
conectadas entre sí para hacer más ágil y organizada la presentación a nuestros visitantes.

Si, por ejemplo, deseamos incluir un enlace para la página de las Naciones Unidas en nuestra
página, escribiríamos <a href=http://www.un.org> Seleccione aquí para visitar las Naciones
Unidas</a>. Fíjese que la etiqueta inicial es <a href=…> y que se cierra con un simple </a>.

www.onu.org.do/instraw/practica/index.html 6/13
30/10/2019 Ejercicio práctico: creando una página web

El texto que queda entre las etiquetas <a href=…> y </a> aparecerá subrayado en la mayoría de
los navegadores para indicar que es un enlace de hipertexto.

Además de texto, podemos incluir imágenes como enlaces entre las etiquetas y así hacer más
vistosas nuestras páginas, por ejemplo <a href=principal.html><img src=flechita.gif alt="seleccione aquí
para volver a la página principal"></a>. En este caso, la imagen flechita.gif aparecerá con un borde a
su alrededor y si la seleccionamos con el mouse, nos llevará al archivo principal.html. Si por
razones estéticas no deseamos que se muestre el borde alrededor de la imagen, basta con
escribir border=0 dentro de la etiqueta img así: <img src=flechita.gif alt="seleccione aquí para volver a la
página principal" border=0>.

Si deseamos que las personas puedan escribirnos directamente a nuestro correo electrónico,
podemos incluir un enlace especial usando el protocolo mailto en nuestra página.

En el caso de Instraw, sería algo así: <a href=mailto:[email protected]>Seleccione aquí para

enviarnos un mensaje de correo electrónico</a>. Cuando el visitante, seleccione con el mouse la
opción anterior, se le abrirá una ventana o su programa de correo electrónico favorito
(depende de cómo el visitante tenga configurada su computadora), desde la cual podrá
enviarnos un mensaje de correo por la red.

Volvamos a nuestro ejemplo anterior y pongamos en práctica lo que hemos visto en las
últimas páginas. Si desea ver el resultado de esta página en Internet, la hemos colocado en
línea para usted en http://www.civila.com/instraw/ejemplo. Compare la ilustración debajo y lo que ve
en su pantalla, con el texto a continuación que lo define.

<html>
<head>
<title>
Welcome to INSTRAW </title>
</head>
<body bgcolor=navy text=white link=yellow vlink=lime>
<a href=http://www.un.org/instraw>
<img src=http://www.civila.com/instraw/graficos/logos/instraw-01.gif align=left alt="seleccione aquí
para visitar la página oficial de Instraw" border=0>
</a>
<a href=http://www.un.org/spanish>
<img src=http://www.civila.com/instraw/graficos/logos/onu-01.gif align=right alt="seleccione aquí
para visitar la página oficial de las Naciones Unidas en español" border=0>
</a>
<h2 align=center>
<font color=yellow>
Instituto Internacional de Investigaciones y Capacitación para la Promoción de la Mujer<br>
- INSTRAW -
</font>
</h2>
<p>
Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un mejor servicio y una vía
directa alternativa de comunicación e información de apoyo para la <i>potenciación de la mujer</i>.
<hr>
<img src=http://www.civila.com/instraw/graficos/misc/mujeres-01.gif align=left>
<ul>
<li>
<a href=http://www.civila.com/instraw/ejemplo/que-es.html>
¿Qué es Instraw?
</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/como.html>
¿Cómo trabaja Instraw?
</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/recursos.html>
¿De dónde vienen los recursos financieros de Instraw?

www.onu.org.do/instraw/practica/index.html 7/13
30/10/2019 Ejercicio práctico: creando una página web

</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/donde.html>
¿Dónde está Instraw?
</a>
</ul>
<hr>
<p align=right>
<a href=http://www.un.org/instraw>
<img src=http://www.civila.com/instraw/graficos/logos/instraw-02.gif align=right alt="seleccione aquí
para visitar la página oficial de Instraw" border=0>
</a>
<font color=lime size=-1>
César Nicolás Penson 102-A<br>
Santo Domingo, República Dominicana<br>
(809)685-211 - fax (809)685-2117<br>
correo-e: <mailto:[email protected]>[email protected]</a>
</font>
</body>
</html>

Fig. 21. Resultado final del ejercicio completo

visualizado en el programa navegador.

Trucos y consejos adicionales

al construir sus páginas web

A continuación incluimos una serie de instrucciones avanzadas que le ayudarán a mejorar

sus páginas y darlas a conocer una vez que tenga cierta experiencia y conocimientos al
construirlas. Si las indicaciones debajo le parecen complicadas, simplemente ignórelas por
ahora y vuelva a consultarlas cuando tenga un poco más de experiencia o páselas a alguien
que sí pueda tomar provecho de ellas. Color Color Hex. Código texto
Negro #000000 Black
Los números de los colores
Marrón #800000 Maroon
Si lo deseamos, podemos indicar libremente Verde Oscuro #008000 Green
combinaciones de rojo, verde y azul para una mayor Verde Oliva #808000 Olive
variedad de colores en nuestra página. En vez de Azul Marino #000080 Navy
indicar un nombre en el atributo color, indicamos un Morado #800080 Purple
símbolo numérico (#) y el código de 6 números y letras, Azul Pálido #008080 Teal
correspondientes a tres pares hexadecimales que Gris #808080 Gray
representan la cantidad de cada color a usar. Cada par Plata #C0C0C0 Silver
de dígitos puede tener un valor desde 00 (0%) hasta FF Rojo #FF0000 Red
(100%). Así, el valor del negro, ausencia de todo color, Verde Claro #00FF00 Lime
Amarillo #FFFF00 Yellow
www.onu.org.do/instraw/practica/index.html 8/13
30/10/2019 Ejercicio práctico: creando una página web

es #000000, mientras que el blanco, todos los colores al Azul #0000FF Blue
mismo tiempo es #FFFFFF. Lila #FF00FF Fuchsia
Azul Claro #00FFFF Aqua
Las primeras dos posiciones corresponden al rojo, las Blanco #FFFFFF White
siguientes dos al verde y las últimas dos al azul. Así, el
rojo puro es #FF0000, el verde es #00FF00 y el azul es #0000FF.

Podemos usar variantes de los colores, como vino (50% rojo o #800000), verde oscuro (50%
verde o #008000), azul marino (50% azul o #000080) e incluso hacer combinaciones de los
mismos, como amarillo (100% rojo y 100% verde o #FFFF00) y morado (50% rojo y 50% azul
o #800080).

Ahora bien, no es cosa de complicarnos mucho con esos números, recuerde que para los
principales colores podemos escribir su nombre en inglés sin necesidad de usar códigos
hexadecimales. También las herramientas para crear páginas webs nos asisten en esto,
mostrándonos comúnmente una amplia paleta de colores en la cual seleccionamos el color
deseado (o creamos uno nuevo combinando) y el programa inserta el código correspondiente
en el texto.

Colocar música de fondo

en sus páginas

Si quiere que al mostrar su página tenga una música de fondo, la opción más común es
cargar un archivo midi o de música instrumental digital, ya que los mismos típicamente no
son muy grandes (desde unos 10k hasta 80k la mayoría) y pueden ofrecer una agradable
melodía de fondo sin perturbar la atención del visitante.

Hasta hace poco Netscape e Internet Explorer manejaban la música de fondo de forma
distinta, por lo que es recomendable usar un pequeño código en Javascript para colocarla
correctamente en nuestras páginas. Copie las líneas debajo exactamente (ya que en Javascript
la separación de líneas cuenta) y sustituya por el nombre de su archivo de música donde se
indica:

<SCRIPT LANGUAGE="JavaScript">';
<!--
var BrowserName=navigator.appName
var BrowserVersion=navigator.appVersion.substring(0,1)
if (BrowserName == "Microsoft Internet Explorer" && BrowserVersion < 4)
// para versiones de IExplorer anteriores a la 4.0
document.write("<BGSOUND SRC='tuarchivo.mid'>")
else
// para Netscape e IExplorer 4.0
document.write("<EMBED SRC='tuarchivo.mid' WIDTH=145 HEIGHT=60 AUTOSTART=true>
</EMBED>")
// -->
</SCRIPT>

Aquí, el bgsound src= es usado cuando el visitante tiene una versión del Internet Explorer
anterior a la 4, mientras que el embed src= es usado para el Internet Explorer 4 y todas las
versiones de Netscape.

Incluir un canal de chat

en su página

Si desea hacer su página interactiva con sus visitantes, puede colocar un canal de
conversaciones con java en la misma e incluso canales existentes en la red del Microsoft Chat
(conocido por muchos como el Comic Chat), usando los códigos debajo:

www.onu.org.do/instraw/practica/index.html 9/13
30/10/2019 Ejercicio práctico: creando una página web

<applet code=MSChat archive=mschat.jar codebase=http://irc.msn.com/Java width=100%

height=92%>
<param name=cabbase value=mschat.cab>
<param name=port value=6667>
<param name=room value=Nombre_del_Canal>
<param name=autodisconnect value=true>
</applet>

Nota: Nombre_del_Canal es el nombre de la sala en los servidores de Microsoft Chat, donde será
visible a todos sus usuarios, inclusive a aquellos que no estén en su página. Esto le permite acceder a
canales populares ya establecidos en la red.

Una muestra de este chat es el que hemos colocado aquí como complemento a la guía en
www.civila.com/instraw/chat.

Otra alternativa es crear una sala de conversaciones independiente usando los servicios
gratuitos o comerciales de ParaChat, siguiendo las instrucciones en www.parachat.com.

Dar a conocer
sus páginas

Si desea que su página aparezca en los principales directorios latinos, use uno de los dos
servicios listados para registrarse semi-automáticamente en más de 100 herramientas y
directorios de búsqueda:

Atajos - Autoregístralo
http://www.xyz.com.mx/atajos/autoregistralo.html

Dejar Huella
http://web.jet.es/lp/huella/index.html

Pero antes de registrar su página en los directorios, asegúrese de haberla preparado

correctamente para ser encontrada por las personas que buscan la información sobre la que
trata siguiendo las instrucciones en la sección siguiente.

Para ser encontrado en los

directorios de búsqueda

Con miles y hasta millones de páginas registradas, se hace cada vez más difícil que cuando
una persona busca información sobre un tema en una herramienta de búsqueda o directorio,
aparezca nuestra página entre las primeras que son listadas.

Para garantizar que nuestra página sea identificada y clasificada correctamente en los
directorios y herramientas de búsqueda debemos incluir los siguientes tags HTML en su
cabecera o seccion <head>, donde nos identificamos como autores e indicamos un título, una
descripción y los temas tratados o las palabras claves para ser usadas en su identificación.

Puede copiar los tags debajo y llevarlos a su página HTML, sustituyendo con sus propias
informaciones los datos correspondientes en el ejemplo. Al hacerlo, asegúrese de no duplicar
la sección <head> y de que ésta sólo aparezca una vez en su página.

<HEAD>
<TITLE>
Escribimos aquí el título de la página
</TITLE>
<META NAME=author CONTENT="Su nombre o el de su institución">
<META NAME=keywords CONTENT="Topico 1, Topico 2, Topico 3, Topico 4, etc.">
<META NAME=description CONTENT="Breve descripción en una frase de la pagina">
</HEAD>

www.onu.org.do/instraw/practica/index.html 10/13
30/10/2019 Ejercicio práctico: creando una página web

Si le parece complicado escribir esos tags, puede siempre visitar la siguiente página,
responder un formulario y recibir en su correo-e los tags preparados para incluir en su
página:

Preparar huella
http://web.jet.es/lp/huella/generadormetas.html

Una vez preparada correctamente nuestra página, podemos proceder a registrarla en los
principales directorios de búsqueda con los servicios descritos en la sección anterior.

Obtener estadísticas detalladas

sobre nuestras visitas

Si contratamos servicios comerciales profesionales para colocar nuestras páginas web, es

probable que incluyan un reporte periódico y detallado sobre las visitas que recibimos. Pero
si este servicio no es incluido o si alojamos las páginas en un servidor gratuito y deseamos
conocer más sobre quiénes nos visitan (incluyendo su país de origen y de qué página vienen),
podemos usar los servicios gratuitos de Nedstat Básico, suscribiéndonos en su página web:

Nedstat España
http://es.nedstat.net

Dónde obtener elementos gráficos

para nuestras páginas

En Internet encontramos numerosos lugares que ofrecen imágenes, íconos, fondos e incluso
sonidos que podemos usar e incluir en nuestras páginas web sin costo alguno.

Desktop Publishing: Cuenta con más de 5,000 páginas que incluyen

elementos gráficos gratis, guías explicativas, trucos, enlaces, tienda de libros
y programas, enlaces, revistas en línea y mucho más, orientados a la
producción electrónica de material informativo, tanto páginas de Internet
como impresos (brochures, etc.)
http://www.desktoppublishing.com

Microsoft Gallery: Aquí podemos obtener gratis íconos, botones, líneas

separadoras, fondos, sonidos e incluso porciones de código avanzado.
http://www.microsoft.com/gallery

Incluir efectos especiales y

aplicaciones de Java

Si deseamos agregar dinamismo y atractivo a nuestras páginas, podemos usar aplicaciones

de Java sin tener que saber programar ni preocuparnos mucho por el complicado código
usado para crearlas. En la boutique de Java encontramos más de 140 aplicaciones de Java o
Java applets que incluyen efectos de sonido y visuales, aplicaciones educativas y mucho más:

Java Boutique
http://mexico.internet.com/java/javaboutique.htm

Incluir formularios y aplicaciones

avanzadas en nuestras páginas

Existe un potencial inmenso para lo que podemos hacer con la información que nos
proporciona un visitante al llenar un formulario, desde incluirlo en un directorio de personas

www.onu.org.do/instraw/practica/index.html 11/13
30/10/2019 Ejercicio práctico: creando una página web

o crear un foro interactivo hasta actualizar un calendario de actividades e incluso mandar

tarjetas postales o mensajes de saludo. Para esto es necesario un poco de programación, o al
menos obtener el código de aplicaciones ya escritas, y tener un directorio con permiso para
ejecutar programas en nuestro servidor (típicamente conocido como cgi-bin).

The CGI Resource Index: Incluye más de 1,000 aplicaciones listas para su
uso.
http://www.cgi-resources.com

FreeCode: Incluye más de 400 aplicaciones y herramientas que podemos

usar.
http://www.freecode.com

Kira's Web Toolbox: Incluye un completo tutor sobre programación CGI.

Sólo para las dispuestas a introducirse en el aspecto técnico de las cosas.
http://lightsphere.com/dev/class

Obtener programas en línea

Si aún no encuentra lo que busca o necesita un programa para sus necesidades específicas,
tanto en línea como en el trabajo normal, consulte los completos directorios de programas
que podemos copiar e instalar en nuestras computadoras por Internet:

ProgramasNet: Cientos de programas e instrucciones en español.

http://www.programasnet.com

Download: Miles de programas en todas las categorías imaginables.

http://www.download.com

ASCII, siglas de American Standar Code for Information Interchange o Código Americano Estándar para el
Intercambio de Información. En general se refiere a textos compuestos exclusivamente por letras y símbolos del alfabeto
occidental con unos cuantos caracteres no visibles reservados para indicar saltos de línea, fin de documento, etc.

Si está usando Microsoft Word for Windows, no use la opción Save as HTML. Grábe su archivo en el formato "text-
only".

Para una lista completa de las opciones de colores y cómo indicar nuestra propia selección de colores libremente,
refiérase a la sección correspondiente "Los números de los colores" más adelante en "Trucos y consejos adicionales al
construir su página web".

Java es un lenguajes de programación diseñado especialmente para crear aplicaciones que sean incluidas en las
páginas de Internet. Permiten incluir animaciones y aplicaciones (conocidas como "Java applets") en las cuales se
interactúa con la usuaria (el visitante hace click en un lugar y la aplicación responde de inmediato, o entra un valor y la
aplicación le retorna una respuesta, etc.).
Presentación: [ Bienvenida ] [ Naturaleza de la guía ]

Introducción: [ La red y la mujer ] [ Internet y la comunicación electrónica ]

Navegando: [ La telaraña mundial ] [ Gopher ] [ Telnet ]

Comunicándose: [ Correo-e ] [ Listas de correo ] [ Grupos de discusión ] [ Chat y teleconferencia ]

Ejemplos: [ Un día en la vida de Nancy ] [ Nancy en acción ] [ Casos de la vida real ]

[ Crear nuestra propia página ] [ Ejercicio Práctico ]

Creando Páginas
[ Asistente para generar código HTML ]

www.onu.org.do/instraw/practica/index.html 12/13
30/10/2019 Ejercicio práctico: creando una página web

Recursos sobre la [ Buscar ] [ Insertar ] [ Activar ] [ Borrar ]

Mujer

[ Obtener una copia de esta guía ] [ Preguntas y respuestas ] [ Glosario ]

Referencia:
[ Formulario de evaluación ]

www.onu.org.do/instraw/practica/index.html 13/13