Pemrograman Web - CSS (Bab 7)(Kelas XI)
BAB VII
CSS
A. KOMPETENSI DASAR
3.7 Menerapkan style pada halaman web
4.7 Membuat kode html untuk menampilkan style tertentu pada halaman web
B. MATERI PEMBELAJARAN
Anatomi dan Cara Kerja CSS
CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. Beberapa manfaat dari penggunaan CSS:
Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
• Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
• Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS
• Dapat digunakan dalam hampir semua jenis web browser.
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C dan CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan.
Selector digunakan untuk menentukan pada elemen apa style akan diterapkan. Selector dapat berupa id atau class. Declaration berisi tentang property dan value.
Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style (selektor, id dan class). Format penulisan CSS dengan Selector HTML adalah Nama- elemen. Format penulisan CSS dengan Selector class adalah .nama-class { }. Format penulisan CSS dengan Selector id adalah #id { ... }.
Misal:
Penerapan CSS pada sebuah halaman web dapat dilakukan dengan beberapa alternatif di antaranya adalah:
1. inline style sheet
yaitu Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika ingin memformat suatu elemen satu kali
saja.
Contoh :
Pada contoh di atas, elemen paragraf <p> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSSnya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
2. embedded style sheet
yaitu dengan menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh :
Pada contoh di atas semua elemen <P> dalam halaman web tersebut akan ditampilkan menggunakan font berwarna biru.
3. external style sheet
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Lalu memanggil file CSS tersebut ke dalam semua halaman web yang di buat.
Dengan cara ini, kita hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh :
Langkah pertama :
Membuat file html
Langkah kedua :
Membuat file css3.css
Tampilan pada browser:
Tulisan yang ada pada tag <p> pada file html akan tampil sesuai dengan setting an yang ada pada format file css nya.
Style pada Teks
Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada sebuah halaman web dapat diberikan sytle dalam kemasan CSS. Pengaturan style tersebut meliputi banyak properti, diantaranya color, direction, letter-spacing, line-height, text-align, text- decoration, text-indent, text-shadow, text-transform, unicode-bidi, vertical-align,white- space, word-spacing.
Format penulisan untuk pemberian warna pada text menggunakan CSS adalah : selector {color: warna}. Warna dapat berupa nama warna ataupun kode hexadecimal.
Contoh :
Tampilan pada browser :
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut : selector { letter-spacing:ukuranspasi;}.
Tampilan pada browser :
Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut selector {text-decoration: nilai text-decoration }.
Text-decoration digunakan untuk menampilkan atau menghilangkan garis bawah.
Tampilan pada browser :
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut: selector { word-spacing:ukuranspasi;}.
Format penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut selector {text-indent:nilaiindent}.
Tampilan pada browser:
Format penulisan CSS untuk pengaturan text indent adalah sebagai berikut selector { text-transform:nilai_text_transform}.
Tampilan pada browser:
Format penulisan CSS dengan text-shadow adalah: Selector {text-shadow: koordinatX koordinatY nilai Warna TeksBayangan;}.
Format penulisan CSS untuk text alignment adalah : selector {text-align:nilai text- align;}
Beberapa perintah CSS untuk link:
Style pada Multimedia
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari.
Untuk mengatur format multimedia dapat dituliskan secara inline, embed maupun eksternal CSS. Pemberian style pada gambar dapat menggunakan selector <img> Pemberian style pada video dapat menggunakan selector <video> Penambahan gambar sebagai latar belakang menggunakan dua properti, yaitu property background image dengan menggunakan tag div seperti format berikut div { background- image: url("namafile.png"); }
Contoh :
Tampilan pada browser:
Style pada Tabel
Pada dasarnya elemen dari HTML adalah model box yang mempunyai properti margin, border, padding dan content hal ini dapat digunakan untuk mendesain tampilan dari tabel. CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Penerapan style border pada tabel dengan style sebagai berikut {border:1px solid black;}
Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height. Teks dalam tabel diatur dengan properti.text-align dan vertical-align Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center. Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or middle Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari atau elemen HTML <td>.
Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks, background maupun border Style warna akan memberikan efek warna pada tag table, data (td) dan header tabel (th).
Property yang biasa digunakan :
1. Border : garis tepi yang memiliki ketebalan dan warna yang mengelilingi padding dan content.
2. Content: isi web, bisa berupa teks maupun gambar
3. Margin : Daerah paling luar yang membatasi dengan isi web dengan yang lainnya dan tidak berwarna
4. Padding: Area yang mengelilingi content. Warna padding dipengaruhu oleh background dari box
Contoh penerapan pada HTML:
Tampilan pada browser :
Style pada Formulir
Supaya form terlihat lebih indah dan menarik maka pada desain salah satunya dengan memberikan style CSS. Dengan menggunakan style CSS akan mengurangi beban halaman dan mengurangi bandwidth. Style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background dari elemen-elemen form.
Elemen form dapat diatur stylenya dengan menggunakan perintah selector form {...}. Elemen form textarea dapat diatur stylenya dengan menggunakan perintah selector textarea {...}.
Style yang diberikan pada input textfield diantaranya warna, background, border, jenis serta ukuran font dan masih banyak atribut lainnya yang bisa digunakan untuk style textfield.
Contoh penerapan dalam HTML :
Tampilan pada browser:
C. TUGAS MANDIRI (5 SOAL URAIAN)
Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!
1. Bagaimana cara menambahkan CSS pada dokumen HTML?
2. Bagaimana cara mengubah ukuran tag heading 1 menjadi 30px dengan CSS?
3. Bagaimana cara mengubah ukuran gambar dengan CSS?
4. Bagaimana cara memberi warna pada baris di tabel?
5. Bagaiamana cara mengubah ukuran input teks di form
D. TUGAS KELOMPOK (5 SOAL PRAKTIK URAIAN)
Buatlah kelompok dengan jumlah anggota 2 siswa setiap kelompoknya, dan bacalah petunjuk lalu kerjakan soal-soal di bawah ini dengan cermat dan teliti!
1. Sebutkan sedikitnya 5 properti dari pengaturan teks menggunakan CSS dan analisislah contoh penggunaannya!
2. Tuliskan format penulisan CSS untuk memberikan warna pada teks dan buatlah pada editor text!
3. Tuliskan format penulisan CSS untuk pengaturan spasi antar karakter pada paragraph dan buatlah pada editor text!
4. Sebutkan 3 macam tipe CSS dan berilah analisis pada tiap-tiap tipe nya!
5. Apa fungsi dasar CSS dan berikan contoh penerapannya pada halaman web!
E. UJI KOMPETENSI
PILIHAN GANDA
Berilah tanda silang (X) pada pilihan jawaban yang benar!
1. CSS merupakan singkatan dari:
a. cascading sheet style
b. conversion style sheet
c. conversion sheet style
d. cascading style sheet
e. conversion select sheet
2. Apa HTML yang benar untuk merujuk ke stylesheet eksternal?
a. <stylesheet> styleku.css </stylesheet>
b. <style src= "styleku.css">
c. <link rel="stylesheet" type="text/css" href="styleku.css">
d. <link rel="css">css</>
e. <style src="style.css"></style>
3. Dimana dalam dokumen HTML tempat yang tepat untuk merujuk ke stylesheet eksternal?
a. Dalam <body> bagian
b. Dalam <head>
c. Pada akhir dokumen
d. Dalam <html>
e. Tidak ada
4. Tag HTML yang digunakan untuk mendefinisikan stylesheet internal?
a. <style>
b. <script>
c. <CSS>
d. <embed>
C. <map>
5. Atribut HTML yang digunakan untuk mendefinisikan style inline?
a. style
b. font
c. class
d. styles
e. class
6. Yang merupakan sintaks CSS yang benar?
a. body {color: black;}
b. {body; color: black;}
c. { body:color = black;}
d. body:color = black;
e. body{color==black}
7. Bagaimana anda memasukkan komentar dalam file CSS?
a. 'Ini adalah komentar
b. // Ini adalah komentar
c. /* Ini adalah komentar */
d. // Ini adalah komentar //
e. /ini adalah komentar/
8. Properti yang digunakan untuk mengubah warna latar belakang?
a. color
b. background-color
c. bgcolor
d. colorbg
e. bg
9. Bagaimana cara menambahkan warna latar belakang untuk semua elemen <h1>?
a. h1.all {background-color: #FFFFFF;}
b. h1 {background-color: #FFFFFF;}
c. all.h1 {background-color: #FFFFFF;}
d. hlall {background:#FFFFFF;}
e. h1 {bg:#FFFFFF;}
10. Properti CSS yang digunakan untuk mengubah warna teks dari elemen?
a. fgcolor
b. color
c. text-color
d. color-text
e. bgcolor
11. Properti CSS yang mengontrol ukuran teks?
a. font-style
b. text-style
c. font-size
d. text-size
e. size
12. Sintaks CSS apa yang benar untuk membuat semua elemen <p> menjadi tebal?
a. p {text-size: bold;}
b. p {font-weight: bold;}
c. <p style="font-size: bold;">
d. <p style="text-size: bold;">
e. p {font-size:bold;}
13. Bagaimana cara menampilkan hyperlink tanpa garis bawah?
a. a {text-decoration: underline none;}
b. a {text-decoration: none;}
c. a {underline: none;}
d. a {decoration: no-underline;}
e. a {underline-text:none;}
14. Bagaimana membuat setiap kata dalam teks dimulai dengan huruf kapital?
a. text-transform: uppercase
b. Anda tidak dapat melakukannya dengan CSS
c. text-transform: capitalize
d. text-transform:uppercase
e. text-transform:lowercase
15. Properti yang digunakan untuk mengubah font dari elemen adalah ?
a. Kedua font-family dan font yang dapat digunakan
b. font
c. font-family
d. font-size
e. font-color
16. Bagaimana cara membuat teks tebal?
a. font-weight: bold;
b. style: bold;
c. font: bold;
d. font-style:bold
e. text-style:bold;
17. Bagaimana cara menampilkan batas baris seperti ini:
Batas atas = 10 piksel
Batas bawah = 5 piksel
Batas kiri = 20 piksel
Batas kanan = 1pixel?
a. border-width: 20px 5px 10px 1px;
b. border-width: 10px 20px 5px 1px;
c. border-width: 10px 1px 5px 20px;
d. border-width: 10px 5px 20px 1px;
e. border-width: 20px 5px 1px 10px;
18. properti yang digunakan untuk mengubah elemen margin kiri adalah..
a. margin-left
b. indent
c. padding-left
d. padding-right
e. margin-right
19. Bagaimana cara membuat daftar yang berisi daftar item dengan bentuk kotak?
a. list-style-type: square;
b. list:square;
c. list-type: square;
d. list-style:square
e. style:square
20. Bagaimana cara memilih elemen dengan id "demo"?
a. .demo
b. Demo
c. *Demo
d. #demo
e. -demo
MENJODOHKAN
Pilihlah jawaban yang benar dari soal-soal pada kotak pilihan jawaban yang telah
tersedia di bawah ini :
1. Simbol css untuk selector ID adalah...
2. Simbol css untuk selector class adalah...
Untuk soal no 3-5 lengkapilah perintah css di bawah ini:
<link href="..a.." rel="..b.." type="..c..">
3. Perintah yang tepat untuk mengisi a adalah...
4. Perintah yang tepat untuk mengisi b adalah...
5. Perintah yang tepat untuk mengisi c adalah...
6. Perintah dalam CSS yang digunakan untuk membuat tulisan menjadi miring adalah...
7. Perintah dalam CSS yang digunakan untuk menentukan jenis font adalah...
8. Perintah CSS yang digunakan untuk mouse over link adalah...
9. Perintah CSS yang digunakan untuk selected link adalah...
10. Perhatikan struktur CSS berikut ini: P {text-align:center; color:red;}
Yang merupakan selector pada perintah CSS diatas adalah...
Kotak pilihan jawaban
0 komentar: