Ini cara lanjutan dari postingan sebelumnya
Tutorial kali ini membahas tentang cara menampilkan kode html dengan menggunakan text area
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>
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 secara otomatis jika banyak teks yang di tulis didalamnya. Contohnya seperti ini :
dengan sedikit penambahan kode, text area menambah fungsinya yaitu,dengan sekali klik, semua tulisan yang ada pada text area akan otomatis tercopy text area ini dikenal text area hightlight kode yang dipakai sebagai berikut :
<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.
Silahkan Edit kode yang diberi warna MERAH dan BIRU
