En muchas ocasiones nos interesa mostrar un bloque de código HTML dentro de una página web, normalmente para poner un ejemplo de cómo hacer algo que estemos explicando. En está página se pueden ver varios ejemplos del resultado, pero vamos a ver paso a paso cómo conseguirlo.
En primer lugar, si escribimos las etiquetas HTML tal cual en el código de nuestra página, el navegador las interpretará como etiquetas de la propia página, con lo que las etiquetas no se verán en pantalla y no obtendremos el resultado deseado. Para solucionar esto tenemos que escapar el código. Escapar el código consiste básicamente en sustituir los caracteres ‘<‘ y ‘>’ por los códigos ‘<‘ y ‘>‘ (sin las comillas) respectivamente.
Aquí os dejo un pequeño script para que podáis ver vosotros mismos a qué me refiero. En la primera caja meted vuestro código y, pulsando en el botón convertir, podréis ver el resultado en la segunda caja. Lo que obtenemos en la segunda caja es lo que hay que pegar en el código de nuestra página para conseguir el resultado que queríamos.
Sin embargo, supongamos que queremos mostrar el código de la siguiente forma:
<html>
<head>
<title>Mi título de mi página web</title>
</head>
<body>
El cuerpo de mi página web
</body>
</html>
Pegando el código que habíamos obtenido tal cual en nuestra página, no se conservará el formateo que le hayamos dado en nuestro código, por ello colocaremos ese código entre etiquetas <pre>. La etiqueta <pre> sirve para mostrar texto preformateado, es decir, para el texto introducido entre etiquetas <pre> se tendrán en cuenta espacios y saltos de línea a la hora de ser mostrados en el navegador.
Ahora sólo falta aplicarle el estilo que nos guste a la etiqueta <pre>. A mi me gusta de la siguiente forma.
pre {
border:1px solid #A2A2A2;
background-color:#F1F1F1;
padding:8px;
margin:5px;
color:#0150c7;
overflow:auto
}
Sólo un apunte sobre esto último, el «overflow:auto» que véis indica que si alguna de las líneas de nuestro código no entra en el ancho que le hemos dado al bloque, le añadirá una barra de desplazamiento horizontal. Si no lo ponemos, las líneas se partirán en dos o más cuando no entren en una sóla.
Por último, lo mejor es incluir el bloque anterior en una hoja de estilos CSS y así todos los bloques pre de nuestra web tendrán la misma apariencia, pero ese es otro tema…