Capítulo III: Haz más con HTML

TEMA 1: Dale formato al texto.

Cuando se utilizan etiquetas de párrafo, encabezado o listas, estas afectan a todo el boque de instrucciones que se encuentren dentro, pero los estilos de caracter sólo afectan a un pequeño bloque, para que resalte de algún modo de los demás valores. Las etiquetas de estilos lógicos indican cómo se va a usar el texto, lo que le indica al explorador, qué hacer y como formatearlo; éstas tienen tanto apertura como cierre y son las siguientes:

<em> Este es un ejemplo con <em>
<strong> Este es un ejemplo con <strong>
<code> Este es un ejemplo con <code>
<samp> Este es un ejemplo con <samp>
<kbd> Este es un ejemplo con <kbd>
<var> Este es un ejemplo con <var>
<dfn> Este es un ejemplo con <dfn>
<cite> Este es un ejemplo con <cite>
<blockquote> Se utiliza para citas extensas
<address> Se utiliza para pies de página y derechos de autor

Nota: La forma en que ves los ejemplos varía dependiendo del navegador. El objetivo de estas etiquetas no sólo es estético y funcional (para poder localizar información común) sino que también son útiles para algunos lenguajes como Visual Basic Script.

Ahora bien, la etiquetas de Estilos físicos nos permiten formatear el texto con formatos preestablecidos del navegador, éstos no cabian de visualización en diferentes navegadores, pues su intención no es separar el contenido lógico, sino sólo mostrarlo diferente; éstas tienen tanto apertura como cierre y son las siguientes:

<b> (bold). Muestra el texto en negritas
<i> (italic). Muestra el texto en cursivas
<tt> (type text). Muestra el texto monoespaciado
<u> (underline). Muestra el texto subrayado
<s> (strike). Muestra el texto tachándolo
<big; (big). Muestra el texto en letras grandes
<small> (small). Muestra el texto en letras pequeñas
<sub> _{(sub). Muestra el texto como subíndice}
<sup> ^{(supra). Muestra el texto como superíndice}

Nota: Toma en cuenta que algunas etiquetas, no son compatibles con navegadores antiguos, así que el explorador pasará por alto el formato del texto. (aunque no hay que preocuparse mucho, ya que esos navegasaurios están desapareciendo).

Una etiqueta muy importante que no debo pasar por alto, es <pre>. Esta etiqueta formatea el texto que esté dentro como texto monoespaciado, lo que ayuda mucho para hacer tablas o para alinear el texto manualmente:

H  H   OOO   L     AAA 
H  H  O   O  L    A   A
HHHH  O   O  L    AAAAA
H  H  O   O  L    A   A
 H  H   OOO   LLLL A   A

Pero si lo que quieres es dividir la información de tu página, debes utilizar la etiqueta de barra horizontal <hr>, en cualquier parte de tu página, esta instrucción tiene los siguientes atributos:
size: define el tamaño de la línea, en porciento o en pixeles.
width: define el grosor de la línea en pixeles.
align: especifica la alineación de la línea, (left, center, right)
noshade: le quita a la línea el efecto 3D preestablecido.

Ahora bien, la etiqueta <br> (breack space) hace un salto de línea, pero no un salto de párrafo, ésto te puede servir para mostrar varios elementos como lo he hecho con los ejemplos de las etiquetas; mientras que &nbsp; que se utiliza como un código ISO latin, sirve para ignorar cualquier salto de línea que esté delante en el código. También la etiqueta <nobr> es lo contrario de <br> ya que mostrará en una sóla línea el texto que esté entre las etiquetas, aún cuando esté ajustado en dos o más; y si deseas colocar un salto de línea dentro de la etiqueta <nobr> necesitarás de la etiqueta <wbr>.

Basta ya de formatos y etiquetas preestablecidas del navegador, ahora viene lo bueno, crear tus propios formatos de letra, ya sean así, así o así, para hacer esto necesitamos de la ayuda de una etiquetita muy especial, llamada <font>. Los atributos de esta etiqueta son:
face: El nombre de la fuente, por ejemplo: Courier
size: Es el tamaño de la fuente (1 al 7), éste también puede ser relativo.
color: Especifica la tríada hexadecimal del color de la fuente. (Para saber las tríadas de los colores haz clic aquí)

