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