Guía rápida de HTML para comentarios en blogs

Parte 9 de la serie Pequeñas dosis

1: Guía rápida de HTML para comentarios en blogs: introducción 2: Qué es el HTML 3: Qué hace el HTML 4: Cómo funciona el HTML 5: Las etiquetas HTML 6: Negritas, cursivas y subrayado 7: Aplicar varios formatos al mismo texto 8: Cómo enlazar un texto con HTML 9: Dónde usar el HTML 10: Una aclaración final sobre el HTML

ACTUALIZACIÓN: Esta entrada es la versión en formato cómic de la misma que se publicó años atrás con el mismo nombre. Debido a problemas técnicos, la original estaba toda trastocada y llena de errores. Esta versión es más o menos igual, con algunos cambios y puestas al día de lo que se dice. La original se publicó el 14 de agosto de 2008.

TRANSCRIPCIÓN

Guía rápida de para en : introducción

Digamos que entras a un blog, lees un artículo que te parece interesante y decides dejar un comentario.

En la sección donde puedes escribirlo, te encuentras algo así.

Te dices: “Ah, pues vale” y escribes normalmente. Pero… Uhmm… El comentario que está un poco más arriba se ve más chulo, con negritas y enlaces… ¿Cómo lo habrá hecho?

Simple: el comentarista ha usado el HTML al que se hace referencia al inicio del formulario para comentar.

A continuación, vamos a ver como usar HTML para que tus comentarios se vean mejor y más completos.

No todos los blogs admiten el uso de HTML en los comentarios, pero muchos sí lo hacen, incluso aunque no lo especifiquen en los formularios.

Por ello, la aplicación de lo que veremos aquí dependerá de cada blog. Posiblemente funcione en unos sí y en otros no (por no permitir su uso).

Es cuestión de probar. Qué le vamos a hacer.

Qué es el HTML

Lo primero que tenemos que saber es qué es el HTML.

El HTML es un lenguaje de marcado; por decirlo así, algo parecido a un lenguaje de programación pero sin propiedades aritméticas… Dejémoslo ahí.

HTML es el acrónimo de Hypertext Markup Language: Lenguaje de Marcado de Hipertexto. No voy a entrar en muchos detalles pero todas las páginas web están construidas con él, combinado con otros lenguajes y tecnologías.

Para ver un ejemplo de HTML, tan sólo tienes que entrar a cualquier página web, hacer clic derecho en cualquier parte vacía y pinchar en “Ver código fuente de la página” (en todos los navegadores es así). Se te abrirá una ventana similar a esta. Eso que ves es HTML.

Algunos sistemas de comentarios de blogs permiten introducir texto enriquecido (es decir, con formato: negritas, cursivas, etc.). Pero muchos otros solo permiten texto plano.

Sin embargo, si admiten usar HTML, podemos emplearlo para aplicarlo introduciendo un poco de código sencillo. Por ello, vamos a ver primero como funciona el HTML.

Si el código te parece intimidante, no te preocupes: en realidad, es algo muy sencillo. Al conocerlo, estarás dando los primeros pasos para comprender como funciona cualquier página web.

Sigue leyendo, ya verás como es muy fácil.

Qué hace el HTML

Como el HTML es un lenguaje, lo que hace es comunicar. En concreto, comunica al navegador que abre la página web como tiene que mostrar lo que tiene que mostrar.

Por ejemplo, un código HTML como…

Por lo que el navegador muestra…

Vamos con otro ejemplo para que veas lo sencillo que es. Un código como…

… le está ordenando al navegador:

… y en la pagina se verá así.

El código de una página puede ser muy simple o muy complejo. Por ejemplo, este código de aquí…

… es el código de una página web muy sencilla: esta de aquí.

Veamos qué es lo que le dice el código al navegador para que este nos muestre esa página web.

Como título de la página web, pon “Inicio”.

Pon de color rojo el fondo de la página web.

Muestra el texto “Hola, mundo” con el formato de encabezado de tipo 1.

Una vez que hemos comprendido esto, ahora tenemos que saber cómo hablar ese lenguaje. Para ello, debemos conocer las palabras que utiliza y su .

La sintaxis viene a ser la manera en la que colocamos las palabras para que estas formen instruccciones que sean comprensibles para el navegador.

Cómo funciona el HTML

