BAB 4 : STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING

 

A. Style pada Halaman Web


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.

 Layout berfungsi untuk memberikan tata letak yg baik dapat membuat halaman lebih seimbang sehingga enak dilihat dan dibaca.   Pada dasarnya, sebuah dokumen web memiliki elemen-elemen sebagai berikut.


a. Elemen Header 

     Elemen jenis ini berisi judul dan penjelasan lain dokumen. Biasanya diisi dengan logo website, menu global (login & logout), ataupun nama halaman yang sedang ditampilkan.


b. Elemen Navigation

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


c. Elemen Sidebar

     Elemen jenis ini sebagai pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, menu tambahan.


d. Elemen Konten 

      Elemen jenis ini sebagai isi utama dari dokumen web.


e. Elemen Footer

     Elemen jenis ini sebagai bagian penutup dari web, yang berisi informasi lain tentang web.


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


b. Tag Table dan Atributnya 

      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. DIV adalah tag HTML yang sebenarnya digunakan untuk memberikan tanda batas suatu daerah dari sebuah rangkaian HTML.


d. Model Layout 

1.) Layout Split

       Merupakan model yang banyak dipakai karena keseimbangan dalam Halaman Web tetap terjaga. 


2.) Left Index

      Digunakan untuk layar dengan resolusi yang lebar. 


3.) Top Index

        Digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine.


4.) Bottom Index

       Digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal. 


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

    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

         Adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style. Berikut ini contoh penggunaan metode inline Style CSS. 



     b. Metode Internal Style Sheets

           digunakan untuk memisahkan kode CSS dari tag HTML, namun tetap dalam satu halaman HTML. Atribut style yg sebelumnya berada di tag, dikumpulkan pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman  HTML. 

Kekurangannya jika memiliki beberapa halaman dengan style yang sama, anda harus membuat kode CSS pada masing-masing halaman tersebut. 

     

     c. Metode External Style Sheets

           Digunakan untuk mengangkat kode CSS ke dalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML.



5. File CSS

a. CSS 1

      Berfokus pada pengaturan format dokumen HTML, seperti cont, warna, text attributes, posisi, dan pengaturan tepi.


b. CSS 2

      Berfokus pada pengaturan format dokumen untuk kebutuhan cetak dengan printer, posisi konten, downloadable, dont huruf, dan table layout. 


c. CSS 3

     Berfokus pada dukungan tampilan desain web, animasi warna, sampai animasi 3D.



B. Client Side Scripting dalam Pemrograman Web


1. Konsep Client Side Programming

  a. Selector merupakan nama nama yang diberikan untuk style-style yang berbeda.

  

b. Property digunakan untuk mengatur CSS dalam mengubah selector yang dipilih. 


c. Value merupakan nilai Property CSS.


2. Macam-Macam Aplikasi Client Side Programming

     a. Javascript

     b. VBScript


3. Struktur Program Client Side

   a. Menuliskan Kode Javascript

   b. Menggunakan file eksternal



Source :

Buku Paket Pemrograman Web Dan Perangkat Bergerak

Komentar

Posting Komentar

Postingan populer dari blog ini

Operator Penugasan, Perbandingan, Logika, dan Ternary pada PHP

Gambar
 Assalamualaikum, Halo semuanyaa! Apakabar?? Sehat kan? Semoga semua sehat-sehat aja yaa!     Oke jadi kali ini saya ingin memberikan sebuah penjelasan tentang operator seperti operator penugasan, perbandingan, logika, dan ternary dan juga pasti dengan contohnya. Kurang dong kalo ngasih teori tanpa ada praktek! Jadi simak terus yaaa! Apasih Operator itu?? Operator adalah suatu simbol yang memberikan sebuah compiler atau interpreter untuk bisa melakukan operasi tertentu seperti operasi matematika, rasional atau logis agar bisa menghasilkan hasil akhir seperti yang diinginkan.  Operator juga bisa dibilang sebagai dasar dari sebuah bahasa pemrograman jenis apapun. 1. Operator Penugasan Operator penugasan  “=”  ini berfungsi untuk memberikan nilai pada suatu variabel. Macam-macam operator penugasan Contoh : Pengisian dan Penambahan Pengisian dan Pengurangan Pengisian dan Perkalian Pengisian dan Pemangkatan Pengisian dan Pembagian Pengisian dan Sisa bagi 2. Oper...
Baca selengkapnya

Tugas PART 2

Gambar
  VARIABEL adalah suatu wadah/tempat untuk menyimpan data sementara. Data variabel sewaktu waktu bisa dipanggil, ditampilkan, diubah atau diganti nilainya. Jadi selama browser belum di tutup, maka data variabel masih tersimpan di memory komputer. Data yang di simpan di variabel tidak permanen. Cara  menulis Variable : Variabel diawali dengan tanda dolar $ Nama variabel tidak boleh ada spasi Nama variabel lebih dari satu kata dipisah menggunakan underscore/garis bawah _ Karakter pertama setelah $ tidak boleh menggunakan angka hanya boleh dengan huruf dan underscore/garis bawah _ Didalam variabel tidak boleh mengandung karakter-karakter khusus seperti : % @  #  ;  ! Nama Variabel bersifat case sensitive karena PHP membedakan huruf besar dan kecil. Disini saya akan memberikan contoh cara menggunakan variable pada PHP, berikut conoth codingnya. <?php $nama = "Salman Ramadhan A" ; $umur = "OTW 17" ; $jeniskelamin = "Pria" ; $sekolah = "SMK N 1 JKT...
Baca selengkapnya

FORMULIR SEKOLAH MAS SALMAN

Gambar
  < html > < head >< tittle >FORMAT FORMULIR SEKOLAH SALMAN</ tittle ></ head > < body >     < form method = "Post" >         < table border = 0 width = "75%" > < tr >             < td width = "20%" >NISN</ td >             < td >< Input Type = "Text" Name = "NISN" MaxLength = "10" Size = "11" ></ td > < tr > </ tr >                 < td width = "20%" > Nama Peserta Didik</ td >                 < td >< Input Type = "Text" Name = "Name Peserta Didik" MaxLength = "25" Size = "25" > </ td ></ tr > < tr >                     < td width = "20%" >Alamat</ td >               ...
Baca selengkapnya