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.

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.

html

Waktu pun terus berlalu, setapak-demi setapak di hadapinya. Kini sang designer mulai memikirkan cara bagaimana membuat sesuatu yang bermanfaat akan tetapi disukai oleh banyak orang. Untuk mencari Inspirasi dia berjalan-jalan keliling kota. Ketika diperjalanan dia melihat banyak sekali iklan-iklan yang bertebaran di sudut-sudut Kota, mulai dari spanduk, reklame, sampai neon-neon yang berkelap-kelip. Aha...!, Saya rasa mungkin tampilan Web akan lebih indah kalau ditaruh gambar-gambar seperti itu guman nya dalam hati. Yah betul..! teriaknya kegirangan, sampai tak menyadari kalau semua penumpang dalam bis kota yang ia tumpangi memperhatikan nya. Karena merasa diperhatikan oleh semua orang, dia jadi malu sendiri. Akhirnya dia memutuskan untuk turun saja dari bis kota itu, dan kembali ke rumahnya untuk meng-aplikasikan pengalaman nya itu. Image adapted from http://www.designart.com/ with permittion

Dari pengalaman tongtong diatas, ada baiknya kalau kita mengambil hikmahnya. Yah tentu suatu design Web akan terlihat lebih indah dan menarik bila kita sajikan gambar atau images disamping teks-teks yang ada. bukankah Anda sendiri suka akan ke-indahan..?, kalau begitu marilah kita lanjutkan materi kita dengan fokus penempatan image, animasi dan flash pada design Web kita. Untuk menempatkan images dalam suatu document HTML tidaklah sulit, Anda tinggal mengetikan TAG, dan lokasi dari file image itu berada. Image yang dapat Anda masukan ke Document HTML dapat berjenis BMP, JPG, JPEG, GIF, TIFF, dan lain sebagainya. Bila Anda ingin memasukan images yang berupa animasi, Anda dapat memasukan file images berektensi GIF. Tapi saya sarankan kepada Anda, jangan memasukan file image yang berukuran besar, sebab itu akan mempengaruhi proses pemuatan file di Browser. Sebaiknya bila Anda ingin menampilkan images yang berukuran besar harus disediakan Halaman khusus untuk menampilkannya, dalam arti image tersebut ditampilkan secara tersendiri tanpa ada tag-tag yang lain. Sebagai contoh Anda dapat membuka Halaman World of Electronics, sesi ANEKA PROJECT. disitu ada beberapa image yang saya tempatkan pada Halaman tersendiri, agar tidak mempengaruhi loading file tersebut. Atau Anda juga dapat menggunakan Tool peng-edit gambar seperti ADOBE PHOTOSHOP, untuk memperkecil ukuran file tersebut. Penempatan Images, Animasi dan Flash pada Halaman HTML Tag untuk menempatkan images pada document HTML sebagai berikut : <img src="lokasi file" alt="keterangan gambar" border="tebalnya bingkai"> Pada tag diatas ada beberapa atribut yang harus Anda tuliskan untuk menampilkan suatu image pada Dokumen HTML. Antara lain :

img : Tag ini merupakan inti dari perintah untuk menampilkan image pada Halaman Web. src : Atribut ini merupakan bagian dari tag yang berfungsi untuk memberitahu kan kepada browser tentang nama file image yang akan ditampilkan serta lokasi dari file image itu berada. Misalkan nama file image yang akan ditampilkan adalah gambar1.jpg dan lokasi file tersebut Anda simpan pada folder: C:\my document\gambar\, maka penulisannya seperti berikut ini : src="file:///C:/my document/gambar/gambar1.jpg" Anda juga dapat menggunakan url dari situs yang lain, misal gambar tersebut Anda simpan di http://www.test.com/test-juga. maka penulisan atribut src nya menjadi seperti berikut ini: src="http://www.test.com/test-juga/gambar1.jpg" Agar memudahkan penulisan dan pemanggilan image, saya menyarankan agar file image tersebut disimpan menjadi satu folder dengan document HTML yang memanggil file image tersebut, sehingga penulasan atribut src nya menjadi seperti ini : src="gambar1.jpg" alt : Atribut ini digunakan untuk memberikan keterangan terhadap images tersebut. teks yang dituliskan pada atribut ini akan ditampilkan oleh browser dengan latar belakang kuning ketika mouse mendekati gambar tersebut. border : Atribut ini untuk memberikan efek garis tepi, yang besarnya dapat kita tentukan dengan ukuran pixel, misalnya kita ingin memberikan efek garis tepi sebesar 2 pixel pada file image, maka penulisannya menjadi seperti ini : border="2"

contoh penggunaan nya dalam program : <img src="images/tongtong1.gif" alt="Contoh ke 1" border="0"> <img src="images/tongtong1.gif" alt="Contoh ke 2" border="2"> <img src="images/tongtong1.gif" alt="Contoh ke 3" border="4"> Maka setelah dijalankan di browser akan tampak seperti dibawah ini :

Border = 0 Border = 2 Border = 4

Pada paragraf diatas disebutkan bahwa selain images kita juga dapat menampilkan animasi pada dokumen HTML. Animasi itu dapat berupa images dengan Compuserver file yang biasanya ber-ekstensi GIF, Flash animation yang biasanya berekstensi SWF, Java Applet yang biasanya berekstensi CLASS, dan sebagainya. Untuk file animasi berjenis GIF, penulisan tag nya sama dengan penulisan images biasa seperti pada ketiga contoh diatas. Sedangkan untuk FLASH dan JAVA APPLET, diperlukan beberapa tag dan atributnya seperti di bawah ini: Contoh penulisan TAG HTML untuk menampilkan Animasi Flash :

<object width=384 height=59 classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub /shockwave/cabs/flash/swflash.cab"> <param name="movie" value="flash/top.swf"> <param name="quality" value="high"> <param name="loop" value="1"> <param name="menu" value="false"> <param name="wmode" value="window"> <embed src="flash/top.swf" width=384 height=59 quality=high menu=false TYPE=application/x-shockwave-flash wmode=window pluginspage="http://www.macromedia.com/shockwave/download /index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed> </object>

Uhh..panjang sekali...!, apa ada yang lebih ringkas..?. Hmm.., dalam hal ini memang saya pernah membaca sebuah Artikel berbahasa inggris yang ditulis oleh : Drew McLellan dengan judul : Embedding Flash While Supporting Standards. Pada artikel itu dia berusaha untuk membuat suatu standard penulisan sebuah kode HTML untuk menampilkan animasi Flash. Akan tetapi hasil penelitian nya belum mendapatkan standarisasi dari W3C, walaupun di beberapa browser kode HTML hasil penelitiannya berjalan dengan mulus. Bila Anda punya kesempatan silahkan Anda membaca Artikel tersebut secara langsung di sini. Dari hasil kerja Drew McLellan itulah, maka kode atau tag HTML untuk menampilkan animasi flash menjadi sedikit lebih ringkas, akan tetapi karena Anda sedang mempelajari dasar-dasar design web, maka Anda juga harus mengerti tentang tag-tag serta atribut yang digunakan. Jadi ada baiknya Anda mencoba terlebih dahulu tag HTML untuk flash terdahulu yang sedikit menyeramkan, Itung-itung latihan lah. Adapun tag ringkas hasil kerja Drew McLellan untuk maksud yang sama seperti tag HTML sebelumnya, menjadi seperti dibawah ini : <object type="application/x-shockwave-flash" data="flash/top.swf" width="384" height="59" title="Surya Science Club"> <param name="movie" value="flash/top.swf"> <a href="http://www.suryascience.co.nr/">Surya Science Club</a> </object>

Setelah di jalankan pada browser maka tag pertama dan yang terakhir ini akan menampilkan animasi flash yang sama seperti dibawah ini:

Tag HTML untuk menampilkan animasi flash terdiri dari beberapa atribut yang perlu Anda ketahui antara lain :

object : Tag ini merupakan penanda untuk Browser Internet explorer (IE) dan kompatibelnya, agar dapat menjalankan flash dengan plugins yang ada. Untuk Netscape (N) dan kompatibelnya Tag ini tidak berfungsi atau di abaikan. width : Atribut ini untuk menentukan lebar dari animasi Flash yang akan ditampilkan oleh Browser height : Atribut ini untuk menentukan tinggi dari animasi Flash yang akan ditampilkan oleh Browser classid : Atribut ini merupakan penanda atau ID yang di gunakan oleh Macromedia. Atribut ini tidak perlu disetting biarkan saja seperti itu. codebase : Atribut ini merupakan kode lokasi yang digunakan oleh Macromedia. Atribut yang ini juga tidak perlu Anda rubah-rubah biarkan apa adanya, kecuali Anda sudah seperti McLellan param : Atribut ini digunakan untuk men-set parameter dari file flash yang digunakan, atribut param mempunyai beberapa bagian antara lain : movie Lokasi dari file flash yang akan ditampilkan quality Kualitas dari file flash yang akan ditampilkan. Pilihannya bisa high, medium atau low. loop Untuk menentukan apakah file flash akan diputar ulang setelah selesai. 1 diulang, 0 tidak diulang. menu Untuk menset menu dari file flash ketika di klik kanan pada file tersebut. True - menu enable, false - menu disable. Dan masih banyak lagi yang lainnya, tapi itu sudah cukup untuk sekedar Anda ketahui. embed : Atribut ini digunakan oleh Netscape dan kompatibel nya untuk menjalankan file flash. Sedangkan untuk IE dan kompatibelnya, parameter ini diabaikan. Parameter ini bukan tag standar yang divalidkan oleh W3C.

Setelah Anda mengetahui hirarki dari tag HTML untuk Flash, sekarang Anda tinggal membuat Animasi flash untuk menyemarakan design web Anda. Tidak Bisa..!, Belajar dong...!, Dimana...? Disini juga ada. Klik aja ini. Setelah Anda cukup pandai membuat flash tentunya Anda akan sedikit bersemangat untuk mendesign web yang Anda idamkan, dengan demikan maka Anda sudah cukup dewasa untuk lebih memperdalam lagi mengenai design web ini. Perlu juga Anda ketahui bahwa bila Anda sudah mahir dengan pembuatan flash, maka dengan mudah juga Anda dapat membuat suatu design web yang Trendy. Uh..., ternyata cukup panjang juga materi ini yah. Apa sudah cukup..?. tentu saja belum karena masih ada satu lagi tatacara penulisan tag HTML untuk animasi yang lain, yaitu tag untuk menampilkan animasi yang menggunakan Java Applet, yang biasanya berekstensi CLASS. Untuk yang satu ini, cukup banyak parameter-parameter yang harus di deklarasikan, tergantung dari jenis program dan keinginan dari si pembuat animasi tersebut. Selain itu pada browser komputer client harus di install plugins untuk JAVA APPLET yaitu JAVA 2 RUNTIME ENVIRONTMENT (J2RE). Bila browser di komputer client tidak di Install J2RE maka Applet tersebut tidak akan bisa dijalankan. Kelebihan dari JAVA APPLET ini adalah bersifat OPEN SOURCE, sehingga kita dapat dengan mudah mencari sumber-sumber yang kita perlukan. Kekurangan nya adalah animasi ini membutuhkan spesifikasi komputer yang cukup baik, karena bila tidak tampilan animasi nya akan telihat patah-patah. Saya pernah mencoba membandingkan antara animasi yang dibuat dengan Flash dan Java Applet ini pada komputer dengan spesifikasi : Pentium 233 MHZ, memori 64 MB, dan grafik video sebesar 4 MB. Hasilnya adalah : Flash berjalan normal seperti pada komputer yang mempunyai spesifikasi lebih tinggi, sedangkan Java Applet bisa jalan tapi terlihat gejala yang tidak normal. Baru pada komputer dengan speed 400 Mhz applet dapat berjalan dengan Normal. Jadi menurut saya itulah salah satu penyebab Flash lebih populer dibandingkan Java Applet. Selain itu untuk dapat membuat animasi dengan java applet Anda harus mahir dengan bahasa pemrograman JAVA, yang mungkin bagi seorang pemula akan terasa sedikit kesulitan. Contoh penulisan TAG HTML untuk menampilkan Animasi Java Applet : <applet code="jumpingtitle.class" width="400" height="90"> <param name="demicron" value="www.demicron.se"> <param name="reg" value="A00024"> <param name="background" value="ffffff"> <param name="foreground" value="3000ff"> <param name="step" value="2"> <param name="sleeptime" value="50"> <param name="amplitude" value="50"> <param name="tailsize" value="20"> <param name="width" value="400"> <param name="height" value="90"> <param name="font" value="TimesRoman"> <param name="fontsize" value="36"> <param name="italic" value="No"> <param name="bold" value="Yes"> <param name="text" value="Surya Science Club"> </applet>

Tampilan di browser : ( Animasi tidak ditampilkan bila browser Anda belum di install J2RE )

Applet writen by : Anibal Wainstein, copyright © http://www.demicron.se, you can download these free applet from http://www.javafile.com

Seperti yang Anda lihat diatas, penulisan tag HTML untuk applet ini sebenarnya cukup mudah di ingat ketimbang flash, selain itu kita dapat merubah dengan cepat parameter-parameter yang kita inginkan. Seperti pada contoh diatas, tag utama untuk meng-embed java applet cukup dengan memakai tag < applet + atribut nya > , dilanjutkan dengan parameter-parameter yang berlaku kemudian menutupnya dengan tag </applet>. Adapun fungsi dan kegunaan dari atribut dan parameternya sedikit mirip dengan flash hanya saja pen-deklarasian parameter pada JAVA APLLET ini saya rasa Anda juga tentunya akan lebih mudah untuk membaca nya dan mengerti maksud dari parameter-parameter yang dituliskan itu. Dengan demikian maka kedewasaan sang designer akan terlihat bila dia sudah mengerti akan maksud dan tujuan dari pendeklarasian parameter tersebut.

html

Waktu pun terus berlalu, setapak-demi setapak di hadapinya. Kini sang designer mulai memikirkan cara bagaimana membuat sesuatu yang bermanfaat akan tetapi disukai oleh banyak orang. Untuk mencari Inspirasi dia berjalan-jalan keliling kota. Ketika diperjalanan dia melihat banyak sekali iklan-iklan yang bertebaran di sudut-sudut Kota, mulai dari spanduk, reklame, sampai neon-neon yang berkelap-kelip. Aha...!, Saya rasa mungkin tampilan Web akan lebih indah kalau ditaruh gambar-gambar seperti itu guman nya dalam hati. Yah betul..! teriaknya kegirangan, sampai tak menyadari kalau semua penumpang dalam bis kota yang ia tumpangi memperhatikan nya. Karena merasa diperhatikan oleh semua orang, dia jadi malu sendiri. Akhirnya dia memutuskan untuk turun saja dari bis kota itu, dan kembali ke rumahnya untuk meng-aplikasikan pengalaman nya itu. Image adapted from http://www.designart.com/ with permittion

