Curso HTML: Trabajando con texto

Cursos y Tutoriales / Stratos-ad.com
Curso acelerado de HTML de Fernando Rodríguez

Índice.
Curso acelerado de HTML de Fernando Rodriguez.

· Capítulo 1. Introducción.

· Capítulo 2. Directivas y estructura de un documento HTML.
· Zona Cabecera.
· Cuerpo del Documento.
· Zona final.

· Capítulo 3. Trabajando con texto.
· Directivas BASEFONT y FONT.
· Directiva P, CENTER, BR y HR para el tratamiento de los párrafos.
· Resaltando el texto.
· Reutilizando nuestros archivos ASCII.

· Capítulo 4. Presentemos todo más elegantemente: las listas.
· Listas Numeradas.
· Listas Marcadas.
· Listas de Definiciones.

· Capítulo 5. Usando los recursos de Internet.
· Los enlaces hipertexto.
·¡Dios mío, si todo se hace con una directiva!.
· Ya se cargar archivos .HTM desde mi página, ahora... quiero ¡más!.
· Algunos truquillos y avisos a la hora de utilizar el FTP.

· Capítulo 6. Hagamos todo más profesional con las tablas.
· Lo que tenemos que tener claro.
· Aprendiendo a utilizar la directiva <TABLE>.
· Las directivas <CAPTION> y <TH>.
· Pero... ¿Cómo controlo la información?
· Consideraciones finales.

· Capítulo 7. Y llegamos a los gráficos...
· Los dos formatos gráficos más utilizados.
· Análisis del formato GIF.
· Análisis del formato JPG.
·¿Y cómo los inserto en mi página?

· Capítulo 8. Aprende el uso y abuso de los frames.
·¿Qué es eso de los frames?
·¡Manos a la obra!
· Cómo indicarle al navegador la división.
· La etiqueta <BASE>
· Un ejemplo antes de marchar.
· Y llegamos, nuevamente, al final.

· Capítulo 9. Final del curso acelerado.

1


Capítulo 1.
Introducción.

Pues bien, se supone que con este artículo se va a intentar que todo aquel que lo siga sepa
hacer una página WEB lo mínimamente interesante y elegante como para atraer la atención del
quot;cybernautaquot;, sin demasiadas pretensiones pero eso sí, funcional quot;a topequot;.

Para empezar, dejar claro, que no se va a ver ni muchísimo menos todo lo que es el HTML
(que es lenguaje con el que se implementan las páginas WEB), sino que se verá sus comandos
más populares y efectivos a la hora de llevar a la práctica las acciones básicas para que la
página que diseñemos tenga la suficiente calidad como para ser visitada.

Por otro lado, sólo veremos HTML, así que no habrá ni Java ni historias parecidas, ya que
entre otras razones un servidor tiene conocimientos al respecto, así que si tú sabes Java y
quieres contarnos algo esta es tú oportunidad.

2


Capítulo 2.
Directivas y estructura de un documento HTML.

A pesar de que existen montones de programas para crear páginas web de un modo súper
automatizado, nosotros nos vamos a valer de nuestro procesador de textos preferidos para
crear los documentos html, o lo que es lo mismo, los archivos .htm que los distintos
navegadores entienden y son capaces de interpretar. Una vez que nos encontremos frente a
nuestro procesador de textos ya podemos empezar a darle a la tecla.

Bien, aquí vamos a ver la estructura que debe de tener todo documento HTML que creemos,
de esta forma, siempre partiremos de un esqueleto básico, al que tan sólo tendremos que
añadir comandos y textos para hacer que se adapte a lo que nosotros queramos.

Antes de comentaros las tres zonas básicas en las que se divide un documento HTML, os diré
qué son las directivas. Durante la creación de cualquier documento HTML es necesario utilizar
las directivas, marcas o tags, dichas directivas, van entre los símbolos de mayor y menor, esto
es, van entre < y >. Para indicar a qué es a lo que afectan las directivas, lo que se hace es
poner una directiva al comienzo de lo que se quiere afectar y otra al final, con la peculiaridad de
que esta última tendrá también la barra /. De esta forma, el esquema de una directiva sería:
<directiva> Zona del documento afectada </directiva>
Una vez entendida esta tontería pasamos a describir las 3 zonas de un documento HTML.

Todo documento HTML tiene o dispone de tres zonas claramente diferenciadas, estas son:

1. Zona Cabecera.

En esta zona es la que indica el comienzo de nuestro documento HTML, la verdad es que es
algo tan chorra como tener que poner la directivas <HTML> y <HTML/> en el documento. La
primera de ellas sirve para indicar que empezamos ahí, mientras que la última (la que tiene /)
indica que terminaremos ahí (todo esto ya os lo conté más arriba). Cabe decir que es
indiferente (y esto se va a aplicar a todo lo que veamos) que se escriban las directivas HTML
en mayúsculas o en minúsculas.
Otra de las directivas que se puede considerar dentro de la zona de cabecera y que va dentro
de la directiva HTML (todo el documento va dentro de la directiva HTML) es la de HEAD. Esta
directiva, indica el comienzo de la zona en donde podemos poner el título de nuestra página
WEB, es decir, el título de la ventana del navegador cuando cargue nuestra página WEB. Para
ello basta utilizar, dentro de HEAD, la directiva TITLE que nos permite escribir el título.
Un ejemplo de todo lo visto hasta ahora podría ser el siguiente:

<HTML>
<HEAD>
<TITLE>Macedonia Magazine</TITLE>
</HEAD>
</HTML>

Si metiéramos esto en un archivo de texto normal y corriente con la extensión htm y lo
cargaremos en nuestro navegador favorito, veríamos que en la zona de títulos de la ventana se
leería Macedonia Magazine.

2. Cuerpo del Documento.

En esta zona escribiremos la mayor parte de nuestra página WEB, ya que mediante las
directiva <BODY> podemos escribir texto para que aparezca en la página o también podemos
incluir otras directivas que nos permitan poner gráficos, enlaces, música, en definitiva, todo lo
que nos ofrece la amplia gama de directivas del HTML. De esta forma, si queremos escribir
algo sólo tenemos que ponerlo entre la directiva de BODY.

3


3. Zona final.

En esta zona, deberán de estar las directivas de cierre, esto es, las que llevan incluido la barra
/. Asegurate que al final del documento encuentras las directivas </BODY> y </HTML>.

Resumen de todo lo visto.
1. Siempre hay que acordarse que hay que comenzar la escritura de una página WEB con
<HTML>.
2. Si deseamos que aparezca algo en la ventana del navegador al cargarse nuestra página,
deberemos de incluir la cabecera del documento y en su interior poner el título. Esto se
conseguía con <HEAD><TITLE> Título de la página</TITLE></HTML>.
3. Todo lo que queremos contar, los gráficos, el sonido, los enlaces, todo eso, ha de ir entre
dos directivas, estas son <BODY> y </BODY>.
4. Debemos de asegurarnos que al final de la página leemos el cierre de la directiva HTML,
esto es, que leemos </HTML>.

Un ejemplo para aclarar todo
A continuación tenéis un ejemplo que si lo metéis en un archivo .htm y lo cargáis en vuestro
navegador leeréis quot;Se supone que tengo que salir en pantalla.quot;, como podéis comprobar es una
chorrada.

<HTML>
<HEAD>
<TITLE>Ejemplo de HTML</TITLE>
<BODY>
Se supone que tengo que salir en pantalla.
</BODY>
</HEAD>
</HTML>

En el siguiente capítulo veremos como sacar el texto más bonito ;-).

4


Capítulo 3.
Trabajando con texto.

Bueno, después de aprender las cuatro bobadas para poder quot;sacar algoquot; en el navegador,
vamos a aprender unos cuantos conceptos básicos de manejo del texto, que nos va a
posibilitar el poder presentarlo de una forma elegante en pantalla.

Antes de pasar a la materia en si, señalar que existen una serie de caracteres que no son
representados en pantalla tal cual, es decir, que en algunas versiones antiguas de los
navegadores, son presentados en pantalla de forma distinta a como nosotros esperábamos y
sí, resulta que entre esos caracteres se encuentra nuestra querida eñe y los acentos. Para
poder representarlos os pongo una tabla de correspondencia en la que podéis ver lo que
tendréis que poner para representar este o aquel carácter que no se encuentre entre los
estándar.

Carácter Original Sustitución
á á
é é
í í
ó ó
ú ú
ñ ñ
ü ü;
ç ç
< <
> >
& &
quot; "

Directivas BASEFONT y FONT.

Ahora vamos a ver como poder cambiar el tamaño del texto que saquemos por pantalla así
como el color del mismo.

En lo referente al tamaño del texto contamos por un lado con la directiva <BASEFONT> que
nos permite establecer un tamaño por defecto para nuestro texto, así, si ponemos por ejemplo:
<BASEFONT size = 3> conseguiremos que todo el texto que vayamos a sacar tenga un
tamaño de 3, ahorrándonos de esta manera un tratamiento particular de cada párrafo.

La otra posibilidad con la que contamos a la hora de cambiar el tamaño del texto es la directiva
<FONT> </FONT>. De esta forma, queremos que la frase quot;Tengo tamaño 3quot; salga por pantalla
y con tamaño 3, tan sólo deberíamos de poner:

<FONT size = 3>
Tengo tamaño 3
</FONT>

Sin embargo, la directiva <FONT> tiene la particularidad de poder aumentar o disminuir en x
unidades el tamaño que se tenga establecido como base para el texto a sacar, es decir, si
suponemos un tamaño base de fuente de valor 2 y queremos aumentarlo hasta 5, podríamos
poner:

<FONT size = +3>
Tengo tamaño 3
</FONT>

5


Y si quisiésemos disminuir hasta una unidad de 1:

<FONT size = -1>
Tengo tamaño 3
</FONT>

Lógicamente, al acabar con </FONT> el tamaño del texto volvería a ser el establecido como
defecto, bien por <BASEFONT> o bien por el que tenga el navegador.

Otras de las posibilidades que nos ofrece la directiva FONT es la de poder cambiar el color del
texto a elegir, para ello utilizaremos el clásico concepto del RGB, es decir, el color que vemos
es una mezcla en determinadas unidades de R(rojo), G(verde) y B(Azul), para ello, tendremos
hasta 256 colores distintos a elegir para el rojo, verde y azul. Para llevar esto a cabo
pondremos:

<FONT colorquot;#000000quot;> Texto a imprimir con color <FONT>

A modo de ejemplo, te pongo estas combinaciones:

Color Directiva FONT
Rojo <FONT color=quot;#FF0000quot;>
Verde <FONT color=quot;#00FF00quot;>
Azul <FONT color=quot;#0000FFquot;>
Negro <FONT color=quot;#000000quot;>
Blanco <FONT color=quot;#FFFFFFquot;>

Directiva P, CENTER, BR y HR para el tratamiento de los párrafos.

Con la directiva <P> </P>, podremos trabajar con párrafos por separado, esto es, todo lo que
esté entre la directiva citada, constituirá un párrafo independiente y además podremos alinearlo
según nos convenga. La justificación del texto que vaya entre <P> y </P>, podrá hacerse a
izquierda, al centro o a la derecha, par ello basta con añadir a la directiva el campo
align=alineación_escogida. Para que lo veas más claro una tabla:

Alineación Construcción
Izquierda <P align=left>
Centro <P align=center>
Derecha <P align=right>

Como podéis ver es bien sencillo formatear el texto mediante esta directiva.
Antes de pasar a comentaros otras dos directivas útiles, decir que la directiva <P> formatea el
texto por defecto a la Izquierda y que para el caso de querer formatear el texto al centro,
también existe otra directiva que es <CENTER> con su correspondiente </CENTER>. Reseñar
que en el caso de esta directiva, abarcaremos muchas más estructuras para centrar que con la
ya explicada <P>

Otras dos directivas que también os serán interesantes y de valiosa utilizad son por una lado
<BR>, que se encarga de producir un salto de línea. Esta instrucción, no lleva su
correspondiente pareja con la barra, es decir, es única.

Por otro lado, se encuentra la directiva <HR> que producirá una línea en pantalla. Tampoco
necesita de la directiva pareja con la barra invertida.

Resaltando el texto.

Ahora vamos a ver como poder incluir texto en negrita, cursiva, subrayado o incluso, como
poder hacer títulos de distintos tamaños.

6


Para empezar, en el caso de querer sacar el texto en negrita tan sólo deberemos de utilizar la
directiva <B> con su correspondiente </B>, de esta manera, todo el texto que esté entre la
directiva saldrá en negrita en la pantalla de tú navegador.

Si lo que queremos hacer es que salga subrayado, pues podremos utilizar la directiva <U> y
</U> de forma idéntica a lo que hacíamos con negrita. Ya por último, si queremos que salga en
cursiva, deberemos de aplicar lo anterior con la directiva <I>.

En el caso de querer resaltar de una forma aún más notoria el texto, es decir, si lo que
queremos es hacer títulos o cabeceras deberemos de utilizar la directiva <Hx> con su
correspondiente <Hx>, en donde x es igual a un valor entre 1 y 6. Con x=1 mostraríamos el
texto al tamaño más grande y con x=6 al más pequeño.

Reutilizando nuestros archivos ASCII.

Si tienes un archivo en formato ASCII en el cual ya te has currado los tabulados, tablas, y
demás historias y deseas pasarlo a tu página WEB sin necesidad de tener que teclearlo otra
vez, la directiva <PRE> y su cierre </PRE>, te permiten poder poner el archivo ASCII que
tengas conservando todas las características del mismo. La única pega de todo esto es que no
podremos aplicar, lógicamente, los atributos que nos brinda el HTML.

Ya para terminar, os recomiendo que hagáis un pequeño ejemplo por vuestra cuenta con lo
visto en el capítulo este y así conocer mejor las directivas de las que hablamos aquí.

7


Capítulo 4.
Presentemos todo más elegantemente: Las Listas.

Hasta ahora, hemos vi sto lo suficiente como para poder sacar texto de diferente color por
pantalla, sin embargo, se echaba en falta, una forma de poder hacer listas ordenadas con las
que estructurar nuestra información.

¿Un ejemplo?. Pues muy fácil, imaginar que queréis poner un menú, lógicamente, deberá de
tener diferentes opciones, pues bien, gracias a las facilidades que nos ofrecen las listas,
podremos mostrar dichas opciones, en pantalla, numeradas, marcadas, etc. ¿Qué no?, pues
echar un vistazo al ejemplo que viene a continuación para que os aclaréis un poco más acerca
de que van las listas que vamos a explicar:

Menú 1. Menú 2.

• Opción Primera. • Opción Primera.
• Opción Segunda. • Opción Segunda.

Cómo podéis ver, las listas nos permiten presentar texto de forma estructurada, siendo muy
útiles cuando queremos hacer menús, listar índices, etc. Bien, una vez visto lo que es el
concepto de lista, pasamos a materia.

Listas Numeradas.

Este tipo de lista es aquella que tiene sus componentes ordenados por un número indicativo. El
ejemplo lo tenemos más arriba, en el Menú1. Con este tipo de lista, podemos hacer que el
navegador vaya generando los números de los elementos que componen dicha lista, por
nosotros. Esto nos puede ahorrar, en muchos casos, bastante tiempo.

Para poder llevar a cabo la implementación de dicha lista, deberemos de utilizar la directiva
<OL> con su correspondiente </OL>, ahora bien, dentro de dicha directiva, deberemos de
poner el texto a listar, pero este, ha de ir encerrado en otra directiva, que es <LI>, esto es, <LI>
elemento de la lista </LI>. Cómo lo mejor es ver esto con un ejemplo, os voy a poner el código
necesario para generar una lista igual a la generada para el Menú 1 (ejemplo de arriba).

