MENDAFTARKAN WEBSITE (Bagian I – hosting)

Mendaftarkan website :

1. Hosting

2. Registrasi Nama Domain.

3. Memindahkan file ke Server Internet.

4. Submit URL ke Search Engine Populer.

Mendaftarkan website memerlukan beberapa pengetahuan tersendiri yang jarang diajarkan dan dibahas pada materi pengajaran desain web. Dalam kegiatan ini terdapat beberapa hal yang harus dilakukan, di antaranya adalah mencari Internet Service Provider yang menyiapkan ruang pada harddisk mereka agar file-file yang kita miliki dapat ditempatkan di dalamnya (hosting). Kegiatan selanjutnya adalah mencari nama domain yang sesuai bagi website yang telah kita bangun. Langkah selanjutnya sesudah hosting dan nama domain siap, maka kita harus melakukan upload file, yaitu menyalin file yang kita miliki (di dalam harddisk komputer) ke server internet. Segera setelah proses ini selesai, website yang sudah kita buat dapat diakses dan ditampilkan di web browser di seluruh dunia. Kegiatan berikutnya adalah mempromosikan website ini ke berbagai Search Engine agar dapat segera diindex dalam database mereka.

HOSTING

Setelah website yang kita siapkan selesai dibangun, kegiatan selanjutnya yang harus dilakukan adalah mencari Penyedia Jasa Internet yang menyediakan fasilitas hosting pada server mereka. Kegiatan ini sangatlah mudah untuk dilakukan, karena banyak situs yang menyediakan fasilitas hosting dengan beragam harga dan kapasitas. Dengan menggunakan mesin pencari, dalam sekejap kita dapat menemukan ratusan bahkan ribuan Penyedia Jasa Internet yang menawarkan hosting dengan beragam harga dan fasilitasnya, banyak pula yang menawarkan hosting gratisan dilengkapi dengan template yang dapat Anda pilih. Oleh karena itu, bukan hal yang mudah untuk menentukan pilihan terbaik bagi website yang telah kita rencanakan. Banyak faktor yang harus dipertimbangkan sebelum memutuskan penyedia jasa internet mana yang akan kita hubungi.

Hosting adalah istilah yang dipakai untuk kegiatan menempatkan file-file pada server internet (baca ISP: Internet Service Provider). Hosting dilakukan untuk menyiapkan website agar dapat ditampilkan oleh aplikasi web browser di seluruh dunia.

Berikut ini beberapa pedoman yang dapat menjadi bahan pertimbangkan untuk menentukan pilihan hosting website terbaik :

1. Fasilitas yang disediakan.

Pilihan yang kita lakukan tentu harus sebanding dengan apa yang akan kita dapatkan. Fasilitas yang disediakan oleh Penyedia Jasa Internet adalah salah satu barometer yang membedakan satu perusahaan dengan perusahaan yang lain. Ataupun jika harga bukanlah hal yang bukan menjadi masalah utama, maka satu jenis hosting dibedakan dari kelas yang lainnya berdasarkan fasilitas yang disediakan. Oleh karena itu, rajin-rajinlah membandingkan fasilitas yang bisa didapatkan dengan harga yang sama pada satu ISP dengan ISP yang lainnya.

Beberapa fasilitas yang biasanya ditawarkan oleh sebuah ISP adalah pengelolaan alamat email, penanganan SPAM, antivirus, pengelolaan database, control panel, pengelolaan sub-domain, dsb.

2. Dukungan Teknis.

Dukungan teknis dapat diperhatikan pada ketersediaan beberapa saluran yang disediakan oleh ISP, seperti layanan telpon, HP, e-mail, Yahoo! Messenger. Berapa banyak jalur yang mereka miliki dan kapan Anda dapat menghubungi mereka adalah sebagian dari hal-hal yang penting untuk diperhatikan. Anda tentu tidak ingin diabaikan ketika harus menghubungi mereka untuk meminta bantuan, bukan?

Sekedar perbandingan, Anda dapat mengukur dukungan teknis dengan menghubungi salah satu jalur yang tersedia dan menanyakan beberapa hal yang ingin Anda ketahui. Seberapa antusiaskah mereka mau menjawab pertanyaan-pertanyaan Anda?

