LAPORAN WEB HTML 3
CASC$DING STYLE SHEETS
(CSS)
Cascading
Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan
bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti
Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab,
bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama
dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat
tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat
mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran
border, warna border, warna
hyperlink, warna mouse over, spasi antar
paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter
lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang
sama dengan format yang berbeda.
CSS
juga telah distandartkan oleh World Wide Web Consortium (W3C)untuk digunakan
diweb browser dan dalam pengaplikasiannya, CSS ini berada didalam
tag <head>.
Penulisan CSS :
Istilah-istilah
dalam CSS
1.
Style Rute
Cascading
style sheet merupakan kumpulan aturan yang mendefinisikan style dari dokument.
Sebagai
contoh apabila kita akan membuat atruan style yang menentukan bahwa semua
<h1>
ditampilkan
dengan warna kuning.
Style
Sheet
2.
Style sheet dapat di-embedded ke HTML
document, atau disebut emdebedded style sheet.
Style
sheet juga bisa dibuat sebagai external file dan dilink ke dokumen HTML. Style
role bisa dikenakan pada bagian tertentu dari web page. Sebagai contoh kita
bisa menentukan paragrafh tertentu ditampilakan dengan style bold dan italic,
sementara yang lain tetap seperti tampilan biasa.
3.
Selector Selector {property1: value:
property2: value,...} h1{color:green;
backgroundcolor:orange}
Style sheet terdiri dari dua bagian: a. Selector bagian pertama sebelum tanda
“{}”disebut selector b. Declaration terdiri dari properti dan nilainya.
Latihan 1:
External Style Sheet CSS yang berada di luar dokument, External
CSS ini adalah file yang berekstensi “.css”. Bentuk CSS External:
Dimana:
- “<link ...>” merupakan tag pembuka,
dan diakhiri dengan tanda “>”
- rel= “stylesheet”, menerangkan bahwa halaman
ini akan dikenai efek CSS
-
type= “text/css”, file yang dipanggil adalah berupa CSS
-
href= “css_file.css”, merupakan alamat stylesheet yang dipanggil
Membuat
css external
Nama
file: css_files.css
Latihan
2:
Internal
Style Sheet Bentuk Umum:
Latihan
3:
Selector
1.
Selector untuk merubah body Nama file :
Latihan4_3.1.html
Selector
bebas Nama file : Latihan4_3.2.html
.htmlSelector
dengan class Nama file : Latihan4_3.3.html
Selector
dengan id Nama file : Latihan4_3.4
Latihan
4:
Membuat Halaman WEB
1. Format dengan margin Nama file : Latihan4_4.1.html
Pemetaan
menggunakan padding Padding hampir sama dengan margin:
a.
Margin hanya digunakan untuk membuat batasan-batasan sisi halaman.
b. Padding dapat membuat batasan-batasan pada
komponen web lain seperti table, disamping pengaturan batas halaman.
Nama
file : Latihan4_4.2.html
Latihan
5 :
Membuat
Background Nama file : Latihan4_5.1.html
Nama
file : Latihan4_5.2.htm
Latihan
6:
Format
Text Pada Web Nama file : Latihan4_6.1.html
Nama
file : Latihan4_6.2.html
Latihan
7: Pengaturan Font Nama file : Latihan4_7.html
Latihan
8: Pengaturan Hyperlink dan Tombol Yang Menarik Penggunaan property selector
Nama file : Latihan4_8.1.html
Pembuatan
tombol dengan tabel Nama file : Latihan4_8.1.html
Komentar
Posting Komentar