Manual de HTML de Textbroker

Nuestro compañero Alex, de Textbroker USA, ha redactado esta guía para ayudar a todos los
autores a redactar textos empleando tags de HTML. Como habréis comprobado muchos de
vosotros al participar en el concurso, en muchas ocasiones no es tan fácil como parece ni tan difícil
como lo pintan. Sigue los consejos de Alex y HTML ya no tendrá secretos para ti.

¡Hola! Mi nombre es Alex y trabajo en el departamento de Servicios al Autor de Textbroker

respondiendo preguntas técnicas y proporcionando soporte a nuestros autores, entre otras tareas.
Sin la menor duda, la pregunta técnica más frecuente que recibimos es “¿Cómo hago un _______
en HTML?”. Estas preguntas son siempre interesantes para mí. Estoy bastante al día en cuestiones
técnicas y estudio Programación y Diseño Web como hobby, por lo que el lenguaje técnico y el
lenguaje de la Web son sencillos para mí. Sin embargo, muchos de nuestros autores no tienen
formación en codificación web y no disponen de tiempo para aprender un nuevo lenguaje, por ello
siempre tengo que redactar respuestas aproximadas por si alguien no tiene experiencia en este
tipo de temas.

Con esto en mente, me dispuse a crear un manual en el que nuestros autores pudieran encontrar
rápidamente referencias cuando tuviesen alguna duda sobre HTML. Me comprometo a no utilizar
terminología compleja, a no realizar analogías complicadas y a deciros de una forma directa cómo
hacer exactamente lo que estéis intentando realizar. Simplemente busca abajo para encontrar tu
“tag” (o etiqueta) y, voilà: ¡instrucciones fáciles de seguir!

¿Cómo funciona HTML?

HTML es el lenguaje empleado en los sitios web. Las páginas web se conciben para ser claras, con
documentos fáciles de leer, pero aparecen en todas las formas y tamaños posibles. ¿Cómo le dirías
a una página web donde va una imagen? ¿Cómo le dirías que hiciera una tabla y la pusiera en
algún lugar? Bueno, necesitarías un código especial para ello. Y ese código se llama HTML.

HTML se aplica a un documento de texto normal utilizando pequeños códigos llamados "tags" para
presentar una página web en tu pantalla. Si acabas de escribir una página web en formato de
texto, este se mostrará como un texto plano, sin fondo, sin negrita ni cursiva, sin imágenes y sin
fuentes modernas. Las etiquetas le ordenan a tu navegador hacer todas estas cosas para
configurar la página y el texto.

Una simple etiqueta tiene esta apariencia:

<b>¡Hola, chicos!</b>

Esto aparecerá como:

¡Hola, chicos!

Todas las etiquetas quedan encuadradas en corchetes angulares pequeños: “<”y”>”. Todo lo que
esté dentro “<”y”>” se lee como un código, por lo que no se mostrará en pantalla. Esto significa
que cualquier cosa que introduzcas dentro de los corchetes no aparecerá en la página web. En
lugar de esto, le dirá a la página web que haga algo.

Las etiquetas “<b>” le ordenan al navegador que comience a representar algo. La etiqueta “</b>”
le ordena parar. Si no le dices que pare, lo seguirá haciendo hasta el final del documento. Por eso,
como norma, siempre hay que decirle que pare. Las etiquetas diferentes tienen diferentes efectos.
En este caso, la etiqueta <b> convierte el texto en negrita. La mayoría de las etiquetas son una
abreviatura de su efecto, por lo que <b> se utiliza para la negrita (bold en inglés), <i> para la
cursiva (italic en inglés) y <u> se usa para subrayar (underline en inglés). Hay una lista completa
más abajo, así que no voy a entrar en demasiados detalles. También puedes combinar las
etiquetas de esta forma:

<b><i><u>Negrita, cursiva y subrayado: ¡todo al mismo tiempo!</u></i></b>

Negrita, cursiva y subrayado: ¡todo al mismo tiempo!

¿Cuándo debo usar HTML?

Para Textbroker, la respuesta es simple: cuando el cliente lo pida. Muchos de los artículos escritos
a través de nuestro servicio tendrán que ser adaptados para la Web, por lo que los clientes suelen
pedirte que formatees el artículo de una forma particular e incluir algo del código HTML para que
el texto quede bonito y satisfaga sus necesidades.

Por favor, no incluyas HTML cuando no se solicite. ¡Muchas órdenes no se publican directamente a
la web! En realidad, HTML no se utiliza fuera de la Web, por lo que el cliente tendrá que recortar
los códigos o te solicitará una revisión. Y habrás perdido un montón de tiempo añadiendo cosas
que no necesitaban estar ahí en primera instancia…

Hay también dos etiquetas que no necesitas poner cuando escribes para Textbroker: <p> y <br>.
Estas dos etiquetas son simplemente códigos para un salto de línea y para el doble espacio de
línea, respectivamente, y Textbroker ya lo hace de forma automática por ti. Utiliza estas dos
etiquetas solo cuando el cliente lo solicite.

Guía Rápida

A continuación se muestra una lista de etiquetas, clasificadas según lo que quieras hacer. Elimina
los espacios anteriores y posteriores a los corchetes para que el código funcione. Los códigos
HTML siempre deben estar en minúsculas.

Bien, yo quiero…

Convertir el texto en negrita: < b > o < strong >

Coloca < b > y < /b > al principio y al final del texto. Ejemplo:
¡Este texto está en <b>NEGRITA!</b>

¡Este texto está en NEGRITA!

<strong> y </ strong> tienen las mismas funciones que <b> y </b>.

Consejo de Textbroker: ¡nuestro procesador de textos en el sitio web dispone de un botón para
facilitarte esta tarea! Es el botón "B". Selecciona el texto y haz clic en el botón para convertir el
texto en negrita.

Convertir el texto en cursiva: <i>

Coloca <i> e </ i> al principio y al final del texto. Ejemplo:

Este texto está en <i> cursiva </i>

Este texto está en cursiva.

Consejo de Textbroker: ¡nuestro procesador de texto dispone de un botón para facilitarte esta
tarea! Es el botón "I". Selecciona el texto y haz clic en el botón para convertir el texto en cursiva.

Subrayar un texto: <u>

Coloca <u> y </ u> al principio y al final del texto. Ejemplo:

Este texto está <u> subrayado </u>.

Este texto está subrayado.

Consejo Textbroker: ¡nuestro procesador de texto dispone de un botón para facilitarte esta tarea!
Es el botón de "U". Selecciona el texto y haz clic en el botón para subrayar el texto seleccionado.

Hacer un encabezado: <h1>, <h2>, <h3>, <h4> <h5> y <h6>

Los códigos de encabezado se utilizan generalmente para títulos y subtítulos. La mayoría de los
clientes te dirán cuáles usar. Lo que realmente hacen estas etiquetas es agrandar el texto. La
etiqueta h1 es la que agranda el texto lo máximo posible y se usa generalmente para los títulos. La
etiqueta h2 es la siguiente más grande después de la anterior y se utiliza generalmente para los
subtítulos. Las demás, h3, h4, h5 y h6 también se pueden solicitar y cada una es más pequeña que
la anterior.

Para insertar un encabezado:

<h1>Historia de dos ciudades</ h1>

Y esto se convierte en:

Historia de dos ciudades

He aquí un ejemplo del uso de las demás etiquetas "H":

¡H2 es grande!

H3 es medio.
H4 es normal.

H5 es pequeña.

H6 es la más pequeña.

Nota de Textbroker: en nuestro sitio web, las etiquetas H1 se resaltan en texto anaranjado en la
pantalla de vista previa. ¡Esto es normal!

Hacer una lista numerada: <ol>

"ol" equivale a "lista ordenada" (ordered list en inglés). En primer lugar, coloca el código <ol> para
comenzar la lista:

<ol>

Luego, para cada entrada de la lista, utiliza la etiqueta <li> y, a continuación, añade el texto. "LI"
significa "elementos de la lista" (list items en inglés)

<li> Primer elemento

<li> Segundo elemento

<li> Tercer elemento

Concluye la lista con la etiqueta </ol>. El resultado final debería parecerse a esto:
<ol>

<li> Primer elemento </li>

<li> Segundo elemento </li>

<li> Tercer elemento </li>

</ol>

Cuyo resultado será:

1. Primer elemento

2. Segundo elemento

3. Tercer elemento

¡Este código añade los números por ti, por lo que no hay necesidad de preocuparse por la
enumeración!
Consejo de Textbroker: ¡nuestro procesador de texto dispone de un botón para facilitarte esta
tarea! Es el botón “Lista Numerada” (List Item en el procesador de Textbroker). Haz clic en el
botón e introduce los elementos de la lista de uno en uno: se insertará el código donde se
encuentre tu cursor.

Hacer una lista con viñetas: < ul >

"ul" equivale a "lista desordenada". En primer lugar, inserta el código < ul > al comienzo la lista:

< ul >

Después, para cada entrada de la lista, utiliza la < li > y tras esto añade el texto. Las letras "li"
equivalen "listado de elementos".

< li >Viñeta uno

< li >Viñeta dos

< li >Viñeta tres

Concluye el listado con < /ul >. El resultado final debería parecerse a esto:

< ul >

< li >Viñeta uno

< li >Viñeta dos

< li >Viñeta tres

< /ul >

Y aparecerá como:

Viñeta uno

Viñeta dos

Viñeta tres

Consejo de Textbroker: ¡nuestro procesador de texto cuenta con un botón para facilitarte esta
tarea! Es el botón “Listado de Viñetas” (en el procesador de Textbroker, Bulleted List). Haz clic en
el botón e introduce los elementos de la lista de uno en uno: se insertará el código donde se
encuentre tu cursor.

Crear un vínculo: < a href="…" >

"A" equivale a “ancla” (anchor en inglés), pero en realidad significa “vínculo” o “enlace”. No me
preguntes por qué… Es uno de esos misterios sin resolver. "Href" es la abreviatura de hypertext
reference en inglés, que en español significa “referencia de hipervínculo”, y en aras de la
brevedad, no explicaré exactamente cómo llegó a ser así. Esto es lo que tienes que hacer para que
funcione:

Un vínculo tiene dos partes. Tienes el texto del vínculo y la dirección web a la que te lleva cuando
haces clic en él. Digamos que tengo esta frase:

Por favor, visita la página de inicio de Textbroker

Me gustaría hacer que las palabras “página de inicio de Textbroker” se convirtieran en un enlace
que te dirija a www.textbroker.es. Para hacer tal cosa, comienza con la etiqueta < a href="…" > y
coloca la dirección de la página web en el campo href="…". Incluye siempre la dirección completa,
incluyendo "http://" o "https://":

< a href="https://www.textbroker.es" >

Después, coloca el texto que te gustaría mostrar a tu lector:

< a href="https://www.textbroker.es" >página de inicio de Textbroker

Y finalmente, cierra la etiqueta con < /a >. No repitas la referencia de hipervínculo.

< a href="www.textbroker.es" > página de inicio de Textbroker < /a >

En una frase:

Visita nuestra < a href="https://www.textbroker.es">página de inicio de Textbroker< /a>

Y se parecerá a esto:

Por favor, visita la página de inicio de Textbroker

Consejo de Textbroker: ¿confuso con respecto a lo que es el hipervínculo de referencia? Yo

también. ¡Nuestro procesador de texto tiene un botón para facilitarte esta tarea! Es el botón que
se parece a un eslabón de una cadena. Selecciona el texto que quieres convertir en un enlace, haz
clic en el botón y pega la dirección de la web en la casilla que aparezca.
Hacer una tabla < table >

¿Recuerdas cuando te dije que tenías que decirle a tu ordenador cómo presentar la página web?
Las tablas son un buen ejemplo de ello. Las tablas no son complicadas, ¡pero a simple vista
asustan! Sigue las instrucciones que siguen a continuación, paso a paso, para cada elemento de la
tabla y deberías obtener un magnífico resultado.

Cada tabla comienza con la etiqueta < table > y termina con la etiqueta < /table >. La mayoría de
las tablas requieren un borde, así que pon un border="1" en la etiqueta de tu tabla como se
muestra a continuación. ¡Las comillas son necesarias! Cada tabla se divide en filas. Comienza una
nueva fila con la etiqueta < tr >. Termina cada fila con la etiqueta < /tr >. La etiqueta “tr” equivale
a “fila de la tabla”, y toma sus siglas del inglés table row.

Cada fila se divide en celdas que contienen el texto, al igual que las celdas de una hoja de cálculo.
Utiliza la etiqueta <td> para indicar una nueva celda.

La etiqueta “tr” representa a algo obtuso, pues significa “celda de la tabla”. ¡Confía en mí!

Para construir una tabla, coloca la etiqueta < table > donde quieras que comience la tabla.
Después, añade una fila con < tr >. Añade tantas celdas como quieras en esa fila con las etiquetas <
td > y < /td >. A continuación, cierra la fila con la etiqueta < /tr >. Un ejemplo que te ayudará a
visualizarlo:

< table border="1" > [¡La tabla comienza aquí!]

< tr > [Primera fila]

< td >¡Hola a todos!< /td > [Primera celda de la fila 1]

< td >¡Esta es la tabla!< /td > [Segunda celda de la fila1]

< /tr > [final de la primera fila]

< /table > [final de la tabla]

Esta es una tabla sencilla de una sola fila. Obviamente, lo que hay dentro de los corchetes son mis
notas. ¡Así que no las metas dentro de tu tabla! Esta debería parecerse a esto:

¡Hola a todos!

¡Esto es una tabla!

Para añadir otra fila, añade otra etiqueta <tr> y agrega las celdas:

< borde de la tabla="1">

< tr >

< td >¡Hola a todos!< /td >

< td >¡Esto es una tabla!< /td >

< /tr >

< tr >

< td >Es la hora de la segunda fila.< /td >

< td >¡He utilizado una < b >etiqueta de negrita< /b > dentro de una tabla!< /td >

< /tr >

< /table >

¡Hola a todos!

¡Esto es una tabla!

Es la hora de la segunda fila.

¡He utilizado una etiqueta de negrita dentro de una tabla!

Sencillo, ¿no? Mientras construyas las tablas insertando una fila cada vez, no representarán
ninguna amenaza. Simplemente continúa ordenando las filas y las celdas hasta que hayas
terminado y asegúrate de que cada etiqueta tiene su etiqueta compañera < /tag >.

Solución de problemas

¡Algunos de mis textos se han perdido o están en el lugar equivocado! ¡La tabla es un desastre!

Algunas de estas dos cosas ha sucedido: o bien colocaste texto sin la etiqueta de la celda (< td >) o
no cerraste una etiqueta con su etiqueta compañera < /tag >. Vuelve al principio para terminar y
asegúrate de que tu tabla tiene la etiqueta para tabla < /table >, todas tus filas tienen sus
etiquetas < /tr > y todas tus celdas tienen las etiquetas para crear celdas < /td >.

Consejo de Textbroker: puedes usar la nueva función “Pegar desde Word” (en el procesador de
Textbroker, Paste from Word) para añadir tablas. Realiza tu tabla en un documento de Word,
copia la tabla y después haz clic en el botón Paste from Word que se parece a un portapapeles azul
con una “W” impresa. Pega la tabla en la casilla y pulsa Ok para aceptar. El código para la tabla
debería insertarse donde estaba tu cursor. Esto solo funciona con Microsoft Word, ya que otros
procesadores de textos generarán un resultado completamente inesperado, ¡así que mejor no
probarlo!

Agregar una etiqueta meta: <meta… >

Una etiqueta meta proporciona a los navegadores web información adicional sobre la página web.
Las etiquetas meta nunca se muestran. Estas etiquetas son sencillas y, por lo general, el cliente
solicitará la etiqueta que necesite. Este es el formato:

<Meta TYPE = "la información va aquí">

Cambia el TYPE dependiendo de lo que quieras hacer. El uso de comillas es obligatorio. Cada tipo
de etiqueta meta tiene un propósito diferente. Las dos etiquetas meta más comunes son las
etiquetas de descripción (description tags), que proporcionan una descripción de la página web
para Google, y las etiquetas de las palabras clave (keywords tags), que proporcionan algunas
palabras clave que sirven de referencia para los motores de búsqueda.

<Meta description = "La descripción del artículo que aparece en el enlace de Google va aquí." >

<Meta keywords = "palabra clave1, palabra clave2, palabra clave3, palabra clave4, etc.">
Estas etiquetas no aparecerán en la pantalla de vista previa. Todavía están allí, en el fondo, pero el
objetivo de estas etiquetas es proporcionar información al navegador web sin que aparezcan, así
que no te sorprendas cuando no las veas, porque están cumpliendo su función.

¡Socorro! ¡Todo mi documento está en negrita, en cursiva, en subrayado o es un enlace!

Probablemente te olvidaste de cerrar la etiqueta. Si simplemente escribes <b> en alguna parte del
texto, tu navegador no sabrá cuándo parar de convertir el texto en negrita, por lo que el resto del
texto desde ese punto se enriquecerá también en negrita. Normalmente, esto no es lo que se
pretende. Encuentra el punto de partida, busca la etiqueta en tu código y coloca </ b> </ i> </ u> o
</ a> donde quieras que el formato que se detenga.

En ocasiones, el cliente se olvidará de cerrar una etiqueta en sus instrucciones, por lo que si todo
el documento está en negrita y tú no lo has codificado, ¡tranquilo, que no has hecho nada mal! Por
favor, en este caso hazle saber al cliente lo que probablemente ha ocurrido a través del sistema de
mensajería interno de Textbroker.

Este manual recoge los códigos HTML más comunes. Espero que este blog te haya parecido
informativo y puedas hacer un buen uso de él para la realización de tu trabajo a través de nuestro
servicio. Hay muchos códigos que no recojo aquí, pero todos los códigos funcionan prácticamente
de la misma forma y con una simple búsqueda en Google de las etiquetas solicitadas obtendrás
una buena cantidad de información. ¡Gracias por leerme! Espero que todas tus tablas te salgan
perfectas en tu primer intento, ¡aunque las mías nunca suelen serlo!