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 "<" y el signo ">" por ">" (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:
<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>
Si te das cuenta, solamente sustituimos los "<" y los ">" por < y > respectivamente.Ahora para que te aparezca en un recuadro y pre formateado (recuadro gris donde aparece el código dentro), solamente encerramos todo el código dentro de la etiqueta <pre></pre>, así:
<pre class="pre">
<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>
</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>
0 comentarios:
Publicar un comentario