1 PRAKTIKUM : Borders NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan borde...
A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS. B. DASAR TEORI
Border jika diartikan adalah pembatas. Pada umumnya seorang designer web akan membuat sebuah pembatas yang digunakan untuk membatasi beberapa element. Penggunaan border mengijinkan Anda untuk memberi pembatas terhadap beberapa element web seperti seperti text, paragraph, maupun gambar yang Anda tampilkan di halaman web. Berikut ini merupakan syntax penggunaan property border: selector { border: width style color; } Property border merupakan property shortcut untuk menetapkan width, style, dan color dari border hanya dengan satu langkah.
2px menyatakan ukuran ketebalan bingkai Solid menyatakan bentuk bingkai yang berupa garis utuh Blue menyatakan warna bingkai
a) Pengaturan ukuran border (border-width) Property border-width memiliki syntax sebagai berikut: selector { border-width : Value } Berikut adalah ukuran yang dapat digunakan pada property border-width: Properties
Value
Border-width
cm px em %
Selain value bentuk diatas dapat juga digunakan value dalam bentuk lain, yaitu: thin, medium dan thin, seperti yang ditunjukkan pada gambar berikut ini.
b) Pengaturan border width pada tiap sisi Untuk melakukan pengaturan tiap sisi border maka dapat menggunakan property bordertop-width, border-right-width, border-left-width, dan border-bottom-width. Berikut adalah penulisan syntaxnya:
c) Pengaturan warna border (border-color) Pada saat melakukan perubahan warna border, property yang digunakan adalah property border-color. Value yang digunakan dapat berupa bentuk RGB, nama warna dalam bahasa inggris maupun kode hexa, contohnya: "#123456", "rgb(123,123,123)", "yellow". Berikut adalah penulisan syntax border-color: selector { border-color: value }
d) Pengaturan warna pada setiap sisi border Properties yang digunakan pada tahap perubahan warna border disesuaikan dengan sisi yang akan diubah, misalnya akan dilakukan pengubahan warna pada sisi bagian kanan, maka properties yang digunakan adalah border-right-color dan begitu juga pada sisi kiri, atas maupun bawah. Berikut adalah penulisan syntax dalam pengaturan warna border: selector { border-top-color: value; border-right-color: value; border-down-color: value; border-left-color: value; } Properties border-top-color border-right-color border-down-color border-left-color
Value border-color border-color border-color border-color
Keterangan Merubah warna border atas Merubah warna border kanan Merubah warna border bawah Merubah warna border kiri
e) Pengaturan bentuk border (border-style) Property border-style digunakan untuk menciptakan border dengan bentuk-bentuk yang berbeda, berikut adalah penulisan syntax border-color: selector { border-style: value value value } Dari penulisan syntax diatas, property border-style digunakan dalam pembuatan border, sedangkan value adalah nilai yang berkaitan dengan bentuk style yang dikehendaki. Berikut adalah bentuk-bentuk style yang dapat digunakan: Properties border-style
Contoh 2 : # border2.css .tombol { border : grove cyan; width : 200px ; text-align : center ; background-color : blue; color : white-; }
# border2. html Border
Aku seperti tombol
f) Pengaturan style border kanan, kiri, atas dan bawah Property border-right-style, border-left-style, border-top-style dan border-bottom-style digunakan untuk pengaturan style pada sisi border kanan, kiri, atas dan bawah. Contoh: h1{ border-right-style: dotted; border-bottom-style: solid; border-left-style: outset; border-top-style: ridge; }
C. PRAKTIKUM Ketentuan Praktikum: 1. Ketik dokumen halaman web pada Notepad 2. Capture Screen hasil tampilan pada browser. 3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan di akhir praktikum.
4. Pengaturan warna pada setiap sisi border Pengaturan Warna Border Tiap Sisi <style type="text/css"> p.warna{ color:white; background-color:grey; border-style:dashed; border-width:10px; border-top-color:red; border-right-color:black; border-bottom-color:yellow; border-left-color:blue; width:300px; padding:20px }
Contoh Text yang dikelilingi border style double dengan pengaturan warna tiap sisi bordernya
5. Pengaturan bentuk border (border-style) Border Style
Border none
Border Solid
Border dashed
Border dotted
Border double
Border groove
Border inset
Border outset
Border ridge
6. Pengaturan style border kanan, kiri, atas dan bawah Pengaturan Border <style type="text/css"> p.ubah{ border-right-style:dotted; border-bottom-style:solid; border-left-style:dashed; border-top-style:double; border-color:green; border-width:7px; font-size:16px; width:500px; height:100px; text-align:center; }
Menggunakan pengaturan style border pada tiap sisinya
Bagaimana cara membuat bingkai seperti berikut ini ? Klik Saya ! Perhatikan bahwa garis pada tepi kiri dan atas berupa abu-abu dan tipis, sedangkan garis pada tepi bawah dan kanan berwarna hitam dan tebal.
