#JOBSHEET 2 HTML: Frame, Frm I. TUJUAN 1. Menguasai sintaks dasar pembuatan web dengan HTML. 2. Memahami dan mampu membuat tabel dalam dkumen HTML 3. Memahami dan mengaplikasikan pembuatan frame dalam dkumen HTML 4. Menguasai dasar pembuatan frm dalam dkumen HTML sebelum mampu memanfaatkan database system II. DASAR TEORI 1. Membuat Frame Frame digunakan untuk membagi halaman brwser menjadi beberapa bagian, dengan tampilan yang dapat diatur tersendiri. Sebuah halaman web dengan frame merupakan halaman web yang khusus mendefinisikan ukuran dan lkasi tiap kandungan frame. Halaman dengan frame paling sederhana adalah dengan dua frame, yaitu satu untuk menampilkan daftar hyperlink (atau sering disebut dengan navigasi) dan yang lain untuk menampilkan halaman yang ditunjukkan leh daftar hyperlink tersebut. Isi dari frame tidak lain adalah suatu halaman yang lain. Tag <frameset> digunakan untuk membagi halaman website menjadi beberapa bagian frame Tag <frame> digunakan untuk mendefinisikan sebuah frame dalam sebuah halaman web. Setiap frame memiliki tinggi (rws) dan lebar (cls) Beberapa atribut dalam frame NAME : Menentukan nama dari bjek frame, Nama ini dapat di gunakan sebagai tujuan sebuah link ROWS : Membuat frame secara mendatar (baris) sekaligus mendefinisikan lebar masingmasing COLS : Membuat frame secara vertikal (klm) sekaligus mendefinisikan lebar masingmasing BORDERCOLOR : Mendefinisikan warna bingkai frame BORDER : Menentukan ukuran bingkai frame SRC : Menentukan nama file HTML yang digunakan sebagai isi frame SCROLLING : Menentukan apakah dapat memiliki scrll bar, nilainya adalah yes, n, aut 1
NORESIZE : Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya MARGINHEIGHT : Menentukan batas atas dan bawah antara dkumen dengan bingkai dalam pixel MARGINWIDTH : Menentukan batas kiri dan kanan antara dkumen dengan bingkai dalam pixel Gambar 3.2. Penggunaan Tag Frame dengan Beberapa Atribut dan Nilai Yang perlu diingat, apabila hendak membuat frame dengan cara ini minimal diperlukan 2 buah file *.html. Cnth di atas memerlukan 4 file *.html plus sebuah file *.html khusus untuk membagi frame tsb. Cnth frame di atas sudah merupakan frame campuran antara frame baris dan klm Cnth Penggunaaan Frame i) Hasil Pencarian Untuk mempermudah dan meringankan beban kerja web, maka pada beberapa search engine menggunakan metde frame untuk menampilkan hasil pencariannya. Sehingga, frm untuk pencarian masih tetap terus muncul, dengan hasil yang akan ditampilkan pada frame yang lain.metde ini juga bisa digunakan bila kita ingin menggunakan search engine yang sudah ada (misalnya Yah, Ggle, HtBt, dan lain-lain) pada halaman kita. Frame kita bagi dua, atas dan bawah. Bagian atas kita beri frm tempat mengisi kata-kata yang akan dicari, dan bagian bawah untuk hasilnya. 2
ii) Banner, menu dan navigasi Pada beberapa situs, frame digunakan untuk memunculkan banner atau menu pada setiap halaman di web tersebut. Cnthnya adalah beberapa web freemail, seperti Yah!Mail. Pada Yah!Mail, menu di frame kiri akan muncul terus, untuk memberikan bantuan link ke berbagai menu yang ada di web tersebut. iii) Clacking page Clacking page berarti menyembunyikan halaman. Dengan memanfaatkan frame yang didefinisikan mengisi sehalaman penuh, maka setiap kali mengunjungi link yang ada pada halaman tersebut, maka alamat yang ditunjukkan leh web brwser, seperti Internet Explrer dan Netscape, akan tetap menunjukkan alamat halaman yang menggunakan frame tersebut. 2. Membuat Frm/ input Frm adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif, karena akan mendaptakan umpan balik dari pengunjung situs web. Frm dapat digunakan untuk membuat buku tamu, frmulir pemesanan, survey, meminta kmentar, halaman lgin, halaman registrasi/ pendaftaran dan lain sebagianya. Adapun cara untuk membuat frm adalah dengan menggunakan elemen FORM kemudian ditambah dengan kmpnen-kmpnen pembentuk frm seperti input, checkbx, ptin dan sebagainya. Sebelumnya perlu diketahui bahwa untuk membuat sebuah frm yang dapat dikirim dan diprses di server akan melibatkan PHP dan SQL. Task ini hanya mempelajari dasarnya saja yaitu bagaimana cara menampilkan sebuah frm yang baik. Sebuah frm di tuliskan dalam html dengan tag <frm>. Frm banyak sekali menggunakan fungsi input, tag input sendiri di tulis dengan <input>. Untuk diperhatikan: frm tidak dapat berupa nested (bersarang). Perintah untuk membuat frm yaitu : Methd digunakan untuk menentukan bagaimana frm diberlakukan, sedang actin diisi dengan URL file yang akan melakukan pemrsesan frm selanjutnya. URL adalah lkasi 3
dkumen yang akan melakukan prses terhadap input dari frm.. Input adalah sesuatu yang dimasukkan leh pembaca halaman web misalnya teks. Input dalam frm dimasukkan leh user dan terdiri dari beberapa tipe. Input yang dimasukkan user ini selanjutnya akan diprses di lkasi file yang telah dimasukkan dalam atribut actin pada tag FORM. Meskipun tag INPUT ini terdiri dari berbagai macam tipe, namun secara default type dari tag INPUT ini adalah "text". Suatu frm bisa mempunyai beberapa jenis input yang berbeda. Berikut ini adalah atribut-atribut yang berlaku dalam tag <INPUT> type = [ text passwrd checkbx radi submit reset file hidden image buttn ] Text - input data berupa text inputan biasa berupa huruf, angka, simbl, dan lain-lain (seluruh karakter yang berada di keybard) <frm> Nama : <input type="text" name="nama" /><br /> Email : <input type="text" name="email" /> </frm> Passwrd - input data berupa kata sandi. ketika diketikkan yang tampil adalah berupa kde *** atau tergantung pada settingan default brwser <frm> Nama : <input type="text" name="nama" /><br /> Email : <input type="text" name="email" /> </frm> Checkbx - input data berbentuk pilihan yang dapat dipilih lebih dari satu Warna fvrit anda?<br /> <frm><input name="clr" type="checkbx" value="red" />Merah<br /> <input name="clr" type="checkbx" value="blue" />Biru<br /> <input name="clr" type="checkbx" value="black" />Hitam </frm> Radi - input data berupa pilihan (ptin) yang hanya bisa memilih satu pilihan 4
<frm> <input type="radi" name="kelamin" value="pria" />Laki-laki<br /> <input type="radi" name="kelamin" value="wanita" /> Perempuan </frm> Submit - input frm bebrntuk tmbl yang berfungsi untuk mengirim seluruh input frm untuk kemudian di prses leh file actin. Input ini juka tidak diberi value atau nilai (captin) akan menjadi Submit Query Submit <frm name="input" actin="daftar_nama.html" methd="get"> Nama : <input type="text" name="nama" /><input type="submit" value="lg In" /> </frm> Reset - input frm berupa tmbl juga yang fungsinya untuk mengembalikan nilai input suatu frm ke nilai default. Input ini memiliki value Reset jika Anda tidak mendefinisikannya Reset File - input berupa file yang dipilih dari drive kmputer. Kegunaannya adalah untuk menguplad file ke server. <frm><input type="file" name="nama" _cke_saved_name="nama" _cke_saved_name="nama" _cke_saved_name="nama" _cke_saved_name="nama" _cke_saved_name="nama" _cke_saved_name="nama" /></frm> Hidden - input data yang tersembunyi dan tidak tampil atau terlihat di brwser <frm> <input type="hidden" name="rahasia" /></frm> Image - fungsinya sama seperti submit namun tmbl ini berupa bjek image yang harus didefinisikan dengan tag src="lkasi_image" Buttn - input yang hanya berupa tmbl. Ketika di klik tidak akan ada aksi apapun. Berbeda dengan submit dan reset, tipe ini tidak akan memiliki captin jika Anda tidak mendefinisikannya 5
Sebagai tambahan : Textarea- textarea biasa digunakan untuk memasukan inputan yang membutuhkani klm yang lebar. Seperti pada klm kmentar, alamat, dll. berbeda dengan tipe inputan lainya, text area mempunyai tag tesendiri dengan menuliskan secara langsung dengan tag <textarea> tetapi tetap dalam tag <frm> Alamat<br /> <frm> <textarea name=text></textarea> </frm> Fieldset-kita dapat mempercantik frm kita dengan berbagai cara, seperti menambahkan tabel atau yang lainya. saya akan memberi tahu cara menggukan fieldset. Hasilnya sepertikita memberi bingkai pada sebuah frm. <fieldset> <legend> Nama Anda</legend> <frm actin="#"> Nama Depan<input type="text" size="3"> Nama Belakang <input type="text" size="3"> </frm> ></fieldset> Select- Input ini berupa drpdwn dimana user cukup mengklik salah satu pilihan pada list yang tersedia. Atribut yang digunakannya sama seperti input-input sebelumnya, namun khusus untuk size, berfungsi untuk menentukan banyaknya baris yang ditampilkan dalam drpdwn. Secara default input select hanya dapat memilih satu pilihan saja, namun bisa juga memilih lebih dari satu hanya dengan menambahkan atribut multiple. Bila multiple dipih dalam tag select, untuk memilih lebih dari satu user harus memilih ptin sambil menekan tmbl CTRL pada keybard disarankan untuk memberi size lebih dari 1, misalnya 2 atau 3. Untuk mendefinisikan pilihan-pilihan yang tersedia dalam input SELECT ini diperlukan tag <OPTION>...</OPTION> <select size="1" name="ptin"> <ptin>optin 1</ptin> <ptin>optin 2</ptin> <ptin>optin 3</ptin> <ptin>optin 4</ptin> 6
</select> <ptin>optin 5</ptin> Tabel berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu frm. Elemen Atribut Fungsi INPUT TYPE Bentuk input. Diisi dengan TEXT atau PASSWORD NAME Nama kmpnen input text ******** VALUE Isi/nilai dari kmpnen input SIZE Panjang kmpnen input MAXLENGTH Batasan panjang penulisan isi input INPUT TYPE Bentuk input. Diisi dengan RADIO atau CHECKBOX NAME Nama kmpnen radi atau checkbx VALUE Isi/nilai dari kmpnen radi atau checkbx CHEKED Batasan panjang penulisan isi radi atau checkbx SELECT NAME Nama kmpnen select /pull dwn list OPTION Pilihan dalam list VALUE Isi/nilai dari list SIZE Ukuran list SELECTED Optin yang dipilih TEXTAREA NAME Nama kmpnen textarea ROWS Jumlah baris pada textarea COLS Jumlah klm pada textarea INPUT Submit Reset TYPE VALUE Bentuk masukan tmbl. Diisi dengan SUBMIT atau RESET Judul pada tmbl III. ALAT 1. Perangkat kmputer 2. Sistem perasi 3. Editr teks sederhana (Ntepad) 4. Web brwser IV. LANGKAH KERJA 1. Menyiapkan alat praktek. 2. Selalu memperhatikan keselamatan kerja. 3. Jalankan prgram yang dibutuhkan. 4. Mengrganisasikan dengan baik flder pribadi untuk masing-masing praktikum dengan menyimpan seluruh hasil latihan dan tugas dalam flder MODUL3, dikumpulkan dalam flder utama Praktek Teknlgi Web. 7
V. TUGAS 1. Buat dkumen html yang menampilkan anggta keluarga anda beserta data diri dan ft silakan berkreasi dengan tabel ataupun frame dan memanfaatkan pengetahuan yang telah anda dapat dari praktek sebelumnya, beri nama Jbsheet2a.html pada flder JOBSHEET 2 2. Buat frm lamaran kerja pada suatu perusahaan yang harus diisi leh pelamarnya, diskusikan data apa saja dan bagaimana bentuknya asisten praktek, simpan dengan nama Jbsheet2b.html. 8