html

Suatu ketika sang designer kita ini bertemu dengan seorang wanita cantik yang meminta bantuannya untuk dibuatkan sebuah katalog untuk promosi perusahaan nya. Kebetulan sekali wanita cantik yang ditemui nya itu adalah seorang Akuntan merangkap sebagai sekretaris, maklumlah namanya juga wanita cantik jadi tidak heran kalau pekerjaan rangkap di embannya. Karena begitu cantik nya wanita itu maka sang designer kita ini dengan senang hati membantu, sekaligus memamerkan keahlian nya dengan maksud mengambil hati wanita itu. Tapi ooh..., untuk membuat katalog itu diperlukan sebuah keahlian menata tempat dari obyek-obyek yang diperlukan, selain itu dalam katalog yang akan dikerjakan nya itu diperlukan sebuah TABEL untuk merinci mengenai produk-produk yang ada. Bukan itu saja, dalam katalog itu juga dibutuhkan suatu FORM ISIAN untuk kostumer yang akan memilih jenis produk yang di inginkan.

Akhirnya sang designer kita ini berpikir keras, bagaimana caranya untuk menyelesaikan katalog itu, sambil merenung dia bertanya-tanya dalam hati. Dapatkah sebuah dokumen HTML dibuat seperti itu ?, desahnya. Tabel, Form, Tata letak...!, uh... sulit sekali, keluhnya. Kini saatnya untuk Anda membantu sang designer kita yang sedang kebingungan ini. Penempatan obyek, Form dan tabel dapat dilakukan oleh dokumen HTML, dengan beberapa TAG dan Atribut. Beritahu kepadanya bahwa pembuatan katalog itu dapat dia kerjakan dengan baik dan dapat ditampilkan dengan sempurna. Dan katakan juga padanya bahwa dia tidak perlu putus asa untuk mendapatkan apa yang dia mau.

PEMBUATAN TABEL, TATA LETAK SUATU OBYEK DAN FORM

Tabel merupakan hal yang paling penting untuk dikuasai oleh seorang designer web. Karena dengan tabel inilah hampir semua design web dari situs-situs terkenal menggunakannya. Situs ini juga menggunakan tabel dalam hal penempatan obyek-obyek yang dibutuhkan, sebagai contoh coba Anda perhatikan setiap halaman dalam tutorial ini. Disitu Anda melihat ilustrasi Gambar dan keterangan Teks di kolaborasikan antara satu dengan yang lain dengan menggunakan tabel. Dapatkah kita menggunakan tata letak suatu objek dalam format HTML selain tabel..?, jawabnya bisa. Selain tabel kita juga dapat meletakkan suatu obyek yang kita inginkan dengan menggunakan system CASCADING STYLE SHEET, yang biasanya digunakan oleh program-program WYSIWYG HTML BUILDER, tetapi system ini terkadang tidak kompatibel dengan beberapa browser. Jadi mungkin saja di browser A tata letak nya sudah sesuai, tetapi di browser B tata letak nya berbeda lagi, selain itu system ini juga menggunakan atribut-atribut yang tidak praktis dan cukup membuat pusing, sebab kita harus menguasai betul pixel-pixel dari suatu browser. Contoh : kita akan menempatkan suatu obyek katakanlah itu huruf A di pojok sebelah kanan pada baris ke 5 dari browser. maka penulisan nya menjadi seperti berikut ini : <div id="text1" style="position: absolute; overflow: hidden; left: 893px; top: 36px; width: 18px; height: 23px; z-index: 0; "> <div class="contoh"> <div><font class="contoh1"><b>A</b></font></div> </div> </div> Bisa Anda bayangkan, bahwa untuk menempatkan satu obyek saja sudah begitu rumit, apalagi harus membuat satu halaman penuh obyek-obyek yang berlainan posisinya. Memang bila Anda menggunakan Program HTML BUILDER hal itu tidak terasa kesulitan nya, tapi itu akan membuat Anda menjadi tidak kreatif dan tidak tahu bagaimana jalannya program dari design yang kita buat sendiri, selain itu penempatan objek nya menjadi statis tidak dinamis. Oleh karena itulah penggunaan system ini kurang populer, jadi tetap saja orang kembali menggunakan tabel untuk menempatkan objek-objek yang dibutuhkan. Karena semua browser akan menampilkan tata letak yang sama dengan menggunakan tabel ini. Dan yang terpenting adalah selain kita tahu dimana letak obyek tersebut juga mudah bagi kita untuk merubahnya bila ada yang akan kita rubah di lain hari. TAG untuk membuat TABEL yang wajib dikuasai.

