Ya me han preguntado en diversas ocasiones cómo publicar código HTML dentro de una entrada. Resulta que si se hace a pedal, el código se interpreta y no se ve, que es precisamente lo que pretendemos cuando queremos explicar cómo cambiar tal o cual cosa.
Con código CSS no hay ningún problema, porque el problema reside principalmente en el uso de los símbolos menor y mayor (< >) que en este último caso no se utilizan. Pero para el lenguaje HTML, estos símbolos son el comienzo de una instrucción y, lógicamente, lo que hace es traducirlo e intentar ejecutar lo que hay en su interior. En nuestro caso, esto provocará que el código que pretendiamos colocar no resulte visible, que nos de un error y, en los peores casos, que traduzca parte sí y parte no.
También dan la lata en algunos apartados de la plantilla, los símbolos &, los espacios en blanco o las comillas. Para todo esto, la solución es relativamente sencilla aunque da bastante trabajo. Se trata de sustituir esos símbolos por las siguientes cadenas de caracteres:
Habreis podido comprobar también, que cuando quereis alinear datos introduciendo caracteres en blanco, la cosa no funciona bien. Fijaros arriba y vereis que después de los dos primeros casos, se han introducido dos espacios en blanco para que cuadren los símbolos =. Esto se consigue encerrando el texto preformateado entre las etiquetas <pre> y </pre>. Es especialmente útil cuando se quiere mostrar un ejemplo grande de código en el que se han introducido tabulaciones para una mayor claridad.
En ocasiones bastará con añadir sucesivos para conseguir el mismo resultado, pero lo anterior es más fácil de hacer y más claro a la hora de redactarlo.
También es interesante desde el punto de vista del diseño y, sobre todo, de la claridad de la explicación, conseguir diferenciar la parte que corresponde al código, del resto del texto que lo acompaña.
Para eso, es suficiente con crear en nuetra plantilla una nueva clase CSS con el formato elegido. Luego, cada vez que redactemos algún trozo de código que queramos destacar o diferenciar, habrá que identificarlo haciendo referencia a la clase definida mediante el atributo CLASS. Por ejemplo, si hemos nombrado nuestra clase como .formatocodigo, para mostrar un trozo de HTML tendremos que escribir:
Definir el borde (border), fondo (background), la fuente de texto (font-family) y el color del texto (color), debe ser suficiente para conseguir un estilo bien diferenciado.
Para facilitar el trabajo de sustitución, podeis utilizar la opción de "reemplazar" de cualquier procesador de texto. O mejor todavía, conversores online de HTML a TEXTO PLANO como los de BlogCrowds, SimpleBits o NoSetUp.
Con código CSS no hay ningún problema, porque el problema reside principalmente en el uso de los símbolos menor y mayor (< >) que en este último caso no se utilizan. Pero para el lenguaje HTML, estos símbolos son el comienzo de una instrucción y, lógicamente, lo que hace es traducirlo e intentar ejecutar lo que hay en su interior. En nuestro caso, esto provocará que el código que pretendiamos colocar no resulte visible, que nos de un error y, en los peores casos, que traduzca parte sí y parte no.También dan la lata en algunos apartados de la plantilla, los símbolos &, los espacios en blanco o las comillas. Para todo esto, la solución es relativamente sencilla aunque da bastante trabajo. Se trata de sustituir esos símbolos por las siguientes cadenas de caracteres:
< = <
> = >
" = "
= Espacio en blanco
Habreis podido comprobar también, que cuando quereis alinear datos introduciendo caracteres en blanco, la cosa no funciona bien. Fijaros arriba y vereis que después de los dos primeros casos, se han introducido dos espacios en blanco para que cuadren los símbolos =. Esto se consigue encerrando el texto preformateado entre las etiquetas <pre> y </pre>. Es especialmente útil cuando se quiere mostrar un ejemplo grande de código en el que se han introducido tabulaciones para una mayor claridad.
<HTML>
<BODY>
Este texto tiene dos tabulaciones
8 < 99
Tanto los símbolos "prohibidos" como el texto,
saldrán con el formato deseado usando "<pre>"
</BODY>
</HTML>
En ocasiones bastará con añadir sucesivos para conseguir el mismo resultado, pero lo anterior es más fácil de hacer y más claro a la hora de redactarlo.
También es interesante desde el punto de vista del diseño y, sobre todo, de la claridad de la explicación, conseguir diferenciar la parte que corresponde al código, del resto del texto que lo acompaña.
Para eso, es suficiente con crear en nuetra plantilla una nueva clase CSS con el formato elegido. Luego, cada vez que redactemos algún trozo de código que queramos destacar o diferenciar, habrá que identificarlo haciendo referencia a la clase definida mediante el atributo CLASS. Por ejemplo, si hemos nombrado nuestra clase como .formatocodigo, para mostrar un trozo de HTML tendremos que escribir:
<p class="formatocodigo">
CODIGO
</p>
CODIGO
</p>
Definir el borde (border), fondo (background), la fuente de texto (font-family) y el color del texto (color), debe ser suficiente para conseguir un estilo bien diferenciado.
Para facilitar el trabajo de sustitución, podeis utilizar la opción de "reemplazar" de cualquier procesador de texto. O mejor todavía, conversores online de HTML a TEXTO PLANO como los de BlogCrowds, SimpleBits o NoSetUp.¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Creo que es algo complejo, personalemente siempre he usado el servicio de simple bits para hacer esto y funciona bastante bien.
ResponderEliminarPor cierto, me gusta la manera en que se escriben los comentarios.
me podrias explicar como hago para que se vean siempre en primer lugar las entradas del blog antiguas,pude cambiarlas en el lado de los archivos pero no se cambia en las entradas por favor si me poder informar gracias
ResponderEliminarQue yo sepa, en esta plataforma no hay manera. Es la esencia de un blog: la información más reciente la primera.
ResponderEliminarExelente blog, quisiera saber si es posible añadir un < Script > en una entrada.
ResponderEliminarYo tengo unos "widgets" que para colocarlos como html/javascript no tengo mas que pegar el codigo y isto, se ve en todo el blog perfectamente, pero yo solo quiero colocarlo en una entada ese Script, y al colocarlo alli no aparece.
Me podrias ayudar o decirme como hago para colocarlo o cambiarlo a < embed > o sino a < Object > esos si me foncionan bien en las entradas.
verdelegal_web@hotmail.com
En un principio Business, salvo que tenga caracteres raros, será suficiente con copiar ese script y luego eliminar todos los saltos de línea. Para que un script funcione en una entrada, hay que redactarlo todo seguido, sin saltos.
ResponderEliminarMuchas Gracias Me sirvio mucho tu ayuda!
ResponderEliminarOtra consulta...
Se pueden "Ocultar" Jscripts como los que te dije antes en lugares como dice en este sitio la hoja "Ciber-Cafe" osea al hacer click ahi puedo hacer que a mis usuarios les aparezca el jscript?
Gracias.
Conozco un par de maneras. La primera es la más fácil:
ResponderEliminarhttp://oloblogger.blogspot.com/2008/02/elementos-que-aparecen.html
http://oloblogger.blogspot.com/2008/02/en-cualquier-parte-de-la-pgina.html
http://oloblogger.blogspot.com/2008/05/desplegar-partes-del-blog.html
Hola Oloman
ResponderEliminarA parte del tema de arriba:
Me hhan dicho varias personas que al entrar en mi blog les da error en la página.El caso es que a mí no.
No sé que puede ser.
¿Cuál es tu opinión?
Gracias
No sé Javierlota... ¿que cambien de navegador? :D
ResponderEliminarEs que yo no observo ningún problema.
Bueno...
ResponderEliminarGracias de todas formas
Excelente blog, de verdad que me ayudan mucho tus tips y la forma de explicar los temas... es excelente!!!
ResponderEliminarThank you very mucho RanRan :D
ResponderEliminar