A ver: entras a un blog, te parece interesante y decides dejar un comentario.

Justo encima de la casilla donde debes escribir el contenido, te encuentras algo así como…

 

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. Sí, eso a lo que hace referencia lo que pone más arriba.

Si quieres saber como usar el HTML para que tus comentarios en otros blogs se vean mejor y sean más completos, sigue leyendo…

¿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í.

Su nombre es el acrónimo de Hypertext Markup Language: Lenguaje de Marcado de Hipertexto. No voy a entrar en muchos detalles pero, en mayor o menor grado, todas las páginas web de Internet están construidas con él.

Para ver un ejemplo de página web, tan sólo tienes que entrar a una cualquiera y clic derecho en cualquier parte > Ver código fuente de la página (en Firefox; de verdad que no me acuerdo si se hace así también en Internet Explorer). Se te abrirá una ventana más o menos como la que está debajo. Eso es HTML.

¿Y que tiene que ver el HTML con escribir un comentario?

Para añadir características especiales (formato) al texto de un comentario en un blog, se suele usar el HTML. La mayoría de los sistemas de comentarios sólo permiten incluir texto plano al que no podemos dar formato. Usando HTML, sí podemos hacerlo. Por ello, vamos a ver primero como funciona.

No, no… que se me da muy mal la tecnología

Pues por eso estás aquí, ¿no? Ya verás, es muy fácil. Tú sigue leyendo para comprobarlo.

¿Qué hace el HTML?

Como el HTML es un lenguaje, lo que hace es comunicarse. En concreto, se comunica con el navegador que abre la página web y le dice como tiene que mostrar lo que tiene que mostrar. Por ejemplo, un código HTML como…

<div align=”center”><img src=”retrato.jpg></div>

… le está diciendo al navegador:

Pon en el centro de la página la imagen llamada retrato, que está en formato JPG.

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

<strong>Hola, gente</strong>

… le está diciendo al navegador…

Pon en negrita la frase “Hola, gente”.

… y en la pagina se verá así:

Hola, gente

¿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. En el último ejemplo se ha empleado la etiqueta strong.

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 como 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…

<strong>Hola, gente</strong>

… nos daremos cuenta de que la etiqueta <strong> 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í…

Hola, gente. Cuanto tiempo.

… el código será:

<strong>Hola, gente</strong>. Cuanto tiempo.

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í…

<strong>Hola, gente. Cuanto tiempo.

… lo que veremos será así:

Hola, gente. Cuanto tiempo.

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

¿Cuántas etiquetas hay? ¿Son muchas?

Sí, son bastantes. 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:

• Poner negritas: <strong>
• Aplicar cursivas: <em>
• Subrayar un texto: <u>
• Enlazar un texto: <a>

Recordemos que esta entrada tan sólo pretende 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. Comprendiendo el funcionamiento de la sintaxis del HTML, luego apenas necesitarás unas pocas cosas más y una buena lista de las etiquetas que existen para poder hacer tu propia web desde cero.

Negritas, cursivas y subrayado

En realidad, conociendo ya como funciona la sintaxis del HTML y sabiendo qué etiquetas dan determinado formato, apenas se necesita nada más. Pero vamos a ver algunos ejemplos para tenerlo más claro.

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

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

Estoy de acuerdo contigo básicamente en todo, aunque algunos puntos no me quedan claros.

… escribiremos:

Estoy de acuerdo contigo <strong>básicamente en todo</strong>, aunque algunos puntos no me quedan claros.

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

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

Estoy de acuerdo contigo básicamente en todo, aunque algunos puntos no me quedan claros.

… escribiremos:

Estoy de acuerdo contigo <em>básicamente en todo</em>, aunque algunos puntos no me quedan claros.

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í…

Estoy de acuerdo contigo básicamente en todo, aunque algunos puntos no me quedan claros.

… escribiremos:

Estoy de acuerdo contigo <strong>básicamente en todo</strong>, aunque <em>algunos</em> puntos no me quedan <u>claros</u>.

Aplicar varios formatos a la misma palabra

Podemos aplicar más de uno de los tres formatos a una misma palabra o varias. 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>. Más claro en este ejemplo. Para que se vea así…

Estoy de acuerdo contigo básicamente en todo.

… escribiremos:

Estoy de acuerdo contigo <strong><em>básicamente en todo.</em></strong>

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

Estoy de acuerdo contigo <strong><em><u>básicamente en todo.</u></em></strong>

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.

Los enlaces

La etiqueta <a> (anchor, ancla) es algo diferente a las anteriores porque necesitamos incluir dentro de ella un atributo que indique la dirección de la página a la que queremos enlazar. Si escribimos simplemente la etiqueta (con su apertura y su cierre), no nos servirá de nada.

El atributo va dentro de la apertura de la etiqueta. El que utilizamos para indicar una dirección web es href=””. Entre las comillas, escribimos la dirección de la página que queremos enlazar, escribiéndola completa, http:// incluido. El atributo lo ponemos así: <a href=””>. El cierre no va con ningún atributo, simplemente es el cierre normal de una etiqueta: </a>.

Vamos con el ejemplo para mayor claridad. Supongamos que queremos enlazar una palabra o varias a este blog, 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í…

En este blog hay tutoriales en cómic y en texto.

… con las palabras este blog enlazadas a Proyecto Autodidacta, escribiremos:

En <a href=”http://www.proyectoautodidacta.com”>este blog</a> hay tutoriales en cómic y en texto.

No importa lo larga que sea una dirección. De hecho, muchas veces son muy largas y con caracteres extraños. No hay problema. Funcionará siempre que la pongas entre las comillas y comenzando con el http://. 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.

¿Esto me vale para cualquier comentario?

Hasta donde sé, la inmensa mayoría de sistemas de comentarios permiten colocar etiquetas de HTML dentro del texto, a pesar de que no lo indiquen expresamente. Creo que no cometo un error si te digo que puedes usarlo siempre que quieras. Y si luego ves que tu comentario no aparece con el formato que pusiste (y estás seguro de que lo pusiste bien)… Pues vaya, para la próxima no utilices HTML en ese sitio.

Pequeños detalles

En esta entrada he obviado algunos pequeños detalles como es la utilización de otras etiquetas, concretamente <b> e <i>, que sirven para lo mismo que <strong> y <em>, aunque con algunas diferencias.

En Desarrolloweb.com explican la diferencia que hay entre ellas:

Nota: ¿Qué diferencia hay entre <b> y <strong>?
Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta <b> indica negrita, mientras que la etiqueta <strong> indica que se debe escribir resaltado. El HTML lo interpretan los navegadores según su criterio, es por eso que las páginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta <H1> quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la práctica los encabezados de Internet Explorer y Netscape son muy parecidos (tamaño de letra grande y en negrita), pero otro navegador podría colocar los encabezados con subrayado si le pareciese oportuno.
La diferencia entre <b> y <strong> se podrá entender ahora. Mientras que <b> significa simplemente negrita y todos los navegadores la interpretarán como negrita, <strong> es una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la práctica <strong> coloca el texto en negrita, pero podría ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el texto.

Yo he decidido realizar esta entrada utilizando las etiquetas <strong> y <em> más que nada por la recomendación del W3C. Sin embargo, puedes emplear <b> e <i> para las mismas funciones.

Si deseas más información, te recomiendo:

• Formateando el texto en desarrolloweb.com
• Etiquetas para resaltar texto en HTML en desarrolloweb.com
• XHTML: Etiquetas de énfasis (STRONG y EM) en Outbook

Si te gustó esta entrada, ayúdame a comprar café para hacer más (por Paypal).