HTML (lenguaje de marcas), 5ª Parte, Formato de texto

Ha llegado el momento de estudiar todas las posibilidades que ofrece el lenguaje HTML para dar formato al texto e insertar caracteres especiales, pasando por la inserción de texto preformateado.

En este capítulo se aprenderán las posibilidades que nos ofrece el lenguaje de creación de páginas Web a este respecto. También se verá cómo crear un nuevo estilo de párrafos, compuesto por texto preformateado, es decir texto en el que se respetarán los espacios, tabulados y saltos de línea que se inserten.

Formato de texto.

El lenguaje HTML permite dar varios tipos de formatos al texto de nuestras páginas. Para ello usa una serie de etiquetas, compuestas todas por una instrucción de inicio y otra de fin, que realizan efectos o formatos diversos en el texto que encierran. Estas etiquetas se dividen en dos grupos: las etiquetas de estilo lógico y las etiquetas de estilo físico.

Etiquetas de estilo físico.

Las etiquetas de estilo físico son aquellas que especifican exactamente cómo debe ser formateado el texto que modifican. Es decir, una etiqueta de estilo físico es aquella que dice: ’este texto debe estar en negrita’ sin más, no ofrece al navegador otra posible forma de mostrar ese texto. Este tipo de etiquetas contradice el espíritu descriptivo que debe tener el HTML, por lo que son muy criticados por los puristas de este lenguaje. Estos puristas sugieren que las etiquetas de estilo físico sean sustituidas por las de estilo lógico que se verán en el siguiente apartado. A pesar de todo las etiquetas de estilo físico son de uso común y por ello las trataremos en detalle.

Ejemplos de las etiquetas de este tipo más usadas:

  • Poner un texto en negrita: para ello se usa la etiqueta <B>..</B> como abreviatura de la palabra inglesa Bold que significa, precisamente, negrita. La manera de usar esta etiqueta es como cualquier otra compuesta por instrucción de inicio e instrucción de fín, es decir debe introducirse el texto sobre el que se quiere actuar entre ambas instrucciones.
  • Poner un texto en cursiva: en este caso se usa la etiqueta <I>..</I> como abreviatura de la palabra inglesa Italics que significa cursiva. Su uso es muy similar al anterior.

    <I>
    TEXTO EN CURSIVA
    </I>

    Esta etiqueta suele usarse para dar énfasis a alguna frase o texto pero sin que resalte demasiado. Otro uso común es para dar un formato especial a palabras de otro idioma o a títulos como por ejemplo:

    D1
    El último libro que me he leído es
    <I>
    El médico
    </I>

  • Poner un texto con letras de tamaño fijo: como el lector sabrá existen diversos tipos de letra (llamadas fuentes) como Times New Roman, Arial,Courier New, etc. En algunos de estos tipos el tamaño de las letras no está prefijado y de esta manera la letra ’i’ no ocupa lo mismo que la letra ’m’. Este es el caso de la fuente Times New Roman que es el usado por la mayoría de los navegadores para mostrar el texto.

    La etiqueta <TT>..</TT> que proviene del vocablo inglés TeleType, traducido al español TeleTipo, nos permite decirle al navegador que use un tipo de letra monoespaciado. Esta etiqueta es usada habitualmente para resaltar algún tipo de comando, código, nombre de archivo o similares. Por ejemplo:

    Para obtener un listado de todas tus páginas Web en UNIX deberás escribir:
    <TT>
    ls*.htm *.html
    </TT>

  • Tachar una palabra o frase: aunque no es muy común en ocasiones puede ser conveniente que una palabra o frase aparezcan tachadas por una línea horizontal. La etiqueta de HTML que permite hacer esto es <STRIKE>..</STRIKE>, en inglés strike significa ’tachado’ (También se puede usar la abreviatura <S>..</S>) En ocasiones se usa esta etiqueta para simular un texto borrado, por ejemplo:

    Yo
    <STRIKE>
    CASI
    </STRIKE>
    NUNCA me equivoco

  • Todas las etiquetas vistas hasta ahora tienen sus etiquetas de estilo lógico equivalentes. A continuación se muestran otras para las que no ocurre igual y que realmente se muestran a medio camino entre el estilo lógico y el estilo físico.

  • Aumentar el tamaño del texto: En ocasiones queremos resaltar una palabra o frase haciendo que esté escrita con una letra de tamaño mayor al texto adyacente. Para ello se usa la etiqueta .. con cual conseguimos un ligero aumento de tamaño en el texto que es afectado por ella. Si queremos conseguir un aumento de tamaño aún mayor podemos anidar varias de estas etiquetas como observamos en el ejemplo:
    Esto es texto normal,

    <BIG>
    este es grande
    <BIG>
    y este es mayor
    </BIG>
    </BIG>

  • Reducir el tamaño del texto: En otras ocasiones podemos pretender lo contrario: Hacer que una frase sea más pequeña que las anteriores. Para ello se usa la etiqueta SMALL que funciona de manera muy similar a la etiqueta BIG, como podemos ver en su ejemplo:

    Esto es texto normal,
    <SMALL>
    este es pequeño
    <SMALL>
    y este es menor
    </SMALL>
    </SMALL>

  • Poner subíndices y superíndices: existen dos etiquetas que permiten poner subíndices y superíndices en una página HTML. Estas etiquetas son SUB y SUP respectivamente. Veamos un ejemplo:

    El 1
    <SUP>
    er
    </SUP>
    componente químico que estudiamos fue el agua o H
    <SUB>
    2
    </SUB>0.

  • Y por último, poner texto subrayado: el texto encerrado entre las instrucciones de inicio y fin de la etiqueta U se muestra simple. El nombre de la etiqueta proviene de la palabra inglesa Underline que significa precisamente subrayado. En general un texto se muestra subrayado para resaltar una información importante, por ejemplo:

    El plazo límite para la entrega de solicitudes es el
    <U>
    15 de Junio
    </U>

Etiquetas de estilo lógico.

En contraposición con los estilos físicos están las etiquetas de estilo lógico. Este tipo de etiquetas está mucho más en concordancia con la filosofía del lenguaje HTML y los puristas las recomiendan como sustitutos a las de estilo físico. La función de estas etiquetas ya no será decirle al navegador ’pon esto en negrita’ ni similares, sino quesimplemente describirán el texto, por ejemplo ’este texto es importante’, ’esto es un código’, etc. Usando esta descripción el navegador lo mostrará de la manera más conveniente que en gran parte de los casos será igual a si hubiésemos usado las etiquetas de estilo físico correspondientes.

Al igual que las anteriores, las etiquetas de estilo lógico están formadas por una instrucción de inicio y otra de fin que encierran un texto. Las principales etiquetas de este tipo son las siguientes :

  • <STRO>NG>…</STRONG>: El nombre de esta etiqueta significa fuerte o grueso, y sirve para indicar que el texto que modifique es un texto de mayor importancia que el que le rodea y es necesario resaltarlo de algún modo. Los navegadores gráficos en general muestran el texto afectado por esta etiqueta en negrita, por lo que puede usarse en sustitución de la etiqueta B. El siguiente es un ejemplo típico de su uso:

    <STRONG>
    No puedes
    </STRONG>
    perderte la última versión de nuestro
    editor HTML.

  • <EM>…</EM>: Esta etiqueta proviene de la palabra inglesa EMphasize, que significa enfatizar. El texto sobre el que actúa esta etiqueta suele estar mostrado en cursiva:

    El autor del libro es
    <EM>
    Noah Gordon
    </EM>.

  • <CODE>…</CODE>: con esta etiqueta señalamos un texto que forma parte de un código, de instrucciones de ordenador,… La palabra inglesa code significa, precisamente, código. El texto delimitado por esta etiqueta será mostrado con un tipo de letra monoespaciada (por ejemplo Courier) y de tamaño ligeramente menor al habitual. Esta etiqueta puede usarse, por ejemplo, para insertar código en C:

    <CODE>
    #include “stdio2.h”
    </CODE>

  • <SAMP>…< /SAMP>: el nombre de esta etiqueta proviene del inglés SAMPle (muestra) y suele utilizarse para formatear ejemplos, muestras, códigos de scripts, etc. El texto formateado con esta etiqueta suele ser mostrado de la misma manera que el formateado con <CODE>.
  • <VAR>…</VAR>: delimita texto escrito por el usuario, variables, argumentos de comandos… el navigador mostrará este texto como cursiva. Un ejemplo de su uso podría ser:

    La dirección de esa página es
    <VAR>
    http://www.towercom.es
    </VAR>

  • <CITE>…</CITE>: Esta etiqueta suele ser usada para introducir una cita o una referencia (significado de la palabra inglesa cite). Al igual que la etiqueta anterior provoca que el texto que encierra sea mostrado en cursiva:

    <CITE>
    Pienso, luego existo
    </CITE>
    dijo Descartes

  • <DFN>…< /DFN>: En este caso el objeto de la etiqueta es introducir una definición, pero el texto será mostrado igualmente en cursiva:

    Pensar:
    <DFN>
    Discurrir, considerar, imaginar
    </DFN>.

  • <KBD>…</KBD>: Tiene la función de formatear texto de entrada (input) del teclado (KeyBoarD en inglés) con un tipo de letra monoespaciado. Aunque esta etiqueta pertenece al HTML no es soportada por Explorer™. recomendable.

Ya se han visto los estilos lógicos y los físicos, así como las diferencias entre ellas. Como se ha dicho es recomendable usar los primeros siempre que sea posible.

La etiqueta FONT.

Para poder controlar en mayor medida aún la apariencia del texto se creó la etiqueta FONT. A continuación se explicarán sus virtudes, aunque cabe destacar que actualmente existe una alternativa mejor: las hojas de estilo en cascada o CSS que será tratada en los últimos capítulos del curso.

Cambiando el tamaño del texto.

La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio (<FONT SIZE=””>) y de fin (</FONT>). La forma de especificar el tamaño del texto consistirá en darle el valor deseado al atributo SIZE, si bien hay dos formas de hacerlo:

  • 1. La primera de ellas es indicar un tamaño absoluto de 1 a 7. Correspondiendo 7 al tamaño mayor y 1 al menor. El tamaño por defecto del texto es el equivalente al número 3. Veamos un ejemplo:

    Esto es texto normal
    <FONT SIZE=”6″>
    y esto es grande</FONT>

  • 2. La segunda consistirá en indicar un tamaño relativo respecto al que haya por defecto. Por ejemplo, para poner un tamaño 6 y suponiendo un tamaño por defecto 3 se usaría:

    Texto de tamaño 3
    <FONT SIZE=”+3″>
    Tamaño 6
    </FONT>

    Es necesario hacer notar que el aumento de tamaño se tomará siempre respecto al que se tenga por defecto (y que será 3 mientras el usuario no cambie las preferencias de su navegador), por tanto anidando varias etiquetas FONT no se irá aumentando el tamaño del texto como ocurría con la etiqueta BIG. Por ejemplo:

    D1
    Texto normal (tamaño 3),
    <FONT SIZE=”+1″>
    Texto de tamaño 4 ,
    <FONT SIZE=”+1″>
    este texto sigue teniendo tamaño 4
    </FONT>
    </FONT>

Nota

Cuando se indica el tamaño del texto usando el método relativo (+n o -n) será necesario usar comillas. Aunque algunos navegadores podrían entender el valor aunque no se usen la única manera de estar seguro de que la visualización será correcta en todos ellos será entrecomillar el valor dado al atributo SIZE.

Conocidos estos dos métodos es el momento de introducir una nueva etiqueta muy relacionada con FONT: la etiqueta BASEFONT. Esta permite modificar el tamaño por defecto del texto de la página Web. Su modo de uso es el siguiente:

<BASEFONT SIZE=”n”>

Donde n es un número del 1 al 7 (por defecto vale 3) y las comillas son obligatorias. Podemos observar como esta etiqueta está formada por una única instrucción cuya función será modificar el tamaño de todo el texto a partir de su inclusión. La única excepción que escapa al efecto de esta etiqueta son los encabezados, que mantienen su tamaño.

En general cuando se usa esta etiqueta se introduce como la primera después de <BODY>, no usarla es lo mismo que usar: <BASEFONT SIZE=”3″>.

A continuación se incluyen dos ejemplos con distintos tamaños de letra por defecto:

Esto es texto de tamaño 3,
<FONT SIZE=”+3″>
esto es de tamaño 6,
</FONT>
<FONT SIZE=”+4″>
y esto es de tamaño 7
</FONT>

Como se ve, para hallar el tamaño de un texto hay que sumar el tamaño relativo (+3 o +4 en este caso) al tamaño por defecto del resto del texto (en este caso 2). Otro ejemplo más:

Esto es texto de tamaño 4,
<FONT SIZE=”+3″>
esto es de tamaño 7,
</FONT>
<FONT SIZE=”+4″
y esto sigue siendo de tamaño 7
</FONT>

En este segundo ejemplo se ve, además, que en ningún caso se puede conseguir un tamaño superior a siete. De igual manera nunca se puede poner un tamaño menor que uno.

Cambiando el color del texto.

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el color del texto con la misma facilidad con la que hasta ahora se ha cambiado su tamaño. En un principio la única forma de indicar un color consistía en usar un código hexadecimal de la siguiente manera:

<FONT COLOR=”#RRGGBB”>

Dónde hay que sustituír RR por dos números hexadecimales que indican la cantidad de rojo (desde 00 que es ausencia de color a FF que es máxima cantidad de color), GG por otros dos que indican la cantidad de verde y BB por dos que indican la cantidad de azul. Combinando estos tres colores en diferentes proporciones se pueden crear hasta 16 millones de colores. Este sistema suele parecer ligeramente complicado en un principio, pero con la práctica o con ayuda de herramientas gráficas de selección de colores se convierte en un método bastante sencillo e increíblemente potente.

Existe un segundo método de indicar el color que sin duda le resultará al lector más sencillo. Este método consiste en poner como valor de COLOR el nombre del color en inglés. Los colores aceptados son: Black (negro), white (blanco),green (verde), maroon (marron rojizo), olive (verde oliva), Navy (azul marino), purple (violeta), red (rojo), yellow (amarillo), blue (azul), teal (verde azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), silver (gris claro). Aunque además de estos existen otros valores, no son soportados en todos los navegadores.

Y la forma de usarlas queda clara en el siguente ejemplo:

<H1>
<FONT COLOR=”FUCHSIA”>
Colores en el Web
</FONT>
</H1>
ya podemos decir que sabemos poner colores en las páginas Web,
<FONT COLOR=”green”>
verde
</FONT>,
<FONT COLOR=”blue”>
azul
</FONT>
<FONT COLOR=”red”>
rojo
</FONT>,
etc. Ninguno se nos resiste.

Texto preformateado.

En ocasiones es interesante mantener los espacios o saltos de línea de un párrafo tal y como están en el código HTML. Para conseguir esto hay que alterar el comportamiento habitual del navegador que, como se ha visto, ignora este formato. Un ejemplo muy simple que muestra esto es la firma de páginas con dibujos de texto.

Etiqueta: <PRE>…</PRE> . El nombre asignado a esta etiqueta proviene de la palabra “PREformateado” (o PREformatted en inglés) y su función es mantener todo formateado manual que sea hecho en el texto escrito entre la instrucción de inicio (<PRE>) y la instrucción de fin (</PRE>).

Aviso. Es común en los nuevos programadores que descubren la etiqueta PRE usarla abundantemente, sin embargo, esto puede causar problemas de visualización de esas páginas con algunos tamaños de ventana, resoluciones de pantalla o tipos de monitor distintos del nuestro. Recordemos que esta era la razón por
la que los navegadores ignoraban el formato manual y debido a ello el uso de PRE debe estar limitado a los casos en los que sea realmente necesario.

Uso de otras etiquetas dentro de <PRE>…</PRE>. A efectos de HTML estándar, el contenido de la etiqueta PRE es el mismo que el de un párrafo creado con P. Las únicas excepciones son aquellos elementos que producen cambios en el tamaño de la letra como por ejemplo IMG, BIG, SMALL, SUB, SUP y FONT. Esto excluye también a todas aquellas etiquetas que provocan un cambio de línea (son las llamadas etiquetas de nivel de bloque, block-level tags) como son: H1,…, H6, BLOCKQUOTE, ADDRESS, HR, etc.

Un Saludo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s