HTML para Foros

1 INTRODUCCIÓN

En este documento trataremos los códigos HTML necesarios para darle formato a los mensajes que colocamos en foros de todo tipo. El código más generalizado para estos fines es el BBCode, por su facilidad de uso. Sin embargo, pese a que HTML es más difícil de usar, y más complicado, sigue siendo una buena opción, por las amplias posibilidades que ofrece, que veremos más adelante. Antes de comenzar, es necesario tener en mente que algunos foros bloquean total o parcialmente el uso de códigos HTML, por motivos de seguridad, por lo tanto, podría no funcionar. Además, al momento de combinar códigos para lograr formatos más complejos, podría ser necesario combinarlos en un orden muy específico para obtener el efecto deseado, dependiendo del foro en el que escriban  y navegador que utilicen. Más adelante profundizaremos en este último punto.

Hechas estas consideraciones, pasemos al tema que nos ocupa. Comencemos con una pregunta que no puede faltar:

¿Qué es HTML?

HTML son las siglas de “HiperText Mark-Up Language”. Una traducción literal sería “Lenguaje de Formato de Documentos de Hipertexto”. “Mark-Up” es en esencia un término de imprenta. Se usa para designar las marcas que pone un editor en un manuscrito, para indicar dónde van los títulos, las secciones, las separaciones entre párrafos, de forma que los encargados de la imprenta sepan qué aspecto deben darle al libro terminado. Eso es lo que hace HTML, indica al navegador (Internet Explorer, Firefox, Netscape, Opera...) qué aspecto debe darle a una  página determinada cuando la muestre en pantalla. De ahí que se use principalmente para hacer páginas web. Sólo que en este caso somos tanto escritores como editores, ya que nosotros escribimos el texto, y nosotros indicamos al navegador cómo debe “imprimirlo”, usando para ello los códigos HTML, que es nuestro “Mark-Up”.

Cabe señalar, sin embargo, que no podemos estar absolutamente seguros de que el aspecto de nuestra página (o texto) será exactamente el mismo sin importar cómo se visualice. El resultado puede cambiar obedeciendo a diversos factores, como el tipo de máquina y sistema operativo, el número de colores soportados, la resolución de pantalla, el navegador que se utiliza, incluso según el tamaño de la ventana de visualización. Con HTML damos una pauta, pero no controlamos completamente el aspecto final de nuestro trabajo. De ahí la acotación del principio, en el sentido de que podría ser necesario experimentar antes de poder obtener el efecto deseado. De hecho, al momento de crear páginas web lo más recomendable es probarlas desde diferentes navegadores, para comprobar cómo interpreta cada navegador los códigos que escribimos, y hacer las correcciones que creamos pertinentes antes de subirla definitivamente a Internet.

Las etiquetas.

El equivalente web de las marcas del editor que comentaba antes son las llamadas etiquetas, con las cuales indicamos qué parte es la cabecera, dónde se separan los párrafos, en qué punto se colocan las imágenes, de qué color deben ir ciertas frases, y un largo etcétera. Trabajan de forma muy similar a los paréntesis, indicando al abrirse dónde comienza la parte “afectada”, y se cierra donde termina. También eso lo veremos más adelante. Hay gran variedad de etiquetas, y sólo veremos aquí las necesarias para realzar el texto en foros. Sin embargo, tienen ciertas similitudes.

Para empezar, todas ellas están basadas en el idioma inglés, como comprobaremos a lo largo de este documento. Así, la etiqueta para dar color al texto es “font color”, para el tamaño es “font size”, la negrita se indica con “b” (de bold, equivalente en inglés a nuestra negrita), la subrayada con “u” (underlined, subrayado), y así por el estilo. Asimismo, las etiquetas jamás deben escribirse en mayúsculas, las cuales son admitidas únicamente en texto ajeno a la etiqueta en sí, como nombres de archivo, o direcciones de Internet. Pero ni siquiera en estos casos suele ser necesario emplearlas, ya que para empezar las direcciones de Internet y de correo electrónico muy rara vez emplean mayúscula, y aún si lo hacen, el navegador no distinguirá mayúsculas de minúsculas al momento de buscar un archivo o página web. Por lo tanto, lo más aconsejable es usar únicamente minúsculas al escribir código HTML. Más adelante trataremos con detalle la forma adecuada de escribir nombres de archivo, que se sujetan a un conjunto de reglas muy particular.

Otra característica común para todas las etiquetas es que todas “abren” y “cierran” de la misma forma, a saber:

<etiqueta>Parte afectada</etiqueta>

Es decir, ambas etiquetas se encierran con “<>”, pero la etiqueta final, que hace el cierre, se indica con una diagonal, colocándose el texto de la etiqueta que se cierra entre “/” y “>”

Cuando se combinen varias etiquetas, es importante cerrarlas en orden exactamente inverso al de apertura.  Veamos un ejemplo. Supongamos que deseamos que cierto texto aparezca con letra negrita, cursiva y subrayada. Entonces tendríamos que abrir tres etiquetas, a saber:

<b><i><u>

El orden de apertura puede variar, ya sea por estilo personal, o por necesidad, por las cuestiones que se comentaban al principio.  Pero el cierre debe efectuarse en orden exactamente inverso al de la apertura. Siguiendo el ejemplo, el cierre sería así:

</u></i></b>

Si no se respeta el orden al cerrar las etiquetas, el código no funcionará correctamente.

Ahora bien, ciertas etiquetas son sencillas, simplemente una letra o una palabra. Tal es el caso de <b> (negrita) y <sup> (superíndice). Otras, sin embargo,  pueden incluir (opcionalmente o por fuerza) parámetros y valores adicionales, como éstas:

_________________________________________________________

• <p align=”center”></p>

• <font face= “verdana”></font>

• <a target=”_blank” title=”ConfigurarEquipos.com” href=”http://www.configurarequipos.com”></span>

• <span style=”background color: blue”></span>

__________________________________________________________

No me extenderé por ahora en el significado de estos códigos, ya que eso lo trataremos en su momento. El objetivo de estos ejemplos es simplemente ilustrar cuatro formas distintas de interacción de etiquetas, parámetros y valores, con el fin de resaltar dos puntos:

1 Cómo cerrar. Como se muestra en los ejemplos, la información extra sólo se coloca dentro de la etiqueta inicial. En el cierre, simplemente se indica la etiqueta que se cierra, sin importar cuánta información extra muestre la etiqueta inicial.

2 Comillas. (“ ”). Como puede verse, ciertos valores aparecen encerrados con comillas. Pues bien, es muy importante tener especial cuidado al abrir y cerrar esas comillas cuando se utilice código HTML en un foro, sobre todo si ese foro no cuenta con opciones para previsualizar el mensaje antes de enviarlo. Si por error se omite una de esas comillas... podría causar errores difíciles de reparar. El síntoma más frecuente de una omisión de comillas es que desaparezca una parte del texto escrito, sin razón aparente. Aún si se descubre y corrige el error, podría no tener efecto. La solución más simple es borrar todo el texto que se alteró por el error, y escribirlo de nuevo. Sin embargo, en ocasiones el mensaje se vuelve imposible de editar, y resulta necesaria la intervención de un moderador del foro para que edite o elimine el mensaje en cuestión. De ahí la importancia de evitar en lo posible errores de esa índole.

Por supuesto, si el foro en cuestión permite previsualizar los mensajes antes de enviarlos, la recomendación es aprovecharlo. Escribir el código, pre-ver el efecto, y corregir los errores que existan, antes de definitivamente enviarlo, y así evitar ‘daños’.

Suficiente introducción. Pasemos ahora a lo interesante:

2 CÓDIGOS

Aquí veremos los códigos que pueden utilizarse en los foros. Por supuesto, no son tan numerosos como los utilizados al crear páginas web, pero siguen ofreciendo gran variedad de opciones.

Formatos y efectos de texto

Comenzaremos con las opciones de formato y efecto para texto, como negrita, subrayada, cursiva, superíndice, tachado, texto parpadeante, y algunas más. Las más básicas son:

__________________________________

Negrita <b>

Cursiva <i>

Subrayada <u>

__________________________________

Esas son algunas de las etiquetas más simples, una letra o una palabra sin información adicional. Como ya hemos visto, encerraremos el texto que queramos modificar con una etiqueta inicial y una final, como con paréntesis. Apliquemos estas etiquetas en algunos ejemplos:

Aquí se aplicaron los formatos más sencillos, pero hay más, que veremos a continuación:

______________________________________

Superíndice: efecto que coloca las letras un poco por encima de la línea normal. Su etiqueta es:

­­­­­­­­­­­­­­­­­

<sup>

Digamos que queremos mostrar:

­­

X²

El código sería X²

El superíndice se utiliza también, por ejemplo, para colocar las siglas “TM” después de una marca registrada, así:

ConfigurarEquipos.com^TM

que traducido a código, sería:

Configurarequipos.com^TM

______________________________________

Subíndice: Este efecto lleva la función contraria del superíndice, es decir, coloca letras o números por debajo de la línea, _así. Este efecto tiene pocos usos, pero podría requerirse su uso en alguna circunstancia, de ahí que tratemos su etiqueta, que es:

<sub>

El código se aplicaría de esta manera:

Texto normal _subíndice

Dándonos como resultado:

Texto normal _subíndice

______________________________________

Tachado: Nos permite mostrar nuestro texto cruzado con una línea horizontal, dando la apariencia de un error. Su etiqueta:

<strike>

En código:

Texto normal, <strike>texto tachado</strike>

Su resultado:

Texto normal, texto tachado

______________________________________

Hasta aquí las etiquetas simples, para efectos simples. Pero existen efectos más elaborados, que se controlan con la etiqueta “span”. Con esta etiqueta puede lograrse que el texto parpadee, o que aparezca como resaltado con un marcador, y algunos efectos más. Para efectos de texto, esta etiqueta se escribe de la siguiente manera:

<span style=”opcional”>texto</span>

Donde “opcional” es la zona que cambia según el efecto que se desee. Las alternativas que existen para esa zona son:

__________________________________

Ø      Visibility: hidden

Oculta el texto por completo, siendo imposible incluso seleccionarlo. Veamos un ejemplo:

<span style=”visibility: hidden”>Texto oculto</span>

El resultado…

Texto oculto

…Invisible e inseleccionable. Pero ahí está. Si se visualizara el código fuente, podría comprobarse que en ese renglón aparentemente vacío, en realidad hay texto.

____________________________________

Ø      font-variant: small-caps

Hace que el texto aparezca en versales. ¿Qué significa esto? Que todo está escrito en letras mayúsculas, distinguiéndose las minúsculas por ser de menor tamaño, así:

Texto Normal Texto en Versales

Aquí puede verse claramente cómo las letras genuinamente mayúsculas son más altas que las “minúsculas”. Traduciéndolo a código, queda así:

Texto Normal <span style=”font-variant: small-caps”>Texto en Versales</span>

_________________________________

Ø      text-decoration: opcional

Esta entrada permite aplicar dos tipos de efecto, dependiendo del valor que coloquemos. Nótese que “opcional” aparece en cursiva y con un color ligeramente distinto. Esto para indicar que se trata de una entrada de opción múltiple. Es decir, ahí se colocará el valor correspondiente al efecto que deseemos. Las opciones son dos: suprarrayado y texto intermitente. El suprarrayado, como su nombre lo indica, coloca una línea sobre el texto, no debajo, como hace el subrayado. Y el texto intermitente hace que el texto parpadee. Lamentablemente, Word no admite ninguno de estos dos efectos, por lo que no podré simularlos aquí. Sugiero, por lo tanto, que se experimente en un lugar (foro, programa) que admita HTML. Los valores son (se recuerda que deben escribirse justo donde aparece opcional):

• Para suprarrayado: overline
• Para intermitente: blink

­­­­­­­­­­­­­_____________________________________

Ø      background color: color

Hace aparecer el texto como resaltado con un resaltador de textos. Nótese que “color” aparece en cursiva y con un color ligeramente distinto. Eso para hacer notar que indica otra entrada opcional. Es decir, justo donde está la palabra “color” debe escribirse el código de color deseado. ¿Parece complicado? No lo es, ya que HTML permite indicar el color que se desea simplemente por su designación en inglés (y esto aplica a cualquier código donde se aplique color). Veamos un ejemplo. Supongamos que deseamos resaltar nuestro texto con “resaltador” amarillo. Puesto que “amarillo” en inglés es “yellow”, nuestro código quedará de esta manera:

<span style=”background-color: yellow”>Texto resaltado en amarillo</span>

Dándonos como resultado:

Texto resaltado en amarillo

Así de simple. Cabe destacar que esta forma de indicar los colores con palabras funciona con una gama limitada de colores, los más básicos. Pero esto suele bastar, ya que no es común que se utilicen colores muy elaborados al trabajar en foros. Aquí una lista de colores que admiten simplemente palabra (a la izquierda el color, a la derecha, entrecomillada, su traducción al inglés, que deberá aplicarse para utilizar cada color):

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­_____________________

• Rojo “red”
• Azul “blue”
• Verde “green”
• Amarillo “Yellow”
• Naranja “orange”
• Gris “gray”
• Morado “purple”
• Rosa “pink”

_____________________

Como puede verse, es una gama muy completa, suficiente para colorear nuestros mensajes en los foros. Para tonalidades más elaboradas la única forma de indicar color es en hexadecimal. Esta opción también funciona para los colores “básicos”, pero siempre resulta más práctico usar simplemente palabras que códigos más complicados. Veamos algunos ejemplos de hexadecimal, sólo a título ilustrativo:

_____________________

• Rojo: FF0000
• Azul: 0000FF
• Gris: C0C0C0
• Verde: ­­­­­­­­00FF00
• Amarillo: FFFF00
• Blanco: FFFFFF

_____________________

Estos son solamente colores básicos. Y ya que existe la opción de usar palabras, no resulta necesario ni práctico memorizar claves tan complicadas, a menos que se trabaje con tonalidades más elaboradas.

Como ya comentaba antes, estos valores de color se utilizan para cualquier código que implique color.

Y ya que estamos con los colores, pasemos ahora al código para agregar:

Color, fuente y tamaño de texto

Estos tres atributos se controlan con la etiqueta font. Dependiendo de cómo se complemente, se puede usar para aplicar cada atributo por separado, o combinarlos. La etiqueta se escribe así:

<font parámetro>

Donde parámetro tiene 3 opciones:

Ø      color=”color”

Como indica su nombre, nos permite colorear nuestro texto. En el campo entrecomillado (que en el título aparece en cursiva y marrón) se introduce el valor correspondiente al color que deseamos aplicar. Los valores se han detallado líneas arriba, por lo que no nos detendremos en ese detalle.

Ø      size=”#”>

Nos permite cambiar el tamaño del texto. El signo # indica que ahí se coloca el número para el tamaño que queramos. Se admite de 1 a 7, siendo el 3 el tamaño “predeterminado” en páginas web, aunque he podido comprobar que en algunos sitios, si se coloca 2 o 3, el tamaño resulta mayor al normal. De todos modos no es muy recomendable utilizar tamaños mayores al predeterminado, mucho menos en mensajes enteros, ya que la letra puede aparecer muy grande y resultar molesta para quien lee el mensaje.

Ø      type=”fuente”>

Se utiliza para cambiar el tipo de letra. El tipo predeterminado suele variar en foros, aunque en editores web la predeterminada es “Times New Roman”. Donde aparece fuente se debe introducir el nombre del tipo de letra a usar (courier new, tahoma, arial…). No es común que funcione en foros, sin embargo, vale la pena experimentar y comprobarlo en el foro donde se escriba.

Una última observación: Quizá alguna vez hayan oído hablar de los “spoilers”, ese texto que sólo puede visualizarse al seleccionarlo. No me fue posible simular el efecto en Word, sugiero se experimente en web para comprobarlo. Pero existe una forma muy sencilla de hacerlo. Basta colorear el texto con el mismo color que hay como fondo (generalmente blanco), de forma que se confunda y se vuelva “invisible”, exactamente igual que lo hace un camaleón., que nunca es invisible, simplemente se mimetiza con su entorno. Eso es lo que se hace con un spoiler. Al seleccionarlo, el texto se vuelve visible, sin importar si los colores de letra y de fondo son idénticos… si se trabaja con HTML. En Word me fue imposible hacerlo.

Aquí terminamos con el texto. Continuemos con…

Numeración y viñetas

Como sabemos, al hacer una lista resulta muy útil resaltar los puntos que la componen:

• Punto primero
• Punto segundo

O mejor aún, numerarlos:

1. Punto primero
2. Punto segundo
3. Punto tercero

Siempre es posible hacerlo “manualmente”. Escribir nosotros mismos los números, o colocar guiones (-) o asteriscos (*). Sin embargo, tampoco está de más automatizar un poco el proceso.

