Cara menginstal PHP 5.3.6

Untuk menginstal PHP sebelumnya anda harus sudah menginstal Apache Server dan pastikan sudah berjalan dengan baik.

Klik link berikut untuk mendownload php: http://windows.php.net/download untuk php versi yang lama dapat di download di php archives atau museumnya php.

PHP ada 2 kompilasi yang dikeluarkan yaitu VC6 (Visual C++ 6.0) dan VC9 (Visual Studio C++ 2008).

Untuk Apache.org binary, dianjurkan untuk menggunakan yang VC6 sedangkan VC9 adalah untuk IIS server.

Ketika mendownload pilih yang versi Zip dengan Thread Safe.

Jika ingin menggunakan PHP yang VC9 maka Apachenya harus di update terlebih dahulu. Ikuti link berikut untuk mengetahui bagaimana cara upgrade Apache untuk PHP yang VC9.

Setelah mendapatkan versi php yang anda inginkan, buat sebuah folder di “C:\Apache” dengan nama “php” sehingga menjadi C:\Apache\php, kemudian dengan menggunakan winzip atau winnar ekstrak file yang telah kita download ke dalam folder tersebut.

Kemudian di dalam folder php cari file “php.ini-dist” untuk PHP versi 5.3.+ gunakan “php.ini-production” karena pengaturan tersebut merupakan pengaturan standar, baik untuk kecepatan maupun keamanan.

Ganti namanya menjadi “php.ini” double klik untuk membuka file tersebut dan cari baris seperti berikut:

doc_root =

supaya lebih cepat, di menu notepad klik “edit” kemudian “find” masukkan “doc_root” klik find. Kemudian masukkan folder website yang telah kita buat sebelumnya sehingga menjadi:

doc_root ="D:\My Websites"

Kemudian cari baris berikutnya:

; extension_dir = "ext"

Isikan sehingga menjadi:

extension_dir = "C:\Apache\php\ext"

Agar PHP terhubung dengan server maka kita harus mengedit file configurasi Apache Server yang berada di “C:\Apache\conf\httpd.conf” buka file tersebut kemudian cari baris seperti dibawah ini:

<IfModule dir_module>
DirectoryIndex index.html
</IfModule>

Tambahkan index.php dengan dibatasi oleh sebuah spasi sehingga menjadi:

<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>

Kemudian tambahkan yang berikut ini diantara <IfModule mime_module> dan </IfModule>, sehingga menjadi seperti pada gambar dibawah:

ScriptAlias /php/ "C:/Apache/php/"
AddType application/x-httpd-php .php .php5
Action application/x-httpd-php "/php/php-cgi.exe"
SetEnv PHPRC "C:/Apache/php"

Diakhir dari file httpd.conf tersebut tambahkan yang berikut ini:

PHPIniDir "C:/Apache/php/"
LoadModule php5_module "C:/Apache/php/php5apache2_2.dll"

Simpan file tersebut, kemudian Restart server.

Agar Windows dapat mengetahui lokasi file system dan konfigurasi dari PHP maka kita harus menambahkan lokasi dari directory PHP tersebut.

Sebenarnya kita bisa saja memindahkan file 2x tersebut ke folder Windows atau System32, tapi tentu akan jadi rumit ketika kita ingin meng-upgrade php tersebut yang ujung-ujungnya malah system Windows kita yang rusak.

Jadi jalan terbaiknya adalah dengan memasukkan path atau lokasi php kita ke System Windows. Caranya? ikuti langkah-langkah berikut:

Buka “System Properties” dengan cara mengklik kanan “My Computer” pilih “Properties”

Kemudian pilih tab “Advanced” kemudian klik “Environment Variables”

Di dalam “System Variables” cari variable yang bernama “Path” klik edit atau double klik untuk mengedit.

Setelah Edit System Variable terbuka di dalam “Variable value” tambahkan “C:\Apache\php” dengan dibatasi oleh tanda titik koma “;” klik OK.

Secara standart PHP akan menggunakan System Temp sebagai temporary folder. Saya pernah mengalami script yang tidak bekerja setelah saya mengosongkan Windows Temp folder. Jadi agar hal ini tidak terjadi kita akan membuat temporary folder di dalam folder Apache.

