Seleccionar página

¿Cómo mostrar código HTML en una página web?

En este tutorial aprenderá cómo podemos mostrar nusestro código HTML en una página web. Las etiquetas utilizadas para mostrar el código HTML original son: <pre> … </pre>. Entre estas etiquetas escribimos o pegamos nuestro código HTML, CSS, etc. El resultado se muestra en el ejemplo de la caja de código HTML.

La etiqueta < equivale o es = &lt;

La etiqueta > equivale o es = &gt;

Veamos ahora un caso sencillo y práctico. Vamos a mostrar la etiqueta <html> usando las etiquetas <pre> y </pre>

Ejemplo<pre> &gt;html&gt; </pre>

Resultado:

		<html>
	

Espero que hayas entendido el concepto de la etiqueta «<pre>» ahora nuestro nivel inicial ha terminado. Ahora vamos a ver el siguiente código CSS, que servirá para dar forma a la inserción de la CAJA DE CÓDIGO HTML, en este caso con un fondo de color negro, y una fuente de texto de color verde, como podrás observar. Solo tiene que copiar el código entre las etiquetas «style» de su «head».

	.mycode{
	
	text-overflow: ellipsis;
   overflow-x: scroll;
	verflow: auto;
    margin: 0;
	display: block; 
	padding: 3px 3px 2px; 
	font-size: 14px; 
	line-height: 20px;
	width: 100%;
	background-color: #333;
	font-family: Courier New;
	color: #30F72D;
	font-weight: italic;
	font-size: 20px;
	padding-right: 0.5rem;
}

Ahora que ya tienes el código CSS, solo tendrás que hacer mención a la clase en la etiqueta «pre», de la siguiente forma:

<pre class=»mycode»>… </pre>

Como podrás comprobar, es un ejemplo muy práctico y fácil, espero que no tengas ningún problema para llevarlo a la práctica en tu nueva página web HTML.

EJEMPLO DE CAJA DE CÓDIGO HTML

<html>
<head>
<title>Bienvenido al compositor 
de código.</title>
</head>
<body>
<h1>Francisco González</h1>
<h2>Mi Página de Código.</h2>
<p>
Este es un Sitio Web de Aprendizaje
 gratuito para los Usuarios.
<p>  
</body>
</html>	




Ver Demo