HTML hace esto y un poco más. Además de asegurarnos de que la numeración no perderá el “hilo”, o que las viñetas serán siempre iguales (según qué se aplique), agrega (automáticamente) sangría y renglones en blanco para separar un punto de otro, y la lista en sí del resto del texto. Todo sin que nosotros tengamos más que introducir el código en cuestión. ¿Y cuál es ese código?

Tanto al numerar como al aplicar viñetas, se indica el principio y el fin de la lista con una etiqueta de apertura y otra de cierre, de forma parecida a como hemos trabajado con otros códigos, con la diferencia de que aquí hay una etiqueta dentro de otra, así:

<abre lista>

<abre punto>Punto primero</cierra punto>

<abre punto>Punto segundo</cierra punto>

<abre punto>Punto tercero</cierra punto>

</cierra lista>

 De las etiquetas de apertura y cierre de lista nos ocuparemos más adelante, ya que merecen ser estudiadas por separado. Sin embargo, tanto al numerar como al aplicar viñetas se utiliza la misma etiqueta para indicar el principio y el fin de cada punto. La etiqueta en cuestión es:

<li>

Proviene de “List Item”, elemento de lista. Ya hemos trabajado con apertura y cierre de muy diversas etiquetas en este documento, sin embargo no está de más un repaso extra:

_____________________

<li>Primer punto</li>

<li>Segundo punto</li>

<li>Tercer punto</li>

_____________________

<li> indica el comienzo del punto de lista, y su final. Al interpretarse el código con un navegador, el efecto puede ser:

_____________________

• Primer punto
• Segundo punto
• Tercer punto

_____________________

O

_____________________

1. Primer punto
2. Segundo punto
3. Tercer punto

_____________________

Dependiendo de lo que se aplique. También existe forma de aplicar distintos tipos de numeración, o de viñetas, e incluso de comenzar una numeración desde un número distinto de uno. Todo eso lo veremos a continuación.

Empecemos estudiando las viñetas. Su etiqueta es:

<ul>

siglas de “Unordered List”, lista no ordenada. Para abrir la lista, se antepone la etiqueta ya mencionada, y al terminar se cierra con la misma. Un ejemplo para reforzar:

__________________________

Texto fuera de lista

<ul>

<li>Punto primero</li>

<li>Punto segundo</li>

<li>Punto tercero</li>

</ul>

Texto fuera de lista

___________________________

El navegador interpreta este código así:

___________________________

Texto fuera de lista

·        Punto primero

·        Punto segundo

·        Punto tercero

Texto fuera de lista

____________________________

La viñeta predeterminada suele ser la utilizada arriba, el “punto”. Pero existe manera de utilizar dos tipos más:

o       círculo

y

§         cuadrado.

Para utilizar estilos de viñetas distintos del predeterminado, la etiqueta de apertura se escribe así:

<ul type=”tipo”>

Donde se encuentra tipo se escribe el valor correspondiente para cada estilo. circle para el círculo y square para el cuadrado.

___________________________________________

La numeración tiene por etiqueta la siguiente:

<ol>

“Ordered List”, lista ordenada. Trabaja exactamente igual que la etiqueta de viñeta, indicando al abrir el comienzo de la lista, y cierra indicando el final. Del mismo modo se utiliza <li> para delimitar cada punto.

La numeración predeterminada es la arábiga (1, 2, 3…), pero también aquí se manejan diversos estilos. La forma de aplicarlos es idéntica al caso de las viñetas:

<ol type=”tipo”>

A continuación una lista de los estilos, junto con el valor a introducir (donde tipo):

_____________________________

a. (consecutivos con alfabeto-minúsculas) a

A. (consecutivos con alfabeto minúsculas) A

i. (numeración romana con minúsculas) i

I. (numeración romana con mayúsculas) I

_____________________________

Hasta aquí todo muy claro, siempre y cuando las listas comiencen desde 1 (o “a” o “I”…). Pero, ¿qué sucede cuando se requiere comenzar una numeración desde un a posición distinta a 1?

Simple, se agrega otro parámetro más a la etiqueta:

start=”#”

Exacto. Donde #, se introduce el número desde donde se desea iniciar. Veamos un ejemplo, aplicando estilo (numeración romana mayúscula) y comenzando desde un número distinto a 1 (7)

_______________________

<ol type=”I” start=”7”>

<li>Punto séptimo</li>

<li>Punto octavo</li>

<li>Punto noveno</li>

</ol>

_______________________