Pertama buat sebuah folder di “C:\Apache” dengan nama “temp” di dalam folder “temp” tersebut buat dua buah folder dengan nama “upload” dan “session” sehingga kita akan memiliki dua buah folder baru:

“C:\Apache\temp\upload”
“C:\Apache\temp\session”

Kemudian buka file pengaturan PHP “C:\Apache\php\php.ini” cari baris seperti yang ada di bawah ini:

;upload_tmp_dir =

Isikan sehingga menjadi:

upload_tmp_dir="C:\Apache\temp\upload"

Selanjutnya cari kembali:

;session.save_path = "/tmp"

Isikan sehingga menjadi:

session.save_path="C:\Apache\temp\session"

Agar system dapat membaca semua perubahan ini, Komputer kita harus di “Restart.”

Setelah komputer direstart sekarang kita akan menguji apakah server dan php telah terhubung dengan baik, buka notepad kemudian masukkan kode berikut ini:

<?php
phpinfo();
?>

Simpan file tersebut ke D:\My Websites dengan nama “index.php” jangan lupa ketika menyimpannya ganti save as type-nya dengan “all files” karena jika tidak maka filenya nanti akan menjadi “index.php.txt”

Hapus file “index.html”jika masih ada di dalam folder tersebut.

Kemudian buka browser ketik di address bar “localhost” atau “http//localhost/”

Jika browser menampilkan seperti gambar berikut ini berarti PHP telah terhubung ke Server dengan baik, again Congratulations…

Cara menginstal Apache Server

Di modul ini kita akan mempelajari bagaimana cara untuk menginstal Apache Server, PHP dan MySQL dibawah OS Windows, sebagai referensi saya menggunakan OS Windows XP SP3 32Bit.

Dibawah ini adalah versi dari program 2x yang akan kita gunakan dalam simulasi ini:

- Apache Server 2.2.22-win32-x86-openssl-0.9.8t.msi
- PHP 5.3.6-Win32-VC9-x86.zip
- MySQL 5.5.14-win32.msi

Apache Server 2.2.22

Pertama yang harus kita lakukan adalah mendownload Apache http://httpd.apache.org/download.cgi. Kemudian pilih seperti yang telah ditandai dengan warna merah dibawah ini:

Setelah selesai di dowmload double klik file tersebut untuk memulai penginstalasian.

Tanpa basa-basi klik Next.

Tandai "I accept the terms in the lisense agreement," kemudian klik Next.

Anda bisa membaca penjelasan dan petunjuk tentang Apache Server, kemudian klik Next

Selanjutnya isikan dengan data seperti berikut ini:

Network Domain: localhost
Server Name: localhost
Administrator’s Email Address: admin@localhost

Tandai "for all user, on port 80, as a Service" kemudian klik Next

Pilih "Typikal" untuk tipe penginstalasian.

Kemudian klik "Change" untuk mengubah folder tujuan penginstalasian.

Sebagai contoh kita akan menginstal program ini ke "C:\Apache" nanti untuk PHP dan MySQL akan kita instal di folder yang sama juga, sehingga akan kelihatan lebih simpel, mudah diingat, aman dan terkendali. Setuju?

Jadi buat sebuah folder baru di drive C dengan nama "Apache"

Atau anda juga bisa langsung mengetikkan "C:\Apache\" di dalam Folder name kemudian klik OK.

Setelah kita mengubah folder tujuan penginstalasian tersebut maka akan terlihat seperti gambar diatas.

Kalau anda sudah merasa yakin klik Next untuk melanjutkan.

Kemudian klik Install untuk menginstal Apache Server.

Tunggu beberapa saat, setelah selesai klik "Finish" Apache Server siap digunakan.

Sebuah icon akan tampil di system tray seperti pada gambar dibawah ini. Dengan mengklik kiri icon ini, kita dapat menghentikan (stop), memulai (start) dan memulai kembali (restart) Apache Server.

Perlu diingat bahwa setiap kali kita melakukan perubahan pada file pengaturan (configuration file) selalu lakukan "Restart" atau dengan mengklik stop kemudian start sehingga perubahan segera di baca oleh Server.

Untuk mengetahui bekerja tidaknya Apache Server tersebut buka browser dan ketikkan di address bar "localhost" atau "http://localhost/"

