MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian IV – Menambahkan Hyperlink)

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian IV – Menambahkan Hyperlink)

03_Splash2

Menambahkan Judul dan Tagline

Nah, sekarang kita berlatih lagi untuk memperkaya penguasaan kita terhadap kode-kode HTML. Tag HTML jumlahnya cukup banyak, kita akan mencoba beberapa di antaranya untuk membentuk halaman HTML sederhana.

1. Bukalah Adobe Dreamweaver CS4.

2. Pada menu awal, buatlah file HTML baru. Klik pada tombol HTML di bawah kolom Create New.

3. Desktop Dreamweaver akan segera terbuka. Klik tombol Split untuk bekerja dengan dua jendela sekaligus, Code dan Design.

03h_Split-button

4. Pada jendela Design, ketiklah tulisan untuk judul website dan semboyannya, misalnya sebagai berikut :

KURSUS KOMPUTER PRIVAT Kursus Komputer Paling Bermutu di Kota Anda HOME | PROFIL | LAYANAN | KONTAK Selamat Datang di Website Kami

5. Sekarang kita ubah format tulisan judul menjadi Heading 1. Tempatkan kursor pada tulisan judul di jendela Design. Klik tombol HTML pada panel Properties. Gantilah Format-nya menjadi Heading 1.

03m_Title

6. Selanjutnya kita akan mengubah style pada tulisan judul tersebut. Kursor masih berada pada tulisan judul, klik tombol CSS pada panel Properties. Gantilah Font-nya menjadi Arial, Helvetica, sans-serif.

03n_Title-Font

7. Pada kotak dialog New CSS Rule, gantilah Selector Type menjadi Tag. Selector Name akan berganti menjadi h1. Klik OK untuk mengakhiri.

8. Kembali ke tampilan sebelumya. Pada panel Properties, klik pada tombol Align Center.

03o_Title-Final

9. Selanjutnya kita akan mengubah format tulisan tagline-nya. Tempatkan kursor pada tulisan baris kedua.

10. Klik tombol HTML pada panel Properties. Kemudian, gantilah Format-nya dengan Heading 3. Tulisan tersebut akan berukuran lebih besar dan tebal..

11. Untuk membuat tulisan rata tengah, klik pada tombol CSS pada panel Properties. Kemudian klik pada tombol Align Center.

12. Kotak dialog New CSS Rule segera terbuka. Gantilah Selector Type menjadi Tag. Selector Name akan berubah menjadi h3. Klik OK untuk mengakhiri.

03p_Tagline-Final

13. Sekarang kita akan menambahkan garis horizontal sebagai pembatas bagi menu utama pada halaman ini. Tempatkan dan klik kursor pada posisi terakhir tulisan baris kedua, kemudian klik pada tombol Horizontal Rule pada panel Insert.

03q_Insert-Panel

14. Lakukan hal yang sama untuk menambahkan garis horizontal di bawah menu utama. Tempatkan kursor pada posisi terakhir tulisan baris ketiga, kemudian klik pada tombol Horizontal Rule pada panel Insert.

03r_Horizontal-Rule

Nah, pada contoh di atas kita telah berlatih membuat format Judul dan Tagline untuk digunakan sebagai judul halaman website. Pada latihan selanjutnya kita akan membuat hyperlink dan tulisan berjalan (marquee)

Membuat Hyperlink dan Tulisan Berjalan

Hyperlink adalah bagian paling penting dari website. Hyperlink menghubungkan satu halaman web dengan halaman lainnya. Sebuah website tentu tidak hanya berupa halaman tunggal semata, melainkan bisa terdiri atas beberapa sampai puluhan atau bahkan ratusan halaman. Masing-masing halaman pada website diberi hyperlink agar pengunjung dapat dengan mudah menemukan apa yang dicari. Dengan demikian, perencanaan struktur menu pada sebuah website menjadi hal yang sangat penting.

Hal lain yang biasanya ada dalam sebuah website adalah tulisan berjalan. Tulisan berjalan atau marquee dipergunakan untuk menyampaikan pesan khusus yang diperlihatkan dengan teks bergerak. Gerakan yang ditimbulkan oleh marquee akan menarik perhatian pengunjung website. Hal inilah yang menyebabkan marquee banyak dipakai oleh pemilik website untuk menuliskan pesan-pesan khusus tadi.

Kita lanjutkan latihan terakhir untuk menambahkan hyperlink sederhana dan tulisan berjalan pada halaman web yang sudah kita buat.

1. Pada jendela Design, sorotlah tulisan HOME yang akan kita jadikan hyperlink.

2. Pada panel Insert, klik tombol Hyperlink.
Kotak Dialog Hyperlink akan segera muncul memperlihatkan form Text yang sudah berisi tulisan HOME.

Form Link dapat kita isi dengan nama file. Khusus untuk hyperlink HOME bisa kita isi dengan file index.html. Cara lain adalah dengan klik pada ikon folder di sebelah kanan drop-down menu, lanjutkan dengan memilih file index.html.

Form Target untuk sementara bisa kita tinggalkan.

Klik OK untuk mengakhiri.

03s_New-Hyperlink03s_New-Link

3. Nah, sekarang tulisan HOME sudah menjadi hyperlink yang dapat berlaku sebagai tombol menju ke halaman index.html.

03t_Hyperlink-HOME

Perhatikan bahwa tulisan HOME sekarang menjadi berwarna biru sebagai tanda bahwa tulisan tersebut telah aktif sebagai hyperlink.

4. Selanjutnya, kita dapat melakukan hal sama dengan langkah yang lebih sederhana untuk tulisan LAYANAN, GALLERY, dan KONTAK. Caranya adalah sebagai berikut :

Sorot tulisan LAYANAN, kemudian pada panel Properties isilah form Link secara manual, ketikkan layanan.html. Tekan ENTER.

File layanan.html belum ada karena belum kita buat, jangan khawatir karena kita akan membuat file ini nanti.

03t_Hyperlink-LAYANAN

Lakukan hal yang sama untuk tulisan GALLERY, dan KONTAK.

03t_Hyperlink-Final

Nah, sekarang keempat hyperlink pada baris menu telah selesai dibuat.

5. Selanjutnya kita akan membuat tulisan berjalan atau marquee. Sorotlah baris terakhir tulisan pada halaman website kita “Selamat Datang di Website Kami”

6. Klik tombol Tag Chooser pada panel Insert. Kotak dialog Tag Chooser akan segera terbuka memperlihatkan semua Tag yang dapat kita pilih.

Klik pada folder HTML tags.  Subfolder pada HTML tags akan terbuka.

Klik pada subfolder Page Elements. Kolom di sebelah kanan sekarang akan terisi dengan tag-tag yang dapat dipilih.
Klik pada marquee yang terdapat di kolom sebelah kanan. Klik tombol Insert untuk memasukkan tag marquee ke dalam halaman kerja kita.

Klik tombol Close untuk mengakhiri.

03u_Tag-Chooser

03v_HTML-Tags

7. Tulisan “Selamat Datang di Website Kami” sekarang telah menjadi marquee. Untuk melihat hasilnya kita dapat mengaktifkan tombol Live View.

03w_Live-View

8. Sekarang kita bisa menyimpan file hasil kerja kita. Klik pada menu File > Save As.

Pada kotak dialog Save As, ketik atau pilihlah file index.html. Klik pada tombol Save.

Pada kotak dialog overwrite, klik tombol Yes untuk mengganti file index.html yang telah ada.

Lebih Jauh tentang Hyperlink

Ketika kita berkunjung ke sebuah alamat website yang menarik, biasanya yang kita buka adalah halaman utamanya (bisa berupa file: index.html). Halaman utama tersebut biasanya dipergunakan untuk menyimpan segala macam informasi mengenai “isi” website. Namun, tentu saja tidak semua informasi disiapkan pada halaman utama. Hal ini disebabkan halaman tersebut akan menjadi terlalu besar untuk dibuka, terlalu panjang dan menjadi tidak menarik lagi. Sebagai gantinya, informasi yang banyak tersebut disebar dalam bentuk halaman-halaman tersendiri.

Hyperlink dipergunakan untuk membuat struktur halaman web yang lebih rapi. Pengunjung yang memerlukan informasi yang lebih rinci dapat mencari pada halaman-halaman lain dengan berpedoman pada menu yang disediakan. Dengan demikian, menu yang disiapkan dalam bentuk hyperlink tersebut harus direncanakan dengan baik. Dengan menu yang terstruktur baik, maka pengunjung akan mudah mengakses informasi yang disediakan.

Hyperlink selain dipergunakan untuk membuka halaman lain di dalam website itu sendiri, juga bisa dikaitkan ke alamat-alamat lain yang berada di luar website, atau bisa juga dipergunakan untuk menunjukkan alamat email tertentu. Perbedaan ketiganya ada pada cara penulisan hyperlink.

Alamat Relatif dan Alamat Absolut

Ketika kita akan mengirimkan surat kepada seseorang yang berada pada ruangan yang sama, maka kita bisa menuliskan alamat tersebut cukup dengan nama orangnya saja. Pada sampul surat kita tuliskan nama si A, maka surat tersebut akan sampai pada orang yang dituju.

