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
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
border-
top-width, border-right-width, border-left-width,
dan
border-bottom-width.
Berikut
adalah penulisan syntaxnya:
border-top
border-right border-left
s
elector {
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:
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:
s
elector {
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
Value
border-style
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Contoh 2 :
# border2.css
# border2. html
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;
.tombol {border : grove cyan; width : 200px ; text-align : center ; background-color : blue; color : white-;
}
<html> <head>
<title>Border</title>
<link rel = “stylesheet” type = “text/css” href = “border2.css” /> </head>
<body>
<p class = “tombol”>Aku seperti tombol </p> </body>
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)
<html> <head> <title>Border Width</title> <style type="text/css"> p{ text-align:center; size:14pt; font-style:italic; background-color: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; } </style> </head> <body><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> </body>
2. Pengaturan border width pada tiap sisi
<html><head>
<title>Pengaturan Border Width</title> <style type="text/css">
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; }
</style> </head> <body>
<p class="ubah">Menggunakan pengaturan border width pada tiap sisinya</p> </body>
3. Pengaturan warna border (border-color)
<html><head>
<title>Border Color</title> <style type="text/css"> 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; }
</style> </head>
<body>
<p class="blue">Border color blue</p> <p class="red">Border color red</p> <p class="purple">Border color purple</p> </body>
4. Pengaturan warna pada setiap sisi border
<html><head><title>Pengaturan Warna Border Tiap Sisi</title> <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 }
</style> </head> <body>
<p class="warna">Contoh Text yang dikelilingi border style double dengan pengaturan warna tiap sisi bordernya</p>
5. Pengaturan bentuk border (border-style)
<html><head>
<title> Border Style</title> </head>
<body>
<div style="border:5px none #08088A; width:300px; padding:20px"> Border none
</div><br/>
<div style="border:5px solid #08088A; width:300px; padding:20px"> Border Solid
</div><br/>
<div style="border:5px dashed #08088A; width:300px; padding:20px"> Border dashed
</div><br/>
<div style="border:5px dotted #08088A; width:300px; padding:20px"> Border dotted
</div><br/>
<div style="border:5px double #08088A; width:300px; padding:20px"> Border double
</div><br/>
<div style="border:5px groove #08088A; width:300px; padding:20px"> Border groove
</div><br/>
<div style="border:5px inset #08088A; width:300px; padding:20px"> Border inset
</div><br/>
<div style="border:5px outset #08088A; width:300px; padding:20px"> Border outset
</div><br/>
<div style="border:5px ridge #08088A; width:300px; padding:20px"> Border ridge
6. Pengaturan style border kanan, kiri, atas dan bawah
<html><head>
<title>Pengaturan Border</title> <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; }
</style> </head> <body>
<p class="ubah">Menggunakan pengaturan style border pada tiap sisinya</p> </body>
</html>
7. Penggunaan Property Border
<html><head>
<title>Property Border</title> <style type="text/css">
p.ubah{
border:7px dashed purple; font-size:16px;
width:500px; height:100px; text-align:center; }
</style> </head> <body>
<p class="ubah">Menggunakan Property Border</p> </body>
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!
<html><head>
<title>Property Border Style</title> <style type="text/css">
#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; }
</style> </head> <body>
<p id="test2">test text test text test text test text</p> </body>
</html>
4.
E. KESIMPULAN
Bagaimana cara membuat bingkai seperti berikut ini ?
Klik Saya !
