|
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
|
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>
<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 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.
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.
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.
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>
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>.
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">.
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>
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
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
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
<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
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
Nedstat España http://es.nedstat.net |
Dónde obtener elementos
gráficos
para nuestras páginas
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
Java Boutique http://mexico.internet.com/java/javaboutique.htm |
Incluir formularios y
aplicaciones
avanzadas en nuestras páginas
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
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 |
|