3. Kredibilitas Penyedia Jasa Internet.

Kredibilitas berhubungan dengan profesionalitas Penyedia Jasa Internet. Semakin panjang pengalaman perusahaan, maka semakin matang pelayanan yang mereka lakukan. Semakin banyak prestasi yang diraih oleh perusahaan, semakin baik pula kredibilitas perusahaan tersebut.

Kredibilitas perusahaan Penyedia Jasa Internet adalah hal yang penting jika Anda tidak ingin berhubungan dengan orang yang bekerja tanpa komitmen. Anda dapat menanyakan rekomendasi dari beberapa orang yang telah berpengalaman dalam melakukan hosting untuk website yang mereka kelola. Cara lain adalah dengan mencari informasi mengenai Penyedia Jasa Internet yang bersangkutan, prestasi apa yang mereka raih, website penting mana yang mempercayakan hosting pada server milik mereka, dst.

4. Lokasi Server dan Stabilitas Jaringan.

Kecepatan sebuah website ditampilkan pada browser sangat bergantung pada kontennya, selain itu juga dipengaruhi oleh lokasi servernya. Sebuah website yang berbahasa Indonesia tentu akan lebih cepat diakses jika servernya ditempatkan di Indonesia. Namun, jika Anda membuat website yang berbahasa Inggris dan target utamanya adalah pengunjung dari luar negeri, akan lebih baik jika ditempatkan pada server luar negeri, atau menggunakan server dalam negeri yang menyediakan akses luar negeri yang cepat. Hal ini bisa dilihat pada bandwidth yang disediakan oleh ISP. Seberapa besar bandwidth luar negeri yang mereka buka.

Lokasi server, selain berpengaruh pada kecepatan aksesnya, juga sangat berpengaruh pada stabilitas jaringannya. Sebagai contoh, ketika jalur yang menghubungkan server di Indonesia dengan luar negeri terganggu, maka secara otomatis website yang ditempatkan di luar negeri akan sulit diakses, sedangkan website di Indonesia relatif tidak terganggu. Demikian halnya sebaliknya, website yang ditempatkan di Indonesia akan sulit diakses oleh luar negeri.

5. Upload dan Backup Data.

Fasilitas lain yang dapat menunjang kenyamanan maintenance data adalah fasilitas upload secara manual oleh Penyedia Jasa Internet. Kegiatan memindahkan file dari komputer pribadi ke server internet bisa dilakukan dengan menggunakan fasilitas yang telah disediakan dalam control panel website, maupun melalui software khusus upload. Meskipun demikian, berkat perkembangan teknologi internet, dewasa ini sudah sangat lumrah website-website dilengkapi dengan data berupa video yang dapat ditampilkan secara online. Kegiatan upload yang sejatinya dapat dilakukan sendiri, sekarang membutuhkan waktu yang lama akibat ukuran file yang membengkak. Sebuah situs yang dilengkapi dengan puluhan file video berukuran besar menjadi masalah tersendiri ketika harus memindahkan data video tersebut melalui kabel.

Selain fasilitas untuk upload secara manual, ketika Anda menyiapkan website dengan database berukuran besar menjadi satu hal penting untuk selalu melakukan backup data secara berkala. Namun, ada baiknya jika Anda menanyakan fitur backup data yang biasanya disediakan oleh Penyedia Jasa Internet. Fasilitas backup data yang disediakan semestinya menjadi salah satu kemudahan yang dapat Anda manfaatkan.

6. Bandwidth.

Bandwidth adalah kapasitas kanal, yaitu jumlah data yang bisa dilewatkan dalam satuan waktu tertentu. Semakin besar bandwidth, maka semakin banyak data yang bisa dikirim dan diterima, atau bisa juga berarti transmisi data semakin cepat.

Bandwidth yang disediakan oleh Penyedia Jasa Internet dibatasi baik lebar jalur datanya, maupun jumlah total data yang bisa dilewatkan dalam kurun waktu tertentu. Umumnya Penyedia Jasa Internet membatasi jumlah total data sebesar 2 GB per bulan. Jika melebihi kuota tersebut, maka biasanya situs Anda dimatikan untuk sementara, atau Anda harus membayar kelebihan jumlah data tersebut.

