Moh. Najib Buchori: Membuat Homepage Seri II: Editor HTML Dan Stylesheet

Setelah membaca dan memparktikkan Seri I, mungkin kamu merasa lelah, bahkan tergopoh-gopoh, sembari bertanya: Apa sesulit itu membuat halaman WEB? Dulu iya, tetapi tidak untuk jaman sekarang. Saat ini sudah banyak aplikasi HTML editor yang bisa meringankan tugas anda membuat halaman WEB. Saya sengaja memplekotho kamu, tetapi tidak dengan maksud jahat. Sama sekali tidak. Aplikasi HTML editor kerjanya bukan mengubah orang yang nggak ngeh menjadi ngeh, tetapi membuat orang yang ngeh menjadi semakin ngeh, dan membuat pekerjaan orang yang ngeh semakin ringan.

Coba bayangkan, kalau di Seri I saya langsung memperkenalkan kamu dengan HTML editor, pasti banyak tag HTML yang nggak nyantol. Sebab, setiap kali menjalankan instruksi saya, kamu selalu di bantu “kebaikan hati” HTML editor. Dan karenanya kamu tidak bisa melahap seluruh pelajaran saya dengan seksama.

OK. Sekarang kita mulai saja Seri II. Ada tiga poin yang ingin saya sampaikan di bagian ini. Pertama, tentang HTML editor, kedua memahami Stylesheet, ketiga memperdalam tag HTML. Ketiga poin ini tidak akan saya jelaskan secara terpisah, tetapi saya kombinasikan sesuai dengan kebutuhan praktis kita.

Dreamweaver

Mungkin kamu pernah dengar istilah “text editor”. Seperti namanya text editor adalah aplikasi yang didedikasikan untuk membuat dan mengedit file text. Diantara aplikasi “text editor” adalah Notepad yang di Seri I sudah kamu exploitasi habis. Begitu pun, HTML editor adalah aplikasi yang didedikasikan untuk membuat dan mengedit file HTML. Pengertian file HTML di sini lebih luas dari sekedar file yang berekstensi htm atau html. Ia juga mencakup semua jenis file yang bisa menjadi halaman WEB, seperti file berekstensi php dan asp. Ringkasnya HTML editor adalah aplikasi yang didedikasikan untuk membuat dan mengedit halaman WEB.

Beberapa aplikasi yang termasuk kategori HTML editor adalah Frontpage, Arachnopilia, WYSIWYG, dan Dreamweaver. Dalam tutroial ini saya memilih Dreamweaver. Beberapa kelebihan Dreamweaver diantaranya adalah:

What You See Is What You Get (WYSIWYG). Maksudnya, Dreamweaver memiliki fitur yang bisa membuat kita tinggal klik, drag dan drop, lalu di hadapan kita sudah terpampang sebuah halaman WEB. Dan ketika kita buka dengan browser, halaman itu ditampilkan persis seperti apa yang terlihat di jendela Dreameweaver.

Di samping memiliki kemampuan WYSIWYG, Dreamweaver juga memberikan alternatif editing menggunakan kode atau coding. Fasilitas coding sangat diperlukan. Sebab fasilitas WYSIWYG sudah pasti tidak menyediakan semua yang kita inginkan. Dan fasilitas coding inilah yang akan melayani seluruh keinginan kita, asal kita menguasai coding yang diperlukan.

Dreamweaver juga dilengkapi dengan banyak plugin, yang bisa memperingan pekerjaan kita dalam membuat halaman WEB. Maksudnya plugin adalah fitur yang dapat mengerjakan rangkaian proses hanya dengan sekali klik. Plugin dimaksud meliputi proses pembuatan objek yang melibatkan php, mysql, javasript, asp dll.

Dreamweaver menyediakan fasilitas untuk melakukan koneksi dengan Web server, tanpa melaui browser. Dengan fasilitas ini kita bisa mengupload, mendownload dan menghapus file yang ada di server tanpa harus membuka browser.

