Beberapa bulan lalu, untuk menampilkan kode HTML atau JavaScript di artikel, kita tidak bisa menampilkannya begitu saja. Kalau saat ini saya tidak tahu, soalnya saya menggunakan Cara Menampilkan Kode HTML Secara Otomatis. Apabila saat ini masih sama seperti dulu dan anda sedang mencari cara untuk menampilkan kode HTML anda pada postingan, baca Cara Menampilkan Kode HTML dengan menggunakan Text Area dari BLOGGRBUGIS berikut ini.
Untuk membuat text area, kode HTML yang dipakai seperti ini :
<p align="center"><textarea name="code" rows="5" cols="30">Ganti tulisan ini denagn dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area</textarea></p>
Hasilnya :
Besarnya Text Area tergantung dari besarnya angka ROWS/TINGGI dan COLS/LEBARnya.
- Semakin besar angka ROWSnya, semakin tinggi ukuran kotak Text Area begitupula sebaliknya.
- Semakin besar angka COLSnya, semakin Lebar ukuran kotak Text Area begitupula sebaliknya.
- Anda bisa mengganti angka-angkanya sesuai dengan kebutuhan anda.
Jika anda ingin menampilkan banyak Teks atau kode HTML didalam Text Area, anda tidak perlu membuat kotak Text Areanya terlalu besar, karena text area akan membuat scroll kebawah atau kesamping atau keduanya jika banyak teks didalamnya. Contohnya seperti ini :
Dengan sedikit penambahan kode, text area akan menambah fungsinya. Yaitu dengan sekali klik, semua tulisan yang ada di dalam text area akan langsung terpilih dan tinggal di Copy. Text Area ini dikenal dengan nama Text Area Highlight. Kode yang dipakai adalah :
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></p></div></form>
Hasilnya :
Untuk melihat bedanya, silahkan klik pada tulisan HIGHLIHGT ALL, maka semua text yang ada di dalam Text Area akan langsung terHIGHLIGHT / terPILIH.
Sama seperti Text Area yang pertama, anda bisa mengedit kembali kode diatas sesuai keinginan anda, yang penting jangan hancurkan Text Areanya hehe....
Silahkan Edit kode yang diberi warna MERAH dan BIRU
Oce.. sob, selamat membuat Text Area anda sendiri. Di artikel lainnya saya akan membahas tentang :
- Cara Membuat Text Area Bergaya, dan
- Cara Menampilkan Kode HTML secara Otomatis
Semoga hari anda menyenangkan dan... Happy Blogging..
0 comments:
Post a Comment