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:

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 >

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!