Tutorial Cascading Style Sheet (CSS) Part #4


Sejauh ini Anda sudah mengetahui kelebihan css, Ayo kita keruk kembali untuk tidak melupakan ketentuan dasar yang berlaku di css.
Perhatikan contoh berikut :

B {color: lime}

Dikenal sebagai "Style Rule" atau peraturan/perintah css, yang mana terdiri dari dua elemen dasar yaitu : "selector" dan "declaration". Sebuah "selector" biasanya adalah tag HTML (dalam hal ini B), sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector.
Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma, Bingung kan? Perhatikan contoh berikut!

B {color: lime; text-decoration: underline; font-family: Arial}

Itu baru bisa dikatakan syntax css yang valid. Sulit? Tidak begitu, jangan pernah berkata rumit sebelum janur kuning melengkung (Loh?? Hehehe).
Lengkapnya :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: lime; text-decoration: underline; font-family: Arial}
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P>
J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita
sendiri</B>
</BODY>

</HTML>

CSS sendiri memiliki lebih dari 60 (enam puluh) keyword (kata kunci), dan anda disarankan untuk sering bercinta dengan css agar familiar dengan tiap keyword seiring tutorial ini :).
Selectors juga bisa di kelompokkan, seperti contoh berikut, yang mengubah teks untuk H1, H2, dan H4, menjadi berwarna putih.

H1, H2, H3 {color: white} /* this rule turns H1, H2 and H3 blocks white */

Perlu diingat, syntax dapat kita sertakan komentar, persis seperti c++ dengan menggunakan simbol /* dan */.
Hal yang paling umum dalam memasukkan kode Style Sheet dengan menggunakan tag <STYLE>, tag <STYLE> ini selalu tampil dalam bagian <HEAD> dari dokumen anda, garis besarnya seperti ini :

<HEAD>
<STYLE TYPE="text/css">
... aturan-aturan css disini ...
</STYLE>
</HEAD>


Jika kita teliti dari contoh-contoh sebelumnya, maka memang seperti di atas garis besar syntax css yang digunakan. TAPI INI HANYA BERLAKU UNTUK DOKUMEN INI SAJA (bukan marah, hanya mempertegas dengan kapital, hehehe), tapi terkadang akan menimbulkan sedikit masalah jika hendak menerapkan css ke seluruh tampilan web. Don’t worry be happy... pemecahannya semudah membuat game menggunakan borland c++ (hah? Kata siapa mudah? Hehe), Jadi ingat waktu diberi tugas buat game, saking mentoknya jadi saya donlot aja trus pelajarin, walahh... ternyata masih banyak syntax yang belum dipelajari dan dikenal. –‘. Tuh kan mulai ngawur, yasudah segini dulu, takut nambah ngawur. Hehehe...

» Read More...

Tutorial Cascading Style Sheet (CSS) Part #3

Bagaima kalau pengkodean CSS dalam mengganti warna kita gunakan kode RGBnya? Seperti standarnya html.
Seperti dibawah ini, kita tinggal ganti saja untuk mendapat variasi warna.
 
<STYLE TYPE="text/css">
B { color : #CC6633 }
</STYLE>


Akan sama mudahnya dengan html, apalagi bagi yang sudah mahir html.
Contoh lainnya yang saya modifikasi :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
I { color : red }
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <I>suatu pekerjaan</I> itu mudah
maka pekerjaan itu akan beneran menjadi<I> lebih mudah</I>?
<P>
J: Karena itu merupakan <I>sugesti</I> terhadap <I>diri kita
sendiri</I>
</BODY>
</HTML>


Saya mengganti huruf “B” dengan huruf “I”, sehingga apa? Sehingga teks yang di beri tag <I> tersebut berubah menjadi ITALIC. Silahkan cek di browser kalau tidak percaya. Bagaimana caranya untuk garis di bawah huruf atau UNDERLINE?
Jika saya ingin kata "suatu pekerjaan" dari contoh di atas menjadi berwarna merah dan ITALIC, terus kata "lebih mudah" kita buat menjadi berwarna hijau dan BOLD, terus untuk menambah kebingungan anda jadikan kata "sugesti" dengan UNDERLINE dan berwarna merah, serta kata "diri kita sendiri" menjadi hijau dan BOLD. Saya ingin tampilan di browser seperti demikian. Bagaimana menurut anda membuat kode HTMLnya? Sulit? Jawabannya “TIDAK!!!” kalau anda bilang “Sulit” berarti You’re Looser!!! Lebih pecundang daripada Squidword yang lagi depresi menghadapi Sponge Bob. :D hahaha... (maaf sedikit ngawur, tapi tidak apa-apa, kan ini tutorial saya. :P).
Coba seperti ini :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
I,U { color: red }
B { color : green }
</STYLE>
</HEAD>
<BODY>

P: Mengapa jika kita anggap <I>suatu pekerjaan</I> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P>
J: Karena itu merupakan <U>sugesti</U> terhadap <B>diri kita
sendiri</B>
</BODY>
</HTML>

Did you see that??!!! I did it! Tanpa harus berpanjang-panjang kode saya bisa melakukan itu semua. Sekarang sudah jelas mengapa saya katakan CSS lebih baik untuk mendisain tampilan webnya?. Jika suatu kali anda bosan dengan warna atau bentuk tulisan pada tampilan situs anda, hanya dengan mengubah dan menambah variasi dari perintah css anda akan mendapatkan tampilan yang lebih menarik bukan? Dan juga benar-benar menghemat waktu.

» Read More...

Tutorial Cascading Style Sheet (CSS) Part #2


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Dashboard</title>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgT8PZINxQQ1czjFN2gRbv861JJriqzRg-mU2pgEz4lCvb1fUy5KBKiwtSNWv8i5b9zkFCf_czON3J30saoYDVFmzDruRVVC12Cc02C89WqKEv9MhDhOxkXTJBR4Z2o6zrrmyQOeqmdY/s1600/favicon+iblizkecil.gif' rel='SHORTCUT ICON'/>
<style type="text/css">
body{
width:900px;

margin:auto;
}
#header{
width:auto;
margin-top:5px;
height:100px;
padding:5px;
-moz-border-radius:15px;
background:#fbfbfb;
border:#9966CC solid 1px;
}
#leftbar{
padding:5px;
height:600px;
width:200px;
margin-right:5px;
float:left;
-moz-border-radius:15px;
background:#9933FF;
}
#content{
padding:5px;
height:600px;
float:left;
width:460px;
-moz-border-radius:15px;
background:#999999;
}
#rightbar{
padding:5px;
float:right;
height:600px;
width:200px;
-moz-border-radius:15px;
background:#9933FF;
}
#footer{
padding:5px;
height:50px;
text-align:center;
background:#800000;
clear:both;
-moz-border-radius:15px;
}
#kosong{
height:5px;
clear:both;
}
</style>
</head>

<body>
<div id="header"><h1>
<strong><blink>My dashboard</blink> </strong></div>
<div id="kosong"></div>
<div id="leftbar"><strong>Left Widget</strong></div>
<div id="content"><strong>Your Content Here</strong></div>
<div id="rightbar"><strong>Right Widget</strong></div>
<div id="kosong"></div>
<div id="footer">&copy; 2011 <a href="http://ikiepedia.blogspot.com">IKIEpedia</a></div>
</body>
</html>

simpan di notepad dengan ekstensi html, buka dengan browser kamu. :)

» Read More...

Tutorial Cascading Style Sheet (CSS) Part #1


Kerjakanlah dari yang mudah dahulu “itu kata guru saya waktu SMA kalau mau mengerjakan sesuatu”, tapi memang benar (padahal emang gak bisa bikin yang susah).
Just copas! Copy-paste kode HTML berikut.

<HTML>
<HEAD>
</HEAD>
<BODY>
P: <B>Pekerjaan</B> akan menjadi mudah kalau kita anggap <B>mudah,</B> bukan begitu?
<P>
J: Benar, karena kita <B>mensugestikan</B> kemudahan <B>pada diri sendiri</B>
</BODY>
</HTML>

Ada beberapa kata pada kalimat diatas yang menjadi tebal, itu karena tag <B> dan </B> fungsinya memberi perintah BOLD.
Sekarang kita memberi warna pada teks yang di tebalkan tadi :

<HTML>
<HEAD>
</HEAD>
<BODY>
P: <B><FONT COLOR=”Lime”>Pekerjaan</FONT></B> akan menjadi mudah kalau kita anggap <B><FONT COLOR=”Lime”>mudah,</FONT></B> bukan begitu?
<P>
J: Benar, karena kita <B><FONT COLOR=”Lime”>mensugestikan</FONT></B> kemudahan <B><FONT COLOR=”Lime”>pada diri sendiri</FONT></B>
</BODY>
</HTML>

Bagaimana hasil di browser? Sudah berwarna bukan? Teks tebal berwarna hijau.
Kita bandingkan kemudahan yang didapat jika menggunakan CSS (Cascading Style Sheet).

<HTML>
<HEAD>
<STYLE TYPE="text/css">
B { color : lime }
</STYLE>
</HEAD>
<BODY>
P: <B>Pekerjaan</B> akan menjadi mudah kalau kita anggap <B>mudah,</B> bukan begitu?
<P>
J: Benar, karena kita <B>mensugestikan</B> kemudahan <B>pada diri sendiri</B>
</BODY>
</HTML>

So, dilihat dari hasil, kedua koding diatas menghasilkan output yang sama, what the different? Bedanya dalam CSS kita lebih mudah untuk mengaturnya, dan lebih singkat dalam menulis kodenya.

Santai, ini masih “Piece of Cake". Kita lanjutkan nanti. :)

» Read More...

Download FINAL FANTASY XII


Download disini

» Read More...

Komputer Menyapa

1. Buka Notepad

2. Copy kode vbscript berikut ke notepad :

Dim speaks, speech, salam , username
username = CreateObject("WScript.Network").Username
If Hour(Time) < 12 Then
salam = "Good morning"
ElseIf Hour(Time) < 20 Then
salam = "Good afternoon"
Else
salam = "Good night"
End If
speaks = salam + " " + Username + "! Welcome back to your computer! Have a nice work!"
Set speech = CreateObject("sapi.spvoice")
speech.Speak speaks

3. Simpan dan beri nama “welcome.vbs“, ingat! “welcome.vbs” bukan “welcome.vbs.txt”.

4. Copy file tersebut ke :

Untuk Windows Vista & 7 save di :
C:\Users\{username}\AppData\Roaming\Microsoft\Win dows\Start Menu\Programs\Startup

Untuk Windows XP save di :
C:\Documents and Settings\{username}\Start Menu\ atau C:\Documents and Settings\All Users\Start Menu\Programs\Startup

» Read More...

Yang Menjengkelkan dari Chrome

Assalamu’alaikum... (lagi eling :D)
Saya akan blak-blakkan mengenai ketidaknyamanan/yang menjengkelkan dari Chrome, opini ini bertuju untuk Chrome versi 16.

 
Versi 16 Full
Mohon maaf buat para fansclub atau penggemar atau maniak Chrome. Piss..!!! saya hanya mengemukakan pendapat seobjektif mungkin. :)

Kejengkelan pertama, Chrome tidak punya tata krama (tidak sopan dan beretika), layaknya software lain, saat penginstalan seharusnya kita (pemilik komputer) yang punya kuasa untuk menempatkan dimana software akan diinstal. Tapi Chrome tidak sopan, Chrome dengan seenaknya langsung menempatkan di Application Data saat kita menginstal, tidak di Program Files seperti biasanya.

Kejengkelan kedua, File Installer Chrome, yang dulu di nobatkan sebagai installer browser teramping ternyata bullshit!, installer Chrome 16 berukuran 23 MB, bandingkan dengan Firefox 7, hampir separuhnya (13 MB).

Kejengkelan ketiga, Coba lihat pada tampilan thumb awal (gambar diatas). Kita tidak bisa menjadikannya thumb tetap atau mempin sebuah alamat untuk menjadi thumb tetap, thumb akan berganti-ganti, suka-suka Chrome.

Kejengkelan keempat, User tidak diizinkan mengatur tombol pada toolbar, tidak seperti browser lainnya.

Kejengkelan kelima, Chrome banyak menduplikat atau menjiplak beberapa fiture dari Firefox (beberapa extensionya), dan yang saya kecewakan, tidak terdapat Add Ons untuk Internet Download Manager. (jadi ruwed kalau mau download).

Kelemahan keenam, Chrome memang tak tau diri! Saya sebagai pemilik komputer tidak di beri notifikasi atas hendaknya mengupdate atau tidak, Chrome tanpa seizin pasti mengupdate dirinya sendiri. (apa-apaan ini?!).

Perbedaannya sangat jauh dengan Firefox, saya sendiri masih nyaman menggunakan Firefox, bahkan saya masih memiliki installer firefox 3.0 karena kenyamanan dan kefleksibelitasnya.
Chrome sangat pesat dalam merilis versi baru, menurut saya memang karena Chrome masih banyak cacat, dan tidak di garap semua kecacatan kemudian merilis ulang, jadi yang ada hanya semakin baru semakin menjengkelkan.
Saya fikir sepertinya hampir keseluruhan produk Google itu menjengkelkan (Gchrome, Chome OS, Android) untuk Android saya belum mencoba.
Hampir masyarakat mengkonsumsi apa yang iklan sajikan kehebatannya, bukan kita sendiri yang merasakan kenikmatannya. Iklan hanya melebih-lebihkan kehebatan yang standar dan menutupi kelemahan yang sangat fatal. So Chrome is Sucks!!!

» Read More...

My Facebook

Live Traffic

Followers