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

   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. Pada dasarnya, sebuah dokumen web umumnya memiliki elemen - elemen sebagai berikut.

a.Elemen Header 

    Elemen jenis ini berisi judul dengan penjelasan lain dokumen. Elemen ini biasanya diisi dengan logo website, menu - menu global (Seperti login dan logout),ataupun nama halaman yang sedang di tampilkan.

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. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

e. Elemen footer 

     Elemen jenis ini sebagai bagian penutup dari website, yang dapat berusia informasi lain tentang website, seperti lisensi penggunaan,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 di bayangkan.

a. Tag Frameset dan Atributnya

     Frameset adalah tag HTML yang di gunakan untuk menampilkan bingkai-bingkai tersendiri pada dokumen HTML. 

b. Tag Table dan Atributnya

     Tag ini digunakan untuk membuat Table pada HTML.Penggunaan tag ini selalu disertai dengan penggunaan tag <TR> dan <TD>.

c. Tag Div dan Atributnya

    DIV adalah tag HTML yang sebenarnya digunakan untuk memberi tanda batas suatu daerah dari sebuah rangkaian html( bisa berupa tulisan,gambar atau kode lainnya).

d. Model layout

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

• Layout Split

    Layout Split merupakan model yang banyak dipakai karena keseimbangan dalam halaman web tetap terjaga.

• Left Index

    Left Index digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama.

• Top Index 

    Top Index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine.

•  Bottom Index

    Bottom index biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal.

•  Alternating Index 

    Alternating Index digunakan untuk halaman yang banyak menampilkan grafik, foto,dan produk yang di sertai dengan teks berupa keterangan harga, jumlah, dan lain-lain.

3. 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, font,spasi,dll.

• Pengaturan warna pada 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"

• Pengaturan spasi antar karakter

  Letter-spacing digunakan untuk memberikan jarak (spasi) antar karakter atau huruf.

• Pengaturan bentuk teks 

  Text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks.

• Pengaturan spasi antar kata

   Word-spacing digunakan untuk memberikan jarak (spasi) antar kata.

• Pengaturan jarak indentasi paragraph 

  Text-indent menentukan jarak indent dari baris pertama dalam teks-blok sehingga teks baris pertama terlihat lebih menjorok ke dalam dibanding teks baris yang lain.

• Perubahan huruf besar dan huruf kecil dari sebuah teks 

  Teks-transform property digunakan untuk menentukan huruf besar dan kecil dalam teks.

b.Style pada Multimedia

 

• CSS pada Tanpilan Gambar

   CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html, baik itu tulisan,Table, gambar, maupun objek lainnya.

• CSS gambar untuk background

  Penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image.

• CSS untuk menyisipkan gambar 

   Agar terlihat rapi dan menarik, gambar yang disisipkan perlu di beri CSS.

• CSS pada Tampilan Video

  

• CSS Video Embed dari YouTube

  Penyajian video juga bisa memanfaatkan elemen iframe yang di-link-kan ke alamat video tertentu, misalnya dailymotion.com, www.youtube.com, dll

c. Style pada Tabel 

   

• Pengaturan Border tabel

• Konsep dasar model box 

• Pengaturan Text-Algin pada           Tabel

• Pengaturan Lebar dan tinggi   Tabel

• Pengaturan warna pada Tabel

• Pengaturan padding Tabel

d. Style pada Formulir 

 • CSS pada input text

 • CSS pada elemen form

 • CSS pada Text field

 • CSS pada Radio Button

 • CSS pada Button

 • CSS pada Checkbox