Hyperlink & Form Pertemuan 11

Presentasi berjudul: "Hyperlink & Form Pertemuan 11"— Transcript presentasi:

1 Hyperlink & Form Pertemuan 11
Matakuliah : L0182 / Web & Animation Design Tahun : 2008 Hyperlink & Form Pertemuan 11

2 Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu : Membuat Web sederhana dengan menggunakan hyperlink dan form Bina Nusantara

3 Outline Materi Hyperlink Atribut Target Atribut Name
Image sebagai Link Form Text Fields Text Area Radio Buttons Checkboxes Drop-down Box Button Atribut Action dan Method Bina Nusantara

4 Hyperlink HTML menggunakan tag <a> (anchor) untuk membuat suatu link ke dokumen lain. Suatu anchor dapat terhubung ke berbagai sumber di Web : suatu halaman HTML, suatu image, suatu file suara, suatu movie, dan lain-lain. Tag <a> digunakan untuk membuat suatu anchor untuk membuat link dari, atribut href yang berisi alamat dari dokumen yang akan di hubungkan, dan kata-kata di antara anchor pembuka dan penutup akan ditampilkan sebagai suatu hyperlink. Bina Nusantara

5 Hyperlink (cont..) Bina Nusantara

6 Atribut Target Dengan atribut target, dapat didefinisikan di mana dokumen yang terhubung akan dibuka. Potongan program berikut akan membuka dokumen ke suatu browser baru : Bina Nusantara

7 Atribut Name Atribut name digunakan untuk memberi nama suatu anchor.
Ketika menggunakan anchor yang memiliki nama, kita dapat membuat link yang akan langsung membawa ke bagian tertentu dari suatu halaman, tanpa harus melakukan scrolling untuk mencari bagian tersebut. Potongan program berikut mendefinisikan nama suatu anchor : Untuk menghubungkan langsung ke bagian “tips”, tambahkan tanda # dan nama dari anchor di akhir suatu URL, seperti berikut : Suatu hyperlink untuk ke bagian “Useful Tips” dari bagian suatu file, terlihat sebagai berikut :  Bina Nusantara

8 Atribut Name (cont..) Bina Nusantara

9 Image sebagai suatu Link
Bina Nusantara

10 Form Form adalah suatu area yang dapat berisi elemen-elemen form.
Element-elemen form adalah elemen yang memungkinkan user untuk mengisi informasi (seperi text fields, textarea fields, drop-down menus, radio buttons, checkboxes, dan lain-lain) dalam suatu form. Suatu form didefinisikan dengan tag <form>. Tag form yang paling sering digunakan adalah tag <input>. Tipe input dispesifikasikan dengan atribut type. Bina Nusantara

11 Text Fields Text fields digunakan agar user dapat mengetikkan huruf, angka dan lain-lain dalam suatu form. Di kebanyakan browser, lebar dari text field secara default adalah 20 karakter.  Bina Nusantara

12 Text Area Text Area dimungkinkan sebesar ukuran halaman, dan akan diekspan seperlunya jika user mengisi text lebih dari yang dapat ditampilkan oleh layar. Bina Nusantara

13 Radio Buttons Radio Buttons digunakan jika user diharuskan memilih satu jawaban dari suatu daftar jawaban. Bina Nusantara

14 Checkboxes Checkboxes digunakan jika user dimungkinkan memilih lebih dari 1 jawaban dari suatu daftar jawaban Bina Nusantara

15 Drop-down Box Bina Nusantara

16 Button Button “Submit” harus selalu dibuat untuk suatu form sehingga user dapat menyampaikan informasi ke sistem. Button “Reset” digunakan jika user ingin mengulang isian dari awal dengan form yang baru. Bina Nusantara

17 Atribut Aksi dan Method
Ketika button “Submit” ditekan, isi dari form dikirim ke file lain. Atribut action dari form mendefinisikan nama file yang akan dikirimi isi form. Atribut method menspesifikasikan metode apa yang digunakan untuk mentransfer data form ke suatu web server. GET mengirimkan data sebagai bagian dari URL. Sebagai contoh : misalkan user memasukkan "West Rochester" pada field “Kota”, maka URL halaman penerima data akan jadi sebagai berikut ../cgi-bin/mycgi.pl?town=West+Rochester POST merupakan metode yang lebih disuka untuk mengirimkan data yang panjang. Ketika form di-submit menggunakan POST user tidak melihat data yang dikirimkan pada alamat URL halaman penerima data. Bina Nusantara

18 Atribut Action dan Method(cont..)
Jika kita mengetik karakter dalam text field di atas, dan menekan button "Submit“, input akan dikirim ke halaman "html_form_action.asp". Bina Nusantara