-
Cara Membuat Textarea
Belajar HTML dasar

Textarea diperlukan dalam pembuatan blog atau website saat membuat text atau tulisan di dalam box. Hasil penulisan text di dalam Textarea tersebut akan ditulis tanpa merubah ukuran dari texarea itu sendiri (sebelumnya char width (cols) dan rows didefinisikan terlebih dahulu). Apabila text yang ditulis melebihi kapasitas ukuran textarea, maka textarea tersebut akan otomatis membuat scrollbar di sebelah kanan.
Dalam text area, penulisan kode HTML, CSS, atau script lain dapat ditulis tanpa perlu menggunakan entitas HTML atau dengan kata lain seluruh text, kode, dan script yang ditulis pada textarea akan tampil apa adanya setelah diposting.
Para blogger biasanya menggunakan textarea sebagai tempat untuk menyimpan kode HTML, CSS, atau script yang lain misalnya url download, script tukar link, script banner exchange, dan lain-lain. Berikut ini akan saya jelaskan cara membuat textarea pada blog jika suatu saat dibutuhkan untuk menempatkan atau menyimpan kode HTML. Cols berfungsi untuk mendefinisikan jumlah karakter ke samping yang akan ditampilkan pada textarea, Rows berfungsi untuk mendefinisikan jumlah baris pada textarea.
Contoh 1 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 :
Penulisan kode HTML :
<textarea cols="30" rows="4">Tulisan ini ada di dalam textarea </textarea>
Tampilan setelah diposting :
Contoh 2 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 tetapi tulisan melebihi kapasitas textarea:
Penulisan kode HTML :
<textarea cols="30" rows="4">Tulisan ini ada di dalam textarea dengan ukuran char width 30 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.</textarea>
Tampilan setelah diposting :
Contoh 3 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 dengan status readonly sehingga text yag berada di dalam textarea tidak bisa diedit setelah diposting.
Penulisan kode HTML :
<textarea cols="30" rows="4" readonly="readonly">Contoh penulisan text di dalam text area dengan status readonly, sehingga tulisan tidak bisa di-edit.</textarea>
Tampilan setelah diposting :
Contoh 4 : Penulisan kode html di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 dengan status text readonly untuk mencegah pengeditan setelah diposting:
Penulisan kode HTML :
<textarea cols="30" rows="4" readonly="readonly"> <a target="_blank" href="http://linksukses.com"> <img border="0" alt="Link Sukses" src="http://i278.photobucket.com/albums/kk82/yudispa/LinkSukses.jpg" title="Link Sukses"/>< /a> </textarea>
Tampilan setelah diposting :
Kode HTML pada contoh 4, jika tidak menggunakan textarea dapat juga ditulis dengan menggunakan entitas HTML seperti di bawah:
Penulisan kode HTML :
<p><a target="_blank" href=" http://linksukses.com"> <img border="0" alt=" Link Sukses" src=" http://i278.photobucket.com/albums/kk82/yudispa/LinkSukses.jpg" title=" Link Sukses"/></a> </p>
Tampilan setelah diposting :
<a target="_blank" href = "http://linksukses.com"> <img border="0" alt="Link Sukses" src = "http://i278.photobucket.com/albums/kk82/yudispa/LinkSukses.jpg" title="Link Sukses"/></a>
Pada contoh 1 dan contoh 2, tulisan di dalam textarea masih bisa diedit, tetapi pada contoh berikutnya, tulisan di dalam textarea tidak bisa diedit (readonly).
Mohon koreksi teman-teman jika saya salah memberikan informasi mengenai textarea di atas. Semoga bermanfaat.
Artikel yang perlu dikoreksi :
5 comments:
-
thank's ini yang dicari biar gak bisa diedit tinggal nambahin readonly ya, thank's banyak ya,
-
tamu datang berkunjung sekalian blog walking. mantap tipsnya,
makasih om.
-
Kang Yuda,
ini benar Kang Yuda yang menulis kan? Saya tidak melihat nama penulis di konten ini. :)
Menurut saya, textarea+readonly sebaiknya memakai elemen pre. Sedangkan textarea untuk input saja.
Siapapun boleh berkomentar termasuk kritik dan koreksi untuk perbaikan blog. Bagi yang awam, jangan malu untuk bertanya karena sayapun masih belajar. Tetapi saya mohon maaf karena tidak semua komentar dan email dapat saya reply.
Langgan:
Poskan Komentar (Atom)
Tutorial Blog
- Cara Menulis Yang Menarik
- Membuat Halaman Statik Pada Blogspot
- Menyisipkan Gambar Pada Tabel
- Membuat Blockquote Dengan CSS
- Memasang Toolbar Pada Blog
- Mengganti Blogspot.com Menjadi .com, .net, .org, dll
- Verifikasi Blog Yang Dibangun Dengan Wordpress.com
- Template Blogspot Gratis
- Membuat Tombol Menu
- Mengganti Header Blog
- Template Weebly Gratis
- Mempercepat Loading Blog
- Tukar Link (Link Exchange)
- Cara Pasang Google Translate Pada Blog
- Membuat Website Gratis Dengan Weebly
- Membuat Website Gratis dengan Yola
- Membuat Website Gratis dengan WIX
- Sumbit URL ke Search Engine Terbesar
- Tip Menghemat Bandwidth
- Pencurian Bandwidth
- Verifikasi Blog/ Website Pada Alexa
- Verifikasi Website Pada Google
- Verifikasi Website Pada MSN
- Verifikasi Blog Pada Yahoo
- Form Contact Gratis
- Blogger Template Designer
- Cara Menghapus Komentar Spam
- Cara Menghapus Komentar
- Cara Membuat Google Analytics
- Penulisan Meta Tag Dasar
- Cara Membuat Back To Top
- Cara Membuat Read More Pada Wordpress.com
- Cara Membuat Read More Pada Blogspot
- Menghilangkan Label Di Bawah Posting
- Cara Menyembunyikan Navbar
- Cara Membuat Facebook Fan Box
- Teks Berjalan (Running Text)
- Kode HTML Tampil Pada Postingan
- Cara Membuat Textarea
- Profile Facebook Pada Blog
- Cara Membuat Tabel
- Cara Submit Sitemap
- Cara Membuat Favicon Pada Wordpress
- Cara Membuat Favicon Pada Blogspot
- Cara Bikin Blog Dengan Wordpress
- Cara Bikin Blog Dengan Blogspot
- Mengganti Tulisan Posting Lama, Posting Baru, dan Home
- Menghapus Tanda Quick Edit Pada Blogspot
- Promosi Website
- Belajar Dari Website Orang Lain
- Template Gratis
CSS Dasar
- Membuat Blockquote Dengan CSS
- Clean Dan Kompressi Kode CSS
- Membuat Effect Hover Gambar Dengan CSS
- Membuat Tombol Menu
- Perbedaan Margin dan Padding pada CSS
- Syntax Highlighter Untuk Blogger
- Penggunaan ID dan CLASS
- Cara Membuat Textarea
- Mengenal CSS
HTML Dasar
- Cara Menyisipkan Gambar Pada Tabel
- Membuat Blockquote Dengan CSS
- Gambar Berjalan Dengan HTML
- Syntax Highlighter Untuk Blogger
- Cara Membuat Textarea
- Belajar HTML Dasar (Part. III)
- Belajar HTML Dasar (Part. II)
- Belajar HTML Dasar (Part. I)
- Text Berkedip Dan Text Berjalan
- Teks Berjalan (Running Text)
- Kode Warna
- Cara Membuat Tabel
- Teks Berkedip
Bisnis Online
- Cara Memasang Iklan Bidvertiser
- Sekolah Online Bisnis Internet
- Verifikasi Account Paypal
- Google Adsense Dalam Bahasa Indonesia
- PTC (Pain ToClick)
- Tips Google Adsense Dan Bidvertiser
- Belajar Bisnis Internet
- Google Adsense
- Bisnis Internet
- Directory Program Afiliasi
- Desain Web Dan Bisnis Online
- Promosi Ke Ribuan Email
- Sekilas Tentang Internet
SEO Untuk Pemula
- Berburu Bcklink Dengan Software
- Google PageRank Dan Alexa Rank
- Cara Mencari Keyword Yang Tepat
- Cara Merubah Geographic Target
- Etika Tukar Link
- Tukar Link (Link Exchange)
- Menpoptimalkan Posting Lama Agar SEO Friendly
- Sumbit URL ke Search Engine Terbesar
- Verifikasi Blog/ Website Pada Alexa
- Verifikasi Website Pada MSN
- Verifikasi Blog Pada Yahoo
- Verifikasi Website
- Cara Membuat Google Analytics
- Website Menghilang Dari Google
- Penulisan Meta Tag Dasar
- Peringatan Google
- Wajah Baru Di Tahun 2010
- Cara Membuat Sitemap
- Promosi Website
- Cara Meningkatkan Pengunjung (Part. 2)
- Cara Meningkatkan Pengujung (Part. 1)
- SEO Untuk Pemula
- Belajar Dari Website Lain
- Promosi Ke Ribuan Email
- Promosi Dengan Direct Email
Photoshop Dasar
- Membuat Gambar Transparan Dengan Photoshop
- Membuat Header Dan Background Menu Dengan Photoshop
- Efek Ukir Pada Logam
- Membuat Header Dengan Photoshop
- Membuat Efek Kaca Pembesar
- Membuat Efek Kertas Terbakar
- Membuat Efek Kertas Sobek
- Membuat Efek Bayangan Lengkung
- Foto Dan Image Gratis
- Efek Kertas Lipat
- Kode Warna
- Logo Twitter Gratis (2)
- Logo Twitter Gratis (1)
- Valentine's Day Images
- Web Grafik Gratis
- Efek Bayangan Dengan Photoshop
- Membuat Button Dengan Photoshop
- Berkenalan Dengan Photoshop
Software Dan Driver
- Software Pencari Backlink
- PDA O2 XDA IIi
- Driver Dan Resetter Epson R230
- Driver Dan Resetter Epson CX2800
- Browser Internet Terbaik
- Smadav Naik Daun
- Opera Mini Dan Opera Mobile
- Kompetisi Antivirus
- Billing Warnet
Facebook (FB)
- Google Adsense VS Facebook
- Block User Pada Facebook
- Cara Membuat Facebook Fan Box
- Facebook Smiley
- Profile Facebook Pada Blog
- Facebook Di Indonesia
- Cara Daftar Facebook
Website Tools
- Google Banned Checker
- Back Link Checker
- Cloaking Checker
- Keyword Sugestion
- Keyword Density Checker
- IP Location
- Link Price Calculator
- Domain Checker
- Broken Link Checker
- Search Engine Position
- Listing Preview
- Ping Test
- Website Speed Test
- Alexa Traffic Rank
- Index Checker
- Google Pagerank Prediction
- Pagerank Checker
Lain-lain
- Cara Menulis Yang Menarik
- Komentar Bunglon
- Mengapa Banyak Yang Mengaku Blogger Pemula
- Alasan tidak menulis komentar pada artikel yang dibaca
- Etika Tukar Link
- Harus Berani Berkomentar
- Cara Membuat Account Di MSN
- Perkembangan Link Sukses
- Permohonan Maaf
- Sekolah Online Bisnis Internet
- Google Adsense VS Facebook
- Kontroversi Copy Paste
- Template Weebly Gratis
- Domain Pada Wordpress.com Diban
- PDA O2 XDA IIi
- Kode Singkatan Ketika Chatting
- Mengapa Banyak Yang Mengaku Blogger Pemula
- Pencurian Bandwidth
- Tip Menghemat Bandwidth
- Komentar Yang Dapat Merusak Reputasi Blog
- Perbedaan Blog Dan Website
- Situs Penyedia Foto Gratis
- Logo Valentine's Day
- Opera Mini Dan Opera Mobile
- Blogger Dan Valentine's Day
- Internetan Murah Dengan Simpati dan Kartu As
- Peringatan Google
- 7 Keajaiban Diptara Blog
- Kesalahan Yang Sering Dilakukan Blogger Pemula
- Sekilas Tentang Internet
- Browser Internet Terbaik
- Wajah Baru Di Tahun 2010
- Web Grafik Gratis
- Template Gratis
- Facebook Smiley
- Kamus Istilah Bisnis Internet
- 100 Istilah Internet Yang Sering Digunakan
- Cara Membuat Email








Wow jadi begitu ya... membuat textarea...
thx ya om.....