Dari pengalaman tongtong diatas, ada baiknya kalau kita mengambil hikmahnya. Yah tentu suatu design Web akan terlihat lebih indah dan menarik bila kita sajikan gambar atau images disamping teks-teks yang ada. bukankah Anda sendiri suka akan ke-indahan..?, kalau begitu marilah kita lanjutkan materi kita dengan fokus penempatan image, animasi dan flash pada design Web kita. Untuk menempatkan images dalam suatu document HTML tidaklah sulit, Anda tinggal mengetikan TAG, dan lokasi dari file image itu berada. Image yang dapat Anda masukan ke Document HTML dapat berjenis BMP, JPG, JPEG, GIF, TIFF, dan lain sebagainya. Bila Anda ingin memasukan images yang berupa animasi, Anda dapat memasukan file images berektensi GIF. Tapi saya sarankan kepada Anda, jangan memasukan file image yang berukuran besar, sebab itu akan mempengaruhi proses pemuatan file di Browser. Sebaiknya bila Anda ingin menampilkan images yang berukuran besar harus disediakan Halaman khusus untuk menampilkannya, dalam arti image tersebut ditampilkan secara tersendiri tanpa ada tag-tag yang lain. Sebagai contoh Anda dapat membuka Halaman World of Electronics, sesi ANEKA PROJECT. disitu ada beberapa image yang saya tempatkan pada Halaman tersendiri, agar tidak mempengaruhi loading file tersebut. Atau Anda juga dapat menggunakan Tool peng-edit gambar seperti ADOBE PHOTOSHOP, untuk memperkecil ukuran file tersebut. Penempatan Images, Animasi dan Flash pada Halaman HTML Tag untuk menempatkan images pada document HTML sebagai berikut : <img src="lokasi file" alt="keterangan gambar" border="tebalnya bingkai"> Pada tag diatas ada beberapa atribut yang harus Anda tuliskan untuk menampilkan suatu image pada Dokumen HTML. Antara lain :

img : Tag ini merupakan inti dari perintah untuk menampilkan image pada Halaman Web. src : Atribut ini merupakan bagian dari tag yang berfungsi untuk memberitahu kan kepada browser tentang nama file image yang akan ditampilkan serta lokasi dari file image itu berada. Misalkan nama file image yang akan ditampilkan adalah gambar1.jpg dan lokasi file tersebut Anda simpan pada folder: C:\my document\gambar\, maka penulisannya seperti berikut ini : src="file:///C:/my document/gambar/gambar1.jpg" Anda juga dapat menggunakan url dari situs yang lain, misal gambar tersebut Anda simpan di http://www.test.com/test-juga. maka penulisan atribut src nya menjadi seperti berikut ini: src="http://www.test.com/test-juga/gambar1.jpg" Agar memudahkan penulisan dan pemanggilan image, saya menyarankan agar file image tersebut disimpan menjadi satu folder dengan document HTML yang memanggil file image tersebut, sehingga penulasan atribut src nya menjadi seperti ini : src="gambar1.jpg" alt : Atribut ini digunakan untuk memberikan keterangan terhadap images tersebut. teks yang dituliskan pada atribut ini akan ditampilkan oleh browser dengan latar belakang kuning ketika mouse mendekati gambar tersebut. border : Atribut ini untuk memberikan efek garis tepi, yang besarnya dapat kita tentukan dengan ukuran pixel, misalnya kita ingin memberikan efek garis tepi sebesar 2 pixel pada file image, maka penulisannya menjadi seperti ini : border="2"

contoh penggunaan nya dalam program : <img src="images/tongtong1.gif" alt="Contoh ke 1" border="0"> <img src="images/tongtong1.gif" alt="Contoh ke 2" border="2"> <img src="images/tongtong1.gif" alt="Contoh ke 3" border="4"> Maka setelah dijalankan di browser akan tampak seperti dibawah ini :

Border = 0 Border = 2 Border = 4

Pada paragraf diatas disebutkan bahwa selain images kita juga dapat menampilkan animasi pada dokumen HTML. Animasi itu dapat berupa images dengan Compuserver file yang biasanya ber-ekstensi GIF, Flash animation yang biasanya berekstensi SWF, Java Applet yang biasanya berekstensi CLASS, dan sebagainya. Untuk file animasi berjenis GIF, penulisan tag nya sama dengan penulisan images biasa seperti pada ketiga contoh diatas. Sedangkan untuk FLASH dan JAVA APPLET, diperlukan beberapa tag dan atributnya seperti di bawah ini: Contoh penulisan TAG HTML untuk menampilkan Animasi Flash :

<object width=384 height=59 classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub /shockwave/cabs/flash/swflash.cab"> <param name="movie" value="flash/top.swf"> <param name="quality" value="high"> <param name="loop" value="1"> <param name="menu" value="false"> <param name="wmode" value="window"> <embed src="flash/top.swf" width=384 height=59 quality=high menu=false TYPE=application/x-shockwave-flash wmode=window pluginspage="http://www.macromedia.com/shockwave/download /index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed> </object>