7. Harga dan Kemudahan Pembayaran.

Harga yang ditentukan oleh Penyedia Jasa Internet sangatlah beragam. Satu layanan dengan kapasitas tertentu akan berbeda harganya pada Penyedia Jasa Internet lainnya. Oleh karena itu, Anda harus menentukan jenis layanan apa yang Anda butuhkan dan berapa kapasitas yang diperlukan untuk menempatkan file-file yang telah Anda siapkan. Selanjutnya, carilah Penyedia Jasa Internet yang baik menurut pengetahuan Anda. Bandingkan harga-harga yang mereka tawarkan serta fasilitas dan layanan yang Anda dapatkan. Penyedia Jasa Internet yang cukup mapan biasanya memberikan diskon yang besar untuk layanan premium, sebaliknya Penyedia Jasa Internet yang baru biasanya memberikan diskon yang besar untuk kelas ekonomis.

Selain masalah harga, ada baiknya Anda memperhatikan skema pembayaran yang harus dilakukan. Apakah pembayaran dilakukan melalui transfer antar bank, atau kartu kredit (perhatikan masalah keamanannya). Yang harus Anda bayar biasanya tidak hanya biaya hosting, melainkan juga mencakup setup fee, registrasi domain, ditambah dengan fasilitas dan administrasi. Oleh karena itu, Anda harus jeli memperhatikan harga dan layanan yang akan Anda dapatkan.

Skema pembayaran yang harus Anda lakukan biasanya terdiri dari 2 jenis, yakni pembayaran tahunan (annual fee) dan pembayaran bulanan (monthly fee). Jika Anda melakukan transaksi dengan harga paket yang ditawarkan, biasanya Anda dapat melakukan pembayaran dengan skema tahunan. Namun, jika Anda meminta fasilitas dan layanan di luar paket yang disediakan, biasanya Anda akan dikenakan biaya tambahan dengan skema pembayaran bulanan (tergantung fasilitas dan layanan yang Anda minta). Oleh karena itu, perhatikan skema pembayaran yang harus Anda lakukan sebelum transaksi dilakukan!

8. Garansi.

Apapun yang Anda beli, tentu harus ada jaminannya bukan? Tidak sedikit Penyedia Jasa Internet yang memberikan jaminan uang kembali jika dalam jangka waktu tertentu Anda tidak puas dengan layanan yang mereka berikan. Dengan demikian, Anda akan merasa aman untuk melakukan transaksi dengan mereka.

Hosting Gratisan

Mau mencoba hosting gratisan? Di dunia maya ini terdapat banyak situs yang menawarkan hosting secara gratis. Silakan berselancar menggunakan mesin pencari, maka dalam sekejap Anda akan menemukan banyak sekali situs yang menawarkan hosting gratis. Banyak di antaranya yang menawarkan ruang cukup besar untuk website profesional sekalipun. Anda boleh mencoba salah-satunya yang terdaftar pada alamat website berikut ini: http://www.free-webhosts.com

Kita lanjutkan pada topik berikutnya.

Advertisements

Membuat Website Itu Mudah (Bagian X – Frameset)

Frameset adalah salah satu cara untuk membagi-bagi halaman ke dalam beberapa bagian. Pekerjaan merancang halaman dengan memanfaatkan frameset menjadi pekerjaan yang mudah. Bagian-bagian utama pada website dapat dikelompokkan ke dalam frame, sedangkan bagian contentnya tetap berada di frame yang akan selalu berubah. Dengan demikian, kita dapat menentukan bagian mana yang akan menjadi kepala halaman (header), menu, kaki, content, dan bagian lain yang dianggap perlu.

Frameset berbeda dengan halaman HTML biasa, di dalam halaman frameset hanya terdapat pengaturan mengenai bagaimana sebuah halaman ditata (layout halaman). Pada halaman frameset ini, dapat ditampilkan beberapa halaman HTML sekaligus pada jendela web browser yang sama. Halaman-halaman HTML yang ditampilkan dalam frameset tersebut menempati bagiannya masing-masing, dan setiap frame dalam frameset tidak saling berkaitan satu dengan lainnya. Pada halaman yang panjang, scrolling hanya berlaku pada frame itu saja – biasanya scrolling hanya diberlakukan pada frame content saja.