Jika yang ditampilkan adalah seperti gambar berikut ini berarti Apache Server tersebut telah bekerja dengan baik.

Congratulations…

Selanjutnya kita akan melakukan sedikit perubahan pada file pengaturan Apache Server ini. File pengaturannya tersebut ada di: "C:\Apache\conf\httpd.conf" atau kita bisa mengaksesnya dari:

Start Menu > All Programs > Apache HTTP Server 2.2 > Configure Apache Server > Edit the Apache httpd.conf Configuration File.

Ketika kita mengetikkan "http://localhost/" di browser, file yang ditampilkan tersebut berada di "C:\Apache\htdocs" ini yang disebut dengan "Documentroot" jadi file yang bernama index didalam folder ini akan secara otomatis ditampilkan oleh browser.

Karena kita nantinya akan sering mengakses folder ini, maka ada baiknya kita menggantinya ke sebuah folder tersendiri yang lebih ringkas dan mudah mengaksesnya.

Mengubah Apache Document Root

Buat sebuah folder di drive D dengan nama My Websites.

Kemudian buka file konfigurasi Apache Server "httpd.conf"

Cari baris yang seperti dibawah ini:

DocumentRoot "C:/Apache/htdocs"

Ubah menjadi:

DocumentRoot "D:/My Websites"

Kemudian cari kembali baris seperti berikut:

<Directory "C:/Apache/htdocs">

Ubah menjadi

<Directory "D:/My Websites">

Buka Notepad salin kode dibawah ini:

<html><body><h1>Berhasil!!!</h1></body></html>

Kemudian simpan file tersebut ke D:\My Websites dengan nama index.html, jangan lupa ketika menyimpannya ganti save as type-nya dengan "All files" karena jika tidak maka filenya nanti akan menjadi index.html.txt

Sekarang restart server. Kemudian di browser ketik kembali "http://localhost/" dan Enter.

Jika tidak ada problem maka browser akan menampilkan seperti berikut:

Selanjutnya kita akan menginstal PHP 5.3.6, untuk Apache Server ini gunakan PHP yang versi VC6. Bila menggunakan PHP versi VC9 Apache Servernya harus di update terlebih dahulu.

Cara menginstal phpMyAdmin

Sebelum menginstal phpMyAdmin, pastikan bahwa anda sudah mengintal Apache Server, PHP dan MySQL.

Klik link berikut untuk mendownload phpMyAdmin http://www.phpMyAdmin.net

Klik download, kemudian pilih tipe file, dalam hal ini kita akan memilih “all-language-zip” agar bisa menggunakan Bahasa Ibu kita.

Setelah filenya selesai kita download, dengan menggunakan Winzip atau Winnar ekstrak file tersebut ke dalam folder “documentroot” atau “D:\My Websites” yang telah kita buat sebelumnya, sehingga nanti file-file tersebut akan berada di folder “D:\My Websites\phpMyAdmin-2.11.5.2-all-languages”

Seperti kita lihat nama folder tersebut terlalu panjang dan rumit, jadi agar lebih simpel dan gampang diingat ganti nama folder tersebut menjadi phpMyAdmin, sehingga akan menjadi “D:\My Websites\phpMyAdmin.”

Update untuk phpMyAdmin versi 3.4.10.1

Buka Notepad salin code berikut:

<?php
/* vim: set expandtab sw=4 ts=4 sts=4: */
/**
* phpMyAdmin sample configuration, you can use it as base for
* manual configuration. For easier setup you can use scripts/setup.php
*
* All directives are explained in Documentation.html and on phpMyAdmin
* wiki <http://wiki.cihar.com>.
*
* @version $Id: config.sample.inc.php 10142 2007-03-20 10:32:13Z cybot_tm $
*/
/*
* This is needed for cookie based authentication to encrypt password in
* cookie
*/
$cfg['blowfish_secret'] = ''; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */
/*
* Servers configuration
*/
$i = 0;
/*
* First server
*/
$i++;
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = 'xxx'; // Ganti xxx dengan MySQL Password
/* Authentication type */
$cfg['Servers'][$i]['auth_type'] = 'config';
/* Server parameters */
$cfg['Servers'][$i]['host'] = 'localhost';
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
/* Select mysqli if your server has it */
$cfg['Servers'][$i]['extension'] = 'mysql';
/* User for advanced features */
$cfg['Servers'][$i]['controluser'] = 'root';
$cfg['Servers'][$i]['controlpass'] = 'xxx'; // Ganti xxx dengan MySQL Password
/* Advanced phpMyAdmin features */
$cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';
$cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark';
$cfg['Servers'][$i]['relation'] = 'pma_relation';
$cfg['Servers'][$i]['table_info'] = 'pma_table_info';
$cfg['Servers'][$i]['table_coords'] = 'pma_table_coords';
$cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages';
$cfg['Servers'][$i]['column_info'] = 'pma_column_info';
$cfg['Servers'][$i]['history'] = 'pma_history';
$cfg['Servers'][$i]['designer_coords'] = 'pma_designer_coords';
/*
* End of servers configuration
*/
/*
* Directories for saving/loading files from server
*/
$cfg['UploadDir'] = '';
$cfg['SaveDir'] = '';
?>

Setelah mengisikan password MySQL, simpan file tersebut ke folder “phpMyAdmin” atau ke “D:\My Websites\phpMyAdmin” dengan nama “config.inc.php”

Selanjutnya buka file pengaturan php.ini (C:\Apache\php\php.ini),

Di bawah Dynamic Extensions cari kedua extension berikut ini:

;extension=php_mbstring.dll
;extension=php_mcrypt.dll

Hilangkan titik koma “;” yang berada di depannya untuk mengaktifkan:

extension=php_mbstring.dll
extension=php_mcrypt.dll

Simpan file tersebut kemudian restart server.

Sekarang buka browser ketik “http://localhost/phpMyAdmin” di address bar, dan Enter.

Update untuk phpMyAdmin versi 3.4.10.1

 

Sumber :  http://htmlcssguides.com/cara-menginstal-phpmyadmin

Membuat MySQL Database di Localhost

Untuk membuat MySql database di Localhost dapat kita lakukan dengan dua cara yaitu melalui Command Promp atau melalui phpMyAdmin.

Membuat database melalui Command Promp.

Dari menu “Start” pilih “Run” kemudian ketikkan “cmd” dan Enter.

Setelah shell promp terbuka ketik “mysql -u root -p” kemudian Enter masukkan password MySql.

Maka kita akan masuk ke MySql promp, dalam contoh ini kita akan membuat database dengan nama “mydb”. Ketik “create database mydb;” kemudian Enter.

Untuk membuat table dan memasukkan data ke dalam database tersebut kita harus mengaktifkan database tersebut terlebih dahulu dengan mengetikkan “use mydb;”

Namun untuk kali ini kita tidak akan membahas lebih jauh karena sesuai topiknya adalah membuat database. Untuk keluar anda bisa mengetikkan “exit” atau “\q” kemudian Enter.

Untuk lebih jelasnya anda bisa memperhatikan gambar tentang membuat database melalui command promp berikut ini.

Membuat database melalui phpMyAdmin.

Ketikkan alamat phpMyAdmin di address bar browser, bila anda mengikuti Cara Menginstal phpMyAdmin yang ada di blog ini maka alamatnya adalah “http://localhost/phpmyadmin”.

Setelah phpMyAdmin terbuka, ikuti langkah-langkah seperti gambar berikut ini:

1. Klik Database,
2. Masukkan Nama database,
3. Untuk Collation pilih Unicode multilingual “utf8_general_ci”
4. Klik tombol Create.

Maka pada list database akan bertambah dengan database yang baru kita buat.

 

 Sumber :  http://htmlcssguides.com/membuat-mysql-database-di-localhost

Cara menginstal MySQL

Sebelum menginstal MySQL pastikan bahwa Apache Server dan PHP sudah terinstal dan berjalan dengan baik.

Klik link berikut ini untuk mendownload MySQL http://dev.mysql.com/downloads/mysql/

Ketika mendownload pilih yang Windows MSI Installer versi GA (Generally Available) Release.

Setelah download selesai double klik file tersebut untuk memulai penginstalasian.

Klik Next untuk melanjutkan penginstalasian.

Silahkan dibaca dan disimak surat perjanjian bila anda setuju dengan isi surat perjajian tersebut tanda "I accept the terms in the License Agrement" kemudian klik Next.

Pilih "Custom" untuk tipe penginstalasian.

Klik "Browse" untuk mengubah folder tujuan penginstalasian.

"Look in" tujukan ke C:\Apache, kemudian buat sebuah folder dengan nama "mysql" atau bisa juga langsung mengetikkan "C:\Apache\mysql\" didalam "Folder name" kemudian klik OK.

Setelah kita membuat foldernya maka akan terlihat seperti gambar diatas. Masih ada kesempatan untuh mengubah seandainya masih ada yang kurang tepat, tapi jika semua sudah beres dan anda sudah yakin klik Next.

Klik Install untuk mulai menginstal MySQL. Tunggu hingga proses penginstalasian selesai.

Berikutnya akan muncul 2 jendela tentang MySQL Enterprise klik More untuk mengetahui lebih lanjut atau klik Next untuk melanjutkan penginstalasian.

Tandai Launch the MySQL Instance Configuration Wizard kemudian klik Finish.

Klik Next,

Pilih Detailed Configuration, kemudian Next.

Pilih Develover Machine, kemudian Next.

Tandai Multifunctional Database, kemudian Next.

Biarkan saja tanpa perubahan, klik Next.

Pilih Decision Support DSS/OLAP untuk membatasi koneksi, klik Next

Tandai Enable TCP/IP Networking dan Enable Strict Mode, kemudian Next.

Pilih Best Support For Multilingualism, klik Next.

Tandai Install As Windows Service. Untuk Servise Name sesuaikan dengan Versi MySQL anda. Tandai Include Bin Directory In Windows PATH agar kita bisa langsung mengakses MySQL dari Command prompt. Klik Next untuk melanjutkan.

Pilih Modify Security Settings, kemudian isikan password. Password ini adalah yang akan kita gunakan nantinya setiap kali mengakses MySQL, jadi jika anda pelupa sebaiknya tulis pasword tersebut di Notepad dan simpan dengan nama "MySQL password" selanjutnya tandai "Enable root access from remote machine", klik Next.

Klik Execute untuk memproses segala pengaturan yang telah kita buat.

Setelah semua berjalan dengan baik maka akan tampil seperti gambar diatas, klik Finish untuk keluar dari penginstalasian.

Untuk mengetahui bahwa MySQL ini sudah bekerja dengan baik buka Command prompt. Klik Start > Run – ketik "cmd" kemudian "Enter" ketik:

mysql -u root -p

Kemudian "Enter" dan masukkan password yang kita masukkan ketika menginstal MySQL dan "Enter". Maka selanjutnya akan tampil seperti berikut ini, berarti MySQL sudah berjalan dengan baik. Sorry nama saya sengaja di coret karena tidak ingin terkenal.

Ketik "\q" untuk keluar dari MySQL dan kemudian "exit" untuk keluar dari Command prompt.

Selanjutnya agar MySQL terhubung dengan Server dan PHP maka kita harus mengedit kembali file konfigurasi.

Buka file pengaturan PHP "C:\Apache\php\php.ini" di bawah Dynamic Extensions cari kedua extension di bawah ini:

;extension=php_mysql.dll
;extension=php_mysqli.dll

Aktifkan kedua extension tersebut dengan cara menghapus titik koma ";" yang berada di depannya:

extension=php_mysql.dll
extension=php_mysqli.dll

Simpan file tersebut kemudian Restart Server.

Buka Notepad kemudian salin kode berikut, setelah mengisikan MySQL password anda, simpan file tersebut ke "D:\My Websites" dengan nama "index.php"

<?php
$dbServer='localhost';
$dbUser='root';
$dbPass='xxxxx'; //Ganti xxxxx dengan password MySQL anda.
$dbName='test';
$link = mysql_connect("$dbServer", "$dbUser", "$dbPass") or die("Koneksi ke server gagal");
print "<h1>Koneksi ke MySQL berhasil!!!</h1>";
mysql_select_db("$dbName") or die("Database tidak ditemukan");
print "<h2>Koneksi ke Database berhasil!!!</h2>";
mysql_close($link);
?>

Kemudian buka browser, di address bar ketikkan "http://localhost/" kemudian "Enter."

Jika bekerja dengan baik maka akan tampil seperti berikut:

Well Done.

Tutoring CSS

CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website.

Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu:

1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:

