Mostrar bloques con código HTML dentro de una página web

Autor: Felipe Zolórzano

Algunas veces nos podemos encontrar con la necesidad de incrustar código html dentro de una página web, en la que este no se ejecute como tal, sino mostrarlo como si fuera simple texto. Es útil para poder explicar pequeños códigos y mostrar los resultados.

Voy a mostrar una manera de como poder hacer posible este"efecto" por así decirlo. En esta página se muestran varios ejemplos de ello, pero ahora nos toca mostrar cómo se hace paso a paso.

Normalmente si colocamos código html dentro de una página web, esta lo detecta como si fuera código normal y lo ejecuta mostrando el resultado sin mostrar sus etiquetas.

Es algo muy sencillo de realizar, solo basta con sustituir el signo "<" por "&lt" y el signo ">" por "&gt" (sin las comillas), esto se cambia por todos los signos de esta forma.

El código normal queda asi:

    <html>
      <head>
        <title>Título de la página</title> 
       </head>
       <body>
          Este código solo muestra este texto que 
          he escrito entre las etiquetas body.
       </body> 
    </html> 

El resultado de poner solamente el código así, es que solo va a mostrar el texto que pongas dentro de las etiquetas body. Solo texto plano o todo lo que pongas dentro de las etiquetas.

Y el código para mostrar en una página web quedaría de la siguiente forma:

 &lthtml&gt
      &lthead&gt
        &lttitle>Título de la página</title&gt
       &lt/head&gt
       &ltbody&gt
         Este código solo muestra este texto que 
         he escrito entre las etiquetas body.
       &lt/body&gt 
    &lt/html&gt 

Si te das cuenta, solamente sustituimos los "<" y los ">" por &lt y &gt respectivamente.

Ahora para que te aparezca en un recuadro y preformateado (recuadro gris donde aparece el código dentro), solamente encerramos todo el código dentro de la etiqueta <pre></pre>, asi:

<pre class="pre">
 &lthtml&gt
      &lthead&gt
        &lttitle>Título de la página</title&gt
       &lt/head&gt
       &ltbody&gt
         Este código solo muestra este texto que 
         he escrito entre las etiquetas body.
       &lt/body&gt 
    &lt/html&gt 
</pre>

Le he dado un formato en CSS es por eso que le he agregado la clase class="pre", esa es la razón por la que aparece en el recuadro.

El código CSS es el siguiente:

	<style>
.pre {
  background-color:#F1F1F1;
  border:1px solid #00000;
  padding:10px;
  overflow:auto
  margin:7px;
  color:#0150c7;
  
}
</style>

Tiene un overflow en auto, por si alguno de los códigos es muy ancho y no logra mostrarse en el recuadro, este mostrara una barra para mover de derecha a izquierda y viceversa.

Estoy suponiendo que sabes a que me refiero con el código CSS que puse, en caso de que no sepas o eres principiante pasa a leer un manual sobre CSS.

Espero que se haya comprendido la forma de poder lograr ese efecto, es cuestión de probar hasta que salga el resultado deseado. En realidad no es muy complicado, solo hay que saber lo más básico al comenzar un diseño web. Ver más sobre.. como se hace?

Si quieres saber como crear una página web desde cero visita. Como crear una página web completamnete desde cero en html y css

Si te gusta este artículo por favor ayudanos, presiona el boton Google+1 (Google mas 1)
Políticas de privacidad | Términos y condiciones | Recomendación de hosting | Para webmasters | Como se hace..Cursos y tutoriales | Diseño web por ciudades | Osio
Copyright © 2012 | Todos los derechos reservados | Diseñado por mastersitios.com