BAB 4
STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING
1. Konsep Layout dalam Halaman Web
Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah, dan informatif sehingga pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content).
A. Elemen Header
B. Elemen Navigation
C. Elemen Sidebar
D. Elemen Konten
E. Elemen Footer
Jenis-Jenis Layout dalam Halaman Web
- Frameset
- Table
- Div
a. Tag Frameset dan Atributnya FRAMESET digunakan bersamaan dengan penggunaan tag
FRAME yang berguna untuk menampilkan file sumber dari bingkai untuk dijadikan bagian dari tag FRAMESET. FRAMESET adalah tag HTML yang digunakan untuk menampilkan bingkai-bingkai tersendiri pada dokumen HTML.
Cara kerja FRAMESET sama seperti cara kerja tag TABLE di mana tag TABLE digunakan untuk membuat halaman dokumen HTML menjadi beberapa bagian kolom dan baris.
APERSEPSI
CSS bukan bahasa pemrograman. Pada umumnya, CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
A. Gaya di Halaman Web
CSS sebagai sebuah bahasa style sheet yang digunakan dalam mengatur tampilan dokumen. Dengan adanya CSS maka tampilan halaman yang sama akan memiliki format yang berbeda. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
2. Jenis-Jenis Layout dalam Halaman Web (Frameset, Table, Div)
Rancangan web design (mockup web design) pada dasarnya menjadi gambaran keserasian warna dan layout sesuai dengan konsep desain yang dibayangkan. Sebagian web designer melewati proses ini dan langsung mendesain dengan code. Namun, teknik script sering kali mengalami proses perbaikan dikarenakan tidak adanya konsep desain yang baik.
A. Tag Frameset dan Atributnya
FRAMESET digunakan bersamaan dengan penggunaan tag FRAME yang berguna untuk menampilkan file sumber dari bingkai untuk dijadikan bagian dari tag FRAMESET. 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. Penggunaan tag ini selalui disertai dengan penggunaan tag <TR> dan <TD>. Tag <TR> untuk menyatakan baris dari tabel dan tag <TD> untuk menyatakan kolom dari tabel.
c. Tag Div dan Atributnya TAG DIV tidak dapat berdiri sendiri dalam penggunaannya. TAG DIV harus disandingkan dengan CSS supaya dapat menghasilkan bentuk design layout yang lebih menarik. Oleh sebab itu, seorang pemula banyak mengalami kendala ketika akan membuat sebuah layout website dengan menggunakan TAG DIV. DIV adalah tag HTML yang sebenarnya digunakan untuk memberikan tanda batas suatu daerah dari sebuah rangkaian html.
D. Model Layout
Model-model layout yang umum digunakan dalam mendesain suatu halaman web, di antaranya sebagai berikut.
1) Layout Split
Layout split merupakan model yang banyak dipakai karena keseimbangan dalam halaman web tetap terjaga. Navigasi atau daftar isi berada di bagian kanan dan kiri dari halaman web.
2) Left Index
Left index digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama. Navigasi atau daftar isi berada di bagian kiri dari halaman web.
3) Top Index
Top index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. Navigasi atau daftar isi berada di bagian atas dari halaman web, misalnya tampilan dari www.google.com.
4) Bottom Index
Bottom index biasanya digunakan apabila isi dari halamanb anyak berhubungan dengan topik tunggal. Navigasi atau daftar isi berada di bagian bawah dari halaman web.
5) Alternating Index
Alternating index digunakan untuk halaman yang banyak menampilk grafik, foto, dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain-lain. Navigasi atau daftar isi berada di bagian kanan dan kiri dari halaman web.
3. Konsep dan Penulisan Script Stylesheet
Berikut ini beberapa hal yang berhubungan dengan 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)
CSS dapat diterapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna sebagai berikut.
a) Nilai HEX, misalnya "#ff0000"
b) Nilai RGB, misalnya "rgb(255,0,0)"
c) Nama dari warna tersebut, misalnya "red"
Format penulisan untuk pemberian warna pada menggunakan CSS adalah: selector {color:nilai warna}teks
2) Pengaturan spasi antarkarakter (letter-spacing)
Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkarakter atau huruf. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Format penulisan CSS untuk pengaturan jarak (spasi) antarkarakter atau huruf adalah: selector (letter-spacing:nilai spasi;). Berikut ini penerapan dari style tersebut.
3) Pengaturan bentuk teks (decoration)
Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks.
4) Pengaturan spasi antarkata (word-spacing) Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkata.
5) Pengaturan jarak indentasi paragraph (text-indent) Text-indent menentukan jarak indent dari baris pertama dalam teks-blok sehingga teks pada baris pertama terlihat lebih menjorok ke dalam dibanding teks pada baris yang lain.
6) Pengubahan huruf besar dan huruf kecil dari sebuah teks (text transform)
Teks-transform property digunakan untuk menentukan huruf besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text indent adalah: selector (text-transform:nilai text transform).
b. Style pada Multimedia
Secara mendasar, Cascading Style Sheet (CSS) dapat diterapkan pada elemen-elemen HTML multimedia di antaranya gambar, video, dan audio.
1) Cascading Style Sheet pada Tampilan Gambar
CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html, baik itu tulisan, table, gambar, maupun objek lainnya. CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan, serta lebih disenangi oleh mesin pencari.
2) Cascading Style Sheet Gambar untuk Background Penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background image.
4. Penyisipan Script Client Side dalam HTML
Dengan menambahkan atau menyisipkan Javascript pada sebuah halaman HTML, halaman bisa menjadi lebih dinamis dan interaktif. Berikut ini beberapa perintah yang digunakan untuk penyisipan Javascript dalam HTML.
A. Tag <script>
Tag <script> digunakan untuk mendefinisikan sebuah client-side script. Tag jenis ini berisi kumpulan script dalam tag itu sendiri, atau bisa mengimpor script dari file lain, dengan menambahkan atribut src.
B. Tag <noscript>
Tag <noscript> digunakan untuk alternatif jika Javascript yang dibuat tidak bisa ditampilkan, misalnya karena browser yang digunakan tidak mendukung.
Client Side Scripting pada Halaman Web Interaktif
Bahasa pemrograman client side adalah bahasa yang berjalan pada client atau komputer user itu sendiri, di mana sebuah website bahasa client side akan berjalan di browser masing-masing komputer. Dengan demikian, bahasa pemprograman client side tidak membutuhkan web server untuk menjalankannya.
1. Perintah-Perintah Dasar dalam Aplikasi Client Side Programming Penulisan kode Javascript di HTML dapat dilakukan dengan beberapa cara Embed (ditempel langsung pada HTML), Inline (penulisan kode pada atribut), dan Eksternal (ditulis terpisah dengan file HTML).
a. Penulisan Kode Javascript dengan Embed
Pada dasarnya, tag <script> digunakan untuk menempelkan (embed) kode Javascript pada HTML. Tag ini dapat ditulis di alam tag <head> dan <body>. Kode penulisanya diuraikan sebagai berikut.
b. Penulisan Kode Javascript Inline
Metode ini biasanya digunakan untuk memanggil suatu fungsi pada event tertentu dengan menulis kode Javascript di dalam atribut HTML.
c. Penulisan Kode Javascript Eksternal Cara ini paling sering digunakan pada proyek-proyek besar karena kode akan lebih mudah dirawat.
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 (berupa kode), ataupun menggunakan Dreamweaver dengan mode Design.
a. Buka editor teks (misalnya Notepad++) dan tulis kode seperti di bawah ini, lalu disimpan dengan nama HELLOWORLD.HTML
Berikut penjelasan bagian kode.
1) Tag <HEAD> adalah bagian header, berisi judul, style CSS, dan kode JavaScript.
2) Tag <TITLE> adalah elemen judul, yang ditampilkan di Title Bar pada browser Anda.
3) Tag <style type="text/css"> adalah elemen format style berupa kode CSS.
4) Tag <script> adalah elemen kode JavaScript. 5) Tag <BODY> adalah elemen "tubuh" HTML yang isinya ditampilkan di browser.
6) Tag <h2> adalah style header (biasanya untuk judul), tetapi style nya dapat di-override dengan style CSS yang telah didefinisikan seperti sebelumnya.
7) Tag <form> adalah elemen form yang biasa digunakan untuk mengisi data dari input pengguna.
8) Pada bagian form tersebut, terdapat button "Submit" yang akan mensubmisi masukan. Action yang dijalankan adalah fungsi yana telah didefinisikan di kode JavaScript.