¿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ápidaA 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 ciudadesHe 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 elementoConcluye 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 elemento2. Segundo elemento3. 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 tresConcluye 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
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