Cursillo, acelerado, de creación de páginas WEB

para el editor FrontPage Express incluido con el Internet Explorer 4 (y superior)

 

Iniciado: el 19/Nov/98
Actualizado: el 23/Abr/2000


Las entregas, partes o "capitulos" del cursillo acelerado de creación de páginas Web (o HTML):

  1. Esta misma, así que para que poner un link... (19/Nov/98)
  2. La segunda entrega... (20/Nov/98)
  3. La tercera parte (23/Abr/2000)

Sois muchos los que de una forma u otra os habeis interesado en "querer" aprender a crear páginas WEB, pero, seguramente, cuando habeis leido que se necesita hacerlas usando el "lenguaje" HTML, habeis pensado dejarlo para otra ocasión...
Si tu intención es la de estar al día, es necesario tener unas nociones, aunque sean mínimas, de cómo crear una página Web... pero no necesitas saber HTML para crear este tipo de páginas, así que... sigue leyendo...

Si tienes, o has leido algo sobre, el Windows 98, combrobarás que el nuevo "sistema" de ayudas está basado en páginas HTML, lo mismo le ocurre al Visual Basic 6, que a pesar de no soportar al 100% este nuevo sistema de ayuda, es el formato que usa para mostrarte la ayuda... con ciertos fallillos, todo hay que decirlo, además de permitir indicar como fichero de ayuda de tus aplicaciones la nueva extensión CHM... no te preocupes, no te voy a enseñar a crear ayudas en el formato HTML, pero si te interesa el tema, puedes verlo en la sección Creación de Ayuda HTML.

Con este cursillo rápido, y por tanto corto, lo que voy a intentar es que aprendas a crear páginas HTML (o páginas WEB), para poder usarlas en la ya mencionada creación de ayudas al estilo Windows 98 o para que las uses en un sitio en Internet, (hay muchos servidores que ofrecen espacios gratuitos), aunque también te servirá para crear cosas para usarlas desde tu disco duro, sin necesidad de estar conectado a Internet... todo dependerá del uso que quieras darle... como en la mayoría de las cosas que hagas...

 

¿Que vas a aprender en este cursillo acelerado?

En principio estan son las cosas que tengo pensadas a la hora de escribir el borrador (el 11/Nov/98), después puede ser que haya otras cosas más o menos, según me de el punto...

Crear páginas Web con gráficos y texto (lo esencial)
Conectar (linkar) a otras páginas, usando gráficos y texto y a otra parte de la misma página u otra diferente.
Crear tablas para mostrar información más o menos de forma decente... o para separar distintas partes de una página.
Configurar la página... realmente cambiar el aspecto "visual" de una página.
Seguramente crear FRAMES: una página que muestra varias páginas a la vez.
.. y lo que se me ocurra...

 

NOTA:
Las capturas de pantallas y nombres de las opciones de los menús, etc., son de la versión inglesa del FrontPage Express... en la medida de lo posible, salvo algún que otro despiste, intentaré ofrecer las traducciones de las mismas al Castellano... para que lo entiendas mejor, pero si no es así... seguro que encontrarás la opción indicada... ¡no me defraudes!

 

¿Estás preparado?
Pues vamos a ello...

Para empezar, abre el editor del FrontPage Express, porque será con este editor con el que aprenderás a crear páginas Web.
Para tener este editor, tendrás que instalar el Internet Explorer 4 o superior, (creo que el IE5 usa el mismo que el IE4)

¿Por qué vamos a usar este editor?
Porque es el que yo uso... y aunque no sea una maravilla, cumple casi al 100% la mayoría de las necesidades... si lo que buscas es otra cosa "más sofisticada"... aquí no lo vas a encontrar... pero casi seguro que te será fácil de manejar cualquier otro editor de páginas Web.