<table> : Tag ini merupakan inti dari perintah untuk membuat tabel pada dokumen HTML </table> : Tag ini merupakan penutup dari perintah untuk membuat tabel pada dokumen HTML <thead> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah HEADER atau Bagian yang paling atas dari sebuah tabel. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah </thead> <tbody> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah BODY atau badan dari suatu tabel, bisa juga isi dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah </tbody> <tfoot> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah FOOTER atau bagian akhir dari suatu tabel, bisa juga merupakan sebuah penutup dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah </tfoot> <tr> : Tag ini digunakan untuk membuat BARIS pada suatu tabel, dan merupakan satu kesatuan dengan perintah <table>, penulisan nya pun harus setelah Tag ini. Setiap perpindahan BARIS harus ditutup dengan perintah </tr> <td> : Tag ini digunakan untuk membuat KOLOM pada suatu tabel, dan merupakan satu kesatuan dengan perintah <table>, penulisan nya pun harus setelah Tag ini. Setiap perpindahan KOLOM harus ditutup dengan perintah </td> <th> : Tag ini fungsinya hampir sama dengan tag <td> hanya bila kita menggunakan tag ini, maka border (garis luar) dari tabel tidak ditampilkan, dan karakter yang ada dalam perintah ini akan di anggap Header sehingga hurufnya menjadi agak besar dan dicetak tebal oleh browser. Tag ini merupakan bagian dari tag <tr>, penulisan nya pun harus sesudah tag <tr>. Atribut dari tag ini adalah : scope dengan value nya col untuk KOLOM dan row untuk BARIS. (lihat contoh penggunaannya dibagian bawah) Untuk atribut-atribut dari tabel akan dibahas pada bagian tersendiri. Urutan penulisan tabel pada umumnya seperti dibawah ini <table> <thead> <tr> <td> isi header atau pembuka dari tabel </td> </tr> </thead> <tbody> <tr> <td> isi badan atau materi dari tabel </td> </tr> </tbody> <tfoot> <tr> <td> isi footer atau penutup dari tabel </td> </tr> </tfoot> </table>

Contoh penulisan nya dalam program <table cellpadding="5" cellspacing="0" border="1"> <thead> <tr> <td colspan="3" align="center">Ini adalah bagian HEADER dari TABEL </td> </tr> </thead> <tbody> <tr> <td>BARIS ke 1 KOLOM ke 1</td> <td>BARIS ke 1 KOLOM ke 2</td> <td>BARIS ke 1 KOLOM ke 3</td> </tr> <tr> <td>BARIS ke 2 KOLOM ke 1</td> <td>BARIS ke 2 KOLOM ke 2</td> <td>BARIS ke 2 KOLOM ke 3</td> </tr> <tr> <td>BARIS ke 3 KOLOM ke 1</td> <td>BARIS ke 3 KOLOM ke 2</td> <td>BARIS ke 3 KOLOM ke 3</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">Ini adalah bagian FOOTER dari TABEL </td> </tr> </tfoot> </table> Setelah dijalankan di Browser akan ditampilkan seperti dibawah ini.

Ini adalah bagian HEADER dari TABEL BARIS ke 1 KOLOM ke 1 BARIS ke 1 KOLOM ke 2 BARIS ke 1 KOLOM ke 3 BARIS ke 2 KOLOM ke 1 BARIS ke 2 KOLOM ke 2 BARIS ke 2 KOLOM ke 3 BARIS ke 3 KOLOM ke 1 BARIS ke 3 KOLOM ke 2 BARIS ke 3 KOLOM ke 3 Ini adalah bagian FOOTER dari TABEL

