Tutorial Dreamweaver | Belajar Membuat Web Dengan Adobe Dreamweaver
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 :
Hasilnya akan terlihat seperti di bawah ini :
<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 :
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.
<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.
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.
<style type="text/css"> <!-- h1 { font-family: Arial, Helvetica, sans-serif; color: #060; } --> </style>
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.
<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>
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 :
text-align: center;
<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>
Tidak ada komentar:
Posting Komentar