Las entregas, partes o "capitulos" del cursillo acelerado de creación de páginas Web (o HTML):
- Esta misma, así que para que poner un link... (19/Nov/98)
- La segunda entrega... (20/Nov/98)
- 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> |
|
||||
|
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> |
|
||||
|
Definition,
osea lo mismo que el de antes, pero sólo la definición. El código HTML para conseguirlo es: <dd>Definition</dd> |
|
||||
|
Directory
List. El código HTML para conseguirlo es: <dir> <li>Directory List</li> <li>¿No es esto...</li> </dir> |
|
||||
|
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> |
|
||||
|
Numbered
List El código HTML para conseguirlo es: <ol> <li>Numbered List</li> <li>Segunda línea</li> </ol> |
|
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
