Hari ini, beberapa user multiply melaporkan guest booknya kena hack orang iseng. Sebenernya ini bukan kasus baru. Seperti yang ditulis caksafa dalam journalnya yang ini, dia juga juga pernah mengalami dan di journalnya yang ini, dia dia memperingatkan resiko kalo guest book dihack orang.

Gimana sih caranya meng-hack account multiply orang lain?

Gue nggak akan terlalu detail membahas ini ya, karena nanti malah bikin yang belum tau jadi iseng kepingin nyoba. Tapi prinsipnya sederhana banget, yaitu di box reply, si hacker menginput sebuah reply yang ukurannya luar biasa gede sehingga menutupi seluruh layar.

Analoginya, bayangkan ada sebuah buku tulis yang ditimpa / ditutupi dengan lembaran koran. Tentu aja buku tulisnya jadi nggak keliatan, kan?
Makanya seperti yang dibilang Jazman di journalnya yang ini, para 'hacker' yang berkeliaran di MP adalah hacker kelas pemula alias newbie yang lagi kegirangan jajal ilmu. Karena pada dasarnya teknik yang mereka lakukan adalah amat sangat sederhana: cuma menutupi sebuah halaman dengan tampilan lain, dan bukan melakukan kerusakan serius di tingkat server, misalnya.

Trus gimana solusinya?
Seperti gue bilang di atas, sebenernya halaman yang "di-hack" nggak pergi ke mana-mana, dia tetep ada di situ, hanya ketutupan oleh sebuah reply berukuran raksasa. Berhubung hackingnya tingkat newbie, maka solusinya juga sederhana aja, yaitu reply biang kerok tadi harus kita delete.

Kalau kita login ke multiply, kita punya wewenang untuk mendelete reply manapun yang ada di  account kita, kan? Caranya dengan mengklik 'delete' di box reply seperti gambar berikut ini:


Tapi, gimana caranya mengklik link 'delete' tersebut kalo halamannya ketutupan?

cara1: dengan memanfaatkan CSS
Ini trik dari Jazman, yaitu dengan mengakses custom CSS kita (klik di sini) dan menambahkan kode berikut:

#Layer1 {display:none;}

maka reply yang menutupi tadi akan hilang, sehingga box replynya tampil lagi dan bisa kita delete.

cara2: dengan memanfaatkan 'view source'
Cara ini mungkin terlihat lebih ribet dari triknya Jazman, tapi cocok buat yang koneksi internetnya lambat karena pada prakteknya hanya butuh 1 kali reload halaman - reply biang keroknya udah langsung terdelete.

Contoh kasus:
Mbotx abis ngeMPi secara baik-baik dan positif di warnet, tapi lupa logout sesudahnya. Ah, sial, ternyata user sesudahnya adalah hacker newbie sok tau, sehingga posting yang baru dibuatnya dihack menjadi seperti ini:


Alangkah terkejutnya Mbotx saat keesokan harinya melihat postingnya telah dirusak orang iseng. Untunglah, Mbotx adalah orang yang cinta damai dan tidak suka koar-koar, tantang-menantang, ataupun menyulut keributan seperti user yang satu ini. Dengan kepala dingin, Mbotx mengambil langkah-langkah berikut:

1. Menyorot / men-select dan mengcopy (dengan menekan 'ctrl+C') salah satu kata yang ditulis oleh si hacker. Yang diselect bisa kata mana saja, tapi sebagai contoh dalam kasus ini yang dipilih adalah kata "H A C K E D" di bagian awal pesan yang ditulis si hacker.


2. Habis itu si Mbotx menekan tombol mouse kanan dan memilih 'view source...' atau bisa juga dengan mengklik 'view' pada toolbar internet browsernya dan memilih 'source'. Maka terbukalah sebuah window baru berisi kode2 ajaib yang merupakan 'jeroan' alias 'onderdil' dari halaman MP-nya.

3. Setelah source halaman yang dihack terbuka, Mbotx menekan tombol 'ctrl+F' untuk mengaktifkan fungsi search. Di kotak search, dia mem-paste (dengan menekan 'ctrl+V') kata "H A C K E D" yang tadi telah dicopynya, dan menekan tombol 'Enter'. Bingo! Dia berhasil menemukan kata yang dicarinya:


3. Setelah berhasil menemukan lokasi reply si biang kerok, Mbotx menyorot / menselect kata tersebut dari KANAN ke KIRI. Tujuannya untuk menemukan kode 'delete' reply tersebut. Hasilnya seperti ini:
 
4. Setelah berhasil menemukan kode untuk mendelete, Mbotx meyorot / menselect, kali ini dari KIRI ke KANAN untuk mengcopy seluruh kode tersebut.


Kode yang berhasil di dapatkannya berbunyi kurang lebih sebagai berikut:

'javaxript:confirmLink("Are you sure you want to delete this reply?", "/item/delete-reply/mbotx:journal:2+1? xurl=http%3A%2F%2Fmbotx.multiply.com %2Fjournal%2Fitem%2 F2&usertoken= U2FsdGVkX189tB3g YXpU3dQF9, i7S7X1j0kHx Oe64Wa VCIRGlR4I0A=="

Kode ini bersifat random, jadi akan selalu berbeda-beda dari satu user ke user lainnya, juga berbeda dari satu reply ke reply lainnya.

Supaya nggak pusing, Mbotx mempaste kode yang mirip ketikan seorang balita saat ditinggal main laptop sendirian tersebut ke program notepad. Dia lantas membuang bagian yang nggak perlu, dan menyisakan bagian yang penting saja yaitu mulai dari tulisan "/item/delete... sampai dengan bagian terakhir sebelum tanda kutip yaitu ...I0A=="

Ingat! Patokannya adalah tanda kutip, tapi tanda kutipnya nggak perlu diikut sertakan. Sehingga kode yang berhasil didapatkan oleh Mbotx adalah:

/item/delete-reply/mbotx:journal:2+1? xurl=http%3A%2F%2Fmbotx.multiply.com %2Fjournal%2Fitem%2 F2&usertoken= U2FsdGVkX189tB3g YXpU3dQF9, i7S7X1j0kHx Oe64Wa VCIRGlR4I0A==

Kode ini adalah link, yang bila diakses akan menghapus reply si biang kerok. Untuk membuat link tersebut berfungsi, Mbotx menambahkan domain-nya, yaitu alamat account multiplynya sehingga kodenya sekarang menjadi

mbotx.multiply.com/item/delete-reply/mbotx:journal:2+1? xurl=http%3A%2F%2Fmbotx.multiply.com %2Fjournal%2Fitem%2 F2&usertoken= U2FsdGVkX189tB3g YXpU3dQF9, i7S7X1j0kHx Oe64Wa VCIRGlR4I0A==

5. Mbotx mengcopy kode tersebut ke address bar internet browsernya:

dan dengan menekan tombol 'Enter' maka terhapuslah reply hacker newbie tersebut. Tapi TUNGGU DULU! Mbotx berpikir lagi, pengalaman ini bisa menjadi tips yang bermanfaat bagi para user lainnya, sehingga ia tidak jadi menekan tombol 'Enter' dan tetap membiarkan posting yang dihack itu seperti apa adanya di sini.

Semoga bermanfaat
Pesan Sponsor:

ntah kenapa gue tergila-gila pada animated button di web. Itu lho, efek di mana sebuah button akan melakukan sesuatu bila di-"senggol" (mouse over) dengan pointer. Di CSS MP, efek animated button bisa dilakukan dengan mengubah-ubah setting pada class .topt dan .toptsel*. Sialnya, pada salah satu perubahan yang dilakukan oleh MP entah kapan, class .topt dan .toptsel di MP gue menghilang. Itulah sebabnya gue akal2an bikin button sendiri di sebelah kanan, walaupun nggak sesempurna efek menggunakan class .topt dan .toptsel yang asli.
Bedanya adalah, pada MP yang punya class .toptsel, posisi halaman yang sedang aktif ditunjukkan pada button. Maksudnya gini: kalo elo lagi buka blog, maka tombol blog akan "aktif" dan berbentuk / berwarna beda dengan tombol lainnya.

Waktu itu gue udah berusaha nyari ke mana perginya class .topt dan .toptsel gue, tapi nggak ketemu sehingga "ya sudahlah" pikir gue. Tapi belakangan waktu regular account juga udah bisa make theme di MP, gue mulai bertanya-tanya lagi.

Yang menarik perhatian gue adalah: semua theme tersebut memiliki class .topt dan .topsel, tapi dengan posisi yang berbeda-beda! Coba deh buka2 daftar template theme di sini. Perhatiin letak tombol2nya. Ada yang di atas, dan ada yang di samping, kan?

Tadinya gue kira semua theme di MP memiliki struktur HTML yang sama, cuma CSS-nya doang yang beda, ternyata enggak - antara satu theme dengan lainnya terdapat perbedaan struktur HTML juga.

Rasa penasaran gue jadi bangkit lagi, apalagi dengan masuknya sebuah personal message dari user myhaura yang menanyakan soal tombol. Maka, mumpung hari ini gue "libur", sekalian aja gue bongkar ulang site MP gue, tentunya dengan memanfaatkan account dummy mbotx buat rusak2an. Biar kalo gagal nggak mengacaukan account gue yang ini, gitu loh.

Pertama-tama gue pasang theme "myokonos" di account mbotx. Gue view source, dan di bagian head ternyata ada 4 file CSS yang berfungsi secara bersamaan di sana. Dua file CSS yang pertama nggak penting, itu adalah file CSS basic untuk mengatur fungsi2 dasar di MP. Yang menarik adalah 2 file CSS yang terakhir dengan susunan sebagai berikut:

<link rel="stylesheet" type="text/css" href="http://multiply.com/style/custom/mykonos/5.css">
<link rel="stylesheet" type="text/css" href="http://mbotx.multiply.com/style-custom/mbotx/73/custom.css">

Artinya, bila kita menerapkan sebuah theme DAN mengcustomize CSS dari sini, maka KEDUA file CSS tersebut akan berfungsi secara bersamaan, dengan CSS custom kita dalam posisi mengoverride / menimpa CSS theme!

Maksudnya gini: dalam CSS ada prinsip 'inherit' atau 'turunan / warisan'. File CSS yang atas menurunkan perintahnya ke file CSS yang bawah BILA di file CSS yang bawah tidak ada perintah yang serupa. Sedangkan bila ada 2 perintah yang sama, maka file CSS yang bawah yang akan berlaku. Ih ribet ya? Mending pake contoh kali ye...

Contohnya, kita punya sebuah file html yang diatur dengan file CSS A dan file CSS B secara bersamaan.

Bila di file CSS A yang letaknya lebih di atas ada perintah sbb:

body {
font-size: 10pt;
line-height: 150%;
font-family: tahoma
}

yang artinya: seluruh tulisan di body akan berukuran 10pt dengan 1.5 spasi dan huruf tahoma.

Maka bila kita mau mengubah bentuk hurufnya DOANG menjadi arial tapi membiarkan seluruh setting lainnya, maka kita nggak perlu mengutak-atik file CSS A. Cukup di file CSS B yang terletak di bawah file CSS A kita masukkan perintah sbb:

body {
font-family: arial
}

sedangkan perintah lainnya seperti spasi dan ukuran font akan mengikuti perintah yang tercantum di file CSS A karena perintah2 tersebut diturunkan / diwariskan (inherited) dari file CSS A ke file CSS B.

Dengan demikian memodif tampilan MP sebenarnya bisa menjadi (relatif) mudah yaitu cukup dengan menerapkan sebuah theme dan menambahkan modifikasi di bagian2 yang mau kita ubah melalui link custom CSS. Kenapa gue bilang "relatif" mudah? Karena ternyata untuk melakukannya menghabiskan waktu seharian juga sih, krn bolak-balik salah dan kacau... hehehe... tapi at least langkah ini jauh lebih mudah daripada menyusun file CSS dari nol yang disesuaikan dengan puluhan class yang berlaku di MP.

Sebagai contoh, gue mengubah gambar background header yang tadinya berbentuk seperti ini:

yang di file CSS theme dilengkapi dengan perintah seperti ini:

div.owner_nav {
    border: none;
    margin: 0 auto;
    margin-top: 20px;
    height: 310px;
    height: 280px;
    width: 680px;
    border: 5px solid #fff;
    border-bottom: none;
    padding: 10px 20px 0 0;
    background-color: none;
    background: url(http://images.multiply.com/multiply/style/mykonos/top2.jpg) no-repeat top left;
    background-position: 0 -100px;
}

menjadi seperti ini:


dengan cara menambahkan perintah berikut di file CSS yang custom:

div.owner_nav {   
background: url(http://images.mbot.multiply.com/image/1/photos/upload/orig/3708.274228/1.jpeg?et=OvKYyesPrZ5qiNqw16lxTg) no-repeat bottom left;   
}

Sedangkan masalah ukuran, setting font, margin dan padding serta segala tetek-bengek yang ribet2 itu nggak gue utak-atik sama sekali - cukup gue ganti elemen yang perlu-perlu aja. Nggak lupa tentunya class .topt dan .toptsel favorit gue itu, gue tambahin background image yang bisa berubah-ubah.

Hasilnya, MP gue sekarang punya tampilan baru yang jauh lebih rapi ketimbang tampilannya yang lama dan secara "relatif" lebih gampang.

Ada yang tertarik mencoba? :-)

*.topt adalah class untuk tombol navigasi dalam kondisi normal, dan .toptsel adalah tombol navigasi yang sedang aktif (dibuka).

Di posting tutorial CSS sebelumnya, kita udah mencoba membuat halaman HTML dengan kode seperti ini: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 120%;
}

h1 {
color: red;
font-variant: small-caps;
}

