Silvia Fajri Agustia: Pengertian dan perintah-perintah CSS

CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Berikut ini adalah perintah-perintah dalam CSS (Cascading Style Sheets):

A. New Array

New Array merupakan perintah untuk memasukkan sekumpulan data dalam sebuah variabel (data disimpan dalam variabel yang sama secara berurutan).

Contoh :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contoh new Array</title>
</head>

<body>

<script language="javascript">
var nama = new Array(3);
nama[1]="Iwan";
nama[2]="Budi";
nama[3]="Yanto";


document.write("Nama dia adalah : "+ nama[1])
document.write("<br>")
document.write("Nama dia adalah : "+ nama[2])
document.write("<br>")
document.write("Nama dia adalah : "+ nama[3])
document.write("<br>")


</script>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Contoh new Array</title>

</head>

<body>

var nama = new Array(3);

nama[1]="Iwan";

nama[2]="Budi";

nama[3]="Yanto";

document.write("Nama dia adalah : "+ nama[1])

document.write("<br>")

document.write("Nama dia adalah : "+ nama[2])

document.write("<br>")

document.write("Nama dia adalah : "+ nama[3])

document.write("<br>")

</script>

</body>

</html>

Hasilnya :

B. For

for adalah perintah loop, perintah untuk melakukan perulangan data yang banyak.

Contoh :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contoh for</title>
</head>
<body>

<script language="javascript">

for(var i=1;i < 11;i++)
{
document.write("Hitungan :"+i+"<br>");
}

</script>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Contoh for</title>

</head>

<body>

for(var i=1;i < 11;i++)

{

document.write("Hitungan :"+i+"<br>");

}

</script>

</body>

</html>

Hasilnya :

C. While

while digunakan sebagai perulangan atau looping data seperti halnya for

contoh :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contoh while</title>
</head>
<body>

<script language="javascript">

i = 0;
while (i <= 10) {
    
document.write("Hitungan :"+i+"<br>");
    i++;
}

</script>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Contoh while</title>

</head>

<body>

i = 0;

while (i <= 10) {

document.write("Hitungan :"+i+"<br>");

i++;

}

</script>

</body>

</html>

Hasilnya :

D. If , Else if dan else

Perintah if suatu fungsi keputusan dimana IF akan menentukan untuk pengecekan suatu kondisi. Jika kondisi terpenuhi maka fungsi akan mengambil suatu nilai, dan sebaliknya jika tidak dipenuhi akan mengambil nilai lainnya.

Alur kinerja if :

if (lakukan perbandingan disini 1)

{

// Blok akan dikerjakan jika perbandingan dipenuhi 1

}

else if (lakukan perbandingan disini 2)

{

// Blok akan dikerjakan jika perbandingan dipenuhi 2

}

else

{

// Blok ini tidak akan dikerjakan jikan perbandingan tidak dipenuhi

}

Contoh

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contoh if else if</title>
</head>
<body>

<script language="javascript">

var nilai=60;

if (nilai>=70)
{
document.write("Hasil Nilai Adalah : A")
}
else if (nilai>=60)
{
document.write("Hasil Nilai Adalah : B")
}
else
{
document.write("Hasil Nilai Adalah : C")
}


</script>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Contoh if else if</title>

</head>

<body>

var nilai=60;

if (nilai>=70)

{

document.write("Hasil Nilai Adalah : A")

}

else if (nilai>=60)

{

document.write("Hasil Nilai Adalah : B")

}

else

{

document.write("Hasil Nilai Adalah : C")

}

</script>

</body>

</html>

Dari hasil script yang dihasilkan adalah nilai B karena nilai telah terpenuhi. Nilai lebih besar sama dengan 60

E. Function

Function adalah perintah untuk membuat fungsi-fungsi baru sesuai dengan kebutuhan pembuatnya. Digunakan untuk mengakses sekumpulan perintah dan dapat dipanggil kapan saja di bagian lain di dalam program, sehingga untuk tujuan yang sama tidak perlu membuat kembali program yang sama, tetapi kita cukup memanggilnya dengan fungsi-fungsi yang kita buat.

Alur kinerja function :

function variabel()

{

// Blok perintah

}

Contoh :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contoh while</title>
</head>
<body>

<script language="javascript">
function pesan()
{
var nama=prompt('Ketik nama Anda:','Misalnya Ivan Gunawan...')
var umur=prompt('Apakah boleh tahu umur Anda','')

document.write("Nama Anda:"+nama+"<br>");
document.write("Umur Anda:"+umur);
}
</script>

<input type="button" value="ISI FORMULIR DISINI"  onclick="pesan()">

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Contoh while</title>

</head>

<body>

function pesan()

{

var nama=prompt('Ketik nama Anda:','Misalnya Ivan Gunawan...')

var umur=prompt('Apakah boleh tahu umur Anda','')

document.write("Nama Anda:"+nama+"<br>");

document.write("Umur Anda:"+umur);

}

</script>

</body>

</html>

Klik ISI FORMULIR DISINI kemudian isikan data nama dan umur

Masukkan nama

Masukkan umur

Hasilnya

Demikian oret-oretan yang saya buat, untuk kita dapat mengekplore bagaimana menggunakan suatu fungsi dalam pembuatan program ini. Semoga bermanfaat :)

Silvia Fajri Agustia

Rabu, 12 Agustus 2015

Pengertian dan perintah-perintah CSS

A. New Array

B. For

C. While

D. If , Else if dan else

E. Function

Tidak ada komentar:

Posting Komentar

Arsip Blog