Crear un recuadro para poner un código HTML

[leycosmica]

Quiero poner un recuadro con el código de un banner en una web, para que los visitantes lo copien. Necesitaría saber un método que me permita poner un código visible (sin que se active) en un cuandrado.

Muchas gracias.

[MasterXNicoX]

Creo que puede llegar a ser asi... <code>CÓDIGO</code>,
aunque no estoy muy seguro y ando medio apurado ahora, fíjate y me cuentas!! jeje!!!

[emprear]

Mejor quedaría en un textarea para facilitar el copiado, o utilizar un bloque <pre>

Saludos

[leycosmica]

Nada de nada amigos, he probado con los dos y combinandolos incluso y el código se activa y solo se ve el bannaer, mi intencion es hacer algo parecido a la pagina siguiente: http://www.codigosparamyspace.com/ba...perior-myspace (pero modificando la medida del recuadro para poder adaptarlo a mi site)

[Ventru3]

Introduce este código:

Código HTML:

<textarea name="comentario" cols="la anchura que quieras" rows="la altura que queras" readonly>El texto que quieras poner</textarea> 

[MasterXNicoX]

Lo de Ventru3 seguro funciona!!

[raxper]

agrega la función Select para que tus usuarios puedan copiar más fácilmente el code

Código Javascript:

<textarea onclick="select()" name="comentario" cols="la anchura que quieras" rows="la altura que queras" readonly>El texto que quieras poner</textarea>
 

[emprear]

leycosmica:
Lá página que pones como ejemplo, usa exactamente lo que se te ha indicado

Código HTML:

<textarea rows="15" cols="70">
<style>
body {margin-top: 170px;}
.joomblybanner {position:absolute;top:30px;width:728px;}
.joomblybanner {text-align:center;margin-top:15px;}
.joomblybanner {margin-left:-399px;left:50%;}
</style>
<div class="joomblybanner">
<a href="http://www.joombly.com/" title="Banner para Myspace">
<img src="http://TU_IMAGEN" border="0" alt="Banner para Myspace"/>
</a>
</div> 
</textarea>
 

así que no entiendo que es lo que "no funciona"


Saludos

[KurozakiIchigo]

Usa los caracteres, ejemplo.

Si quiere poner un codigo como este:
<img src="banner.png" width="xx" height="xx" alt="xx" />

Tu pagina lo lee como codigo html y hace visualizar la imagen.
Asi que para solucionar esto, y sea visible el codigo, para que otros usuarios puedan copearlo y pegarlo en sus sites, es usando los caracteres.

convertiremos este codigo a codigo texto:

<img src="banner.png" width="xx" height="xx" alt="xx" />

a:

&lt;img src=&quot;banner.png&quot; width=&quot;xx&quot; height=&quot;xx&quot; alt=&quot;xx&quot;&@32;&@47;&gt;

*reemplaza @ por # en los dos codigos que deje marcados con negrita y subrayado.

Este codigo lo pegas en tu codigo html, y se vera asi en tu pagina:
<img src="banner.png" width="xx" height="xx" alt="xx" />

&quot; = " (comillas)
&@32; = (espacio en blanco) (reemplaza @ por #)
&@47; = / (diagonal) (reemplaza @ por #)
&lt; = < (corchete izquierdo)
&gt; = > (corchete derecho)

etc etc... Espero hayas entendido :D

Saludos
PD: puse @ en lugar de #, por que, este sitio, los leia a caracteres y ya no hiban a poder ver el codigo.

[leycosmica]

Gracias amigos, y sobretodo a ti Ventru, tu código me ha ido genial. un saludo.

[Ventru3]

De nada