masalah “javascript / css not allowed” – inilah penyebabnya


Udah capek-capek nulis di Word tapi begitu dicopy-paste ke MP ditolak dengan alasan “Javascript / CSS are not allowed”; emang enak?

Gue perhatiin lumayan banyak contact gue yang bertanya-tanya soal ini, maka dalam posting ini gue mencoba memberikan jawaban atas “mengapa”-nya walaupun solusinya mungkin rada kurang menarik untuk diikuti.

Paragraph style, si biang kerok

MS Word menerapkan suatu sistem formatting tulisan yang disebut paragraph style. Dengan sistem ini, kita bisa mengaplikasikan sejumlah kondisi tertentu atas sebagian dari tulisan kita secara lebih gampang dan cepat.

Maksudnya gini:
Misalnya lu lagi nulis novel dengan huruf Arial normal 11pt, spasi tunggal. Tapi beberapa bagian dalam novel lu, misalnya beberapa paragraf yang menceritakan kejadian flashback, menggunakan huruf Times New Roman italic 12pt, spasi 1.5. Apakah artinya elo harus mencari satu per satu paragraf tentang flashback dan mengedit satu per satu jenis font, ukuran font, dan spasinya? Nggak perlu begitu. Dengan paragraph style, lo bisa melakukannya dengan jauh lebih gampang.

Lo cukup membuat paragraph style dengan kondisi khusus yang lo inginkan (dalam hal ini huruf Times New Roman italic 12pt, spasi 1.5) dan lo save sebagai paragraph style baru. Nanti saat lo mau mengedit paragraf yang menceritakan sebuah kejadian flashback, lo tinggal select paragraf tersebut dan apply paragraph style yang tadi udah lo save. Maka seluruh kondisi yang udah lo tetapkan (jenis dan ukuran font, serta spasi) akan terformat secara lebih gampang, cukup satu kali klik.

Nah, sistem paragraph style di MS Word ini menggunakan sistem yang mirip dengan styling di penulisan HTML menggunakan CSS. Artinya, setiap dokumen MS Word yang lo buat secara otomatis akan menyimpan setting paragraph stylenya di bagian ‘head’ / awal dokumen. Setting ini tidak kasat mata, alias tersembunyi pada saat elo sedang mengedit tulisan lo di MS Word. Tapi begitu lo copy-paste ke MP, setting ini akan ikut terbawa dan masuk dalam tulisan lo.

Contoh

Lo sudah membuat tulisan yang lo percantik dengan segala macem warna, bold, dan italic di MS Word, lantas lo copy-paste ke MP seperti ini:


Coba deh klik checkbox “edit HTML” di sebelah kanan atas posting space, maka sim salabim, akan terlihat onderdil dalam tulisan lo yang dipenuhi kode-kode paragraph style MS Word (dalam gambar gue kasih warna kuning):


Bagian yang warna kuning itulah yang menyerupai kode-kode CSS, sehingga posting lo kena ‘cekal’ oleh sistem MP.

Kenapa sih MP melarang CSS / Javascript?

Karena kedua benda ini berpotensi menimbulkan ‘kekacauan’ yang akan merepotkan tim customer servicenya MP. Dengan CSS, misalnya, kita bisa bikin tampilan yang lebaaaar sekali sehingga menutupi iklan di bagian kanan halaman. Atau malah menjungkir balikkan posisi headshot. Atau membuat link untuk mengedit dan mendelete posting menjadi lenyap. Apabila secara nggak sengaja user membuat setting CSS yang kacau balau gini, larinya ke mana lagi kalo bukan ke customer service MP untuk minta dibetulin, kan? Pastinya ini akan merepotkan mereka, apalagi sekarang user MP udah mencapai angka jutaan orang.

Javascript malah lebih berbahaya lagi. Dengan sejumlah kode kecil, lo bisa melakukan berbagai aktifitas yang merugikan orang lain, atau minimal membuat loading page menjadi lemot.

Trus, gimana dong solusinya?

  1. Ya elo nggak usah ngetik di MS Word, langsung aja ketik di MP – toh lo juga bisa melakukan formatting seperti bold, italic, dan mengubah warna secara gampang dengan tombol-tombol yang tersedia di MP. Kalo koneksi internet lo time-based, artinya biaya internetnya dihitung berdasarkan lamanya elo konek dan itu membuat lo senewen saat ngetik karena mikirin ‘argometer’-nya jalan terus, maka lo bisa matikan dulu koneksi saat halaman posting terbuka. Nanti kalau udah selesai ngetik baru konek lagi.
  2. Jangan gunakan MS Word, gunakan Notepad atau Wordpad untuk mengetik posting lo, dijamin saat dicopy paste ke MP nggak akan kena cekal. Konsekuensinya, lo nggak bisa membuat formatting tulisan di kedua program tersebut. Di Wordpad sih bisa ganti-ganti warna dan bikin tulisan jadi bold, tapi begitu dicopy ke MP semua formatting itu akan hilang. Jadi sami mawon, di MP lo harus memformat ulang tulisan lo.
  3. Lo bisa membersihkan tulisan lo di MP secara manual, artinya lo deletin satu-satu kode paragraph style dengan mengaktifkan “edit HTML”. Ini lumayan nyebelin dan ada resiko lo akhirnya mendelete tulisan lo sendiri.
  4. Lo bisa membuat draft posting di HTML editor, misalnya Frontpage atau kalau mau yang gratis dan halal lo bisa coba pake Pagebreeze. Lo ketik yang bagus dengan segala formatting warna, bold, dllsb, lalu lo ikutin cara copy paste yang pernah gue ceritain dalam posting yang ini. Ini cara yang selalu gue pake, tapi mungkin kurang menarik buat yang rada alergi dengan program-program HTML editor.

Jadi, mau posting dengan cara yang mana? Atau punya alternatif cara posting yang belum gue ulas di sini?

quick update: CSS MP berubah lagi!… doooh..


Beberapa menit yang lalu telah terjadi gempa besar-besaran yang melanda struktur CSS Multiply. Akibatnya terjadi keretakan di blog si mbot seperti ini:


liat, antara header dan body jadi terpisah, trus tombol navigasi gue juga jadi berubah bentuk gitu. Duh, artinya ini waktunya untuk kembali ngutak-atik CSS… padahal gue udah PW dengan tampilan yang sekarang.

Memang satu hal yang gue suka dari MP adalah semangat inovasinya yang tinggi, tapi kalo lagi kerajinan nggak tepat timing gini lumayan bikin sebel juga deh ah. Hey Multiply Admin, take a vacation, will you? Please?

Tapi paling enggak, gue masih bersyukur karena kerusakan yang gue derita nggak separah rekan yang satu ini:


huhuhu… kepalanya jadi ada dua…. hihihi… turut berduka cita ya Riq :-p

Wajah (agak) baru: Mengubah CSS secara (relatif) gampang


E

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.


tombol akal2an di sebelah kanan

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”&gt;
<link rel=”stylesheet” type=”text/css” href=”http://mbotx.multiply.com/style-custom/mbotx/73/custom.css”&gt;

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).

CSS tutorial: jurus pamungkas (bag.2)


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:

Maling Sarung Dihakimi Massa

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.

“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!?”

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

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 i
ni:

Maling Sarung Dihakimi Massa

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.

“Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini”

“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!?”

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

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:

CSS tutorial: jurus pamungkas (bag.1)


D

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:

Maling Sarung Dihakimi Massa.

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.

“Saya sekedar nyuri sarung untuk makan Pak, masa sampai harus digebuki begini,” kilah 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!?”

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

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:

Maling Sarung Dihakimi Massa

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.

“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!?”

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

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 terapka
n 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:

Maling Sarung Dihakimi Massa

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.

“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!?”

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

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:

CSS tutorial: semuanya, tapi… jangan semua deh!


K

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:

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

tentu saja kuda jadi tak terkendali
Karena muka pak kusir kududuki.

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:

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

tentu saja kuda jadi tak terkendali
Karena muka pak kusir kududuki.

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:

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

tentu saja kuda menjadi kurang terkendali
Karena muka pak kusir kududuki.

Adapun yang terjadi sebagai akibatnya adalah:

  • Jalannya kuda menjadi melintir
  • Pak Kusir menjadi panik
  • Ayah menjadi panik
  • Sejak itu aku tak pernah diajak ayah pergi ke kota lagi

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” y
ang 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:

CSS tutorial: link yang bling-bling


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”&gt; 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!

“Minum VCO setiap hari, badan sehat penyakit lumat.”

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:

CSS tutorial: fun with fonts


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:

CSS tutorial: Gede, kecil, relatif sih…


D

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:

CSS tutorial: Apa itu css?


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:

Tips bikin background kedip-kedip


Program yang digunakan: Adobe ImageReady 7.
(ya ya ya, gue tau sekarang udah keluar versi yang lebih canggihnya… tapi gue masih sayang sama program ini)

  1. Buat sebuah image baru. Ukurannya bebas, jangan terlalu kecil biar nggak susah ngeliatnya.Di sini gue pake ukuran asal-asalan 432 x 648 pixels.
    Photobucket - Video and Image Hosting
  2. Bikin 2 layer pada image tersebut, dengan cara mengklik panah kecil di sebelah kanan atas panel “Layer”.
    Photobucket - Video and Image Hosting 
  3. Menggunakan tool ember dari panel “Tools”, isi layer yang atas (layer 2) dengan warna ijo jreng-jreng.
    Photobucket - Video and Image Hosting 
  4. Di panel “animation”, bikin 2 frame yang masing-masing berdurasi 0.5 second. Eh, terserah sih durasinya mau berapa second. Yang jelas, makin pendek durasinya, makin senewen kedipannya. Cara mengubah durasi frame adalah dengan mengklik angka yang tercantum di bagian bawah frame.
    Di frame yang pertama, layer 2 visible (lihat ada gambar mata di sebelah kiri layer). Di frame ke dua, layer 2 invisible.
    Photobucket - Video and Image Hosting 
  5. Perkecil ukuran canvas menjadi 1×1 pixel. Caranya, klik “image” di bagian atas toolbar, terus klik “canvas size”.
    Photobucket - Video and Image Hosting 
  6. Dari menu “File” di toolbar, pilih “Save optimized as…”. Inget, jangan salah ya, bukan “Save As… ” lho! Pilih formatnya gif, image only.
  7. Upload image yang baru dibikin tadi ke dalam image hosting yang lo punya. Kalo gue sih di photobucket.com

Nah sekarang background kedip-kedip udah selesai. Pertanyaannya, APA GUNANYA BACKGROUND KEDIP-KEDIP INI??

Jawabannya:

Background kedip-kedip dapat digunakan untuk melatarbelakangi sebuah tulisan agar semakin mengundang perhatian para pembaca. Dengan mengapit tulisan di antara perintah <span style=”background-image:url(http://LinkMenujuImageYangUdahKitaBikinTadi)”> dan </span>maka kita dapat membuat efek seperti ini:


VCO

minyak kelapa untuk kesehatan

berkhasiat untuk mencegah / mengatasi berbagai gangguan kesehatan seperti:

  • Diabetes
  • Jantung Koroner
  • Osteoporosis
  • Kolesterol
  • Hepatitis C
  • Aneka Virus (termasuk HIV!)
  • Kanker
  • Prostat
  • Asam Urat
  • Obesitas

Demikianlah tutorial bermuatan bisnis kali ini, selamat mencoba!

%d blogger menyukai ini: