Dalam dunia internet, tentu sudah tidak asing lagi jika kita mendengar HTML dan CSS.
Ya, HTML merupakan singkatan dari Hyper Text Markup Language yang merupakan bahasa yang digunakan untuk menampilkan halaman di web. Pada HTML, terdapat HTML tags dimana istilah tersebut merupakan keywords (tag names) dikelilingi kurung seperti <html>. HTML tags biasanya berupa pasangan seperti <b> dan </b>. Selain HTML tags, terdapat pula HTML Elements yang berisi HTML Attribute.
Tujuan penggunaan web browser (seperti Chrome, Mozilla, Opere, Safari) adalah untuk membaca dokumen HTML dan menampilkannya dalam bentuk halaman web.
Berikut merupakan Struktur Dokumen HTML:
Untuk "mendandani" tampilan HTML, kita menggunakan CSS.
Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets, merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
CSS merupakan pengelola bagaimana suatu elemen HTML ditampilkan. Style Sheet Eksternal disimpan dalam file css terpisah. Suatu aturan CSS terdiri dari dua bagian utama yaitu:
- Sebuah Selector
- Satu atau lebih Declaration
- Selector biasanya merupakan elemen HTML.
- Setiap declaration terdiri dari pasangan property dan value. Property adalah style yang ingin diubah dan mempunya nilai (value).
- Universal Selector digunakan untuk membuat suatu aturan yang berlaku global, yaitu dengan tanda '*'
Keuntungan Penggunaan CSS
Mempermudah Pengaturan Web. Penulisan kode kode CSS akan dipisahkan dengan kode html sehingga pemilik web tidak akan bingung untuk mengganti dan memperbaiki tata letak maupun postingan yang dipublikasikan. Oleh karena itu CSS menjadikan halaman lebih menarik dan nyaman untuk dikunjungi.
Memperingan Penggunaan Bandwith. Semakin lenggangnya kuota bandwith akan memberi dampak kepada banyaknya pengunjung dalam waktu bersamaan tanpa lelet aksesnya.
Mempercepat Web Browser Untuk Mengakses Situs Kita. Pencarian situs browser atau serch engine akan mendeteksi melewati kode kode bahasa pemograman yang kita gunakan, disini CSS berperan sebagai penyederhana bahasa pemograman sehingga akses search engine yang menuju ke halaman web kita akan lebih cepat tersorot dan memungkinkan web kita untuk nangkring di nomor satu atau paling tidak halaman pertama.
Reformatting atau Progressive Enhancement. Dengan perubahan sederhana dari satu baris, sebuah stylesheet yang berbeda dapat digunakan untuk halaman yang sama. Ini memiliki keunggulan untuk aksesibilitas, serta memberikan kemampuan untuk menyesuaikan halaman atau situs ke perangkat target yang berbeda. Selain itu, perangkat tidak dapat memahami styling masih akan menampilkan konten.
Fleksibilitas. Dengan menggabungkan CSS dengan fungsionalitas sebuah Content Management System, cukup banyak fleksibilitas dapat diprogram ke dalam bentuk pengirenentukan nilai properti sebagai ekspresi sederhana (seperti margin-left: 10% - 3em + 4px ;). Hal ini berguna dalam berbagai kasus, seperti menghitung ukuran kolom dikenakan kendala pada jumlah semua kolom.
Kurangnya Variabel. CSS tidak berisi variabel. Hal ini membuat perlu untuk melakukan "mengganti semua" ketika salah satu keinginan untuk mengubah fundamental konstan, seperti skema warna atau berbagai ketinggian dan lebar.
Browser Dukungan konsisten. Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
Batasan Kontrol Vertikal. Meskipun penempatan horisontal unsur-unsur umumnya mudah untuk mengontrol, penempatan vertikal sering unintuitive, berbelit-belit, atau tidak mungkin. Tugas-tugas sederhana, seperti berpusat elemen vertikal atau mendapatkan footer yang akan ditempatkan tidak lebih tinggi dari bawah viewport, baik memerlukan aturan style rumit dan unintuitive, atau aturan sederhana namun banyak yang tidak didukung.
Pengendalian Bentuk Elemen. CSS saat ini hanya menawarkan bentuk persegi panjang. Sudut bulat atau bentuk lainnya mungkin memerlukan non-semanurangan, dan kelemahan yang ditemukan melalui penggunaan CSS "murni", kegunaannya dalam web desain masih terlihat dengan cara lain. Karena aksesibilitas, konten web untuk ponsel ponsel dan PDA menjadi dapat diakses karena CSS. CSS mengkonsumsi bandwidth lebih rendah. Dan dengan CSS, hampir semua informasi tata letak tinggal di satu tempat: dokumen CSS. Karena informasi tata letak yang terpusat, perubahan ini dapat dilakukan dengan cepat dan global secara default.
Menuliskan CSS Dengan Baik
Saat pertama kali menggunakan CSS, menuliskan kodenya memang akan terasa melelahkan dan sangat rumit jika sebelumnya anda sudah terbiasa membuat sebuah website hanya dengan menggunakan table. Bagaimanapun juga setelah kita mengetahui pembuatan website dengan table bukanlah standar web yang baik, kita pun akan mulai beralih dan mempelajari CSS.
Saya rasa semua orang pasti bisa menuliskan CSS, bahkan saat ini banyak sekali perusahaan yang bergerak dibidang converting PSD ke HTML dengan CSS. Tapi satu hal yang jadi pertanyaan, "Apakah CSS yang dituliskan cukup baik?". Oleh sebab itu disini saya akan membahas tentang cara menuliskan kode CSS yang baik.
- Memberikan indentasi (jarak) setiap menuliskan properti CSS.
Berilah jarak indentasi saat menuliskan properti CSS, pisahkan antara properti yang satu dengan yang lainnya. Pemberian jarak akan membuat kode CSS terorganisasi dengan baik sehingga dapat dengan mudah dicari.
Contoh:
Body {
background: url(images.jpg);
font: 12px arial;
height: auto;
left: 0;
margin: 0 auto;
padding: 0;
top: 0;
width: 100%;
}
- Disusun Secara Alphabetical.
Penyusunan tulisan properti CSS secara alphabetical juga adalah cara yang baik dan mempermudah pencarian properti yang mau kita rubah nilainya. Perhatikan pada properti CSS pada poin sebelumnya, pada dreamweaver fasilitas ini sudah disediakan dengan menekan CTRL + Space.
- Penulisan Kode Secara CSS Secara Singkat.
.sample {
border-color: #000;
border-style: solid;
border-width: 1px;
}
Anda harus belajar bagaimana menuliskan kode CSS secara pendek. Pada penulisan properti border diatas ini adalah contoh penulisan yang kurang baik, Seharusnya properti diatas dapat dibuat singkat dengan menuliskannya seperti contoh dibawah,
.sample {
border: 1px solid #000;
}
Penulisan kode yang pendek akan mempercepat proses penulisannya, selain itu juga akan mempercepat tingkat cluseter dalam CSS sehingga bisa lebih cepat juga dirender oleh browser.
- Menggunakan CSS Reset
html, body {
height:100%;
min-height:100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, form, fieldset, input, textarea, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
Setiap browser mempunyai kompatibilitas yang berbeda dan juga perlakuan berbeda pada CSS, anda harus mereset semua CSS sebelum memulai penulisan CSS, sehingga kode anda tidak terpengaruhi browser dan browser menampilkan item CSS anda dengan benar. Di atas adalah beberapa contoh untuk mereset CSS pada beberapa elemen.
- Membuat Pernyataan Comments
Contoh:
/*membuat layout*/
.layout {
}
/*membuat sidebar*/
.sidebar{
}
/*membuat layout*/
.layout {
}
/*membuat sidebar*/
.sidebar{
}
Membuat comment di setiap bagian pengerjaan adalah hal yang baik untuk membuat penulisan kita tetap bersih dan terorganisir dengan baik. ini juga membantu anda untuk mempermudah penelusuran kode.
- Hapus Semua Kode CSS Yang Tidak Terpakai
Mungkin saat menuliskan kode banyak atribut Class dan ID yang tidak jadi dipakai, buanglah segera semua atribut class dan ID yang tidak terpakai atau pisahkan dalam file referensi yang berbeda. Apabila anda belakangan ingin merubah CSS anda, anda tidak akan di pusingkan dengan banyaknya atribut class dan ID yang sudah tidak digunakan.
Oke sekian dulu tentang pembahasan HTML dan CSS kali ini, saya harap bacaan ini bisa bermanfaat bagi teman-teman yang sedang membutuhkan referensi untuk belajar sebagai seorang pemula, seperti saya, hehe..
Sekian.
0 comments