Menú 1.
<OL>
<LI> Opción Primera </LI>
<LI> Opción Segunda </LI>
</OL>

Como podéis ver, este tipo de listas no tienen ningún misterio. Bueno, para ser sinceros, sí
tienen un secretito, y es que si después de la instrucción <OL> ponéis type igualado a un tipo
de carácter de comienzo, la lista, en lugar de mostrar números, mostrará los componentes
ordenados en función del carácter insertado. Así, si queremos que salga ordenada, nuestra
lista, por las letras del abecedario pondríamos <OL type=a>, el resto sería igual.

Como nota curiosa, si queréis sacar los listados en números romanos, no tenéis más que poner
<OL type=I>.

Listas Marcadas.

8


Bien, este tipo de lista es idéntico al anterior, salvo que en lugar de ir poniendo los
componentes de la lista con un identificador de ordenación, simplemente ponemos una marca,
un punto. Como podéis observar más arriba, el Menu 2, es una lista de este tipo. El código
necesario para generar este tipo de lista, sería igual que el del anterior, salvo que la directiva
<OL> cambia a <UL>.

Lo mejor será que ponga el código necesario para generar la lista del ejemplo del Menú 2, ahí
va:

Menú 1.
<UL>
<LI> Opción Primera </LI>
<LI> Opción Segunda </LI>
</UL>

Creo que sobran más explicaciones. ¡A por el siguiente tipo de lista!

Listas de Definiciones.

Este tipo de lista nos va a permitir, generar estupendos formatos de texto en donde poner una
explicación, una definición o similares. Sin ir más lejos son las que utilizamos para poner las
explicaciones en la sección de quot;Bájate algo interesantequot;. Para que no te confundas, lo mejor
será que veas un ejemplo de una lista de este tipo y después te explico cómo hacer ese mismo
ejemplo, ¿ok?, pues vamos:

Encabezamiento1
Toooodo el texto que nos habla acerca del encabezamiento. Como puedes observar, ¡es
genial para hacer comentarios breves, definiciones y similares!
Encabezamiento2
Bueno, pues aquí tenemos otro título más.

Bueno, ¿Convencido de que puede sernos de utilidad en el futuro?, bien, pues vamos a ver
como narices se hace eso.

La implementación de este tipo de listas es prácticamente igual que las dos anteriores. Aquí
también necesitamos una directiva general al estilo de <OL> y <UL>, esta directiva va a ser
<DL> y su correspondiente </DL>. Como ya habrás adivinado, dentro deberá de ir el cuerpo, al
igual que en las dos listas ya vistas, sin embargo, aquí deberemos de definir, para un elemento,
dos cuerpo distintos, uno para poner el texto que va en la zona del encabezamiento y otro para
poner texto que acompañara a dicho encabezamiento.

El encabezamiento se codifica con <DT> Encabezamiento </DT> y el texto que lo define con
<DD> texto </DD>. Lógicamente primero irá <DT> y después <DD>.

Bueno, mejor vamos a ver el código del ejemplo.

<DL>
<DT>Encabezamiento1</DT>
<DD>Toooodo el texto que nos habla acerca del encabezamiento.
Como puedes observar, ¡es genial para hacer comentarios breves, definiciones y
similares!</DD>
<DT>Encabezamiento2</DT>
<DD>Bueno, pues aquí tenemos otro título más.</DD>
</DL>

9


Capítulo 5.
Usando los recursos de Internet.

Bueno, detrás de este título se esconde la explicación para poder hacer que desde nuestras
páginas seamos capaces de quot;saltarquot; a todos los recursos que nos ofrece, por un lado el
hipertexto y por otro internet.

Bien, Hasta ahora, hemos visto lo suficiente como para poder hacer una página que nos
muestre el texto de una forma elegante, con distintos colores e incluso que sea capaz de
ordenar nuestra información con imponentes listas. Sin embargo, ¿cómo puedo tener mi
información en distintos archivos HTM para cargarlos al pinchar en un determinado sitio?,
¿Cómo puedo hacer que la gente me envíe un mail con sólo pulsar sobre el texto indicativo?,
¿Cómo, cuando tenga mi página, podré ofrecer un Link a...Macedonia ;) ?. Esa y otras
respuestas aquí y ahora...

Los enlaces hipertexto.

Hombre, está clarísimo que, si algún día construimos nuestra página WEB, deberíamos de, no
sólo sacar texto interesante (para algunas personas) por pantalla, también deberíamos de
aprovecharnos de todo lo que es Internet, en definitiva, de todo lo que nos ofrece el HTM que,
a modo de culturilla general te diré que son las siglas de HyperText Markup Language,
hablando en cristiano el lenguaje de Hipertexto.

Como tal, el hipertexto nos ofrece una serie de mecanismos que son, precisamente, los
encargados de dotar a la WWW de la versatilidad y dinamismo que tiene.

Gracias al hipertexto, podemos desde saltar por distintos documentos a realizar todas las
operaciones que nos permite la ya citada World Wide Web, esto es, FTP, Telnet, Gopher,
cargar gráficos, música, etc, etc.

Nosotros, en este capítulo, vamos a aprender como acceder a servidores mediante FTP's,
crear enlaces con otras páginas, cargar otros archivos HTML tanto dentro como fuera de
nuestro servidor e incluso de pasada (ya que se hablará de ellos en el Capítulo 6), cómo cargar
un gráfico que se encuentra en otro servidor distinto al que está nuestra página.

¡Dios mío, si todo se hace con una directiva!.

Pues sí, con la directiva <A> y su correspondiente </A> se pueden hacer maravillas, tan sólo
hay que variar sus parámetros. Así, mediante esta directiva, podremos realizar los ya citados
enlaces a imágenes para insertarlas en nuestros documentos (se verá en el siguiente capítulo).
Pero volvamos a lo que estamos, a nosotros ahora nos interesa para poder crear enlaces en
nuestros documentos.

Para empezar, vamos a partir de lo básico, esto es, cómo cargar otros archivos HTM desde
nuestro servidor, o lo que es lo mismo, cómo hacer que cuando se pulse sobre una
determinada palabra o frase se cargue otra página distinta a la actual.

Bien, para hacer lo citado en el párrafo de arriba, deberemos de utilizar, junto a la directiva <A>
el parámetro quot;HREFquot; lugar en dónde irá el nombre y ubicación (si está en el mismo que el que
lo llama no hace falta) del archivo HTM.

Como siempre, un ejemplo. A continuación, os pongo un código que haría que en la pantalla
apareciera quot;Pulsa aquíquot; de tal forma que si se pulsara sobre la palabra aquí, se cargara el
archivo HTM con nombre hola.htm.

Pulsa <A HREF=quot;hola.htmquot;>aquí</A>

10


No hace falta ser quot;Jimy the programatorquot; para saber que lo que metamos entre <A>y </A>
(llevando el parámetro HREF adecuadamente) será interactivo y nos permitirá pulsar sobre él,
haciendo que se cargue el archivo indicado en HREF al pulsar sobre dicho texto. Fijaros, que el
archivo que se carga se indica mediante HREF=quot;nombrearchivo.htmquot; y que, si habéis probado
ya el ejemplo, en pantalla veréis la palabra aquí en azul y subrayada. Vaya, al igual que veis
los menús en Macedonia.

Ya se cargar archivos .HTM desde mi página, ahora... quiero ¡más!.

Bien, para poder realizar Links, el sistema es idéntico, lo único que cambiará será que en lugar
de poner el nombre de un archivo, pondremos, si no lo has adivinado ya, la dirección del Link.
De esta manera, será muy fácil hacer que cuando tus lectores visiten tú página y quieras
ofrecer más información sobre un tema que se encuentra en un Link que tú sabes, pueda,
pulsando únicamente sobre la palabra que tú quieras, acceder a dicho Link. El ejemplo más
claro, lo tienes en Macedonia, ¿Cómo te crees que hacemos nosotros para que, en la sección
de Links, los lectores que así lo deseen puedan saltar a otro Link pulsando sobre la dirección?.

Ahí va el código de un ejemplo que hace que al pulsar sobre la palabra Macedonia tu
navegador te lleve ¡hasta aquí mismo!, lógicamente si estás ejecutándolo a la vez que te
encuentras conectado a la Red.

Para ir a la revista más frutera, sólo tienes que pulsar a...
<A href=quot;http://www.geocities.com/SiliconValley/Park/9221quot;>Macedonia</A>

Del mismo modo que podemos ofrecer de esa forma tan fácil Links desde nuestras páginas,
también podemos hacer que la gente pueda hacer quot;download'squot; (quot;bajarsequot; cosas a su
ordenador) desde la misma mediante la creación de enlaces FTP. Así, poniendo el código que
sigue a continuación, accederíamos al servidor de la Universidad de Oviedo para hurgar entre
los archivos que nos puede ofrecer y traérnoslos para nuestro sufrido disco duro.

Pulse <A HREF=quot;ftp.petra.uniovi.esquot;>aquí</A> para acceder al servidor de la Facultad de
Informática de Oviedo

De esta forma, si se pulsara sobre la palabra quot;aquíquot;, accederías al servidor de la Facultad de
Informática de Oviedo, el cual, por cierto, seguro que andará jodidillo como es habitual ;).

Como os cité al comienzo del artículo, también te gustará que la gente pueda mandarte un e-
mail con sólo pulsar sobre una palabrita que ponga eso, e-mail.

Tampoco debemos ir muy lejos, la directiva <A> de toda la vida te resolverá el problema, así, te
voy a poner el código que hace falta para hacer que al pulsar sobre Kapit, puedas mandarme
un mail ;)

<A HREF=quot;mailto:i9808685@petra.euitio.uniovi.esquot;>Kapit</A>

Algunos truquillos y avisos a la hora de utilizar el FTP.

Por experiencia, si quieres hacer que, desde tú página, la gente pueda bajarse tus archivos
.ZIP, en lugar de poner un enlace de tipo FTP, prueba a poner en el parámetro HREF
simplemente el nombre del archivo .ZIP. Por ejemplo, HREF=quot;datos.zipquot;. Te evitarás
problemas.

Por otro lado, hay veces que, poner enlaces a otras páginas que poseen este o aquel gráfico o
simplemente un archivo .HTM, que te ocuparía mucho espacio en tú página, podrán ralentizar
todo un poquito y ya sabes que cuando se trabaja en Internet, a no ser que tengas un servidor
muy rápido, es una chuminada andar haciendo experimentos con miles de gráficos y gif
animados, pero, eso es otra historia que será contada en el capítulo 6. Hasta entonces ya
podéis ir haciendo, al menos, páginas curiosas.

11


Capítulo 6.
Hagamos todo más profesional con las tablas.

Aprender a utilizar las tablas para la confección de una página de calidad es algo esencial ya
que, como vamos a ver dentro de unos momentos, las tablas nos van a permitir no sólo realizar
una maquetación más profesional de nuestra página WEB sino que, además, se van a convertir
en un estupendo aliado para el trabajo con gráficos. Sin más, comenzamos el quot;avistamientoquot; a
las tablas.

Lo que tenemos que tener claro.

Antes de empezar a ver cómo podemos construirnos nuestras propias tablas, tenemos que
tener claro qué es una tabla para poder ver mejor sus ventajas a la hora de utilizarlas para
maquetar nuestra página WEB.
Una tabla no es más que filas y columnas en donde, el cruce de cada fila y columna produce
un hueco o espacio denominado celda. En dichas celdas, podremos meter información ya sea
en forma de texto o gráfica constituyendo, así la unidad mínima de que se compone cualquier
tabla, es decir, esto que tenéis a continuación es una tabla.

Fila 1 Columna 1 Fila 1 Columna 2

Lo que estáis viendo, es el ejemplo más quot;bruscoquot; de tabla que se puede construir ya que, ni
siquiera están definidos los atributos del texto que se encuentran dentro de nuestra tabla sin
embargo, los más imaginativos de vosotros, habréis observado, que las posibilidades que nos
brinda una tabla son enormes ya que podremos presentar nuestra información ordenada como
queramos, situándola en las celdas que estimemos oportunas dependiendo de en que fila o
columna queremos mostrar la información.

Como veremos a continuación, podremos construirnos una tabla con la sencilla directiva
<TABLE>, la cual, se podrá combinar con todas las directivas ya vistas para poder ofrecer
todas las posibilidades que hemos aprendido pero dentro de una tabla perfectamente ordenada
y sincronizada con la información que queremos representar.

Aprendiendo a utilizar la directiva <TABLE>

Ya se ha indicado en el párrafo de más arriba que, para poder construir una tabla tan sólo hay
que utilizar la directiva <TABLE>, la cual, lógicamente, deberá de llevar su correspondiente
</TABLE> para indicar al navegador dónde acaba la tabla que estamos definiendo. A su vez,
dentro de la directiva <TABLE>, deberemos de saber utilizar dos directivas más, una de ellas
se encargará de definir las columnas de una fila y la otra hará lo propio con las filas creando
una nueva cuando sea invocada, así, si utilizamos la directiva <TD> con su correspondiente
</TD>, poniendo información dentro, ya tendremos definida una celda o columna de la fila
correspondiente de nuestra tabla mientras que, si ponemos la directiva <TR> ordenaremos al
intérprete de nuestro navegador, que cree una nueva fila. Decir, que para la directiva <TR> no
hay que añadir, como cabría esperar, </TR> ya que no hace falta, se pone si más y se crea la
nueva fila.

Cómo lo mejor es un ejemplo, he decidido poneros el código necesario para crear la tabla que
os ofrecí más arriba, ahí va:

<CENTER><TABLE border=quot;2quot;>
<TD>Fila 1 Columna 1</TD>
<TR>
<TR>

12


</TABLE>/CENTER>

Todo lo que podéis ver está explicado, utilizamos la directiva <CENTER> para centrar la tabla
en pantalla, aprovechándonos, de que podemos combinar sin ningún tipo de problema las
directivas que vamos conociendo.

Si os fijaís un poco en el ejemplo, veréis que la directiva <TABLE> va acompañada de un
atributo llamado border, es decir, lo que tenemos es <TABLE border=quot;2quot;>. Bien, nos
encontramos con un claro ejemplo de atributos añadidos a directivas (como era el caso del
atributo align que añadíamos a la directiva <P> por poner un ejemplo). Con el atributo
border=quot;númeroquot;, conseguimos que nuestras tablas sean capac es de mostrar un borde para
que, el lector, pueda diferenciar las filas y columnas de nuestra tabla perfectamente. Habrá
ocasiones en las que deseemos mantener invisibles los bordes de nuestras tablas (un caso
sería el de la maquetación de un texto en columnas), para ello sólo tendremos que eliminar el
atributo border de la directiva <TABLE> y las líneas divisorias desaparecerán.
El atributo border, podrá estar igualado al valor de grosor que nosotros queramos dar a nuestra
tabla, cuanto más valor, más grosor tendrá. En el caso de poner border sin nada más, la tabla
se creará con un borde simple.

A continuación, os voy a poner la tabla que estamos utilizando pero sin la directiva border para
que veáis el efecto que produce ver una tabla sin bordes.


Las directivas <CAPTION> y <TH>

Pese a que no requieran excesivos esfuerzos para su implementación, he decidido ponéroslas
a parte, para que así, no veáis todo quot;tan de golpequot;. Con este par de directivas, podremos poner
títulos a la tabla y a las columnas.