Dengan adanya frameset, pengelolaan halaman menjadi mudah, namun jumlah file yang harus dikelola menjadi bertambah. Hal ini menjadi menyulitkan bagi yang belum terbiasa, mengingat perancang harus bekerja dengan beberapa dokumen HTML sekaligus.

Pembuatan halaman frameset menggunakan dua tag HTML, yaitu Tag <frameset> dan Tag <frame>, penjelasannya adalah sebagai berikut:

Tag Frameset

Tag <frameset> digunakan untuk mendefinisikan bagaimana jendela web browser akan dibagi menjadi frame-frame yang lebih kecil. Tag <frameset> ini dituliskan untuk membagi-bagi halaman ke dalam format baris dan kolom yang akan diisi dengan frame. Nilai baris atau kolom menentukan jumlah area layar yang akan digunakan oleh setiap baris atau kolom. Pada frame-frame tersebut ditempatkan halaman-halaman HTML. Satu halaman HTML akan menempati satu frame.

Tag <frameset cols> berikut akan membagi layar menjadi tiga bagian kolom masing-masing lebarnya sebesar 25%, 50%, dan 25% dari lebar keseluruhan area layar.

<frameset cols=”25%,50%,25%”>

Layout halaman frameset di atas akan tampak seperti di bawah ini:

frame 1 – 25% frame 2 – 50% frame 3 – 25%

Tag <frameset rows> berikut akan membagi layar menjadi tiga bagian baris masing-masing tingginya sebesar 25%, 50%, dan 25% dari tinggi keseluruhan area layar.

<frameset rows=”25%,50%,25%”>

Layout halaman frameset di atas akan tampak seperti di bawah ini :

frame 1 – 25%
frame 2 – 50%
frame 3 – 25%

Pembagian frame bisa dengan ukuran persentase (relatif) seperti contoh di atas, atau dengan ukuran pixel (absolut). Namun dengan pixel tidak dapat ditentukan ukuran seluruh frame, karena ukuran layar monitor yang digunakan juga belum tentu sama. Untuk itu digunakan tanda “*” untuk pengganti ukuran yang tidak tentu tadi. Contoh berikut akan membagi layar menjadi dua bagian baris masing-masing sebesar 100 pixel dan sisa pixel dari tinggi area layar.

<frameset rows=”100,*”>

Layout halaman frameset di atas akan tampak seperti di bawah ini :

frame 1 – 100 px
frame 2 – fleksibel

Sedangkan contoh ini akan membagi layar menjadi dua bagian kolom masing-masing sebesar 100 pixel dan sisa pixel dari lebar area layar.

<frameset cols=”100,*”>

Layout halaman frameset di atas akan tampak seperti di bawah ini :

frame 1
100 px
frame 2
fleksibel

Tag <frameset> tidak membutuhkan adanya tag <body> kecuali bila web browser yang digunakan tidak mendukung tag <frameset> tersebut.

Tag Frame

Tag <frame> dituliskan untuk menempatkan dokumen HTML yang akan disertakan pada frame.

Pada contoh berikut, frameset membagi halaman menjadi dua kolom, masing-masing lebar kolom adalah 25% dan 75% dari lebar area layar. Dokumen HTML dengan nama “frame_1.html” ditempatkan pada kolom pertama, dan dokumen HTML kedua bernama “frame_2.html” disertakan pada kolom kedua.

<frameset cols=”25%,75%”>
<frame src=”frame_1.html”>
<frame src=”frame_2.html”>
</frameset>

Frameset Vertikal

Nah, sekarang kita coba membuat sebuah halaman website dengan frameset. Jalankan aplikasi Notepad. Klik Start > Programs > Accessories > Notepad. Kemudian ketik baris perintah berikut ini :

<html>
<frameset cols=”20%,60%,20%”><frame src=”frame_1.html”>
<frame src=”frame_2.html”>
<frame src=”frame_3.html”></frameset>
</html>

Simpan file di My Documents sebagai “frameset-01.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Documents, kemudian pada bagian Save as type pilih All Files, lalu ketik “frameset-01.html” pada bagian File name, klik tombol Save.

