Nyimas Artina, S.Kom, M.Si STMIK MDP Palembang. Membuat Tabel Hai. Kali ini saya akan coba membahas cara membuat tabel untuk web page anda. Bayangan anda.

Presentasi berjudul: "Nyimas Artina, S.Kom, M.Si STMIK MDP Palembang. Membuat Tabel Hai. Kali ini saya akan coba membahas cara membuat tabel untuk web page anda. Bayangan anda."— Transcript presentasi:

1 Nyimas Artina, S.Kom, M.Si STMIK MDP Palembang

2 Membuat Tabel Hai. Kali ini saya akan coba membahas cara membuat tabel untuk web page anda. Bayangan anda tentang tabel barangkali tidak akan jauh dari ini. Tetapi kalau anda pernah melihat beberapa web page yang menarik mungkin anda akan tertarik untuk mempelajari bagaimana tag digunakan secara baik di sana! Sebagai ilustrasi, inilah web page yang sama dengan latar belakang abu-abu dan BORDER-nya diperlihatkan.iniweb page yang menarikweb page yang sama Pada dasarnya semua itu hanya memerlukan 3 tag... Tag utama. Digunakan untuk memberitahu browser "ini adalah tabel", bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi.. TableRow menyatakan tiap baris dalam tabel yang merupakan jajaran (TableData) sel. Menyatakan masing-masing blok atau sel pada setiap baris. Jadi bisa kita katakan: Tabel terdiri dari baris yang merupakan susunan sel...

3 <--Ini-----adalah----baris----sebuah-----tabel--> sel Itulah tabel secara garis besar. Anda sekarang persiapkan diri untuk membuat beberapa tabel! Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat terbatas. Dan hasil akhirnya mungkin tidak akan seperti yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk dipakai adalah editor berbasis teks. Program-program ini akan mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya untuk anda.

4 Seperti biasa, langkah pertama adalah membuka Notepad (ya, NOTEPAD!), dan ikuti saya. Tuliskan baris-baris di bawah ini; atau lebih mudah gunakan "cut and paste" - potong dan tempelkan - baris-baris tersebut. Membuat tabel Simpan dengan nama tabel1.html di suatu folder, misalnya tutorial. Folder ini juga akan dipakai untuk menyimpan beberapa file yang lain, jadi sebaiknya dikhususkan untuk itu. Buka browser anda (Netscape atau Internet Explorer) dan gunakan untuk membuka file tabel1.html yang baru anda buat tadi. Jangan menutup Notepad! Biarkan kedua program tersebut tetap di layar komputer. Dengan cara ini anda bisa membuat tulisan anda di Notepad dan langsung melihat hasilnya dengan browser. Lihat, anda tidak butuh "editor canggih yang amat sangat nudah dipakai" untuk melakukannya. Cukup Notepad.

5 Mulailah membuat tabel anda dengan mengetikkan tag yang diperlukan. Tag ini berarti "awal tabel" dan "akhir tabel". Membuat tabel Setiap tabel membutuhkan paling tidak satu baris. Membuat tabel Dan tentu saja setiap tabel harus memiliki paling sedikit satu sel data. Membuat tabel

6 Agar lebih mudah dan jelas, saya hanya akan menuliskan apa yang ada di antara tag awal dan akhir tabel. Tag head, body, title, dll tidak saya tuliskan. Tentu saja anda tetap membutuhkannya di dokumen anda. Sekarang anda perlu sesuatu untuk diisikan ke dalam sel. Bagaimana jika Bram? Oke, masukkan Bram ke dalam sel. Bram Wow....... anda telah menghasilkan tabel anda yang pertama! Bukalah dengan browser dan lihatlah. Jika anda melakukan semuanya dengan benar, tabel anda akan tampak seperti tabel berikut:

7 Bram Becanda nih! Haha! Jangan marah ya, nggak usah dimasukkan hati. Inilah yang sebetulnya anda buat.... BramApapun juga, itu adalah tabel html! Berbanggalah! Pelajaran 2 Oke, kita sudah membuat ini.... Bram...yang menghasilkan ini: BramPertama-tama mari kita buat agar lebih tampak seperti tabel dengan membuat garis batas. Setiap kali anda membuat perubahan dan ingin melihat hasilnya, simpan dengan Notepad dan klik tombol Reload/Refresh pada browser anda. Bram BramMungkin anda ingin batas yang lebih besar? Bram

8 Saya akan tunjukkan sesuatu yang lain kepada anda. Gambar juga dapat dipakai (dan dimanipulasi) di dalam sel. Di dalam folder yang berisi file ini anda akan menemukan gambar kecil dengan nama orang.gif. Copykan ke folder anda sendiri yang berisi file tabel1.htm (tutorial, jika anda mengikuti saya sejak awal). Gantilah Bram dengan tag IMG seperti di bawah ini. Saya pikir ini adalah saat yang tepat untuk menekankan pentingnya penggunaan ukuran dalam setiap gambar anda. Saya tidak akan berpanjang lebar, tapi hal itu akan memudahkan browser dan menghindarkan anda dari kejutan-kejutan kecil yang tidak menyenangkan.

9 Materi 8 Membuat Form Hai. Saya akan menunjukkan bagaimana membuat web page yang bersifat interaktif dengan penggunaan tag. Dengan tag ini anda dapat membuat buku tamu, formulir pemesanan, survey, meminta komentar atau apa pun di web site anda. Pada dasarnya, form html mempunyai bentuk seperti ini.... awal form minta masukan menggunakan salah satu dari beberapa cara........anda bisa gunakan berapa pun input yang anda inginkan akhir form Itulah form html secara garis besar. Dengan ini anda siap membuat form untuk web site anda. Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat terbatas. Dan hasil akhirnya mungkin tidak akan seperti yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk dipakai adalah editor berbasis teks. Program-program ini akan mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya untuk anda. Meskipun tutorial ini tidak dikhususkan untuk browser tertentu, tampilan yang anda lihat mungkin sedikit berbeda tergantung browser yang anda pilih.

10 Pelajaran 1 Mulailah dengan membuka Notepad, kemudian copykan baris-baris di bawah ini: Membuat form html Simpan dengan nama form1.html di folder khusus untuk itu. Buka browser anda (Netscape atau Internet Explorer), dan buka file form1.html tadi. Biarkan Notepad tetap terbuka sehingga apa yang anda tuliskan di situ bisa langsung anda lihat hasilnya di browser. Klik tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di Notepad. Tuliskan form anda. Membuat form html Selanjutnya browser harus mempunyai cara untuk mengirim data yang didapat kepada kita. Ada dua hal yang dapat anda lakukan: 1) anda dapat mengirim data tersebut ke suatu program/cgi script untuk diproses, atau 2) anda dapat meminta browser untuk mengirim data tersebut melalui email kepada anda. Cara pertama memerlukan pemahaman tentang pemrograman web yang ada di luar cakupan tutorial ini (saya akan coba jelaskan dalam tulisan-tulisan selanjutnya). Cara kedua, biasa disebut mailto form, memerlukan beberapa hal untuk ditambahkan dalam tag. Membuat form html

11 Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan alamat email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di atas. Tulisan FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar, tetapi harus ada spasi di antara setiap atribut tadi... di antara FORM & METHOD, di antara POST & ACTION, dan antara.xxx" & ENCTYPE. Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini... NAMAFORM=Daftar+Anggota&NAMA=Bram+D.+Wardhana&ALAMAT=Jl.+Bali+No.+13 &KOTA=Semarang&Propinsi=Jawa+Tengah Padahal yang anda inginkan adalah format yang lebih mudah kita pahami seperti ini... NAMAFORM=Daftar Anggota NAMA=Bram D. Wardhana ALAMAT=Jl. Bali No. 13 KOTA=Semarang PROPINSI=Jawa Tengah Ada beberapa program yang dapat digunakan untuk mengubah format tersebut, misalnya Mailto Formatter Program kecil ini sangat bagus dan bisa anda dapatkan secara gratis (freeware) di internet. Contoh di atas menunjukkan bahwa form html tidak lebih dari nama masukan (NAMA, ALAMAT, dll) yang dipasangkan dengan nilai masukan (Bram D. Wardhana, Jl. Bali No. 13, dll). Satu-satunya variabel adalah bagaimana cara kita mendapatkan data-data tersebut.