El título a la tabla que estemos creando, se insertará con la directiva <CAPTION> y su
correspondiente </CAPTION> justo después de haber comenzado a defi nir la tabla, esto es,
justo después de haber definido la directiva <TABLE>.
Lógicamente, entre la directiva <CAPTION> tendrá que ir la información que nosotros
queramos que sea el título de nuestra tabla.

Por otro lado, podremos dar título a cada columna de nuestra tabla para ello, deberemos de
poner el título correspondiente a cada una de las columnas con la directiva <TH> y su
correspondiente </TH>, es decir, habrá que poner tantas directivas <TH> y </TH>, como
columnas existan en nuestra tabla y el título, deberá de ir, lógicamente, entre dichas directivas,
también, es importante añadir que, después de poner todas las directivas <TH>, deberemos de
poner una <TR> para empezar a trabajar, en serio, con nuestra tabla.

Así, para crear una tabla como esta:

Macedonia Magazine
Datos de la columna 1 Datos de la columna 2

Habría que poner el código siguiente:

<CENTER><TABLE border>
<CAPTION>Colabora con Macedonia Magazine</CAPTION>
<TH>Datos de la columna 1</TH>

13


<TH>Datos de la columna 2</TH>
<TR>
<TR>
</TABLE>/CENTER>

Pero... ¿Cómo controlo la información?

Seguro que os habréis preguntado cómo poder hacer para que vuestra información, salga de
un color determinado en la tabla o tenga un tamaño determinado, etc. La respuesta es bien
fácil ¡Cómo siempre!. Sí, tan sólo tenemos que aplicar todo lo que sabemos para formatear
nuestro texto correctamente, pero dentro de una celda, ya sea la de definición del título de la
tabla, de las columnas o de las propias celdas. Es bien fácil, pero más trabajoso e
indispensable.

De esta forma, si quisiésemos que la tabla del ejemplo anterior saliese mucho más
quot;profesionalquot; y acorde con el tamaño de letra que estamos utilizando, esto es, así:

Macedonia Magazine
Datos de la columna 1 Datos de la columna 2

Tan sólo tendríamos que poner el código siguiente:

<CENTER><TABLE border>
<CAPTION>
<FONT color=quot;#FF0000quot; size=quot;3quot; face=quot;arialquot;>
Colabora con Macedonia Magazine </FONT>
</CAPTION>

<TH>
<FONT color=quot;#00FFFFquot; size=quot;2quot; face=quot;arialquot;>
Datos de la columna 1</FONT>
</TH>
<TH>
<FONT color=quot;#00FFFFquot; size=quot;2quot; face=quot;arialquot;>
Datos de la columna 2</FONT>
</TH>

<TD>
<FONT color=quot;#000000quot; size=quot;2quot; face=quot;arialquot;>
Fila 1 Columna 1
</FONT>
</TD>
<TD>
Fila 1 Columna 2
</FONT>
</TD>

<TR>

14


<TD>
Fila 2 Columna 1
</FONT>
</TD>
<TD>
Fila 2 Columna 2
</FONT>
</TD>

<TR>

<TD>
Fila 3 Columna 1
</FONT>
</TD>
<TD>
Fila 3 Columna 2
</FONT>
</TD>

</TABLE>/CENTER>

Como podéis observar, no es nada del otro mundo, es sólo combinar todo lo que hemos
aprendido para realizar una salida de textos quot;dignaquot; pero poniéndolo dentro de la tabla. ¡Por
cierto!, acordaos de cerrar la directiva <P> justo al comenzar la construcción de una tabla y de
volver a abrirla cuando acabéis de definirla sino queréis que, el texto que venga después de
definir a nuestra tabla, se vaya a cazar champiñones ;-).

Consideraciones finales

La construcción de una tabla, es mucho más deseada según avanzamos en el diseño de
nuestra página WEB. Para ello, disponemos de muchos más secretos y atributos que añadir a
la directiva <TABLE> que nosotros hemos puesto aquí pero eso, os tocara a vosotros
investigar por la multitud de tutoriales que existen en la red. Lo básico ya lo habéis aprendido y
con la práctica, aprenderéis a dominar la localización de vuestras tablas.

Hay multitud de utilidades que dar a las tablas, podemos añadir enlaces dentro de sus celdas
ofreciéndolos de un modo ordenado (tan sólo tenéis que aplicar lo que vimos en el capítulo 5 a
las celdas de vuestras tablas), colocar gráficos perfectamente maquetados, como veremos en
el capítulo siguiente, realizar presentaciones de nuestros texto en forma de columnas, como si
se tratase de un periódico, ofrecer catálogos, etc, etc. Tan sólo tenéis que poner a prueba
vuestra imaginación de diseñador y utilizar las tablas, y probar los atributos que ya hemos
estudiado junto a la directiva <TABLE>... ¿qué pasaría si pusiera <TABLE align=quot;leftquot;>?.
¡Probadlo!

15


Capítulo 7.
Y llegamos a los gráficos...

¡Al fín los gráficos!, suspirareis muchos... Sí, una página WEB sin gráficos, resulta de lo más
soso que os podáis imaginar, si no llama la suficiente atención visual del visitante, este lo más
probable que haga es marcharse y olvidar para siempre la dirección salvo que, sepa de
antemano lo que se va a encontrar, claro.

En este capítulo del curso acelerado de HTML de Macedonia, vamos a abordar qué formatos
gráficos podemos utilizar en nuestras páginas WEB, sus peculiaridades, cómo insertarlos y, por
último, algunas precauciones sobre su quot;uso y abusoquot;. Sin más, comenzamos.

Los dos formatos gráficos más utilizados.

En el mundo de la informática, programación, etc, existen una grandísima cantidad de formatos
gráficos, realmente, podríamos llegar a decir que, existe un formato gráfico para cada tipo de
utilidad que necesite un programador, dependiendo de montones de factores. Sin embargo, por
fortuna, existe un estándar de utilización de formatos cuando nos movemos en la creación de
una página WEB, así, siempre utilizaremos dos formatos o bien .GIF o bien .JPG, los cuales,
como vamos a ver a continuación van a tener una serie de características que los van a
diferenciar para determinados tipos de cometido y tareas a la hora de dar vistosidad a nuestra
página WEB.

Antes de proceder con el análisis de cada tipo de archivo decir que, si posees gráficos que se
encuentran en otro formato como puede ser un BMP, un PNG, un TIF, etc, existen multitud de
programas Shareware que te permiten hacer cambios de un formato a otro, sin ir más lejos,
tenéis el veterano Graphics Work Shop (GWS para los amigos), el SEA , Paint Shop Pro, Corel,
Adobe, etc... (si bien estos dos últimos ya son comerciales).

Análisis del formato GIF.

Los más viejos del lugar, sabrán de sobra que este formato fue creado por la empresa Unisys
hace ya, mucho tiempo y que con el paso del tiempo, ha ido evolucionando hasta ser un
formato con un nivel mucho mayor de complejidad que el original GIF con el que todo nosotros
solíamos contemplar los gráficos cuando, 256 colores era todo un lujo.. :,-)

El formato GIF utilizado en nuestros días como perfecto aliado en la construcción de una
página WEB, posee las siguientes características:
Permite la utilización de fondos transparentes.
Emplea un máximo de 256 colores.
Permite la posibilidad de crear animaciones mediante la inserción de varias imágenes, una
detrás de otra, en el archivo.
Esta basado en una compresión que es muy elemental, pero es compresión a fin de cuentas,
llamada LZW.

La utilización de gráficos de tipo GIF, nos será de muchísima utilidad para poder poner iconos,
gráficos que no tienen forma cuadrada y que, mediante la transparencia de su fondo, hacen
que la página adquiera toques muy profesionales, para los típicos y sorprendentes gráficos
animados, etc. Sin embargo, no busquéis elevada calidad de imagen con este archivo gráfico
porque no se ha hecho en absoluto para ello. El máximo de colores que soporta son 256 y su
cometido en la página WEB no es más que el de dar vistosidad ayudando a realizar la
maquetación pero, en ningún caso, el de mostrar gráficos de gran calidad como pueden ser
fotografías escaneadas, para esos tendremos, como vamos a ver a continuación, el formato
JPG.

Antes de continuar, no podría pasar sin recomendaros que os hicierais con un buen programa
para la realización de gráficos .GIF animados, existen multitud de ofertas en el mundo

16


Shareware, sin ir más lejos, está el GifIcon que lo podéis encontrar en la siguiente dirección:
http://www.mindworkshop/alchemy/gificon.html, es súper sencillo de manejar y tiene unos
resultados altamente interesantes.

Análisis del formato JPG

Este formato, tiene una grandísima ventaja de cara al GIF, y es la derivada de poder manejar
simultáneamente hasta 16,7 millones de colores siendo, así, el formato ideal para poder
representar gráficos de alta calidad y que se escapen, totalmente, de las pretensiones de un
GIF.

Otro de los puntos fuertes del formato JPG es el que posibilita la grabación de nuestros
gráficos en distintos modos de calidad de esta manera, podemos sacrificar un poco de calidad
visual de nuestro gráfico y ganar en espacio. Esto último es muy importante por dos razones la
primera porque en la práctica totalidad de las ocasiones (por lo menos eso es lo que nos pasa
a nosotros) el espacio que tengáis en vuestra página WEB será muy limitado y tendréis que
medir quot;al dedilloquot; lo que vais poniendo y por otro lado, porque a menor tamaño menos tardará
el navegador que utilicéis en reconocer el archivo gráfico y mostrároslo por la pantalla y
creerme, hay multitud de páginas que fracasan precisamente en el tema de la lentitud debido a
que sus autores deciden quot;atiborrarlaquot; de archivos gráficos que hacen la carga terriblemente
lenta para los navegadores produciendo que el quot;navegantequot; decida dar antes al botón de Stop
que estar sentado y esperar una eternidad a que la página tenga el aspecto visual correcto.

¿Y cómo los inserto en mi página?

Bien, la inserción de gráficos en nuestras páginas es una de las tareas más fáciles que existe
ya que sólo tenemos que utilizar una directiva llamada <IMG> para realizar tal acción cabe
decir que junto a tal directiva deberemos de poner el nombre de nuestro gráfico y que para eso
utilizaremos la etiqueta src=quot;nombre_del_gáficoquot;.
Por ejemplo, si quisiésemos sacar por pantalla el logotipo de Macedonia y centrado en pantalla,
es decir, hacer algo así:

Tan sólo deberíamos de poner el código HTML siguiente:

<CENTER>
<IMG src=quot;logo.gifquot;>
</CENTER>

En dónde “logo.gif” es nombre del archivo que contiene dicho gráfico. Como podéis ver es muy
fácil mostrar gráficos en pantalla lógicamente, existen más atributos para poner a <IMG>, pero
mejor que los miréis con una referencia de todas los comandos del lenguaje HTML ya que,
como sabéis, el cometido de este curso es aprender hacer una página desde el nivel más
básico no enseñaros todo lo que existe sobre HTML.

Otra de las cosas que considero importante, es el tema de poder crear enlaces a otras páginas
mediante la pulsación de un gráfico además, aprovecharé y os enseñaré una cosa más para
que cuando ofrezcáis el enlace a otra página, esta sea accedida en una nueva ventana de
nuestro navegador evitando el incordio que supone ver cómo la página a la que ofreces el
enlace te quot;machacaquot; la tuya. Lógicamente, esto sólo nos interesará para cuando ofrezcamos
Links a otras páginas, nunca para estar navegando en la nuestra.

Así, si quisiésemos ofrecer un link a la sección quot;Colabora con nosotrosquot; de esta página
pulsando sobre el logotipo de Macedonia... ¡Púlsalo ya!:

17


Lo que deberíamos de poner sería:
<CENTER>
<A HREF=quot;index09.htmquot; target=quot;_newquot;>
<IMG src=quot;logo.gifquot;>
</A>
</CENTER>

Podéis observar que ponemos un atributo llamado target con el valor _new para hacer que la
página a la que ofrecemos el enlace se cargue en una nueva ventana del navegador. De no
haberlo puesto, machacaría lo que estáis viendo mostrando el enlace aquí mismo.

Poniendo gráficos de fondo
Poner gráficos de fondo, puede ser una estupenda manera de realzar o... ensombrecer nuestro
texto en pantalla, me explico. Ahora mismo, si estas leyendo Macedonia con 16 millones de
colores, podrás observar que el fondo en el que aparecen los artículos es salmón texturizado
mientras que, en el que sale el menú es de mármol.
Esto se consigue utilizando un pequeño gráfico de fondo el cual, se va repitiendo en todas las
direcciones simulando que es un gran gráfico que hemos puesto de fondo..

Sin ir más lejos el fondo que tienes en el menú no es más que el gráfico siguiente repetido, sin
parar, hasta que ya no hay texto, para conseguir tal efecto, tan sólo tenemos que añadir justo al
comienzo de nuestro documento la siguiente instrucción:
<BODY background =quot;nombre_archivo.extensiónquot;>
En dónde el archivo será el gráfico que vosotros elijáis para poner de fondo.
Como podéis ver es muy sencillo dar fondo a vuestras páginas pero, recordad, intentar elegir
gráficos pequeños y que mantenga coherencia entre todos sus lados para que, el juntarlos
produzca algo homogéneo.
Consideraciones finales
La inclusión de gráficos en nuestras páginas es algo imprescindible si queremos que, al menos,
tenga oportunidad de llamar la atención del usuario que está en esos momentos visitándola. El
uso de archivos GIF animados se ha extendido enormemente y siempre es agradable observar
esta o aquella animación en la pantalla del monitor al igual, que alguna imagen de alta calidad
para realzar la página. Si bien, hay que ser cautos y no aprovecharse de los gráficos pues, un
uso indiscriminado de estos acabarán por ralentizar nuestra página y hacer, como ya indiqué
por algún sitio del artículo, que el usuario se acabe marchando al estar esperando un tiempo
casi interminable para ver la pantalla de nuestra página en condiciones.

Otro de los aspectos a tener en cuenta, es el uso de las ya vistas tablas con los gráficos. Esta
combinación, produce efectos estupendos de maquetación con respecto al texto y es cita
obligada de prueba a todo WEB Master que se precie ;).

Por último, recodar que si utilizáis gráficos .JPG a veces os será mejor sacrificar calidad que
cargar con todo el tamaño original del archivo. Del mismo modo, intentar encontrar gráficos de
fondo pequeños y que mantengan, si están unidos, la coherencia entre sí, lo demás con un
poco de práctica y una guía con los comandos posibles para utilizar los gráficos, lo tenéis
chupado ;).

18


Capítulo 8.
Aprende el uso y abuso de los frames.

Creo que después de este artículo dedicado a los frames ya podréis hacer algo exactamente
igual a lo que es ahora mismo MACEDONIA. Después de este capítulo se realizará uno más
dedicado a ver por encima todo lo que no hemos incluido en este curso acelerado (de ahí lo de
acelerado) pero que debes de tener bien presente que existe y está esperando que lo exprimas
al máximo.
Sin más, comenzamos este penúltimo capítulo del curso de HTML.

¿Qué es eso de los frames?

