Lucky A. Wahyudi: Mei 2011

Cascading

Style

Sheets

(CSS)

memungkinkan para designer untuk mengatur format dan layout halaman secara lebih efisien.

dapat diletakkan pada bagian atas dokumen HTML atau pada file tersendiri.

CSS Syntax

Ada tiga cara untuk menggunakan style pada halaman web. Penggunaan cara-cara tersebut tergantung kebutuhan halaman web. Tiga cara tersebut adalah :

1. Linking.

yaitu menggunakan style sheet dengan cara membuat suatu link pada file dimana style tersebut berada.

2. Embedding.

yaitu dengan meletakkan definisi style sheet di bagian atas sebelum dokumen sebelum bagian <body> .

3. Import.

yaitu mengimport file yang berisi Style Sheet

Contoh embeded:

<html>

<head>

<title>Langsung</title>

<style type="text/css">

#header{background-color:navy; border:1px solid blue; width:50%;}

margin-left:auto; margin-right:auto; text-align:center;

font-family:arial; color:white; padding-top: 17px; padding-bottom: 17px;}

hr{color:red;}

</style>

</head>

<body>

<div id="header">

Saya Adalah Anak Gembala, Selalu Riang Serta Gembira

</div>

<hr />

</body>

</html>

Terdapat dalam head suatu html dan dipanggil dalam body.

Contoh Linking :

<html>

<head>

<title>Coba Style Sheets</title>

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

</head>

<body>

<div id="header">

Saya Adalah Anak Gembala, Selalu Riang Serta Gembira

</div>

<hr />

</body>

</html>

Nb :Perhatikan Syntax <link href>, file css berada di folder css dengan nama file style.css isi dari syntax style.css sama seperti syntax pada embeded.

Contoh Import :

<html>

<head>

<title>Langsung</title>

<style type="text/css">

@import url(http://localhost/cs/css/style.css);

</style>

</head>

<body>

<div id="header">

Saya Adalah Anak Gembala, Selalu Riang Serta Gembira

</div>

<hr />

</body>

</html>

CSS ID and CSS Class

Secara garis besar css id dideklarasikan menggunakan karakter “#” (Pagar) sedangkan css class dideklarasikan menggunakan karakter “.” (Titik)

CSS ID merujuk sebagai style specifik single user atau unique element atau bahasa paling gampang hanya boleh sekali digunakan

CSS Class adalah kebalikan dari CSS id, jadi CSS class dapat digunakan beberapa kali dan bukan element unique melainkan group element

CSS Class lebih digunakan untuk format style tulisan, sedangkan ID untuk melayout bagian-bagian utama template seperti header, sidebar atau kolom footer.

CSS ID

The ID Selector

a. The id selector is used to specify a style for a single, unique element.

b. The id selector uses the id attribute of the HTML element, and is defined with a "#".

c. The style rule below will be applied to the element with id="para1":

Contoh :

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

CSS Class

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for any HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

In the example below, all HTML elements with class="center" will be center-aligned:

Contoh :

.center {text-align:center;}

CSS Formating

CSS menyediakan fungsi untuk memformat tampilan di halaman web

Javascript

Scripting Loops

Dalam Javascript terdapat dua macam perulangan yaitu :

- For : perulangan berdasar junlah yang ditentukan

- While : perulangan selama suatu kondisi dinyatakan benar

Syntax “for” :

<html>

<body>

var i=0;

for (i=0;i<=5;i++)

{

document.write("Hello”);

}

</script>

</body>

</html>

Syntax “while”:

<html>

<body>

var i=0;

while (i<=10){

document.write("Hello”);

i++;<!!>

}

</script>

</body>

</html>

Events

Dengan menggunakan javascript, kita dapat membuat halaman web yang dinamis yang bisa berinteraksi dengan user.
Tiap elemen dalam halaman web memiliki even tertentu yang mengacu Javascript.
Contoh : kita dapat menggunakan even onClick pada elemen button untuk mengindikasikan suatu fungsi untuk berjalan ketika user mengklik button tersebut.
Even didefinsikan dalam tag HTML.
Contoh even : onLoad,onClick,onMouseOver
Scripting Error Handling

Saat kita browsing di internet,kita sering melihat javascript alert box yang mengatakan “runtime error” dan menanyakan “do you wish to debug?”. Pesan error seperti ini akan membantu pengembang dan bukan user. Saat user melihat error biasanya akan langsung meniggalkan halaman tersebut.

Statement try. . .catch
memungkinkan anda untuk mengetest kode yang error.
blok TRY berisikan kode yang akan dijalankan, sedangkan blok catch berisikan code untuk dilaksanakan bila terjadi error.

Contoh :

<html>
<head>
<script type="text/javascript">
var txt="";
function message() {
try {
adddlert("Welcome guest!");
}catch(err){
txt="There was an error on this page.\n\n";
txt+="Click OK to continue viewing this page,\n";
txt+="or Cancel to return to the home page.\n\n";

if(!confirm(txt)){
document.location.href="http://www.w3schools.com/";
}
}
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>

Dalam javascript kita dapat menambahkan karakter spesial dalam teks string dengan menggunakan simbol backslash.

Contoh:

\n:new line
\t:tab

\b:backspace

Lucky A. Wahyudi

Pengikut

Selasa, 10 Mei 2011

Resume DesWeb - Pertemuan 9

Selasa, 03 Mei 2011

Resume DesWeb - Pertemuan 8

Blog Archive