12 Pelajaran 2 Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di antara tag. Saya tidak akan menuliskan tag head, body, title dan form itu sendiri. Sudah jelas bahwa anda harus tetap menuliskannya di dalam dokumen anda. Bentuk masukan (TYPE of ) yang paling umum digunakan dalam form html adalah TEXT. Setiap masukan memerlukan nama (NAME). Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan menjadi nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah dijalankan pada Mailto Formatter adalah ALAMAT=Jl. Bali No. 13. Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan. Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali anda mengubahnya. Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas. Kita dapat juga menentukan panjang kotak masukan.

13 Pelajaran 3 Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih satu atau lebih atau semua pilihan. Pertama-tama kita lihat Radio Buttons. Tambahkan 2 lagi. Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing. Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan segera tampak berikut ini. Setiap Radio Buttons harus diberi VALUE.

14 Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap. Jangan frustasi, saya sendiri sering merasa bingung. Itulah sebabnya saya sangat mengandalkan catatan/referensi tentang html. (Anda pikir saya menyimpan semuanya di kepala saya??) OK, masing-masing kita beri label/nama. Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih beberapa di antaranya sebagai default. Kalau anda mau, tentu saja. Siapakah di antara mereka yang merupakan sahabat anda? Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli

15 Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda gunakan sebagai pengganti dan anda harus tambahkan tag penutup. Mari kita coba. Jangan lupa beri nama. Kemudian tambahkan beberapa option. Edi Ricky Tomi Reza Dan setiap kita beri VALUE. Edi Ricky Tomi Reza Defaultnya adalah pilihan pertama dalam daftar. Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam daftar. Edi Ricky Tomi Reza

16 Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List. Pertama-tama kita tambahkan dulu beberapa nama. Edi Ricky Tomi Reza Arie Putri Maria Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag. Edi Ricky Tomi Reza Arie Putri Maria Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan?

17 Saya tidak punya alasan mengapa anda akan mengubah default pada Scrolling List ini, tetapi karena memang bisa diubah saya rasa saya harus menjelaskannya. Bentuk masukan lain yang sangat berguna adalah. Anda menentukan besarnya kotak masukan dengan cara.... ROWS adalah tingginya, COLS adalah lebarnya. Satu atribut yang cukup membantu dalam adalah WRAP. Mungkin ada browser yang tidak mengenal perintah ini, tapi jika demikian, perintah ini akan diabaikan. Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan.... WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat panjang yang tidak terputus. Lakukan hal yang sama dengan ini....

18 Bentuk lain dari masukan adalah HIDDEN input. HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan diprosesnya. Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda tanyakan. Masalahnya adalah, anda ingin menempatkan form tersebut di beberapa web site untuk menjaring sebanyak mungkin masukan. Anda perlu cara untuk mengetahui web site mana yang memberikan kontribusi terbanyak. Apa yang akan anda lakukan? Anda bisa menambahkan HIDDEN input ke dalam form anda seperti ini....... untuk web site pertama... untuk web site kedua... untuk web site ketiga Dan seterusnya dan selanjutnya.... Sebetulnya, anda bisa gunakan pasangan nama/nilai apapun dalam hidden input ini (bahkan dalam setiap jenis input). Saya menggunakan "JAJAKPENDAPAT" untuk memperjelas. Kalau anda pikir terlalu panjang, bisa anda gunakan "JP". Contoh berikut ini tetap merupakan HIDDEN input yang sah....... Anda akan dapatkan E=Mc^2 HIDDEN input juga sangat berguna dan banyak dipakai untuk pemrograman/cgi script. Bentuk terakhir dari input adalah tombol SUBMIT dan RESET. Kedua perintah ini sangat sederhana.... SUBMIT, tentu saja, dipakai untuk mengirim data yang anda masukkan ke dalam form.......dan RESET, menghapus seluruh isi form.