Contoh yang lain dengan menggunakan Tag <th> <table cellpadding="5"> <tr> <th scope="col">Nama : </th> <th scope="col">Alamat : </th> <th scope="col">Tanggal lahir : </th> </tr> <tr> <td align="center">Tongtong</td> <td align="center">Dunia Maya</td> <td align="center">1 Januari 2015</td> </tr> </table> Setelah Dijalankan di Browser maka akan ditampilkan seperti dibawah ini :

Nama : Alamat : Tanggal lahir : Tongtong Dunia Maya 1 Januari 2015

Nah setelah Anda paham mengenai hirarki dari pembuatan tabel, sekarang mari kita terapkan pembuatan tabel untuk men-design sebuah halaman web. Dari Contoh sebelumnya, Anda sudah diperkenalkan tentang atribut dari sebuah tabel.   Atribut tabel ini penting untuk mengatur tampilan di browser yang merupakan sebuah tabel yang majemuk. Ada beberapa atribut dari sebuah tabel yang wajib Anda ketahui, antara lain :

cellpadding   - Atribut ini dipakai untuk menentukan besarnya jarak bagian dalam (cell) dengan bagian luar (border) dari sebuah tabel. contoh : cellpadding="2" cellspacing   - Atribut ini dipakai untuk menentukan besarnya jarak cell yang satu dengan cell yang lainnya. contoh : cellspacing="5" border   - Atribut ini dipakai untuk menentukan besarnya border (bingkai) dari sebuah tabel. contoh : border="2" width   - Atribut ini digunakan untuk menentukan lebar dari sebuah tabel, ukuran ini bisa menggunakan satuan pixel atau persentasi. contoh : width="75%", width="100%", width="800", width="200" bordercolor   - Atribut ini digunakan untuk menentukan warna border atau garis tepi dari sebuah tabel. contoh : bordercolor="black" bgcolor   - Atribut ini digunakan untuk menentukan warna latar dari sebuah tabel atau cell. contoh : bgcolor="#FFFFFF", bgcolor="#000000", bgcolor="blue", bgcolor="red" valign   - Atribut ini digunakan untuk menentukan posisi Vertikal objek dari sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan dalam perintah pembuatan baris dari tabel / <tr>. Atribut ini punya beberapa pilihan posisi yaitu : top - pilihan ini akan menempatkan objek berada pada posisi teratas dari cell. middle - pilihan ini akan menempatkan objek berada pada tengah cell. bottom - pilihan ini akan menempatkan objek berada pada bagian bawah dari cell. Contoh : <tr valign="top">, <tr valign="middle">, <tr valign="bottom"> align   - Atribut ini digunakan untuk menentukan posisi Horizontal objek dari sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan dalan perintah pembuatan kolom dari tabel / <td>. Atribut ini juga punya beberapa pilihan yaitu : left - pilihan ini akan menempatkan objek berada pada bagian kiri dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata kiri. center - pilihan ini akan menempatkan objek berada pada bagian tengan dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata tengah. right - pilihan ini akan menempatkan objek berada pada bagian kanan dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata kanan. Contoh : <td align="left">, <td align="center">, <td align="right">. rowspan   - Atribut ini digunakan untuk menyatukan dua buah baris tabel menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah pembuatan kolom dari tabel / <td> colspan   - Atribut ini digunakan untuk menyatukan dua buah kolom tabel menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah pembuatan kolom dari tabel / <td> Contoh : <td rowspan="2">, <td colspan="2">

Untuk lebih jelasnya, coba Anda perhatikan gambar dibawah ini yang merupakan tabel yang mempunya 3 buah kolom dan 4 buah baris ( 3 X 4 ). Keterangan mengenai atribut dari sebuah tabel. Garis yang berwarna hitam dan berada paling luar itu disebut border. Jarak Antara garis merah dan hitam itu disebut padding. Bidang yang berwarna biru langit, abu-abu dan hijau itu disebut cell. Jarak antara cell yang satu dengan cell yang lainnya itu disebut cellspacing. Cell yang diberi warna hijau merupakan gabungan dari dua buah cell atau lebih dalam satu kolom (merger) disebut dengan colspan dan dihasilkan dari perintah colspan Cell yang diberi warna abu-abu merupakan gabungan dari dua buah cell atau lebih dalam satu baris (merger) disebut dengan rowspan dan dihasilkan dari perintah rowspan Nilai dari atribut-atribut tersebut diukur berdasarkan besarnya pixel. Semakin besar Anda berikan nilainya maka semakin besar pula jaraknya. Untuk rowspan dan colspan Anda harus mendeklarasikan banyaknya kolom atau baris yang akan Anda gabung, misalkan Anda akan menggabung dua buah cell dalam satu kolom, berarti Anda juga harus menuliskan nya dengan colspan="2", bila Anda menggabungkan tiga buah cell Anda harus menuliskannya dengan colspan="3" dan seterusnya. Akan tetapi Anda harus perhatikan baik-baik bahwa cell yang digabung tetap dalam kondisi sebelumnya misal Anda membuat tabel dengan ukuran 4 X 4, dan ada beberapa cell yang Anda gabung, tabel tersebut tetap berukuran 4 x 4. Colspan dan Rowspan ini mungkin akan sedikit membuat Anda berfikir extra dalam penulisan kode tabel nya, untuk itu saya sangat menyarankan untuk berlatih mengenai ini lebih serius. Agar lebih jelas mengenai rowspan dan colspan ini cobalah perhatikan contoh penulisan kode tabel dibawah ini. <table width="300" cellpadding="5" cellspacing="1" border="5" bordercolor="red"> <tr> <td align="center">Kolom 1 baris 1</td> <td align="center">Kolom 2 baris 1</td> <td align="center">Kolom 3 baris 1</td> <td align="center">Kolom 4 baris 1</td> </tr> <tr> <td align="center">Kolom 1 baris 2</td> <td align="center">Kolom 2 baris 2</td> <td colspan="2" bgcolor="silver" align="center"> Gabungan Kolom 3 dan 4 baris ke 2</td> </tr> <tr> <td rowspan="2" bgcolor="silver" align="center"> Gabungan baris 3 dan 4 kolom ke 1</td> <td align="center">kolom 2 baris 3</td> <td align="center">kolom 3 baris 3</td> <td align="center">kolom 4 baris 3</td> </tr> <tr> <td align="center">kolom 2 baris 4</td> <td align="center">kolom 3 baris 4</td> <td align="center">kolom 4 baris 4</td> </tr> </table> Setelah di jalankan di browser maka perintah diatas akan menjadi tabel seperti dibawah ini :

Kolom 1 baris 1 Kolom 2 baris 1 Kolom 3 baris 1 Kolom 4 baris 1 Kolom 1 baris 2 Kolom 2 baris 2 Gabungan Kolom 3 dan 4 baris ke 2 Gabungan baris 3 dan 4 kolom ke 1 kolom 2 baris 3 kolom 3 baris 3 kolom 4 baris 3 kolom 2 baris 4 kolom 3 baris 4 kolom 4 baris 4

Perhatikan baik-baik contoh penulisan diatas...!. Setelah Anda memberi perintah colspan maka untuk kolom selanjutnya Anda jangan menambahkan lagi perintah pembuatan kolom baru / <td>, sebab sudah di merger begitu juga setelah Anda memberikan perintah rowspan maka untuk baris berikutnya Anda jangan memberikan perintah untuk membuat baris baru / <tr>. Bila ini Anda lakukan maka tabel yang Anda buat bentuknya tidak karuan alias kacau. Sekali lagi berlatihlah dengan serius mengenai ini, serta coba-cobalah untuk membuat gabungan cell yang lain sesuai yang Anda kehendaki. Contoh penulisannya dalam program : <table width="50%" cellpadding="5" cellspacing="0" border="2" bgcolor="silver"> <tr valign="middle"> <td align="right"> Ini adalah Contoh pembuatan tabel dengan menggunakan atribut-atribut yang dikemukakan diatas, tabel ini berukuran 50% dari bidang yang disediakan dan mempunyai warna latar silver. Sedangkan teks ini akan disusun berdasarkan aturan rata kanan. </td></tr> <tr valign="middle"> <td align="center"> <img src="master/smalstk.jpg" alt="contoh penempatan images" border="0"> </td></tr></table> Baris perintah pembuatan tabel ini akan memberikan dua buah baris tabel yang mempunyai jarak dari bagian dalam tabel (cell) dengan bagian luar (border) sebesar 5 px, spasi antar cell rapat atau tidak diberi spasi, dan border atau garis tepi dari tabel berukuran sebesar 2 pixel, warna latar dari tabel akan diberi warna silver, sedangkan konten yang berupa teks akan disusun dalam tabel tersebut berdasarkan aturan rata kanan. Pada baris kedua tabel tersebut, akan ditempatkan sebuah images yang ditempatkan ditengah-tengah dari cell yang telah ditentukan. Bila dijalankan di browser maka perintah tabel diatas akan menjadi seperti dibawah ini :

