1. Formatos de texto
Los objetivos de la primera lección
son:
1.1 Aplicar formatos
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:
- Con el primer menú desplegable podemos dar formato a los textos de
los títulos, que cuentan con seis encabezados
predeterminados, y a las listas.
- En el segundo menú desplegable se puede elegir el tipo de
letra, pero de momento no conviene cambiarlo, o si lo hacemos, lo
mejor es elegir aquellos tipos de letra que se encuentran instalados en la
mayor parte de los ordenadores de forma predeterminada, que suelen ser los
tipos Times New Roman y Arial, entre otros pocos. Este escaso control sobre
la tipografía se verá paliado por las hojas de estilos,
como ya veremos en la lección 7.
- Con el primer y el segundo botón podemos aumentar o disminuir
el tipo de letra respectivamente.
- Los tres botones siguientes sirven para hacer que el texto esté en
negrita, en cursiva, o subrayado.
- El botón que tiene el icono amarillo de una paleta de pintor sirve
para colorear el texto.
- Los tres botones siguientes se utilizan para justificar el texto
a la izquierda, al centro y a la derecha. Para conseguir una justificación
completa hay que hacerlo en el código fuente de la
página escribiendo align="justify" dentro de la etiqueta
de párrafo (<p>).
- Con los dos botones siguientes introducimos listas con viñetas
y listas numeradas respectivamente.
- Y finalmente, los dos últimos botones sirven para disminuir e incrementar
la sangría del texto.
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:
- Con viñetas:
- Numeradas:
- Con números romanos.
- Con letras
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:
- Si pulsamos la opción Salto de
línea... y elegimos Salto de línea
normal en la ventana de opciones que aparece, la
línea se romperá en donde se encuentra el cursor
del ratón, y el cursor se colocará una línea
más abajo, sin dejar un espacio de separación. Si
queremos una separación de dos líneas, como para
establecer un punto y aparte, simplemente pulsamos la tecla
Intro.
- Cuando queramos insertar un símbolo o
carácter especial, que no se puede
introducir desde el teclado, pulsaremos en la opción
Símbolo....
1.2 Actividad nº 1:
Aplicar formatos a un texto
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:
Texto sin formatos
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:
Texto con formatos
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:
- Al título del documento hay que aplicarle el
encabezado 1 y al subtítulo, el
encabezado 3. Ambas líneas hay que
centrarlas en la página.
- La línea tercera va a estar centrada
y toda en negrita; además, vamos a
insertar un salto de línea después
de la única coma que hay en ese texto. También
pondremos en negrita los nombres de las tres
direcciones de páginas web de la sección Enlaces de
miedo.
- Las líneas quinta y sexta deben constituir una lista con viñetas.
- En la línea sexta la palabra
aportación tiene que estar en
cursiva.
- A los tres títulos de las secciones (Profesión,
Aficiones y Enlaces de miedo) les aplicamos el encabezado
2.
- En la sección Aficiones, todas las líneas salvo la primera tienen
que ir incluidas en una lista numerada.
- En la sección enlaces de miedo, hay que formatear los
títulos de los enlaces (Halloween.com, etc.) con el
formato llamado Término definido, y los
párrafos explicativos de cada uno de ellos con el formato
Definición. Ambos formatos de listas se
encuentran en el primer menú desplegable de la barra de
formatos.
- La última línea del texto, que indica la
autoría de la página web, va a ir centrada.
- En cuanto a los colores, vamos a colorear de
azul el título de la página, la
tercera línea y los títulos de las secciones.
1.3 Guardar el documento creado
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.
1.4 Primeras nociones de
HTML
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 :
- Se ha incluido el color de fondo (bgcolor)
como atributo de <body>, es decir, dentro de la etiqueta
de apertura, que en este caso es el blanco:
<body
bgcolor="#FFFFFF">.
- Al título y al subtítulo se les ha aplicado el encabezado
1 (<h1>) y el 3 (<h3>)
respectivamente y ambas líneas se han alineado al centro: align="center".
A los títulos de las tres secciones se les ha aplicado el encabezado
2 (<h2>).
- El texto normal se encierra dentro de las etiquetas <p>
de apertura y de cierre, lo que indica que es un párrafo. En la tercera
línea de texto hemos insertado un salto de línea,
cuya etiqueta es <br>, que no tiene cierre.
La diferencia entre ambas etiquetas es que la primera comienza un párrafo
y por tanto deja mayor espacio entre las líneas.
- Las viñetas se han aplicado con la etiqueta <ul>,
es decir, lista no numerada. Entre esta etiqueta y la de
cierre (</ul>), se han introducido las viñetas
propiamente dichas con las dos etiquetas <li>. Y en
la segunda sección (Aficiones) se ha incluido una lista numerada
(<ol>). Los tipos de listas con viñetas se introducen
como atributos dentro de la etiqueta <ul> de esta manera:
<ul type="disc" start="1">, cuando es un círculo
negro; si se trata de un círculo con el interior blanco, entonces el
tipo es type="circle", y si es un cuadrado negro, es
type="square".
El atributo start="1" significa que la numeración
debe empezar en 1. En cuanto a las viñetas numeradas (<ol>),
los tipos pueden ser: "i" o "I" para numeración
romana, minúsculas o mayúsculas respectivamente, o bien "a"
o "A", si se quiere que sean letras.
- La lista de definición se ha incorporado en la última
sección (Enlaces) con las etiquetas <dl>, <dt>
y <dd>.
- En el texto de la lista con viñetas se ha aplicado la letra cursiva
con la etiqueta <em>, que otros programas aplican con
la etiqueta <i>.La negrita se ha aplicado
con la etiqueta <strong>, aunque otros programas aplican
la etiqueta <b>. Hay que destacar que la etiqueta de
cierre de la negrita y de la cursiva son anteriores a la etiqueta de cierre
de la lista, lo que se denomina anidamiento:
<li>Para
dejar constancia de mi <em>existencia</em>
sobre la Tierra</li>
Esto ocurre con mucha frecuencia en el lenguaje HTML y puede ser causa de
errores cuando se hace manualmente.
Otras etiquetas
de formato que no hemos utilizado son las siguientes:
- <blockquote>Se utiliza para sangrar el texto</blockquote>
- <cite>Se utiliza para incluir una cita, y el texto aparece
en cursiva</cite>
- <code>Se utiliza para indicar que es texto de código</code>
- <font face="Arial" color="#FF0000">Se
utiliza con el atributo face para indicar el tipo de letra y
con el atributo color para el color del texto. Sin embargo,
las hojas de estilos son la mejor técnica para conseguir esto.</font>
