Formateado de Texto en HTML

Formateado de Texto en HTML

Tras haber visto la estrucuta básica de un documento HTML, pasamos ahora a ver la parte que hace referencia a lo que es el cuerpo del documento, donde irá incluido tanto texto, como imágenes, com tablas... y los distintos componentes que queramos a�adir a nuestras páginas, y la forma de modificarlos.

<HTML>
     <HEAD>
     <TITLE> Javier Górriz </TITLE>
     </HEAD>
     <BODY>
     ...
     </BODY>
</HTML>

Tanto texto como imágenes, com tablas, como enlaces, etc... si queremos que sean visualizados, deben de ir entre la directiva <BODY>...</BODY>, de lo contrario no se visualizarán y no tendrán efectos sobre el documento.

Saltos de línea
En los documentos HTML, hay una peculiaridad con respecto a los editores de texto, Debemos de indicar con directivas, tanto los retornos de carro (ENTER�s) como los párrafos, como la negrilla, cursiva, subrayado, etc... de forma que si no lo hacemos, por mucho texto que escribamos, no veremos los retornos de carro ni demás si no se lo especificamos. Un ejemplo sería:
```
<BODY>
Esto es un texto
que muestra como los
retornos de carro que pongo
no se respetan en el
navegador
</BODY>
```
�Por qué no respeta las retornos de carro?; porque nosotros no se los hemos especifiado, con la directiba (Break Return). De lo contrario, el navegador adaptará el texto al ancho de ventana de visualización que posea, y retornara las líneas cual él crea conveniente, o mejor dicho, cuando el final de ventana haga forzoso el retorno de carro. La directiva no hace más que indicar al navegador que debe de efectuar un retorno de carro, es decir pasar a escribir en la línea siguiente:
```
<BODY>
Esto es un texto 
que muestra como los 
retornos de carro que pongo 
si se respetan en el 
navegador 
</BODY>
```
Como vemos es una directiva abierta, ya que no requiere de otro para su finalización global de la orden. En este caso, si que se respetan los retornos de carro que hemos definido en el documento.
Peculiaridades de 
En Netscape, la directiva puede presentar algunos atributos que van incluidos nre los simbolos <...> y tras la directiva (en este caso BR). Dichos atributos son los relacionados con CLEAR.

Su uso se justifica cuando interaccionan texto e imágenes (sólo en Netscape) y sólo cuando hay una considerable cantidad de texto. Este atributo tiene 3 posibles valores:

CLEAR=LEFT finaliza la línea y comienza la siguiente en la primera línea disponible desde el margen izquierdo, respetando el margen dejado por la imagen.

CLEAR=RIGHT finaliza la línea y comienza la siguiente en la primera línea disponible desde el margen derecho, respetando el margen dejado por la imagen.

CLEAR=ALL produce el mismo efecto sobre los 2 márgenes