Uhh..panjang sekali...!, apa ada yang lebih ringkas..?. Hmm.., dalam hal ini memang saya pernah membaca sebuah Artikel berbahasa inggris yang ditulis oleh : Drew McLellan dengan judul : Embedding Flash While Supporting Standards. Pada artikel itu dia berusaha untuk membuat suatu standard penulisan sebuah kode HTML untuk menampilkan animasi Flash. Akan tetapi hasil penelitian nya belum mendapatkan standarisasi dari W3C, walaupun di beberapa browser kode HTML hasil penelitiannya berjalan dengan mulus. Bila Anda punya kesempatan silahkan Anda membaca Artikel tersebut secara langsung di sini. Dari hasil kerja Drew McLellan itulah, maka kode atau tag HTML untuk menampilkan animasi flash menjadi sedikit lebih ringkas, akan tetapi karena Anda sedang mempelajari dasar-dasar design web, maka Anda juga harus mengerti tentang tag-tag serta atribut yang digunakan. Jadi ada baiknya Anda mencoba terlebih dahulu tag HTML untuk flash terdahulu yang sedikit menyeramkan, Itung-itung latihan lah. Adapun tag ringkas hasil kerja Drew McLellan untuk maksud yang sama seperti tag HTML sebelumnya, menjadi seperti dibawah ini : <object type="application/x-shockwave-flash" data="flash/top.swf" width="384" height="59" title="Surya Science Club"> <param name="movie" value="flash/top.swf"> <a href="http://www.suryascience.co.nr/">Surya Science Club</a> </object>

Setelah di jalankan pada browser maka tag pertama dan yang terakhir ini akan menampilkan animasi flash yang sama seperti dibawah ini:

Tag HTML untuk menampilkan animasi flash terdiri dari beberapa atribut yang perlu Anda ketahui antara lain :

object : Tag ini merupakan penanda untuk Browser Internet explorer (IE) dan kompatibelnya, agar dapat menjalankan flash dengan plugins yang ada. Untuk Netscape (N) dan kompatibelnya Tag ini tidak berfungsi atau di abaikan. width : Atribut ini untuk menentukan lebar dari animasi Flash yang akan ditampilkan oleh Browser height : Atribut ini untuk menentukan tinggi dari animasi Flash yang akan ditampilkan oleh Browser classid : Atribut ini merupakan penanda atau ID yang di gunakan oleh Macromedia. Atribut ini tidak perlu disetting biarkan saja seperti itu. codebase : Atribut ini merupakan kode lokasi yang digunakan oleh Macromedia. Atribut yang ini juga tidak perlu Anda rubah-rubah biarkan apa adanya, kecuali Anda sudah seperti McLellan param : Atribut ini digunakan untuk men-set parameter dari file flash yang digunakan, atribut param mempunyai beberapa bagian antara lain : movie Lokasi dari file flash yang akan ditampilkan quality Kualitas dari file flash yang akan ditampilkan. Pilihannya bisa high, medium atau low. loop Untuk menentukan apakah file flash akan diputar ulang setelah selesai. 1 diulang, 0 tidak diulang. menu Untuk menset menu dari file flash ketika di klik kanan pada file tersebut. True - menu enable, false - menu disable. Dan masih banyak lagi yang lainnya, tapi itu sudah cukup untuk sekedar Anda ketahui. embed : Atribut ini digunakan oleh Netscape dan kompatibel nya untuk menjalankan file flash. Sedangkan untuk IE dan kompatibelnya, parameter ini diabaikan. Parameter ini bukan tag standar yang divalidkan oleh W3C.