El HTML funciona con etiquetas. Las etiquetas son una serie de palabras y signos especiales que el navegador interpreta como órdenes para mostrar el contenido de la página.

Una etiqueta siempre va entre los signos de menor que y mayor que. Estos signos sirven para que el navegador diferencie entre el contenido normal de texto y lo que es el HTML, que le indica cómo y dónde mostrar ese texto.

Aunque hay algunas excepciones, todas las etiquetas tienen una apertura y un cierre. Si nos fijamos en el ejemplo…

… nos daremos cuenta de que la etiqueta se repite: está al principio y al final de la frase, donde hay una barra / después del signo menor que <.

Esto sirve para que el navegador interprete desde donde y hasta donde debe aplicar la “orden” de la etiqueta. Así, si lo que queremos es que el texto aparezca así…

… el código será:

La apertura de la etiqueta le indica al navegador que debe poner negritas al texto desde la palabra “Hola” y debe dejar de ponerlas después de la palabra “gente”.

¿Y que pasaría si no pusiésemos etiqueta de cierre? Si el código es así…

… lo que veremos será así:

Como no le hemos indicado cuando debe dejar de aplicar negritas, el navegador se lo pone a todo cuanto encuentra desde la palabra “Hola”.

Las etiquetas HTML

El HTML tiene muchas etiquetas. Sin embargo, aquí nos vamos a centrar tan sólo en unas pocas: aquellas que necesitas para darle formato a un texto y para poner un enlace en un comentario. Concretamente, en las necesarias para:

Recordemos que tan sólo pretendo mostrarte como darle formato al texto de un comentario que dejes en un blog. El objetivo no es enseñarte a hacer una página web en HTML.

Sin embargo, todo lo que se está exponiendo aquí te puede resultar útil para muchas otras cosas. Como hacer tu propia página web desde cero.

Para conseguirlo, basta comprender la sintaxis del HTML, que ya hemos visto, junto con otras reglas adicionales. Si luego te haces con una buena lista de las etiquetas que existen, podrás lograrlo sin dificultad.

Incluso si no pretendes hacer ninguna página, también te será útil pues comprenderás las bases sobre las que se asienta la herramienta de Internet más popular: la World Wide Web.

Negritas, cursivas y subrayado

Si queremos aplicar negritas a una palabra o a varias, usaremos la etiqueta strong, poniendo la apertura de la etiqueta antes de la palabra y el cierre después de ella.

Si queremos aplicar cursivas, usaremos la etiqueta em, poniendo la apertura antes de la palabra y el cierre después de ella.

Ejemplo: para que lo que escribamos se vea así…

Para el subrayado es lo mismo, sólo que utilizando la etiqueta u. Veamos un último ejemplo en el que usamos las tres etiquetas.

Para que lo que escribamos se vea así…

… escribiremos:

Aplicar varios formatos al mismo texto

Podemos aplicar más de uno de los tres formatos a una misma parte de un texto. Para ello, sólo hay que abrir una etiqueta detrás de otra.

Pero debemos tener en cuenta una regla: cuando se abren varias etiquetas seguidas, se cierran en el orden inverso al que se han abierto.

Eso quiere decir que si abres primero strong y luego em, al final cerrarás primero em y pondrás al último strong.

Para tenerlo más claro, vamos en un ejemplo. Para que se vea así…

… escribiremos:

Y si queremos poner además subrayado, pues ponemos…

El orden en el que abras las etiquetas de formato no importa. Lo que importa es como las cierres: siempre cierra primero la última que hayas puesto.

Cómo enlazar un texto con HTML

Para enlazar o vincular un texto, usamos la etiqueta a. Pero en este caso, también es necesario un elemento adicional conocido como “atributo”.

Los atributos son elementos con valores que configuran el aspecto o el comportamiento de una etiqueta.

Si escribimos simplemente la etiqueta a, el texto se verá como un enlace, pero al hacer clic en él, no se abrirá ninguna página.

Para poder enlazar el texto, a la etiqueta a debemos añadirle el atributo href.

Los atributos se escriben en el interior de las etiquetas y van seguidos de su valor, el cual se indica entre comillas y tras un signo igual.

Y esto es importante: el atributo se separa del nombre de la etiqueta con un espacio y solo se pone en la apertura de la etiqueta.

En este caso, el valor del atributo href es la dirección de la página web que queremos que se muestre al hacer clic en el enlace.

