Aula Macedonia


Curso Acelerado de HTML


Artículo realizado por
Fernando Rodríguez.





Capítulo 3.
Trabajando con texto

Bueno, después de aprender las cuatro bobadas para poder "sacar algo" 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 distínta 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 podeis ver lo que tendreís que poner para representar este o aquel caracter que no se encuentre entre los estándar.

Caracter OriginalSustitución
áá
éé
íí
óó
úú
ññ
üü;
çç
<&lt;
>&gt;
&&amp;
"&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 "Tengo tamaño 3" 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>

Y si quisiesemos 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 color"#000000"> Texto a imprimir con color <FONT>

A modo de ejemplo, te pongo estas combinaciones:

ColorDirectiva FONT
Rojo<FONT color="#FF0000">
Verde<FONT color="#00FF00">
Azul<FONT color="#0000FF">
Negro<FONT color="#000000">
Blanco<FONT color="#FFFFFF">


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, consituirá 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ónConstrucción
Izquierda<P align=left>
Centro<P align=center>
Derecha<P align=right>

Como podeis 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.

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 hagaís 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í.




AULA MACEDONIA
a
MACEDONIA Magazine