Escribiendo una Página Web
Paso a paso...
Escribir una Página en el Web es un proceso sencillo que sólamente
requiere conocer los comandos básicos del lenguaje HTML; poseer un
browser, tal como el Netscape, Mosaico o el Explorer; y disponer de
un programa especializado para preparar las Páginas en el lenguaje
HTML, o un editor de texto ASCII como el NotePad de Windows 3.1+
(notepad.exe), el cual se encuentra en el directorio principal de
Win (C:\windows).
En PC Maracay, utilizamos el Notepad y el Netscape para preparar
todas los documentos que se presentan a nuestros lectores. Pero si
no posees el Netscape Navigator, utiliza el browser o el navegador
de tu conveniencia.
Consideraciones básicas
En general, cada comando o "tag" del lenguaje HTML se escribe entre
corchetes "< >" y en pareja; es decir, se utiliza un elemento para
iniciar el comando "<HTML>" y otro para cerrarlo "</HTML>". Existen
excepciones a esta regla, como es el caso de los comandos "<BR>" y
"<P>", los cuales se inician pero no se cierran (/).
Los comandos o "tags" se deben escribir desde la primera columna y
el archivo debe salvarse usando la extensión HTM o HTML. La primera
extensión se usa bajo ambiente DOS o Windows 3.1, mientras que la
otra extensión (HTML) se utiliza bajo ambiente UNIX. Recuerda que
la extensión HTML es la que debe llevar el archivo que contiene la
Página si deseas colocarla en un Sitio del WWW.
En todas las explicaciones y pruebas se utiliza el browser Netscape
versión 3.04. Sin embargo, todas las Páginas de demostración deben
verse sin dificultad en cualquier otro navegador.
Mi primera Página Web.
Los comandos mínimos que se requieren para elaborar una Página Web
son los siguientes:
<HTML> </HTML>; y <BODY> </BODY>.
Estos comandos se deben colocar de la siguiente manera:
<HTML>
<BODY>
</BODY>
</HTML>
Por ejemplo, utiliza el NotePad y escribe:
<HTML>
<BODY>
Esta es mi Primera Página Web!
</BODY>
</HTML>
Salva el archivo con el nombre "pagina1.htm" y luego cárgalo en
el Netscape (Ctrl + O) para que puedas visualizarlo.
Comentarios.
El comando "<HTML> y </HTML>" indica que el documento (pagina1.htm)
contiene elementos del lenguaje HTML. Sin embargo, la Página no se
visualizará en el browser o navegador sino están presentes los demás
comandos. El elemento <HTML> se escribe al inicio del archivo de
texto, mientras que </HTML> es necesario colocarlo al final con el
fin de cerrar el documento.
"<BODY> y </BODY>" contiene todas las características iniciales del
texto y de la imagen. Además, contribuye a la visualización de todos
los elementos que se incluyen entre ellos. En el ejemplo anterior
(pagina1.htm), la frase escrita "Esta es mi Primera Página Web!" no
se podría visualizar sin la ayuda de este comando.
Si bies es cierto, que es posible visualizar una Página utilizando
solamente los comandos "<HTML> y </HTML>; y <BODY> y </BODY>", es
conveniente agregar los comandos "<HEAD></HEAD>" y "<TITLE></TITLE>"
con el objeto de identificar el título de la Página en la ventana
del navegador (parte superior, al lado del icono del Netscape). Por
lo tanto, la estructura más adecuada de una Página debe contener los
elementos que acontinuación se indican:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
El comando "<HEAD> y </HEAD>" se utiliza con el fin de agregar
información acerca del documento HMTL, e incluir el comando <TITLE>
el cual permite colocar un encabezado que se visualiza en la parte
superior del browser.
Ahora, si en el ejemplo anterior (pagina1.htm) se agregan todos los
comandos descritos, la Página incluirá las siguientes líneas:
<HTML>
<HEAD>
<TITLE>
Página Número 1
</TITLE>
</HEAD>
<BODY>
Esta es mi Pimera Página!
</BODY>
</HTML>
Escribe los comandos anteriores en un archivo ASCII utilizando el
NotePad, salva el archivo con el nombre "pagina2.htm" y ábrelo en
con el Netscape (Ctrl + O).
Mi Segunda Página Web.
Ahora introduciremos varias mejoras en la Página, le agregaremos
un fondo en color, un banner que la identifique y un poco más de
texto; además, texto en letras en colores. Para ello, se utiliza
rán opciones adicionales del comando BODY y otros comandos HTML:
<H3> </H3>, <H4> </H4>, <FONT> </FONT>, <IMG> </IMG>, <CENTER>
</CENTER> y <BR>.
El comando BODY posee varias opciones que son de gran utilidad si
se desea agregar un fondo (background) en un color determinado o
que las letras del texto sean de un color específico:
BGCOLOR="#color" y TEXT="#color".
BGCOLOR="#color" nos permite colocar un color para el fondo de la
Página y TEXT="#color" selecionar el color con el cual se verán las
letras de todo el documento. Es de hacer notar, que los colores se
especificarán en notación hexadecimal y que cuando se coloquen en
BODY, a partir de ese momento éstos serán por defecto los colores
para toda la Página. Cualquier cambio necesario deberá realizarse
usando el comando <FONT> </FONT>.
Por ejemplo, el comando:
<BODY BGCOLOR="#FFFFFF" TEXT="#OOOOFF">
hace que el fondo de la Página sea de color blanco y las letras
del texto de color azul. Y,
<BODY BGCOLOR="#FFFFFF" TEXT="#44bb44">
hace que el fondo de la Página sea de color blanco y las letras
del texto de color verde.
Los comandos <H3> </H3> y <H4> </H4> permiten la crear títulos y
encabezamientos. Por ejemplo, con <H3> </H3> se crean títulos de
gran tamaño, mientras que con <H4> </H4> el tamaño de las letras
es menor. En general, el tamaño de las letras disminuye desde <H3>
</H3> hasta <H6> </H6>
Por ejemplo, con los comandos:
<H1>Bienvenido Cybernauta!</H1>
<H6>Bienvenido Cybernauta!</H6>
se logran los siguientes efectos:
Bienvenido Cybernauta!
Bienvenido Cybernauta!
El comando <CENTER></CENTER> permite centrar una línea de texto en
una Página con formato HTML. Por ejemplo, los comandos:
<center><H1>Bienvenido Cybernauta!</H1></center>
<center><H6>Bienvenido Cybernauta!</H6></center>
produjeron el efecto de centrar la frase "Bienvenido Cybernauta!"
que se mostró con anterioridad.
<IMG> </IMG> permite la incorporación de una imagen
gráfica (.GIF o .JPG) en un documento HTML. Posee varios atributos
los cuales están referidos a la imagen, tales como: SCR="nombre",
ALT="nombreAlternativo", ALIGN, etc.
En SCR="nombre" se escribe el nombre del archivo en formato GIF,
por ejemplo, SCR="biblio.gif", en ALT="nombre" se coloca un nombre
alusivo al gráfico el cual se visualizará al usuario em aquellos
casos en los cuales el usuario haya desactivado la opción de cargar
archivos gráficos en el browser (Auto Load Imagen). En estos casos
se visualizará al usuario, el nombre escrito entre las comillas;
por ejemplo, ALT="Esto es un Banner" hará que se visualice la frase
"Esto es un Banner" si el usuario desactivo la opción Auto Load
Imagen en el Netscape Navigator.
<BR> es un comando que se usa para provocar un retorno de carro y
desplazarse a una nueva línea en el documento HTML. Sólo posee un
un elemento, es decir, no posee un elemento de cierre "</BR>".
Teniendo en cuenta los comentarios antes expuestos, se presentan las
instrucciones relacionados con la nueva Página:
<HTML>
<HEAD>
<TITLE>Esta es mi Segunda Página Web</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#44BB44">
<BR>
<CENTER><IMG SRC="BIBLIO.GIF" ALT="Esto es un Banner"></CENTER>
<BR><BR>
<CENTER><H2>Muy pronto a tu disposición!</H3></CENTER>
<FONT COLOR=black>
<CENTER><H4>Información variada acerca de Internet,</H4<>/CENTER>
<CENTER><H4>el Computador Personal, Tutores en Línea y Mucho Más...</H4></CENTER>
</FONT>
</BODY>
</HTML>
Copia las instrucciones anteriores en un archivo de texto ASCII y
sálvalo con el nombre que más te agrade. Recuerda que la extensión
del archivo debe ser HTM o HTML. Por ejemplo, pagina3.htm.
Si deseas observar el resultado carga el archivo Página3.html.
___________
Netscape Navigator v3.04 es Copyright © 1994-1997 por Netscape Communications Corporation.
Notepad es Copyright © por Microsoft Corporation.
Mosaic es Copyright © por NCSA.
Internet Explorer es Copyright © por Microsoft Corporation.
Windows 3.1 es Copyright © por Microsoft Corporation.
Windows 95 es Copyright © por Microsoft Corporation.