La dirección debe escribirse completa, incluido el “http://” previo.

Vamos con el ejemplo para mayor claridad. Supongamos que queremos enlazar una palabra o varias a este sitio, Proyecto Autodidacta. La dirección completa es http://www.proyectoautodidacta.com, como podemos ver en la barra de direcciones. Para que nuestro comentario se vea así…

… escribiremos:

No importa lo larga que sea la dirección. Muchas veces son muy largas y con caracteres extraños. No hay problema. Funcionará siempre que la pongas como acabamos de indicar. La forma más eficaz de incluir una dirección es copiándola de la barra del navegador y pegándola entre las comillas cuando estés escribiendo el comentario.

Dónde usar el HTML

Lo que acabamos de ver no puede ser usado en todos los sitios web. Tan sólo en aquellos cuya introducción de texto permita el uso de HTML.

No podemos usar HTML por regla general en las redes sociales. Es posible que haya alguna en la que sí se pueda, pero en las más conocidas, no: Facebook, Twitter o Google+.

La mayoría de los foros suelen permitir el uso de HTML, por lo que podrás aplicar en esos sitios lo que hemos visto aquí.

En cuanto a los comentarios en blogs, lo cierto es que depende de cada uno. Por si acaso, utiliza HTML solo donde se diga de manera explícita que se puede usar.

Aún así, ten en cuenta que las dos plataformas gratuitas de alojamiento de blogs más usadas (Blogger y WordPress.com) permiten HTML en los comentarios, por lo que en ellas puedes usarlo con seguridad.

Hay blogs que utilizan plataformas de terceros para gestionar los comentarios. En la mayor parte de ellas, sí se puede utilizar HTML. Ese es el caso de Disqus, una de las más extendidas.

Una aclaración final sobre el HTML

El HTML no es un lenguaje estático, sino que va evolucionando. Los cambios que recibe son para aprovechar las nuevas tecnologías que van apareciendo.

La organización que se encarga del desarrollo del HTML y de otros estándares para la Web es el World Wide Web Consortium, conocido como W3C.

Actualmente, el HTML se encuentra en su versión 5. Cada vez que hay un cambio de versión, se introducen nuevas etiquetas y hay otras que son declaradas obsoletas.

Que una etiqueta sea declarada obsoleta no quiere decir que los navegadores dejen de interpretarlas inmediatamente.

Pero sí que dejarán de hacerlo en algún momento (aunque tarde en llegar).

Un ejemplo de etiqueta obsoleta es una que hemos visto aquí: u. Aunque todavía se puede usar, se recomienda no hacerlo.

De hecho, se recomienda no usar el subrayado para no confundirlo con enlaces.

Otra etiqueta obsoleta, y que no ha sido incluida aquí, es strike, que mostraba el texto tachado.

El texto tachado servía (y sirve) para hacer un guiño irónico al lector. Como con u, aún se puede usar, pero se recomienda no hacerlo.

Las etiquetas obsoletas se pueden seguir usando. De hecho, aún a día de hoy se siguen utilizando algunas que hace tiempo que fueron declaradas como tales.

Esto durará mientras los navegadores las sigan soportando. Cuando esto ocurra, los efectos de esas etiquetas tan sólo ya no serán visibles aunque el código siga ahí.

Si lo que has leído te resultó útil, ¿por qué no consideras hacer una pequeña donación para que este proyecto siga adelante?

Navega por esta serie<< Qué son las etiquetas (metadatos)
  • j

    Here is a size 5 font

  • Guest

    Órale si funciona</em)

  • fdfdfd@hotmail.com

    hola

  • juan

    si

  • Duende

    De repente como que se me hizo algo tedioso leer todo, pero funciona gracias brother

  • ElTokemon

    Texto tachado

  • hola

  • Marta

    Estoy de acuerdo contigo básicamente en todo.

  • Guest

    Hola.

  • Arg3n1s

    Excelent

  • Eltejans

    Yes

  • Arg3n1s

    Tachar

  • /hola<

  • mmm

  • Railgun

    Pyta

  • monita japonesa kawaii

    kbd>Hola mundo

  • monita japonesa kawaii
  • Indahouse

    hey

  • Indahouse

    hey

  • ZORMAN )(

    gracias

  • Probando

  • Pingback: Trucos para mellorar o que publicamos |()

  • Rush Ven

    my link