Pelajaran CSS
Mengawali dengan HTML + CSS
Contents
Hasil halaman HTML, dengan warna dan tata letak, seluruhnya menggunakan CSS.
Sebagai catatan saya tidak menganggap HTML ini indah ☺ 
Bagian bagian yang tampak seperti ini adalah tidak wajib. Hal tersebut mengandung penjelasan lebih lanjut mengenai kode-kode HTML dan CSS yang terdapat dalam contoh. Tanda “perhatian!” diawal menandakan bahwa ini adalah materi yang lebih sulit dari teks yang lain. Langkah 1: menulis HTML
Untuk pelajaran, saya menyarankan anda untuk menggunakan alat yang sangat sederhana. Seperti, Notepad (bila menggunakan Windows), TextEdit (untuk Mac) atau KEdit (bila menggunakan KDE) dapat berkerja dengan baik. Setelah anda mengerti prinsipnya, anda dapat beralih ke peralatan yang lebih canggih, atau bahkan ke program-program komersil, seprti Style Master, Dreamweaver atau GoLive. Tetapi untuk CSS file anda yang pertama, adalah sesuatu hal yang baik untuk bila perhatian anda tidak teralihkan dengan banyak fitur yang terlalu canggih bagi. Jangan menggunakan pengolah kata, seperti Microsoft Word atau OpenOffice. Mereka pada umumnya akan membuat file-file yang tidak dapat dibaca oleh browser web. Untuk HTML dan CSS, kita menginginkan file teks, yang sederhana. Langkah 1 ialah dengan membuka editor teks anda (Notepad, TextEdit, KEdit, atau apa pun favorit anda), mulai dengan file yang kosong dan ketik berikut ini kedalamnya:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Halaman dengan style saya yang pertama</title> </head> <body> <!-- Menu navigasi situs --> <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="renungan.html">Renungan</a> <li><a href="kota.html">Kotaku</a> <li><a href="links.html">Link-link</a> </ul> <!-- Isi utana --> <h1>Halaman dengan style saya yang pertama</h1> <p>Selamat datang ke halaman dengan style saya! <p>Halaman ini tidak ada gambar, tatapi paling tidak memiliki style. Dan juga memiliki link, meskipun mereka tidak pergi kemana-mana… <p>Disini seharusnya ada lebih banyak lagi, tetapi saya belum tahu apa. <!-- Tandatangani dan beri tanggal, hanya bersikap sopan! --> <address>Dibuat 5 April 2004<br> oleh diriku sendiri.</address> </body> </html>Malah anda tidak harus mengetiknya: anda dapat melakukan copy dan paste dari halaman ini ke dalam editor. (Bila anda menggunakan TextEdit pada Mac, jangan lupa memberi tahu TextEdit bahwa teksnya benar-benar teks sederhana (plain text), dengan pergi ke menu Format dan memilih “Make plain teks”.)
Baris pertama dari file HTML diatas memberi tahu browser apa tipe HTML-nya (DOCTYPE berarti DOCument TYPE). Dan dalam hal ini, adalah HTML versi 4.01. Kata-kata yang tertulis diantara < dan > dinamakan tag, dan seperti yang ada lihat, dokumen ini terdapat di antara tag <html> dan </html>. Antara <head> dan </head> ada tempat untuk berbagai informasi yang tidak ditampilkan di layar. Saat ini pada tempat tersebut terdapat judul dari dokumen, tetapi kita akan menambahkan juga style sheet CSS disana. Bagian <body> adalah tempat aktual dari isi dokumen. Secara garis besar, segala sesuatu yang ditempatkan disitu akan ditampilkan, kecuali teks yang terdapat diantara <!-- dan -->, yang berfungsi sebagai komentar bagi diri kita sendiri. Hal ini akan diabaikan oleh browser. Dalam contoh, tag <ul> memperkenalkan kita pada “Unordered List (daftar tak beraturan)”, dalam artian, sebuah daftar yang isinya tidak bernomor. Tag <li> adalah awal dari “List Item (Item dari daftar).” Tag <p> adalah untuk “Paragraph (alinea/paragraf).” Dan <a> adalah untuk jangkar “Anchor (jangkar),” yang merupakan hal yang membuat sebuah hyperlink. 
Editor Notepad menunjukan sumber HTML. Bila anda ingin mengetahui apa arti dari nama yang berada diantara <…>, salah satu tempat yang baik untuk memulai adalah Getting started with HTML. Tapi sedikit penjelasan mengenai struktur dari halaman HTML contoh milik kita. - Tag “ul” adalah sebuah daftar dengan sebuah hyperlink per item. Ini akan kita pergunakan sebagai “menu navigasi situs,” yang me-link ke halaman-halaman lain dari halaman Web kita. Sebagai anggapan, seluruh halaman dari situs kita mempunya menu yang serupa.
- Elemen-elemen “h1” dan “p” adalah elemen elemen yang membentuk konten yang unik dari halaman ini, sedangkan tanda tangan (signature) dibagian bawah (“address”) akan tampil serupa di seluruh halaman situs.
Langkah 2: menambahkan beberapa warna
Anda mungkin melihat beberapa teks hitam dengan latar belakang putih, tetapi tergantung dari bagaimana brorser tersebut dikonfigurasi. Jadi salah satu hal mudah yang dapat kita lakukan untuk membuat halaman tersebut menjadi lebih gaya adalah dengan menambahkan beberapa warna. (Biarkan browser tetap terbuka, akan kita gunakan kembali nanti.) Kita akan mulai dengan sebuah style sheet yang dibuat di dalam file HTML. Kemudian, kita akan menaruh HTML dan CSS pada file yang terpisah. File terpisah merupakan hal yang baik, karena akan lebih mudah menggunakan style sheet yang sama untuk beberapa file HTML: anda hanya perlu menuliskan style sheet tersebut sekali. Tetapi untuk langkah ini, kita akan menaruhnya di sebuah file. Kita perlu menambahkan sebuah elemen <style> pada file HTML. Style sheet tersebut akan berada didalam elemen itu. Jadi kembali ke jendela editor dan tambahkan lima baris berikut dibagian head dari file HTML. Baris-baris yang di tambahkan tampil dengan warna merah.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Halaman dengan style saya yang pertama</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[dsb.]
Baris pertama menjelaskan bahwa ini adalah sebuah style sheet dan ditulis dalam CSS (“text/css”). Baris kedua mengatakan bahwa kita menambahkan style ke dalam elemen “body”. Yang ketiga menjadikan teks berwarna ungu dan baris berikutnya menjadikan latar belakang jadi kuning kehijauan. Style sheet dalam CSS terbuat dari aturan-aturan. Tiap aturan memiliki tiga bagian: - Selector (dalam contoh: “body”), memberi tahu browser bagian dokumen (elemen HTML) yang mana yang terkena dampak aturan tersebut;
- property (dalam contoh, 'color' dan 'background-color' keduanya adalah property), yang menentukan aspek dari elemen yang sedang di atur;
- dan value ('purple' dan '#d8da3d'), yang memberikan nilai pada property dari style.
body { color: purple }
body { background-color: #d8da3d }
tetapi karena kedua atauran tersebut hanya berdampak pada body, kita hanya menulis “body” setu kali dan menulis kedua property dan value bersama. Untuk mengetahui lebih lanjut mengenai selectors, baca bab 2 dari Lie & Bos. 
Bagaimana sebuah browser menampilkan halaman tersebut setelah ditambahkan warna. 
Warna dapat ditetapkan dengan beberapa cara. Contoh menunjukkan dua diantaranya: menggunakan nama (“purple”) dan dengan kode hexadesimal (“#d8da3d”). Ada sekitar 140 nama warna dan kode hexadesimal memungkinkan lebih dari 16 juta warna. Adding a touch of style menjelaskan lebih lanjut menganai kode-kode ini. Step 3: menambahkan fonta
Hal lain yang mudah dilakukan adalah dengan membuat perbedaan dalam fonta untuk berbagai elemen di halaman. Jadi marilah kita jadikan teks dengan fonta “Georgia”, kecuali untuk heading h1, yang mana akan kita beri fonta “Helvetica.” Di Web, anda tidak pernah dapat memastikan fonta apa yang dimiliki oleh para pembaca di dalam komputer-komputer mereka, jadi kita tambahkan juga beberapa alternatif: bila Georgia tidak tersedia, Times New Roman atau Times juga merupakan pilihan yang baik, bila semua itu tidak ada, browser bisa menggunakan fonta dengan serifs. Bila Helvetica tidak ada, Geneva, Arial dan SunSans-Regular juga serupa dalam bentuk, dan bila tak ada satupun hal tersebut yang jalan, browser dapat memilih fonta lain tanpa serif. Dalam teks editor tambahkan baris-baris berikut:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Halaman dengan style saya yang pertama</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[dsb.]
Jika anda menyaimpan file tersebut lagi dan menekan “Reload” di browser, seharusnya ada fonta-fonta yang berbeda untuk heading dan teks lainnya. 
Sekarang teks utama telah memiliki fonta yang berbeda dari heading. Step 4: menambahkan batang navigasi
Daftar yang terletak di bagian atas halaman HTML dimaksudkan sebagai menu navigasi. Banyak situs Web memiliki sejenis menu di daerah atas atau di daerah samping halaman dan halaman ini juga harus memilikinya. Kita akan menaruhnya di sisi kiri, karena hal tersebut lebih menarik dari pada diatas… Menu sudah ada di halaman HTML. Daftar <ul> diatas adalah menu tersebut. Link-linknya belum bekerja, karena “situs Web” kita hingga saat ini hanya terdiri dari satu halaman, tetapi saat ini hal tersebut bukan merupakan masalah. Di situs Web sesungguhnya, tentunya tidak boleh ada link-link yang tidak berfungsi. Jadi kita perlu memindahkan daftar tersebut ke kiri dan memindahkan sisa textnya sedikit ke kanan, untuk memberikan tempat untuk daftar tersebut. Property CSS yang kita gunakan untuk itu adalah 'padding-left' (untuk memindahkan teks body) dan 'position', 'left' dan 'top' (untuk memindahakan menu). Ada cara-cara lain untuk melakukan hal tersebut. Bila anda mencari “column” atau “layout” di halaman Learning CSS, anda akan menemukan pola yang siap di pakai. Tetapi ini dapat kita gunakan untuk tujuan kita. Dalam jendela editor, tambahkan baris baris berikut pada file HTML (lines 7 and 12-16):<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Halaman dengan style saya yang pertama</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[dsb.]
Bila anda menyimpan file tersebut lagi dan menekan tombol reload di browser, anda sekarang seharusnya mempunyai daftar link disebelah kiri teks utama. Sekarang terlihat lebih menarik bukan? 
Teks utama dipindah ke sebelah kanan dan daftar link sekarang ada di sebelah kirinya, dan bukan diatas. 'position: absolute' menandakan bahwa elemen ul diposisikan tersendiri terpisah dari teks lain baik yang ada sebelum maupun sesudahnya di dokumen tersebut serta 'left' dan 'top' mengindikasikan apa posisi tersebut. Dalam kasus ini, 2em dari atas dan 1em dari sebelah kiri jendela. '2em' berarti 2 kali ukuran font yang sekarang. Contoh, bila menu ditampilkan dengan sebuah fonta berukuran 12 point, maka '2em' adalah 24 point. Unit 'em' sangatlah berguna pada CSS, karena hal tersebut bisa beradaptasi secara otomaris pada fonta yang digunakan oleh pembaca. Kebanyakan browser memiliki menu untuk memperbesar atau memperkecil ukuran fonta: anda bisa mencarinya dan melihat bahwa menu bertambah besar seiring dengan membesarnya fonta, dimana hal tersebut tidak akan terjadi bila anda menggunakan ukuran dalam pixel. Langkah 5: Memberi style pada link
Menu navigasi masih terlihat seperti daftar, dan bukan seperti menu. Mari menambahkan style padanya. Kita akan menghilangkan bullet pada daftar tersebut dan memindahkan item-item ke kiri, ketempat dimana bullet tersebut tadi berada. Kita juga akan memberi setiap item latar belakang berwarna putih dengan kotak hitam diluar. (Mengapa? Tidak ada alasan khusus, hanya kerena kita bisa melakukannya.) Kita juga menentukan warna apa yang akan diberikan pada link, jadi mari kita juga tambahkan hal tersebut: biru untuk link yang belum di lihat dan ungu untuk yang sudah dikunjunginya (lines 13-15 and 23-33):<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Halaman dengan style saya yang pertama</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[dsb.]
Secara tradisi, browser memperlihatkan hyperlink dengan garis bawah dan dengan warna. Biasanya, warnanya mirip dengan apa yang kita tentukan disini: biru untuk link yang belum anda kunjungi (atau sudah lama sekali dikunjungi), ungu untuk halaman-halaman yang anda sudah pernah lihat. Pada HTML, hyperlink dibuat dengan elemen <a>, sehingga untuk menentukan warna, kita perlu menambah sebuah aturan style untuk “a”. Untuk membedakan antara link yang sudah dikunjungi dan yang belum, CSS menyediakan dua pseudo-classes” (:link dan :visited). Mereka dinamakan “pseudo-classes” untuk membedakan mereka dari attribute class, yang ada dalam HTML, e.g., Dalam contoh kita class="navbar".Step 6: Menambahkan garis horizontal
Tambahan terakhir pada style sheet adalah sebuah garis horizontal untuk memisahkan teks dengan signature yang berada dibawah. Kita akan menggunakan 'border-top', untuk menambahkan garis yang terdiri dari titik-titik diatas elemen <address>:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Halaman dengan style saya yang pertama</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
[dsb.]
Sekarang style kita sudah lengkap. Selanjutnya mari kita lihat bagaimana kita dapat menaruh style sheet di file yang terpisah, sehingga halaman-halaman lain dapat menggunakan style yang sama. Step 7: Menaruh style sheet di sebuah file terpisah
Kita sekarang mempunyai sebuah HTML file dengan sebuah style sheet yang dibuat di dalamnya. Tetapi bila situs milik kita berkembang, kemungkinan kita menginginkan banyak halaman menggunakan style yang sama. Ada cara yang lebih baik daripada meng-copy style sheet ke setiap halaman: bila kita menaruh style sheet di sebuah style terpisah, semua halaman dapat mengarah padanya. Untuk membuat sebuah file style sheet, kita harus membuat sebuah teks file kosong yang lain. Anda bisa memilih “New” dari menu File di editor, untuk membuat sebuah jendala kosong. (Bila anda menggunakan TextEdit, jangan lupa untuk membuatnya menjadi file teks lagi, menggunakan menu Format.) Lalu cut dan paste segala sesuatu yang terdapat dalam elemen <style> dari file HTML ke dalam jendela baru. Jangan copy <style> dan </style>. Mereka meruupakan bagian dari HTML, dan bukan untuk CSS. Dalam jendela editor yang baru, anda sekarang sudah memiliki style sheet yang lengkap:body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Pilih “Save As…” dari menu File, pastikan bahwa anda berada di directory/folder yang sama dengan file halamanku.html, dan simpan style sheet tersebut dengan nama “styleku.css”. Sekarang balik ke jendela dengan kode HTML. Hapus segalanya dimulai dari tag <style> hingga dan termasuk tag </style> dan gantikan dengan sebuah elemen <link> element, seperti berikut: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Halaman dengan style saya yang pertama</title>
<link rel="stylesheet" href="styleku.css">
</head>
<body>
[dsb.]
Ini akan mangatakan pada browser bahwa style sheet dapat ditemukan di sebuah file bernama “styleku.css” dan karena tidak ada disebutkan nama direktori, browser akan akan mencarinya di direktori dimana file HTML ditemukan. Bila anda menyimpan file HTML dan menekan tombol reload di browser, anda tidak akan melihat adanya perubahan: halamannya akan tetap diberi style yang sama, tetapi sytle tersebut datang dari sebuah file external. 
Hasil akhir
Tidak ada komentar:
Posting Komentar