Setelah Anda mengetahui hirarki dari tag HTML untuk Flash, sekarang Anda tinggal membuat Animasi flash untuk menyemarakan design web Anda. Tidak Bisa..!, Belajar dong...!, Dimana...? Disini juga ada. Klik aja ini. Setelah Anda cukup pandai membuat flash tentunya Anda akan sedikit bersemangat untuk mendesign web yang Anda idamkan, dengan demikan maka Anda sudah cukup dewasa untuk lebih memperdalam lagi mengenai design web ini. Perlu juga Anda ketahui bahwa bila Anda sudah mahir dengan pembuatan flash, maka dengan mudah juga Anda dapat membuat suatu design web yang Trendy. Uh..., ternyata cukup panjang juga materi ini yah. Apa sudah cukup..?. tentu saja belum karena masih ada satu lagi tatacara penulisan tag HTML untuk animasi yang lain, yaitu tag untuk menampilkan animasi yang menggunakan Java Applet, yang biasanya berekstensi CLASS. Untuk yang satu ini, cukup banyak parameter-parameter yang harus di deklarasikan, tergantung dari jenis program dan keinginan dari si pembuat animasi tersebut. Selain itu pada browser komputer client harus di install plugins untuk JAVA APPLET yaitu JAVA 2 RUNTIME ENVIRONTMENT (J2RE). Bila browser di komputer client tidak di Install J2RE maka Applet tersebut tidak akan bisa dijalankan. Kelebihan dari JAVA APPLET ini adalah bersifat OPEN SOURCE, sehingga kita dapat dengan mudah mencari sumber-sumber yang kita perlukan. Kekurangan nya adalah animasi ini membutuhkan spesifikasi komputer yang cukup baik, karena bila tidak tampilan animasi nya akan telihat patah-patah. Saya pernah mencoba membandingkan antara animasi yang dibuat dengan Flash dan Java Applet ini pada komputer dengan spesifikasi : Pentium 233 MHZ, memori 64 MB, dan grafik video sebesar 4 MB. Hasilnya adalah : Flash berjalan normal seperti pada komputer yang mempunyai spesifikasi lebih tinggi, sedangkan Java Applet bisa jalan tapi terlihat gejala yang tidak normal. Baru pada komputer dengan speed 400 Mhz applet dapat berjalan dengan Normal. Jadi menurut saya itulah salah satu penyebab Flash lebih populer dibandingkan Java Applet. Selain itu untuk dapat membuat animasi dengan java applet Anda harus mahir dengan bahasa pemrograman JAVA, yang mungkin bagi seorang pemula akan terasa sedikit kesulitan. Contoh penulisan TAG HTML untuk menampilkan Animasi Java Applet : <applet code="jumpingtitle.class" width="400" height="90"> <param name="demicron" value="www.demicron.se"> <param name="reg" value="A00024"> <param name="background" value="ffffff"> <param name="foreground" value="3000ff"> <param name="step" value="2"> <param name="sleeptime" value="50"> <param name="amplitude" value="50"> <param name="tailsize" value="20"> <param name="width" value="400"> <param name="height" value="90"> <param name="font" value="TimesRoman"> <param name="fontsize" value="36"> <param name="italic" value="No"> <param name="bold" value="Yes"> <param name="text" value="Surya Science Club"> </applet>

Tampilan di browser : ( Animasi tidak ditampilkan bila browser Anda belum di install J2RE )

Applet writen by : Anibal Wainstein, copyright © http://www.demicron.se, you can download these free applet from http://www.javafile.com

Seperti yang Anda lihat diatas, penulisan tag HTML untuk applet ini sebenarnya cukup mudah di ingat ketimbang flash, selain itu kita dapat merubah dengan cepat parameter-parameter yang kita inginkan. Seperti pada contoh diatas, tag utama untuk meng-embed java applet cukup dengan memakai tag < applet + atribut nya > , dilanjutkan dengan parameter-parameter yang berlaku kemudian menutupnya dengan tag </applet>. Adapun fungsi dan kegunaan dari atribut dan parameternya sedikit mirip dengan flash hanya saja pen-deklarasian parameter pada JAVA APLLET ini saya rasa Anda juga tentunya akan lebih mudah untuk membaca nya dan mengerti maksud dari parameter-parameter yang dituliskan itu. Dengan demikian maka kedewasaan sang designer akan terlihat bila dia sudah mengerti akan maksud dan tujuan dari pendeklarasian parameter tersebut.

html

Tag / Kode / Perintah dari HTML Pada Halaman sebelumnya, Anda sudah diperkenalkan tata cara atau aturan penulisan kode HTML beserta urutan-urutannya. Nah setelah Anda paham mengenai tata cara penulisan kode-kode HTML sekarang saatnya bagi Anda untuk dibawa lebih jauh mengenai tag atau perintah yang berlaku pada HTML. Tak perlu banyak pengantar lagi, sekarang saya akan menjelaskan mengenai TAG HTML ini satu persatu. 1. <center> dan </center> Tag ini mempunyai fungsi untuk membuat suatu objek berada di tengah suatu bidang yang ditentukan. Objek itu dapat berupa teks, image maupun tabel. Suatu objek akan tetap berada di tengah sampai Tag penutup </center> ditemukan. Jadi setelah Anda memberi Tag <center> jangan lupa untuk memberikan Tag penutupnya yaitu </center> pada akhir dari objek yang akan diposisikan pada tengah suatu bidang.

Contoh : modifikasi dari latihan1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Latihan Membuat File HTML</title> <meta name="author"   content="Malih Tongtong"> <meta name="description"   content="Uji coba pembuatan file HTML yang sederhana"> <meta name="keywords"   content="Latihan,HTML,Malih,berjalan,baik,atau,tidak"> </head> <body> <center> Ini adalah program HTML pertamaku. </center> </body> </html>