last but not least, Dreamweaver besifat crossplatform. Maksudnya, halaman WEB yang dibuat dengan Dreamweaver bisa dijalankan di Sistim Operasi (selanjutanya disbut OS) Windows, Linux, Unix dll. Kebanyakan Web Server di Indonesia menggunakan OS Linux. Karena gratis kali’. Bayangkan, kalau kita sudah capai mendesain WEB, kemudian waktu kita upload ternyata nggak bisa jalan karena perbedaan platform OS. Sedddih pasti.

Diantara HTML editor yang saya sebutkan di atas, Frontpage nyaris sama bahkan lebih hebat jika dibanding Dreamweaver. Tetapi kesalahan fatal Frontpage adalah karena dia tidak memiliki kehebatan poin 5, yaitu crossplatform. Maklum, Frontpage, kan, punyanya Microsoft. Tentu saja dia didekasikan hanya untuk OS Windows.

OK. Sekarang saya akan membedah masalah Dreamweaver. Pertama-tama kamu harus mengenal dulu lingkungan Dreamweaver. Lihat gambar di bawah. Itu adalah gambar jendela Dreamweaver. Bagian bagian yang terlihat di situ adalah, Insert Bar, Document Toolbar, Document Window, Panel Group, Files Panel, Tag Selector, Property Inspector.

Disamping bagian bagian spesifik Dreamweaver, ada satu lagi bagian yang umum dimiliki jendela Windows, yaitu Menubar. Itu, lho, bagian yang ada tulisannya “file”, “edit”, “view” dst. Bagian itulah yang disebut Menubar.

Bisa jadi tampilan Dreamweaver kamu nggak seperti gambar di atas. Kalau pingin seperti tampilan di atas, coba ikuti perintah ini: dari menubar pilih edit à Prefrence dan jendela Preferences akan ditampilkan. Di bagian kiri jendela terdapat panel “category”. Pilih general, dan di panel sebelah kanannya klik tombol “Change Workspace”. Di jendela “Workspace Setup” ada pilihan “Designer” dan “Coder”. Pilih “Desaigner” à klik OK. Langkah yang barusan kamu lakukan adalah mengubah model Workspace Dreamweaver menjadi model “Designer”.

Sekarang saya akan menjelaskan masing masing bagian.

Menubar: bagian ini berisi menu dan submenu yang mewakili seluruh fitur Dreamweaver, seperti “New” fitur untuk membuat dokumen baru, “insert” fitur untuk memasukkan objek secara instan, dlsb. Saya yakin kamu sudah akrab dengan yang satu ini.

Insert Bar atau Insert Toolbar: Sebenarnya dengan Menu Bar kita sudah bisa mengakses seluruh fitur yang disediakan Dreamweaver. Tetapi untuk mempermudah pengaksesan, beberapa fitur yang sering digunakan di letakkan di Insert Bar dan diberi icon. Misalnya, kalau kamu ingin memasukkan tabel tidak perlu mengklik menu Insert à submenu Table, tetapi cukup mengklik icon tabel yang ada di Insert Bar.

Document Bar atau Document Toolbar : Sama dengan Insert Bar, tetapi yang ditampilkan adalah fitur yang berkaitan dengan Dokumen, seperti “Preview”, “Design View” dan semua yang berkaitan dengan menu View.

Document window: seperti namanya bagian ini berfungsi untuk menampilkan dokumen yang kamu buat. Ada tiga pilihan tampilan: Code, tampilan dalam bentuk kode HTML; Design, tampilan sesuai dengan objek yang akan terlihat di Browser atau WYSIWYG; dan Split, gabungan dari Code dan Design.Tombol untuk mengaktifkan salah satu tampilan tersebut terletak di Document toolbar.

Tag Selector: bagian ini berfungsi untuk menampilkan tag secara hirarkis. Misalnya kamu punya kode HTML seperti ini:

