ELEMENT TEXTAREA - BELAJAR MEMBUAT WEBSITE

</option> ELEMENT TEXTAREA

Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM Sintaks: <textarea name="name" cols="number" rows="number" > ... </textarea> Contoh 1 <html> <head>

<title>Form Transkrip Akademik</title> </head>

<body> <p> Sekolah Tinggi Tinggi Sekali<br> <b>Lihat Transkrip Akademik</b> <hr> <p> <form> <table > <tr> <td>No. Mhs</td> <td><input type="text" name="txtNama" size="10"></td> </tr> <tr> <td>Nama</td> <td><input type="text" name="txtAlamat" size="35"></td> </tr> <tr> <td>Password</td>

</table > </form> <hr>

60 Contoh 2: <html> <head><title>macammacam FORM</title></head> <body> <form> <font size="6"><b>macammacam FORM</b></center></font> <hr size="2">

<p><b><font face=”Verdana” size=”2">1. contoh INPUT type TEXT: <input type=”text” name=”nama” size=”15" maxlength=”12">

<p>2. contoh INPUT type PASSWORD:

<input type=”password” name=”password” size=”30" maxlength=”30"> <p>3. contoh INPUT type CHECKBOX:

<input type="checkbox" name="C1" value="ON">Checkbox 1 <input type="checkbox" name="C2"

value="ON">Checkbox 2 <p>4. contoh INPUT type RADIO #1:

<input type="radio" name="R1" value="V2">TIDAK <p>5. contoh INPUT type RESET:

<input type="reset" value="Batal" name="B2"> <p>6. contoh INPUT type SUBMIT:

<input type="submit" value="Daftar" name="B1"> <p>7. contoh TEXTAREA : <textarea name=”komentar” rows=”5? cols=”60?></textarea> <p>8. contoh SELECT #1 : <select name=”pilihan”> <option value=”kom">Komputer <option value=”akt">Akuntansi <option value=”mnj”>Manajemen </select>

<p>9. contoh SELECT #2 (bila size > atau = jumlah pilihan): <select size="2" name=”pilihan”>

<option value=”kom">Komputer <option value=”akt">Akuntansi <option value=”mnj”>Manajemen </select>

<p>10. contoh SELECT #3 (bila size < jumlah pilihan, perhatikan pengaruh MULTIPLE): <select size="3" name=”pilihan”> <option value=”kom">Komputer <option value=”akt">Akuntansi <option value=”mnj”>Manajemen </select> </form> </body> </html>

62 MEMBUAT FRAME

Dengan menggunakan frame, kita bisa menampilkan beberapa halaman HTML sekaligus dalam sebuah jendela browser. Apa artinya? Artinya dengan membuka sebuah halaman HTML saja (yang mengandung frame), browser akan menampilkan beberapa halaman sekaligus yang masingmasing termuat dalam sebuah frame. Apa gunanya? Disamping untuk mempercantik tampilan, fungsi utama frame adalah untuk memudahkan navigasi atau penelusuran isi website. Kok, bisa? Daripada membahas panjang lebar, lebih baik kita langsung saja belajar membuat frame. Perhatikan contoh layout halaman ber frame berikut ini:

frame I berisi file judul.html frame II berisi file menu.html frame III berisi file isi.html

Anggaplah gambar di atas adalah tampilan dari sebuah halaman HTML yang terdiri dari tiga frame. Halaman yang berframe ini kita namakan index.html. File index.html ini menampilkan tiga halaman HTML sekaligus yaitu file judul.html, menu.html dan isi.html. Jadi untuk membuat tampilan seperti di atas kita harus membuat empat buah file HTML, 3 file berfungsi sebagai halaman yang ditampilkan sedang satu file berfungsi sebagai halaman yang menampilkan. Halaman inilah yang merupakan halaman utama atau halaman yang mengandung frame.

Untuk membuat halaman utama atau halaman yang berframe, kita hanya membutuhkan dua buah tag yaitu <FRAMESET> untuk mengatur pembuatan frame, dan

<FRAME> untuk menentukan file target bagi setiap frame. Baiklah kita mulai membuat file gabung.html ini:

<TITLE>Halaman utama</TITLE> </HEAD>

64 </HTML>

Di atas anda bisa melihat bahwa empat tag yang pertama hanyalah tag pembukaan HTML yang sudah biasa. Sedangkan tag untuk membuat frame adalah tag <FRAMESET> dengan tag penutupnya. Perhatikanlah bahwa halaman yang berframe tidak membutuhkan tag BODY karena yang menjadi isi dari halaman utama ini adalah isi dari halamanhalaman lain yang menjadi target dari setiap frame.

Perhatikan kembali layout halaman berframe yang digambarkan di atas tadi. Halaman tersebut terdiri dari atas dua baris dimana baris pertama (atas) lebih kecil (anggaplah 20%) daripada baris kedua (80%). Dan baris kedua terbagi atas dua kolom dimana kolom pertama (kiri) lebih kecil (anggaplah 30%) daripada kolom kedua (70%). Bagaimana cara mengaturnya?

Pertama, kita membagi halaman menjadi dua baris, baris pertama tingginya 20% dan baris kedua tingginya 80%. Agar lebih bersih dan jelas, tag <HTML>, <HEAD> dan <TITLE> tidak dicantumkan lagi. Ingat, anda harus tetap menuliskannya di dokumen anda.

<FRAMESET

ROWS="20%,80%"> </FRAMESET

Atribut ROWS dalam tag FRAMESET di atas memerintahkan browser untuk membagi halaman menjadi dua baris, baris pertama tingginya 20% dan baris kedua tingginya 80%. Sekarang kita akan mengisi baris pertama dengan frame kosong terlebih dahulu menggunakan tag <FRAME>.

<FRAMESET

ROWS="20%,80%"> <FRAME

66 >

</FRAMESET >

Sekarang kita akan mengisi baris kedua. Sebelumnya kita harus membagi baris kedua ini dalam dua kolom. Untuk itu, kita harus menambahkan lagi sepasang tag

<FRAMESET> yang di dalamnya disisipkan atribut pembagi kolom yaitu COLS. <FRAMESET ROWS="20%,80%"> <FRAME> <FRAMESET COLS="30%,70%"> </FRAMESET> </FRAMESET> Setelah terbagi dalam dua kolom kita harus mengisi setiap kolom tersebut dengan frame. Jadinya seperti ini: <FRAMESET ROWS="20%,80%"> <FRAME> <FRAMESET COLS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </FRAMESET>

Kini selesailah sudah pembuatan file index.html yang merupakan halaman web yang terdiri dari tiga buah frame. Tugas kita tinggal mengisi frameframe yang masih kosong itu dengan filefile yang akan kita tampilkan di dalamnya. Untuk mendefinisikan nama file target pada setiap frame, kita tinggal menambahkan atribut SRC dalam setiap tag

<FRAME>. Contoh:

68 <FRAME SRC="judul.html">

</FRAMESET>

Tentu saja sebelumnya anda harus sudah membuat ketiga file tersebut dan menempatkan keempat file ini dalam folder yang sama. Bila foldernya tidak sama, gunakanlah cara penulisan alamat file seperti cara penulisan alamat file untuk link (lihat kembali pelajaran tentang link yang lalu).

Misalnya kita mempunyai file judul.html seperti ini, file menu.html seperti ini dan file isi.html seperti ini. Maka bila anda membuka file index.html, akan tampaklah sebuah halaman web yang terdiri dari tiga frame seperti ini. (klik masingmasing kata "seperti ini" untuk melihat tampilannya).

Seperti halnya dalam penentuan ukuran tabel, selain menggunakan satuan persen, kita juga bisa menggunakan satuan pixel. Misalnya atribut COLS="200,400" memerintahkan browser untuk membagi halaman menjadi dua kolom dimana kolom pertama lebarnya 200 pixel sedang kolom kedua lebarnya 400 pixel. Bahkan anda pun dapat membagi frame seperti ini COLS="200,*". Apa artinya? Artinya anda membagi halaman menjadi dua kolom dimana kolom pertama lebarnya 200 pixel sedang kolom kedua lebarnya adalah sisa dari ukuran layar monitor. Hal ini berguna karena setting layar monitor yang dipakai oleh user bisa berbedabeda; pada umumnya adalah (lebar x tinggi dalam satuan pixel) 640x480, 800x600 atau 1024x768.

70 Atribut lainnya yang bisa disisipkan dalam tag <FRAMESET> antara lain: BORDER untuk mengatur ukuran border yang memisahkan antara dua frame dan BORDERCOLOR untuk menentukan warna border. Contoh:

</FRAMESET>

Bila dilihat dalam browser, tampak seperti ini. Ukuran

BORDER="2" adalah default sedang ukuran BORDER="0" berarti frame tanpa border.

Sedangkan untuk tag <FRAME> biasanya dilengkapi dengan atributatribut berikut:

1. BORDERCOLOR, fungsinya sama dengan BORDERCOLOR pada tag FRAMESET. Dalam hal ini, warna yang didefinisikan oleh tag yang lebih dalam menang atas warna yang didefinisikan oleh tag yang luar.

2. MARGINHEIGHT untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi frame.

3. MARGINWIDTH untuk menentukan jarak antara batas kiri atau batas kanan frame dengan isi frame.

4. NORESIZE, dengan adanya atribut ini maka border dari frame yang bersangkutan tidak bisa digeser. Dengan kata lain, ukuran frame tersebut tidak bisa diubah (diperkecil atau diperbesar).

5. SCROLLING, mengatur fasilitas scroll (penggulung layar) dari frame. Nilainya bisa YES, NO atau AUTO. Nilai YES berarti penggulung selalu ada, NO berarti penggulung selalu tidak ada, sedang AUTO berarti penggulung ada bila diperlukan (isi frame

72 melebihi ukuran layar) dan tidak ada bila tidak diperlukan (isi frame dimuat oleh layar). Nilai AUTO merupakan nilai default. Artinya, bila atribut

SCROLLING tidak dituliskan, maka penggulung layar otomatis akan muncul bila diperlukan.

6. NAME, untuk memberi nama terhadap frame yang bersangkutan. Kegunaannya akan dijelaskan kemudian.

Berikut sekelumit contoh penggunaan atributatribut di atas:

</FRAMESET> </FRAMESET>

Adapun atribut NAME diperlukan dalam kaitannya dengan fungsi navigasi dari halaman berframe. Misalnya kita ingin mengatur agar suatu link bila diklik akan memunculkan halaman targetnya dalam frame tertentu. Maka terlebih dahulu kita harus memberi nama terhadap frame tersebut. Contoh:

74 Dalam contoh di atas, frame ketiga (frame pada kolom kedua dari baris kedua halaman) kita berinama "utama". Dengan adanya nama tersebut, kita bisa mengatur agar link yang terdapat pada halaman di frame lainnya bila diklik akan memunculkan halaman targetnya pada frame "utama" tersebut. Bingung? Misalnya, pada halaman menu.html terdapat link dengan kode HTML seperti berikut:

<A HREF="bab2.html">BAB II</A>

Bila kata BAB II diklik maka akan membuka file bab2.html. Tapi halaman bab2.html tersebut akan mengisi seluruh jendela browser. Artinya

halaman yang berframe akan hilang. Agar file bab2.html itu muncul pada frame "utama" saja, kita harus memberi atribut TARGET seperti ini:

<A HREF="bab2.html" TARGET="utama">BAB II</A>

Masih ingat, kan tentang atribut TARGET pada pelajaran tentang LINK? Seandainya semua link yang terdapat dalam file menu.html akan kita arahkan pada frame "utama" maka kita bisa menyisipkan tag <BASE TARGET="utama"> diantara tag

<HEAD> dan </HEAD>. Dengan demikian, kita tidak perlu lagi menuliskan dalam setiap link atribut TARGET tersebut satupersatu. Karena dengan adanya tag BASE TARGET itu, secara otomatis, semua link yang ada dalam halaman tersebut akan diarahkan ke frame yang dicantumkan dalam BASET TARGET. Kecuali link yang mempunyai TARGET tersendiri.