Pada file latihan1.html yang belum ditambahkan tag <center> teks berada pada keadaan default yaitu rata kiri, sedangkan setelah diberi tag <center> maka teks akan berada pada tengah layar monitor. 2. <b> dan </b> Tag ini mempunyai fungsi untuk membuat huruf atau karakter yang ditampilkan menjadi tebal (BOLD). Contoh penggunaan nya di dalam program : Ini adalah <b>program HTML</b> pertamaku. Ini adalah program HTML pertamaku. Pada contoh diatas, kalimat program HTML diapit dengan tag <b> dan </b> , maka ketika Anda jalankan di browser kalimat tersebut akan tercetak dengan huruf tebal. 3. <font> dan </font> Tag ini berfungsi untuk mengatur tampilan jenis, warna, dan ukuran suatu karakter atau huruf (font), Anda lihat huruf-huruf yang ada pada tutorial ini, warna-warna dari huruf-huruf itu sengaja saya buat demikian agar Anda dapat membedakan yang mana Objek, keterangan, dan subjek nya. Huruf pada Objek ini ditandai dengan huruf berwarna merah, keterangan ditandai dengan huruf hitam dan subjek dengan warna biru. Atribut dari Tag <font> ini ada beberapa jenis antara lain :

a. color : Untuk merubah warna dari huruf atau karakter. b. size : Untuk merubah ukuran huruf, besar kecilnya ukuran huruf di deklarasikan dengan angka 1 sampai 6. c. face : Untuk merubah jenis dari huruf yang akan kita gunakan seperti Arial, Times New Roman, Verdana dan sebagainya.

Atribut color : contoh penggunaan nya di dalam program : <font color="black">Tulisan ini berwarna hitam</font> <font color="red">Tulisan ini berwarna merah</font> <font color="blue">Tulisan ini berwarna biru</font> <font color="green">Tulisan ini berwarna hijau</font> <font color="white">Tulisan ini berwarna putih</font> Anda dapat merubah warna dari huruf atau karakter sesuka hati Anda, contoh diatas hanya beberapa warna saja yang di sajikan. Selain dengan nama warna dalam bahasa inggris, Anda juga dapat menggunakan kode HEXA seperti pada table dibawah ini.

DAFTAR WARNA - WARNA DAN KODE NYA       #000000       #333300       #003366       #333399       #800000       #808000       #008080       #666699       #FF0000       #99CC00       #33CCCC       #800080       #FF00FF       #FFFF00       #00FFFF       #993366       #FF99CC       #FFFF99       #CCFFFF       #CC99FF       #993300       #003300       #000080       #333333       #FF6600       #008000       #0000FF       #808080       #FF9900       #339966       #3366FF       #969696       #FFCC00       #00FF00       #00CCFF       #C0C0C0       #FFCC99       #CCFFCC       #99CCFF       #FFFFFF

Atribut size : Contoh penggunaan nya di dalam program : <font size="1">Huruf ini mempunyai ukuran 1</font> <font size="2">Huruf ini mempunyai ukuran 2</font> <font size="3">Huruf ini mempunyai ukuran 3</font> <font size="4">Huruf ini mempunyai ukuran 4</font> <font size="5">Huruf ini mempunyai ukuran 5</font> Selain dengan angka, Anda juga dapat mendeklarasikan ukuran huruf dengan besarnya PIXEL contoh : <font size="1px"> Atribut face : Contoh penggunaan nya di dalam program : <font face="arial">Huruf ini type ARIAL</font> <font face="times new roman">Huruf ini type TIMES NEW ROMAN</font> <font face="verdana">Huruf ini type VERDANA</font> <font face="tahoma">Huruf ini type TAHOMA</font> 4. <u> dan </u> Tag ini berfungsi untuk memberikan efek garis bawah (underlines) pada suatu huruf atau karakter. Contoh penulisannya di dalam program : Menteri Pendidikan Nasional <u>memberikan sumbangan </u> untuk kaum miskin. Menteri Pendidikan Nasional memberikan sumbangan untuk kaum miskin. Pada contoh kalimat diatas kalimat MEMBERIKAN SUMBANGAN diapit oleh tag <u> dan </u> bila dijalankan pada browser maka kalimat yang di apit oleh tag itu akan diberi tanda garis bawah (underlines). 5. <br> Tag ini berfungsi untuk berpindah baris ke baris berikutnya. Misalkan Anda membuat sebuah karya tulis yang tentunya tulisan itu cukup panjang untuk dibaca, atau Anda mennginginkan sesuatu kalimat harus berada dibawahnya walaupun kalimat itu hanya terdiri dari beberapa kata, Anda dapat menggunakan tag <br> untuk memisahkannya. Untuk Tag <br> tidak perlu ditutup seperti halnya tag-tag yang telah disinggung diatas. jadi cukup Anda berikan tag <br> dimana Anda menginginkannya. Contoh penggunaanya dalam program : Ini baris kesatu, <br>Ini baris kedua, <br>Ini baris ketiga. Setelah Anda menjalankannya di Browser, maka Kalimat diatas akan menjadi seperti ini. Ini baris kesatu, Ini Baris kedua, Ini baris ketiga. 6. <p> Tag ini mempunyai fungsi untuk membuat sebuah paragraf baru. Didalam sebuahartikel tentunya banyak sekali paragraf-paragraf untuk memisahkan pokok pikiran yang terkandung dalam kumpulan kalimat tersebut, untuk memisahkan paragraf yang satu dengan yang lainnya, maka Tag <p> ini digunakan. Atribut dari Tag <p> ini ada 3 jenis yaitu Rata kanan ( align="right" ) , rata kiri ( align="left" ), rata kanan kiri ( align="justify" ). dan rata tengah ( align="center" ).