Tag pertama dari kode di atas adalah <body>. Di dalam <body> ada <ul>. di dalam <ul> ada <li>. Di dalam <li> ada <ol>. Dan di dalam <ol> ada <li> lagi. Kode di atas kalau disusun secara hirakis akan seperti ini:

Tag selector memudahkan kita dalam memilih objek yang akan kita edit.

Property Inspector: bagian ini menampilkan property dari tag yang aktif. Dengan Tag Selector kita mangaktifkan objek yang akan diedit. Dan dengan Property Inspector kita mengubah property objek yang sedang aktif.

Panel Groups: bagian ini menampilkan berbagai panel dengan berbagai keperluan, termasuk diantaranya kalau kita melibatkan PHP dan MySQL dalam pembuatan halaman. Jika dikelompokkan berdasarkan fungsinya, panel-panel ini ada yang berfungsi sebagai tool, seperti panel Snippet dan Application; dan ada yang berfungsi sebagai View atau tampilan, seperti Files Panel dan CSS Styles.

Files Panel: adalah salah satu panel view yang berada di dalam Panel Groups. Fungsinya untuk menampilkan file dari Site ataupun folder, sama seperti Explorenya Windows; melakukan koneksi dengan remote server, upload dll.

Untuk sementara pengenalan lingkungan sudah cukup. Kamu nggak usah kuatir kalau emang belum benar benar memahami lingkungan Dreamweaver. Sebab saya akan tetap memandu kamu dengan cara yang sangat jelas.

Membuat Site Dreamweaver

Di Seri I kamu membuka halaman WEB hasil katihan kamu dengan menunjuk langsung path file yang kamu buat. Maksudnya begini: kamu membuka file HTML dengan cara mengklik file tersebut. Dan karenanya di Address bar browser kamu akan tertulis “C:\latihan\latihan1.htm”. Padahal kamu tahu saat browsing internet kamu nggak pernah lihat alamat web yang seperti itu. Alamat WEB selalu di awali dengan nama host seperti www.ponpessarang.net dan bukan “C:\bla bla bla”.

Nah, mulai saat ini kamu akan melihat hasil latihan kamu dengan menggunakan alamat host. Untuk melakukan itu kamu belum membutuhkan koneksi internet. Cukup dengan Apache sebagai server lokal Address bar kamu akan ada tulisan “http://”-nya kayak brwosing beneran. Syaratnya, di komputer kamu harus sudah terinstal Apache dan kamu harus membuat site di Dreamweaver.

Langkah membuat site :

Buat folder baru di folder C:\latihan dan beri nama “Gambar”. Jadi path dan nama folder selengkapanya adalah “C:\latihan\Gambar”.

dari menubar pilih Site à Manage Sites dan jendela Manage Sites akan ditampilkan

di jendela Manage Sites klik tombol New à Site dan jendela baru akan ditampilkan

Di jendela itu ada dua tab: “Advanced” dan “Basic”. Klik Advanced untuk memastikan tab Advanced dalam keadaan terpilih.

di sebelah kiri jendela ada panel Category dan di dalamnya ada banyak item. Yang perlu kamu isi hanya dua item yaitu: Local Info dan Testing Server.

Pilih Local Info kalau belum dipilih à di kolom Site Name isikan “Situs Sarang” àdi kolom Local Root Folder isikan “C:\latihan”

klik pada pilihan Refresh Local File List Automatically hingga muncul tanda dipilih (tranda centang)

pada kolom Default Image Folder tuliskan “C:\latihan\Gambar”.

pada kolom HTTP Address tuliskan “http://localhost”.

klik pada pilihan Enable Cache hingga mucul tanda dipilih.

Sekarang kita akan mengisi item Testing Server. Klik item Testing Server yang ada di dalam panel Category

Pada kolom Server Model pilih “PHP MySQL”.

pada kolom Access pilih “Local/Network”.

Pada Kolom URL prefix isikan “http://localhost/”.

klik tombol OK yang ada di bawah

Sekarang kembali ke jendela Dreamweaver. Lihat di Files Panel. Kalau File Panels kamu belum kelihatan, ikuti langkah ini: dari menubar pilih Window à Files atau tekan F8. Coba lihat File Panels kamu. Kalau di situ sudah ada gambar folder hijau dengan tulisan “site – Situs Sarang (C:\latihan)” berarti tugas kamu membuat Site berjalan lancar. Good luck. Sekarang hasil kerja kamu siap ditampilkan oleh server local Apache.

Membuat Header Halaman WEB

Dalam latihan ini kamu akan berkenalan dengan tag <meta> dan <style>; memperdalam tag <table>; membuat dan menyimpan dokumen di Dreamweaver.

Membuat Dokumen HTML

Di Seri I kamu membuat dokumen HTML tanpa batuan HTML Editor. Setelah memahami dasar dasar HTML, kamu boleh meminta bantuan HTML editor, dalam hal ini Dreamweaver, untuk membuat dokumen HTML. Ikuti langkah berikut:

Dari menubar pilih File à New atau tekan Ctrl+N dan jendela New Document ditampilkan.

Klik tab General untuk memastikan bahwa Tab Genaral dalam keadaan aktif à di panel Category pilih Basic Page à di panel Basic Page pilih HTML.

Klik Tombol Create dan anda akan kembali ke jendela Dreamweaver.

Lihat di Document Window. Bagian ini terlatak di kiri-tengah dan di atasnya ada tombol “Code”, “Split” dan “Design”. Klik tombol “Code” kalau belum dalam keadaan aktif. Sekarang di bagian Document Window sudah ada tag-tag HTML yang dibuat secara instan oleh Dreamweaver. Seharusnya kamu sudah paham tag-tag tersebut, kecuali tag <meta>. Abaikan dulu tag <meta>. Nanti saya akan menjelaskannya.

Saat ini judul halaman WEB kita adalah “Untitled Document” seperti terlihat di tag <title>. Dan kita akan menggantinya dengan “Beranda”. Di Seri I kamu membuat judul halaman WEB dengan cara menuliskan teks didalam tag <title>. Kali ini kita akan menggunakan fasilitas Dreamweaver untuk melakukan hal itu. Caranya:

Letakkan cursor di dalam tag <title>
1. Lihat Property Inspector yang terletak di kiri-bawah. Di situ ada kolom “Title”. Tuliskan “Beranda” di kolom tersebut.

Hasilnya adalah teks yang berada diantara tag <title> sudah berubah menjadi “Beranda”. Ini hanya contoh kecil kebaikan Dreamweaver yang memudahkan pekerjaan kita.

Sekarang kita akan mengatur property default halaman. Kali ini kita juga menggunakan fasilitas Dreamweaver. Letakkan cursor diantara tag <body>. Dari Proprety Inspector klik tombol “Page Properties” untuk menampilkan jendela Page Properties à pilih item “Appearance” yang ada di panel Category. Di bagian kanan ada beberapa kolom yang bisa kamu isi sesuai dengan keinginan. Penjelasan masing masing kolom sebagai berikut:

Page Font : jenis font

Size : ukuran font

Text Color : warna teks

Background Color : warna latar

Background Image : gambar latar. Kalau kolom ini kamu isi, halaman kamu akan berlatar belakang gambar dan bukan warna.

Margin : batas tepi kiri, kanan, atas, bawah.

Untuk latihan kita kali ini kamu isi Size dengan 10 pixel, Background Image dikosongkan, dan semua margin kamu isi 0 (nol). Yang lain kamu isi sesuai keinginan.