Cuando cargas el editor, automáticamente se abre una página, en blanco, lista para usar.
Es importante que planifiques un poco lo que quieres hacer, aunque no es mucho inconveniente modificar las cosas posteriormente, es importante tener las ideas claras... (dar consejos es fácil ¿verdad? Algunas veces tendría que seguir los consejos que doy...)
Bueno, si no quieres planificarlo... al menos crea una carpeta (o directorio) en tu disco duro... para poder guardar las páginas. Ten en cuenta que si vas a "publicar" las páginas en un sitio de Internet, te será más fácil si las páginas son fácilmente localizables... además de que los links e imagenes que uses, (esto lo veremos dentro de poco), necesitan tener una referencia de dónde localizarlos... no te preocupes si no te enteras ahora de todo este sermón, cuando empieces a "meter la pata" te darás cuenta de lo que quería decir... ¡seguro!

Si tu intención es crear una nueva página, empieza guardándola, (ahora te digo cómo), para que sea más fácil de manejar todo lo que hagas posteriormente...

Dentro de la carpeta que uses para guardar las páginas, llamemosla: carpeta raiz, será conveniente crear otras carpetas para guardar las imagenes y otras cosillas más...
Normalmente no suelo usar nombres "raros" para nombrar las carpetas... es decir, no uso espacios ni caracteres que no sean los normales del "abecedario USA", entre otras cosas porque no todos los "navegadores" entienden todos los caracteres... así, que intenta evitar las letras acentuadas, las eñes, espacios y signos raros...

 

Algo de gráficos...

Para adornar las páginas se suelen usar gráficos; en la red hay algunos sitios en los que puedes encontrar imágenes para usar en tus páginas, para fondos o para cualquier otro tipo de "adorno".
También puedes crearte tus propios gráficos... en este mini-cursillo no te voy a enseñar a crear gráficos... entre otras cosas porque no soy el más indicado... aunque puede que te diga cómo modificarlos... eso dependerá del punto que me de...
Para manejar los gráficos, suelo usar el PaintShop Pro, que a pesar de ser bastante simple... tiene un montón de posibilidades y además es "medio" gratuito... es shareware y es fácil de conseguir...

Voy a aclararte un par de cosillas referente a los gráficos... en las páginas Web se suelen usar dos tipos de gráficos: GIF y JPG, porque al ser formatos comprimidos, tienen "relativamente" buena calidad y, sobre todo, ocupan poco espacio, cosa bastante importante en todo lo relacionado con Internet... ya que tanto los gráficos como las pantallas deben "viajar" desde el servidor a tu disco duro por las "concurridas" pistas de Internet...

En este tema del tamaño de los gráficos, los "inexpertos" suelen meter la pata hasta el cuello, es decir: usan gráficos grandes, sobre todo, porque al probarlos desde su disco duro se muestran de forma bastante rápida... pero hay que tener en cuenta que esa rapidez se pierde, y en ocasiones se eterniza, al estar conectados a Internet...
Recomendación: Usa gráficos que no ocupen mucho espacio, a partir de 20 KB ya son demasiado "pesados"...
Mientras sea posible, usa gráficos pequeños, de menos de 10KB; si el gráfico merece la pena, puedes intentar usar un tamaño mayor, pero... puede ser que tu visitante se "aburra" de esperar y se vaya de tus páginas...

 

¿Que formato gráfico es mejor?

Depende del uso que quieras darle y del número de colores que necesites, vamos a ver algunas características de estos dos tipos:

Los gráficos en formato GIF:
soportan desde 2 hasta 256 colores,
permiten hacer transparente uno de los colores,
permiten mostrar gráficos animados...

Los gráficos en formato JPG:
soportan desde 256 hasta 16 millones de colores,
no permiten hacer transparente uno de los colores (al menos que yo sepa),
ni permiten mostrar animaciones.

Por tanto, tendrás que hacer tus propias pruebas, (que es lo que algunos hacemos), y decidir que tipo usar.
En el caso del tipo JPG, permite distintos "niveles" de compresión; cuanto más alto sea ese nivel, menos calidad tendrá... así que juega con los diferentes niveles de compresión y... como siempre, escoge el que más te guste...

 

¿Empezamos ya o que... ?

Después del repaso a los formatos gráficos... vamos al tema que te ha traido hasta aquí...

