LINUX GNU BLOG

Software libre y diseño web
Dic202013

Convertir HTML a texto plano

Cuando vamos a publicar en nuestro blog un código html, o mostrarlo en un comentario, a veces necesitamos convertirlo a texto plano para que el navegador no interprete dicho código. Puedes hacerlo on-line con nosetup.org

Si no quieres usar el servicio on-line, se puede hacer manualmente sustituyendo los caracteres menor que y mayor que por sus entidades html:

&lt; para <
&gt; para >

Por otro lado, el código convertido a texto plano puede ir entre las etiquetas:

<code> </code>

Pero cuando las lineas de código son, por ejemplo, demasiado largas se puede perder formato y puede que se vea el código con líneas partidas, espacios de más o de menos, etc.

Para mantener el formato, podemos añadir las etiquetas:

<pre> </pre>

Por lo que una buena forma de escribir nuestro código convertido a texto plano es la siguiente:

<pre>
<code>CÓDIGO CONVERTIDO A TEXTO PLANO</code>
</pre>

Política de comentarios

Dada la importancia de los comentarios como espacio de participación, te pedimos por favor que leas detenidamente y cumplas con las siguientes normas de participación.

13 respuestas para “Convertir HTML a texto plano

Liher

Yo, cuando quiero poner codigo html o css o comandos para la terminal, siempre lo pongo entre las etiquetas y va perfecto, ademas el tema que uso tiene ccs para esas etiquetas y queda muy bien, buen apunte, un saludo


José Miguel

En la mayoría de los casos no es necesario convertirlo a texto plano, pero…

Ignoro si en tu plantilla obtienes otro resultado, pero intenta publicar el código final del post solo entre las etiquetas html.

<pre>
<code>CÓDIGO</code>
</pre>

Observa el resultado:

CÓDIGO


Liher

Hola, he probado a poner las dos opciones siguientes:

"código--"
“código–”

En ambos casos aparece exactamente lo mismo, el texto y caracteres entre las etiquetas igual sin autoformato, salvo que usando la etiqueta “pre” mi tema tiene un estilo css definido y aparece con fuente diferente y un color de fondo, ademas de un simbolo, “”, que indica que lo que hay dentro es codigo.

He probado a ponerlo en una pagina html simple, solo con esas dos lineas en el body y el resultado es igual, solo tengo que poner una de ellas y lo que aparece entre las etiquetas no se altera.

Tengo que decir que cuando yo voy a introducir codigo en WordPress primero pongo la etiqueta “”, luego el codigo que quiero poner y finalmente cierro “” pero lo escribo en la pesataña de “texto” en vez de en la de “Visual”.

Hasta ahora siempre me ha funcionado bien. Un saludo y gracias 😀


Elías R.M.

Hola Liher y José Miguel, por lo que veo, me da la sensación de que cada uno está hablando de una cosa diferente.

Este post se refiere a como publicar código HTML en nuestro post, sin que el navegador lo interprete como código, es decir, que lo muestre como si fuera texto plano.

Cuando estamos escribiendo un post en “visual”, cualquier carácter especial como <, el editor lo escapará para que se muestre como texto plano. Pero si estamos escribiendo en “texto”, el editor no hará nada, por lo que, si lo que escribimos es una etiqueta HTML, el navegador la entenderá como tal y no se verá esa etiqueta como texto plano.

Como ejemplo voy a escribir el mismo código escapado y sin escapar.

Código escapado:

<pre><code>HOLA MUNDO CRUEL</code></pre>

Código sin escapar:

HOLA MUNDO CRUEL

Como se puede ver, en el primer caso se pueden leer las etiquetas HTML, mientras que el segundo caso solo se ve la frase “HOLA MUNDO CRUEL” sin las etiquetas que la rodean, que en lugar de ser mostradas, están siendo interpretadas por el navegador y este le ha aplicando los estilos correspondientes.

P.D. Hemos editado el post, ampliando las explicaciones, para intentar ser mas claros y evitar confusiones. Gracias.


Liher

Gracias por la explicacion Elias, yo queria decir lo mismo que tu, mas o menos, pero me fui por otros derroteros.

Esta bien tener usuarios como tu que participan y ayudan, un saludo 😀


José Miguel

Elias, ademas de usuario, es redactor, administrador y creador de la plantilla del blog…
Saludos.


Liher

Perdon, no lo sabia, mis respetos a Elias, y felicidades por el blog, está genial


isaac

Hola, tengo unas dudas sobre este tema de texto plano, os cuento:

———-
Como bien dice en el articulo los archivos de texto plano, son aquellos formados exclusivamente por texto (sólo caracteres), sin ningún formato, no hay información sobre el tipo de letra, ni formas (negrita, subrayados…), ni tamaños.
———-

Por ejemplo si abrimos un archivo html en el block de notas podemos ver ese archivo en texto plano verdad, hasta ahí todo bien. Pero si ahora quisiéramos mostrar en un artículo en la web ejemplos sobre por ejemplo el uso de la etiqueta span, tendríamos que convertir ese código a texto plano “otra vez” y seria sustituyendo los caracteres < signo de menor que y <signo de mayor que por sus entidades < >

Como se puede comprobar aquí, yo por lo menos me liaría y no sabría cuál es entonces el texto plano de los dos o si incluso si son los dos (que es lo que creo). Ya que si primero abrimos un archivo html en el block de notas obtenemos el texto plano y ahora si queremos mostrarlo en nuestra web a modo de ejemplo tendríamos que convertirlo a texto plano “otra vez” pero ahora con sus entidades ya que si no esos tag dentro se ejecutarían como código html.

¿Un archivo de html contiene dos texto plano por decirlo así? Uno se obtiene al visualizarlo en el block de notas por poner un ejemplo, ver código fuente… y el otro es una conversión de ese texto plano html a otro texto plano para sustituir los caracteres por si quisiéramos mostrarlo en un web.

Texto plano:

Documento sin título

prueba texto plano

Texto plano convirtiendo caracteres de tag en entidades:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>

</head>

<body>
<div>
prueba texto plano
</div>
</body>
</html>

Puede que me haya liado un poco al explicarme sobre este asunto, espero que se me haya entendido.


isaac

no se puede copiar en los comentarios el mismo ejemplo pero con las entidades de signo de mayor que por sus entidades

bueno, pues en un ejemplo se obtendría el codigo html en texto plano y el otro es ese mismo codigo convertido a texto plano otra vez pero con las entidades.


José Miguel

A ver, estamos hablando de publicar código html en un post o comentario. Si hacemos eso sin más, el navegador interpreta el código, pero no es eso lo que queremos. No es solo un texto plano sin formato, al tratarse de código html, debemos sustituir los caracteres mayor y menor por sus entidades html.

Saludos.


isaac

Creo que no me has aclarado mucho sobre mi pregunta. Lo que me has respondido lo se, ya que lo he puesto en mi comentario.
Lo que quiero confirmar es que en verdad cuando pones un codigo html para poner sus entidades por ejemplo en un convertidor online (http://nosetup.org/php_on_line/convertir_html_texto), lo que estas haciendo no es Convertir HTML a texto plano sino, poniendole estas entidades a ese texto plano, ya que ese texto que vas a convertir ya es texto plano.

Si leemos esto sobre que es un texto plano puedes hacerte una idea de lo que quiero darte a entender:
https://es.wikipedia.org/wiki/Archivo_de_texto

wikipedia:
Un archivo de texto simple, texto sencillo o texto sin formato (también llamado texto llano o texto simple; en inglés «plain text»), es un archivo informático que contiene únicamente texto formado solo por caracteres que son legibles por humanos, careciendo de cualquier tipo de formato tipográfico.1……


José Miguel

Mi respuesta anterior comienza con lo siguiente:
A ver, estamos hablando de publicar código html en un post o comentario…

Eso significa que en un post o comentario, el texto tiene formato, nunca es plano. De no ser así, sería innecesaria una acción adicional. La dificultad es que partes de un error, das por hecho que el texto es plano cuando eso no sucede en un blog o web. Prueba a copiar y pegar un texto plano en un post o comentario y, comprobarás que deja de ser plano y pasa a tener el formato propio del blog o web.

Saludos.


Elías R.M.

Vamos a ver, voy a explicar un par de conceptos muy simples que espero aclaren las dudas.

Texto plano, como bien cita isaac de wikipedia es:

Un archivo de texto simple, texto sencillo o texto sin formato (también llamado texto llano o texto simple; en inglés «plain text»), es un archivo informático que contiene únicamente texto formado solo por caracteres que son legibles por humanos, careciendo de cualquier tipo de formato tipográfico. […]

Por lo que no podemos llamar texto plano a un documento odt o doc, pues en el documento no solo se almacena el texto, sino su formato.

Bien, ahora veamos lo que es un HTML. Aunque lo podamos lo abrir con el bloc de notas y podamos “leer” su contenido, no se puede considerar texto plano, pues no solo contiene texto, sino marcas que definen posición y formato (que puede ser enriquecido con la ayuda de los estilos CSS). Lo que sucede es que, al contrario que en un doc, todas las marcas de formato se representan con caracteres legibles (imprimibles), en lugar de con valores binarios (no imprimibles).

Al usar caracteres normales para definir el formato, aparece un problema. Estamos “reservando” determinados caracteres o combinaciones de caracteres para formatear el texto. ¿Y que pasa si queremos que nuestro texto incluya esos caracteres?

Para solucionar ese problema, entra en juego una técnica que se llama “escapado de caracteres”. HTML define unas secuencias de caracteres que se pueden usar para para indicarle al navegador que queremos que muestre un carácter concreto, ignorando su posible significado.

Por ejemplo, si estamos escribiendo un tutorial sobre HTML en HTML, que no es texto plano, y queremos escribir <pre>, no podremos escribirlo “tal cual”, pues el navegador lo interpretará como una marca, en lugar de como texto. Por lo que tenemos que “escapar” los caracteres especiales para indicarle al navegador que no queremos que interprete esa parte como una marca HTML. Así que en lugar de escribir <pre>, escribimos su versión escapada &lt;pre&gt;

De forma “incorrecta”, en el mundo web se suele decir “convertir a texto plano”, en lugar de “escapar a caracteres” para referirse a lo que acabo de explicar y que espero que puedan entender.

Saludos


Deja un comentario

Tu dirección de correo electrónico no será publicada.