Los frames constituyen una interesantísima forma de quot;modelarquot; nuestras páginas WEB ya que
nos permiten dividir en distintas zonas nuestra página. El ejemplo más claro de uso lo tenéis a
la hora de diseñar vuestras páginas con un menú en donde poner las opciones de la misma y,
en otro sitio aparte, la información a ofrecer (como en MACEDONIA). La característica principal
de todo esto radica en poder utilizar cada una de dichas zonas que quot;hemos creadoquot; como si
fuesen páginas WEB autónomas pues cada una irá cargando toda su información (gráficos y
archivos HTML) en su propia parcela dejando el resto de las zonas de pantalla intactas.
Un ejemplo de esto lo tenéis delante de vuestros ojos. Cuando en MACEDONIA elegís una
opción del menú la única zona de la pantalla que se actualiza es la que está a la derecha de
vuestra pantalla dejando la del menú sin tocar. Como podéis apreciar, el uso de los frames es
extremadamente útil.

Las distintas zonas de la pantalla en las que podemos dividir nuestra página se denominan
paneles y, en cada panel creado, tendremos que trabajar con código HTML independiente. De
aquí es fácil deducir que en una página con n paneles habrá n documentos HTML cargados
simultáneamente. Ahora mismo MACEDONIA tiene cargado un total de dos documentos HTML
uno para el menú y el otro para el panel destinado a la información, en el que estáis leyendo
vaya.

¡Manos a la obra!

Para empezar a utilizar frames es necesario definir un archivo HTML en el que se definan,
valga la redundancia, aquellos ficheros HTML que deberán de aparecer en los frames que
nosotros creemos. Este fichero suele recibir el nombre del tipo index.htm y lo único que
contendrá, como ya he citado, es la información relativa a los frames que vamos a utilizar y
cuales van a ser los archivos HTML que carguemos en dichos frames.
Para llevar todo esto a la práctica vamos a necesitar de muy pocas directivas como vamos a
ver a continuación.

Con la directiva <FRAMESET> tendremos la oportunidad de dividir la pantalla de nuestro
navegador favorito en las zonas que estimemos nos sean necesarias. Lógicamente podremos
realizar divisiones tanto verticales como horizontales.
Junto a la directiva <FRAMESET> deberemos de utilizar un par de parámetros más que son
ROWS y COLS.

Con el parámetro ROWS podremos dividir la pantalla en zonas horizontales. A su vez, también
podremos determinar el tamaño de cada una de ellas medido siempre en tanto por ciento
(también podremos utilizar valores decimales de tanto por ciento para ello bastará con poner la
coma ',' separando ambas partes, por ejemplo 22,35%) haciendo incluso más fácil y cómoda su
utilización. Un ejemplo de cómo poder dividir la pantalla del navegador a la mitad sería la
siguiente:

<FRAMESET ROWS=quot;50%,50%quot;>
.......
</FRAMESET>

19


Como podéis comprobar es muy fácil realizar una división de pantalla. Además, también
tenemos la oportunidad de dejar al navegador que calcule por si mismo las dimensiones de las
zonas (en cuanto a porcentaje a cubrir) de las parcelas que creemos. Para ello sólo tendremos
que poner un asterisco y el resto se realizará automáticamente. Ahí va un ejemplo y, después,
su explicación para ver todo más claro.

<FRAMESET ROWS=quot;20%,40%,*quot;>
.......
</FRAMESET>

Esa sencilla instrucción <FRAMESET> se va a encargar de dividir la pantalla en tres zonas
horizontales diferentes. Una de ellas, la primera, ocupará un 20% del total de pantalla, la otra
un 40% y, por último, la tercera zona ¿qué ocupará?. Muy sencillo, ocupará simplemente el
resto que será de 40%.
En el caso de que queramos dividir la pantalla de forma vertical deberemos de utilizar el
parámetro COLS que funciona exactamente igual que lo visto para la ROWS, es decir, el
ejemplo siguiente divide la pantalla en dos zonas verticales.

<FRAMESET COLS=quot;50%,50%quot;>
.......
</FRAMESET>

Cómo indicarle al navegador la división.

Una vez que hemos aprendido cómo dividir nuestra página para mostrar la información en
diferentes zonas, deberemos de saber cómo indicarle al navegador que queremos utilizar la
división que tenemos en mente.
Para ello utilizaremos un archivo .HTM que contendrá todas las divisiones que deseamos
realizar en nuestra página así como los archivos HTML que se cargarán nada más que sean
inicializadas. En dicho archivo meteremos, por tanto, las órdenes relacionadas con la división
de la pantalla (descrita anteriormente) junto a las relacionadas con la carga de los archivos
.HTM que se llevarán a cabo con la directiva <FRAME> y los parámetros SRC, NAME,
SCROLLING y NORESIZE. Todas ellos son opcionales salvo SRC que deberá de estar
presente obligatoriamente. Pero vayamos por partes:
SRC. Esta directiva nos va a servir para indicar el nombre del archivo que se cargará en el
primero de los planos que creemos. De esta forma si ponemos el parámetro así:

<FRAME SRC=quot;hola.htmquot;>

El primero de los planos de que dispongamos se verá cargado con el archivo hola.htm.
NAME. Con NAME podremos dar un nombre a el plano que creemos. La forma de dar el
nombre será una cadena de caracteres entrecomillada, es decir:

<FRAME SRC=quot;hola.htmquot; NAME=quot;plano1quot;>

Como veremos más adelante, la asignación de nombres a los planos será muy importante pues
nos permitirá poder volcar la información que seleccionemos en un plano o frame determinado
a otro distinto. Esto, sin ir más lejos, es lo que ocurre en nuestro menú.
NORESIZE. Este parámetro opcional nos asegura que el usuario no podrá redimensionar el
frame, es decir, quot;protegequot; al frame de posibles manipulaciones por parte del usuario para hacer
que se comporte como una especie de ventana cambiante, eso sí, cambiante en cuanto al tipo
de división que tenga (podremos hacer que el plano sea más ancho o alto dependiendo de
cómo esté realizada la división).
SCROLLING. Dicho parámetro podrá tener tres valores distintos que serán yes, no y auto. Han
de ir entrecomillados y sirven para indicar si se deben de poner o no las barras de
desplazamiento. La opción yes nos las habilitará, la opción no nos las quitará y, por último, con
auto dejaremos en manos del navegador la decisión, es decir, si hay más texto del que se
puede ver en pantalla se pondrán y viceversa.
La forma de poner el parámetro SCROLLING y, el anteriormente explicado, NORESIZE podría
ser:

20


<FRAME SRC=quot;hola.htmquot; NAME=quot;plano1quot; NORESIZE SCROLLING=quot;autoquot;>

Esta instrucción nos cargaría en un plano el archivo hola.htm. Además de no permitir al usuario
modificar el tamaño del mismo, crear barras de desplazamiento, si la información no entrara y
etiquetar el plano con el nombre plano1.
Una vez analizadas todas las opciones para poder dividir a nuestras anchas la pantalla os
pongo lo que podría ser el archivo destinado a cargarlas el cual, os vuelvo a repetir, deberá de
ser el que se llame al entrar a vuestra página. En nuestro caso os diré que el primer archivo
que es llamado es uno con el nombre de index.htm que contiene las definiciones necesarias
para realizar la división en pantalla de nuestra página.
Os pongo a continuación nuestro archivo index.htm que utiliza todo lo v isto hasta ahora.

<HTML>

<HEAD>
<TITLE> MACEDONIA Magazine </TITLE>
</HEAD>

<FRAMESET COLS=quot;23%,*quot;>
<FRAME SRC=quot;index0.htmquot; NAME = quot;MENUquot; SCROLLING =quot;autoquot; NORESIZE>
<FRAME SRC=quot;hola.htmquot; NAME = quot;TEXTOquot; SCROLLING =quot;autoquot; NORESIZE>
</FRAMESET>

<BODY>
</BODY>

</HTML>

Como podéis comprobar no tiene ningún misterio...

La etiqueta <BASE>

Ya para finalizar, vamos a ver cómo poder hacer que desde un frame o plano podamos cargar
la información en otro diferente.