El resultado:

_______________________

                 VII.      Punto séptimo

              VIII.      Punto octavo

                    IX.      Punto noveno

_______________________

Trabaja de igual forma sin importar el tipo de numeración (o “alfabetización”) que se elija. Así, si se comienza un consecutivo por letras, comenzando desde el número 7, el primero punto de la lista llevará la letra g, el octavo la f, el noveno la i… y así sucesivamente.

Sobra decir que si se desea aplicar una numeración sin modificar el tipo (arábiga), que parta de un número distinto de 1, basta suprimir el parámetro “type”, conservando lo demás el orden indicado.

Insertar imágenes

Muchas veces queremos agregar una imagen a nuestros mensajes. Alguna fotografía chusca que deseamos compartir, o una firma para personalizar nuestros mensajes. Con HTML, hacer esto es realmente sencillo, basta poner la siguiente etiqueta:

<img src=”ruta de imagen”>

“img src” proviene de “Image Source”, que podría traducirse como origen de imagen. “ruta de imagen” se refiere a la ubicación de la imagen a mostrar. Únicamente puede aplicarse a imágenes residentes en páginas web, no a archivos en disco duro. Para poder utilizar imágenes propias, lo más frecuente es recurrir a servicios de hosting gratuito, como éstos:

·        http://imageshack.us 

·        http://photobucket.com (requiere registro)

·        http://www.supload.com 

     Enlaces

Muchas veces deseamos compartir con otros alguna página, ya sea por ser un recurso útil de consulta, o el sitio de descarga de algún buen programa, o… simplemente por interés. Siempre se puede escribir la dirección, y dejar que el interesado la copie y pegue en la barra de direcciones de su navegador. Pero, como muchos de nosotros sabemos, existe una forma más práctica: los enlaces. Esos pedacitos de texto del estilo “click aquí”, que con sólo presionarlos te llevan a la página que deseas. La pregunta de muchos es, ¿cómo se hace eso?

La etiqueta que se usa es <a>. Esa a inicial indica que se trata de un enlace, pero aún falta especificar al menos dos cosas:

·        El tipo de destino (página web, archivo o correo electrónico). Lo trataremos con detalle más adelante.

·        La ubicación destino.

Estos dos puntos se engloban con el parámetro href, así:

<a href=”ruta de archivo”>

La ruta de archivo se compone de dos partes, cada una indicando uno de los puntos que enlistamos más arriba, el tipo de destino y la ubicación. Veamos un ejemplo:

<a href=”http://www.configurarequipos.com”>

El prefijo http:// indica el tipo de destino, en este caso una página web. Además de éste, existen dos tipos más:

file:/// (archivo de disco duro)

mailto: (correo electrónico)

De este modo tenemos un total de tres tipos diferentes de destino a elegir. Sin embargo, el más utilizado por fuerza en foros es el http://, página web. No puede usarse el tipo file:///, ya que es imposible enlazar desde internet a un archivo de disco duro, sin mencionar los peligros que entrañaría el permitir libre acceso a tu sistema a cualquier extraño. Y el tipo mailto no es recomendable en foros, ya que si se usa este tipo de enlace la dirección de correo enlazada se vuelve un cebo dorado para los spammers, y el buzón no tardaría en verse lleno a reventar de correo basura. Su uso es, pues, de todo punto desaconsejable. Si se desea compartir una dirección de correo electrónico en un foro, lo más sensato es hacerlo vía PM (mensaje privado), y únicamente a gente de confianza.

No obstante son poco usados, no está de más ver un ejemplo de cada uno, sólo a título informativo:

________________________________________

Archivo de disco duro:

<a href=”file:///C:\Documents%20and%20Settings\ibm\Mis%20documentos\HTML%20para%20foros.doc”>

Aquí hay algo raro, ¿cierto?, Esos “%20”. Observando con un poco más de detalle, puede verse que esos %20 están exactamente donde deberían ir espacios. Es decir, en vez de:

“Documents and Settings”

Tenemos:

“Documents%20and%20Settings”

Exacto. En HTML se deben reemplazar los espacios por “%20”, de otro modo no funcionará bien.

__________________________________________

Correo electrónico:

<a href=”mailto:hector@ejemplo.com”>

Está de más decir que, al menos a la fecha en que escribo, no tengo dirección de correo en un dominio “configurarequipos”. Y aún si después la tuviera, no llevaría ese nombre. Todo sea por protegerse de los spammers…

