PRAKTIKUM : Borders NAMA : KELAS : TANGGAL PRAKTIKUM : 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.
border-top border-left border-right Border-bottom Contoh : border : 2px solid blue Keterangan : 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:
selector { border-top-width: value; border-right- width: value; border-down- width: value; border-left- width: value; 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 Value Keterangan border-top-color border-color Merubah warna border atas border-right-color border-color Merubah warna border kanan border-down-color border-color Merubah warna border bawah border-left-color border-color 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 Value none hidden dotted dashed solid double groove ridge inset outset Contoh 1 : h1,h2,h3 { border-style : groove;
Contoh 2 : # border2.css.tombol { border : grove cyan; width : 200px ; text-align : center ; background-color : blue; color : white-; # border2. html <title>border</title> <link rel = stylesheet type = text/css href = border2.css /> <p class = tombol >Aku seperti tombol </p> 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. 1. Pengaturan ukuran border (border-width) <title>border Width</title> p{ text-align:center; font-size:14pt; fontstyle:italic; backgroundcolor:orange; p.one{ border-width:6px; border-style:solid; p.two{ border-width:10px; border-style:solid; p.three{ border-width:thin; border-style:dashed; p.four{ border-width:medium; border-style:dashed; p.five{ border-width:thick; border-style:dashed; <p class="one">border width 6px</p> <p class="two">border width 10px</p> <p class="three">border width thin</p> <p class="four">border width medium</p> <p class="five">border width thick</p>
2. Pengaturan border width pada tiap sisi <title>pengaturan Border Width</title> p.ubah{ border-top-width:6px; border-right-width:8px; border-bottom-width:20px; border-left-width:15px; border-color:#448866; border-style:dashed; font-size:18px; font-style:italic; width:500px; height:75px; text-align:center; <p class="ubah">menggunakan pengaturan border width pada tiap sisinya</p>
3. Pengaturan warna border (border-color) <title>border Color</title> p{ text-align:center; font-size:14pt; font-style:italic; border-width:6px; p.blue{ border-color:#0000ff; border-style:solid; p.red{ border-color:red; border-style:dashed; p.purple{ border-color:purple; border-style:double; <p class="blue">border color blue</p> <p class="red">border color red</p> <p class="purple">border color purple</p>
4. Pengaturan warna pada setiap sisi border <title>pengaturan Warna Border Tiap Sisi</title> 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 <p class="warna">contoh Text yang dikelilingi border style double dengan pengaturan warna tiap sisi bordernya</p>
5. Pengaturan bentuk border (border-style) <title> Border Style</title> <div style="border:5px none #08088A; width:300px; padding:20px"> Border none <div style="border:5px solid #08088A; width:300px; padding:20px"> Border Solid <div style="border:5px dashed #08088A; width:300px; padding:20px"> Border dashed <div style="border:5px dotted #08088A; width:300px; padding:20px"> Border dotted <div style="border:5px double #08088A; width:300px; padding:20px"> Border double <div style="border:5px groove #08088A; width:300px; padding:20px"> Border groove <div style="border:5px inset #08088A; width:300px; padding:20px"> Border inset <div style="border:5px outset #08088A; width:300px; padding:20px"> Border outset <div style="border:5px ridge #08088A; width:300px; padding:20px"> Border ridge </div>
6. Pengaturan style border kanan, kiri, atas dan bawah <title>pengaturan Border</title> 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; <p class="ubah">menggunakan pengaturan style border pada tiap sisinya</p> 7. Penggunaan Property Border <title>property Border</title> p.ubah{ border:7px dashed purple; font-size:16px; width:500px; height:100px; text-align:center; <p class="ubah">menggunakan Property Border</p>
D. LATIHAN SOAL 1. Jelaskan fungsi tag <div>! 2. Jelaskan maksud syntax css berikut ini! p{ border:7px dashed purple; 3. Jelaskan maksud syntax css berikut ini, kemudian capture tampilannya pada browser! <title>property Border Style</title> #test2{ border-style:dashed dotted dashed dotted; border-color:red; border-width:20px 8px 10px 8px; width:400px; height:75px; background-color:grey; color:white; text-align:center; <p id="test2">test text test text test text test text</p> 4. 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. E. KESIMPULAN