CSS DASAR

 BAB 4

STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING

A.  STYLE PADA HALAMAN WEB

1. Konsep Layout dalam Halaman Web

a. Elemen Header

Elemen jenis ini berisi judul dan penjelasan lain dokumen. 

b. Elemen Navigation

Elemen jenis ini memberikan akses navigasi ke halaman - halaman lain dalam web.

c. Elemen Sidebar

Elemen jenis ini sebagai pendukung konten, seperti berisikan daftar konten lain, iklan, atau menu tambahan.

d. Elemen Konten

Elemen jenis ini sebagai isi utama dari dokumen web. 

e. Elemen Footer

Elemen jenis ini sebagai penutup dari website, yang dapat berisi informasi lain tentang website, seperti lisensi penggunaan, sitemap, ataupun link ke website lain.

2. Jenis - Jenis Layout dalam Halaman Web (Frameset, Table, Div)

a. Tag Frameset dan Atributnya

FRAMESET adalah tag HTML yang digunakan untuk menampilkan bingkai - bingkai tersendiri pada dokumen HTML.

b. Tag Table dan Atributnya

Tag ini digunakan untuk membuat tabel pada dokumen HTML.

c. Tag Div dan Atributnya

Tag DIV tidak dapat berdiri sendiri dalam penggunaanya, TAG DIV harus disandingkan dengan CSS supaya dapat menghasilkan bentuk design layout yang lebih menarik.

d. Model Layout

    1). Layout Split

        Layout split merupakan model yang banyak dipakai karena keseimbangan dalam halaman web                tetap terjaga.

    2). Left Index

    Left index digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan             navigasi.

    3). Top Index

    Top index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. 

    4). Bottom Index

     Bottom index biasanya digunakan apabila isi dari halam banyak berhubungan dengan topik tunggal.

    5). Alternating Index

    Alternatingt index digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang     disertai dengan teks berupa keterangan, harga, jumlah dan lain - lain.

3. Konsep dan Penulisan Script Stylesheet

a. Style pada Teks

    Teks pada sebuah halaman web dapat diberikan style dalam kemasan CSS. Pengaturan style tersebut meliputi properti pada bagian pewarnaan, pemilihan, font, spasi dan lain - lain. 

    1). Pengaturan warna pada teks (color)

        a) Nilai HEX, misalnya "#ff0000"

        b) Nilai RGB, misalnya "rgb(255,0,0")

        c) Nama dari waqrna tersebut, misalnya "red"

    2). Pengaturan spasi antarkarakter (letter-spacing)

        letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkarakter atau huruf. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.

        a). p (letter-spacing: 0,5cm)

        b). h4 (letter-spacing: -2px)

    3). Pengaturan bentuk teks (decoration)

    Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks. Nilai dari text-decoration dapat berupa overline, line-through, underline, dan none yang berarti tanpa dekorasi.

        a). p {text-decoration: nilai text-decoration;}

        b). h4 {text-decoration: overline;}

4). Pengaturan spasi antarkata (word-spacing)

        word-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkata. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.

        a) p {word-spacing: nilai spasi;}

        b) h4 {word-spacing: 10px;}

2. Macam - Macam Aplilkasi Client Side Programming

    Client side scripting sebagai salah satu jenis bahasa pemrograman web yang proses pengolahannya dilakukan di sisi client (komputer pengguna). Proses pengolahannya dilakukan oleh web browser sebagai client-nya. Contoh dari client side scripting ini, antara lain HTML, XHTML, CSS, JavaScript, XML, dan JQUERY.

a.  Javascript

    Javascript diperkenalkan pertama kali oleh Brenden Eich pada tahun 1995.  Pada awalnya, bahasa ini dinamakan "LiveScript" yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2.

b. VBScript

    VBScript (Visual Basic Script) sebagai bahasa pemrograman yang dikembangkan oleh microsoft corporation pada tahun 1996. 

3. Struktur Program Client Side

    Cara kerja Client Side Scripting adalah client/user melakukan request untuk mengakses sebuah dokumen web melalui web browser yang ada di komputer.

a. Menuliskan Kode Javascript.

1). Menggunakan tag <SCRIPT>

2). Menggunakan file eksternal

3) Melalui event tertentu

b. Dokumentasi Program

    Dokumentasi pengembangan berguna sebagai pengingat pada bagian - bagian khusus di dalam skrip tersebut.

4. Penyisipan Script Client Side dalam HTML

    Dengan menambahkan atau menyisipkan javascript pada sebuah halaman HTML, halaman bisa menjadi lebih dinamis dan interaktif.

a. Tag <script>

    Tag <script> digunakan untuk mendefinisikan sebuah client-side script.

b. Tag <noscript>

    Tag <noscript> digunakan untuk alternatif jika Javascript yang dibuat tidak bisa ditampilkan, misalnya karena browser yang digunakan tidak mendukung.

C. Client Side Scripting pada Halaman Web Interaktif

1. Perintah - Perintah Dasar dalam Aplikasi Client Side Programming

    Penulisan kode javascript di HTML daqpat dilakukan beberapa cara Embed (ditempel langsung pada html). Inline (penulisan kode pada atribut), dan Eksternal (ditulis terpisah dengan file HTML).

2. Program "Hello World" dengan Javascript/VBScript

    Tingkat Kesulitan pembuatan aplikasi HTML bergantung pada kompleksitas pembuatan aplikasinya. Untuk membuat aplikasi dengan HTML sangat mudah, bisa membuatnya secara langsung dengan editor teks, ataupun menggunakan Dreamweaver dengan mode Design.

- Tag <HEAD> adalah bagian header, berisi judul, style CSS, dan kode JavaScript.

- Tag <TITLE> adalah elemen judul, yang ditampilkan di Title Bar pada browser.

- Tag <style type="text/css"> adalah elemen format style berupa kode CSS.

- Tag <script> adalah elemen kode JavaScript.

- Tag <BODY> adalah elemen "tubuh" HTML yang isinya ditampilkan di browser.

- Tag <h2> adalah style header (biasanya untuk judul).

- Tag <form> adalah elemen form yang biasa digunakan untuk mengisi data dari input pengguna