Sin embargo, pese a tratarse de una dirección completamente falsa, sirve perfectamente para la demostración, por una razón muy sencilla: lo único que hacen enlaces de este tipo es agilizar la preparación del correo, NO enviarlo. Al presionar un enlace de estos, simplemente se abre el gestor de correo que tengamos predeterminado (Outlook, generalmente), mostrando en el campo correspondiente la dirección indicada en el enlace (hector@ejemplo.com). Falta que nosotros escribamos el asunto y el texto del mensaje, y, por supuesto, enviarlo.

Pero las posibilidades no terminan ahí. Podemos preparar el enlace de forma que al abrirse el editor de correo muestre también escrito el asunto. ¿Cómo se hace? Simple, se agrega un texto especial para indicarlo, así:

<a href=”mailto:hector@ejemplo.com?subject=Sugerencias sobre el manual”>

De este modo, el gestor de correo mostraría como dirección “hector@ejemplo.com” , y como asunto “Sugerencias sobre el manual”. Por supuesto, siempre cabe la posibilidad de cambiar el contenido de estos campos en el gestor de correos. Lo único que pretende este enlace a correo electrónico es facilitar un poco el trabajo.

______________________________________________

Aún nos quedan algunos ases bajo la manga. Por ejemplo, para mostrar un pequeño título al colocarse el puntero del ratón sobre el texto del enlace (llamado “info de pantalla”), agregamos el parámetro title, así (aplica para los tres tipos de enlace):

title=”Sugerencias”

Por dar un ejemplo. Al concluir el capítulo veremos cómo queda completamente terminado.

Ahora bien, algunas veces tenemos problemas porque nuestros enlaces a páginas web se abren en la misma ventana donde clickeamos el enlace. En ocasiones se hace necesario no perder la página original, por una u otra razón. Por supuesto, este problema no existe en el caso de file:/// y mailto:, ya que ninguno de los dos se abre en el navegador, sino en otros programas. Puede ser el gestor de correo, en el caso de mailto:, o el programa necesario para abrir el archivo al que se enlaza (Word, PowerPoint, Excel, dependiendo del tipo de archivo), en el caso de file:///. Pero cuando se trata de http://, ¿cómo se hace para indicar al navegador que abra el enlace en una ventana nueva? Así:

target=”_blank”

Hasta aquí hemos visto cómo manipular la etiqueta de apertura del enlace. La etiqueta de cierre no necesita mayor explicación. Como ya se dijo antes, simplemente se indica qué etiqueta se está cerrando, así:

</a>

sin importar la información extra que contenga la etiqueta de apertura.

Ya tenemos todas las piezas, ahora formemos el rompecabezas. Utilizaremos el tipo http://, que es el más utilizado, para agregar además las características que le son exclusivas. Puede incluso agregársele formato, para hacerlo resaltar aún más. El siguiente es el código para un enlace a la página principal de ConfigurarEquipos.com, con info de pantalla, que se abrirá en una ventana nueva al presionarlo, y en negrita y cursiva:

<b><i><a target= “_blank” title=”ConfigurarEquipos.com” href=”http://www.configurarequipos.com”>Pulsa aquí</a></i></b>

Pongámoslo a funcionar:

Pulsa aquí

(Si se visualiza este manual como “.doc” y no como “.htm”, será necesario acceder a las propiedades de Hipervínculo para comprobar la info de pantalla)

Así puede verse cómo se acomodan las piezas. Si el tipo de enlace cambia, o se quiere quitar alguna característica, basta con remover o reemplazar el código correspondiente.

Sí, los enlaces de texto son útiles. Pero hay quien prefiere usar imágenes. ¿Se pueden utilizar imágenes como enlaces? Por supuesto, simplemente se reemplaza el texto (por ejemplo, el típico “Pulsa aquí”) con una etiqueta de imagen, así:

<a target=”_blank” title=”ConfigurarEquipos.com” href=”http://www.configurarequipos.com”><img src=”http://www.configurarequipos.com/foronum26-0/logo-rot3.gif”></a>

Pruébenlo, y verán.

Con esto terminamos nuestro minicurso. Espero les haya sido útil. Para cualquier duda o sugerencia, estoy disponible a través de ConfigurarEquipos.com.

Hasta la próxima.