Computer Magazine

Saturday, March 6, 2010

CSS (Cascading Style Sheet)

Diposkan oleh Unknown di 2:51 PM Label: CSS

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk perkembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakan secara berurutan, yang kemudian akam membentuk hubungan parent-chile pada setiap style.

Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide WebConsurtium (W3C).CSS memmungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode persentasi yang berbeda, seperti melalui layar, cetak, suara (suwaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat di tampilkan secara berbeda, baik dari segi gaya tampilan atau sekema warna dengan menggunakan CSS.

Keuntungan menggunakan CSS
CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi perulangan tulisan.
Keuntungan :

Memisahkan presentation sebuah dokumen dari content dokumen itu sendiri
Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web
Mempercepat proses rendering/pembacaan HTML

Penempatan CSS

# Inline Style Sheet
Pada posisi ini, CSS di tuliskan di dalam elemen HTML, dan mempunyai ciri-ciri:

- Merupakan style yang terlemah karena editing harus dilakukan dimana inline berada
- Mirip dengan atribut biasa
- Bagian dari <BODY>

Format statemen : selector {property:value}
Nama selector bisa merujuk ke tag HTML yang akan di edit, sebagai contoh apabila tag paragraf di ubah dengan CSS maka dapat ditulis sebagai berikut :

P {property:value}

Contoh penggunaan inline style sheet:

<html>
<head>
<title>Contoh</title>
<head>
<body>
<p style="font-style:italic">tulisan ini tercetak miring</p>
</body>
</html>

Jika source di atasa di jalankan di web browser, maka akan di dapatkan tulisan miring “tulisan ini tercetak mirirng”.

# Embedded Style Sheet
Penulisan CSS di dalam dokumen HTML dan menggunakan tag <style>....</style> yang di tempatkan pada bagian page header atau diantara tag <head>....</head>. Penggunaan embedded style sheet akan memberikan efek terhadap satu halaman saja.
Format statemen:
"HTML tag" {"CSS property":" value"}
"HTML tag" {"CSS propertyI" : " valueI" ; " CSS property2" : " value2" ;...}
Contoh:

<html>
<head>
<title>Embedded Style Sheet</title>
<style type=" text/css" >
P {font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #FF0000}
</style>
</head>
<body>
<p>Tulisan ini menggunakan Embedded Style Sheed</p>
</body>
</html>

# Linked Style Sheet

Style disimpan dalam file yang berbeda dari file HTML dan disimpan dalam format ”*.css”.
Secara umum, linked style memili ciri-ciri:

- Disimpan di file lain sehingga sebuah css dapat dipakai di banyak file HTML lainya
- File hanya berisi style bukan tag HTML

Untuk menggunakan file lain yang berisi css pada file HTML, digunakan tag <link> yang ditempatkan pada bagian tag hedaer atau diantara <head>...</head>
Untuk menggunakan linked style sheet, setidaknya di butuhkan 2 file yang masing-masing berfungsi sebagai file css dan HTML.

Pertama, buat file css dan simpan menggunakan nama mystyle.css denganisi script css sebagai berikut:

P {font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #FF0000}

Selanjutnya buat sebuah file HTML yang disimpan pada direktori yang sama dengan file css yang sudah dibuat dengan script HTML sebagai berikut :

<html>
<head>
<title>Linked Style Sheet</title>
<link rel=" stylesheet" hreft=" mystyle.css" type=" text/css" >
</head>
<body>
<p>Tulisan ini menggunakan Linked Style Sheed</p>
</body>
</html>

Aturan penulisan pada CSS

Sintak CSS dibagi dalam 3 bagian :
Selector{property:value}
Keterangan :

-Selektor berisi tag HTML yang akan di definisikan (body, H1, font, dll)
-Property merupakan atribut yang akan di-set/diubah
-Value merupakan nilai dari property

Contoh penulisan CSS:

H1
{
Font-family : arial;
Color : #0000FF
}

Keterangan:

H1 merupakan selector
Font-family merupakan property, dan
#0000FF merupakan value

Untuk mendeklarasikan property secara berkelompok, dapat menggunakan penghubung koma (,) dan & contoh :

H1, H2 {Color : #0000FF}
H1, H2 & H3 {Color : #0000FF}
Untuk menuliskan komentar pada CSS dapat menggunakan tanda:

-/*.....*/ (titik-titik di isi komentar)
- (titik-titik di isi komentar)

[Download E-book]

Tutorial script Javascript : Jam digital dengan javascript

Diposkan oleh Unknown di 7:32 AM Label: javascript, script, tutorial javascript

Untuk membuat efek tampilan web agar menarik biasanya di tambahkan aksesoris, jam digital salah satunya. untuk membuat jam digital bisa juga menggunakan script javascript, karena javascript mempunyai fungsi Date() dan setTimeout() yang berfungsi untuk merefresh halaman.
contoh jam digital sederhana menggunakan script javascript.
jam.html

<html>
<head>
<title>Jam Digital</title>
<script type="text/javascript">
// 1 detik = 1000
window.setTimeout("waktu()",1000);
function waktu()
{
var tanggal = new Date();
setTimeout("waktu()",1000);
document.getElementById("output").innerHTML = tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
}
</script>
</head>
<body bgcolor="white" text="black" onload="waktu()">
<table align=center style="border:1px solid black" bgcolor="#CCCCCC"><tr><td>
<div id="output">
</div></td></tr>
</table>
</body>
</html>

simpan script javascript di atas dengan nama jam.html
selamat mencoba....
[Download jam.html]
[View Demo @ http://catment.co.cc/demo/jam.html]

Friday, March 5, 2010

Panduan Mengubah Icon Blogger Favicon

Diposkan oleh Unknown di 8:10 AM Label: blog

Logo blogger yang sudah tidak asing lagi di mata para pengguna internet karena begitu khas dengan lambang huruf B dan juga begitu banyak pengguna internet yang membuat blog gratisnya menggunakan blogspot sehingga logo blogger/blogspot selalu terlihat sepeti :

Artikel ini saya posting atas permintaan sobat kita yang bernama Salim yang menanyakan tentang cara mengubah icon bloggger (favicon

Thursday, March 4, 2010

Tutorial script PHP : Tes koneksi ke server MySQL menggunakan script PHP

Diposkan oleh Unknown di 10:10 AM Label: PHP, script, script php, tutorial php

Sebelum melakukan pengetesan koneksi, pastikan server MySQL anda telah aktif. Karena kalau belum aktif bagaimana bisa melakukan koneksi... hehehehe...

Srirpt untuk melakukan tes koneksi :

TesKoneksi.php

<?php
$host="localhost";
$user="root";
$password="";
$koneksi=mysql_connect("$host","$user","$password");
if($koneksi)
{
echo"Koneksi ke server MySQL menggunakan script PHP berhasil";
}
else
{
echo"Koneksi ke server MySQL menggunakan script PHP gagal";
}
?>

Keterangan script PHP di atas:

Isi $host dengan nama host anda, biasanya bila menggunakan local server namanya localhost.

Isi $user dengan user name SQL anda.

Isi $password dengan password SQL anda.

Jalankan TestKoneksi.php apabila koneksi berhasil maka di browser akan muncul Koneksi ke server MySQL menggunakan script PHP berhasil, sedangkan apabila koneksi ke server gagal maka kan muncul Koneksi ke server MySQL menggunakan script PHP gagal.

---o0o--- Selamat mencoba ---o0o---

[Download Tutorial]

Wednesday, March 3, 2010

Tutorial script PHP : membulatkan bilangan pecahan dengan script PHP

Diposkan oleh Unknown di 10:23 AM Label: PHP, script, script php, tutorial php

Dalam pembagian biasanya sering di jumpai hasil yang pecahan. Misalnya 10 dibagi 15 hasilnya adalah 0.66666666. biasanya untuk bilagan pecahan saya lebih suka mengambil dua angka di belakang koma, sehingga hasilnya menjadi 0.67. sekarang bagaimana bila hal tersebut ingin di pakai dalam pemrograman PHP. Script PHP-nya adalah sebagai berikut:

$hasil=round($nilai,2);

Pada script di atas $hasil adalah hasil yang sudah dibulatkan, $nilai adalah nilai dari bilangan pecahan yang akan di bulatkan dan 2 adalah angka yang dibelakang koma.

contoh.php

<?php

$nilai=10/15;

$hasil=round($nilai,2);

echo"$nilai<br>";

echo"$hasil";

?>

Dari hasil script PHP di atas akan muncul hasil $nilai dan $hasil, untuk $nilai keluaranya adalah 0.666666666667 sedangkan untuk $hasil keluaranya adalah 0.67

[Download tutorial]

Tuesday, March 2, 2010

Tutorial script PHP : script untuk menampilkan informasi ip dan browser

Diposkan oleh Unknown di 3:57 PM Label: PHP, script, script php, tutorial php

Script untuk menampilan informasi IP address

Script ini di gukana untuk melihat ip adrress pada client, scripnya adalah sebagai berikut:

ip_address.php

<?php

$ip_address=$_SERVER['REMOTE_ADDR'];

echo "$ip_address";

?>

Hasil dari script di atas adalah informasi tentang ip address client, bila anda mengakses menggunakan localhost maka informasi yang keluar adalah 127.0.0.1 karena ip address dari localhost adalah 127.0.0.1

Script untuk menampilan informasi Browser dan operating system

Script ini di gunakan untuk melihat informasi browser dan operating system pada client, scripnya adalah sebagai berikut:

info.php

<?php

$info=$_SERVER['HTTP_USER_AGENT'];

echo "$info";

?>

Hasil dari script di atas adalah informasi tentang browser dan operating sistem pada client.

[Download tutorial]

Tutorial script PHP : Format date pada PHP

Diposkan oleh Unknown di 3:37 PM Label: PHP, php date, php tanggal bulan hari indonesia, script php, tutorial php

Pada script PHP banyak sekali format untuk menampilkan date. Lihat tabel format date pada PHP

contoh dari penggunaan format date pada script PHP

<?php

$hari=date("w");

$date=date("d F Y");

if($hari==0) {$hari="Minggu";}

if($hari==1) {$hari="Senin";}

if($hari==2) {$hari="selasa";}

if($hari==3) {$hari="Rabu";}

if($hari==4) {$hari="Kamis";}

if($hari==5) {$hari="Jumat";}

if($hari==6) {$hari="Sabtu";}

echo "$hari, $date";

?>

Jika hari ini hari selasa tanggal 2 maret 2010, maka tampilan dari script PHP di atas adalah Selasa, 02 March 2010

Contoh lain untuk menampilkan format hari dan tanggal dalam bahasa indonesia yaitu:

<?php
/*-hari dalam indonesia-*/
$hari=date("w");
$arr_hari=array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
$hari=$arr_hari[$hari];
/*--------*/
/*-bulan dalam indonesia-*/
$bln=date("n");
$arr_tgl=array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
$bln=$arr_tgl[$bln-1];
/*--------*/
/*-penulisan langsung tanpa menyimpan hari, tanggal, bulan, dan tahun pada suatu variabel-*/
echo"$hari, ".date("d")." $bln ".date("Y");
/*--------*/

echo"<br>";
/*-penulisan dengan menyimpan hari, tanggal, bulan, dan tahun pada suatu variabel-*/
$tgl=date("d");
$thn=date("Y");
$full_date="$hari, $tgl $bln $thn";
echo"$full_date";
/*--------*/
?>

Jam_sekarang.php

<?php

$jam=date("H:i:s");

echo"$jam";

?>

Dari script PHP di atas jam tersebut nampak diam, tetapi sebenarnya berubah sesuai dengan jam di komputer. Setiap browser di refresh maka jam akan berubah sesuai dengan jam pada komputer.

[download tutorial]