Seleccione aquí para volver al inicio


Ejercicio práctico: Creación de una página web

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 ASCIIselecciona aquí para ver el pie de página. Los 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:

Seleccione aquí para ver la pantalla en grande
Fig. 19. Resultado del ejercicio, visualizado en Internet Explorer.

<html>

<head>

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

</head>

<body>
<p>
Bienvenido a mi primera <i>página web</i>.
<p>
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 textoselecciona aquí para ver el pie de página (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.selecciona aquí para ver el pie de página

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.

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>
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: instraw.hq.sd@codetel.net.do
</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.
<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>.

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:instraw.hq.sd@codetel.net.do>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?
</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:instraw.hq.sd@codetel.net.do>instraw.hq.sd@codetel.net.do</a>
</font>
</body>
</html>

Seleccione aquí para ver la pantalla en grande
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
Marrón #800000 Maroon
Verde Oscuro #008000 Green
Verde Oliva #808000 Olive
Azul Marino #000080 Navy
Morado #800080 Purple
Azul Pálido #008080 Teal
Gris #808080 Gray
Plata #C0C0C0 Silver
Rojo #FF0000 Red
Verde Claro #00FF00 Lime
Amarillo #FFFF00 Yellow
Azul #0000FF Blue
Lila #FF00FF Fuchsia
Azul Claro #00FFFF Aqua
Blanco #FFFFFF White

Los números de los colores

Si lo deseamos, podemos indicar libremente combinaciones de rojo, verde y azul para una mayor variedad de colores en nuestra página. En vez de indicar un nombre en el atributo color, indicamos un símbolo numérico (#) y el código de 6 números y letras, correspondientes a tres pares hexadecimales que representan la cantidad de cada color a usar. Cada par de dígitos puede tener un valor desde 00 (0%) hasta FF (100%). Así, el valor del negro, ausencia de todo color, es #000000, mientras que el blanco, todos los colores al mismo tiempo es #FFFFFF.

Las primeras dos posiciones corresponden al rojo, las 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:

<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:

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>

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 Javaselecciona aquí para ver el pie de página 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 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 ]
Creando Páginas Crear nuestra propia página ] [ Ejercicio Práctico ] [ Asistente para generar código HTML ]
Recursos sobre la Mujer [ Buscar ] [ Insertar ] [ Activar ] [ Borrar ]
Referencia: [ Obtener una copia de esta guía ] [ Preguntas y respuestas ] [ Glosario ] [ Formulario de evaluación ]

Seleccione aquí para visitar las Naciones Unidas Seleccione aquí para visitar el website oficial de Instraw
Selecciona aquí para visitar WomenWatch de Naciones Unidas
Seleccione aquí para visitar el web site de Instraw