Contoh penggunaan nya di dalam program :

Rata kiri <p align="left"> paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kiri, sehingga semua huruf yang berada di bagian kiri halaman akan terlihat rapi. Rata kanan <p align="right"> paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kanan, sehingga semua huruf yang berada di bagian kanan halaman akan terlihat rapi. Rata kanan-kiri <p align="justify"> paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kanan-kiri, sehingga semua huruf yang berada di bagian kanan dan kiri halaman akan terlihat rapi. Rata tengah <p align="center"> paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata tengah, sehingga semua huruf akan terpusatkan dibagian tengah.

7. <sub> dan </sub> Tag ini mempunyai fungsi untuk membuat sebuah huruf atau karakter berada sedikit kebawah dari huruf atau karakter yang lain. Misalnya kita ingin menuliskan rumus suatu senyawa kimia, maka tag <sub> ini diperlukan. Contoh penggunaan nya di dalam program : H<sub>2</sub>O      tampilan di browser :       H2O FeCl<sub>3</sub>   tampilan di browser :     FeCl3 CO<sub>2</sub>      tampilan di browser :       CO2 8. <sup> dan </sup> Tag ini merupakan kebalikan dari tag <sub>, bila kita ingin membuat suatu huruf atau karakter agak sedikit keatas maka tag <sup> ini diperlukan. Misalnya kita ingin menuliskan suatu persamaan matematika maka kita gunakan tag ini untuk membuat suatu karakter atau huruf berada sedikit diatas yang lainnya. Contoh penggunaan nya di dalam program : X <sup>2</sup> + Y <sup>2</sup> + X + Y + 1 = 0     tampilan di browser : X 2 + Y 2 + X + Y + 1 = 0 9. <i> dan </i> Tag <i> ini berfungsi untuk membuat huruf atau karakter menjadi ITALIC. Contoh penggunaan nya di dalam program : Menteri Pendidikan Nasional <i>memberikan santunan</i> untuk anak yatim piatu Kalimat diatas bila di jalankan pada browser menjadi seperti berikut ini : Menteri Pendidikan Nasional memberikan santunan untuk anak yatim piatu 10. <hr> Tag ini berfungsi untuk memberikan garis batas. Anda lihat Halaman web ini, Untuk memisahkan Materi yang satu dengan yang lain saya memberi batas dengan garis. Yah itulah kegunaan dari tag <hr> 11. <ol>, <li>, </li> dan </ol> Terkadang suatu tulisan perlu diberi penjelasan dengan tanda-tanda tertentu, agar si pembaca memahami bahwa tulisan itu merupakan satu kesatuan yang terdiri dari beberapa point. Sebagai contoh sekali lagi Anda perhatikan Halaman web ini. Untuk memperjelas sesuatu bagian dari pokok pembahasan, saya menggunakan angka-angka yang merupakan point-point dari suatu bahasan dalam satu kesatuan. Tag ini saya beri nomor urut ke 11. Dengan perintah atau tag <ol> ini maka nomor urut akan dibuat secara otomatis.> Contoh penggunaan nya di dalam program :

Jadwal kegiatan untuk hari ini : <ol> <li>Mandi.</li> <li>Sarapan pagi.</li> <li>Berangkat ke Kantor.</li> <li>Meeting dengan Kepala Bagian.</li> <li>Pulang dari Kantor.</li> <li>Mandi Sore.</li> <li>Istirahat.</li> </ol>

Maka setelah dijalankan pada browser akan tampak sepertidi bawah ini : Jadwal kegiatan untuk hari ini :

Mandi Sarapan pagi Berangkat ke Kantor Meeting dengan Kepala Bagian Pulang dari Kantor Mandi Sore Istirahat

Perhatikan.., setiap item di apit oleh tag <li> dan </li>, dan Tag <li> , </li> ini harus berada diantara Tag <ol> dan </ol> . 12. <ul>, <li>, </li> dan </ul> Tag ini hampir mirip dengan tag <ol> diatas, bedanya adalah item-item nya bukan ditandai dengan angka melainkan ditandai dengan titik atau DOT yang besar. Contoh penggunaan nya di dalam program :

Jadwal kegiatan untuk hari ini : <ul> <li>Mandi</li> <li>Sarapan pagi</li> <li>Berangkat ke Kantor</li> <li>Meeting dengan Kepala Bagian</li> <li>Pulang dari Kantor</li> <li>Mandi Sore</li> <li>Istirahat</li> </ul> Maka setelah dijalankan di Browser akan terlihat seperti dibawah ini. Jadwal kegiatan untuk hari ini : Mandi Sarapan pagi Berangkat ke Kantor Meeting dengan Kepala Bagian Pulang dari Kantor Mandi Sore Istirahat