Absensi Siswa Rekap Otomatis Semester Ganjil Xii-Rpl K-13 Ok

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
cm
px
Border-width
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:
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 Value
border-style 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
<html>
<head>
<title>Border</title>
<link rel = “stylesheet” type = “text/css” href = “border2.css” />
</head>
<body>
<p class = “tombol”>Aku seperti tombol </p>
</body>
</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;
}
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;
font-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;
}
p.five{
border-width:thick;
}
</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>
</html>
2. Pengaturan border width pada tiap sisi
<html>
<head>
<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;
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>
</html>
3. Pengaturan warna border (border-color)
<html>
<head>
<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;
}
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>
</html>
4. Pengaturan warna pada setiap sisi border
<html>
<head><title>Pengaturan Warna Border Tiap Sisi</title>
p.warna{
color:white;
background-color:grey;
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>
</body>
</html>
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
</div>
</body>
</html>
6. Pengaturan style border kanan, kiri, atas dan bawah
<html>
<head>
<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;
}
</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>
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>
</html>
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>
#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.
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

Absensi Siswa Rekap Otomatis Semester Ganjil Xii-Rpl K-13 Ok

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Absensi Siswa Rekap Otomatis Semester Ganjil Xii-Rpl K-13 Ok

Cargado por

Copyright:

Formatos disponibles

PRAKTIKUM : Borders

Contoh : border : 2px solid blue

a) Pengaturan ukuran border (border-width)

selector { border-width : Value }

Berikut adalah ukuran yang dapat digunakan pada property border-width:

b) Pengaturan border width pada tiap sisi

c) Pengaturan warna border (border-color)

selector { border-color: value }

Properties Value Keterangan

e) Pengaturan bentuk border (border-style)

selector { border-style: value value value }

Contoh 1 : h1,h2,h3 { border-style : groove; }

f) Pengaturan style border kanan, kiri, atas dan bawah

1. Pengaturan ukuran border (border-width)

7. Penggunaan Property Border

Perhatikan bahwa garis pada tepi kiri dan atas berupa

También podría gustarte