Selamat Datang CSS

Selamat Datang CSS

blue;

color:

white;”>Style

2.3 Jenis – jenis CSS 1. Font Property Font Syntax : font: PossibleValues : [||||]?[/]? Contoh: P { font: italic bold 12pt/14pt Times, serif } Font Size Syntax : font-size: PossibleValues : ||| •

:xx-small | x-small |small|medium| large|x-large | xxlarge

•

: larger | smaller

•

(in relation to parent element)

Font Style Syntax : font-style: Possible Values : normal |italic|oblique Font Variant Syntax : font-variant: Possible Values : normal | small-caps Font Weight Syntax : font-weight: Possible Values : normal |bold|bolder| lighter | 100 | 200 | 300 |400 | 500 | 600 | 700 | 800 | 900

2. Color & Background Property Color Sintax : color : Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB. 16 keyword diambil dari palette Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Ada 4 cara dalam menuliskan warna menggunakan kode RGB: 1. #rrggbb (e.g., #00cc00) 2. #rgb (e.g., #0c0) -

rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0))

-

rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan 100.0 (e.g., rgb(0%,80%,0%))

Background Color Syntax : background-color: Possible Values : | transparent

Background Syntax : background: Possible Values : ||||||||

3. CSS : Text Alignment & Box Property Text Alignment Syntax : text-align: Possible Values : left | right | center | justify Box Properties Bottom Border Width Syntax : border-bottom-width: Possible Values : thin | medium | thick |

Width Syntax : width: Possible Values: || auto

Height Syntax : height : Possible Values : | auto Border Style Syntax : border-style: Possible Values: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}

2.4 Hyperlink dengan CSS. Contoh code program HTML hyperlink dengan CSS, untuk code HTMLnya seperti berikut :

Dan untuk CSS nya seperti berikut :

Output pada browser :

Penjelasan : Kita lihat code program,

a : link = link awal dengan warna orange dan untuk garis bawah teks masih ada. a : visited = jika cursor dan di klik akan berwarna biru a : hover = jika cursor disorot ke link yang kita sorot maka akan berwarna merah dan garis bawah pada teks akan hilang, sebab terdapat selector textdecoration dan value none. a : active = jika link tersebut diklik dan halaman web berada pada link tersebut.

LATIHAN

1. Buatlah layout halaman web menggunakan CSS yang berisikan tentang profil diri Anda ! 2. Buatlah contoh penulisan CSS dengan metoda : Internal Style Sheet External Style Sheet Inline Style Sheet

BAB 3 PENGENALAN JAVASCRIPT

3.1 Sekilas tentang JavaScript Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan - masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa

dilihat pada sisi klien),

sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien. Apa yang bisa dilakukan JavaScript : 1. Menciptakan halaman web yang lebih interaktif dan menarik. 2. Dapat memberikan text/content yang dinamis kedalam halaman HTML. 3. Dapat memberikan reaksi tertentu pada suatu event. 4. JavaScript bisa digunakan untuk validasi data pada form HTML sebelum dikirim ke server. Contoh pada validasi e-mail. 5. Mendeteksi banyaknya pengunjung pada browser. 6. JavaScript juga sering digunakan sebagai trik, misalnya memberikan efek mouseover pada suatu image atau link. Dengan efek ini, suatu gambar dapat berubah ketika mouse didekatkan ke gambar tersebut dan masih banyak lagi. Ada beberapa hal penting dalam JavaScript yaitu : 1.

Menggunakan blok awal "{" dan blok akhir "}".

2.

Case Sensitive artinya membedakan penamaan variable dan fungsi yang menggunakan huruf besar dan huruf kecil.

3.

Extension umumnya menggunakan "*.js".

4.

Setiap statement dapat diakhiri dengan ";" sebagaimana dengan C++, tetapi dapat juga tidak.

5.

Jika tidak didukung dalam browser versi lama, Scriptnya dapat disembunyikan diantara tag "".

6.

Jika program dalam satu baris terlalu panjang dapat disambung ke baris berikut dengan karakter "\".

3.2 Struktur JavaScript Struktur dari JavaScript adalah sbb : <SCRIPT LANGUAGE = ”JavaScript”> Keterangan : Kode
// - - > umumnya disertakan dengan tujuan agar sekiranya browser

tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.

3.3 JavaScript sebagai bahasa berorientasi pada obyek 1. Properti Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil. Penulisan : Nama_objek.nama_properti = nilai window.defaultStatus = ”Selamat Belajar JavaScript”;

2. Metode Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisan : Nama_objek.nama_metode(parameter) document.write (”Hallo”)

3.4 Bentuk Script dari JavaScript Script dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dalam jendela browser, karena ada tag tertentu yang memerintahkan browser untuk memperlakukan bahwa script tersebut adalah script dari JavaScript.

JavaScript dapat dituliskan dalam sebuah dokumen HTML dengan 2 cara : 1. Sebagai statement dan fungsi menggunakan tag SCRIPT. 2. Sebagai pengontrol perintah menggunakan tag HTML. Tag SCRIPT yang dituliskan dalam HTML dituliskan sebagai berikut : <SCRIPT> JavaScript statements................

SCRIPT tersebut belum menunjukkan bahasa JavaScript, dan untuk memasukkan bahasa JavaScriptnya tinggal menggunakan atribut LANGUAGE = JavaScript, lengkapnya seperti berikut : <SCRIPT LANGUAGE="JavaScript"> JavaScript statements................

3.5 Meletakkan JavaScript dalam Dokumen HTML

Ada beberapa cara untuk meletakkan kode JavaScript di dalam halaman HTML. 1.

Internal

dalam

file

HTML

Pada umumnya kita meletakkan tag <script> diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag dan . Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag dan . 2.

Menggunakan

file

ekstern

Cara berikutnya adalah menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript dipanggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang kita sisipkan ke dalam dokumen HTML adalah sebagai berikut : <SCRIPT

language="JavaScript"

SRC="url/file.js">



Dimana url/file.js adalah lokasi dan nama file yang berisi kode JavaScript, jika

perintah tambahan SRC tidak disertakan maka tag SCRIPT akan mencari kode yang terletak dalam tag SCRIPT. Contoh Simpan dengan nama "inti.js"

:

document.writeln("

<SCRIPT language="JavaScript" SRC="isi.js">

3.6 Memberikan Komentar (script tidak tereksekusi) Seringkali pada browser versi lama, sebelum adanya JavaScript tidak mengenal tag JavaScript dan tidak akan melewatkannya untuk dibaca. Contoh kode diatas tidak akan terlihat di browser kita, akan tetapi dia akan menampilkan jendela peringatan (berupa kotak dialog) karena script tersebut tidak lengkap, maksudnya pada <SCRIPT language="javascript">, language="javascript"> nya tidak terbaca oleh browser sehingga akan merusak dokumen HTML yang akan kita buat. Maka kita perlu tambahkan tag komentar agar scriptnya tidak dibaca sebagai script akan tetapi dibaca sebagai komentar dan tidak akan dieksekusi sebagai program.

Contoh penggunaannya bisa seperti di bawah ini : <SCRIPT language="javascript">

JavaScript mendukung dua bentuk format untuk komentar : 1. Komentar satu baris, diawali dengan suatu double slash (//) 2. Komentar banyak baris, diawali dengan suatu /* dan diakhiri dengan suatu */ 3.7 Menggunakan Tag

Tes defaultStatus

Lihat di pojok kiri bawah...^^

Semangat !!