Berikut beberapa cara pengarahan link dengan atribut TARGET:

• _blank : halaman yang dipanggil akan muncul pada jendela baru (ini sudah kita pelajari)

70 • _self : halaman yang dipanggil akan mengisi tempat yang sama, bila link tersebut dalam sebuah frame maka halaman yang dipanggil akan mengisi frame tersebut.

• _parent : halaman yang dipanggil akan akan mengisi FRAMESET, satu tingkat lebih tinggi dari FRAME tempat link yang bersangkutan. Biar Menunya OK, Pake Frame

Apa ya frame itu ? Jangan bayangin kayak piguranya foto ya.:) Gampangnya gini. Hompeg yang menggunakan frame itu membagi halaman situs menjadi beberapa bagian, dan tiap bagian menampilkan file yang berbeda. Lihat contoh layout berikut ini: File: "judul.html" File= "menu.html " File= "isi.html"

Lihat layout di atas. Dalam satu layar monitor sebenarnya kita menampilkan tiga buah file yang berbeda, yaitu file judul.html, file menu.html dan file isi.html. Agak mirip dengan waktu pembahasan tabel (membuat layout halaman web), bedanya kalau tabel hanya menampilkan satu file sedangkan ini tiga file. Tentu ada keuntungan tersendiri dong. Tapi sebelum saya bercerita lebih lanjut, kita coba dulu membuat frame, ikuti langkah langkah berikut:

Salin kode HTML berikut kemudian simpan dengan nama "judul.html". Saya sarankan gunakan notepad.

<HTML>

72 Berikutnya salin juga kode HTML berikut dan simpan dengan nama

"menu.html". Jangan lupa untuk menyimpan semua file di folder yang sama. <HTML> <HEAD></HEAD> <BODY BGCOLOR="yellow"> <FONT SIZE=2 COLOR="red"> Menu:<BR> Di sini<BR> Di sana<BR> Di atas </FONT> </BODY></HTML>

Persiapan terakhir, salin tulisan ini (saran saya gunakan copypaste, ee bukannya dari tadi ngomongnya, ngobrol dong) dan simpan dengan nama "isi.html".

<HTML>

Ini adalah isi homepage saya. Keren kan. ;) </FONT>

</BODY> </HTML>

dua, yaitu

<FRAMESET> dan <FRAME>. Terus setelah punya tiga file tadi, kita perlu bikin file

74 induk yang nanti kita namakan ... mmm ... induk.html aja, okey ?!? Isi file induk itu kira kira begini:

<TITLE>Pertama kali bikin frame</TITLE> </HEAD>

<FRAMESET> ...

</FRAMESET> </HTML>

Di antara tag <FRAMESET> dan </FRAMESET> nantinya akan kita isi tag

<FRAME>. Perhatikan juga tidak ada tag <BODY> karena file induk memang tidak memerlukannya. Sekarang kita perdetil file induk kita. Kita akan membuat layout file kita berbentuk seperti di atas, sebuah judul, kemudian menu di samping, dan di kanannya merupakan isi. Berarti dari layout tersebut kita memerlukan dua buah baris (anda masih ingat definisi baris dan kolom bukan, seperti yang kita bicarakan saat tutorial membuat tabel), dan pada baris yang bawah kita bagi menjadi dua buah kolom. Berarti yang kita perlukan adalah seperti ini.

Mmm pelanpelan, pertama saya akan membagi dulu menjadi dua baris, baris atas sebesar

(tepatnya setinggi) 20% dan baris bawah 80%. Kodenya adalah seperti ini.

<TITLE>Pertama kali bikin frame</TITLE> </HEAD>

<FRAMESET ROWS="20%,80%"> ... isi

</FRAMESET> </HTML>

Bisa ngikutin kan ? Perhatikan di mana saya meletakkan tanda petik, ROWS="20%,80%". Sekarang baris yang bawah kita bagi menjadi dua kolom, kiri dan kanan. Kolom kiri selebar 25% dan kolom kanan selebar 75%. Kodenya adalah seperti ini.

<TITLE>Pertama kali bikin frame</TITLE> </HEAD>