Tenemos una página en blanco en la cual puedes escribir como en cualquier editor de texto, (o procesador de texto, como prefieras llamarlo), incluso podemos usar diferentes tipos de letras, estilos y tamaños, pero... ¡cuidadín! no todos los tipos de letras estarán disponibles para todos los que "visionen" nuestra página... recuerda que te comenté que las páginas se pueden ver con cualquier navegador... y no todos los navegadores trabajan en Windows, incluso si trabajan en Windows, no todos tenemos los mismos tipos de letras instalados.
Aunque hay algunos tipos que son casi generales:
Arial, Courier New (para textos de espacio fijo), Times New Roman, e incluso el Comic Sans (al menos para los navegadores de Microsoft)
Por tanto no "bases" tu página en el tipo de letra usado, porque puede ser que algunos tipos se muestren con el tipo que el usuario tenga configurado por defecto, generalmente el Times New Roman.

Para modificar el tamaño del texto, se pueden usar una serie de formatos "predefinidos", en seguida los veremos.

Ya te he comentado que el editor de FrontPage Express se usa como un editor normal, por tanto para introducir texto en una página, puedes hacerlo por el "viejo" método de escribirlo o de pegarlo desde otra aplicación.
Pero cuidado, el FP Express no soporta el formato de texto enriquecido (RTF), que es el que usan la mayoría de procesadores de texto, por ejemplo WORD; por tanto, puedes encontrarte con "basura" al pegar texto que has copiado de un procesador de texto.
Cuando me ocurre esto, suelo usar un editor de texto "normal" como intermediario, el que uso es el TextPad, que permite que se pegue texto enriquecido, aunque le quita todo el "enrequecimiento" que tiene y lo deja en texto "normal"... después lo selecciono y copio de nuevo y por fin lo pego en la página que tengo en el FPE.
(No se si el Notepad servirá para eso, pero es que no suelo usarlo, al menos para estos menesteres, ya que es demasiado simple; el WordPad me imagino que si que servirá, pero tampoco lo he probado...)

 

¿Como formatear el texto?

Como con el resto de los editores o procesadores de texto:
Selecciona el texto a "formatear" y aplica lo que necesites...
Vamos a echarle un vistazo al menú Format (Formato) y las opciones que nos brinda, así como a la barra de tareas para ver las diferentes posibilidades que nos brinda el FPE (FrontPage Express):

Nota: Si no se muestran las barras de tareas indicadas, tendrás que ir al menú "View" (Ver) y marcar las diferentes barras de tareas.

Barra de tareas para el formato de texto: (Format Toolbar)

Vamos a ver que significa cada una de las "secciones" de esta barra de tarea:

Gráfico

  Explicación
  Formatos predeterminados Una serie de formatos de párrafo predeterminados, o contemplados en HTML, más adelante veremos cuales son, así como ejemplos del aspecto que tienen.
Fuentes disponibles La fuente a usar.
Recuerda que aunque tu puedas usar los tipos de fuente mostrados, no todos está disponibles en todos los equipos.
Tamaño de la fuente Sirve para ampliar o reducir el tamaño de la fuente, los tamaños disponibles, según el "lenguaje" HTML van desde 1 a 7, que suelen corresponderse con los siguientes tamaños en puntos:
1 (8 p)
2 (10 p)
3 (12 p)
4 (14 p)
5 (18 p)
6 (24 p)
7 (36 p)
El tamaño predeterminado es: 3 (12 puntos)
Estilo de la letra Pues eso, Negrita, Itálica y Subrayado
(Bold, Italic, Underline)
Color de la fuente Si pulsas en este icono te muestra un cuadro de diálogo del que podrás elegir el color que quiere que se muestre.
Tienes que tener en cuenta que puede que no todos los que vean tu página tengan la posibilidad de ver la misma cantidad de colores que tú.
Formato del párrafo Permite posicionar el párrafo:
a la izquierda, en el centro o a la derecha,
pero no permite que se "justifique".
  Numeración... Permite numerar las líneas del párrafo, además de con números y "bolitas", se pueden usar otros estilos... ya los veremos.
Sangría Permite disminuir o aumentar la sangría del párrafo; se usa para dejar márgenes a la izquierda y derecha del párrafo.

