Bab 4 Style halaman web dan client side scripting

Halo readerzzz di kesempatan kali ini saya ingin memberikan Materi BAB 4 MATA PELAJARAN PPdPB 

A. Style pada halaman Web

 CSS sebagai sebuah bahasa style sheet yang digunakan dalam mengatur tampilan dokumen. dengan adanya 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 sub bab body text footer image dan style lainnya untuk digunakan bersama-sama dalam beberapa berkas atau file

1. Konsep Layout dalam halaman web 

konsep layout dalam halaman web memiliki 5 elemen yaitu 

a. Element header 

Elemen Header ini berisi judul dan penjelasan lain dokumen. Elemen ini biasanya diisi dengan logo website, Menu - Menu biasa (semisal Login, Logout, Menu's dll) 

b. Element navigation 

Elemen ini memberikan akses Navigasi ke halaman halaman web lainya (contoh seperti Gambar dokumentasi, Tentang Apa yang dijadikan web dll) 

c. Element sidebar 

Elemen ini sebagai pendukung konten, seperti daftar konten lain & berbagai daftar konten lain seperti iklan DLL

d. Element konten 

Elemen jenis ini digunakan dan merupakan hal isi utama dari web - web lainya.

e. Element footer 

Elemen jenis ini merupakan penutup isi web, bisa berisi lisensi penggunaan ataupun Link ke web lainya. 

2.  Jenis-jenis Layout dalam halaman web

  Rancangan web design (mockup web design MWD) menjadi gambaran keserasian warna layout sesuai konsep design yang dibayangkan. 

a. tag frameset dan atributnya

Frameset adalah tag HTML yang digunakan untuk menampilkan bingkai-bingkai tersendiri pada dokumen HTML. Cara kerja FRAMESET sama seperti tag Table yang digunakan untuk membuat halaman baris dan kolom. Hal ini juga dilakukan oleh tag FRAMESET yang dapat membagi halaman dokumen HTML menjadi kolom dan baris.

b. tag table dan atributnya 

Tag ini digunakan untuk membuat tabel pada dokumen HTML. penggunaan ini disertai tag <TR> dan <TD>. Tag <TR> digunakan untuk menyatakan baris dari tabel dan tag <TD> membuat susunan halaman HTML menjadi lebih rapi 

c. tag Div dan atributnya 

Tag DIV harus disandingkan dengan CSS supaya menghasilkan bentuk design yang menarik.

d. model layout  

pengertian model layout adalah model yang umum digunakan dalam mendesain suatu halaman web diantaranya 

•. Layout Split 

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

•. Left index 

berfungsi untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan Navigasi 

•. Top index 

Digunakan untuk menampilkan link yang banyak ke situs lain

•. Bottom index 

digunakan apabila isi dari halaman berhubungan dengan topik tunggal 

•. alternating index 

menampilkan grafik, Foto dan produk lain disertai dengan text 

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, pemilihan font, spasi dan lain-lain. daftar style pada teks yang umum digunakan yaitu : 

2. style pada multimedia

cara mendasar stylesheet CSS dapat diterapkan oleh elemen-elemen html multimedia di antara gambar, video, dan audio.

1) cascading sheet pada tampilan gambar

CSS dapat diterapkan hampir pada hampir semua objek yang disisipkan dalam tab html baik itu tulisan, table, gambar, maupun objek lainnya. CSS berperan penting dalam menyajikan informasi dengan visual yang baik, lebih optimal dari sisi penulisan, serta lebih disenangi oleh mesin pencari/browser

2) cascading style sheet gambar untuk background 

penambahan gambar latar belakang jika dilakukan dengan menggunakan dua properti, yaitu background dan background image.

4. penyisipan style sheet dalam script HTML

secara garis besar terdapat tiga input kode CSS dalam html yaitu : 

1. Metode Inline style 

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

2. Metode Internal Style Sheet

metode internal style sheet atau embedded stylesheet digunakan untuk memisahkan kode CSS dengan html, namun tetap dalam satu halaman html. atribut style yang sebelumnya berada di dalam tag, dikelompokkan pada sebuah tag

3. Metode External Stylesheets

metode internal stylesheet digunakan untuk 'mengangkat' kode CSS tersebut dalam sebuah file tersendiri yang terpisah sepenuhnya dan halaman html setiap halaman yang membutuhkan kode CSS tinggal 'memanggil' file CSS tersebut. 

5. File CSS 

penggunaan css dalam pembuatan web dan memberikan beberapa manfaat, diantaranya ukuran file menjadi lebih kecil sehingga load file lebih cepat. pada 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. CSS merupakan sebuah teknologi internet yang direkomendasikan oleh www atau w3c pada tahun 1996. setelah standarisasi CSS. Internet Explorer dan netscape merilis browser terbaru yang mendukung standar CSS. ini beberapa versi CSS

CSS dibagi atas 3 versi CSS pertama berfokus pada pemrograman format dokumen html, seperti font, warna teks atribut spasi dan lain-lain posisi dan elemen lainnya yang kedua ada css2 css2 berfokus pada pengaturan format dokumen untuk kebutuhan cetak dengan printer yang ketiga ada CS3 beberapa web browser yang mendukung CS3 sedangkan beberapa penambahan tanpa perubahan dari CSS kedua 

Macam macam aplikasi client side programming 

client side scripting sebagai salah satu jenis bahasa pemrograman web yang berproses pengolahannya dilakukan di sisi clien atau komputer pengguna proses pengolahan dilakukan oleh web browser sebagai kliennya. contoh dari client side scripting ini antara lain html xhtml CSS javascript xml dan jcquery 

kali ini materi bab 4 ppwdb sudah selesai dibahas untuk teman-teman semua silakan stay tune di blog Ini 

sumber : 

buku cetak pemrograman web dan perangkat bergerak kelas 11 mata pelajaran rekayasa perangkat lunak penerbit buku penerbit Andi. buku ini ditulis oleh Pak widyanto sarjana komputer, Sri Wahyuni sarjana komputer, sumari Agus Prasetyo sarjana komputer. buku ini merupakan buku revisi tahun 2017 dan menganut kurikulum 2013