Jangan di-OK dulu. Kita akan melanjutkan dengan mengatur charset. Pilih Title/Encoding dari panel Category. Di panel sebelah kanan akan muncul dua kolom: “Title” dan “Encoding”. Di kolom Encoding pilih al-arabiyah-windows. Sekarang kamu boleh menekan tombol OK.

Kembali ke Document Window. Ada dua perubahan di kode HTML kamu, yaitu penambahan tag <style> dan perubahan tag <meta>.

Tag <meta>, menentukan Charset

Salah satu kegunaan tag <meta> adalah untuk menentukan kumpulan karakter atau charset apa yang akan digunakan dalam halaman WEB. Secara awam kamu bisa menyebut charset sebagai jenis huruf, seperti huruf Arab, latin, Jepang dll. Dengan kata lain tag <meta> bisa digunakan untuk menentukan jenis huruf apa yang akan dipakai. Dalam hal ini kepentingan kita adalah bagaimana menggunakan jenis huruf Arab di halaman WEB. Perhatikan lagi Document Window kamu. Di situ tag <meta> memiliki property “content” dan salah satu nilainya adalah “charset=windows-1256”. Window-1256 adalah kode untuk charset Window Arab.

Tag <style>, mengatur layout halaman

Sedangkan tag <style> berfungsi untuk mengatur layout halaman. Tag <style> yang baru saja kamu buat dengan menggunakan bantuan Dreamweaver adalah :

Penjelasanya sebagai berikut:

Maksudnya tag <style> memiliki property atau atribut “type”, dan di dalam <style> tersebut property type diberi nilai “text/css”. Maksud nilai ini adalah style menggunakan tipe CSS, sebuah tipe style sheet.

body,td,th {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

}

Maksudnya, kalau ada tag <body>,<td> dan <th> di halaman ini, maka jenis dan ukuran font serta warna teks mengikuti nilai layout yang ada di sini.