Ini adalah Contoh pembuatan tabel dengan menggunakan atribut-atribut yang dikemukakan diatas, tabel ini berukuran 50% dari bidang yang disediakan dan mempunyai warna latar silver. Sedangkan teks ini akan disusun berdasarkan aturan rata kanan.

Sekarang cobalah Anda rubah-rubah besarnya nilai atribut dari contoh tabel diatas sesuai dengan keinginan Anda. Tetapi perlu Anda ketahui bahwa penetapan lebar tabel dalam persentasi akan mengikuti lebarnya bidang yang disediakan, karena disini bidang yang saya buat (berwarna orange) hanya sebesar 500 pixel, maka besar prosentasi nya menjadi 250 pixel (50%). Yang perlu Anda garis bawahi dari pembuatan tabel adalah : Anda dapat membuat tabel baru atau tabel yang lain (secondary) didalam sebuah cell yang ada dalam tabel utama (primary) dan didalam cell tabel secondary Anda juga masih boleh membuat tabel yang lain.

L A T I H A N

Sebagai sarana latihan cobalah Anda buat tag-tag pembuatan tabel seperti dibawah ini. Untuk images-imagesnya copy lah images-images berikut ke media penyimpanan Anda dengan cara mengklik kanan images tersebut dan pilih untuk menyimpan nya. Sebagai petunjuk cobalah Anda perhatikan, Tabel ini mempunyai 3 buah baris dan 3 buah kolom, ada beberapa kolom yang di merger atau disatukan dengan perintah colspan sehingga terlihat seperti satu kolom, sedangkan untuk font yang berwarna cobalah Anda simak kembali perintah pembuatan font pada bab sebelumnya bila Anda lupa.

Latihan membuat tabel Ini adalah logo ITB aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa bbbbbbbbbb bbbbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb ccccccccc cccccccccccc cccccccccccc ccccccccccc ccccccc cccccccccc ccccccccc ccccccccc Ini adalah logo Suryatekno

Bila Anda sudah mampu membuat tabel seperti diatas, saya ucapkan "selamat..., Anda layak jadi seorang designer..!" mengapa demikian...?, sebab Anda sudah mampu untuk menempatkan beberapa objek kedalam sebuah tabel yang merupakan inti dari PEN-DESIGN-AN sebuah WEB. Apa..? terlalu mudah..!, Hmmm.....OK lah mungkin Anda adalah orang yang jenius sehingga perlu soal yang lebih menantang sebab soal diatas mungkin terlalu mudah untuk Anda.. uhhhh...!!, sekarang cobalah Anda buat beberapa design web dibawah ini dengan kemampuan yang telah Anda peroleh selama ini bila memang soal diatas Anda anggap terlalu mudah untuk ukuran Anda.

Ok friend.., bila Anda sudah mahir dalam pendesignan sample-sample desigan diatas berarti Anda sudah cukup mahir dalam hal tata letak sebuah objek di dalam design web Anda dan sekali lagi saya ucapkan selamat..!, dan tugas Anda dalam memecahkan masalah Tongtong yang akan merebut hati wanita pujaan nya sedikit terselesaikan. Tinggal satu langkah lagi untuk menyempurnakan nya yaitu pembuatan form. Dengan form ini maka Anda dapat berinteraksi dengan pemakai situs Anda. Bagaimana cara pembuatan form..?, bila Anda sudah yakin untuk melanjutkan ketahap berikut klik saja tombol kehalaman berikutnya, tapi bila belum yakin klik lah tombol kembali ke halaman sebelumnya untuk mematangkan keahlian Anda.