Bab 4 Style Halaman Web dan Client Side Scripting

-

 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.
Jenis - jenis CSS adalah :
1. Internal CSS
Internal CSS adalah kode CSS yang penulisannya dalam tag <style> dan posisinya ada pada bagian atas header file HTML. CSS jenis ini berguna untuk membuat custom khusus dalam satu halaman website.

2. External CSS

External CSS adalah kode CSS yang dituliskan terpisah dengan file HTML, dan ditulis sendiri pada file ekstensi .css. Penulisan file eksternalnya bisa diletakkan pada bagian <head>, jadi setiap halaman website dilakukan pemanggilan file .css.

3. Inline CSS
Jenis yang terakhir ini langsung memasukkan kode CSS yang ditulis pada setiap atribut HTML.

1. Konsep Layout dalam Halaman Web

Layout adalah tata letak, atau secara bahasa, layout merupakan rancangan desain tata letak dengan tujuan tertentu.

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.

3. Konsep dan Penulisan Script Stylesheet

Berikut ini beberapa hal yang berhubungan dengan 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 ke dalam tag HTML dengan menggunakan atribut style.

b. Metode Internal Style Sheets

Metode Internal Style Sheets (Embedded 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 CSS tersebut ke dalam sebuah file tersendiri yang terpisah sepenuhnya 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; kode HTML lebih sederhana dan lebih mudah diatur; mampu berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML; mudah untuk mengubah tampilan hanya dengan mengubah file CSS saja; serta bisa digunakan dalam hampir semua jenis web browser.

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 (style) tampilan website.

1. Konsep Client Side Programming

Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML,dalam CSS juga dikenal dengan sebutan selector. CSS memiliki aturan tersendiri dalam penulisan sintaks. Format penulisan dari CSS dapat dituliskan: Selector { Property: value; }.

2. Macam - Macam Aplikasi Client Side Programming

Client Side Scripting sebagai salah satu jenis bahasa pemrograman web yang proses pengolahannya dilakukan oleh web browser sebagai client-nya. Contoh dari Client Side Scripting, antara lain HTML, XHTML, CSS, JavaScript, XML, dan JQUERY.

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.

4. Penyisipan Script Client Side dalam HTML

Berikut ini beberapa perintah yang digunakan untuk penyisipan JavaScript dalam HTML.
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

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.

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

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.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat Website Pembelian Tiket Pesawat dengan PHP dan SQL

-
Gambar
  Dalam sebuah system e-commerce tentunya harus terdapat database yang dapat menangani beberapa hal seperti: menangani database produk yang akan dijual, menangani pencatatan order yang masuk, produk apa yang di pesan, seberapa banyak produk tersebut dipesan. Tabel- Tabel dalam database yang kita perlukan untuk membuat Pembelian Tiket Pesawat : Tentu saja kita membutuhkan codingan PHP untuk membuat struktur design. Codingan yang akan kita perlukan : 1. koneksi.php 2.Tampilan User : - index.php                                      - login.php                                     - register.php                                       - pesanan.php  ...
Baca selengkapnya

Cara Menggabungkan Sel Tabel (Attribut Rowspan dan Colspan)

-
Gambar
Pertama-tama apa sih itu Attribut Rowspan dan Colspan? Atribut R owspan  digunakan untuk menggabungkan baris pada tabel. Sedangkan Atribut C olspan  digunakan untuk menggabungkan kolom pada tabel Contoh Penggunaan Rowspan dan Colspan :   < table class="table" border="2">   < thead class=" thead-dark ">     < tr >         < th rowspan="2">No</ th >         < th rowspan="2">First Name</ th >         < th rowspan="2">Last Name</ th >         < th colspan="3">Life Style</ th >     </ tr > Dalam contoh di atas, kita dapat melihat bahwa tag  th  yang memiliki Attribut  Colspan ,   akan membuat sel tabel  bersatu  dengan  kolom  disebelahnya. Sedangkan atribut  Rowspan  akan membuat sel tabel bersatu dengan  baris  dibawahnya. Kedua at...
Baca selengkapnya

Membuat program dengan 5 Struktur Kontrol pada bahasa PHP

-
Gambar
<?php while ( true ) {   echo "Hello \n " ;     break ; //saya menambah break dikarenakan loop yang dilakukan pada codingan diatas terlalu banyak } $siswa = array ( "Udin," , " Pesulap Merah" , " dan Gus Samsudin" ); foreach ( $siswa as $pelajar ) {   echo " $pelajar " ; } $favwarna = "hijau" ; switch ( $favwarna ) {   case "merah" :     echo "<br> Warna favorit anda adalah Merah <br>" ;     break ;   case "hijau" :     echo "<br> Warna favorit anda adalah Hijau <br>" ;     break ;   default :     echo "<br> Anda tidak memiliki warna favorit <br>" ; } for ( $x = 10 ; $x < 100 ; $x += 65 ) {         if ( $x == 10 ) {             continue ;         }     echo "Nilai rata-rata kalian: $x <br>" ; } $nilai = 75 ; if ( $nilai > 60 ) {   echo "Nilai kal...
Baca selengkapnya