.berita {
background:  #ffffcc;
border: 2px dashed #99333;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<div class="berita"><p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p></div>

</BODY>
</HTML>

Yang  berakibat munculnya dokumen yang berwajah seperti ini: 

Tapi problemnya, isi tulisan terlalu mepet dengan pinggir, jadi kurang nyaman dibaca. Untuk mengatasinya, kita berkenalan dengan satu perintah CSS yang bernama padding.

Padding adalah jarak dari pinggir tulisan ke pinggir kotak - dalam konteks elemen <div> ya berarti dari tulisan menuju bagian pinggir dari area <div> tersebut. Dengan demikian, jarak yang ditentukan dalam padding mempengaruhi sebuah area dari 4 penjuru, yaitu atas, kanan, bawah, dan kiri. Satuannya, seperti biasa, bisa menggunakan satuan yang absolut maupun relatif seperti yang udah pernah dibahas di sini.  

Beberapa alternatif penulisan perintah padding 

Misalnya kita mau mengatur padding untuk sebuah class, maka kita bisa menuliskan padding secara borongan seperti ini:

.namaclass {
padding: 5px;
}

Artinya, class tersebut akan memiliki jarak yang sama rata sebesar 5px ke empat penjuru sisinya (atas, kanan, bawah, dan kiri). 

Tapi kalo kita mau mengatur padding yang berbeda-beda untuk keempat sisi yang mengelilingi area tersebut, bisa kita tuliskan seperti ini: 

.namaclass {
padding: 5px 10px 5px 10px;
} 

Perhatikan ada 4 angka yang kita masukkan ke dalam perintah tersebut. Itu adalah besaran padding searah jarum jam, mulai dari padding atas. Jadi perintah di atas berarti: di bagian atas ada padding 5px, di sebelah kanan 10px, di bawah 5px, dan di sebelah kiri 10px. 

Padding juga bisa diatur untuk bagian tertentu aja, misalnya untuk bagian atas aja, kanan aja, bawah aja, atau kiri aja. Perintahnya jadi padding-top, padding-right, padding-bottom, dan padding-left. Contoh penggunaannya seperti ini: 

.namaclass {
padding-left: 5px;
} 

Kutipan seperti di majalah: berkenalan dengan panjang, lebar, posisi dan margin

Dengan CSS, kita juga bisa mengatur peletakan sebuah area sehingga saling bertumpuk dengan area lainnya. Trik ini berguna kalo misalnya kita mau bikin sebuah kotak kutipan seperti yang sering kita lihat di majalah. Perintahnya adalah seperti ini:

.namaclass {
position: relative;
float: left / right;
}

Sedangkan untuk mengatur dimensi kotak kutipan yang hendak kita bikin, kita bisa menggunakan perintah width atau height atau dua-duanya sekaligus. Contoh pengaturan lebar aja : 

.namaclass {
width: 200px;
}  

Contoh pengaturan lebar dan tinggi:

.namaclass {
width: 200px;
height: 150px;
}  

Namanya kotak kutipan, tentunya jelek kalo terlalu berhimpit dengan kotak di sebelahnya. Maka kita perlu mengatur margin. Margin adalah kebalikan dari padding; kalo padding mengatur jarak tulisan di DALAM area dengan batas pinggir area, sedangkan margin mengatur jarak antara batas pinggir area dengan sisi-sisi di LUAR-nya. Margin juga bisa diatur secara satuan maupun borongan seperti padding. 

Contoh penggunaan margin secara borongan: 

.namaclass {
margin: 10px;
}

Praktek

Nah, sekarang kita akan menerapkan pembahasan hari ini ke dalam naskah berita "maling sarung". Gue akan mengutip pembelaan diri dari si MBT, maling sarungnya, ke sebuah kotak yang terletak di sebelah kanan paragraf ke dua. Kutipan akan gue kasih class "kutip" dengan background abu-abu. Kode lengkapnya adalah sebagai berikut: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 120%;
}

h1 {
color: red;
font-variant: small-caps;
}

.berita {
background:  #ffffcc;
border: 2px dashed #99333;
padding: 5px;
}