Antes de continuar, debemos de tener bien claro que hasta ahora, al realizar el enlace desde
una página o frame concreto a un archivo HTML (independientemente de su localización, esto
es, de si es de nuestra propia página o de otra distinta), se realizaba quot;machacandoquot; la
información de la parcela o frame en el que estábamos, o lo que es lo mismos, desde el que
realizábamos tal petición de carga.
Pues bien, ahora vamos a aprender cómo podemos beneficiarnos de los frames para poder
realizar cargas de información en los distintos frames de que dispongamos, es decir, veremos
cómo poder construirnos una página que tenga un menú a la izquierda y muestre la
información a la derecha.. Uhmmm ¿en qué página he visto yo eso? ;-).

Si volvéis a repasar los atributos que se pueden poner a un frame que creemos, encontraréis
que, de entre ellos, había uno destinado a poner el nombre del mismo. Recordémoslo:


Si os fijáis, en la directiva FRAME, el atributo NAME = quot;MENUquot; lo que hacía era dar un nombre
al frame que vamos a definir, pues bien, si nosotros al comienzo de dicho frame, el cual
cargará en el ejemplo el archivo index0.htm, ponemos <BASE TARGET=quot;MENUquot;>, haremos
que la información siempre se cargue en la parcela o frame al que habíamos llamado MENU y
que, en este caso, va a ser el mismísimo lugar en dónde se ha cargado el archivo quot;index0.htmquot;,
es decir, no hemos conseguido nada nuevo... Sin embargo, ¿qué pasaría si en lugar de poner
el nombre que habíamos dado al frame en el que se carga el archivo index0.htm ponemos el
de otro frame?. Pues muy sencillo, que habremos conseguido volcar el quot;linkquot; o archivo .htm

21


justo en el lugar que a nosotrosotros más nos interesa en estos momentos, en otro frame
distinto al actual.

Un ejemplo antes de marchar.

Con esto, ya habremos logrado quot;configurarquot; una ventana con las mismas quot;facilidadesquot; que
puede ofrecer tanto Macedonia como cualquier otra página de las que circulan por Internet. Los
frames son un estupendo aliado a la hora de separar y ofrecer la información de la forma más
ordenada posible, si bien, todo en abuso es malo y tal y como reza el título de este capítulo, el
abuso puede producir que nuestra página sea un cúmulo de frames molestos que sólo dejen
vislumbrar la información en porciones muy reducidas de nuestro navegador.
Os lo digo ahora y no me cansaré de avisaros, ojo con el uso que dais a los frames pues
pueden mandar quot;al carajoquot; vuestra página. Recordad, no es bueno utilizar ni muchos frames ni
muchos gif animados, estáis avisados.

Bien, como creo que ya toca ofrecer un ejemplo más claro de todo lo explicado os mostraré un
ejemplo con la cabecera de la definición de frame y, después, el código de los dos archivos que
utiliza. Pensad que en el caso de Macedonia realmente es así, utilizamos un archivo .htm (que
es el que se lanza cuando entráis en el servidor) que crea dos frames y, en cada uno de ellos,
carga su archivo .htm correspondiente (index0.htm y hola.htm). En fín, utilizando el esquema
de Macedonia, ahí va:

Código del fichero index.htm
<HTML>

<HEAD>
<TITLE>Creador de frames. index.htm </TITLE>
</HEAD>

<FRAMESET COLS=quot;25%,75%quot;>
<FRAME SRC=quot;hola.htmquot; NAME = quot;TEXTOquot; SCROLLING =quot;autoquot; NORESIZE>
</FRAMESET>

<BODY>
</BODY>

</HTML>

Código del fichero index0.htm
<HTML>

<HEAD>
<TITLE>Frame lado izquierdo. index0.htm</TITLE>
</HEAD>

<BODY><h2>Texto de la frame izquierda </h2>
</BODY>

</HTML>

Código del fichero index1.htm
<HTML>

<HEAD>
<TITLE>Frame lado derecho. index1.htm</TITLE>
</HEAD>

<BODY><h2>Texto de la frame derecha </h2>
</BODY>

22


</HTML>

Al interpretarse el archivo index.htm se crearán dos frames en pantalla, uno a la izquierda y
otro a la derecha. El del lado izquierdo ocupará sólo un 25% del total de la pantalla mientras
que el del lado derecho estará quot;apoderadoquot; de un 75% utilizable.

Y llegamos, nuevamente, al final.

Pues sí amigos, nuevamente acabamos otro capítulo más de este mini cursillo de html, y
también, todo los grandes temas que quería tratar. Para el siguiente número del fanzine daré
por concluido el curso introductorio hablando de todas esas cosas que quedan en el tintero por
tratar y que, por causa de tiempo y conocimientos no puedo llevar a cabo (y ahora mismo estoy
pensando en Java). Por eso, voy a lanzar ya la petición de continuidad de este curso. Si hay
alguien de los que está leyendo esto que sea capaz de llevar una continuación del mismo
ofreciendo temas más avanzados y profundizando mucho más en todos los aspectos tratados
pues tiene mi invitación.
Lo dicho, en el próximo número concluimos el primer curso de Macedonia.

23


Capítulo 9.
Final del curso acelerado.

Como ya se anunció en el capítulo de la edición pasada, el cursillo rápido sobre HTML toca a
su fin irremediablemente sin embargo, hay gran cantidad de temas que no se han tratado en
este únicamente por querer ofrecer una visión lo más sencilla y práctica del quot;lenguajequot;. No
dudéis que, pese a que el HTML es un quot;lenguajequot; sencillísimo, hay un montón de cosas que
nos hemos dejado en el tintero y merecerían la pena tratar.

Temas como la posibilidad de permitir al usuario escribir en nuestras páginas datos y que luego
nos lo mande vía mail (imaginaros un cuestionario), creación de menús en los que el visitante
pueda interactuar más directamente, más comandos (muchos más) que nos hagan la quot;vida
más fácilquot; a la hora de trabajar quot;a peloquot; en la construcción de nuestras páginas WEB, inclusión
de CGI´s, en definitiva, que sólo hemos dado y muy por encima, un vistazo a las posibilidades
que se nos pueden ofrecer a la hora de diseñar una página. De todos modos, creo que lo más
importante, esto es, sentar las bases para la creación de páginas WEB, está hecho. Tan sólo
queda animar a gente que lea esto y posea conocimientos suficientes para que se proponga
realizar algún curso sobre JAVA y HTML más avanzado a fin de poder derivar en una
exposición mucho más competa y seria de lo que aquí se ha pretendido enseñar. (¿qué os
parece quot;HTML Avanzadoquot; ó quot;La hora del JAVAquot;?. Al menos ya tenemos nombres para las
quot;¿secciones futuras?quot; ;) )

Hablar, como decía más arriba, de temas que se nos han quedado en el tintero nos llevaría
mucho tiempo pero citaré que hay bastantes comandos no vistos y que pueden seros de
mucha utilidad. Tan sólo tenéis que pasar por alguna WEB en español que tenga algún tipo de
tutorial. La verdad es que hay muchísimas en dónde elegir y siempre encontraréis información
a vuestro gusto así que os animo a una sesión con vuestro buscador favorito.

Otros temas quot;más avanzadosquot; como el uso de CGI´s tampoco han sido tratados ya que
alargarían innecesariamente el cursillo, dejando de ser este eso, un cursillo ;). Nuevamente
pido de quot;valientesquot; capaces de hablarnos de estos temas o, incluso, otros sí ya más serios
como la programación en JAVA.

En fin, espero que os sirva de algo este primer quot;cursoquot; que acaba en Macedonia o, al menos,
que os deis cuenta que aprender este quot;lenguajequot; no es nada complicado. Recordad que, lo
visto aquí, sirve para crear algo como Macedonia ;).

24

Curso HTML: Trabajando con texto

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Destacado

Destacado (8)

Similar a Curso HTML: Trabajando con texto

Similar a Curso HTML: Trabajando con texto (20)

Último

Último (15)

Curso HTML: Trabajando con texto