Pwdb bab 4

 BAB 4 STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING 

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.

1. Konsep layout dalam halaman web 

Layout situs merupakan tata letak elemen halaman situs web.Layout situs yang baik akan menjadikan halaman web web baik juga. Dengan desain halaman web yang baik dan tepat akan membuat pengunjung merasa nyaman dengan tampilan (layout) halaman web tersebut, dan tetap dapat fokus pada isi (content). Desain halaman web tidak mengganggu kejelasan bagian isi. Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah dan informatif. Pada dasarnya sebuah dokumen web umumnya memiliki elemen-elemn sebagai berikut.

a. Elemen header 

Elemen <header> merupakan salah satu elemen dalam HTML5 yang mempunyai tujuan khusus atau arti semantik tertentu. Elemen <header> berfungsi header bagi seluruh halaman HTML ataupun sebagai header bagi seksi-seksi tertentu seperti header bagi seksi elemen <article>.

b. Elemen navigation

Elemen <navigation> adalah elemen root pada grafik navigasi. Saat menambahkan tujuan dan menghubungkan tindakan ke grafik, Anda dapat melihat elemen <destination> dan <action> yang sesuai di sini sebagai elemen turunan.

c. Elemen sidebar 

Sidebar adalah bagian sisi kanan maupun kiri sebuah website dan terletak di sisi konten. Sidebar biasanya berisi informasi tambahan dan navigasi dari sebuah website.

d. Elemen konten

Elemen jenis ini sebagai utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini

c. Elemen footer 

Elemen footer adalah elemen struktural yang digunakan untuk mengidentifikasi bagian catatan kaki sebuah halaman, dokumen, seksi, ataupun suatu artikel. Elemen footer biasanya diletakkan pada bagian paling bawah halaman HTML.

2. Jenis² layout dalam halaman web (Frameset, Table, Div)

Rancangan web design (mockup web design) pada dasarnya menjadi gambaran kerasian 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. 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

Fungsi div pada HTML biasanya untuk mengelompokkan elemen atau tag-tag agar menjadi suatu grup. Tag div ini juga sering digunakan untuk mendefinisikan id atau class dari css. Fungsi div pada HTML lainnya yang sering digunakan oleh para programmer adalah untuk membatasi bagian satu dengan bagian yang lain.

d. Model layout

Model² layout yang umum digunakan :

1). Layout split 

Layout split Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam 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.  

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 halaman banyak berhubungan dengan topik tunggal .

5). Alternating index

Alternating 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 

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².

b. Style pada multimedia

Secara mendasa, cascading style sheet (CSS) dapat diterapkan pada elemen² HTML multimedia di antaranya gambar, video, dan audio

c. Style pada tabel berikut ini beberapa hal yang berhubungan dengan style pada tabel.

1). Pengaturan Border tabel

CSS dapat digunakan untuk memformat Border atau garis tepi dari sebuah tabel.

2). Konsep dasar model box 

Pada dasarnya, elemen dari HTML adalah model box untuk membuat Border di sekeliling elemen dan space elemen yang saling berhubungan.

3). Pengaturan text-alignt pada tabel

Nilai dari properti text-alignt untuk horizontal aligment adalah left, right, atau center.

4. Pengaturan lebar dan tinggi tabel

Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height.

5. Pengaturan warna pada tabel

Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks, background, ataupun Border

6. Pengaturan padding tabel

Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari sel tersebut.

e. Style pada formulir

Style CSS dpt digunakan di berbagai komponen input di dalam form. Penggunaan style CSS akan mengurangi beban halaman dan konsumsi bandwidth

4. Penyisipan stylesheet dalam script HTML

Secara garis besar, terdapat 3 cara input kode CSS ke dalam HTML yaitu metode inline style, internal style sheets, dan external style sheets.

a. Metode inline style

Metode inline style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style

b. Metode internal style sheets

Metode style sheets digunakan untuk 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 dari halaman HTML.

5. File CSS 

Penggunaan CSS dalam pembuatan web memberikan beberapa manfaat, di antaranya ukuran file menjadi lebih kecil sehingga load file lebih cepat.

a. CSS 1 

CSS q berfokus pada pengaturan format dokumen HTML, seperti font, warna, text attributes, dan pengaturan tepi

b. CSS 2

CSS 2 berfokus pada pengaturan format dokumen untuk kebutuhan cetak dan printer, posisi konten 

c. CSS 3 

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

B. Client side scripting dalam pemrograman web

Client side scripting yang paling mudah adalah cascading style sheet atau lebih sering disebut dengan CSS sebagai salah satu dokumen website yang bertujuan untuk mengatur gaya tampilan website.

1. Konsep client side programming 

Client-side Scripting adalah bahasa pemrograman web yang pengolahan datanya dilakukan oleh komputer pengguna/pengunjung. Jadi, ketika seseorang berkunjung ke sebuah web, komputernya akan mendownload data/script yang bersifat client-side di web tersebut.

2. Macam² aplikasi client side programming

a. Java script

JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer, Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. 

b. VB script 

VBScript atau lengkapnya Visual Basic Scripting Edition adalah sebuah bahasa skrip yang diinterpretasikan saat dieksekusi yang dikembangkan oleh Microsoft Corporation pada tahun 1996 yang seringnya digunakan dalam penjelajah web Internet Explorer (dapat digunakan mulai versi Internet Explorer 3.0).

3. Struktur program client side

Cara kerja Client Side Scripting itu sangat sederhana, yaitu berawal dari client yang memanggil berdasarkan URL (Uniform Resource Locator) melalui browser, kemudian browser mendapat alamat dari web server, yang nantinya akan memberikan segala informasi yang dibutuhkan web browser.

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>

Digunakan untuk mendefinisikan sebuah client-side script.

b. Tag <noscript>

Digunakan untuk alternatif jika javascript yang dibuat tidak bisa ditampilkan, misalnya karena browser yang digunakan tdk mendukung.

C. Client side script pada halaman web interaktif

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

1. Perintah² dasar dalam aplikasi client side programming

a. Penulisan kode javascript dengan embel 

b. Penulisan kode javascript inline

c. Penulisan kode javascript eksternal

Sumber : Buku Paket PWdPB Kelas XI program studi Rekayasa perangkat lunak Penulis Patwiyanto S.Kom , Sri wahyuni S.Kom dan Sumari Agus Prasetyo S.kom penerbit ANDI (Kurikulum 2013 Revisi & Terbit 2017)