Jalankan aplikasi Explorer, klik My Documents, cari file “frameset-01.html” yang baru dibuat tadi, kemudian klik ganda file tersebut.

Jendela Internet Browser akan terbuka, memperlihatkan isi halaman frameset-01.html.

<– 20% –>

 

<———– 60% ———–>

<– 20% –>

Penjelasan

Contoh latihan di atas memperlihatkan bagaimana cara membuat frame dengan tiga kolom vertikal masing-masing selebar 20%, 60%, dan 20% dari lebar area layar. Frame pertama berisi “frame_1.html”, frame kedua berisi “frame_2.html”, dan frame ketiga berisi “frame_3.html”.Frameset dengan menggunakan nilai persen tidak memiliki ukuran piksel yang pasti, lebar frameset ini akan mengikuti lebar layar dan dihitung sebagai persentase dari lebar layar.

Frameset Horizontal

Sekarang kita coba lagi membuat sebuah halaman website dengan frameset horizontal. Jalankan aplikasi Notepad. Klik Start > Programs > Accessories > Notepad.

Kemudian ketik baris perintah berikut ini :

<html>
<frameset rows=”200, *, 100″><frame src=”frame_1.html”>
<frame src=”frame_2.html”>
<frame src=”frame_3.html”></frameset>
</html>

Simpan file di My Documents sebagai “frameset-02.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Documents, kemudian pada bagian Save as type pilih All Files, lalu ketik “frameset-02.html” pada bagian File name, klik tombol Save.

Jalankan aplikasi Explorer, klik My Documents, cari file “frameset-02.html” yang baru dibuat tadi, kemudian klik ganda file tersebut.

Jendela Internet Browser akan terbuka, memperlihatkan isi halaman frameset-02.html.

|
200 pixel
|

|
|
|
|
* pixel (sisa dari tinggi layar)
|
|
|
|

100 pixel

Penjelasan

Contoh latihan di atas memperlihatkan bagaimana cara membuat frameset dengan tiga baris horizontal masing-masing tingginya sebesar 200 pixel, * pixel (sisa tinggi dari tinggi layar), dan 100 pixel. Frame pertama berisi “frame_1.html”, frame kedua berisi “frame_2.html”, dan frame ketiga berisi “frame_3.html”.

Perhatikan bahwa frameset ini menggunakan frame yang tetap (frame 1 = 200pixel, frame 3 = 100 pixel) dan frame yang fleksibel ditandai dengan tanda asterik (*). Frame yang tetap akan memiliki ukuran yang pasti dalam hitungan piksel, tapi frame yang fleksibel memiliki ukuran sebagai sisa dari ukuran layar dikurangi oleh ukuran frame-frame tetap.

Tag Noframes

Selain Tag Frameset dan Tag Frame, di dalam halaman frameset juga harus ada Tag Noframes. Format penulisannya adalah sebagai berikut:

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.

Ketik baris perintah berikut ini :

<html><frameset cols=”20%,60%,20%”>

<frame src=”frame_1.html”>

<frame src=”frame_2.html”>

<frame src=”frame_3.html”>

<noframes>

<body>Web browser tidak mendukung frame!</body>

</noframes>

</frameset>

</html>

Simpan file sebagai “frameset-03.html”

Jalankan aplikasi Explorer, cari file “frameset-03.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.

Penjelasan

Contoh latihan di atas memperlihatkan bagaimana tag <noframes> dibuat. Tag noframes ini akan bekerja dan menampilkan isi tag <body> jika internet browser yang digunakan tidak mendukung frameset.

Frameset Kombinasi

Layout halaman HTML dapat dibuat sederhana dengan membaginya menjadi beberapa baris (rows). Kemudian, pada salah satu rows, kita dapat membaginya menjadi beberapa kolom. Hal ini sering dilakukan untuk mendapatkan layout halaman HTML yang optimal.

Sekarang kita coba untuk membuat layout halaman kombinasi tersebut. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.

Ketik baris perintah berikut ini :

<html>
  <frameset rows="150,*">

    <frame src="frame_1.html">
    <frameset cols="20%,80%">

      <frame src="frame_2.html">
      <frame src="frame_3.html">

    </frameset>

  </frameset>
</html>

Simpan file sebagai “frameset-04.html”

Jalankan aplikasi Explorer, cari file “frameset-04.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.

|

150pixel

|

<– 20% –>

< ——————- 80% ——————–>

Penjelasan

Contoh latihan di atas memperlihatkan cara membuat frameset kombinasi. Tag <frameset> yang pertama akan membagi layar menjadi dua frame horizontal, frame pertama di bagian atas tingginya 150 pixel dan frame kedua di bagian bawah tingginya adalah sisa pixel dari tinggi area layar. Kemudian tag <frameset> kedua akan membagi frame kedua (frame yang berada di bawah) menjadi dua frame vertikal, masing-masing sebesar 20% dan 80% dari lebar area layar.

Frameset dengan Scrolling dan Noresize

Layout halaman HTML ditampilkan oleh Browser sesuai dengan ukuran yang dituliskan. Jika isi frameset tersebut, yang disimpan dalam file HTML lebih besar ukurannya daripada ukuran frame yang disediakan, maka secara otomatis browser akan menampilkan scroll bar.

Sekarang kita coba untuk membuat layout halaman dengan scrolling dan tanpa scrolling. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.

Ketik baris perintah berikut ini :

<html><frameset rows=”150,*”>

<frame scrolling=”No” src=”frame_1.html”>

<frameset cols=”25%,75%”>

<frame scroling=”No” noresize=”noresize” src=”frame_2.html”>

<frame noresize=”noresize” src=”frame_3.html”>

</frameset>

</frameset>

</html>

Simpan file sebagai “frameset-05.html”

Jalankan aplikasi Explorer, cari file “frameset-05.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.

Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana atribut NORESIZE menyebabkan batas pinggiran antar frame tidak dapat digeser.

Frame Navigasi

Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.

Ketik baris perintah berikut ini :

<html><body>

<a href=”frame_1.html” target=”showframe”>Frame 1</a><br>

<a href=”frame_2.html” target=”showframe”>Frame 2</a><br>

<a href=”frame_3.html” target=”showframe”>Frame 3</a>

</body>

</html>

Simpan file sebagai “frame-6a.html”

Ketik baris perintah berikut ini :

<html><frameset cols=”120,*”>

<frame src=”frame-6a.html”>

<frame src=”frame_1.html” name=”showframe”>

</frameset>

</html>

Simpan file sebagai “frameset-06.html”

Jalankan aplikasi Explorer, cari file “frameset-06.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.

Frame 1Frame 2

Frame 3

<showframe>

Penjelasan

Contoh latihan di atas memperlihatkan penggunaan frame untuk memudahkan navigasi sebuah halaman Web. Untuk itu diperlukan sebuah dokumen HTML berisi link yang berfungsi sebagai navigasi pada satu frame, dan frame lainnya akan digunakan sebagai target dokumen yang ditunjukkan pada link-link tersebut.

Pada contoh di atas, file frame-6a.html berisi tiga buah link yang bila diklik akan dibuka pada frame bernama “showframe”, hal ini dapat dilihat dari penggunaan atribut TARGET=SHOWFRAME. Sedangkan file frameset-06.html berisi <frameset> yang membagi layar menjadi dua bagian, dan salah satu framenya diberi atribut NAME=SHOWFRAME. Pada frame inilah link-link dokumen yang ada pada file frame-6a.html akan terbuka.

Catatan:

Pada contoh di atas, Anda diminta untuk menyiapkan halaman-halaman HTML sebagai frameset. Untuk itu, Anda dapat menyiapkan file-file: frameset-01.html, frameset-02.html, frameset-03.html, frameset-04.html, frameset-05.html, frameset-06.html seperti yang diminta.

Sebagaimana telah diuraikan di atas, frameset dipergunakan untuk layout halaman saja. File yang mengisi masing-masing bagian pada frameset diletakkan pada file yang terpisah. Dalam hal ini ada beberapa file lain yang perlu disiapkan, yaitu : frame_1.html, frame_2.html, frame_3.html.

Sebagai contoh, Anda dapat menyiapkan frame_1.html dalam bentuk yang sederhana, misalnya sebagai berikut :

<html>
 <head>
  <title>Frame 1 - Header</title>
 </head>
 <body bgcolor="#3399FF">
  <div align="center">FRAME 1 - HEADER</div>
 </body>
</html>

Siapkan juga file frame_2.html, misalnya sebagai berikut :

<html>
 <head>
  <title>Frame 2</title>
 </head>
 <body bgcolor="#009966">
  <div align="center">FRAME 2</div>
 </body>
</html>

Dan file frame_3.html, misalnya sebagai berikut :

<html>
 <head>
  <title>Frame 3</title>
 </head>
 <body bgcolor="#FFFFCC">
  <div align="center">FRAME 3</div>
 </body>
</html>

Simpan ketiga file tambahan ini pada folder yang sama dengan file-file frameset (frameset-01.html, frameset-02.html, frameset-03.html, frameset-04.html, frameset-05.html, frameset-06.html). Tentu saja dengan format .html seperti biasa.

Dengan demikian, maka file frameset akan menyertakan file frame_1.html, frame_2.html, frame_3.html ke dalam frame yang dibentuknya.

Kita lanjutkan di topik bahasan selanjutnya.■

Membuat Website Itu Mudah (Bagian IX – Table untuk Layout)

Table atau dalam Bahasa Indonesia disebut Tabel, merupakan cara untuk membagi suatu area ke dalam kolom dan baris. Sama halnya ketika kita bekerja dengan spreadsheet yang terdiri atas kotak-kotak cell, demikian pula dengan tabel terdiri atas kotak-kotak kecil yang dapat diberi tulisan, diberi warna, diberi border, dsb. Namun, dalam perkembangannya, table ternyata tidak hanya berfungsi untuk membuat kolom dan baris, melainkan lebih dari itu, dipergunakan untuk membentuk halaman website itu sendiri. Dengan kata lain, Table adalah salah satu cara yang dapat memudahkan kita dalam menata website ke dalam bagian-bagian yang lebih kecil. Dengan adanya table, maka pekerjaan menata halaman website menjadi sebuah pekerjaan yang mudah, bahkan menjadi menyenangkan.

