Los objetivos de la primera lección son:
1.1 Comenzar aplicando formatos
1.2 Actividad nº 1: Aplicar formatos a un
texto
1.3 Guardar el documento creado
1.4 Adquirir las primeras nociones sobre el lenguaje
HTML
Si tenemos instalada la aplicación FrontPage
Express en nuestro ordenador, lo más probable es que
haya un acceso directo al programa en el menú Inicio;
allí, dentro del menú Programas, se
encuentra la carpeta Internet Explorer, donde
está el acceso directo. Si no se encuentra aquí, puede
hallarse dentro de la carpeta Accesorios en otra
carpeta llamada Herramientas de Internet. Para
encontrar FrontPage Express (FPE) en el disco duro, hay que abrir la
carpeta c:\Archivos de programa, donde a su vez
está la carpeta FrontPage Express, que
también puede que se llame Microsoft FrontPage Express.
Dentro de la carpeta del programa vemos la carpeta Bin,
donde se encuentra el archivo Fpxpress.exe, que tiene
un icono que muestra una pluma roja encima de una libreta abierta. Si
no aparece ninguna carpeta con esos nombres, lo más probable es
que FrontPage Express no se haya instalado junto al navegador Internet
Explorer; en ese caso, hay que ejecutar la instalación
personalizada de este navegador (en una versión
anterior a la 6.0) para instalar FrontPage Express, o instalar la
aplicación ejecutando la Instalación de Windows
95 o Windows 98 (anterior a la segunda
edición) desde Agregar o quitar programas, que
se encuentra en la carpeta Panel de control. Si
FrontPage Express está bien instalada en Windows, se puede abrir
desde el menú Edición del navegador Internet
Explorer o pulsando el botón correspondiente de la
barra de herramientas de este navegador. En todo caso, si no tiene
instalado el programa en su disco duro, puede descargarlo desde la
dirección que aparece en la sección de descargas de este curso.
Para empezar a utilizar FrontPage Express, vamos a conocer los distintos formatos que podemos aplicar al texto de un documento. En la segunda sección realizaremos una actividad que consistirá en aplicar estos formatos a un texto.
Los formatos
con que se puede transformar el texto de una página web no son
tantos como los que tiene un buen procesador de textos, pues el
lenguaje HTML carece de elementos avanzados de diseño. Sin
embargo, en la lección 7 veremos que las hojas de
estilos nos permiten un mayor refinamiento en el formateo y el
diseño general de la página. De todas formas, programas
como FPE poseen las suficientes herramientas para conseguir una buena
presentación del texto y un diseño consistente, lo que se
puede lograr pulsando en los siguientes botones y menús
desplegables de la barra de formato:
Si colocamos el puntero del ratón encima de estos botones, aparecerá una etiqueta que nos indica para qué se utiliza cada uno de ellos. Para aplicar los seis primeros formatos de los botones hay que marcar o destacar el texto que queramos cambiar. Para ello, se coloca el puntero del ratón al principio o al final del texto, se aprieta el botón izquierdo del ratón y, sin dejar de pulsarlo, se arrastra el puntero sobre el texto elegido. Al final, se suelta el botón izquierdo del ratón y aparece el texto de color blanco con el fondo negro. Entonces ya se puede aplicar el formato deseado pulsando el botón o el menú correspondiente. También se puede marcar una palabra haciendo un doble clic encima de la palabra, y se puede continuar destacando las palabras siguientes con un clic del ratón a la vez que se aprieta la tecla de mayúsculas. Para aplicar los demás formatos basta con colocar el puntero del ratón encima de una palabra o de una línea del texto que queremos transformar.
Todos estos formatos y algunos más también se pueden aplicar abriendo el menú Formato de la barra superior de menús y también abriendo el menú desplegable donde se encuentran los encabezados. Conviene que practiquemos con ellos para descubrir qué resultados dan en la página.
Mención aparte merece la
opción Numeración y viñetas del
menú Formato, que utilizaremos cuando queramos
formatear una lista de viñetas o numerada, ya que nos permite
más posibilidades que los botones que aparecen en la barra de
formato. Cuando utilizamos esta opción aparece una ventana de Propiedades
de lista con se compone de tres secciones: Viñetas,
Numeración y Otros, en donde
podemos escoger el tipo de lista que queramos. En la sección de
Numeración además podemos elegir el número por el
que queremos que empiece la lista. Cuando deseamos hacer una lista que
tenga más de un nivel, tenemos que utilizar el botón de aumentar
la sangría (pulsando dos veces) , y después
elegir el tipo de lista para ese nivel. Para volver a la sección
anterior, utilizamos el botón de disminuir la
sangría. Por ejemplo:
Se pueden utilizar dos tipos de listas:
Por último, también hay que tener en cuenta algunos
de los elementos que aparecen en el menú
Insertar de la barra de menús. Nos
referimos a la primera y la tercera opciones:
Es hora ya de presentar a nuestro Monstruo, que nos acompañará durante todo el curso. Este personaje tristón y a la vez divertido ha escrito una breve presentación para su página personal con la que vamos a comenzar a utilizar FrontPage Express a fondo. La presentación se encuentra en el archivo texto.htm, dentro de la carpeta monstruo, que se instala dentro de la carpeta principal de este curso si se ha utilizado el programa de instalación que se descarga desde la primera página de este curso. Si se trabaja directamente desde Internet, se puede copiar este archivo al disco duro desde el navegador después de abrir dicho archivo en una ventana al pulsar el siguiente botón:
La actividad consiste en aplicar formatos a este texto de forma que quede igual al que se encuentra en el archivo formatos.htm, que se puede ver en una nueva ventana pulsando el siguiente botón:
Vamos
a empezar utilizando el archivo texto.txt. Este texto
se ha elaborado de antemano en un editor de textos, ya que es una forma
de proceder muy habitual si se tiene en cuenta que en este tipo de
programas se puede escribir y corregir el texto con comodidad y
eficacia. Por desgracia, FrontPage no tiene correctores de
ortografía y de estilo, por lo que resulta recomendable escribir
en un procesador de textos el texto que vayamos a incluir en una
página web, pero sin incluir ningún tipo de formatos de
texto para no ensuciar el código HTML generado cuando
abramos el archivo con FrontPage Express. El texto final elaborado en
el procesador de textos lo guardaremos como formato de texto:
.txt.
Lo primero que vamos a hacer es abrir el archivo texto.txt en FrontPage Express abriendo el menú Insertar de la barra de menús y pulsando con el puntero del ratón en la opción Archivo... Este archivo hay que buscarlo en la carpeta monstruo, que se encuentra dentro de la carpeta principal de este curso: Webs con FPE; si el curso se ha instalado con el instalador, se ubica en la carpeta Archivos de programa del disco duro (C:). Antes de que se cargue el documento, aparece una ventana de diálogo llamada Convertir texto en la que tendremos que elegir la opción Párrafos normales para que el texto se adapte a las etiquetas HTML.
En el texto que aparece en la pantalla hay que aplicar distintos
formatos de texto para dejarlo igual que el archivo que hemos
visto antes al pulsar el primer botón de este documento.
En definitiva, lo que hay que hacer es lo siguiente:
Por último, tenemos que guardar la
página en el disco duro; para ello, pulsamos el
botón cuya imagen es un disquete,
y entonces se abre una ventana de diálogo en cuyo cuadro superior de texto escribimos el título de la página; por ejemplo: "Web del Monstruo".
Este título de la página no será visible en el documento que hemos elaborado, pues es el título que manejará el navegador y que aparecerá en la barra de títulos del navegador, en la barra de tareas del escritorio de Windows y en el menú de páginas visitadas del navegador.
Para terminar de guardar el archivo, apretamos el botón cuyo enunciado es Como archivo, que se encuentra en la misma ventana de diálogo, y buscamos en el disco duro la localización para nuestro archivo, que llamaremos index.htm, pues éste es el nombre que habitualmente se da al archivo principal para que lo reconozcan los usuarios, los servidores y los buscadores. No es necesario teclear la extensión .htm, porque en este caso ya se encarga el programa de ello, pero conviene añadirlo, pues en otros casos el programa no lo añade automáticamente. También se acepta la extensión .html, si bien nosotros preferimos la primera por tener tres letras, como la mayoría de las extensiones de archivos.
Es importante que todos los archivos que vayamos elaborando
los guardemos en la misma carpeta. Como vemos en la imagen superior, en
nuestro curso hemos creado una carpeta llamada monstruo,
donde el usuario puede guardar sus archivos; en ella hemos copiado un
archivo titulado texto.txt, que utilizaremos en este
curso. Dentro de esta carpeta hemos creado otra llamada imagenes,
donde guardamos algunas imágenes que también nos
serán útiles. Cuando las páginas web tienen muchos
archivos, conviene guardarlos en carpetas distintas dentro de la
carpeta principal. Hay que tener en cuenta que, para evitar problemas
con los distintos tipos de servidores de Internet, es conveniente
nombrar las carpetas y los archivos con letras
minúsculas y sin acentos ni otros caracteres especiales.
Los nombres deben ser cortos y de una palabra; si queremos usar
más palabras, las debemos unir con un guión bajo (mi_pagina.htm),
o sin él (mipagina.htm), pero nunca separadas (mi
pagina.htm).
Y ya hemos creado nuestra primera página, aunque en las siguientes lecciones la iremos mejorando y completando.
Es conveniente que de vez en
cuando veamos nuestra página en los navegadores
Internet Explorer y Mozilla
(sustituto de Netscape Navigator), que son los
más utilizados en la Red, para asegurarnos de que la
página se vea bien en ambos navegadores. Para ello, hay
que guardar nuestro trabajo regularmente y después abrir
los archivos con esos navegadores, teniendo en cuenta que a veces
tendremos que pulsar el botón de actualizar documento que
hay en los ellos para que el navegador recoja los últimos
cambios que hayamos efectuado en nuestras páginas. Ambos
navegadores muestran de forma parecida los elementos
básicos de HTML, que son los que vamos a utilizar en este
curso, y por tanto el problema no es importante en este
nivel.
El HTML
es un lenguaje sencillo que se utiliza para elaborar páginas de
Internet. No es el único que se utiliza en la Red, pero
todavía sigue siendo fundamental para generar los millones de
documentos que pueblan la World Wide Web. Hay otros lenguajes
que mejoran las funcionalidades multimedia e interactiva de las
páginas web, pero el HTML constituye la base. Se
pueden crear páginas de Internet simplemente escribiendo
código HTML en un archivo de texto y guardándolo con las
extensiones .htm o .html. El
navegador que utilicemos se encargará después de traducir
ese código para que veamos las páginas en la Red. Por
tanto, aplicaciones como FrontPage Express no son
imprescindibles para generar código HTML pero nos facilitan
enormemente la tarea. En todo caso, aunque no resulte necesario conocer
el lenguaje HTML para crear páginas, siempre conviene
familiarizarse con él, sobre todo a la hora de mejorar el
diseño de los documentos y perfeccionar sus cualidades
interactivas.
La información que del lenguaje HTML se va a ofrecer en esta sección de nuestro curso es básica pero suficiente para comprender los entresijos de este lenguaje. Sus distintas versiones no han modificado su estructura, que sigue siendo compatible con los dos navegadores principales, el Internet Explorer y el Mozilla-Netscape, si bien hay aspectos que ambos navegadores no interpretan del mismo modo. En este curso, la enseñanza del HTML va a ir ligada a las actividades prácticas que se vayan realizando y, por tanto, no pretende ser exhaustiva.
Ahora vamos a ver el código fuente de
nuestra página, que ha creado automáticamente
Frontpage Express. Tenemos que abrir el menú
Ver de la barra de menús y pulsar en la
opción HTML.... Aparecerá una
ventana que muestra las tripas de nuestra
página.
Lo primero que hay que saber es que HTML (Hypertext Markup Language) es un lenguaje de etiquetas o marcadores, es decir, de órdenes que damos mediante un código escrito en inglés. Las etiquetas básicas de toda página web son las siguientes:
<html>
<head>
<title>Mi página</title>
</head>
<body>
<p>Texto incluido por el usuario</p>
</body>
</html>
La primera etiqueta que hay que escribir en el archivo es <html>, y la última </html> (da igual que sea en mayúsculas o minúsculas), que se diferencian en la barra /, la cual indica el cierre de la etiqueta. Casi todas las etiquetas tienen que cerrarse de esta manera, pero hay algunas que no tienen cierre. La presente etiqueta indica que el archivo es de lenguaje HTML.
La etiqueta <head> abre la cabecera de la página. Esta sección se utiliza, entre otras funciones, para ofrecer información a los buscadores de Internet con las etiquetas <meta>, para introducir lenguajes de scripts, para enlazar archivos de hojas de estilos y para indicar el título de la página mediante la etiqueta <title>. Nada de lo que se escribe aquí aparece en la página que ve el usuario, salvo el título, que aparece en la barra de título del navegador, en la barra de tareas de Windows y en el menú de páginas visitadas.
Todo lo que se va a ver en el documento está incluido en la etiqueta <body>, que es el cuerpo de la página. Aquí hemos escrito la frase "Texto incluido por el usuario", con la etiqueta <p>, que indica que ese texto forma un párrafo.
A continuación vamos a estudiar las etiquetas que ha
producido la actividad de esta lección y que el programa
ha escrito en el cuerpo del archivo, entre las etiquetas
<body> de apertura y de cierre :
<body
bgcolor="#FFFFFF">
.<li>Para
dejar constancia de mi <em>existencia</em>
sobre la Tierra</li>
Otras
etiquetas de formato que no hemos utilizado son las siguientes: