Mostrar código HTML en tu página web de forma ordenada y legible es muy importante, especialmente para tutoriales y guías técnicas. La etiqueta <textarea> es una solución simple y efectiva para crear cuadros de texto donde se puede mostrar código sin que se ejecute.
🔧 ¿Qué es la etiqueta <textarea>?
La etiqueta <textarea> define un área de texto multilínea en HTML, comúnmente utilizada para que los usuarios escriban mensajes o comentarios. Sin embargo, también podemos aprovecharla para mostrar código en bruto.
🖼 ¿Para qué son útiles las etiquetas <textarea>?
- ☑ Colocar un texto largo en un recuadro para así controlar el espacio que ocupa dentro de una entrada o post, esta etiqueta es para poner texto que se pueda modificar, enviar, o solamente que sea solo lectura sin poder modificarla. La ventaja es que cuando queremos poner códigos html en nuestra página web o blog y son muy largos estos códigos, podemos hacerlo del largo que nosotros queramos ya que tiene una barra para poder deslizarnos.
- ☑ Publicar un código en nuestra entrada evitando así que los navegadores lo interpreten, manipulen y/o modifiquen.
📋 Pasos a seguir
Para utilizarlo basta con colocar el texto entre las etiquetas tal como muestra el ejemplo siguiente:<textarea name="codigo" rows="6" cols="60" readonly="">Introduzca su código aquí</textarea>
Se creará un cuadro como el siguiente:
- ☑ rows="n": Donde n es el número de filas
- ☑ cols="n": Donde n es el número de columnas
- ☑ name="nombre": Asigna un nombre identificador único al campo.
- ☑ readonly: No deja que el texto escrito en el área de texto pueda ser modificado por las personas que vean la página (sin embargo ese contenido será enviado con el resto del formulario).
- ☑ disable: Desactiva el elemento, impidiendo que el texto que contiene sea modificado, y además tampoco es enviado con el formulario.
- ☑ wrap="off / soft / hard": Se usa para indicar el texto que el texto se debe justificar (ajustar al ancho de la ventana. Off valor por defecto, no hay ajuste del texto enviándose este tal y como fue escrito. Soft, ajusta el texto a la ventana, además envía este como una cadena continua. Hard, ajusta el texto a la ventana enviando el texto como separando la palabra y líneas donde sea necesario.
</textarea>
🎨 Personalizar el cuadro de código
Puedes mejorar la apariencia usando CSS. Por ejemplo:
👉 ¿Te ha sido útil este artículo? Deja tu comentario. ¡No guardes el secreto! Compártelo con quienes puedan aprovecharlo y únete a mi comunidad en redes sociales para más contenidos especializados. ¡Tu apoyo es fundamental para seguir generando valor! 👇
|
