�ݺ�ߣ

Achmad Hamdan, S.Pd., M.Pd.
Modul Pemrograman Web – CSS
Universitas Negeri Malang
MATERI I
“MENYAJIKAN CSS UNTUK MEMFORMAT TAMPILAN 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
adalah pewarnaan, pemilihan font, spasi dan lain sebagainya. Untuk lebih detailnya dapat dilihat pada
tabel berikut ini.

1. Pengaturan warna pada teks/color
CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat
menggunakan nilai warna sebagai berikut :
 nilai HEX  misalnya, "#ff0000"
 nilai RGB  misalnya, "rgb(255,0,0)"
 nama dari warna tersebut  misalnya "red"
Berikut adalah contoh penulisan warna pada teks yang dituliskan secara embeded.
Nama File: warnaCSS.htm
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut, secara otomatis ketika
terdapat teks pada tag <body., <h1> dan <p> terkena style pewarnaan.

2. Pengaturan spasi antar karakterf/letter-spacing
Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak
(spasi) antar karakter atau huruf.
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini adalah contoh
penerapan dari style tersebut.
Nama File: spasiCSS.htm

Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut :
3. Pengaturan bentuk-bentuk teks/decoration
Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau
menghapus dekorasi dari teks.
Nilai dari text-decoration dapat berupa overline, line-through, underline dan none yang berarti
tanpa dekorasi . Berikut ini adalah contoh penerapan dari style tersebut.
Nama File: textDecoration.htm

4. Pengaturan spasi antar kata/word-spacing
Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk memberikan jarak
(spasi) antar kata. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.
Nama File: spasiKata.htm

5. Pengubahan huruf besar dan huruf kecil dari sebuah teks/text-Transform
Teks-transform properti digunakan untuk menentukan huruf besar dan kecil dalam teks. Nilai text
transform dapat diisi dengan uppercase, lowercase, capital. Pada listing kode berikut terlihat CSS dituliskan
dalam bentuk CLASS p.besar, p.kecil dan p.kapital. Hal ini bertujuan untuk memberikan pengaturan yang
berbeda pada paragrafnya.
Nama File: textTransform.htm

6. Pengaturan Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks dapat ditulis rata
kiri, rata kanan, rata kanan kiri ataupun ditulis center. Berikut adalah contoh dari penulisan style text-align
yang disisipkan di selector h1 dan paragraf.
Nama File: textAlignment.htm

TUGAS PRAKTIUKM I
Buatlah tampilan halaman web dengan memberikan style pada teks yang digabungkan dengan tabel
serta gambar seperti pada contoh berikut.
Nama File: TugasPrak1.htm

MATERI II
“Menyajikan CSS untuk Memformat Tampilan Multimedia”
1. Cascading style sheet pada tampilan gambar
CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan,
tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat dituliskan secara inline seperti
contoh berikut :
Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar dibuat sama 200 x
200 dan margin atas gambar adalah 10px sehingga antar gambar terlihat ada jarak.
Nama File: CSSgambar.htm

2. Cascading style sheet Gambar untuk background
Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan
menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti
ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.
Namun, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar tidak
sama dengan ukuran elemen. Jika ukuran elemen lebih besar dari ukuran gambar, maka gambar akan
ditampilkan berulangkali, secara horizontal maupun vertikal.
Misalkan, gambar asli yang digunakan sebagai background dengan ukuran 50px X 50px.
Karena ukuran asli gambar adalah 50px X 50px sedangkan ukuran background yang diinginkan adalah
800px X 600px maka gambar akan ditampilkan berulang-ulang sampai terpenuhi ukuran background
800px X 600px seperti pada gambar berikut :

Untuk itu dapat menggunakan properti background-repeat untuk mengatur bagaimana
perulangan kode ingin dilakukan. Terdapat empat nilai yang dapat diisikan pada properti background-
repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Listing Kode CSS di bawah akan menghilangkan
perulangan pada sumbu x dan sumbu y, sehingga kiwi.jpg hanya akan ditampilkan satu kali :
3. Cascading style sheet untuk menyisipkan gambar
Adakala saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel
tersebut. Agar terlihat rapi dan menarik maka gambar yang disisipka perlu diberi CSS.
Nama File: sisipGambar.htm

Bila listing kode dijalankan akan menghasilkan tampilan sebagai berikut :

4. Cascading style sheet pada tampilan video
Untuk penerapan Cascading style shee pada elemen video dapat dituliskan secara inline seperti
contih berikut ini :
Nama File: video.htm
Bila listing program diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center”
dengan atribut width:400px dan height:400px seperti pada tampilan berikut ini :

TUGAS PRAKTIKUM II
Buatlah tampilan halaman web yang menampilkan 3 gambar dengan ukuran yang berbeda.

