Published: 5/28/2018 09:58:00 PM
Ada cara mudah sebagai patokan untuk mengkombinasikan type Border, yaitu dengan memahami cara kerja kode HTML.
Untuk jelasnya kita ambil sebuah contoh Border dan penulisan kode HTML-nya dari artikel Cara Membuat Border di Blogger (bagian 4) :
Contoh Border Kombinasi Dotted - Double - Dashed - Solid
Kode HTML :
Dari contoh penulisan Kode HTML Border di atas, Dotted - Double - Dashed - Solid, kita bisa lihat bahwa urutan Pertama adalah Dotted, urutan Kedua : Double, urutan Ketiga : Dashed dan urutan Keempat : Solid, ini artinya :
<div style="background-color: #eaeaea; border-color: #444; border-style: dotted double dashed solid; border-width: 8px; padding: 10px; text-align: center;">Contoh Border Kombinasi Dotted-Double-Dashed-Solid</div>
Dari contoh penulisan Kode HTML Border di atas, Dotted - Double - Dashed - Solid, kita bisa lihat bahwa urutan Pertama adalah Dotted, urutan Kedua : Double, urutan Ketiga : Dashed dan urutan Keempat : Solid, ini artinya :
- Urutan Pertama menunjukkan garis Border sebelah Atas, yaitu type Dotted.
- Urutan Kedua menunjukkan garis Border sebelah Kanan, yaitu type Double.
- Urutan Ketiga menunjukkan garis Border sebelah Bawah, yaitu type Dashed.
- Urutan Keempat menunjukkan garis Border sebelah Kiri, yaitu typa Solid.
Sekarang kita ubah urutan penulisan Kode HTML-nya menjadi Solid - Dashed - Double - Dotted :
<div style="background-color: #eaeaea; border-color: #444; border-style: solid dashed double dotted; border-width: 8px; padding: 10px; text-align: center;">Contoh Border Kombinasi Dotted-Double-Dashed-Solid</div>
Maka hasilnya :
Contoh Border Kombinasi Solid - Dashed - Double - Dotted
- Urutan Pertama, garis Atas Border, type Solid
- Urutan Kedua, garis Kanan Border, type Dashed
- Urutan Ketiga, garis Bawah Border, type Double
- Urutan Keempat, garis Kiri Border, type Dotted.
Sekarang bagaimana cara kerja Kode HTML untuk Border hasil kombinasi Tiga type?
Berikut contoh penulisan Kode HTML-nya :
<div style="background-color: #eaeaea; border-color: #444; border-style: dotted double dashed; border-width: 8px; padding: 10px; text-align: center;">Contoh Border Kombinasi Dotted-Double-Dashed-Solid</div>
Hasilnya :
Contoh Border Kombinasi Dotted - Double - Solid
- Urutan Pertama, type Dotted, menunjukkan garis Atas Border
- Urutan Kedua, type Double, menunjukkan garis Kiri dan Kanan Border
- Urutan Ketiga, type Solid, menunjukkan garis Bawah Border.
Contoh penulisan Kode HTML-nya :
<div style="background-color: #eaeaea; border-color: #444; border-style: dotted double; border-width: 8px; padding: 10px; text-align: center;">Contoh Border Kombinasi Dotted-Double</div>
Hasilnya :
Contoh Border Kombinasi Dotted - Double
- Urutan Pertama, type Dotted, menunjukkan garis Border sisi Atas dan Bawah
- Urutan Kedua, type Double, menunjukkan garis Border sisi Kiri dan Kanan.
Sedangkan cara kerja Kode HTML untuk Border yang mempunyai Satu type saja, misalkan Dotted, maka ke Empat sisi Border akan terisi type Dotted.
Cara kerja untuk type Border seperti penjelasan di atas, juga berlaku untuk ketebalan garis dan warna Border. Berikut berturut-turut diberikan contoh Border yang mempunyai ketebalan garis berbeda :
Contoh Kode HTML untuk Border yang mempunyai ketebalan garis berbeda pada ke Empat sisinya :
<div style="background-color: #eaeaea; border-color: #444; border-style: dotted; border-width: 2px 5px 8px 12px; padding: 10px; text-align: center;">Contoh Border Dotted dengan tebal garis berbeda di 4 sisinya</div>
Hasilnya :
Contoh Border Dotted dengan tebal garis berbeda di 4 sisinya
Contoh Kode HTML untuk Border yang mempunyai ketebalan garis berbeda pada ke Tiga sisinya :
<div style="background-color: #eaeaea; border-color: #444; border-style: double; border-width: 3px 6px 10px; padding: 10px; text-align: center;">Contoh Border Double dengan tebal garis berbeda di 3 sisinya</div>
Hasilnya :
Contoh Border Double dengan tebal garis berbeda di 3 sisinya
Contoh Kode HTML untuk Border yang mempunyai ketebalan garis berbeda pada ke Dua sisinya :
<div style="background-color: #eaeaea; border-color: #444; border-style: dashed; border-width: 3px 10px; padding: 10px; text-align: center;">Contoh Border Dashed dengan tebal garis berbeda di 2 sisinya</div>
Hasilnya :
Contoh Border Dashed dengan tebal garis berbeda di 2 sisinya
Demikianlah contoh Border dengan ketebalan garis yang berbeda-beda pada sisinya, untuk contoh penerapan warna garis Border yang berbeda di tiap sisinya, akan kita pelajari bersama di artikel berikutnya : Cara Membuat Border di Blogger (bagian 6).
Terkait dengan garis sisi, penulisan Kode HTML Border dapat disederhanakan, seperti contoh berikut ini :
<div style="background-color: #eaeaea; border-left: 5px solid #444; padding: 10px; text-align: left;">Garis Border hanya ada di sisi sebelah Kiri</div>
Maksud contoh Kode HTML di atas adalah Garis Border hanya akan muncul di sebelah Kiri, type Solid dengan ketebalan garis 5px. Hasilnya :
Garis Border hanya ada di sisi sebelah Kiri
Contoh Kode HTML untuk Border yang mempunyai garis di sisi Atas saja :
<div style="background-color: #eaeaea; border-top: 5px dotted #444; padding: 10px; text-align: center;">Garis Border hanya ada di sisi sebelah Atas</div>
Hasilnya :
Garis Border hanya ada di sisi sebelah Atas
Contoh Kode HTML untuk Border yang mempunyai garis di sisi Kanan saja :
<div style="background-color: #eaeaea; border-right: 5px dashed #444; padding: 10px; text-align: right;">Garis Border hanya ada di sisi sebelah Kanan</div>
Hasilnya :
Garis Border hanya ada di sisi sebelah Kanan
Contoh Kode HTML untuk Border yang mempunyai garis di sisi Bawah saja :
<div style="background-color: #eaeaea; border-bottom: 5px double #444; padding: 10px; text-align: center;">Garis Border hanya ada di sisi sebelah Bawah</div>
Hasilnya :
Garis Border hanya ada di sisi sebelah Bawah
Demikianlah beberapa contoh serta penjelasan cara kerja Kode HTML dalam pembuatan Border. Semoga dengan penjelasan ini, kita bisa dengan mudah berkreasi dalam membuat Border di Blog.
0 Comments