Penyebutan alamat tersebut akan sedikit berbeda jika orang yang kita kirimi surat berada di ruangan lain pada gedung yang sama. Contohnya : si A di lantai 3.

Demikian halnya jika kita menyusun website terdiri atas beberapa halaman, misalnya : index.html, layanan.html, gallery.html, dan kontak.html. Untuk menuju ke halaman yang berbeda dari alamat sekarang, kita menuliskan alamat tersebut secara langsung, yakni index.html, layanan.html, gallery.html, atau kontak.html. Hal inilah yang kita lakukan pada latihan sebelumnya.

Lain halnya jika website yang kita kelola cukup besar, maka dalam struktur direktori file sangat mungkin dibuatkan folder-folder untuk menyimpan file-file menurut kelompoknya masing-masing. Nah, untuk membuka file HTML yang berada di folder lain, kita dapat menuliskan nama folder di depan nama file. Contohnya “gallery/product.html” untuk membuka file product.html yang berada di dalam folder gallery. Atau “../index.html” untuk membuka file index.html yang berada di folder yang lebih tinggi.

Penyebutan nama file tanpa menyertakan alamat website dinamakan dengan Alamat Relatif. Disebut alamat relatif karena alamat yang dituju tidak mencerminkan alamat yang sebenarnya. Apabila kita menyebutkan alamatnya adalah index.html, maka dapat kita bayangkan bahwa index.html tersebut akan ada pada puluhan juta bahkan sampai milyaran website di seluruh dunia.

Sebaliknya, jika kita akan menulis surat kepada seseorang yang jauh. Pastikan alamatnya ditulis secara lengkap dan benar. Contohnya : si A di Lantai 6 gedung X di jalan Salemba, Matraman – JAKARTA. Maka surat tersebut akan sampai pada si alamat, sekalipun dikirim dari luar negeri.

Sama halnya jika informasi yang dimaksud berada pada sebuah file di alamat website tertentu di luar website kita, maka kita harus menuliskan alamatnya secara lengkap dan benar, misalnya: http://www.kursusprivat.com/tutorial/index.html. (Perhatikan bahwa penulisan alamat website ditulis dengan alamat berupa http://… Diikuti dengan alamat website dan file serta folder di mana file tersebut berada).

Alamat file secara lengkap beserta dengan alamat websitenya dinamakan dengan Alamat Absolut. Disebut absolut karena file yang dituju tersebut hanya akan ada satu di dunia.

Kedua cara penulisan alamat tersebut di atas diperbolehkan dan akan sering kita gunakan. Pastikan kita menuliskan alamatnya secara jelas dan benar.

Perhatikan kode HTML yang dipergunakan untuk membentuk link :

<a href=”index.html”>HOME</a>

Tag <a>…</a> (singkatan dari anchor) mengapit teks yang dijadikan hyperlink, atribut href=”namafile” diletakkan di dalam tag <a> untuk menentukan nama file atau alamat file yang dituju oleh hyperlink.

Link ke Alamat e-mail

Alamat email seringkali diperlukan bagi pemilik website untuk memudahkan komunikasi dengan pengunjungnya. Dengan membuat sebuah link ke alamat email tentu akan lebih mempermudah proses komunikasi ini. Pengunjung dapat menghubungi pemilik website dengan hanya klik pada link yang disediakan.

Berikut ini adalah langkah-langkah pembuatan link ke alamat email :

1. Tuliskan teks ini di bagian paling bawah halaman index.html :

Alamat email : info@kursusprivat.com

2. Sorotlah tulisan info@kursusprivat.com. Kemudian klik tombol Email Link pada panel Insert. Kotak dialog Email Link akan segera terbuka memperlihatkan dua form yakni form Text dan form Email. Secara otomatis dua form tersebut telah diisi dengan alamat email yang telah dibuat sebelumnya. Form Text adalah untuk menuliskan teks yang dapat dibaca oleh pengunjung. Form Email adalah untuk menuliskan alamat email.

03x_Email-Link

03y_New-Email

3. Klik OK untuk mengakhiri.

Alamat email sekarang menjadi berwarna biru sebagai tanda bahwa teks ini sekarang aktif sebagai link.
Email link jika diklik akan mengaktifkan email client, yakni software yang akan langsung terbuka untuk menuliskan email ke alamat yang ditulis pada email link. Contoh email client yang banyak dipergunakan adalah Microsoft Outlook.

4. Sampai di sini kita bisa menyimpan hasil pekerjaan.

Demikian pembahasan mengenai Hyperlink. Kita lanjutkan ke topik berikutnya.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

Advertisements

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian III – Memulai Halaman Baru)

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian III – Memulai Halaman Baru)
03_Splash

Struktur halaman website dibuat dengan kode-kode HTML. Oleh karena itu, jika kita ingin menguasai web design, tidak ada jalan lain selain mencoba dan membiasakan diri bekerja dengan bahasa HTML. Bahasa HTML bukanlah bahasa pemrograman yang rumit. Ia hanyalah sebuah “cara menulis” dalam format yang bisa dibaca oleh semua Internet Browser. Kepanjangan dari HTML adalah Hyper Text Markup Language, artinya adalah bahasa yang bekerja dengan menggunakan text yang ditandai.

Menambahkan Text

Text dan Image adalah elemen paling penting dalam dunia internet. Keduanya secara bersama-sama menjadi elemen pembentuk website. Text dan Image tidak terpisahkan sebagai bagian inti dari website. Sangatlah jarang kita menemukan website yang hanya terdiri atas teks saja, karena pasti tidak akan menarik. Demikian sebaliknya, sangat jarang kita menemukan website yang hanya berupa gambar saja tanpa didampingi oleh teks sebagai penjelasan terhadap gambar tersebut.

Menambahkan teks dan mengatur format teks dapat dilakukan dengan mudah. Mari kita coba berlatih membuat halaman web yang berisi satu artikel sebagai berikut :

1. Bukalah Adobe Dreamweaver CS4.

2. Pada menu awal, buatlah file HTML baru. Klik pada tombol HTML di bawah kolom Create New.
03a_Create-New

3. Desktop Dreamweaver akan segera terbuka.

Pada jendela Design, ketiklah sebuah artikel yang Anda sukai tanpa melakukan formatting apapun. Ketiklah beberapa paragraf karena kita akan membutuhkan tulisan yang cukup panjang, misalnya sebagai berikut :

Menjadi Web Desainer Freelance
Web Desain adalah sebuah tantangan yang menarik. Sebuah pekerjaan yang memadukan keterampilan merancang halaman dengan kemampuan pemrograman yang canggih. Dua hal yang ”wajib” dimiliki oleh para jagoan web.
Kemampuan merancang dan kemampuan pemrograman ini tentu membutuhkan penguasaan yang mumpuni untuk dapat menghasilkan website yang tampil secara menarik, sekaligus mudah diakses. Ibarat menyatukan dua kutub yang berbeda. Dua kemampuan tadi tentu menyuguhkan problematika yang sangat bertentangan. Merancang halaman membutuhkan seni dan kreativitas yang tinggi, yang lebih mengedepankan “citarasa”, seperti warna, nuansa, keseimbangan, fokus, irama, dll. Sedangkan kemampuan programming sangat kental dengan disiplin sintax dan algoritma yang harus taat azas.

Hasilnya akan terlihat seperti di bawah ini :
03b_No-Formating

4. Sekarang kita akan melakukan perubahan terhadap teks yang telah kita buat. Tempatkan kursor pada jendela Design. Letakkan kursor dan klik pada judul artikel, yakni paragraph pertama pada tulisan tadi.

5. Untuk mengubah format paragraf pertama, perhatikan pada jendela Properties di bagian bawah layar. Pada jendela Properties ini kita dapat melakukan perubahan dengan dua macam cara, yakni mode HTML dan CSS. Kita akan mempelajari penggunaan keduanya nanti. Untuk tahap awal ini, pilihlah tombol HTML.

Di sebelah kanan tulisan Format, pilihlah Heading 1 dari drop-down menu.

03c_Heading1
6. Perhatikan, bahwa di jendela Design kita akan melihat paragraf pertama berubah menjadi huruf dengan ukuran yang lebih besar.

03d_Heading1

Sedangkan pada jendela Code, kita melihat perubahan kode HTML sebagai berikut :

<p>Menjadi Web Desainer Freelance</p>

Berubah menjadi :

<h1>Menjadi Web Desainer Freelance</h1>

Penjelasannya adalah sebagai berikut :

Bahasa HTML adalah bahasa yang melakukan formatting terhadap teks dengan menggunakan kode berupa Tag. Penggunaan Tag ditandai dengan kurung tutup siku. Contohnya Tag paragraf ditandai dengan <p> dan ditutup dengan </p>.

Tag dipergunakan untuk mengapit teks yang diberi format yang berbeda. Terdapat banyak Tag lain yang berhubungan dengan formatting paragraf. Contohnya jika kita akan menggunakan format judul artikel (Heading), kodenya adalah sebagai berikut :

<h1> ….. </h1> Heading 1
<h2> ….. </h2> Heading 2
<h3> ….. </h3> Heading 3
<h4> ….. </h4> Heading 4
<h5> ….. </h5> Heading 5
<h6> ….. </h6> Heading 6

