MODUL 3 HTML. (HyperText Mark-Up Language) Sub : Tabel & Form

Transkripsi

1 MODUL 3 HTML (HyperText Mark-Up Language) Sub : Tabel & Form Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang

2 Pertemuan Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah HTML 2. Mahasiswa dapat membuat beberapa halaman website sederhana 3.2 Materi : 1. Tabel 2. Tag tag Tabel 3. Form 4. Tag Input Form 5. Tag Select atau Daftar 6. Tag Isian Form 3.3. HTML Forms Pada saat membuat form anda bisa meletakkan control -control pada form untuk memperbolehkan inputan dari user. semua control biasanya di letakkan di antara tag <FORM></FORM> tapi anda juga bisa meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag <input>. Kegunaan Form Berikut ini beberapa contoh kegunaan Form dalam web: 1. memperoleh data-data user baik nama, alamat dan data lainnya 2. memperoleh informasi pembelian secara online 3. memperoleh feedback dari user mengenai website anda Pada dasarnya tag <Form> dan <Input> digunakan bersama sama untuk meminta masukan dari user kemudian dikirimkan ke server. Tag <Form> menyediakan kerangkanya. Tag <Input> menyediakan elemennya. Standar penulisan form adalah sebagai berikut: <Form Method = POST / GET Action = URL >... </Form> Attribute Method memiliki dua nilai, yaitu POST dan GET. Method GET berfungsi untuk mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL(Uniform Resource Locator) yang ditunjuk. Method POST berfungsi untuk mengirimkan datanya secara terpisah. Jika data masukkan terlalu banyak, disarankan menggunakan method POST. Attribut ACTION berisi URL dari program / dokumen yang berisi scripting yang dipanggil oleh form tersebut.

3 3.3.1 HTML Input Macam macam control input: Untuk tag <INPUT> yang atribut TYPE-nya text memiliki atribut lainnya yaitu: 1. NAME menamai kotak 2. VALUE menandai atau menampung teks 3. SIZE mengatur ukuran teks pada kotak 4. MAXLENGTH menentukan panjang maksimum teks Contoh Syntax : TextBox <Input Type = text /> CheckBox <Input Type= ChekBox /> RadioButton <Input Type= Radio /> Submit Button <Input Type= Submit /> Reset Button <Input Type= Reset /> HTML Select & HTML Isian Selain tag <input> masih ada tag lain yang biasa digunakan dalam form yaitu tag <select> Dan <textarea>. Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected,dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION. Sintaks: <option

4 selected value="number" >... </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> 3.4 LATIHAN PRAKTIKUM PENGGUNAAN TABEL 1. Tag-tag yang digunakan : <TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai. <CAPTION> menentukan judul tabel <TR> membuat baris dalam tabel <TH> membuat judul kolom <TD> membuat sebuah sel data 2. Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN> a. Atribut ROWSPAN ditempatkan pada tag <TD>

5 b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH> 3. Pengaturan jarak dalam tabel : CELLSPACING mengatur jarak bagian sel terhadap tepi dalam bingkai tabel. CELLPADDING mengatur jarak teks terhadap tepi kiri PENGGUNAAN FORM 1. Input data dengan input File info.htm yang dituju oleh web diatas.

6 2. Penggunaan tipe checkbox 3. Penggunaan tombol radio dan komentar 4. Pemilihan dengan select

7 3.5 TUGAS 1.Buatlah seperti tampilan dibawah ini Nb : untuk kolom Negara isi dengan 1. USA, 2.Australia, 3. Germany 2.Buatlah Tabel