Style Halaman Web Dengan CSS
BAB 4
Style Halaman Web Dengan CSS dan Client Side Scripting
Jenis-jenis Layout dalam Halaman Web (frameset, table, div)
- Tag Frameset dan Atributnya
FRAMSET digunakan bersamaan dengan penggunaan tag FRAME yang berguna untuk menampilkan file sumber dari bingkai untuk dijadikan bagian dari tag FRAMESET. FRAMSET adalah tag HTML yang digunakan untuk menampilkan bingkai-bingkai tersendiri pada dokumen html. cara kerj FRAMESET sama seperti kerja dokumen html menjadi beberapa bagian kolom dan baris. FRAMESET juga dapat membagi halaman dokumen HTML menjadi kolom dan baris. perbedaannya, pada tag FRAMESET, isi dari setiap kolom dan barisnya berbentuk bingkai yang bersumber dari dokumen HTML lain.
- Tag table dan Atributnya
Tag ini digunakan untuk membuat tabel pada dokumen HTML. Penggunaan tag ini selalu disertai dengan penggunaan tag <TR> yaitu untuk menyatakan baris dari tabel dan <TD> digunakan untuk menyatakan kolom dari tabel.
- Tag Div dan Atributnya
Tag div harus disandingkan dengan CSS supaya dapat menghasilkan bentuk design layout yang lebih menarik. Oleh sebab itu, seorang pemula banyak mengalami kendala ketika akan membuat sebuah layout website dengan menggunakan tag div. Tag div adalah tag HTML yang sebenernya digunakan untuk memberikan tanda batas suatu daerah dari rangkaian html.
- Model Layout
Model layout terdiri dari layout split (model yang paling sering digunakan karena keseimbangan dalam halaman web tetap terjaga. Navigasi berada dibagian kanan dan kiri halaman web) dan left index(digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halamn utama. Navigasi berada pada bagian kiri halaman web).
Style Pada Halaman Web
CSS sebagai bahasa style sheet yang digunakan dalam mengatur tampilan dokumen. Dengan adanya CSS maka tampilan halaman yang sama akan memiliki tampilan yang berbeda. Pengaturan style tersebut meliputi properti pada bagian pewarnaan, font, spasi, dan lain-lain.
Inline Style Sheet
Kode CSS langsung di masukkan kedalam tag HTML dengan menggunakan atribut style.
Interneal Style Sheet
Tetap satu halaman HTML namun dikumpul menggunakan tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML. Kelemahan dalam menggunakan.
External Style Sheet
CSS didefinisikan secara terpisah pada file yang berbeda. Sleanjutnya, file atau halaman web yang ingin menerapkan style pada file CSS tinggal memanggil file CSS. File yang berisi style CSS disimpan dalam format ".css".
Versi CSS
- CSS 1 (berfokus pada pengaturan format HTML, seperti fint, warna, teks atribut, posisi, dan pengaturan tepi)
- CSS 2 (berfokus pada pengaturan format dokumen untuk kebutuhan cetak dengan printer, posisi konten, downloadable, font huruf, dan table layout)
- CSS 3 (mendukung penuh CSS 2 dengan beberapa penambahan tanpa adanya pengurangan)
Rangkuman
- Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isinya (content).
- Cara kerja FRAMESET sama seperti cara kerja tag TABLE, di mana tag TABLE digunakan untuk membuat halaman seperti dokumen HTML menjadi beberapa bagian kolom dan baris.
- TAG DIV tidak dapat berdiri sendiri dalam penggunaannya, di mana TAG DIV harus disandingkan dengan CSS supaya dapat menghasilkan bentuk design layout yang lebih menarik.
- Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Style CSS digunakan di berbagai komponen input di dalam form. POenggunaan style CSS akan mengurangi beban halaman dan konsumsi bandwidth.
- Contoh dari client side scripting ini, antara lain HTML, XHTML, CSS, JavaScript, XML, dan JQUERY.
Sintaks CSS
Sintaks CSS dituliskan dengan : Selector {properti: value}. Selector merupakan nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal maupun style eksternal, bagian elemen HTML yang akan ditunjuk untuk mengatur style, dan dapat berupa class dan ID.
Pengaturan bentuk teks (decoration)
Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk mengatur dekorasi teks adalah selector {text-decoration:nilai text-decoration}. Nilai dari text-decoration dapat berupa overline, line trough, underline, dan none yang berarti tanpa dekorasi.
Pengaturan spasi antarkata (word-spacing)
Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkata. Sintaks CSS nya; selector{word-spacing:nilai spasi;}. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.
Pengubahan huruf besar dan huruf kecil dari sebuah teks (text-transform)
Digunakan untuk menetukan huruf besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text-indent adalah: Selector{text-transform:nilai text transform}.
Pengaturan warna pada teks(color)
CSS dapat menggunakan nilai warna sebagai berikut:
- Nilai HEX, misalnya "#ff0000"
- Nilai RGB, misalnya "rgb(255,0,0)"
- Nama dari warna tersebut, misalnya "red"
Pengaturan spasi antarkarakter (letter-spacing)
Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkarakter atau huruf. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Format penulisan CSS untuk pengaturan jarak (spasi) antarkarakter atau huruf adalah: Selector{letter-spacing:nilai spasi;}.
.png)
Comments