Contoh kode CSS

Selector ID diawali dengan tanda #, selector class diawali dengan tanda . (dot), sedangkan selector tag HTML tidak memerlukan tanda awalan apapun. Cukup dengan mengetikkan langsung nama tag HTMLnya. Pada tutorial ini akan dijelaskan semua hal yang berhubungan dengan CSS Selector.

Selector Class

Sebuah selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.

Contoh kode selector class:

.post{
background-color:#cdcdcd;
}

Kode HTML untuk menggunakan selector class:

<div class="post"> ... teks ... </div>

Class .post bisa digunakan lebih dari 1 kali pada sebuah halaman. Contoh nyatanya adalah blog-blog yang dibuat dengan Wordpress (baik wordpress.com ataupun wordpress.org). Coba buka halaman awal sebuah blog wordpress dan lihat kode HTML halaman tersebut (pada Firefox: View > Page Source). Kemudian cari kata (CTRL+F) class="post", maka akan ditemukan lebih dari satu hasil pencarian.

Selector ID

Kebalikan dari selector class, selector ID hanya boleh digunakan sekali pada satu halaman.

Contoh kode selector ID:

#header{
background-color:silver;
padding:5px;
}

Kode HTML untuk menggunakan selector ID:

<div id="header"> majalahweb.com </div>

Selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #header diatas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 header.

Jika Anda seorang programmer, ID dalam HTML ibaratnya sebuah variabel dalam sebuah pemrograman. Jika dalam pemrograman tidak boleh ada 2 variabel yang memiliki nama yang sama dalam suatu blok kode, begitu juga dengan HTML yang tidak boleh ada elemen yang memiliki nama ID yang sama pada satu halaman web.

Selector HTML

Berbeda dengan selector ID dan selector class, selector HTML akan mempengaruhi tag HTML yang diberi style. Untuk lebih jelasnya, berikut contoh kodenya:

p {
    font-family: Arial;font-size:10pt;
}

Kode diatas akan membuat semua tag <p> (paragraf) agar ditampilkan menggunakan font Arial dengan ukuran 10pt (point). Jadi tidak perlu menambahkan atribut id="nama_id" ataupun atribut class ="nama_class" karena browser secara otomatis akan mencari tag yang akan diberi style.

Bermain dengan selector

Masih ada banyak cara untuk memanfaatkan selector pada CSS. Coba lihat beberapa contoh berikut:

#header p {
font-family:Georgia;
}
h1.title {
font-size:large;
}

Pada contoh pertama bisa berarti bahwa style tersebut akan berlaku pada semua tag <p> yang ada didalam ID #header. Contoh kode HTMLnya:

<div id="header"><p>teks teks</p></div>

Sedangkan pada contoh kedua style akan berlaku pada semua tag h1 yang memiliki class title. Contoh kode HTMLnya:

<h1 class="title">Judul title</h1>

Selector lainnya

Sedikit melangkah ke tingkat lanjut, selain 3 selector utama diatas (yang lebih umum dipakai) masih terdapat beberapa macam selector, yaitu:

Selector universal

Universal selector yang dimaksud disini adalah selector yang menggunakan tanda *. Contoh kode CSS:

* {
line-height:1.5em;
}
blockquote{
font-family:Verdana;
}
blockquote * {
font-family:"Times New Roman";
}

Tanda * (asterisk) mengacu pada semua element. Jadi, pada blok kode yang pertama bisa berarti bahwa “spasi antar baris pada semua elemen akan berukuran 1.5em“.

Pada style yang kedua, potongan kode ini bisa berarti “semua teks didalam blockquote akan ditampilkan dengan font Verdana“. Sedangkan pada style yang ketiga, tanda * berada setelah selector HTML blockquote. Potongan kode ini bisa berarti “semua teks pada elemen yang berada didalam blockquote akan ditampilkan dengan font Times New Roman“. Untuk lebih jelas, berikut contoh penggunaan dalam kode HTML:

<blockquote>Halo dunia <span>Ketikkan
sebuah kode</span> halo dunia lagi.</blockquote>

Sesuai dengan kode HTML diatas, teks yang berada didalam tag <span> akan ditampilkan menggunakan font Times New Roman, sedangkan sisanya ditampilkan menggunakan font Verdana.

Selector atribut

Selector atribut memungkinkan kita untuk mengaplikasikan sebuah style pada elemen HTML tertentu dengan atribut tertentu.

Sebagai contoh, sebuah style hanya untuk diaplikasikan pada tag hyperlink (<a>) yang memiliki atribut href, jadi tag hyperlink yang tidak memiliki atribut href tidak akan mengikuti style yang sudah ditentukan. Contoh kodenya :

a[href] {
color:green;
}
a[name] {
color:red;
}

Berikut contoh dalam kode HTML:

<a href=http://majalahweb.com/halamancontoh.html>Halaman contoh</a>
<a name="bab2">Bab 2</a>

Pada contoh tag hyperlink yang pertama, teks akan berwarna hijau, mengikuti style a[href]. Sedangkan pada tag hyperlink yang kedua, teks akan berwarna merah, mengikuti style a[name].

Selector atribut dengan pencocokan nilai atribut

Selain itu, dengan selector atribut juga dimungkinkan untuk mengaplikasikan style pada suatu elemen HTML dengan nilai atribut tertentu. Untuk lebih jelasnya, berikut contoh kode CSS:

a[href="http://majalahweb.com"] {
color:yellow;
}

Dan contoh kode HTML:

<a href=http://majalahweb.com>Warna kuning</a> <a href=http://yahoo.com>Entah warna apa</a>

Hasilnya adalah hanya hyperlink yang menuju ke majalahweb.com saja yang akan memiliki teks berwarna kuning.

Selector atribut dengan mencocokkan sebagian nilai atribut

Mengaplikasikan style CSS ke elemen HTML juga bisa dilakukan dengan melakukan pencocokan sebagian nilai dari atribut. Untuk lebih jelasnya, berikut kode CSSnya:

span[class~="error"] {
    background-color:red;
}

Style CSS diatas akan diaplikasikan pada elemen span yang nama classnya memiliki kata error. Misalnya : <span class="error login"> .. teks .. </span>, atau <span class="error register"> .. teks .. </span>..

Selector pseudo-element

Selector pseudo-element digunakan untuk menambahkan efek tertentu pada sebuah selector. Jika Anda bingung dengan istilah pseudo-element, jangan terlalu dipikirkan. Untuk sekarang terima dulu kata pseudo-element sebagai sebuah istilah dalam CSS. Syntax dari penggunaan pseudo-element adalah sebagai berikut:

selector:nama_pseudo-element {
property:value;
}

Atau bisa juga dengan manambahkan nama class setelah nama selector, menjadi:

selector.class:nama_pseudo-element {
    property:value;
}

Berikut adalah beberapa nama pseudo-element:

• :first-line. Memberikan style tertentu pada baris pertama dalam sebuah teks.
• :first-letter. Memberikan style tertentu pada huruf pertama pada sebuah teks.
• :before. Menambahkan sebuah content sebelum nama elemen yang dijadikan selector.
• :after. Menambahkan sebuah content sesudah nama elemen yang dijadikan selector.

Pseudo-element :before dan :after tidak bekerja pada browser Internet Explorer (sewaktu tutorial ini dicoba menggunakan Internet Explorer 6 ). Berikut contoh style CSS yang menggunakan pseudo-element:

p:first-line{
    text-transform:uppercase;
}

Kode HTML:

<p>Ini adalah elemen paragraf yang menggunakan pseudo-element.</p>

Pada contoh diatas, browser akan menampilkan baris pertama dengan huruf besar. Jika ukuran browser Anda lebar dan menampilkan semua teks dalam satu baris, maka semua teks akan ditampilkan huruf besar. Untuk melihat efek dari style CSS diatas, coba resize ukuran browser menjadi lebih sempit sehingga teks pada paragraf tersebut dipisah menjadi 2 baris.

Beberapa yang perlu diingat, pseudo-element :first-line hanya bisa diaplikasikan pada element yang bersifat block-level. Pada tutorial berikutnya akan saya jelaskan apa itu block-level element. Beberapa properties yang bisa diaplikasikan pada pseudo-element :first-line adalah sebagai berikut: font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear.

Contoh berikutnya adalah pseudo-element menggunakan :first-letter:

p:first-letter{
    font-size:16pt;
}

Style CSS diatas akan menampilkan huruf pertama dari sebuah paragraf dengan ukuran 16 point.

div.feed:before{
    content:url(feed-icon.png);
}
div.feed:after{
    content:url(feed-icon.png);
}

Style diatas akan diaplikasikan pada kode HTML seperti dibawah ini:

<div class=”feed”>Berlangganan feed</div>

Hasilnya adalah sebuah teks “Berlangganan feed” dimana sebelum (:before) dan sesudah (:after) teks tersebut akan ditambahkan gambar feed-icon.png. Seperti yang sudah disebutkan sebelumnya, :before dan :after tidak akan bekerja pada browser Internet Explorer (saat dicoba versi 6).

Sumber penjelasan tentang pseudo-element:

• CSS pseudo-element
• What is CSS pseudo-element?

Selector pseudo-class

Syntax dari pseudo-class sama dengan syntax pseudo-element, yaitu:

selector:nama_pseudo-class {
    property:value;
}

Atau bisa juga:

selector.class:nama_pseudo-class {
    property:value;
}

Berikut beberapa nama-nama pseudo-class:

• :link. Memberikan style pada link yang belum dikunjungi.
• :visited. Memberikan style pada link yang telah dikunjungi.
• :hover. Memberikan style pada elemen yang disorot oleh pointer/mouse.
• :active. Memberikan style pada elemen yang berada pada keadaan diaktifkan.
• :focus. Memberikan style pada elemen ketika elemen tersebut menerima focus.
• :first-child. Memberikan style pada elemen anak pertama pada dari elemen lainnya.
• :lang. Menentukan bahasa yang digunakan pada elemen tersebut.

Bermain dengan link

Dengan pseudo-class :link, :visited, :hover, dan :active, kita bisa menambahkan efek pada sebuah link. Misalkan ada sebuah kode CSS seperti berikut:

a:link{
    color:orange;
}
a:visited{
    font-style:italic;
}
a:hover{
    font-weight:bold;
}
a:active{
    color:blue;
}

Style diatas akan diaplikasikan pada sebuah link dengan kode HTML sebagai berikut:

<a href="http://www.google.com">Google</a>

Maka, link tersebut secara default akan memiliki warna oranye, saat di-hover (disorot dengan pointer/mouse) font akan ditampilkan menjadi cetak tebal, saat di-klik sekilas akan berubah menjadi warna biru, dan setelah link tersebut dikunjungi akan berubah warnanya menjadi warna merah.

pseudo-class lainnya

Contoh kode CSS:

span:first-child{
    font-weight:bold;
}

Contoh kode HTML:

<body><span>Teks pertama</span><span>Teks kedua</span></body>

Pada contoh diatas, kata “Teks pertama” akan dicetak tebal sesuai dengan style yang sudah dibuat. Sedangkan kata “Teks kedua” tidak akan dicetak tebal karena tidak cocok dengan selector yang telah didefinisikan, dimana selector hanya mengaplikasikan style pada elemen span pertama pada sebuah elemen (dalam hal ini elemen body).

Contoh kedua penggunakan pseudo-class :first-child. Berikut contoh kode CSS:

p > span:first-child{
    font-style:italic;
}

Contoh kode HTML:

<p><span>Teks pertama</span><span>Teks kedua</span></p>

Pada contoh diatas, Teks pertama akan diberi style karena sesuai dengan selector yang sudah ditentukan. Dimana pada style CSS, selector yang diberi style adalah “elemen span pertama didalam elemen p (paragraf)“. Tanda > (kurang dari) berarti elemen berikutnya adalah elemen didalamnya.

Selector child

Yang dimaksud dengan selector child disini mengacu pada elemen anak. Untuk lebih jelasnya, berikut contoh kodenya:

div>p {
    ... kode css ...
}

Kode CSS diatas akan berlaku pada elemen HTML seperti berikut:

<div><p>teks dalam paragraf</p><span>teks dalam span</span></div>

Contoh kedua:

div ol>li p {
    ... kode css ...
}

Kode CSS diatas akan berlaku pada elemen HTML seperti berikut:

<div><ol><li><p>teks dalam paragraf dan dalam list item</p></li><li>teks dalam list item</li></ol></div>

Selector sibling

Yang dimaksud selector sibling disini adalah elemen yang berada setelah elemen saat ini dan berada pada level yang sama.

Contoh sibling:

<div><h1></h1><h2></h2></div>

h2 adalah sibling dari h1 karena h2 berada setelah (disebelah kanan) h1. Dimana h1 dan h2 berada pada level yang sama. Maksud dari level yang sama adalah h1 dan h2 memiliki elemen induk yang sama (div).

Contoh penggunaan dalam CSS:

h1 + h2 { ... kode css ..}

Meningkatkan pengetahuan tentang CSS

Salah satu cara untuk meningkatkan pengetahuan tentang CSS adalah dengan melihat bagaimana orang lain (yang lebih berpengalaman tentunya) menyusun kode CSS mereka. Saran saya, jika Anda serius mempelajari CSS dan kebetulan menggunakan browser Firefox, maka segera install add-on Web Developer. Karena dengan tambahan add-on Web Developer maka Anda bisa melihat kode CSS suatu halaman dengan hanya menekan klik kanan Web Developer > CSS > View CSS (CTRL+SHIFT+C). Tentunya tidak hanya dilihat, tapi juga kode CSS tersebut dipelajari.

Download file latihan

Jika malas mengetikkan kode atau mengalami kesulitan saat mencoba, Anda bisa download file latihan css selector.

Contoh syntax CSS. Image from photobucket

Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value.

selector {
    property : value;
}

Selector adalah elemen HTML yang akan diberikan style. Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan Value adalah nilai dari atribut tersebut. Untuk memberikan gambaran yang lebih jelas, berikut contoh kodenya:

body {
    background-color:#cccccc;
    font-family: "Calibri", Verdana, Tahoma;
}

Kode CSS diatas bisa berarti elemen body (tag <body>) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.

Inheritance/Pewarisan

Maksud dari Interitance pada CSS adalah begitu kita memberikan style pada elemen body, maka elemen yang didalamnya akan mengikuti style dari elemen body kecuali elemen tersebut diberi style tertentu.

Misalnya saja ada file html seperti berikut :

<html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
    body {
        background-color:#cccccc;
        font-family: "Calibri", Verdana, Tahoma;
    }
</style><head>
<body>
    <h1>Halo apa kabar</h1>
    <p>paragraf halo apa kabar</p>
</body>
</html>

Dari contoh kode diatas, kita memberikan style pada elemen body (tag <body>). Dengan begini, maka tag-tag HTML yang ada diantara <body> dan </body> (tag <h1> dan tag <p>) akan mengikuti style <body>, yaitu memiliki warna latar abu-abu dan menggunakan font Calibri. Agar heading (tag h1) memiliki style yang berbeda, misalnya saja heading menggunakan font Times New Roman, maka harus dibuatkan style lagi khusus untuk heading. Berikut contoh kodenya:

<html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
    body {
        background-color:#cccccc;
        font-family: "Calibri", Verdana, Tahoma;
    }
    h1 {
        font-family: "Times New Roman";
    }
</style><head>
<body>
    <h1>Halo apa kabar</h1>
    <p>paragraf halo apa kabar</p>
</body>
</html>

Pada contoh diatas, ditambahkan style baru untuk elemen heading 1. Dengan begini, heading akan memiliki font Times New Roman, tidak lagi mengikuti style dari elemen induxnya (body).

Walaupun begitu, ada beberapa property pada CSS yang tidak akan di-warisi oleh elemen didalamnya, misalnya saja property margin seperti pada kode dibawah:

body {margin:20px}

Misalnya kita menambahkan property margin pada style body, maka heading 1 dan paragraf tidak akan memiliki margin sebanyak 20px, hanya elemen body saja.

Kombinasi Selector

Untuk menghindari pengetikan ulang style CSS, elemen HTML yang memiliki style yang sama bisa menggunakan selector yang sama dengan cara menambahkan nama elemen dan dipisahkan dengan tanda koma, contohnya :

h1, h2, h3, h4, h5, h6 {
     color: #009900;
     font-family: Georgia, sans-serif;
}

Pada contoh diatas, heading 1, heading 2, sampai heading 6 diset menggunakan style yang sama.

Memberikan Komentar pada CSS

Untuk memberikan komentar pada kode CSS, dimulai dengan tanda /* dan diakhiri dengan tanda */. Contohnya saja:

/* Ini adalah komentar */

Komentar pada CSS tidak akan diproses oleh browser. Komentar berguna untuk mengetikkan sesuatu pada file CSS tapi Anda tidak ingin teks tersebut diproses.

Seperti halnya mempelajari HTML, mempelajari CSS juga bukan merupakan hal yang sulit. HTML dan CSS bukan bahasa pemrograman karena tidak terdapat percabangan (if … else … then) ataupun perulangan ( for, while, do), jadi CSS bukan sesuatu yang sulit untuk dipelajari, hanya perlu banyak latihan. Jika Anda belum terlalu jelas apa itu CS, silahkan lihat Pengenalan CSS.

sumber: CSS Basic, W3Schools

Cascading StyleSheet. Image from Adobe Design Center

HTML/xHTML sebenernya digunakan untuk memberi tahu browser bagaimana sebuah tag HTML ditampilkan di browser. Misalnya saja tag HTML <i>Teks miring</i>, tag tersebut sama artinya dengan “Halo web browser, teks ini tolong dicetak miring”. Dengan begitu, web browser yang Anda gunakan akan menampilkan teks secara miring(italic). Contoh lainnya, tag HTML <b>halo semua</b>, sama artinya dengan “Browser, tolong teks halo,semua ditampilkan dengan cetak tebal” yang selanjutnya web browser akan menampilkannya dengan cetak tebal.

Tapi bagaimana jika Anda ingin menampilkan teks tersebut agar tampil dengan teks yang miring dan bercetak tebal? Jika menggunakan HTML, solusinya adalah menuliskan tag HTML sebagai berikut :

<i><b>teks ini blod dan italic</b></i>

Yup, masalah selesai dengan tag tersebut. Tapi bagaimana jika Anda memiliki banyak teks yang harus dicetak tebal sekaligus miring? Apakah dengan menuliskan tag HTML seperti contoh diatas? Bisa saja tapi sangat tidak direkomandasikan dan tidak ada orang yang melakukan hal seperti itu. Selain karena harus mengetikkan berulang-ulang, juga akan memperbesar ukuran file HTML. Solusi untuk permasalahan diatas adalah dengan menggunakan CSS.

CSS sebenarnya berguna untuk memberikan perintah tambahan terhadap web browser agar suatu teks/elemen HTML bisa ditampilkan dengan tampilan tertentu sesuai yang dideskripsikan pada perintah stylesheet. Intinya, CSS berfungsi untuk memberikan style pada suatu tag/elemen HTML.

Ada 3 cara dimana kita bisa meletakkan kode CSS, yaitu:

Internal StyleSheet

Internal StyleSheet adalah sebutan kalau kita meletakkan kode CSS di bagian head sebuah file HTML. Atau dengan kata lain, kita meletakkan kode CSS diantara tag <head> dan tag </head>. Formatnya bisa seperti contoh dibawah:

<head
<style type="text/css">
.. letak kode css ..
</style>
</head>
<body>

Dengan meletakkan kode CSS pada bagian head, berarti halaman HTML yang Anda buat akan mengandung kode CSS. Cara ini bagus jika Anda hanya perlu untuk memberikan style pada halaman HTML itu saja. Jika Anda ingin agar tiap halaman HTML memiliki style yang berbeda-beda, Anda bisa menggunakan cara ini.

Inline Style

Inline Style berbeda dengan Internal StyleSheet. Jika Internal StyleSheet berarti Anda meletakkan kode CSS pada file HTML (bagian head), maka Inline Style berarti Anda meletakkan kode CSS pada elemen HTML. Untuk lebih memberikan gambaran seperti apa Inline Style, berikut adalah contoh kodenya:

<p style="color:#ff0000;">teks warna merah </p>

Hasil dari kode diatas adalah:

teks warna merah

Seperti yang bisa Anda lihat, disini kode CSS diletakkan langsung pada elemen paragraf (tag <p>), dengan menambahkan atribut style dan mengetikkan kode CSS. Cara ini bagus jika Anda ingin suatu elemen memiliki tampilan yang berbeda. Misalnya saja Anda ingin ada teks yang berwarna merah dan ada teks yang berwarna biru.

External StyleSheet

External StyleSheet adalah peletakkan kode CSS pada file yang berbeda. Dimana nantinya Anda akan membuat sebuah file khusus yang berekstensi .css dimana nantinya kode-kode CSS akan diletakkan pada file tersebut. Setelah kode CSS diketikkan pada file tersebut, Anda bisa menghubungkan file CSS dengan file HTML yang Anda buat dengan mengetikkan perintah:

<link rel="stylesheet" type="text/css" href="letak file .css" />

Perintah diatas diketikkan pada bagian head. Atau dengan cara kedua seperti berikut ini:

<style type="text/css">
@import url(letak file .css)
</style>

Dengan menggunakan Eksternal StyleSheet, maka file HTML akan terhubung dengan file CSS. Jika Anda perlu untuk mengubah suatu style, cukup dengna mengubah kode CSS pada file .css. Ada beberapa alasan mengapa cara ini dianjurkan:

• Maintenance kode CSS lebih mudah
• Mengurangi ukuran file HTML, karena kode CSS diletakkan pada file yang berbeda
• Dapat menghemat bandwidth

Yang mana yang lebih baik ?

Dengan banyaknya cara untuk meletakkan kode CSS Anda mungkin bertanya cara yang mana yang sebaiknya dipilih? Jawabannya adalah tergantung kebutuhan. Tapi saya sendiri lebih menyukai menggunakan External StyleSheet karena beberapa alasan yang sudah disebutkan tadi.

Bagaimana jika ketiga cara diatas digabungkan?

Jika ketiga cara diatas digabungkan atau jika Anda menggunakan 2 cara, maka web browser akan membuat style baru hasil dari penggabungan style tersebut dengan prioritas pertama ada pada Inline Style, kedua adalah Inline StyleSheet dan terakhir adalah External StyleSheet.

Maksud dari prioritas disini adalah jika pada External StyleSheet anda mengetikkan kode CSS untuk menampilkan teks warna merah, sedangkan di Internal StyleSheet Anda mengetikkan kode CSS untuk menampilkan teks warna biru, maka hasil yang tampil adalah teks warna biru akan prioritas Internal StyleSheet lebih diutamakan daripada External StyleSheet.

Tampilan berbeda di tiap web browser

Semakin Anda mendalami CSS maka Anda akan semakin sadar bahwa setiap browser mempunyai cara berbeda dalam menterjemahkan kode CSS. Inilah yang membuat sedikit kerja keras bagi para web designer untuk membuat tampilan sebuah halaman bisa tampil sama pada browser yang berbeda.

Pada artikel berikutnya saya akan membahas tentang Syntax CSS. Syntax CSS adalah bentuk kode CSS. Untuk mendapatkan update terbaru, jangan lupa untuk berlangganan via feed. Jika ada pertanyaan silahkan ditanyakan via komentar.

Dreamweaver

Rasanya semua orang pasti sudah kenal dengan yang namanya Adobe Dreamweaver. Pada versi terbarunya yaitu CS4, Dreamweaver memiliki tampilan yang lebih menarik. Dan beberapa fitur tambahan seperti Subversion, untuk keperluan versioning control system. Dan yang paling membedakan Dreamweaver CS4 dengan versi sebelumnya adalah fitur yang lebih men-support Javascript/AJAX. Tidak hanya Spry seperti pada versi CS3.

Informasi lain tentang Dreamweaver:

• Membuat web dengan Dreamweaver
• Tutorial Macromedia Dreamweaver
• Tutorial membuat aplikasi CRUD berbasis PHP dan MySQL dengan Dreamweaver

Netbeans PHP IDE

Netbeans PHP IDE bisa didownload secara gratis dengan ukuran hanya 21 mb di situs Netbeans PHP. Dukungan terhadap PHP bisa dibilang sangat bagus. Selain mendukung PHP, Netbeans PHP IDE juga ter-integrasi dengan teknologi web seperti HTML, CSS, Javascript, dan MySQL. Memiliki fitur Debugging dan versioning system (CVS, Mercurial, Subversion), Project management, dan masih banyak fitur lainnya. Dan yang lebih bagus lagi adalah Netbeans PHP IDE ini bersifat gratis, dan juga open source. Informasi lain tentang Netbeans PHP:

• Debugging PHP script dengan Netbeans

PHP Designer

Dilihat dari nama softwarenya sudah bisa dipastikan bahwa PHP Designer 2008 sangat bagus untuk keperluan edit web PHP. Memiliki semua fitur untuk keperluan editing PHP. Tampilan interface pun bisa diubah dengan theme yang telah disediakan. Dan yang paling bagus dari PHP Designer 2008 adalah software ini sangat ringan, jadi tidak akan memberatkan memori CPU Anda.

EclipsePDT

EclipsePDT adalah singkatan dari Eclipse PHP Development Toolkit. Modul PHP untuk IDE Eclipse. Eclipse sendiri adalah IDE untuk membuat aplikasi Java. Tapi bisa dikembangkan lebih jauh dengan menginstall modul-modul tertentu.

Artikel lain tentang Eclipse PDT:

• PHP debugger dengan Eclipse + XDebug

PHPEclipse

Plugins lain PHP untuk IDE Eclipse. Tetapi Eclipse PDT masih lebih baik dibandingkan PHPEclipse. Jika Anda ingin mencoba plugin yang satu ini, silahkan download PHP Eclipse.

Zend Studio

Aplikasi buatan Zend Technologies ini sangat pas untuk keperluan membuat aplikasi web dengan PHP. Memiliki semua fitur yang dibutuhkan. Adanya fitur WYSIWYG seperti di Dreamweaver membuat Zend Studio serasa Dreamweaver dengan dukungan penuh terhadap PHP. Jika ingin mencoba Zend Studio, Anda bisa mendownload di halaman download Zend Studio.

PHP for Visual Studio

Jika Anda sudah terlanjur terbiasa dengan IDE Visual Studio dan ingin mencoba PHP tanpa berubah IDE, maka PHP for Visual Studio ini adalah solusinya. Software dari jxc.software ini bisa di-install berupa aplikasi stand-alone ataupun sebagai plugins dari Visual Studio.

Rapid PHP

Rapid PHP bisa dibilang mirip dengan PHP Designer. Pada website resminya, Rapid PHP mengatakan bahwa aplikasi ini sangat ringan dan cepat. Dan memang setelah dicoba aplikasi termasuk ringan. Memiliki fitur yang juga mirip dengan PHP Designer.

Notepad++

Notepad++ adalah salah satu program text editor yang sangat bagus. Notepad++ mendukung banyak format file, termasuk PHP dan juga SQL. Tentu saja masih banyak lagi bahasa lain yang didukung oleh Notepad++.

Aplikasi Notepad++ sangat cocok jika Anda hanya ingin melakukan pengeditan kecil terhadap sebuah file .php tanpa perlu loading aplikasi berat seperti Netbeans PHP IDE.

Sumber lain tetang Notepad++ :

• Notepad++, pengganti Notepad
• Notepad++, pengganti Notepad
• Notepad++

Komodo Edit

Komodo Edit adalah software editor-based yang bisa didapatkan secara gratis dari Active State. Software ini bersifat gratis, sedangkan versi berbayarnya adalah Komodo IDE. Tentunya Komodo IDE memiliki tambahan fitur yang lebih daripada Komodo Edit. Silahkan lihat perbandingan Komodo Edit dengan Komodo IDE.

Terima kasih buat hb2 atas informasinya. Artikel lain tentang Komodo Edit:

• Komodo Edit 5.0, Performa Editor Lebih Cepat
• Komodo Edit

Akhir kata, jika ada software yang biasa Anda pakai dan tidak tercantum disini, Anda bisa memberi tahu melalui komentar.

Buka Google Reader. Kemudian login menggunakan username dan password dari akun Google Anda. Jika belum memiliki akun Google, segera daftar. Setelah sukses login, maka akan terlihat tampilan Google Reader.

Buka sebuah website yang mempunyai sebuah feed. Sebagai contoh saya buka situs detik.com. Kemudian cari dan klik link feednya.

Atau jika Anda bingung menemukan link feed sebuah website, cukup dengan melihat bagian kanan address bar browser yang anda gunakan (saya menggunakan Mozilla Firefox). Umumnya link feed sebuah website menggunakan icon berwarna oranye seperti ini.

Secara default, Firefox akan mengkonfirmasi aplikasi apa yang ingin anda pakai. Karena kita mencoba Google Reader, jadi pilihlah Google dari menu pilihan. Setelah itu klik Subscribe Now.

Setelah itu Anda akan ditanyakan kembali apakah update ingin ditampilkan di Google Homepage atau Google Reader. Sekali lagi, karena kita menggunakan Google Reader, pilih Add to Google Reader. Hasilnya seperti gambar dibawah.

Kemudian, jika Anda ingin menambahkan langganan feed dari sebuah website, selain dengan mengulang langkah diatas, Anda juga bisa dengan mengeklik tombol Add subscription pada Google Reader. Kemudian masukkan alamat websitenya.