<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-family:arial;font-size:150%;color:green">

Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p>
<p style="font-style:italic;">Membuat tulisan miring</p>

Maka hasil dari style diatas adalah sebagai berikut:

Membuat tulisan warna biru

Membuat jenis font, ukuran dan warna

Test

Membuat tulisan miring

2. Dengan menaruhnya di dalam header dokumen html.

Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:

<style>
<!--
p { color:green;font-family:arial;font-size:120%;}
-->
</style>

Kemudian kita masukkan style tersebut di antara tag <head> dan </head> :

<html>
<head>
<style>
<!--
p { color:green;font-family:arial;font-size:120%;}
-->
</style>
</head>
<body>
<p>Saat ini saya sedang belajar CSS</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara <p>dan</p>

akan memiliki format yang sama</p>
</body>
</html>

Preview

3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html:

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

Sehingga di dokumen html akan terlihat seperti berikut ini:

<html>
<head>
<title>Titel websiteku</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>

Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.

Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

EN" "http://www.auto-komputer.blogspot.com/loose.dtd">
<html>
<head>
<title>Titel websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman"><!-- div id halaman dimulai -->
<div id="judul"><!-- div id judul dimulai -->
<h1 class="judul">Disini judul websiteku</h1>
<h2 class="sub-judul">Disini sub-judul websiteku</h2>
</div><!-- div id judul berakhir -->
<div id="konten"><!-- div id konten dimulai -->
<div class="kiri"><!-- div class kiri dimulai -->
<p>Disini navigasi bagian kiri</p>
</div><!-- div class kiri berakhir -->
<div class="tengah"><!-- div class tengah dimulai -->
<p>Disini konten websiteku</p>
</div><!-- div class tengah berakhir -->
<div class="kanan"><!-- div class kanan dimulai -->
<p>Disini navigasi bagian kanan</p>
</div><!-- div class kanan berakhir -->
</div><!-- div id konten berakhir -->
<div class="footer"><!-- div class footer dimulai -->
<p>Disini Footer websiteku</p>
</div><!-- div class footer berakhir -->
</div><!-- div id halaman berakhir -->
</body>
</html>

Preview

Yang berada diantara <–– dan ––> hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya.

Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”

#halaman {/* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p {
padding-left: 10px;/* penulisan untuk satu sisi saja */
}

Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.

Sekarang buka file “csstest.html” dengan browser anda.

Preview

Itulah kira-kira secara dasar cara kerja dari CSS untuk mengontrol halaman website.

Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite. Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan refresh browser untuk melihat hasilnya.

Be creative…

Pemograman Dasar CSS

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR  terlebih dahulu . CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita  .

Syntax CSS

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).

• Selector adalah HTML element yang ingin dibuat style nya.

• Declaration  merupakan isi dari property dan nilai dari CSS.

• Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )

Contoh CSS

Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :

p {color:red;text-align:center;}

CSS Coment

Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.

Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik. Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″

#para1
{
text-align:center;
color:red;
}

nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox

Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen. Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama. Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”

Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :

.center {text-align:center;}

kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :

p.center {text-align:center;}

nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.

Cara CSS

Tiga Cara untuk Insert CSS :

1. Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat  mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

dengan eksternal style sheet dapat ditulis dalam  bentuk editor teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :

hr {color:sienna;}

p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}

nb: JANGAN  meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20 px” (bukan“margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.

2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :

<head>
<style type=”text/css”>

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>

</head>

3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :

<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

4. Multiple Style Sheet

Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik.

contoh style sheet eksternal untuk pemilih h3 :

h3
{
color:red;
text-align:left;
font-size:8pt;
}

contoh style sheet internal untuk pemilih h3 :

h3
{
text-align:right;
font-size:20pt;
}

Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan menjadi:

color:red;
text-align:right;
font-size:20pt;

Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.

Beberapa Styles Akan Cascade ke Satu :

gaya dapat ditentukan :

• didalam sebuah elemen HTML
• didalam bagian kepala halaman HTML
• didalam sebuahj file CSS eksternal

Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade” menjadi lembaran baru “virtual” gaya oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:

• Browser default
• Eksternal style sheet
• Internal style sheet (di bagian kepala)
• Inline style (di dalam elemen HTML)

Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi , yang berarti bahwa ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet eksternal , atau dalam browser (nilai default).

nb:  Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal!