Curso completo de HTML - Formato de texto

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.

En la figura 3.1 se muestran ver ejemplos de las etiquetas de este tipo más usadas

que son las que sirven para...

• 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. Su forma de uso es la siguiente:

  <B>TEXTO EN NEGRITA</B>

  Por ejemplo podría usarse en la siguiente frase:

  Desde esta página puede adquirir la última versión de nuestro programa <B> 'gratis' </B>

  En la que la palabra 'gratis' será mostrada en negrita tal y como podemos ver en la figura 3.1.

• 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:

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

  En el que 'El médico' será mostrado con letra cursiva como vemos también en la figura 3.1

• 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. En la figura 3.2 se muestra ver un ejemplo de este tipo de letra.

  Figura 3.2. Con el tipo de letra Courier todas las letras ocupan lo mismo (monoespaciadas)

  

  Sin embargo en ocasiones puede ser conveniente que el tamaño de las letras esté prefijado y que todas las letras ocupen lo mismo (tipo de letra monoespaciado). En estas ocasiones se usa otro tipo de fuente, generalmente Courier New. En la figura 3.3 se observa ver la diferencia con el tipo de letra anterior.

  Figura 3.3. Los navegadores gráficos como Explorer pueden mostrar perfectamente todos los tipos de estilos lógicos como vemos en esta figura.

  

  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 <BIG>..< /BIG> 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>

En la figura 3.4 se pueden apreciar todos los ejemplos de estilos físicos tal y como son vistos con un navegador de texto (en concreto Lynx).

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 que simplemente 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 :

• <STRONG>...< /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, tal y como puede verse en la figura 3.5 como resultado del siguiente código:

  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. Con Explorer y Navigator 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... Tanto el Explorer como el Navigator mostrarán este texto como cursiva. Un ejemplo de su uso podría ser:

  La dirección de esa página es <VAR> 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

Pueden verse todos los ejemplos anteriores, tal y como los muestra Explorer, en la figura 3.5:

Todos estas etiquetas son entendidas por los navegadores en modo texto y usan los medios de que disponen para resaltar las frases que encierran. En la figura 3.6 se incluyen todos los ejemplos tal y como los muestra Lynx.

Una característica que llama la atención de estas etiquetas es que varias de ellas llevan a cabo el mismo cometido, o eso parece. Esto es así porque se está describiendo el texto, no indicando como serán formateados. ¿Porqué no se unen las etiquetas que hacen lo mismo en una sola?, porque se supone que describen texto lo suficientemente diferente como para que aunque si es conveniente puedan ser formateadas de forma diferente.

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.