Con el menú Format (Formato), te permite lo mismo que en la barra de tareas, pero con algunas opciones más, pruebalo y decide...

Vamos a ver los distintos "estilos" predeterminados de párrafo:

Nota:
El código HTML para conseguir los diferentes estilos, lo doy a título informativo o "didáctico" si así lo prefieres, y no es algo tengas que aprenderte ni que tengas que usar..., simplemente lo pongo para que sepas lo que significa... por si ves el contenido de una página Web usando un editor de texto.
Normalmente cada estilo tiene un indicador que sirve para empezar y otro para terminar, por ejemplo:
<font ...> empieza la definición del tipo de fuente y </font> le indica que ya ha terminado el estilo de la fuente indicada.
Repito que todo esto es a título informativo y para los curiosillos que les gusta meterse donde no deben... je, je.

Estilo
lo que hay en esta columna se muestra sin ningún estilo, osea en normal
Muestra
Address
El código HTML para conseguirlo es:
<address>Address (como...</address>
Address (como si estuviese en itálica)
El código HTML para conseguirlo es: <address> </address>

Bullet List
El código HTML para conseguirlo es:
<ul>
<li>Bullet List<br>(lista con...</li>
<li>Otra bolita...</li>
</ul>
Bullet List
(lista con bolitas)
Otra bolita más...

Defined Term.
El código HTML para conseguirlo es:
<dl>
<dt>Defined Term:</dt>
<dd>Se desplaza automáticamente...</dd>
<dt>En cuanto...</dt>
<dd>para volver...</dd>
</dl>
Defined Term:
Se desplaza automáticamente hacia la derecha...
En cuanto se pulsa de nuevo Intro, se vuelve a la parte izquierda,
para volver con el siguiente intro a indentarse...
Osease para definir términos

Definition, osea lo mismo que el de antes, pero sólo la definición.
El código HTML para conseguirlo es:
<dd>Definition</dd>
Definition:
Al pulsar intro se pasa automáticamente a Defined Term:
¿Lo ves?

Directory List.
El código HTML para conseguirlo es:
<dir>
<li>Directory List</li>
<li>¿No es esto...</li>
</dir>
Directory List
¿No es esto lo mismo que el Bullet List?

Formated.
El código HTML para conseguirlo es:
<pre>Formated, es decir... </pre>
Formated, es decir se usa el tipo Courier New
y se tienen en cuenta los espacios    aqui hay varios.

Heading 1 (Cabecera 1)
El código HTML para conseguirlo es:
<h1>Heading 1</h1>

Heading 1

Heading 2 (Cabecera 2)
El código HTML para conseguirlo es:
<h2>Heading 2</h2>

Heading 2

Heading 3 (Cabecera 3)
El código HTML para conseguirlo es:
<h3>Heading 3</h3>

Heading 3

Heading 4 (Cabecera 4)
El código HTML para conseguirlo es:
<h4>Heading 4</h4>

Heading 4

Heading 5 (Cabecera 5)
El código HTML para conseguirlo es:
<h5>Heading 5</h5>
Heading 5

Heading 6 (Cabecera 6)
El código HTML para conseguirlo es:
<h6>Heading 6</h6>
Heading 6

Menu List
El código HTML para conseguirlo es:
<menu>
<li>Menu List</li>
<li>Sigo pensando...</li>
</menu>
Menu List
Sigo pensando que es igual que el Bullet List

Numbered List
El código HTML para conseguirlo es:
<ol>
<li>Numbered List</li>
<li>Segunda línea</li>
</ol>
  1. Numbered List
  2. Segunda línea


Bueno ya has visto unas cuantas cosillas... así que vamos a dejarlo por ahora y mañana seguiremos... Quien dice mañana dice otro día, que tampoco hay que tomarse las cosas tan literalmente, pero seguro que será pronto...

Y como adelanto: empezaremos incluyendo gráficos en las páginas y veremos otra de las barras de tarea... así que sigue pendiente de tu pantalla...

Nos vemos.
Guillermo


ir al índice

Arriba