Kenyataannya, kebanyakan website sekarang ini ditata dengan menggunakan pembagian area yang dikelompokkan dengan rapi. Misalnya sebagai berikut:

  • Bagian atas diperuntukkan bagi Header atau Kepala halaman website dan menu utama.
  • Bagian kiri diperuntukkan bagi Menu, Submenu, atau bagian-bagian lain yang cukup penting.
  • Bagian tengah diperuntukkan bagi content website, yang berisi berbagai artikel.
  • Bagian kanan diperuntukkan bagi hal-hal lain, seperti iklan, link, dll.
  • Bagian bawah diperuntukkan bagi menu dan copyright.
    Header & Menu
    Submenu
    Content
    Iklan
    Copyright & Menu

    Pembagian area website seperti di atas sangatlah wajar dilakukan pada saat sekarang mengingat kecenderungan pemakaian monitor dan VGA Card yang berkualitas cukup baik, menghasilkan resolusi yang tajam dan dapat menampilkan ukuran panjang x lebar yang cukup besar (minimal 800 x 600 piksel) yang dapat dimanfaatkan untuk menampung semua hal tersebut di atas.

    Nah, mengingat pentingnya table dalam hal pengaturan tata letak halaman website, maka kita dapat mempelajari bagaimana table bekerja dan bagaimana bekerja dengan menggunakan table.

    Membuat Struktur Table

    Table terbagi atas tiga bagian utama, yaitu Tag table atau <table>, Tag Table Row atau <tr>, dan Tag Table Data atau <td>. Ketiganya disusun dalam hierarki. Tag Table pada hierarki tertinggi, Table Row berada di bawahnya, dan Table Data pada hierarki di bawah Table Row, sehingga kita dapat menuliskan susunan table tersebut sebagai berikut :

    <table>
      <tr>
        <td>ini isi table</td>
      </tr>
    </table>

    Hasilnya akan terlihat sebagai berikut:

    ini isi table

    Belum terlihat seperti tabel karena belum diisi dengan atribut sebagaimana lazimnya sebuah table.

    Sekarang, kita tambahkan atribut border di dalamnya:

    <table border="1">
      <tr>
        <td>ini isi table</td>
      </tr>
    </table>
    ini isi table

    Table di atas sekarang diberi pembatas atau border sebesar 1 piksel.

    Untuk menambahkan baris, maka kita harus menambahkan Tag <tr> sampai </tr>, sebagai berikut :

    <table border="1">
      <tr>
        <td>ini baris pertama</td>
      </tr>
      <tr>
        <td>ini baris kedua</td>
      </tr>
      <tr>
        <td>ini baris ketiga</td>
      </tr>
    </table>
    ini baris pertama
    ini baris kedua
    ini baris ketiga

    Sedangkan untuk menambahkan kolom, maka kita harus menambahkan Tag <td> sampai </td>, sebagai berikut :

    <table border="1">
      <tr>
        <td>baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
        <td>baris 3 kolom 1</td>
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    baris 1 kolom 1 baris 1 kolom 2
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Menambahkan Heading dan Warna pada Table

    Selain Tag <table>, <tr>, dan <td>, kita dapat menambahkan tag Heading atau <th> pada table. Tag ini dipergunakan sebagai kepala pada kolom ataupun baris.

    Agar table bisa lebih menarik untuk dilihat, kita dapat menambahkan warna background pada Tag <table>, <tr>, <td>, maupun <th>. Contohnya adalah sebagai berikut :

    <table border="1">
        <tr>
          <th bgcolor="royalblue">Heading 1 </th>
          <th bgcolor="royalblue">Heading 2 </th>
        </tr>
        <tr bgcolor="lightgrey">
          <td>baris 1 kolom 1</td>
          <td>baris 1 kolom 2</td>
        </tr>
        <tr>
          <td>baris 2 kolom 1</td>
          <td>baris 2 kolom 2</td>
        </tr>
        <tr bgcolor="lightgrey">
          <td>baris 3 kolom 1</td>
          <td>baris 3 kolom 2</td>
        </tr>
      </table>

    Heading 1 Heading 2
    baris 1 kolom 1 baris 1 kolom 2
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Cellpadding dan Cellspacing

    Cellpadding dan Cellspacing adalah atribut pada Tag <table> yang fungsinya untuk memberi jarak pada isi table. Atribut cellspacing dipergunakan untuk memberikan jarak antar baris dan kolom :

    <table border="1" cellpadding="0" cellspacing="10">
      <tr>
        <td>baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
        <td>baris 3 kolom 1</td>
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    baris 1 kolom 1 baris 1 kolom 2
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Sedangkan atribut cellpadding dipergunakan untuk memberi jarak antara border dengan isi sel :

    <table border="1" cellpadding="0" cellspacing="10">
      <tr>
        <td>baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
        <td>baris 3 kolom 1</td>
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    baris 1 kolom 1 baris 1 kolom 2
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Menyatukan Kolom dan Baris pada Table

    Menyatukan beberapa kolom atau baris sekaligus, lazim dilakukan untuk membentuk layout Table sesuai dengan yang diinginkan. Proses menyatukan kolom dan baris pada spreadsheet dinamakan dengan merge columns dan merge rows. Untuk mengabungkan dua kolom, digunakan atribut colspan. Beberapa Tag <td> digabungkan pada satu <td>, sebagai berikut :

    <table border="1" cellpadding="10" cellspacing="0">
      <tr>
        <td colspan="2" bgcolor="lightgrey">baris 1 menempati 2 kolom</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
        <td>baris 3 kolom 1</td>
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    baris 1 menempati 2 kolom
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Sedangkan untuk menggabungkan baris kita dapat menambahkan tag rowspan pada Tag <td> dan menghapus beberapa <td> di bawahnya :

    <table border="1" cellpadding="10" cellspacing="0">
      <tr>
        <td rowspan="3" bgcolor="lightgrey">kolom 1 menempati 3 baris</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
    
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
    
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    kolom 1 menempati 3 baris baris 1 kolom 2
    baris 2 kolom 2
    baris 3 kolom 2

    Kita lanjutkan di topik bahasan selanjutnya.■