STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING

 PENDAHULUAN

Halo balik lagi sama aku Raisa. Kali ini aku akan menjelaskan tentang STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING yaitu bab ke 4 dari buku berjudul PEMROGRAMAN WEB DAN PERANGKAT BERGERAK.

Pemrograman Web dan Perangkat Bergerak adalah salah satu mata pelajaran SMK program keahlian bagi siswa Kelas XI semester 1 dan semester 2. Pelajaran ini termasuk pada bidang keahlian Informasi dan Komunikasi dengan program keahlian Teknik Komputer dan Informatika, serta termasuk ke dalam kompetensi keahlian Rekayasa Perangkat Lunak.

----

BAB 4

STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING

PENGERTIAN

Mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

PEMAHAMAN

A. Style pada 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 mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk digunakan bersama-sama dalam beberapa berkas (file).

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). Dalam hal ini, desain halaman web tidak mengganggu kejelasan bagian isi. Dengan keberadaan layout dengan tata letak yang baik dapat membuat halaman lebih memadai dan seimbang sehingga enak dilihat dan mudah dibaca.

Pada dasarnya, sebuah dokumen web umumnya memiliki elemen elemen sebagai berikut.

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, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti 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 bagian penutup dari website, yang dapat berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

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.

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.

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.

d. Model Layout

Model-model layout yang umum digunakan dalam mendesain suatu halaman web, di antaranya sebagai berikut.

Layout Split, Layout Index, Top Index, Bottom Index, dan Alternating Index.

3. Konsep dan Penulisan Script Stylesheet

a. Style pada Teks

b. Style pada Multimedia

c. Style pada Tabel

d. Style pada Formulir

4. Penyisipan Stylesheet dalam Script HTML

a. Metode Inline Style

Metode Inline Style adalah cara menginput kode CSS langsung dalam tag HTML dengan menggunakan atribut style CSS.

b. Metode Internal Style Sheets

Metode Internal Style Sheets (Embedded Style Shects) digunakan memisahkan kode CSS dari tag HTML, namun tetap dalam satu halaman HTML.

c. Metode External Style Sheets

Metode External Style Sheets digunakan untuk 'mengangkat' kode CSS tersebut ke dalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. 

5. File CSS

a. CSS I

CSS 1 berfokus pada pengaturan format dokumen HTML.

b. CSS 2

CSS 2 berfokus pada pengaturan format dokumen untuk kebutuhan cetak dengan printer, posisi konten, downloadable, font huruf, dan table layout.

c. CSS 3

Beberapa web browser sudah mendukung CSS 3. CSS 2 didukung penuh oleh CSS 3 dengan beberapa penambahan tanpa perubahan.

Macam-Macam Aplikasi Client Side Programming

Javascript dan VBScript

Struktur program client side

a. Menuliskan kode Javascript

b. Dokumentasi Program 

Note : Semua hal yg di rangkum di dalam sini di ambil dari buku paket kelas XI berjudul PEMROGRAMAN WEB DAN PERANGKAT BERGERAK.