7. Perhatikan panel Properties. Berbeda dengan versi sebelumnya, pada Dreamweaver CS4 tidak ada pengaturan font. Perubahan font hanya dapat dilakukan melalui mode CSS. Hal ini menjadi pertimbangan mengingat Tag <font> akan tidak diberlakukan lagi (deprecated). Untuk melakukan perubahan pada font, langkahnya adalah sebagai berikut :

Pastikan kursor berada pada paragraf pertama

Klik pada tombol CSS (di bawah tombol HTML)

Di sebelah kanan Targeted Rule, pilih <New CSS Rule>

Pada bagian Font, pilih Arial, Helvetica, sans-serif dari drop-down menu.
03e_New-CSS-Rule
8. Kotak dialog New CSS Rule akan segera tampil memperlihatkan tiga bagian utama, yakni : Selector Type, Selector Name, dan Rule Definition.

Pada bagian Selector Type, pilih Tag.

Pada bagian Selector Name sekarang akan tertulis h1 sebagai tanda bahwa pengaturan akan diberlakukan pada Tag h1.
Untuk mengakhiri, klik OK.

03f_New-CSS-h19. Dengan melakukan pengaturan melalui CSS Rule, maka Tag <h1> telah memiliki style yang seragam.
Perhatikan bahwa pada jendela Code telah tertulis kode sebagai berikut :

<style type="text/css"> <!-- h1 {  font-family: Arial, Helvetica, sans-serif; } --> </style>

Kode ini menjelaskan bahwa Tag <h1> telah diberi style, yakni diberi font Arial. Dengan demikian, apabila kita membuat judul di tempat lain dengan menggunakan Tag <h1>, maka secara otomatis judul tersebut akan diberi style yang sama.

10. Cobalah untuk mengubah warna judul tersebut dengan warna yang Anda sukai. Caranya adalah sebagai berikut :

Tempatkan dan klik kursor pada tulisan judul.

Pada panel Properties, pastikan tombol CSS sedang aktif. Di sebelah kanan, di bawah drop-down menu font terdapat kotak kecil untuk mengatur warna. Klik pada kotak tersebut untuk memunculkan palet warna.

Setelah palet warna muncul, pilih dan klik warna yang Anda inginkan.

Tulisan judul akan berganti warna. Sementara itu, di jendela Code, kode pada Tag <style> juga akan ditambah dengan kode untuk warna.

03g_New-Color

<style type="text/css"> <!-- h1 { font-family: Arial, Helvetica, sans-serif; color: #060; } --> </style>

11. Klik pada menu File > Save untuk menyimpan file yang telah dikerjakan.
12. Beri nama: latihan-1 pada kotak File name. All Document pada kotak Save As Type.

HTML dan CSS

Tag HTML dipergunakan untuk menyusun struktur halaman HTML. CSS dipergunakan untuk mengatur format pada struktur halaman HTML tersebut. Mungkin pada tahap awal hal ini cukup membingungkan, namun bisa kita analogikan dengan membangun sebuah bangunan. HTML dipakai untuk menyusun bangunan tersebut terdiri dari berapa lantai, masing-masing lantai terdiri dari berapa ruang, dan ruang-ruang tersebut memiliki berapa pintu. CSS dapat dipergunakan untuk mengatur style dari masing-masing lantai, contohnya jenis bahannya, warnanya, ketebalannya, dsb, demikian halnya style dari masing-masing ruang dan style dari masing-masing pintu.

Pada prakteknya, sebuah struktur halaman HTML akan tersusun atas Tag-tag HTML, sebagai contoh pada halaman HTML akan terdapat Tag <h1> untuk Heading, Tag <p> untuk Paragraf, Tag <a> untuk Anchor, dsb. Pada struktur halaman tersebut, diperlukan perintah lain untuk mengatur jenis font, warna, ukuran text, dsb, yang pada era sebelumnya dapat diatasi dengan penggunaan Tag <font>. Hal ini diprakarsai oleh Netscape dan Microsoft, yang sebetulnya merupakan tambahan dari Tag HTML standar yang berlaku pada saat itu.

Demikian halnya dengan Tag <table> yang secara luas dipergunakan (baca: disalahgunakan) untuk mengatur layout halaman website, mengingat pada saat itu tidak ada cara yang lebih mudah untuk mengatur layout halaman selain dengan memanfaatkan Tag <table>.

CSS dibuat untuk menyediakan berbagai kebutuhan bagi web desainer, dengan berbagai kemungkinan layout halaman yang canggih dan sekaligus didukung oleh semua internet browser. Kehadiran CSS bagi web desainer juga dapat memudahkan pengaturan halaman dengan memisahkan struktur halaman HTML berupa tag-tag HTML, dari style-nya. Dengan demikian, akan memudahkan maintenance / perawatan website tersebut.

Penulisan CSS sendiri berbeda dengan penulisan tag pada HTML. CSS mengikuti gaya penulisan Javascript. Pada penulisan HTML, tag akan ditandai dengan kurung siku “<tag>”. Sebaliknya, tanda kurung siku pada penulisan CSS tidak dipergunakan.

Pada latihan terakhir kita sudah menyingung penggunaan tag <h1> yang kemudian kita beri style dengan CSS.
Perhatikan format HTML berikut :

<h1>Menjadi Web Desainer Freelance</h1>

Di bagian atas pada kode HTML tersebut tertulis sebagai berikut :

<style type="text/css"> <!-- h1 {  font-family: Arial, Helvetica, sans-serif;  color: #060; } --> </style>

Artinya, pada struktur halaman tersebut tulisan “Menjadi Web Desainer Freelance” ditempatkan sebagai Heading 1, karena diapit oleh Tag <h1> dan </h1>. Sedangkan di bagian pengaturan style CSS, Tag <h1> telah diberi pengaturan style, font-family Arial, dan diberi warna hijau.

Penulisan CSS diawali dengan selector. Pada contoh di atas, “h1” adalah selector yang berarti style ini akan memilih tag h1 dan kemudian mengganti penampilannya. Dengan demikian Browser internet akan menerapkan style yang ditulis pada CSS dengan selector h1 pada semua tag <h1>.

Mengingat HTML dan CSS adalah dua bahasa yang berbeda dan letaknya terpisah, sangatlah penting untuk melihat hasil akhir dengan klik pada tombol Live View.

Menambahkan CSS Baru

Sekarang kita berlatih menerapkan style pada tag yang berbeda.

1. Klik pada tombol Split untuk bekerja dengan dua jendela sekaligus, jendela Code dan jendela Design.

03h_Split-button

2. Tempatkan kursor dan klik pada paragraf ke-dua, yakni paragraf yang berisi tulisan “Web Desain adalah…”

3. Klik tombol CSS pada panel Properties. Kemudian pada bagian menu drop-down Font, ganti dengan : Arial, Helvetica, sans-serif.

4. Kotak dialog New CSS Rule akan segera terbuka. Pada bagian Selector Type, pilih Tag.

5. Pada bagian Selector Name secara otomatis akan tertulis p. Klik OK untuk mengakhiri.

6. Kembali ke panel Properties. Pada panel Properties akan terlihat mode CSS dengan Targeted Rule : p. Sekarang kita ganti ukuran teks menjadi 16 px, warna menjadi #333 (Abu-abu tua), dan alignment menjadi Justify (rata kiri-kanan).
03i_New-Style
Hasilnya, sekarang pada jendela Design kita akan melihat dua paragraf pada artikel yang telah kita tulis, ditampilkan dengan font, ukuran, warna, dan perataan yang berbeda dari sebelumnya, sesuai dengan perubahan yang telah kita lakukan pada panel Properties.

7. Pada jendela Code, kita juga akan melihat ada style p di bawah style h1:

<style type="text/css"> <!-- h1 {  font-family: Arial, Helvetica, sans-serif;  color: #060; } p {  font-family: Arial, Helvetica, sans-serif;  font-size: 16px;  color: #333;  text-align: justify; } --> </style>

8. Sampai di sini kita bisa menyimpan file latihan-1.html ini. Klik pada menu File > Save.

Bekerja dengan Kode CSS

Pada penjelasan sebelumnya kita telah mengenal kode CSS dan HTML. Kita juga telah mengetahui bahwa cara penulisan kode CSS berbeda dengan kode HTML. CSS tidak menggunakan kurung siku, sedangkan penulisan Tag HTML menggunakan kurung siku, contohnya :

<h1>Menjadi Web Desainer Freelance</h1>

Perbedaan tersebut muncul mengingat CSS sebenarnya merupakan bagian atau elemen dari kode HTML. Hal ini dapat kita lihat pada bagian kode CSS, sebagai berikut :

<style type="text/css"> <!-- h1 {  font-family: Arial, Helvetica, sans-serif;  color: #060; } p {  font-family: Arial, Helvetica, sans-serif;  font-size: 16px;  color: #333;  text-align: justify; } --> </style>

Pada kode CSS di atas terlihat jelas bahwa tulisan kode yang dicetak tebal merupakan Tag HTML. Kode CSS dibuka dengan Tag <style type=”text/css”> dan ditutup dengan Tag </style>. Cara penulisan CSS seperti di atas dinamakan dengan Internal Stylesheet.

Sekarang kita berlatih untuk mengubah kode CSS secara manual, sebagai berikut :

1. Bukalah file: latihan-1.html dengan Dreamweaver CS4.

2. Klik tombol Split untuk bekerja dengan dua jendela sekaligus, Code dan Design.

03h_Split-button

3. Pada jendela Code, tempatkan kursor di dalam kode CSS.

4. Kita akan mencoba membuat kode CSS secara manual untuk membuat alignment judul menjadi rata tengah. Pindahkan kursor tepat di belakang kode warna untuk tag h1 (di belakang kode : color: #060; )

5. Tekan ENTER untuk membuat baris baru.

6. Code Assist akan langsung muncul untuk mempermudah penulisan kode. Anda dapat menuliskan kode secara manual dengan diketik langsung, atau memilih selector dari Code Assist.
03j_CSS-Code

Tuliskan seperti ini :

text-align: center;

7. Kode CSS sekarang akan menjadi seperti ini :

<style type="text/css"> <!-- h1 {  font-family: Arial, Helvetica, sans-serif;  color: #060;  text-align: center; } p {  font-family: Arial, Helvetica, sans-serif;  font-size: 16px;  color: #333;  text-align: justify; } --> </style>

8. Untuk melihat preview dari perubahan kode yang sudah ditulis, klik pada tombol Refresh di panel Properties.
03k_Refresh

9. Nah, sekarang pada jendela Design akan terlihat perubahan judul artikel akan berada di tengah.

03l_Title-centered

10. Simpan pekerjaan Anda. Klik pada menu File > Save.

Dengan contoh latihan di atas, berarti sekarang kita telah mengetahui bahwa kode CSS dapat dituliskan secara manual. Code Assist dapat membantu kita untuk menentukan nama selector mana yang akan kita gunakan sekaligus membantu kita menentukan value-nya.

Kita lanjutkan pada topik berikutnya.

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian I – Mengenal Dreamweaver CS4)

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian I – Mengenal Dreamweaver CS4)
01a_Splash

Membuat website bukanlah pekerjaan yang mudah, bahkan boleh jadi merupakan pekerjaan yang rumit. Bagi kebanyakan orang, pekerjaan membuat website lebih dianggap sebagai sebuah pekerjaan yang hanya dilakukan oleh para programmer. Bahkan lebih dari itu, pekerjaan merancang website pun menjadi salah satu pekerjaan yang paling sulit untuk dimengerti. Banyak programmer yang merasa kesulitan ketika diminta untuk merancang website, mengingat kemampuan merancang sangat berbeda dengan kemampuan programming. Demikian sebaliknya, seorang desainer grafis banyak yang merasa kesulitan untuk membuat website, mengingat kemampuan programming mereka sangat terbatas.

Membuat Website itu Mudah !

Adakah jalan yang dapat mempermudah pekerjaan membuat website ? Pepatah bilang: Banyak jalan menuju Roma. Kita bisa menggunakan berbagai macam cara untuk membuat website. Salah satu jalan yang mudah untuk merancang dan membuat website adalah dengan menggunakan perangkat lunak paling populer untuk membangun website: Adobe Dreamweaver.

Adobe Dreamweaver adalah salah satu perangkat lunak canggih yang dapat Anda gunakan untuk merancang dan membangun website. Dengan menggunakan Adobe Dreamweaver, pekerjaan membuat website yang rumit sekalipun akan menjadi pekerjaan yang mudah. Banyak fitur yang dimiliki oleh Adobe Dreamweaver untuk keperluan pembuatan website, sebagai berikut :

Peralatan Lengkap untuk Merancang Halaman Web

Adobe Dreamweaver memberi kemudahan untuk merancang dan menata halaman demi halaman website, dengan menyediakan berbagai Tools yang siap pakai. Sangat mudah untuk menyisipkan elemen-elemen apapun yang kita perlukan, seperti Text, Gambar, atau Media lain sekalipun (suara, film, animasi flash, dll.)

Dengan cara ini kita bisa membuat halaman website yang canggih dan dilengkapi dengan berbagai media masa kini, tanpa harus tahu sedikitpun pemrograman di dalamnya. Adobe Dreamweaver telah menyiapkan berbagai perangkat siap pakai dan akan menuliskan kode-kode yang diperlukan ketika kita menggunakan perangkat tersebut.

Panel Insert memudahkan kita untuk menyisipkan berbagai jenis text, gambar, atau media lain.

Panel Insert memudahkan kita untuk menyisipkan berbagai jenis text, gambar, atau media lain.

Pengelolaan Situs

Adobe Dreamweaver dilengkapi dengan fitur untuk memudahkan pengelolaan situs, bahkan di dalamnya telah disiapkan File Transfer Protocol (FTP) yang dapat menghubungkan file-file yang tengah kita kerjakan dengan server. Dengan kemampuan tersebut, maka kita bisa yakin website yang sedang kita bangun akan berjalan dengan baik.

Jika kita merancang halaman dengan menggunakan CSS (Cascading Style Sheets), maka Browser Compatibility Check dan CSS Advisor akan membantu kita menemukan masalah dan sekaligus memperbaikinya. Hal ini berhubungan dengan penggunaan browser yang berlainan.

Lingkungan Pemrograman

Adobe Dreamweaver memberikan kemudahan untuk dijadikan sebagai lingkungan pemrograman web. Kita dapat mengedit kode-kode HTML secara langsung dan kemudian berpindah-pindah dari tampilan programming ke tampilan desain. Dengan fasilitas color-coding, indentasi, dan alat bantu visual lainnya, Adobe Dreamweaver menjadi sebuah lingkungan yang nyaman untuk pemrograman web, baik bagi pemula maupun tingkatan yang lebih lanjut.

Adobe Dreamweaver dilengkapi dengan pemrograman untuk lingkungan bahasa Javascript, ColdFusion, PHP, ASP.NET. Dilengkapi dengan Panel Specialized Insert Menu dan Panel Code untuk menuliskan pemrograman sesuai dengan bahasa yang kita kuasai.

Panel Code view sekaligus berfungsi sebagai Text Editor dengan fasilitas Color-code, dapat menuliskan berbagai bahasa scripting.

Panel Code view sekaligus berfungsi sebagai Text Editor dengan fasilitas Color-code, dapat menuliskan berbagai bahasa scripting.

Apa Yang Baru dalam Dreamweaver CS4 ?

Adobe melakukan banyak perubahan pada Dreamweaver CS4. Perubahan yang dilakukan menyangkut inovasi pada desain dan pengembangan pada fitur pemrograman. Pada versi ini kita akan menemukan Dreamweaver yang lebih menyatu dengan produk lainnya dari Adobe, khususnya Photoshop. Sebagai bagian dari Adobe Creative Suite, maka image yang digunakan dalam Dreamweaver akan terhubung dengan Photoshop. Dengan cara ini kita akan bisa mengedit secara langsung image dengan Photoshop dan menyimpan perubahannya.

User Interface

Salah satu hal yang patut dicatat pada Adobe Dreamweaver CS4 adalah tersedianya banyak pilihan interface yang tersimpan dalam bentuk menu Workspace. Kita dapat memilih konfigurasi yang paling sesuai untuk dapat menangani pekerjaan yang tengah kita hadapi.

Hal baru lain dalam penangan interface adalah kita diberi kebebasan untuk mengubah konfigurasi interface dan kemudian hasilnya dapat disimpan dalam bentuk Workspace tersendiri.

Ruang kerja lebih besar dapat kita konfigurasikan hanya dengan memilih workspace Designer Compact.

Kita dapat memilih layout Interface yang disediakan sesuai dengan fokus pekerjaan.

Kita dapat memilih layout Interface yang disediakan sesuai dengan fokus pekerjaan.

Live View

Dreamweaver yang terdahulu menggunakan model statis untuk memperlihatkan tampilan web yang sedang dibuat. Pada Dreamweaver CS4 kemampuan tersebut ditambah dengan fitur baru yakni Live View. Dengan fitur ini kita dapat melihat hasil akhir yang akurat, lengkap dengan menu dan tombol yang interaktif.

Live View dibuat dengan menggunakan WebKit rendering engine – juga dipergunakan dalam browser Safari dan Adobe AIR. Dengan fasilitas ini kita dapat melihat preview halaman web secaara akurat. Selain itu, kita dapat melihat halaman web yang sedang dikerjakan secara interaktif beserta seluruh bagian yang berhubungan.

Web yang sedang dirancang ditampilkan dengan Live View.

Web yang sedang dirancang ditampilkan dengan Live View.

File-file yang Berhubungan

Mengingat website masa kini menggunakan berbagai macam file seperti CSS, Javascript, dan lain-lain, maka pengelolaannya menjadi semakin rumit. Salah satu fitur baru yang ada di Dreamweaver CS4 adalah ditampilkannya file-file yang dipergunakan oleh satu halaman website. File-file tersebut ditampilkan dalam satu deret pada bagian paling atas dokumen yang tengah dibuka.

File-file yang berhubungan ditampilkan dalam satu deret.

File-file yang berhubungan ditampilkan dalam satu deret.

Code Navigator

CSS (Cascading Style Sheets) dewasa ini telah menjadi standar dalam pengaturan tampilan style pada text dan bagian-bagian lain yang berhubungan dengan tampilan yang dibuat seragam. Dengan adanya Code Navigator, maka secara cepat kita dapat melihat properti yang dipergunakan dalam bentuk CSS.

Code Navigator mempermudah  proses menampilkan dan memperbaiki properti pada CSS.

Code Navigator mempermudah proses menampilkan dan memperbaiki properti pada CSS.

Panel Properties Yang Membedakan HTML dan CSS

Perbaikan yang cukup signifikan lainnya adalah pada panel Properties. Adobe Dreamweaver membedakan kode properti untuk HTML dan CSS. Berbeda dengan versi-versi sebelumnya yang kadang-kadang pengaturan properti dituliskan sebagai kode HTML biasa atau sebagai kode CSS dengan nama yang dituliskan secara otomatis, seperti Style1, Style2, dan seterusnya.

Dengan demikian, apabila kita ingin menuliskan style tulisan ke dalam kode HTML, maka tinggal klik pada tombol HTML. Demikian halnya, apabila kita ingin menuliskan style ke dalam CSS, maka klik tombol CSS.

Panel Properties pada Dreamweaver CS4 memisahkan kode HTML dan CSS.

Panel Properties pada Dreamweaver CS4 memisahkan kode HTML dan CSS.

HTML Data Set

Fitur baru pada Dreamweaver CS4 ini memungkinkan kita untuk mengubah file HTML biasa menjadi sebuah sistem database kecil. Contohnya, kita bisa membuat halaman web dengan kode HTML biasa yang terdiri atas baris dan kolom, kemudian table dengan baris dan kolom tersebut dapat di-import ke dalam Dreamweaver dalam format lain (menggunakan Javascript atau Spry). Proses selanjutnya tinggal mengisi data dalam berbagai macam cara.

Panel HTML Data Set untuk membuat dan mengolah data.

Panel HTML Data Set untuk membuat dan mengolah data.

Smart Object

Fitur baru ini memungkinkan Dreamweaver untuk membaca dokumen Photoshop (file PSD) dan memberi dukungan langsung terhadap format file tersebut. Sebagai contoh, kita dapat memasukkan (insert > image) dokumen Photoshop dan kemudian melakukan optimisasi terhadap format file yang dipergunakan (misalnya menjadi .gif, .jpeg, atau .png).

Andaikan suatu saat file PSD tersebut telah mengalami perubahan – misalnya karena telah diedit, maka Dreamweaver secara otomatis akan memberitahu dengan memberi tanda panah merah pada gambar tersebut.

Smart Object memudahkan proses optimisasi dan updating file image.

Smart Object memudahkan proses optimisasi dan updating file image.

Demikian, mudah-mudahan informasi ini bermanfaat. Kita lanjutkan ke topik berikutnya.

Apakah CSS ? Bagian II – Perbedaan CSS dan HTML

CSS dan HTML adalah dua “gaya” penulisan kode dalam membentuk halaman-halaman pada website. Keduanya banyak dipergunakan dalam praktik pembuatan website. HTML telah banyak dikenal dan akan terus dipergunakan mengingat cara penulisannya yang cukup sederhana dan mudah untuk dipraktikkan. Sedangkan CSS baru belakangan dikembangkan, namun memiliki banyak keunggulan yang tidak dimiliki oleh HTML.

Banyak hal yang membedakan HTML dengan CSS. Untuk itu, kita bisa mempelajarinya dengan berdasarkan pada pengalaman pemakaian HTML secara umum. Beberapa contoh di bawah ini dapat memperlihatkan kemudahan penggunaan stylesheet dibandingkan dengan menggunakan kode HTML biasa.

Struktur Halaman CSS Lebih Sederhana

Website dapat dibangun dengan menggunakan kode HTML sederhana. Sebagai contoh, sebuah halaman dibuat dengan mengandalkan kode-kode HTML seperti berikut ini:

<html>
  <head>
    <title>Halaman HTML</title>
  </head>
  <body>
    <h1><font face="Arial" size="2" color="Red">
        BENGAWAN SOLO - Cipt. GESANG</font></h1>
    <p><font face="Georgia" size="2" color="orange">
    Bengawan Solo, Riwayatmu ini<br />
    Sedari dulu jadi perhatian insani<br />
    Musim kemarau, tak seb'rapa airmu<br />
    Di musim hujan air meluap sampai jauh<br />
    Mata airmu dari Solo, Terkurung gunung serbu<br />
    Air meluap sampai jauh, Akhirnya ke laut<br />
    Itu perahu, riwayatmu dulu<br />
    Kaum pedagang slalu naik itu perahu</font></p>
  </body>
</html>

Perhatikan bahwa untuk mengatur text pada Tag <H1> dan Tag <p> ditambahkan Tag baru di dalamnya, yakni Tag <font>.

Halaman tersebut dapat dituliskan dengan menggunakan stylesheets sebagai berikut :

<html>
  <head>
    <title>Halaman HTML</title>
    <style type="text/css">
    	h1 {
            font-family:Arial, Helvetica, sans-serif;
            font-size:24px;
            color:red;
            }
    	p {
           font-family:Georgia, "Times New Roman", Times, serif;
           font-size:12px;
           color:orange;
           }
    </style>
  </head>
  <body>
    <h1>BENGAWAN SOLO - Cipt. GESANG</h1>
    <p>Bengawan Solo, Riwayatmu ini<br />
       Sedari dulu jadi perhatian insani<br />
       Musim kemarau, tak seb'rapa airmu<br />
       Di musim hujan air meluap sampai jauh<br />
       Mata airmu dari Solo, Terkurung gunung serbu<br />
       Air meluap sampai jauh, Akhirnya ke laut<br />
       Itu perahu, riwayatmu dulu<br />
       Kaum pedagang slalu naik itu perahu</p>
  </body>
</html>

Ketika kedua file tersebut disimpan dalam file yang berbeda, kemudian keduanya ditampilkan pada Internet browser. Maka, kedua file tersebut akan ditampilkan dengan cara yang sama.

Akan tetapi, struktur kode HTML pada file pertama menggunakan Tag <font> yang berdiri sendiri. Jika pengaturan pada text tersebut akan diterapkan pada tempat yang berbeda, maka seluruh pengaturan yang ditulis pada Tag <font> harus ditulis ulang. Demikian halnya pengaturan text pada Tag <p> di bawahnya. Jika pengaturan text pada paragraf tersebut akan ditempatkan pada Tag <p> lainnya, maka seluruh pengaturan yang ditulis pada Tag <font> harus ditulis ulang.

html-vs-css-1

<h3>Keseragaman Style </h3>
<p>Perhatikan dua contoh berikut :</p>
<p>Halaman yang menggunakan style yang ditulis dengan kode HTML : </p>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”10″>
<tr>
<td width=”600″ bgcolor=”#CCCCCC”><pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Halaman HTML&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;<span class=”style2″>&lt;font face=&quot;Arial&quot; size=&quot;2&quot; color=&quot;Red&quot;&gt;</span>BENGAWAN SOLO – Cipt. GESANG<span class=”style2″>&lt;/font&gt;</span>&lt;/h1&gt;
&lt;p&gt;<span class=”style2″>&lt;font face=&quot;Georgia&quot; size=&quot;2&quot; color=&quot;orange&quot;&gt;</span>Bengawan Solo, Riwayatmu ini&lt;br /&gt;
Sedari dulu jadi perhatian insani&lt;br /&gt;
Musim kemarau, tak seb’rapa airmu&lt;br /&gt;
Di musim hujan air meluap sampai jauh&lt;br /&gt;
Mata airmu dari Solo, Terkurung gunung serbu&lt;br /&gt;
Air meluap sampai jauh, Akhirnya ke laut&lt;br /&gt;
Itu perahu, riwayatmu dulu&lt;br /&gt;
Kaum pedagang slalu naik itu perahu<span class=”style2″>&lt;/font&gt;</span>&lt;/p&gt;
&lt;hr&gt;
&lt;h1&gt;<span class=”style2″>&lt;font face=&quot;Arial&quot; size=&quot;2&quot; color=&quot;Red&quot;&gt;</span>BENGAWAN SOLO – Cipt. GESANG<span class=”style2″>&lt;/font&gt;</span>&lt;/h1&gt;
&lt;p&gt;<span class=”style2″>&lt;font face=&quot;Georgia&quot; size=&quot;2&quot; color=&quot;orange&quot;&gt;</span>Bengawan Solo, Riwayatmu ini&lt;br /&gt;
Sedari dulu jadi perhatian insani&lt;br /&gt;
Musim kemarau, tak seb’rapa airmu&lt;br /&gt;
Di musim hujan air meluap sampai jauh&lt;br /&gt;
Mata airmu dari Solo, Terkurung gunung serbu&lt;br /&gt;
Air meluap sampai jauh, Akhirnya ke laut&lt;br /&gt;
Itu perahu, riwayatmu dulu&lt;br /&gt;
Kaum pedagang slalu naik itu perahu<span class=”style2″>&lt;/font&gt;</span>&lt;/p&gt;
&lt;hr&gt;
&lt;/body&gt;
&lt;/html&gt; </pre></td>
</tr>
</table>
<p>Jelaslah bahwa pada contoh di atas, untuk membuat text dengan format yag sama harus dituliskan Tag &lt;font&gt; dengan properti yang sama pula. Bandingkan dengan halaman yang dituliskan dengan menggunakan stylesheets  berikut :  </p>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”10″>
<tr>
<td width=”600″ bgcolor=”#CCCCCC”><pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Halaman HTML&lt;/title&gt;
<span class=”style2″>&lt;style type=&quot;text/css&quot;&gt;
h1 { font-family:Arial, Helvetica, sans-serif; font-size:24px; color:red; }<br />        p {font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-size:12px; color:orange; }<br />    &lt;/style&gt;</span>
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;BENGAWAN SOLO – Cipt. GESANG&lt;/h1&gt;
&lt;p&gt;Bengawan Solo, Riwayatmu ini&lt;br /&gt;
Sedari dulu jadi perhatian insani&lt;br /&gt;
Musim kemarau, tak seb’rapa airmu&lt;br /&gt;
Di musim hujan air meluap sampai jauh&lt;br /&gt;
Mata airmu dari Solo, Terkurung gunung serbu&lt;br /&gt;
Air meluap sampai jauh, Akhirnya ke laut&lt;br /&gt;
Itu perahu, riwayatmu dulu&lt;br /&gt;
Kaum pedagang slalu naik itu perahu&lt;/p&gt;
&lt;hr&gt;
&lt;h1&gt;BENGAWAN SOLO – Cipt. GESANG&lt;/h1&gt;
&lt;p&gt;Bengawan Solo, Riwayatmu ini&lt;br /&gt;
Sedari dulu jadi perhatian insani&lt;br /&gt;
Musim kemarau, tak seb’rapa airmu&lt;br /&gt;
Di musim hujan air meluap sampai jauh&lt;br /&gt;
Mata airmu dari Solo, Terkurung gunung serbu&lt;br /&gt;
Air meluap sampai jauh, Akhirnya ke laut&lt;br /&gt;
Itu perahu, riwayatmu dulu&lt;br /&gt;
Kaum pedagang slalu naik itu perahu&lt;/p&gt;
&lt;hr&gt;
&lt;/body&gt;
&lt;/html&gt; </pre></td>
</tr>
</table>
<p>Hasilnya akan ditampilkan sebagai berikut :</p>

Keseragaman Style

Perhatikan dua contoh berikut :

Halaman yang menggunakan style yang ditulis dengan kode HTML :

<html>
  <head>
    <title>Halaman HTML</title>
  </head>
  <body>
    <h1><font face="Arial" size="2" color="Red">
        BENGAWAN SOLO - Cipt. GESANG</font></h1>
    <p><font face="Georgia" size="2" color="orange">
    Bengawan Solo, Riwayatmu ini<br />
    Sedari dulu jadi perhatian insani<br />
    Musim kemarau, tak seb'rapa airmu<br />
    Di musim hujan air meluap sampai jauh<br />
    Mata airmu dari Solo, Terkurung gunung serbu<br />
    Air meluap sampai jauh, Akhirnya ke laut<br />
    Itu perahu, riwayatmu dulu<br />
    Kaum pedagang slalu naik itu perahu</font></p>
    <hr>
    <h1><font face="Arial" size="2" color="Red">
        BENGAWAN SOLO - Cipt. GESANG</font></h1>
    <p><font face="Georgia" size="2" color="orange">
    Bengawan Solo, Riwayatmu ini<br />
    Sedari dulu jadi perhatian insani<br />
    Musim kemarau, tak seb'rapa airmu<br />
    Di musim hujan air meluap sampai jauh<br />
    Mata airmu dari Solo, Terkurung gunung serbu<br />
    Air meluap sampai jauh, Akhirnya ke laut<br />
    Itu perahu, riwayatmu dulu<br />
    Kaum pedagang slalu naik itu perahu</font></p>
    <hr>
  </body>
</html>

Jelaslah bahwa pada contoh di atas, untuk membuat text dengan format yag sama harus dituliskan Tag <font> dengan properti yang sama pula. Bandingkan dengan halaman yang dituliskan dengan menggunakan stylesheets berikut :

<html>
  <head>
    <title>Halaman HTML</title>
    <style type="text/css">
    	h1 {
            font-family:Arial, Helvetica, sans-serif;
            font-size:24px;
            color:red;
            }
    	p {
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:12px;
            color:orange;
            }
    </style>
  </head>
  <body>
    <h1>BENGAWAN SOLO - Cipt. GESANG</h1>
    <p>Bengawan Solo, Riwayatmu ini<br />
       Sedari dulu jadi perhatian insani<br />
       Musim kemarau, tak seb'rapa airmu<br />
       Di musim hujan air meluap sampai jauh<br />
       Mata airmu dari Solo, Terkurung gunung serbu<br />
       Air meluap sampai jauh, Akhirnya ke laut<br />
       Itu perahu, riwayatmu dulu<br />
       Kaum pedagang slalu naik itu perahu</p>
    <hr>
    <h1>BENGAWAN SOLO - Cipt. GESANG</h1>
    <p>Bengawan Solo, Riwayatmu ini<br />
       Sedari dulu jadi perhatian insani<br />
       Musim kemarau, tak seb'rapa airmu<br />
       Di musim hujan air meluap sampai jauh<br />
       Mata airmu dari Solo, Terkurung gunung serbu<br />
       Air meluap sampai jauh, Akhirnya ke laut<br />
       Itu perahu, riwayatmu dulu<br />
       Kaum pedagang slalu naik itu perahu</p>
    <hr>
  </body>
</html>

Hasilnya akan ditampilkan sebagai berikut :

html-vs-css-2

Pada dua contoh di atas, terlihat perbedaan mendasar penggunaan stylesheets dibandingkan dengan penggunaan Tag <font>:

Penggunaan Tag <font> menghasilkan pengaturan text secara individual dan tidak terkoordinasi. Setiap pengaturan text dengan Tag <font> harus selalu disertakan pada setiap tempat, misalnya pada Tag <h1> di seluruh struktur HTML. Apabila diperlukan pengubahan style text tersebut, maka masing-masing Tag <font> harus diubah satu demi satu.

Penggunaan stylesheets menghasilkan pengaturan text secara seragam dan terkoordinasi rapi pada bagian struktur head ; Tag <style> sampai dengan </style>. Dengan pemisahan tersebut, maka struktur HTML di dalam Tag <body> tetap dapat dituliskan secara rapi, tanpa harus disertai dengan Tag lain (Tag <font>) di dalamnya. Apabila diperlukan pengubahan style pada text, maka perubahan dapat dilakukan pada bagian stylesheets saja.

Keleluasaan Penggunaan

CSS menyediakan pilihan yang jauh lebih banyak dibandingkan dengan kode HTML biasa. Banyak hal yang dapat dengan mudah dituliskan dalam stylesheet, misalnya pengaturan margin, penggunaan warna latar belakang, dan sebagainya.

Contohnya, sebuah halaman web ditulis dengan kode HTML sebagai berikut :

<html>
  <head>
    <title>Halaman HTML</title>
  </head>
  <body>
    <table width="100%" border="0" cellpadding="5"
    cellspacing="0" bgcolor="#99CCFF">
      <tr>
        <td><h1><font face="Arial" size="5" color="Red">
        BENGAWAN SOLO - Cipt. GESANG</font></h1></td>
      </tr>
    </table>
    <p><font face="Georgia" size="2" color="orange">
    Bengawan Solo, Riwayatmu ini<br />
    Sedari dulu jadi perhatian insani<br />
    Musim kemarau, tak seb'rapa airmu<br />
    Di musim hujan air meluap sampai jauh<br />
    Mata airmu dari Solo, Terkurung gunung serbu<br />
    Air meluap sampai jauh, Akhirnya ke laut<br />
    Itu perahu, riwayatmu dulu<br />
    Kaum pedagang slalu naik itu perahu</font></p>
  </body>
</html>

Halaman tersebut dapat ditulis dengan menggunakan CSS tanpa menggunakan Tag <table>, sebagai berikut :

<html>
  <head>
    <title>Halaman HTML</title>
    <style type="text/css">
    	h1 {
           font-family:Arial, Helvetica, sans-serif;
           font-size:24px;
           color:red;
           background-color:#99CCFF;
           padding:5px }
    	p {
           font-family:Georgia, "Times New Roman", Times, serif;
           font-size:12px;
           color:orange; }
    </style>
  </head>
  <body>
    <h1>BENGAWAN SOLO - Cipt. GESANG</h1>
    <p>Bengawan Solo, Riwayatmu ini<br />
       Sedari dulu jadi perhatian insani<br />
       Musim kemarau, tak seb'rapa airmu<br />
       Di musim hujan air meluap sampai jauh<br />
       Mata airmu dari Solo, Terkurung gunung serbu<br />
       Air meluap sampai jauh, Akhirnya ke laut<br />
       Itu perahu, riwayatmu dulu<br />
       Kaum pedagang slalu naik itu perahu</p>
  </body>
</html>

Hasilnya ditampilkan sebagai berikut :

html-vs-css-3

Perhatikan bahwa pada contoh di atas, CSS dapat menghasilkan format text dengan fitur yang jauh lebih lengkap dibandingkan dengan Tag HTML biasa. Sebagai perbandingan, Tag <font> memiliki sekitar 10 properties (termasuk properti style), sedangkan style sheets memiliki sekitar 123 properties. Jelas bahwa fitur pada CSS jauh lebih kaya dibandingkan dengan kode HTML.

Demikian, mudah-mudahan informasi ini bisa bermanfaat.

http://www.kursusprivat.com ■

Apakah CSS ? Bagian I – Mengenal CSS

Website sederhana biasanya dituliskan dalam bahasa HTML (Hyper Text Markup Language). Sebuah bahasa yang dipergunakan secara luas untuk membuat website dengan cara menuliskan perintah-perintah dalam bentuk Tag (ditandai dengan kurung siku “<” dan ditutup dengan “>” ). Untuk itu, Anda dapat mempelajari secara lengkap dengan mengikuti tutorial yang telah saya tuliskan di sini.

Seiring dengan perkembangan teknologi, HTML mengalami perubahan dari waktu ke waktu. HTML yang dahulu dikembangkan oleh Tim Berners-Lee sekarang sudah memasuki versi 5. Tentu saja seiring dengan perkembangan tersebut, ada bagian-bagian yang diperluas, dan ada pula bagian yang dihilangkan mengingat kegunaannya sudah dapat digantikan oleh fungsi-fungsi baru. Menguasai HTML sangatlah dianjurkan bagi mereka yang ingin berkecimpung dalam dunia Web Desain.

Seiring dengan perkembangan teknologi HTML tersebut, berkembang pula sistem penulisan “style” yang dinamakan CSS (Cascading Style Sheets). CSS versi pertama mulai diperkenalkan pada Desember 1996. Sesuai dengan namanya Cascade Style Sheet, ditujukan sebagai tempat menuliskan Style yang dipergunakan dalam halaman-halaman web.

Banyak hal dapat disiapkan dalam CSS misalnya untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. Dengan demikian, CSS terutama digunakan untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS).

CSS 1

CSS pertama yang direkomendasikan oleh W3C ini dipublikasikan pada Desember 1996. CSS level 1 memiliki kemampuan sebagai berikut :

  • Mengatur Font properties seperti jenis font dan aksentuasinya
  • Mengatur Warna text, warna background, dan elemen-elemen lainnya
  • Atribut Text seperti spasi antar kata, antar huruf, dan spasi antar baris
  • Perataan pada text, image, tabel dan elemen-elemen lainnya
  • Margin, border, padding, dan positioning pada kebanyakan elemen
  • Identifikasi yang unik dan klasifikasi umum pada kelompok atribut

CSS 2

CSS level 2 dikembangkan oleh W3C dan dipublikasikan pada Mei 1998. CSS2 meliputi sejumlah kemampuan baru seperti penempatan elemen secara absolut, relatif, dan tetap, konsep berbagai jenis media, mendukung aural style sheets (penggunaan suara) dan bidirectional text (penulisan kanan ke kiri / Arabic), dan ditambah dengan font properti baru yakni drop shadow.

Apa yang bisa dilakukan dengan CSS ?

CSS adalah sebuah bahasa style yang dipergunakan untuk mengatur layout halaman HTML. Contohnya untuk mengatur jenis font, warna, margin, garis, tinggi, lebar, gambar background, posisi, dan berbagai hal lainnya.

HTML dapat dipergunakan untuk membuat layout pada halaman website. CSS dapat dipergunakan untuk layout halaman website dengan option yang lebih banyak dan lebih beragam, lebih akurat dan lebih canggih. CSS juga didukung oleh semua internet browser yang ada saat ini.

Segera setelah Anda mengetahui kegunaan dan cara menggunakan CSS, maka Anda dapat menambahkan tampilan baru pada website yang Anda miliki.

Mengapa harus ada CSS dan HTML ?

HTML dipergunakan untuk menyusun struktur halaman HTML. CSS dipergunakan untuk mengatur format pada struktur halaman HTML tersebut. Mungkin pada tahap awal hal ini cukup membingungkan, namun bisa kita analogikan dengan membangun sebuah bangunan. HTML dipakai untuk menyusun bangunan tersebut terdiri dari berapa lantai, masing-msing lantai terdiri dari berapa ruang, dan ruang-ruang tersebut memiliki berapa pintu. CSS dapat dipergunakan untuk mengatur style dari masing-masing lantai, contohnya jenis bahannya, warnanya, ketebalannya, dsb. Demikian halnya style dari masing-masing ruang dan style dari masing-masing pintu.

Pada prakteknya, sebuah struktur halaman HTML akan tersusun atas Tag-tag HTML, sebagai contoh pada halaman HTML akan terdapat Tag <h1> untuk Heading, Tag <p> untuk Paragraf, Tag <a> untuk Anchor, dsb. Pada struktur halaman tersebut, diperlukan perintah lain untuk mengatur jenis font, warna, ukuran text, dsb, yang kemudian dapat diatasi dengan penggunaan Tag <font>. Hal ini diprakarsai oleh Netscape dan Microsoft, yang sebetulnya berupa tambahan terhadap Tag HTML standar yang berlaku pada saat itu.

Demikian halnya dengan Tag < table > yang secara luas dipergunakan (baca: disalahgunakan) untuk mengatur layout halaman website, mengingat pada saat itu tidak ada cara yang lebih mudah untuk mengatur layout halaman selain dengan memanfaatkan Tag < table >

CSS dibuat untuk menyediakan berbagai kebutuhan bagi web desainer, dengan berbagai kemungkinan layout halaman yang canggih yang sekaligus didukung oleh semua internet browser. Kehadiran CSS bagi web desainer juga dapat memudahkan pengaturan dengan memisahkan struktur halaman HTML dari style-nya. Dengan demikian, akan memudahkan maintenance / perawatan website tersebut.

Apa keuntungan penggunaan CSS ?

Keuntungan penggunaan CSS adalah sebagai berikut :

  • Dapat mengatur layout banyak halaman sekaligus dengan satu dokumen stylesheet.
  • Dapat mengatur layout halaman dengan lebih presisi.
  • Dapat mengaplikasikan layout yag berbeda pada jenis media yang berbeda (screen, print, dll.).
  • Tersedia dengan banyak teknik yang canggih.
  • Menghemat Bandwidth, karena stylesheet akan selalu disimpan pada cache browser dan dipergunakan secara berulang.

Bagaimana cara menuliskan CSS ?

Ada beberapa cara untuk menuliskan style pada sebuah halaman HTML:

1. Inline style

Inline styles digunakan bila ingin mengatur format pada satu bagian dokumen HTML saja. Inline styles diletakkan pada bagian yang ingin diatur tampilan tulisannya. Dalam hal ini style dituliskan sebagai atribut dari sebuah Tag. Penggunaan inline style Pada sebuah Tag <H1> ditambahkan style untuk menggunakan jenis font Arial. Tag <H1> yang biasanya ditulis
<h1> … </h1>
dapat ditambahkan dengan atribut style berikut jenis properti style yang ingin digunakan. Sehingga sekarang dituliskan sebagai berikut :
<h1 style=””> … </h1>
Ditambahkan properti style, yakni font-family, berikut nilainya, yakni Arial menjadi sebagai berikut :
<h1 style=”font-family:Arial;”> … </h1>
Contoh :

<h1 style=”font-family:Arial, Helvetica, sans-serif;”> Tulisan dengan font Arial </h1>

Akan ditampilkan sebagai berikut :

Tulisan dengan font Arial

Jika ingin ditambahkan properti lain pada style tersebut, dapat dituliskan dengan menggunakan separator berupa tanda titik-koma ( ; ) Contoh :

<h1 style=”font-family:Arial, Helvetica, sans-serif; color:Green;”> Tulisan Arial berwarna Hijau </h1>

Akan ditampilkan sebagai berikut :

Tulisan Arial berwarna Hijau

2. Internal Style Sheet

Internal style sheet digunakan di dalam satu dokumen HTML dan hanya satu dokumen HTML itu saja yang menggunakan style tersebut.

Perbedaan Internal Style Sheet dengan Inline Style adalah pada penempatannya. Internal Style Sheet ditempatkan pada bagian Head, di antara Tag <head> dan </head>. Semua bagian body dapat diatur tampilannya melalui Style Sheet ini. Di sini kita mendeklarasikan Style yang dipergunakan di dalam Tag <body> sehingga pada saat bagian body ditampilkan, Style-nya akan mengacu pada Style yang sudah dideklarasikan tersebut. Contohnya, sebuah halaman HTML berisi content sebagai berikut :

<h1> TULISAN JUDUL </h1>
<a href=”http://www.kursusprivat.com”&gt; LINK </a>
<p> Tulisan berupa paragraf </p>

Untuk mengatur style pada halaman tersebut kita dapat menuliskan stylesheet di antara Tag <head> … </head> . Misalnya sebagai berikut :

<style type=”text/css”>
h1 { color:blue; background-color:lightblue; }
p { color:green; margin-left:20px; margin-right:20px; background-color:lightgreen; }
a { color:red; background-color:yellow; }
</style>

3. External Style Sheet

External style sheet digunakan untuk membuat format style pada beberapa dokumen HTML sekaligus, dan hanya satu dokumen stylesheet yang disimpan dalam format file .css

Keuntungannya tentu saja lebih praktis jika kita menuliskan satu style yang akan dipergunakan secara seragam pada halaman-halaman HTML yang lain. Kenyataannya, pada sebuah website selalu menggunakan style yang seragam. Dengan menuliskan stylesheet pada satu file tersendiri, maka apabila di kemudian hari kita ingin mengubah style, cukup file stylesheet-nya saja yang kita ubah.

Penggunaan External Stylesheet pada halaman HTML ditandai dengan link ke file Stylesheet. Link terhadap file .css external tersebut dituliskan pada bagian Tag sebagai berikut :

<head>

<link rel=”stylesheet” type=”text/css” href=”namafile.css”>
</head>

Contoh penggunaan dari ketiga jenis style sheet tersebut dapat dilihat pada link di bawah ini : Membuat Website Itu Mudah (Bagian VI – Font Style)

Demikian, mudah-mudahan informasi ini bermanfaat.

http://www.kursusprivat.com

Membuat Website Itu Mudah (Bagian VI – Stylesheet)

Satu hal lagi yang biasa dipergunakan dalam pengaturan website adalah Font Style. Tag yang dipergunakan bisa bermacam-macam, namun yang paling efisien adalah dengan menuliskannya dalam CSS. CSS atau Cascade Style Sheet adalah pengaturan website yang dikumpulkan dalam satu file tersendiri, yang kemudian sering dibaca oleh file HTML sebagai Class. Oleh karena itu, pembelajaran HTML selalu disandingkan dengan pembahasan mengenai CSS.

Style dapat dimulai dengan memanfaatkan Tag Font, karena Tag Font dapat dipergunakan untuk mengatur jenis huruf, ukuran huruf, warna huruf, dll. Namun, apabila jenis, ukuran, dan warna huruf ini dibuat seragam, lebih baik gunakan Font Style. Style digunakan untuk mengatur tampilan dokumen HTML di web browser secara keseluruhan. Tidak hanya font yang dapat diatur melalui style, tetapi juga warna background, border, dan lain-lain.

Ada beberapa cara untuk menuliskan style pada sebuah halaman HTML:

1. Inline style

Inline styles digunakan bila ingin mengatur format pada satu bagian dokumen HTML saja. Sehingga inline styles tetap diletakkan di bagian <body>. Dalam hal ini style dituliskan sebagai atribut dari sebuah Tag.

Contoh penerapan inline style pada sebuah paragraf adalah sebagai berikut:

<html>
<body>
Berikut ini adalah contoh penggunaan style pada paragraf:
<p style=”color: blue; margin-left: 20px; background-color: lightblue”>
INI ISI PARAGRAF YANG DIBERI STYLE.
Perhatikan bahwa teks paragraf ini berwarna biru,
diberi jarak margin sebelah kiri sebesar 20 piksel,
dan diberi latar belakang warna biru muda.</p>
</body>
</html>

Hasilnya akan terlihat seperti di bawah ini:

Pada contoh di atas terlihat bahwa atribut Style memiliki jangkauan yang lebih luas dibandingkan dengan Tag Font. Oleh karena itu, pemakaian atribut Style lebih dianjurkan dibandingkan dengan Tag Font. Lebih dari itu, Style bisa lebih efisien dibandingkan dengan Tag Font, karena bisa disimpan dalam bentuk class, yang kemudian bisa dipanggil berdasarkan nama class.

2. Internal Style Sheet

Internal style sheet digunakan di dalam satu dokumen HTML dan hanya satu dokumen HTML itu saja yang menggunakan style tersebut.

Perbedaan Internal Style Sheet dengan Inline Style adalah pada penempatannya. Internal Style Sheet ditempatkan pada bagian Head, di antara Tag <head> dan </head>. Semua bagian body dapat diatur tampilannya melalui Style Sheet ini. Di sini kita mendeklarasikan Style yang dipergunakan di dalam <body> sehingga pada saat bagian body ditampilkan, Style-nya akan mengacu pada Style yang sudah dideklarasikan tersebut.

Contoh penggunaan Style Sheet:

<html>
<head>
<style type=”text/css”>
body { color:blue; background-color:lightblue}
p { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
</style>
</head>
<body>
<b>
INI ADALAH TULISAN DENGAN STYLE “body”.</b>
Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
Berikut ini adalah contoh penggunaan style sheet pada paragraf:
<p><b>INI ADALAH PARAGRAF YANG DIBERI STYLE.</b>
Perhatikan bahwa teks paragraf ini berwarna merah,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna pink.</p>
</body>
</html>

Hasilnya akan terlihat seperti di bawah ini:

Style sheet dalam contoh ini dipergunakan untuk mengatur teks, warna latar belakang, dan margin pada Tag <body> dan Tag <p>. Detil pengaturan style dilakukan pada Tag <style> di bawah Tag <head>. Dengan penulisan style tersebut, maka seluruh tulisan di dalam Tag <body> diatur oleh style “body”, demikian halnya seluruh tulisan di dalam Tag <p> diatur oleh style “p”.

Bagaimana jika kita ingin menambahkan style lain yang dipergunakan pada tag yang sama? Contohnya jika kita ingin membuat 2 paragraf berbeda warnanya, satu berwarna merah dan satu lagi berwarna hijau. Style dapat dituliskan sebagai Class tersendiri, yang dapat dipanggil melalui atribut class. Contohnya adalah sebagai berikut:

<html>
<head>
<style type=”text/css”>
body { color:blue; background-color:lightblue}
.merah { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
.hijau { color:green; margin-left: 20px; margin-right: 20px; background-color: lightgreen}
</style>
</head>
<body>
<b>
INI ADALAH TULISAN DENGAN STYLE “body”.</b>
Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
Berikut ini adalah contoh penggunaan style sheet pada paragraf:
<p class=”merah”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “merah”.</b>
Perhatikan bahwa teks paragraf ini berwarna merah,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna pink.</p>
<p class=”hijau”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “hijau”.</b>
Perhatikan bahwa teks paragraf ini berwarna hijau,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna hijau muda.</p>
</body>
</html>

Hasilnya akan terlihat seperti di bawah ini:

Dengan menuliskan style sebagai sebuah Class, maka setiap style dapat dipanggil melalui atribut class pada Tag manapun yang dapat memuat class tersebut. Class tersebut dipanggil pada banyak Tag tanpa ada batasan dengan menuliskan class=”…namastyle…”. Pnulisan format style cukup satu kali saja, yaitu pada Tag <style> di bawah Tag <head>.

3. External Style Sheet

External style sheet digunakan untuk membuat format style pada beberapa dokumen HTML  sekaligus, dan hanya satu dokumen stylesheet yang disimpan dalam format file .css

Keuntungannya tentu saja lebih praktis jika kita menuliskan satu style yang akan dipergunakan secara seragam pada halaman-halaman HTML yang lain. Kenyataannya, pada sebuah website selalu menggunakan style yang seragam. Dengan menuliskan stylesheet pada satu file tersendiri, maka apabila di kemudian hari kita ingin mengubah style, cukup file stylesheet-nya saja yang kita ubah.

Contoh penggunaan Style Sheet pada halaman HTML:

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<b>
INI ADALAH TULISAN DENGAN STYLE “body”.</b>
Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
Berikut ini adalah contoh penggunaan style sheet pada paragraf:
<p class=”merah”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “merah”.</b>
Perhatikan bahwa teks paragraf ini berwarna merah,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna pink.</p>
<p class=”hijau”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “hijau”.</b>
Perhatikan bahwa teks paragraf ini berwarna hijau,
diberi jarak margin sebelah kiri sebesar 20 piksel,
margin sebelah kanan sebesar 20 piksel,
dan diberi latar belakang warna hijau muda.</p>
</body>
</html>

Di bagian lain, kita menuliskan isi file terpisah dengan nama persis sama dengan yang ditautkan oleh file HTML sebelumnya, yaitu: mystyle.css. Pada file CSS inilah semua format style dituliskan. Perlu diketahui pula bahwa file ini dapat ditulis dengan notepad dan di-Save As sebagai file dengan extensi .css (Cascade Style Sheet). Isinya adalah sebagai berikut:

body { color:blue; background-color:lightblue}
.merah { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
.hijau { color:green; margin-left: 20px; margin-right: 20px; background-color: lightgreen}

Hasilnya akan persis sama dengan sebelumnya. Namun, dengan cara menuliskannya dalam satu file tersendiri, memungkinkan class style yang disebutkan untuk bisa dipanggil oleh banyak file HTML. Asalkan pada setiap file HTML tersebut di bagian Tag <head> disebutkan <link rel=”stylesheet” type=”text/css” href=”namafile.css”>.

Kita lanjutkan di topik bahasan selanjutnya. ■