Feed adalah sebuah format data bertipe XML yang digunakan untuk memberi tahu pengunjung tentang update terbaru dari sebuah website secara berkala.

Cara lama

Pada gambar diatas, A adalah komputer Anda, B adalah sebuah blog dan C adalah website lainnya (misal: website berita). Dulu, untuk mendapat Informasi terbaru dari sebuah website, pengguna Internet harus membuka website tersebut di browsernya. Tapi apabila tidak ada update terbaru dari website tersebut, maka pengguna akan rugi waktu untuk mengecek dan juga rugi bandwidth (untuk yang pembayaran Internetnya berdasarkan volume ).

Arah panah menunjukkan bahwa pengguna yang harus aktif mengunjungi blog (B) dan website (C). Bandingkan dengan cara yang terbaru.

Cara baru

Pada gambar diatas, pengguna Internet mendapatkan informasi update terbaru dari blog (B) dan website (C) tanpa harus mengunjungi website tersebut. Bagaimana bisa ? hal ini bisa dilakukan karena blog (B) dan website (C) mempunyai fitur feed. Dimana pengguna Internet harus terlebih dahulu melakukan subscribe feed dari website tersebut. Subscribe ke feed sebuah website bisa dilakukan dengan menggunakan aplikasi (biasanya disebut dengan feed reader). Baik aplikasi berbasiskan web ataupun berbasiskan desktop.

Jadi, cukup dengan membuka aplikasi feed reader tersebut dan Anda pun akan mendapatkan update terbaru dari website/blog langganan Anda.

Dan bagusnya, feed tidak hanya bisa dibaca dari komputer. Melainkan juga bisa dibaca melalui media lain, seperti handphone, PDA, smartphone, dan lain-lain. Selama dalam perangkat tersebut terdapat aplikasi feed reader dan terkoneksi dengan Internet, maka mendapatkan update langsung melalui feed akan bisa dilakukan.

Penjelasan dari sumber lain

Masih banyak website ataupun blog yang menjelaskan tentang apa itu feed. Berikut adalah daftar artikel tersebut:

• Pengertian RSS feed dan cara berlangganan
• Sedikit tentang RSS feed
• Memanfaatkan feed reader dalam berblog
• Tutorial Akregator (KDE RSS feed reader)
• Google Reader
• Apa itu RSS dan kegunaannya
• RSS: Pedang Bermata Dua
• Mengenal Mahluk RSS Feed

Well styled color scheme
Menghasilkan skema dan palet warna dari satu warna dasar. Tersedia banyak mode skema warna.

Color schemer online v2
Membantu menghasilkan skema warna dari sebuah warna dasar. Pilih satu warna dasar kemudian Color schemer online v2 akan menghasilkan warna-warna lain yang cocok untuk dipadukan.

Color blender
Menghasilkan skema warna dari campuran 2 warna dasar.

Color combo
Memilih secara manual warna-warna dan menampilkannya di palet. Warna hasil kombinasi bisa dibagi-pakai dengan sebuah link.

Color from images
Website ini bisa menampilkan warna yang dipakai sebuah gambar dan menghasilkan skema warna dari gambar tersebut.

Pic2Color
Webtool yang juga menghasilkan skema warna dari sebuah gambar. Bahkan webtool yang satu ini mampu untuk mengaplikasikan skema warna suatu gambar ke gambar yang lain.

4096 color wheel
Setelah memilih warna, maka 4096 color wheel akan memberi warna versi web-safe, web-smart, dan unsafe.

Kuler
Webtool penghasil warna dari Adobe ini menggunakan teknologi flash. Selain bisa dicoba langsung di websitenya, kuler juga bisa digunakan di desktop. Tentunya komputer anda harus terinstal Adobe AIR terlebih dahulu.

Beberapa webtool lainnya

Jika kurang, masih ada beberapa website sumber inspirasi warna yang lain :

PageTutor color picker 3.1
Menampilkan warna-warna standar berikut dengan preview-nya.

Unsafe color match
Memilih warna dengan langsung melihat preview jika warna tersebut digunakan di halaman web.

Nantinya, blog ini akan berisi tulisan-tulisan yang membahas segala hal yang berhubungan dengan web. Mulai dari desain, kode, hingga hal-hal yang berbau server.