CSS (Cascading Style Sheet) adalah bahasa komputer yang digunakan untuk mengatur layout atau tampilan dan gaya dari sebuah dokumen yang ditulis dalam bentuk HTML. Tujuan utama dibuatnya CSS adalah untuk memungkinkan pemisahan dokumen yang ditulis dalam format HTML (sebagai isi dari sebuah website) dengan cara (layout) dan gaya bagaimana dokumen HTML tersebut ingin ditampilkan. Pemisahan ini memberikan fleksibilitas dan kontrol yang lebih mudah dalam mengatur layout dan gaya sebuah website, memungkinkan berbagi format layout dan gaya untuk beberapa halaman dan mengurangi kerumitan pada penyusunan sebuah website.
Ada tiga cara dalam menulis sebuah dokumen CSS; inline style, internal style sheet dan external style sheet. Di sini kita hanya akan membahas cara penulisan sebuah dokumen CSS dengan menggunakan cara external style sheet. Alasannya adalah karena dua cara yang lainnya mengurangi atau tidak memenuhi tujuan dari dibuatnya sebuah dokumen CSS. Sebenarnya pada tutorial HTML part 1, yang memraktekan cara membuat "header" dan cara memberi "style" pada sebuah text atau tulisan, itulah yang disebut dengan cara inline style. Sedangkan cara internal style sheet adalah dengan menempatkan format "style" yang kita inginkan di antara elemen "<head>" dengan "</head>". Bila anda kurang memahami apa yang dimaksud, jangan terlalu dipikirkan sebab, cara inline style dan internal style dapat dikatakan "sudah tidak digunakan lagi". Let us start!
Seperti yang telah disebutkan di atas bahwa dokumen HTML sebagai isi (content) dari sebuah website dengan dokumen CSS yang mengatur layout dan gaya adalah terpisah maka, Pertama-tama akan dibahas tentang bagaimana menghubungkan (me-link) dokumen HTML dengan dokumen CSS. Sekaligus menyinggung "meta data" pada dokumen HTML.
Pada tutorial Dasar-Dasar no. 4, ketika anda mem-"view page source" tampilan, pada bagian atas dari dokumen HTML tersebut tertulis sebagai berikut;
""<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Floral Garden
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20130323
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Floral Garden by FCT</title>
<link href='http://fonts.googleapis.com/css?family=Istok+Web:400,700' rel='stylesheet' type='text/css' />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>""
** Coding ""<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">""
berarti dokumen HTML yang dibuat menggunakan XHTML. Perbedaan HTML dengan XHTML adalah penulisan coding pada XHTML lebih strict (ketat) dibanding menggunakan HTML.
Misalkan, pada HTML kita menulis paragraf "<p>ini isi paragraf" maka elemen tersebut akan tetap dapat dibaca dan ditampilkan oleh mesin, meskipun elemen itu belum ditutup (belum lengkap). Sedangkan pada XHTML elemen tersebut wajib ditutup (dilengkapi) dengan menambahkan "</p>" di akhir paragraf, seperti ini "<p>ini isi paragraf</p>".
** Coding ""<!--Design by Free CSS Templates.... dst...-->""
adalah komentar sang penulis. anda dapat mengganti tulisan apapun sebagai catatan di antara elemen ""<!-- dengan -->"".
** Coding ""<html xmlns="http://www.w3.org/1999/xhtml">""
berarti dokumen tersebut juga ditulis dalam format XML (eXtensible Mark up Language). Bila HTML atau XHTML berfungsi untuk menampilkan data, maka XML berfungsi untuk "mengantarkan" atau membawa data. Biasanya digunakan untuk website-website yang memberikan download-an.
** Coding ""<meta name="keywords" content="" />"".
Mesin pencari seperti google, yahoo atau bing meng-index dan memasukkan sebuah website dalam daftar pencarian (search) mereka berdasarkan keywords (kata kunci) dan content (isi) dari website tersebut. Misalkan kita ingin website kita di-search oleh mesin pencari berdasarkan kata kunci "belajar membangun website" maka coding yang kita buat sebagai berikut;
""<meta name="keywords" content="belajar membangun website"/>"".
Elemen ini dibaca oleh mesin, tetapi tidak ditampilkan pada browser. Elemen yang dibaca oleh mesin tetapi tidak ditampilkan pada browser disebut dengan meta data.
** Coding ""<meta name="description" content="" />""
Berfungsi sama dengan elemen sebelumnya tetapi isi website dijabarkan dengan lebih rinci. misalkan;
""<meta name="description" content="membuat header pada HTML, inline style sheet, internal style sheet, external style sheet, menginstal PHP dan SQL" />""
Sebenarnya masih banyak coding meta name dengan fungsinya masing-masing. tetapi, pada tutorial level ini kita cukupkan sampai di sini.
** Coding ""<link href='http://fonts.googleapis.com/css?family=Istok+Web:400,700' rel='stylesheet' type='text/css' />""
berarti sang penulis menggunakan jenis font yang disediakan oleh googleAPIs. GoogleAPIs sendiri adalah seperangkat Application Program Interface berbasis JavaScript yang dikembangkan oleh google. Fasilitas ini memungkinkan perancang website untuk berinteraksi dengan layanan google dan mengintegrasikan pencarian, multimedia, internet contentke dalam aplikasi-aplikasi web.
** Coding ""<link href="default.css" rel="stylesheet" type="text/css" media="all" />""
Inilah coding yang menghubungkan dokumen HTML dengan dokumen CSS. Misalkan, nama dokumen CSS anda adalah "cssku1" maka codingnya sebagai berikut;
""<link href="cssku1.css" rel="stylesheet" type="text/css" media="all" />""
Jangan lupa untuk meletakkan dokumen HTML dan dokumen CSS pada folder yang sama.
** Coding ""<!--[if]>...<![endif]-->""
adalah conditional comments yang bertujuan untuk membedakan aturan CSS yang digunakan oleh mesin dalam kondisi-kondisi tertentu. Dalam hal ini, coding
""<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->""
berarti bila pengguna (orang yang membuka situs kita) menggunakan browser internet explorer6 (browser yang sudah dianggap "kuno") maka dokumen CSS yang dipakai adalah "default_ie6.css". Menimbang bahwa mayoritas pengguna internet di dunia telah menggunakan browser mutakhir, pernyataan "<!--[if IE 6]>" nyaris tidak diperlukan. Sebenarnya masih banyak elemen "<!--[if]>...<!--[endif]> dengan fungsinya masing-masing, tetapi untuk level ini kita cukupkan sampai di sini.
** Semua elemen "<link href="..."/> dan meta name diletakkan di antara elemen "<head>" dengan "</head>".
Dasar-Dasar CSS
1. CSS memiliki dua bagian utama; satu buah "selector" dan satu atau lebih "declaration".
Selector umumnya adalah elemen HTML yang ingin kita modifikasi.
Declaration berisi "property" dan "value".
2. Untuk mempermudah setting, CSS memungkinkan kita untuk membuat nama selector sendiri seperti yang kita inginkan yang disebut dengan "id" dan "class".
"id" diberi simbol "#" (pagar) dan class diberi simbol "." (titik)
"#" digunakan untuk memodifikasi satu buah elemen tertentu.
"." digunakan untuk memodifikasi beberapa buah elemen dengan "class" yang sama.
Nama "id" dan "class" yang kita buat sendiri diletakkan setelah simbol, misalkan; "#tes1" atau ".tes2".
Kembali
No comments:
Post a Comment