body {

background-color: #FFFFFF;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

Maksudnya, untuk tag <body> ada tambahan yaitu, nilai warna latar dan margin mengikuti nilai layout yang ada disini.

Menggunakan tag <style> sebenarnya sama dengan menambahkan property style pada tag. Kamu bisa menulis seperti ini:

dan artinya sama dengan perintah tag <style> di atas. Tetapi dengan menggunakan tag <style> kamu bisa menghemat kode HTML, jika layout yang sama dikenakan kepada lebih dari satu objek. Seperti contoh di atas, layout font dan warna teks dikenakan pada <body>, <td> dan <th>. Dengan menggunakan tag <style> kamu cukup menulisnya sekali. Tetapi kalau menggunakan propery style kamu harus menulisnya di tag <body> dan semua tag <td> serta <th> yang ada di halaman itu. Ribet, kan.

Hal-hal yang perlu kamu perhatikan berkaitan dengan tag <style> adalah:

Penulisan tag <style> harus berada di dalam tag <head>

Teks yang ada di dalam tag <style> tidak akan ditampilkan di halaman browser, tetapi diterjemahkan sebagai perintah layout

Item dan Nilai layout berada di dalam kurung kurawal “{}”.

Objek layout ditulis di depan kurung kurawal

Jika satu layout yang sama dikenakan pada lebih sari satu objek, seperti dalam contoh layout pertama, maka antar objek dipisah dengan koma “,”. Contoh
table, td, th, {……}

Antara item dan nilai dipisah dengan colon “:”

Nilai layout tidak diapit oleh petik ganda seperti nilai property tag

antara dua pasang item-nilai dipisah dengan semicolon “;”

Untuk sementara kita tinggalkan dulu pembahasan mengenai style sheet. Tetapi jangan kuatir. Saya akan menjelaskannya lebih jauh pada pembahasan berikutnya.

index.htm

Sebelum dilanjutkan simpan dulu dokumen baru anda dan beri nama “index”. Caranya sama dengan menyimpan file di program lain: dari menubar pilih File à Save As à atau Ctrl+S untuk menampilkan dialog Save As. Selanjutnya kamu pasti sudah tahu apa yang harus dilakukan. Dalam memberikan nama kamu tidak perlu menambahkan ekstensi htm (“.htm”). Sebab dreamweaver secara otomatis akan menambahkan ekstensi sesuai dengan jenis dokumen yang kamu buat.

Mengapa harus “index.htm”? Sebuah alamat host sebenarnya diwakili oleh sebuah nama folder. Untuk memahami ini coba lakukan langkah berikut: buka IE à ketikkan di address bar “c:\latihan”. Hasilnya adalah browser IE akan menampilkan isi folder C:\latihan. Sekarang di address bar ketikkan “http://localhost”. Hasilnya sama, isi folder c:\latihan akan ditampilkan di halaman browser. Itu artinya: meminta alamat localhost sama dengan meminta folder C:\latihan yang ada di komputer kamu. Demikian pula, ketika kamu meminta alamat www.ponpessarang.net itu sama artinya dengan membuka sebuah folder yang berada di komputer server.

Ketika browser membukan sebuah folder, maka ia akan mencari file default yang salah satunya bernama “index.htm”. Kalau ada file default, maka browser akan menampilkan halaman file default tersebut. Dan kalau tidak ditemukan, browser akan menampilkan isi folder.

Jadi, dengan memasukkan file index.htm, maka otomatis file tersebut akan ditampilkan, ketika browser meminta alamat host kita. Dengan kata lain, meminta alamat host www.ponpessarang.net sama dengan meminta www.ponpessarang.net/index.htm.

Tanbih: penamaan file default bersifat casesensitive (membedakan huruf besar-kecil). Jadi kalau misalnya kamu membuat file Index.htm (dengan I huruf besar), maka browser tidak akan menganggapnya sebagai file default.

Membingkai halaman dengan tabel

Di Seri I saya sebutkan bahwa kamu bisa membuat list bersarang. Kamu juga bisa membuat tabel bersarang, dimana sebuah tag <table> berada di dalam tag <table> lain. Strukturnya seperti kode berikut:

Seperti kamu lihat, tag <table> yang bercetak tebal berada di dalam <td> dari <table> lain.

Konsep ini akan kita gunakan untuk membuat halaman yang berbingkai tabel. Maksudnya, kita akan membuat satu tabel yang akan menjadi kontainer bagi seluruh objek yang ada di halaman.

Kita lanjutkan dengan membuat tabel kontainer. Kali ini kita akan menggunakan tampilan desain. Klik tombol “Design” agar tampilan Document Window berubah menjadi tampilan desain. Untuk membuat tabel ikuti langkah berikut:

Dari Menubar pilih Insert à Table dan jendela dialog Table akan ditampilkan. Atau dari Insert toolbar, pastikan item “Common” dalam keadaan aktif à klik Icon “Table”.

Dengan modal tutorial HTML di Seri I seharusnya kamu sudah paham, bagaimana mengisi kolom kolom di jendela Table.

Tanpa panduan, saya ingin kamu membuat tabel dengan lebar 100%, jumlah baris 1 (satu), dan jumlah kolom 1 (lima)

Tabel yang baru saja kamu buat akan dijadikan sebagai kontainer atau wadah bagi semua objek yang akan kita masukkan di dalam halaman WEB. Ini yang saya maksud dengan “membingkai halaman dengan tabel”. Jadi, header, menu dan semua isi halaman yang akan kita buat, akan berada di dalam tabel ini.

Tabel sebagai header

Kini saatnya membuat header halaman web. Bahan yang kamu perlukan adalah enam file gambar berformat gif. Lima diantaranya bernama BGN2_01.gif s/d BGN_05.gif, dan satu lainya bernama Spacer.gif. Seluruh file sudah saya siapkan. Jadi, kamu nggak usah repot bikin file itu dulu. Sekarang ikuti langkah berikut:

Letakkan semua file BGN2 ke folder C:\latihan\Gambar. Folder ini sudah kamu buat ketika membuat Site Dreamweaver

Beralih ke Dreamweaver. Pastikan Document Window berada dalam posisi tampilan desain. Caranya: klik tombol “Design” yang ada Document toolbar.

Dari Insert Bar pilih item Layout. Kamu akan melihat tiga tombol masing masing bernama Standard, Expanded dan Layout. Klik tombol Layout. Lihat di kiri-atas tabel. Kalau disitu sudah ada label “Layout Table”, berarti tabel kamu sudah ditampilkan dalam mode layout.

Ubah tinggi tabel menjadi 300 pixel. Kamu bisa melakukannya dengan menambhakan property height melalui kode HTML. Tetapi saya akan mengajarkan cara lain. Masih di tampilan desain, klik tabel kamu. Lihat di Tag Selector. Dengan mengklik tabel seharusnya tag <table> dalam keadaan aktif. Beralih ke Property Inspector, ubah nilai Height menjadi 300.

Di sebelah kanan tombol “Layout” ada dua icon masing-masing bernama “Layout Table” dan “Draw Layout Cell”. Klik icon “Layout Table”.

Pastikan tag <table> dalam keadaan aktif à arahkan mouse ke ujung kiri-atas table. Kalau semua instruksi berjalan dengan benar, seharusnya cursor kamu berubah menjadi resize cursor atau bergambar plus (“+”).

Tekan dan tahan (drag) mouse kamu hingga ujung kanan tabel, kemudian lepaskan. Sekarang kamu telah membuat tabel di dalam tabel.

Ubah property tabel yang baru saja kamu buat atau tabel kedua: height 150 dan width 100 % (persen). Caranya: aktifkan tabel melalui Tag Selector à pada Property Inspector ubah pilihan Width menjadi “Autostretch” dan nilai height menjadi 150.

Sekarang kita akan membuat lima <td> atau cel di dalam tabel kedua. Aktifkan tabel kedua. Dari Insert Bar klik icon Draw Layout Cell à arahkan mouse ke bagian kiri-atas tabel.

Drag mouse ke kanan hingga mencapai nilai kira kira width 160 pixel.

Lakukan langkah 9 dan 10 untuk membuat cel ke 2 s/d 5. Caranya drag mouse dimulai dari akhir cel sebelumnya sampai kira-kira selebar 160 pixel. Khusus untuk cel terakhir lebarnya sampai memenuhi sisa lebar tabel kedua.

Atur properti cel ke-1 s/d ke-5. Klik garis cel ke-1 à di Property Inspector ubah nilai width menjadi 160. lakukan hal yang sama hingga cel ke-5. khusus cel ke-5 ubah nilai width menjadi autostretch.

Ubah tampilan tabel ke mode standard. Caranya klik tombol standard yang ada di Insert Bar.

Klik Cel ke-1. Lihat! Di bawah masing masing cel tertera angka yang menggambarkan nilai lebar masing masing cel. Sekali lagi pastikan bahwa cel ke-1 s/d ke-4 bernilai lebar 10 pixel dan cel ke-5 100%. Kalau belum seperti itu, ubah properti width melalui Property Inspector.

Sekarang kita akan meletakkan objek gambar pada masing masing cel. Cel ke-1 diberi gambar BGN2_01; cel ke-2 gambar BGN2_02; begitu seterusnya hingga cel ke-5

Di Files Panel klik tanda panah yang ada di folder gambar untuk menampilkan isi file dari folder tersebut.

Pastikan cel ke-1 masih dalam keadaan aktif. Dari Menubar klik Insert à Image. Setelah muncul jendela dialog pilih BGN2_01.gif yang ada di folder “Gambar” à klik OK. Hasilnya, cel ke-1 sekarang ada gambarnya.

lakukan hal yang sama pada cel ke-2 s/d cel ke-5.

Kalau semua berjalan sesuai harapan, bagian atas halaman WEB kamu berupa gambar. Bagian inilah yang saya sebut Header Halaman WEB. Good Luck.

Validasi HTML dan Preview

Sebelum mempreview hasil kerja kamu, sebaiknya periksa dulu kode HTML. Siapa tahu masih ada kesalahan. Caranya: dari Menubar klik File à Check Page à Validate Markup, atau tekan Shift+F6. Kemudian lihat di panel Results yang ada di bawah Property Inspector. Kalau di situ ada tulisan “No warning errors” berarti kode HTML kamu sudah beres.

Sekarang Tekan F12 untuk melihat hasil kerja kamu. Kalau ditanya dalam bahasa Inggris, Apakah kamu ingin menyimpan? Tekan aja tombol Yes.

Komentar dan Spacer

Setelah menyelesaikan latihan di atas seharusnya kode HTML kamu akan seperti ini:

Ada dua bagian dari kode di atas yang saya cetak tebal. Pertama, . Ini namanya kode komentar. Maksudnya, teks yang berada dintara “” tidak akan diterjemahkan oleh browser, tidak sebagai perintah tidak pula sebagai teks yang harus ditampilkan.

Kedua, tentang Spacer. Dalam kode di atas ada empat <td> yang di dalamnya ada <img> dengan gambar Spacer.gif. Dalam Dreamweaver, <img> semacam ini disebut Spacer. Tujuan Spacer adalah untuk memastikan bahwa <td> yang tidak memiliki objek di dalamnya dapat ditampilkan sesuai dengan nilai lebar yang ditetapkan.

Begini penjelasan lebih gamblangnya. Kamu tadi membuat <table> dengan lima <td>. Empat <td> pertama memiliki lebar 160 pixel dan <td> terakhir memiliki lebar 100 persen. Kelima <td> yang kamu buat saat itu tidak memiliki objek di dalamnya. Dalam hukum <table>, jika suatu <td> tidak memiliki objek dan nilai lebarnya bukan 100 persen, maka <td> tersebut akan memiliki lebar minimal default.

Jadi kalau tabel kamu tidak diberi Spacer, empat <td> pertama akan berlebar satu pixel dan ruang selebihnya akan ditempati <td> terakhir. Akibatnya lebar <td> tidak ditmpilkan sesuai nilai yang kamu berikan.

Untuk menghindari hal itu, Dreamweaver secara otomatis membuat <tr> baru dengan <td>-<td> spacer yang lebarnya disesuaikan dengan nilai lebar <td> di atasnya. Dengan demikian <table> akan dikenai hukum: lebar suatu <td> mengikuti <td> terlebar pada kolom yang sama.Agar <td> spacer tidak kelihatan ketika ditampilkan, maka gambar Spacer.gif dibikin sebagai gambar kosong, atau gambar yang tidak ada gambarnya, dengan dimensi 1x1 pixel; dan tinggi <td> diberi nilai 1 pixel.

Dengan demikian Spacer hanyalah objek tricky untuk memastikan bahwa <td> yang tidak memiliki objek bisa memiliki lebar sesuai dengan keinginan kita.

Tetapi, ketika kemudian kamu memasukkan objek <img> pada masing masing <td>, maka tidak perlu lagi ada kekuatiran bahwa <td> tidak ditampilkan sesuai dengan lebar yang ditentukan. Sebab sekarang semua <td> sudah memiliki objek. Oleh karena itu blok <tr> yang saya cetak tebal sebaiknya dihapus saja.

***

Moh. Najib Buchori

Jumat, 02 November 2012

Membuat Homepage Seri II: Editor HTML Dan Stylesheet

Tidak ada komentar:

Posting Komentar

Artikel Terkini

PERKEMBANGAN LEMBAGA PERADILAN DARI MASA KENABIAN HINGGA DINASTI ABBASIYAH

Paling Sering Dibaca