MATERI III
“PENERAPAN CSS PADA TABEL”
1. Konsep Dasar Model Box
Pada dasarnya elemen dari HTML adalah model box. Istilah model box ini digunakan pada saat
membahas desain dan layout. Model box memungkinkan untuk membuat border disekeliling elemen dan
space elemen yang saling berhubungan. Model box pada elemen HTML dapat digambar sebagai berikut :
Keterangan gambar
Margin Daerah paling diluar yang membatasi dengan elemen HTML yang lainnya dan tidak berwarna
Border Border mengelilingi padding dan content. Garis yang mempunyai warna dan ketebalan
Padding Area yang mengelilingi content. Warna padding dipengaruhu oleh background dari box
Content Isi dari box, bisa berupa teks maupun gambar
Ketika menentukan width dan height dari properti elemen dengan menerapkan CSS, sebenarnya
itu hanya mendefiniskan area content saja sehingga jika menginginkan keseluruhan eleme box maka harus
diperhitungkan juga margin-border-padding.
2. Pengaturan Border Tabel
CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Format yang
dapat dilakukan meliputi jenis garis (dotted, solid, dan lain-lain), warna border, ketebalan garis tepi dan
sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan CSS.

Berikut adalah contoh penerapan style border pada tabel dengan style sebagai berikut {border:1px
solid black;} dan listing kode lengkapnya seperti dibawah ini.
Nama File: border.htm
Dan berikut ini contoh pengaturan property border-collapse: collapse; yang menghasilkan tampilan garis
single pada tabel.
Catatan:
Pada saat memberikan style border  {border:1px solid black;}
Hal ini berarti seluruh border akan efek terkena 1px solid black; baik bagian atas (top), bagian
bawah(bottom), bagian kiri(left) ataupun kanan (right).

3. Pengaturan Lebar Dan Tinggi Tabel
Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height yang dapat disisikan ke
dalam elemen tag <table>, <tr>, <th>, dan <td>.
4. Pengaturan Text-Align Pada Tabel
Teks dalam tabel diatur dengan properti.text-align dan vertical-align . Nilai dari properti text-align
untuk horizontal alignment adalah left, right, atau center. Berikut ini penerapan style text-align dalam
sebuah tabel, dimana teks diatur dengan posisi rata kanan.
Nama File: textAlign.htm

5. Pengaturan Padding Tabel
Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam
dari sel tersebut. Style padding ini dapat diterapkan pada elemen HTML <td> (kolom). Ukuran yang
digunakan dapat berupa cm, atau px (piksel). Berikut ini adalah beberapa contoh penggunaan style
padding pada tabel :
Nama File: padding.htm
Jika menginginkan padding diarea tertentu saja, misalnya padding untuk area kanan maka dapat diterapkan
padding-right, atau sebelah kiri saja dengan padding-left.

6. Pengaturan Warna Pada Table
Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks, background maupun border.
Header tabel akan berwarna green dan teksnya berwarna putih. Penerapan style diatas pada
sebuah tabel akan terlihat pada contoh berikut :
Nama File: warna.htm

TUGAS PRAKTIKUM III
1. Buatlah tabel seperti berikut dengan mengatur warna di elemen tag <th>
Nama File: TugasPrak3a.htm
2. Buatlah tabel seperti berikut
Nama File: TugasPrak3b.htm

MATERI IV
“MENYAJIKAN CSS UNTUK MEMFORMAT TAMPILAN FORM”
1. Cascading style sheet pada Text Field
Textfield mendefinisikan kontrol input text pada form. Berikut ini adalah contoh format CSS pada input
yang membuat efek dari input textfield menjadi seperti sisi formulir cetakan. CSS untuk textfield
menggunakan selector input. Style yang diberikan pada input textfield diantaranya warna, background,
border, jenis serta ukuran font dan masih banyak atribut lainya yang bisa digunakan untuk style textfield.
Nama File: textfield.htm

Bila listing kode dijalankan akan menampilkan tampilan berikut ini :
2. Cascading style sheet pada Button
Button merupakan tombol yang dapat diklik. Pada tombol, baik submit, reset maupun button, style CSS
dapat digunakan untuk menimbulkan efek pipih (flat) pada tombol. Berikut ini adalah contoh penggunaan
CSS pada tombol flat :
Nama File: button.htm

Bila listing kode diatas dijalankan akan menampilkan style button dengan efek flat/pipih seperti berikut:
Efek style juga bisa diberikan saat button dilewati mouse. Untuk memberikan efek berbeda saat button
dilewati mouse dapat menggunakan selector CSS input.button:hover . Untuk listing kode lengkapnya
adalah sebagai berikut :

Nama File: button2.htm

Bila listing tersebut dijalankan akan muncul tampilan form dengan keadaan yang berbeda saat mouse
berada melewatinya dan tidak melewatinya.
Gambar sebelahkan kanan adalah saat mouse melewatinya, button yang semula berwarna orange
berubah menjadi biru.
TUGAS PRAKTIKUM IV
Buatlah form dilengkapi CSS seperti contoh dibawah ini, modifikasi dengan menambahkan elemen radio
button dan select pada form tersebut, serta berikan efek tampilan yang berbeda ketika mouse mengarah
ke elemen textfield atau saat cursor sedang focus pada elemen textfield.

�ݺ�ߣ

Modul 2 - CSS

More Related Content

Modul 2 - CSS