<FRAMESET ROWS="20%,80%"> ... isi baris pertama, tidak perlu dibagi <FRAMESET COLS="25%,75%">

.... isi baris kedua, setelah dibagi dua kolom </FRAMESET>

</FRAMESET> </HTML>

Nah kita sudah membagi layoutnya. Kini kita tentukan isinya dengan menggunakan tag <FRAME>. Untuk baris yang atas kita memanggil file judul.html, dan untuk baris bawah kita memanggil file menu.html dan isi.html. Perhatikan kode berikut (catatan untuk FRAME anda tidak perlu menutup dengan tag </FRAME>):

76 <HTML>

<HEAD>

<TITLE>Pertama kali bikin frame</TITLE> </HEAD> <FRAMESET ROWS="20%,80%"> <FRAME SRC="judul.html"> <FRAMESET COLS="25%,75%"> <FRAME SRC="menu.html"> <FRAME SRC="isi.html"> </FRAMESET> </FRAMESET> </HTML>

Selamat. Selesailah frame pertama anda. Simpan kode di atas dengan nama induk.html

(bebas sih namanya), kemudian panggil dengan browser favorit anda.

Secara garis besar anda telah memahami cara membuat frame. Namun kini kita akan memperhatikan atributatributnya secara lebih detil sehingga anda akan dapat mengatur frame anda dengan lebih fleksibel. Kita mulai dengan tag <FRAMESET>. Tag ini memiliki beberapa atribut, seperti bentuk di bawah:

Baik, saya bahas satu persatu.

78 beberapa kolom. Anda dapat menulis COLS="30%,70%" untuk membagi bidang menjadi dua kolom berukuran (urut dari kiri) 30% dan 70%. Juga anda dapat menulis COLS="20%,20%,60%" untuk membagi bidang menjadi tiga kolom, dst. Anda juga dapat membaginya bukan dalam persen, seperti COLS="250,450" yang membagi bidang menjadi dua kolom berukuran 250 pixel dan 450 pixel. Atau bahkan anda dapat membagi menjadi COLS="200,300,*" yang artinya anda membagi menjadi 3 kolom berukuran 200 pixel, 300 pixel dan sisanya. :) Ini akan bermanfaat jika anda tidak yakin lebar halaman seluruhnya, sehingga ukuran frame anda tidak kurang atau berlebihan. Yang lebih asyik, anda dapat membagi menjadi seperti ini COLS="200,*,2*" yang berarti kolom ketiga berukuran dua kali lipat kolom kedua. (Catatan: hatihati saat membagi bidang dalam %, karena ukuran layar yang anda gunakan bisa jadi berbeda dengan pemakai lainnya. Dalam persen, ukuran frame anda akan mengikuti besar layar. Ukuran layar monitor yang umum adalah 640x480, 800x600 dan 1024x768) Seperti halnya COLS, atribut ROWS juga berfungsi membagi bidang.

Bedanya ROWS membagi menjadi beberapa baris, bukan kolom. Aturannya persis sama, bisa dalam persen maupun dalam pixel.

Atribut berikutnya adalah BORDER yang menentukan tebal batas antar frame. Anda dapat menset BORDER="0" (sama dengan tanpa border), BORDER="2" (ada batas tipis) atau BORDER="10" (memakai batas tebal). Anda dapat melihat contoh file yang tadi dengan border="2" dan dengan border="10". Rasakan bedanya.

O, ya kodenya menjadi seperti ini.

<HEAD>

<TITLE>Pertama kali bikin frame</TITLE> </HEAD>

80 <FRAME SRC="judul.html"> <FRAMESET COLS="25%,75%"> <FRAME SRC="menu.html"> <FRAME SRC="isi.html"> </FRAMESET> </FRAMESET> </HTML>

Kemudian atribut BORDERCOLOR berguna untuk menentukan warna pembatas antar frame. Anda dapat mengeset dengan menggunakan istilah seperti BORDERCOLOR="red" ataupun menggunakan kode warna yang

Dalam dokumen BELAJAR MEMBUAT WEBSITE (Halaman 94-131)