Hay algunas ocaciones que necesitas publicar algún código en una entrada y resulta que no se muestra en ella por que el navegador lo manipula.
Cajas para texto y codigos
La etiqueta <textarea> te puede ser útil de verdad, ya que evita que los navegadores manipulen o modifiquen un código.

También te ayudara a controlar un texto largo, claro si quieres que no abarque gran parte de la entrada.
A continuación te presento los ejemplos de cajas:
Esta es una caja simple:

<textarea>
Texto o código 
</textarea>



Ahora a esta se le añaden las propiedades "rows"(alto) y "cols"(ancho), sólo tendrás que variar las cifras de ambos parámetros.


<textarea rows="5" cols="18">
Texto o código a mostrar dentro de la caja
</textarea>

Como checaste en el ejemplo anterior, las propiedades "rows"(alto) y "cols"(ancho) generan barras de desplazamiento, si embargo, si te decidieras por quitárselas, lo puedes hacer con la propiedad overflow(sin barras):


<textarea cols='68' rows='4' style='overflow: auto;'>
Caja para código sin barras
</textarea>



También si quieres que se seleccione el texto al colocar el puntero encima de la caja, se puede hacer con la propiedad onMouseOver:


<textarea rows="2" cols="5" onMouseOver="this.focus()" onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()">
Si colocas el puntero encima del recuadro, se seleccionara el contenido ya sea código o texto.
</textarea>

Sin embargo, hay otra forma diferente de seleccionar el contenido, y es por medio de un botón hecho con Java script como se muestra en el ejemplo:


<form name="select_all">
<textarea rows="5" cols="18" name="text_area">
Texto o código a seleccionar
</textarea>
<input value="Seleccionar texto" onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button"/></form>



Ahora si quisieras cambiarle el color blanco(por defecto) por otro color de fondo o por una imagen, también lo podrás hacer:
Esta caja, es con color de fondo:

Código:
<textarea rows="5" cols="18" style="background: #009000; color: #000000; font-weight: bold; font-family: Castellar; font-size: 10pt;">
Texto o código con color de fondo
</textarea>

Y esta, con una imagen:

Pero si observas el ejemplo de la imagen, aparte de la imagen también se le podrá cambiar el color del código, así como el tipo de letra y el tamaño.
Código:
<textarea rows="5" cols="18" style="background-image: url(Url-de-tu-imagen); color: #FFAA00; font-family: Stencil; font-size: 10pt;">
Texto o código con imagen de fondo
</textarea>



Por ultimo, otra caja útil que quise incluir en esta entrada, es una con menús pero hecha con la etiqueta <select>:

Así como en los ejemplos anteriores, lo puedes personalizar al gusto que desees.
<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" style="background-color: #FFFFFF; font-family: stencil; color: #000000; font-size: 15pt; width: 150px;" name="SiteMap" size="4">
<option selected />Titulo
<option value="Url-de-tu-blog"/>Link 1
<option value="Url-de-tu-blog"/>Link 2
<option value="Url-de-tu-blog"/>Link 3
<option value="Url-de-tu-blog"/>Link 4
<option value="Url-de-tu-blog"/>Link 5
<option value="Url-de-tu-blog"/>Link 6
</select>

Ha por cierto, size="4" es la altura de la caja del menú.
Espero y te sean de gran utilidad.

Deja un comentario

                                                                                                                                                                                                                                                                                                                                                       
Ciudad Blogger

Hola, Bienvenido a Blog 2000!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Blog 2000 Blog 2000 Blog 2000 Blog 2000

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Blog 2000