Netscape cuenta también con otras 2 directivas que son  y , ambas directivas abiertas. delimita un bloque de texto, que no puede ser dividido, por ejemplo una dirección URL (http://.../.../.../). es una directiva vacía que indica dentro de un bloque dónde se puede establecer la división del texto.
Párrafos
Si nosotros queremos escribir un párrafo grande, y no nos importa que los retornos de carro sean aleatorios (dependiendo del tipo de navegador y de la resolución de la pantalla en el que se esté visualizando el documento), pero sin embargo queremos que haya una separación entre párrafo y párrafo, poseemos una directiva cerrada en HTML, que nos solucionará el problema: ...
```
<BODY>

En este ejemplo se muestra como pese a que no nos importe el poder ver los retornos de carro en distintas
posiciones, la directiva de párrafó, lo que hace es que cuando finaliza el ancho de pantalla de que dispone,
realiza un retorno de carro y continúa con el texto en la siguiente línea. Si reducimos el ancho de la 
pantalla del visualizador, veremos como la directiva de párrafo se adapta a este ancho, dando un formato
distinto al texto.

</BODY>
```
Con esta directiva, además de poner el texto en modo párrafo, lo que hace al finalizar con es hacer un salto de línea, entre la finalización del párrafo, y el siguiente texto, imagen, table, lista, etc... que nosotros tuvieramos en el documento, de forma que quede visiblemente separado con una lína en blanco.

TEXTO PREFORMATEADO

Cuando hablé de los retornos de carro, dije que para pdoer ser visualizados, deberíamos colocar la directiva al final de la línea para poder visualizarlos correctamente en el navegador.

Esto no es del todo cierto, ya que hay una directiva cerrada (<PRE>...</PRE>) que permite visualizar el texto tal y como se encuentre colocado entre estas 2 directivas, con el formato que deseemos y con los retornos de carro sin ser especificador por .

<PRE>...</PRE>
Todo el texto que vaya entre estas 2 directivas, se mostrará tal y como lo escribamos, incluyendo las tabulaciones y los retornos de carro.

NOTA: En lugar de tabulaciones, es preferible poner separadoreso espacios, ya que no todos los browsers tiene por defecto el mismo espacio definido en el tabulado y podría modificarnos el texto dependiendo del navegador en pleado para su posterior visualización.

Al finalizar un bloque delimitado por las directivas <PRE>...</PRE> se incorpora automáticamente un salto visible d línea, OJO pero en este caso no se deja una lína en blanco con respecto al siguiete elemento.
```
<BODY>
<PRE>

LUNES | MARTES | MIERCOLES | JUEVES | VIERNES
------------------------------------------------------------------------------
100 | 200 | 200 | 150 | 500
------------------------------------------------------------------------------

</PRE>
</BODY>
```
Este cuadro aparecerá tal cual lo podemos visualizar aquí en el navegador. Esta directiva tiene un atributo WIDTH que se emplea para indicar al navegador el tama�o máximo de cada lína del texto preformateado, aunque no todos los visualizadores la reconocen y los que no, la ignoran tomando todo el ancho de la pantalla. El WIDTH de la tabla lo podemos expresar en pixel poniendo directamente el número de ellos (<PRE WIDTH=500>...</PRE>), o bien en tanto por ciento de ancho de pantalla (<PRE WIDTH=50%>...</PRE>).

ESTILOS DE TEXTO

Los estilos de texto sirven para modificar la apariencia o aspecto final del texto en la pantalla del navegador cuando vemos el documento, (negrita, bubrayado, tachado, ...). Hay 2 tipos de estilos, los físicos y los lógicos. (tanto unos como otros son directivas cerradas).

Estilos Físicos
Se trata de la forma habitual de describir estilos en los programas detratamiento de texto y especifican según las directivas:
- Negrita ... el bloque de texto entre ambas directivas aparece con un tipo de letra más gruesa.
- Cursiva ... el bloque de texto entre ambas directivas aparece con un tipo de letra inclinada hacia la derecha.
- Subrayado ... el bloque de texto entre ambas directivas aparece subrayado con una línea horizontal.
- Texto de Terminal <TT>...</TT> el bloque de texto entre ambas directivas aparece con letra tipográfica al estilo de los terminales de texto antiguos. Se usa una letra similar al del texto preformateado con <PRE>...</PRE>.
- Letra grande <BIG>...</BIG>
- Letra peque�a ...
- Letra tachada <S>...</S>
- Subindice ...
- Superíndice ...
El efecto de los estilos se acumula, lo que quiere decir que dentro de, por ejemplo, un bloque de negrita, se puede incluir un bloque de texto en cursiva, de modo que el texto aparecería con 2 estilos de letra diferentes.
Estilos Lógicos
- Negrita ... �fuerte� o marcado, se identifica con negrita.
- Enfatizado ... se indentifica con el estilo de cursiva.
- Cita o texto literal <CITE>...</CITE> se indentifica con el estilo de texto citado textualmente.
- Texto de Terminal <KBD>...</KBD> similar a <TT>...</TT>.
- Código <CODE>...</CODE> código que normalmente se emplea para representar un elemento HTML.
- Definición <DFN>...</DFN>.
- Ejemplo <SAMP>...</SAMP>.
- Texto indentado <BLOCKQUOTE>...</BLOCKQUOTE>.
- Variable <VAR >...</VAR>.
No se puede decir ni dar una indicación de cómo se visualizará el texto marcado con estas directivas pues cada navegador usa una convención diferente, que además puede ser modificada libremente por el usuario.

En HTML 3.0 se definen (al menos en teoría) 8 estilos más de letra, que son:
- <LANG>...</LANG> de idioma.
- <AU>...</AU> de autor.
- <PERSON>...</PERSON> de persona.
- <ACRONYM>...</ACRONYM> de acrónimo.
- <ABBREV>...</ABBREV> de acrónimo.
- <INS>...</INS> texto insertado.
- <DEL>...</ DEL > texto borrado.

TAMA�O Y COLOR DE LETRA

Para cambiar el tama�o de la letra, existen 2 formas de hacerlo; una de ellas es la directiva cerrada ... y los atributos que posee, y otra es con las cabeceras que se verán más en profundidad en adelante.

Los visualizadores como Netscape o Explorer, adoptan por defecto un valor de 3 puntos de valor, como tama�o de letra, valor que para resoluciones muy grandes de pantalla, puede dejarnos ciegos al intentar leerla. Este valor de puntos no se relaciona con un valor de pixes, ni dots sino con un valor propio que el navegador posee.

Otra forma de cambiar el tama�o de letra, es con la directiva abierta <BASEFONT SIZE=�valor númerico�>, que nos permite modificar el valor predeterminado del tama�o de letra en el documento completo, desde donde coloquemos esta directiva, hasta el final del documento.

<BASEFONT SIZE=�5�> hace que el documento adopte un tama�o de letra de 5 puntos por defecto para todo el texto que aparezca después de esta directiva. Si lo ponemos después de la directiva <BODY> (inmediatamente después a ésta), la modificación del tama�o de letra afecta a todo el documento:

<BODY>
     <BASEFONT SIZE=�5�>
     ...

...
Esta directiva cerrada, a diferencia de <BASEFONT SIZE=�valor numérico�>, lo que hace es delimitar un espacio de texto restringido, en lugar de modificar la letra de todo el documento. Para ello cuenta con 3 atributos:
- SIZE=�valor numérico�
 Se fuerza a que el bloque de texto delimitado tome ese valor como tama�o de letra. Otra forma de hacer que el tama�o de letra cambie, esusando valores relativos.Antes dijimos que por defecto el valor de tama�o de texto era de 3 puntos, por lo que si definimos el valor relativo de texto sobre el valor de 3 que tienen por defecto la mayoría de los navegadores:
 ...
 ...
 dejarían el tama�o de texto al mismo valor de tama�o de punto, es decir a 4 puntos de tama�o. El primer ejemplo es un ejemplo de definición de tama�o con valor absoluto (el más recomendado), ya que hace referencia a un valor total y que no depende del definido por defecto en el navegador que estemos empleando; mientras que en el segundo ejemplo (+1), al tama�o por defecto del navegador a�adimos 1 punto. Podemos definir también valores relativos negativos
 ...
 lo que nos daría un valor de 2. Debemos de percatarnos, que si el valor de tama�o de letra por defecto de nuestro navegador es distinto a 3 no sabremos con absoluta certeza como aparecería en ese tipo de navegadores. Por ello es más recomendable el emplear valores absolutos de letra y no relativos.
 
 Entre las directivas de ... podemos incluir también directivas de estilos de texto como negrita, subrayado, etc... de forma que definimos tama�o y estilo de texto al mismo tiempo. Esta particularidad fue introducida por netscape, por lo que no aseguro que funcione en el resto de navegadores.
- COLOR=�nombre o peso�
 Esta característica ya la incluye Netscape versión 1.1. Lo único que hace es cambiar el color del texto que es delimitado por las directivas, de forma que el resto permanece con el color que hayamos definido por defecto, o que, sino lo hemos definido, será el negro en la mayoría de los navegadores.
 
 El color al igual que el atributo de <BODY>, se puede definir por medio de un nombre de color en ingles o por medio de su �peso� o valor RGB en hexadecimal. Los nombreshacen siempre referencia a los nombre ingleses, por lo que:
```
�black�=negro �green�=verde
�red�=Rojo �white�=blanco
�yellow�=amarillo �blue�=azul
...
```
 El peso, viene dado por el formato RGB que indica el �peso� o valor a cada uno de los 3 colores que forman este formato (Red, Green y Blue, Rojo, Verde y Azul). Estos valores se indican con 2 dígitos hexagesimales, por lo que cada color se compone de 6 dígitos precedidos de una almohadilla, que indica al navegador de que se trata de un número hexagesimal (#).
 ... Negro
 ... Blanco
 ... Rojo
 ...
- FACE=�nombre de letra�
 Esta es una de las características más interesantes a mi entender a la hora de dar el format de texto deseado a nuestro documento. Este atributo lo que hace es definir el estilo o nombre de letra con el que queremos que aparezca nuestro texto. Por defecto el valor de este valor en todos los navegadores (creo), es el del tipo �Times New Roman�, pero que nosotros podemos modificar indicando un nombre distinto de letra. Por ejemplo, si quisieramos que la letra apareciera con formato de letra estilo �Arial�, lo único ue tendríamos que definir es el nombre de letra según:
 ...
 lo que haría que el bloque te texto entre las directivas tuviera el formato de texto �Arial� y no �Times new Roman� que aparecería por defecto. Se pueden definir varios tipos en el mismo atributo de la forma:
 ...
 siendo preferente la primera que coloquemos y la segunda en el supuesto de que nuestro usuario no tuviera la primera instalada en su equipo local. Esto por lo tanto, limita el tipo de letras a las que nuestro usuario visitante, tenga instaladas en su equipo, siendo limitada la lista de letras que se instalan por defecto (por ejemplo), en el sistema operativo que emplee (Windows, MacOS, OS/2, UNIX, Linux....) por lo que por ello se suelen definir 2 letras, y en el supueto de que no tuviera ninguna de las especificadas, se tomaría la de defecto del navegador que no es otra que la ya nombrada �Times New Roman�. �Arial� suele ser un valor válido para los distintas plataformas de navegación.
El atributo COLOR, SIZE o FACE pueden incluirse conjuntamente en la directiva ... y si alguno de ellos no se especificara, se tomaría por defecto el valor predeterminado por el navegador empleado (según los distintos navegadores).

El cerrar este tipo de directivas, no fuerza ni el retorno de carro, y la línea en blanco con el siguiente elemento HTML, por lo que, de no especificar lo contrario, tras estas directivas, el texto, o imagen o el elemento que sea, aparecerá a continuación del texto formateado con estas directivas.

CABECERAS

Al margen de estas directivas, HTML emplea otro medio de modificar el tama�o de texto desde sus primeras versiones (por lo que es reconocido por cualquier navegador).

Son las denominadas �Headings� o cabeceras <Hn>...</Hn>, donde n indica un número desde 1 hasta (en un principio), 6, siendo el 1 el más grande de todos (el principal) y 6 el más peque�o (a la hora de visualizar texto).

Son directivas como vemos cerradas. Las cabeceras fuerzan un salto de línea cuando se cierran, por lo que no es necesario incluir un para el salto de línea, a diferencia de como habría que hacer con los atributos ..., (a no ser que deseemos dejar una línea en blanco).

En HTML 3.0, se dispone del atributo ALIGN que permite cambiar la forma de alinear por defecto la cabecera (por defecto el valor es de LEFT (izda), pudiendo ser CENTER (centrado) o RIGHT (derecho)... <H1 ALIGN=center>...</H1>).

SEPADORES, LINEAS HORIZONTALES

Se suelen usar con mucha frecuencia, y suelen ser un motivo estético muy valioso para nuestra propia WEB. Lo soportan todos los navegadores y consiste de una línea horizontal que delimita 2 partes del documento visualizandola gráficamente. Su directiva es <HR> (Horizontal Rule) y es una directiva abierta.

Netscape incorpora atributos a esta directiva, como son:

SIZE=�valor numerico� Permite indicar el grosor de la línea en cuestión.
WIDTH=�valor numérico� Permite indicar la anchura en pixels o el tanto por ciento del ancho de la pantalla que ocupará la línea.
ALIGN=�LEFT | CENTER | RIGTH� Determina la forma de alinear la barra en la pantalla del navegador (sus valores respectivos son izquierda, derecha y centro). Por defecto el valor, es de alineado a la izquierda.
NOSHADE Elimina, en caso de poner este atributo, el efecto tridimensional de la barra, eliminando la sombra que proyecta sobre el documento.

FIRMAS Y DIRECCIONES

Una buena construmbre es la de indicar la final de cada página o documento, la dirección de correo electrónico donde contactar con el autor de la página.

Esto es posible con la directiva cerrada <ADDRESS>...</ADDRESS>, entre la que se incluirán los datos que creamos necesarios para ponerse en contacto con nosotros, los creadores de la página WEB. Al visualizarlo, aparecerá un tipo de letras ligeramente inclinada, de forma que no se confunda con el resto del texto del documento.