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.
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:
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.
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):
También si quieres que se seleccione el texto al colocar el puntero encima de la caja, se puede hacer con la propiedad onMouseOver:
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:
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:
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:
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.
Ha por cierto, size="4" es la altura de la caja del menú.
Espero y te sean de gran utilidad.
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.
menú.css
menú.js
Los documentos PDF son sin duda los documentos estándar para compartir presentaciones y que hacen posible la inserción de imágenes y todo tipo de gráficos de manera rápida y sencilla.
Actualización
