Como adicionar uma área de texto para códigos HTML

Às vezes temos que inserir códigos em uma postagem (HTML, CSS, etc.) e a melhor maneira de se fazer isso é através de uma área de texto (text area). Tal método tem a vantagem de ocupar menos espaço na página e ainda a seleção do conteúdo, e até mesmo a cópia, pode feita por um clique na área de texto facilitando a sua cópia.

As tags HTML utilizadas para criar uma área de texto são: <textarea></textarea>.

Com o código abaixo você pode criar uma área de texto como esta:

Área para a inserção de texto simples e códigos (HTML, CSS, etc.).

<textarea cols="40" name="text" style="background-color: #eeeeff; color: #aa0000;" onclick="this.focus()" onfocus="this.select()" rows="10">O texto deve ser inserido aqui.</textarea>

O tamanho da área de texto depende do número de colunas (cols) e de linhas (rows). No exemplo acima temos 40 colunas (cols="40") e 10 linhas (rows="20"). Lembre-se que as áreas de texto utilizam, geralmente, fontes mono-espaçadas, daí, comportam o mesmo número de caracteres por linha. As cores do background e do texto podem ser alteradas substituindo-se os códigos destacados em amarelo. Além dos códigos das cores em hexadecimal, você pode usar o nome das cores principais em inglês. Exemplo:

style="background-color: silver; color: red;"

O autor
Juarez Pereira
Unaí - MG, Brasil
Visualizar meu perfil completo