Sunday, November 18, 2012

Cara Membuat Text Area Pada Dokumen HTML

Cara Membuat Text Area Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Tabel Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Text Area Pada Dokumen HTML'.

Text Area adalah sebuah area yang dapat di isi text yang diatur dengan menggunakan attributes 'cols & rows' sehingga membentuk sebuah kotak yang ukurannya sesuai dengan value yang di tentukan pada setiap attributes'nya dengan jumlah kapasitas text yang tidak di batasi. Selain menggunakan attributes 'cols & rows', text area juga dapat di atur dengan css styling menggunakan properties 'width & height'.

Baiklah berikut ini contoh penulisan sebuah text area pada dokumen HTML.


Contoh Text Area:

Cara Membuat Text Area Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai membuat sebuah text area pada dokumen HTML seperti pada kotak di bawah ini.

  4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Contoh Text Area Pada Dokumen HTML </title>
    </head>

    <body>

    <p>Ini adalah text area:</p>

    <textarea rows="5" cols="52">
    Silahkan mengetik di sini!
    </textarea>

    <p>Ini adalah text area dengan styling attribute padding:</p>

    <textarea rows="5" cols="50" style="padding:10px;">
    Silahkan mengetik di sini!
    </textarea>

    <p>Ini adalah text area dengan css styling menggunakan attribute width & height:</p>

    <textarea style="padding:10px; width:440px; height:120px;">
    Silahkan mengetik di sini!
    </textarea>

    </body>
    </html>

    Anda dapat merubah value yang di blok kuning dengan value yang Anda inginkan!


    Ini adalah text area:



    Ini adalah text area dengan styling attribute 'padding':



    Ini adalah text area dengan css styling menggunakan attribute 'width & height':




Nb. Silahkan beri feed back pada kotak komentar di bawah!


Bagikan posting ini di:
Comments
0 Comments

0 comments:

Post a Comment

 
Related Posts Amirabella-Zone