Notas: en el atributo face, es conveniente escribir más de una fuente, ya que si el explorador no la encuentra colocará la prestablecida por <basefont> o en última instáncea texto sin formato.

La etiqueta <basefont> funciona igual que <font> sólo que ésta afecta a todo el cuerpo de la página, y es aquí donde se establecen los valores predeterminados, para los casos relativos, por ejemplo:
<basefont face="Helvetica" size=5 color="deepskyblue">
<font size=-2>La letra será menor por dos</font>
<p>Todo el cuerpo es azul cielo, tamaño 5 y Helvetica</p>

Haz clic aquí para ver el ejemplo anterior en una nueva ventana

Por último en este capítulo veremos como alinear un bloque de texto; la etiqueta <center> produce lo mismo que si a varias etiquetas de párrafos le añadieramos align "center", ya que todo lo que se encuentre dentro se alineará centrado, inclusive si son imágenes. Pero no solamente existe el formato centrado, así que para dar una alíneación diferente a un bloque, necesitaremos la etiqueta <div> que significa división, cuando le asignas el atributo align, éste afectará a todo lo que se encuentre dentro. Así pues el código siguiente produce un bloque alineado a la izquierda:
<div align="right">
<p>Este texto está alineado a la derecha</p>
<h4>Todo tipo de etiqueta se ve afectada por &lt;div&gt;</h4>
</div>

Haz clic aquí para ver el ejemplo anterior en una ventana nueva

Nota: El atributo id sirve para asignarle un nombre de objeto al bloque de la página, para que pueda ser modificado en un lenguage de programación.

Nota: En este tema no se habla de blink, ya que no es muy usado, pero para aquellos que desean saberlo todo, produce un efecto intermitente en la palabra.

TEMA 2: Asistentes, editores y convertidores.

Este tema será corto pero substancioso; después de todas esas aburridas etiquetas que vimos en el tema anterior, me imagino que has de creer que hacer una página es algo increíblemente imposible, pero no es así, los creadores de páginas hacen trampa por así decirlo, ya que usan una interfaz que les evita tener que recordar todas esas etiquetas ya que las automatiza.

Los asistentes son aplicaciones que guardan la información de una gran variedad de etiquetas, y te permiten escoger en su barra de herramientas, etiquetas de formato, de control, formularios, tablas, etc. pero no deja de ser tan solo un editor incipiente de HTML, ya que te muestra el resultado tal y como lo verías desde el block de notas, y algunos de estos llegan a costar mucho por la gran cantidad de etiquetas, (tantas como se ven en este manual).

Si te interesa conocer más sobre asistentes, aquí te presento los que yo considero mejores:
HTML Assistant Pro 97 (Para Windows) *** (shareware)
HotDog (Para Windows) ***** (shareware)
Web Edit (Para Windows) **
HTML.edit (Para Macintosh) *** (freeware)
tkHTML (Para Unix) * (freeware)

Ahora sí comienza la diversión, pues veremos los editores WYSIWYG, los cuales te permiten ver cómo quedará tu página, mientras la vayas haciendo; el editor que yo utilizo y recomiendo es Microsoft Front Page Express, que además de ser gratuito, te ofrece una amplia disponibilidad de accesorios como componentes WebBot, archivos adjuntos, Controles ActiveX, Guiones Javascript, Secuencias VBscript y muchas cosas más. Descárgalo ahora sin ningún costo desde http://www.microsoft.com/windows/ie/ie5/default.asp.

Ahora bien, hay muchos más editores, así que te mostraré los más importantes y los catalogaré:

Los Convertidores son aplicaciones que convierten un texto simple o de formato enriquecido (RTF) a HTML, algunos de estos son:
Microsoft Word 97
RtfToHtml
Quark XPress
Page Maker