.kutip {
font-family: arial;
color: #555555;
line-height: 100%;
font-size: 12pt;
font-weight: bold;
padding: 5px;
text-align: right;
width: 150px;
float: right;
position: relative;
margin: 10px;
background: #ccccccl;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<div class="berita"><p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<div class="kutip">"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini"</div>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p></div>

</BODY>
</HTML>

Hasilnya adalah dokumen seperti ini:

Posting berikutnya adalah posting tips n trik CSS dasar yang terakhir, yaitu tentang gimana cara mengaplikasikan CSS di MP. Nggak seperti pembuatan CSS di dokumen HTML yang kita buat sendiri dari awal, di MP kita harus membalik prosesnya: mencari class2 yang digunakan di sini, dan mengubah atributnya. Jangan lupa juga, prinsip perintah turunan akan sangat berpengaruh karena kita juga harus 'menetralisir' perintah2 yang nggak ingin kita munculkan. 

Untuk lengkapnya, kita bahas lebih lanjut di posting berikut aja deh ya...    

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS
Memformat font pake CSS
Link yang bling-bling
Semua, tapi jangan semua deh!
CSS tutorial: jurus pamungkas (bag.1)

---

Iklan baris:
      

ari 5 posting tentang CSS sebelumnya, praktis kita udah ngebahas hampir semua jurus dasar yang diperlukan untuk bikin sebuah dokumen HTML ber-CSS. Ini adalah bagian pertama dari 2 posting penutup jurus2 CSS dasar sebelum gue ngebahas tentang cara make CSS di MP. Di sini kita akan praktekin hampir semua materi yang udah pernah kita bahas, PLUS beberapa materi tambahan tentang background dan border. 

So, guys, buckle-up, this is going to be an exciting journey!!     

Kita mulai dengan sebuah dokumen HTML sederhana yang kodenya seperti ini: 

<HTML>
<HEAD>

</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>
<p>AN alias MBT (33th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p>

</BODY>
</HTML>

Hasilnya adalah sebuah dokumen HTML yang bentuknya seperti ini: 

Sebuah dokumen HTML yang nampak biasa-biasa aja, bukan? Mari kita hias sedikit dengan beberapa jurus CSS. 

1. Bentuk dan ukuran huruf. Dengan perintah yang udah pernah kita bahas di sini dan di sini gue mengubah bentuk dan ukuran huruf dasarnya menjadi verdana 11pt. 
2. Warna dan varian huruf. Biar judulnya makin ngejreng, elemen <h1> alias heading dengan warna merah dan varian small-caps. Jurus yang ini pernah dibahas di sini.   
3. Tinggi spasi. Yang ini belum pernah dibahas sebelumnya. 
   Biar tulisan lebih nyaman dibaca, kita juga bisa mengatur tinggi spasi dengan perintah line-height. Satuan ukurannya bisa pake satuan absolut maupun relatif seperti yang dibahas di sini. Untuk contoh ini, gue pake line-height setinggi 150% alias 1.5 spasi. 
4. Alignment. Dengan perintah ini kita bisa menentukan apakah sebuah paragraf akan rata kiri (text-align: left), rata kanan (text-align: right), rata tengah (text-align: center), atau rata kanan-kiri (text-align: justify).

Perintahnya akan berbentuk seperti ini: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 150%;
text-align: justify
}

h1 {
color: red;
font-variant: small-caps;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p>

</BODY>
</HTML>

Sehingga akan menghasilkan dokumen seperti ini: 

Tapi... masih kurang seru ya? Gimana kalo kita kasih background warna? Ya udah, sekalian kita bahas tentang penggunaan "class" pada elemen <div>!

Pentingnya <div> dalam CSS

Elemen <div> adalah salah satu elemen HTML yang besar banget peranannya dalam ber-CSS-ria karena sifatnya yang mem-"blok" sebuah area berbentuk kotak dalam sebuah dokumen HTML, sehingga cocok untuk dihias-hias dengan background atau border. Kalo mau liat contohnya, buka deh review gue tentang filmnya Project -P di sini. Kotak-kotak kuning di sana gue buat dengan perintah <div>. 

Background

Sebelumnya gue jelaskan dulu bahwa perintah "background" dalam CSS nggak cuma bisa diterapkan ke elemen <div> doang lho ya. Ke elemen lain juga bisa. Contohnya ke elemen <span> yang pernah gue bahas di sini. Tapi berhubung <div> akan membentuk bidang kotak, maka background yang kita terapkan di sana, khususnya yang berbentuk gambar, akan terlihat lebih bagus. 

Kita bisa pake background warna seperti ini: 

background: #ffffcc; (kuning muda);

atau bisa juga dengan gambar. Tentunya gambar yang bisa dipake adalah yang udah disimpen / dihost di online image hosting seperti photobucket atau imageshack misalnya. Nanti yang dimasukkan dalam perintah CSS-nya adalah link menuju gambar yang udah online tadi seperti ini: 

background: url(http:⁄⁄linkmenujugambaryangudahonline);

Border

Perintah "border" digunakan untuk memberi garis pinggir kepada sebuah elemen HTML. Perintah yang terkait dengan perintah border adalah  ketebalan, warna, dan jenis garis.  

Ketebalan, seperti biasa pake ukuran-ukuran yang pernah kita bahas di sini. 

Warna, juga pake kode atau nama warna yang pernah kita bahas di sini. 

Jenis garis: ada enam jenis garis yang sering gue liat muncul di MP yaitu solid (garis lurus biasa) dashed (berupa potongan-potongan garis pendek) dotted (berupa titik2), double (dua garis ganda), inset (garis dengan efek kedalaman, bikin area kotak nampak sedikit 'masuk') dan outset  (garis dengan efek kedalaman, bikin area kotak nampak sedikit 'timbul'). 

Contoh perintahnya adalah seperti ini:

border: 1px solid #aaaaaa; 

Yang dalam bahasa manusia berbunyi: 

border memiliki ketebalan 1 px, berupa garis lurus, dan berwarna abu-abu. 

Menerapkan perintah background dan border

Percuma ngomongin teori sampe berbusa kalo nggak dipraktekin. Sekarang  kita coba praktekin perintah2 background dan border ke dalam berita pencurian sarung.        

Pertama-tama, gue rencanakan dulu bahwa isi berita akan gue kasih "class" bernama .berita (tentang penggunaan class bisa dibaca di sini).  "Class" bernama .berita ini punya format sbb:

• background warna kuning muda (#ffffcc)
• dikelilingi border dashed setebal 1px berwarna coklat muda (#993333)

Maka gue memasukkan class .berita ke dalam kode style seperti ini: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 120%;
}

h1 {
color: red;
font-variant: small-caps;
}

.berita {
background:  #ffffcc;
border: 2px dashed #99333;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p>

</BODY>
</HTML>

Perhatikan, di depan nama "class" selalu ada titik. Setelah menyiapkan class-nya, gue tambahkan elemen div yang mengacu pada class tersebut di dalam body, seperti ini: 

<HTML>
<HEAD>

<STYLE>

body {
font-family: verdana;
font-size: 11pt;
line-height: 120%;
}

h1 {
color: red;
font-variant: small-caps;
}

.berita {
background:  #ffffcc;
border: 2px dashed #99333;
}

</STYLE>
</HEAD>

<BODY>

<h1>Maling Sarung Dihakimi Massa.</h1>

<div class="berita"><p>AN alias MBT (33 th) pemuda pengangguran di kampung Dukuh Wetan, kemarin babak belur setelah ketahuan mencuri sarung milik pak RT. Massa yang terbakar emosi menghujani AN dengan bogem mentah dan benda-benda keras lainnya. Nyawa AN nyaris melayang bila tidak segera diselamatkan oleh seorang anggota kepolisian yang kebetulan lewat. </p>

<p>"Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini," kliah AN mencoba membela diri di kantor polisi. Ungkapan ini langsung ditukas secara emosional oleh korban (dalam hal ini pak RT sendiri), "Ya tapi lu kira-kira dong, masa sarung lagi dipake mau lo sikat juga!?"</p>

<p>AN kemungkinan akan dikenakan pasal pencurian, pencemaran nama baik serta perbuatan asusila di muka umum.    </p></div>

</BODY>
</HTML>

Maka, lo akan mendapatkan dokumen yang berbentuk seperti ini: 

Gimana, makin meriah kan beritanya? 

Tapi... coba deh perhatiin: dari tulisan ke garis pinggir terlalu mepet, kurang enak diliat. Untuk mengatasinya, kita perlu menambahkan perintah padding / margin. Tentunya nggak akan kita bahas sekarang, pertama karena posting ini udah terlalu panjang, ke dua- karena gue juga udah pegel ngetik! Jadi untuk sementara silakan dicoba2 dulu  jurus2 background dan border ini, ya! 

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS
Memformat font pake CSS
Link yang bling-bling
Semua, tapi jangan semua deh!

---

Iklan baris:
      

alo ngomongin CSS, maka kita berurusan dengan format yang berlaku di seluruh halaman. Misalnya lo udah tentuin <body> menggunakan font tahoma 9pt, maka di seluruh halaman dia akan muncul sebagai tahoma berukuran 9pt.

Tapi gimana kalo kita mau memformat sebagian halaman dengan formatting yang sama sekali beda?

Nggak masalah. Inget kan definisi CSS sebagai "CASCADING" style sheet? Nah, kita sekarang akan mulai memanfaatkan segi ke-CASCADING-annya di mana kita akan melakukan formatting secara bersusun, format suatu bagian menjadi mengikuti (atau justru bertentangan) dari format bagian lainnya. Di sini kita akan berkenalan dengan yang namanya atribut "class".

Dengan perintah "class" kita bisa menentukan bagian-bagian dalam CSS yang memiliki formatting khusus, mulai dari ukuran, jenis font, font-style, pokoknya semua deh!

Untuk membuat perintah class, kita cukup ngarang nama sendiri yang dituliskan setelah titik (.). Syaratnya, nama tersebut nggak boleh mengandung spasi dan karakter khusus (!, #, @, dsb). Cukup beri nama dengan huruf dan angka aja.

Contohnya, gue bikin class di CSS bernama "highlight" dengan perintah seperti ini:

.highlight {

font-size: 1.2em;

font-weight: bold;

color: red;

} 

Perintah CSS seperti ini, kalo diterjemahkan dalam bahasa manusia berarti:

Bagian yang gue kasih class "highlight", ukurannya akan jadi 1.2 kali lebih besar dan hurufnya bold.

 

Gimana cara menggunakan CSS class?

Caranya adalah dengan menambahkan perintah "class =[nama class]" ke dalam elemen-elemen HTML kita.

Misalnya, kita punya sebuah artikel yang kita format dengan kode HTML seperti ini:

<html>

<head>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p>tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.  

</body>

</html>

Dengan elemen HTML seperti itu, maka hasilnya akan seperti ini:

Sebuah dokumen HTML sederhana yang terdiri atas 2 paragraf. Nah, sekarang, kita mau buat tambahkan kode <style> yang memuat class highlight dengan perintah-perintah font 1.2em, bold, berwarna merah seperti yang udah gue tuliskan sebelumnya menjadi seperti ini: 

<html>

<head>

<style>

.highlight {

font-size: 1.2em;

font-weight: bold;

color: red;

} 

</style>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p>tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.  

</body>

</html>

Habis itu kita tentukan bahwa paragraf ke dua adalah paragraf dengan kelas "highlight" seperti ini:

<html>

<head>

<style>

.highlight {

font-size: 1.2em;

font-weight: bold;

color: red;

} 

</style>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p class="highlight">tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.  

</body>

</html>

Cukup masukkan nama class tanpa titik di depannya. Maka hasilnya akan menjadi seperti ini:

Class ini bisa kita tempel ke elemen-elemen HTML lainnya. Misalnya kita membuat list daftar peristiwa yang terjadi setelah muka pak kusir kita duduki dan list tersebut hendak kita beri kelas "highlight" maka perintah yang kita tulis adalah seperti ini: 

<html>

<head>

<style>

.highlight {

font-size: 1.6em;

font-weight: bold;

color: red;

} 

</style>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p>tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.  

<p>Adapun yang terjadi sebagai akibatnya adalah:

<ul class="highlight">

<li>Jalannya kuda menjadi melintir</li>

<li>Pak Kusir menjadi panik</li>

<li>Ayah menjadi panik</li>

<li>Sejak itu aku tak pernah diajak ayah pergi ke kota lagi</li>

</ul>

</body>

</html>

Akan menghasilkan dokumen HTML yang berwujud seperti ini:

Penggunaan perintah "class" ini sangat penting dalam dunia per-MP-an, krn MP penuh dengan class-class yang saling bertumpang tindih satu dengan lainnya. Sebagian "class" yang pernah gue temukan di MP gue posting di sini, tapi waktu itu gue masih belum bisa membedakan antara elemen HTML dan class sehingga campur aduk begitu, hehehe....

Pada posting berikutnya, gue akan menjelaskan bagaimana cara memanfaatkan "class" yang diterapkan pada elemen "div" untuk menciptakan wilayah-wilayah dalam HTML - seperti kotak abu-abu yang gue pake untuk memajang contoh di atas. Atau, ada yang udah bisa?

Tantangan (bukan latihan)
Coba manfaatkan perintah class pada div untuk membuat kotak berbackground gambar! 

 

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS
Memformat font pake CSS
Link yang bling-bling

Image untuk background gue dapat dari sini.
Image utama, seperti biasa dari picturequest.com

 

---

Iklan baris:
      

Satu-satunya elemen CSS yang bisa punya 3 kondisi berbeda adalah hyperlink atau demi kenyamanan pengetik* selanjutnya akan disingkat menjadi "link" aja. Elemen <body>, misalnya, begitu ditetapkan di CSS untuk berwarna ijo dan berukuran 8pt akan terus berwarna ijo dengan ukuran 8pt di seluruh halaman (kecuali kalo diubah di bagian tertentu menggunakan perintah berbasis HTML). Sedangkan link, yang kode HTML-nya adalah <a href="http://blablabla"> siap untuk dibedakan menjadi 3 kondisi yaitu:

1. Kondisi awal, dengan perintah "a"
2. Kondisi saat lagi di-mouse-over / disenggol-senggol menggunakan ujung mouse-pointer, dengan perintah "a:hover"
3. Kondisi saat link udah pernah diceklik / dikunjungi, dengan perintah "a:visited"

Ketiga kondisi ini bisa kita atur berbeda satu dengan lainnya dengan perintah di CSS, dan yang gue maksud di sini bener-bener bisa beda buangeeet - terserah selera kita. Ekstrimnya, bisa aja kita buat link yang belum diceklik berukuran raksasa, misalnya 20pt, saat di-mouse-over mengkerut jadi 8pt; dan setelah pernah dikunjungi jadi berukuran 30pt. Bebas-bebas aja. Atau bisa juga dibedakan berdasarkan parameter-parameter font lainnya, misalnya saat belum diceklik ada garis bawah (underline) tapi saat dimouse-over garis bawahnya hilang. Terserah si pembuatnya. 

Selain nampak lebih menarik, perbedaan 3 kondisi link juga membantu para pengunjung untuk mengingat link mana aja yang udah pernah dia klik. Tapi gue sarankan, sebaiknya ketiga kondisi link ini nggak dibedakan dari segi ukuran, baik dari segi "font-size" maupun "font-weight"-nya. Kenapa? Karena perbedaan ukuran yang terlalu drastis akan bikin seluruh halaman menjadi "goyang" sehingga kurang rapih saat perbedaan kondisi tersebut terjadi. Misalnya, bayangin kalo contoh yang ada di alinea sebelumnya, di mana link berukuran 20pt bisa mengkerut ke 8pt saat di-mouseover, akan membuat tulisan-tulisan di bagian lainnya bergeser akibat selisih ukuran tersebut. Efek seperti ini akan cukup 'annoying' bagi para pengunjung. 

Ok biar lebih jelas kita lanjut ke contoh aja deh. 

Gue membuat perintah CSS sebagai berikut: 

a {
color: green;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
a:visited {
color: navy;
text-decoration: none;
}

Perintah CSS di atas, dalam bahasa manusia berbunyi: 

Setiap hyperlink akan berwarna hijau tanpa garis bawah, tapi kalo di-mouseover akan berubah warna menjadi merah dan ada garis bawahnya, serta nanti kalo udah diceklik akan berwarna biru tua tanpa garis bawah. 

Hasilnya adalah seperti yang tercantum di kotak kuning di bawah ini. Linknya berada di tulisan "VCO". Coba mouse-over dan klik untuk ngeliat perbedaan efeknya!

Latihan:
Coba buat efek ukuran yang ekstrim untuk ketiga kondisi link, dan lihat sendiri dampaknya terhadap kerapihan tampilan web yang lo buat.      

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS
Memformat font pake CSS

    

*yaitu gue sendiri

foto seperti biasa dari picturequest.com, udah dimodifikasi warna dan animasinya. 

---

Iklan baris:

      

Diganti jenisnya: udah.
Diganti ukurannya: udah.
Bisa diapain lagi ya, font-font ini?

Berikut ini adalah beberapa perintah formatting font yang gue tau. Mungkin ada juga yang lainnya, kalo ada yang kelewat, tolong kasih tau gue ya…!

Font-style: bisa diisi dengan "normal" atau "italic"*.
Contoh penggunaan, dikombinasikan dengan perintah mengubah jenis dan ukuran huruf yang udah pernah kita bahas sebelumnya:

b {
font-family: verdana;
font-size: 1em;
font-style: normal;
}

Font-variant: bisa diisi dengan "normal" atau "small-caps". Buat yang belum familiar dengan istilah "small-caps", ini adalah tipe penulisan di mana nggak ada huruf kecil yang muncul. Seluruh huruf yang ditampilkan adalah huruf kapital, cuma beda ukurannya doang.Di awal kalimat akan muncul huruf kapital berukuran besar, sedangkan sisanya huruf kapital yang kecilan dikit.
Bingung?
Hm…gimana kalo elo coba sendiri bikin CSS dengan font-variant small-caps? Penulisan perintahnya adalah sebagai berikut:

h1 {
font-variant: small-caps;
}

Font-weight: adalah seberapa bold; atau seberapa tebal; font yang akan kita pake. Lo bisa pake satuan angka, atau tulisan.
Kalo elo mau pake satuan angka, rangenya mulai dari 100 (yang paling tipis) hingga 900 (yang paling tebel). Font yang 'normal' punya font-weight 400, sedangkan tingkat 'bold' yang selama ini sering kita liat punya font-weight 600. Gue udah coba, nomer yang dipake untuk menentukan font-weight ini hanya mengenal nuansa per 100 poin. Jadi kalo lo masukin nilai 435 (misalnya), nggak akan ngaruh di tampilan akhir nanti. Dengan demikian hanya ada 9 derajat ketebalan font yang mungkin ditampilkan. Selain itu perlu dicatat bahwa nggak semua font menyiapkan diri untuk menampilkan 9 derajat ketebalan, jadi jangan heran kalo pas lo coba nanti ada beberapa font yang cuek nggak bergeming saat lo masukin font-weight tertentu.
Cara lainnya untuk menentukan font-weight adalah dengan nulis, "normal" atau "bold".
Contoh penggunaan perintah font-weight ini adalah sebagai berikut:

-Dengan satuan angka:

body {
font-weight: 600;
}

-Dengan tulisan:

body {
font-weight: bold;
}

Text-decoration: ya… dekorasi penghias tulisan… bisa diisi dengan:
· "underline" (garis bawah)
· "overline" (garis di atas font)
· "line-through" (garis tengah /coret)
· "blink" (kedip)
Khusus untuk yang blink, gue coba di Firefox muncul, di IE nggak muncul. Nggak tau ya kalo pake browser yang lainnya. Memang begitulah sifat para browser itu, suka kurang kompak satu dengan lainnya. Dan sebagai himbauan dari gue pribadi, tolong penggunaan fungsi 'blink' ini agak sedikit direm ya… jangan dipake untuk elemen <body> misalnya; karena nanti seluruh halaman web lo akan kedip-kedip bikin senewen. Kan pusing orang liatnya.
Contoh penggunaan text-decoration:

i {
text-decoration: underline;
}

Color: last but not least, memformat warna.
Untuk memformat warna, cukup dengan perintah "color" aja. Untuk warna-warna dasar, bisa dengan ditulis namanya seperti ini:

body {
color: red;
}

Sayangnya cuma ada 16 nama warna yang setau gue bisa dikenali oleh perintah CSS, yaitu:

1. aqua
2. black
3. blue
4. fuchsia
5. gray
6. green
7. lime
8. maroon
9. navy
10. olive
11. purple
12. red
13. silver
14. teal
15. white
16. yellow

Jadi kalo elo kepingin bikin warna yang di luar warna dasar seperti ijo kendondong, abu-abu bulu monyet, merah bengep atau ungu busuk, lo harus bikin campuran sendiri berdasarkan hex-code.
Contoh penggunaannya seperti ini:

body {
color: #ff0000;
}

Kode warna #ff0000 itu adalah kode untuk warna merah, jadi baik lo masukkan perintah "color: red" maupun "color: #ff0000" hasilnya akan sama.
Lebih lanjut tentang hexcode bisa diklik di journal gue yang ini.

Latihan:
Coba buat CSS yang melibatkan seluruh perintah format font yang dibahas di sini. Coba kombinasikan masing-masing perintahnya untuk ngeliat perbedaan-perbedaan yang ditimbulkannya.

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS

*sebenernya selain 2 pilihan itu, ada lagi yang namanya "oblique". Tapi fon-style oblique ini nampak mirip banget dengan font yang italic, jadi kayaknya nggak terlalu penting untuk dipikirin.

---

Iklan baris:

i tutorial sebelumnya kita udah belajar ngeformat font di CSS. Sekarang, kita akan fokus ngebahas tentang ukuran-ukuran di CSS.
Karena tugas CSS adalah mengatur seluruh tampilan web, tentunya dia harus punya satuan ukuran sendiri. Kegunaannya, antara lain menentukan ukuran font yang mau ditampilkan. Atau untuk mengaturluas area, posisi, margin dan padding yang akan kita bahas belakangan. 

Ada 2 jenis satuan di CSS; yang absolut dan yang relatif. 

??Heeeh...???

Jadi gini. Coba deh lo liat toolbar internet browser lo, ada tulisan "View" kan? Klik di situ, liat kan ada setting untuk"font-size"; mulai dari "smallest" sampe "largest"?

Nah, kalo elo berkunjung ke sebuah situs yang make CSS dengan satuan yang relatif, elo bisa mengubah-ubah ukuran huruf yang tampil dengan mengklik menu "view" > "font size" tadi itu. Kalo lo rasa kekecilan, lo bisa geser ke arah "larger" atau "largest". Kalo lo rasa kegedean, lo bisa geser ke arah "smaller" atau "smallest". 

Sebaliknya, kalo lo berkunjung ke sebuah situs dengan ukuran yang absolut, menu "view">"font size" di internet browser nggak akan ngaruh. Kalo udah tampil segitu ya segitu aja, mau lo ubah ke "smallest" atau "largest" tetep segitu aja ukuran yang tampil.

Praktek:

Menurut lo, posting ini ditulis menggunakan ukuran font yang relatif atau absolut? Silakan dicoba!

Satuan relatif

    Em
Alternatif pertama untuk ngedesain CSS menggunakan satuan ukuran yang relatif adalah dengan "em". Satu "em" setara dengan ukuran huruf "medium" di menu "view" internet browser. 
Jadi, perintah yang dalam bahasa CSS berbunyi sebagai berikut: 

<style>
body {font-size: 1em}
</style>

…bisa diterjemahkan ke dalam bahasa manusia sebagai berikut: 

"Seluruh huruf yang tampil di halaman web ini berukuran setara dengan font medium di internet browser - sehingga bisa diubah-ubah jadi lebih besar atau lebih kecil dari menu."

Angka untuk satuan "em" ini bisa lo ubah-ubah dengan angka berapapun, termasuk dengan bilangan desimal (koma). Contohnya perintah seperti ini: 

u {font-size: 1.5em} 

...atau 

u {font-size: 1.8em} 

...atau

u {font-size: 8.5em} yang ini gue nggak sarankan lho ya, sebab dengan demikian ukuran fontnya akan 8.5 kali lebih besar dari font medium. Bakal penuh deh tuh layar! 

    Persentase
Selain em, ukuran font juga bisa ditentukan dengan persentase. 
Jadi perintahnya akan berbunyi sebagai berikut: 

body {font-size: 100%}

Sama seperti 1em, ukuran 100% setara dengan ukuran 'medium' di internet browser. Jadi lo juga bisa bikin font yang lebih besar atau lebih kecil dengan memasukkanpersentase di CSS lo seperti ini misalnya: 

body {font-size: 150%}

...atau 

body {font-size: 170%}

...atau 

body {font-size: 250%}

Satuan absolut

Satuan ukuran yang absolut bisa pake satuan pixel (px) atau point (pt).

"Px" alias "pixel", adalah satuan ukuran tampilan yang biasa dipake di layar komputer. Pernah denger resolusi layar komputer "800 x 600" atau "1024 x 768"? Itu adalah satuan dalam 'pixel'. Jadi, kalo lo menentukan font di CSS lo sebesar 10 pixel misalnya, maka font itu nantinya akan setinggi 1/60 ukuran layar komputer dengan resolusi 800 x 600.

Contoh penggunaan satuan px dalam CSS seperti ini:

p {font-size: 10px}

"Pt" alias "point" adalah satuan tinggi huruf seperti yang biasa dipake di program-program office seperti MS Word atas MS Excel. Ini mungkin satuan ukuran yang paling familiar buat kita, sehingga saat nulis perintah CSSnya lebih gampang dibayangin kira-kira akan segede apa hurufnya nanti. 

Contoh penggunaannya seperti ini:

p {font-size: 10pt}

Pertanyaannya sekarang: 

Lebih baik pake yang mana nih, satuan ukuran yang relatif atau absolut? 

Kalo berdasarkan referensi cara membuat web yang baik dan benar yang pernah gue baca, kita disarankan untuk menggunakan ukuran yang relatif. Tujuannya, supaya para pengunjung yang mengalami masalah  penglihatan bisa memperbesar huruf. 
Sedangkan gue pribadi lebih suka make ukuran yang absolut karena waktunulis perintah-perintah CSS-nya, akan lebih mudah buat ngebayangin kaya apakira-kira hasil akhirnya. Yah, namanya juga masih baru belajar... 

Tapi semuanya ya balik ke selera dan pertimbangan masing-masing orang sih. Terserah elo apakah akan pake satuan yang relatif atau absolut. 

Menggabungkan lebih dari declaration untuk satu selector. 

Karena kemarin kita udah belajar memformat jenis huruf, dan sekarang belajar tentang ukuran, maka sekarang kita udah bisa memformat CSS menggunakan dua jenis declaration, yaitu "font-family" dan "font-size". 
Pertanyaannya, gimana caranya nulis lebih dari satu declaration untuk sebuah elemen? Misalnya kita mau menentukan, untuk elemen <body> menggunakan font"tahoma" (declaration "font-family") dan berukuran 12 point (declaration "font-size")… gimana cara nulis perintah CSS-nya?
Sebenernya, kalo elo anaknya rajin dan gemar mengetik, lo boleh-boleh aja nulis kode style sbb: 

body {font-size: 10pt}
body {font-family:tahoma}

Tapi masalahnya, selain pegel harus ngetik selector (dalam contohdi atas="body") berulang-kali, juga berpotensi bikin elo sendiri jadi bingung kalo misalnya mau ngebetulin salah satu declaration dari si body itu. 
Kalo udah kaya gitu, mendingan digabung aja, kan? 

    Cara menggabung lebih dari satu declaration.

Struktur selector dengan multi-declaration pada dasarnya sama aja dengan selector yang declarationnya tunggal, bedanya hanyalah kehadiran tanda titik-koma untukmemisahkan declaration yang satu dengan yang lainnya. 
Biar lebih jelas, perintahnya akan berbunyi sebagai berikut: 

body {font-size: 10pt; font-family: tahoma}

!!Perhatikan adatanda titik-koma (semicolon) diantara "font-size: 10pt" dan "font-family: tahoma"

Tapi supaya rapi dan lebih enak bacanya, bisa juga dijajar ke bawah seperti ini:

body {
font-size: 10pt; 
font-family: tahoma
}

Latihan:

 
1. Coba berbagai ukuran font, lantas test di internet browser. Tentukan    sendiri, lebih suka pake ukuran relatif atau absolut? 
 
2. Buat file HTML yang masing-masing elemennya punya 2 declaration. 

Gambar: picturequest.com 

---

Iklan baris:
      

Pertanyaan yang paling sering masuk ke personal messagenya mbot.multiply.com adalah:

"Gimana sih caranya ngerubah tampilan MP jadi kaya gini?"

Hwaduuh... gimana ya? Bukannya pelit nggak mau bagi ilmu, cuma bingung aja mau mulai dari mana. Sama aja kayak elo abis masak sebuah kue rumit yang menggunakan 30 bahan, masing-masing harus disiapin terpisah sebelum dimasak, masaknya juga melalui sekian puluh tahap menggunakan sebuah oven khusus yang makan waktu berjam-jam, setelah jadi harus dihias sedemikian rupa dengan aneka ramuan coating gula dan coklat,  trus ada orang nyicip sesendok dan nanya sambil ngunyah, "eh, ini bikinnya gimana sih?"     

Selain itu, gue juga belajar ngutak-atik MP ini dengan cara nyoba-nyoba sendiri. Akibatnya, gue sering nggak tau istilah-istilah teknis yang bener dari komponen-komponen CSS dan HTML tuh apa. Gimana gue mau njelasin cara bikinnya kalo namanya aja nggak tau? Makanya selama ini kalo si penanya domisilinya masih di seputar wilayah Jabotabek, gue lebih milih nyuruh dia dateng aja ke rumah - daripada harus keriting njelasin secara tertulis.

Tapi begitu ngeliat MP sekarang ngebuka lagi akses untuk ngerubah CSS, kayaknya topik2 tentang CSS customization akan kembali naik daun di message boar dalam minggu-minggu mendatang. Maka mumpung sempet, gue coba mulai deh tutorial ala gue tentang CSS.

Seperti biasa, perlu gue sebutkan di depan bahwa gue sebenernya nggak menguasai bidang ini. Sekedar tau sedikit hasil nyoba-nyoba doang. Jadi, kalo ada kesalahan dalam tutorial ini, mohon dikoreksi ya. Please DO correct me if I'm wrong. Kemungkinan besar gue akan melakukan banyak kesalahan dalam hal penyebutan istilah-istilah elemen dalam CSS.

Selain itu, buat yang tertarik belajar CSS, gue sarankan membiasakan diri dulu dengan perintah-perintah HTML yang basic seperti <u>, <i>, <b>, <a>, <table> beserta <tr> dan <td>-nya, <h1> dkk, <ol> dan <ul>, <img>, hexcodes untuk warna, serta perintah-perintah basic lainnya. Gue pernah mengulas sedikit tentang perintah hex-code untuk warna di journal gue yang ini, tapi biar lebih komplit lo bisa buka-buka website berisi panduan HTML yang udah ada, antara lain:

• Webnya Jonru - berisi panduan HTML mulai dari dasar - dalam bahasa Indonesia.
• Panduan ringkas HTML - berisi daftar ringkas elemen HTML, lebih cocok buat yang udah sedikit paham tentang prinsip-prinsip HTML dan cuma butuh daftar referensi buat pengingat. - dalam bahasa Indonesia.
• Bram Web Tutorial - berisi penjelasan langkah demi langkah membuat web. Cocok buat yang masih baru belajar tentang HTML.- dalam bahasa Indonesia.
• W3schools - panduan HTML dalam bahasa Inggris.
• Webmonkey - salah satu situs 'pionir' dalam urusan tutorial web. Sayangnya sekarang udah inactive, tapi artikel-artikel lamanya masih tetep bisa dibaca. Dikemas dalam penyampaian yang ringan dengan selipan-selipan humor. - dalam bahasa Inggris.
• Lissa explains it all - dikemas sebagai panduan web design buat anak-anak... tapi tetep aja masih banyak hal yang gue belum ngerti... hehehe. Pernah gue link di sini. - dalam bahasa Inggris.

Kalo udah selesai baca-baca referensi di website-website tadi, kita bisa mulai dengan CSS.

Super-duper-mega-ultra-basic CSS tutorial
-pelajaran no. 1-

Apa itu CSS?

CSS adalah singkatan dari Cascading Style-Sheet, sebuah pengembangan atas kode HTML yang udah ada sebelumnya. Dengan CSS, kita bisa menentukan sebuah struktur dasar halaman web secara lebih mudah dan cepat, serta irit size.

Analogi: bayangin sebuah pasar yang sangat tertata rapi. Pengelola pasarnya menentukan identitas dari setiap pedagang. Para pedagang sayur dikasih seragam warna ijo, dan ditempatkan di kios yang bergambar sayuran. Pedagang daging  dikasih seragam merah dan ditempatkan di kios bergambar hewan. Dan seterusnya. 

Pada suatu hari, datanglah seorang pedagang baru ke pasar tersebut. Pengelola pasarnya nanya, "mas mau jualan apaan?"
"Saya biasa jualan daging, pak," katanya.
"Wokeh, kalo gitu Anda pake seragam merah ini, dan silakan menempati kios bergambar hewan di sebelah sana, ya!"

Seperti itulah kurang lebih peran CSS: dengan struktur yang udah kita tentukan sebelumnya, seluruh elemen HTML di website kita akan ditampilkan mengikuti struktur tersebut.

Misalnya, kalo kita udah tentuin semua <ol> (ordered list, atau daftar yang bernomor) akan berhuruf italic, maka begitu suatu tulisan di halamn kita "kurung" dengan tag <ol> dan </ol>, maka secara otomatis tulisan di dalamnya akan menjadi italic. Jauh lebih praktis ketimbang kita harus menambahkan tag <i> secara manual, satu per satu.   

CSS juga membantu kita untuk menyeragamkan seluruh halaman website dengan tampilan yang konsisten. Misalnya, kita mau seluruh font yang ada di website kita adalah font "Tahoma", maka dengan bantuan CSS kita bisa bikin proses itu menjadi otomatis tanpa harus mengganti2 font secara manual di setiap halaman.   

Di mana letaknya sih si CSS ini?

CSS terletak di bagian head dari sebuah website. Buat yang udah familiar dengan struktur dasar HTML, tentunya tau bahwa setiap halaman html akan terdiri atas 2 bagian, <head> dan <body>. CSS terletak di bagian <head>, sesudah <title> seperti ini:

 

Dalam contoh ini, kita menggunakan css untuk memformat seluruh font di dalam website kita menjadi arial. Perhatikan bahwa perintah css selalu mengikuti format sebagai berikut: 

tabel 1.1

selector	spasi	kurung kurawal buka	spasi	declaration	spasi	kurung kurawal tutup
body		{		font-family: arial		}

Sedangkan format standar sebuah declaration adalah:

tabel 1.2

property	titik dua	value
font-family	:	arial

Ingat, dalam property, TIDAK BOLEH ada spasi! Itulah sebabnya ada tanda hubung (-) antara tulisan 'font' dan 'family'.

Loh, tapi gue nggak mau seluruh font di website gue arial! Gue mau di bagian tertentu verdana, di bagian lainnya tahoma... gimana tuh?

Tenang, itu akan dijelasin juga kok belakangan. Yang penting, pelajaran pertama kita hari ini adalah:

Kita bisa menggunakan CSS untuk memformat setiap elemen dalam website kita secara otomatis.  

 

Latihan:

1. Buat sebuah file html menggunakan program notepad. Caranya, bikin file baru di notepad, klik "Save as...", ganti "save as type..." menjadi "all files" lalu di bagian "file name" beri nama dengan extension *.htm atau *.html, misalnya "testing.html"
   
2. Isi file tersebut dengan struktur <html>, <head>,<title>, dan <body> seperti dicontohkan di bagian sebelumnya.
3. Isi dengan beberapa tulisan di antara <body> dan </body>. Terserah mau nulis apa, puisi juga boleh. 
4. Format beberapa kata dalam tulisan tersebut menggunakan perintah <h1>, <body>, dan <u>.
5. Save dan tutup file notepad tersebut. 
6. Perhatikan, file "testing.html" yang tadinya dibuat dengan notepad sekarang telah jadi file html, ikon / lambangnya berubah - bukan lambang notepad lagi, tapi udah jadi lambang browser internet sesuai dengan browser internet yang terinstall di komputer elo (kalo adanya IE ya jadi lambang IE, kalo adanya Firefox ya jadi lambang Firefox). Dobel klik file tersebut, maka dia akan terbuka dengan program internet browser.
7. Perhatikan baik-baik font apa yang terpampang pada file tersebut. Tutup lagi.  
8. Sekarang buka lagi file tersebut, kali ini dengan menggunakan notepad. Kalo elo pake IE, caranya cukup dengan membuka file itu di browser IE, lalu klik kanan dan pilih "view source" > dia akan terbuka secara otomatis di notepad. Tapi kalo browser elo Firefox, lo harus buka dulu program notepadnya, terus seret dan jatuhin (drag and drop) ikon file "testing.html" ke dalam notepad lo. 
9. Masukkan kode <style> di dalam <head>, setelah <title>.
10. Masukkan property dan value untuk: <h1> - font Arial, <body> - font Tahoma, dan <u> - font Verdana di antara kode style tersebut. Ikuti panduan style seperti telah dicontohkan di tabel 1.1 dan 1.2.  
11. Save dan tutup file notepad tersebut.
12. Buka lagi menggunakan internet browser. Lihat perubahan apa yang terjadi dengan file elo. 

Selamat mencoba!

Posting CSS berikutnya:
Ukuran-ukuran dalam CSS

---

Iklan baris:
      

Tumben-tumbenan kali ini friendster punya terobosan yang bagus.

Setelah sebelumnya meluncurkan friendster blog yang kaya lawakan saking ketinggalan jamannya dibanding produk-produk sejenis yang beredar di pasaran (apalagi lawan multiply, wah kalah jauuuh...), "sorry... maintenance"-nya yang keseringan, message board yang sering macet, testimonial yang mendadak raib, kali ini mereka meluncurkan feature "CSS Custom".

Dengan feature ini, lo bisa ngerombak tampilan halaman friendster lo seperti di multiply. Bagusnya lagi, friendster bekerja sama dengan situs eksternal yang menyediakan online CSS editor yang penggunaannya gampang banget - bahkan untuk ukuran orang yang masih gaptek CSS seperti gue ini. . Lo dikasih tau komponen-komponen mana yang lagi lo ubah, dan kalo mau masukin gambar tinggal copy-paste url-nya. Feature yang bagus banget, di saat multiply sekarang udah mulai jual mahal dan hanya ngasih akses custom CSS untuk para pengguna lama dan pemilik gold account.(Walaupun ternyata tetep bisa kok ngedit CSS dengan cara paste kode CSS-nya ke dalam isian untuk warna calendar di edit color scheme - Baca lengkapnya di MP-nya Pooksywooksy)

Anyway, menu CSS Customization ini bisa lo buka dari Profile > Edit Profile > Customize. Trus di deket isian dengan judul "Advanced User" ada tulisan "CSS Tips". Klik di situ, akan terbuka sebuah window baru berisi berbagai keterangan tentang CSS. Klik Friendster CSS Generator.

Tapi berhubung gue anaknya baik hati, nih gue kasih shortcut-nya: Friendster CSS Generator. (Huuh.. dari tadi kek! hehehe...)

Tips:
Untuk mempermudah elo memilih warna, siapin program graphic editor seperti misalnya "Adobe Photoshop". Dengan program itu, lo bisa milih2 warna, dan copy-paste hex-codenya ke dalam CSS Generator. Alternatifnya, lo bisa manfaatin situs-situs yang menyediakan kode-kode warna untuk HTML, seperti misalnya calculatorcat.com.

Setelah beberapa jam trial and error, dibayang-bayangi cemberutnya Ida yang sebel liat gue nggak tidur-tidur, inilah hasil utik-utik gue; profile friendster yang kembar sama home multiply gue! Yipiii...!

Posting lain tentang CSS, bisa diklik di sini.