Dalam membuat kotak atau border baik untuk membuat kotak pada postingan atau artikel maupun dalam pembuatan atau edit template kita bisa menggunakan beberapa Tag dan Atribut HTML.
Agar dalam pembuatan kotak atau border tersebut, kelihatan rapi, indah dan sesuai keinginan, tidak ada salahnya kita perlu mengetahui dasar-dasar kode HTML dalam pembuatan kotak atau border. Tag HTML yang dapat digunakan diantaranya Tag <div></div> atau Tag <span></span> atau Tag lainnya.
Sebagai contoh kode HTML membuat kotak atau border dalam postingan :
Di sini saya akan mencatat Cara Membuat atau Memodifikasi Kotak atau Border dengan Kode HTML menggunakan Tag <div></div> adapun Attribute yang digunakan adalah attribute style=""
Dalam Attribute style="" banyak nilai (value) attribute yang dapat digunakan, namun di sini kita akan mencatat nilai (value) attribute yang berhubungan dengan membuat kotak atau border.
- Tag yang digunakan adalah Tag <div></div>
- Tambahkan Atribut style=" " dalam Tag HTML Pembuka diantara Tag <div>
<div style="">
Atribut berfungsi untuk mendeskripsikan perintah Tag HTML yang akan ditampilkan pada browser. - Tambahkan nilai (value) atribute diantara tanpa petik dua (" ") atau (' ')
Nilai (value) atribute untuk membuat border diantaranya :
| Nilai Attribute | Value Attribute | Keterangan | ||
|---|---|---|---|---|
| mode | Ukuran (pixel) | warna (kode warna hexadesimal (#) atau nama warna) |
||
| border: | dashed | 1px dst | #0000FF atau blue | membuat border |
| border-top: | dotted | 1px dst | #0000FF atau blue | membuat border sebelah atas |
| border-bottom: | double | 3px keatas | #0000FF atau blue | membuat border sebelah bawah |
| border-left: | groove | 1px dst | #0000FF atau blue | membuat border sebelah kiri |
| border-right: | hidden | 1px dst | #0000FF atau blue | membuat border sebelah kanan |
| inherit | 1px dst | #0000FF atau blue | ||
| inset | 3px keatas | #0000FF atau blue | ||
| medium | 1px dst | #0000FF atau blue | ||
| none | 1px dst | #0000FF atau blue | ||
| outset | 3px keatas | #0000FF atau blue | ||
| ridge | 3px keatas | #0000FF atau blue | ||
| solid | 1px dst | #0000FF atau blue | ||
| thick | 1px dst | #0000FF atau blue | ||
| thin | 1px dst | #0000FF atau blue | ||
| border-radius: | px (pixel) | mengatur kelengkungan border bagian kiri kanan dan bawah atas | ||
| 5px 0px 0px 0px | mengatur kelengkungan border bagian kiri atas | |||
| 0px 5px 0px 0px | mengatur kelengkungan border bagian kanan atas | |||
| 0px 0px 5px 0px | mengatur kelengkungan border bagian kanan bawah | |||
| 0px 0px 0px 5px | mengatur kelengkungan border bagian kiri bawah | |||
| background-color: | #0000FF atau blue | warna background | ||
| background-image: | url('') | background gambar (masukan alamat gambar diantara tanda '' | ||
| font-family: | jenis font | menentukan jenis font / huruf | ||
| color | #0000FF atau blue | menentukan warna pada teks | ||
| font-size: | px (pixel) | menentukan ukuran font / huruf | ||
| height: | menentukan lebar | |||
| width: | px (pixel) | menentukan panjang | ||
| auto | ||||
| persentase | ||||
| padding | inherit | memberi jarak (lebar) antara teks atas dan bawah | ||
| px (pixel) | ||||
| persentase | ||||
Catatan :
- Apabila nilai (value) Atribut digabung maka dipisahkan dengan tanda ; (titik koma)
- Kode atau nilai dari atribut setelah tanda : (titik dua)
- Kode atau nilai atribut yang lebih dari 1 maka dipisahkan dengan spasi
- Atribut bisa digabungkan dengan atribut lainnya yang ditandai atau dipisahkan dengan tanda ; (titik koma)
- Atribut dan Nilai attribut diapit oleh dua tanda petik pembuka dan penutup ("") atau ('')
Untuk mengetahui cara penulisan kode HTML bisa dibaca pada catatan Cara Penulisan Dasar Kode HTML
border: berfungsi untuk membuat border atau garis kotak
Kode Dasar Penulisan border / KotakContoh penulisan kode HTML atribut border:
Hasilnya :
Catatan :
Untuk Warna Garis bisa saja dihilangkanModel Garis Pada Border atau Kotak yang sering digunakan
Catatan :
Untuk Model Garis double; groove; inset; outset dan ridge ukuran bordernya mulai dari 3px ke atasUkuran garis pada border atau garis kotak
Ukuran garis pada border menggunakan ukuran pixel dan anda bisa merubah ukuran border tersebut sesuai keinginan
Contoh :
Warna pada border atau garis kotak
Warna pada garis border bisa menggunakan "Nama Warna (Bahasa Inggris), kode Hexadesimal atau kode rgb.
Contoh :
Hasilnya :
Contoh Warna Menggunakan Hexadesimal :
Hasilnya :
Apabila menggunakan kode Hexadesimal maka kode tersebut di awali dengan tanda # (pagar)
background-color:
berfungsi untuk memberi warna background pada kotak atau border
Contoh penulisan kode HTML atribut background-color:
Hasilnya :
Catatan :
Setiap atribut di pisahkan dengan tanda ; (titik koma)Untuk menuliskan kode warna bisa menggunakan kode warna Hexadesimal seperti #FFFF00 atau juga bisa menuliskan nama warna dalam bahasa Inggris, contoh : red
Yang perlu diperhatikan dalam menuliskan kode warna Hexadesimal maka diawali dengan tanda # (pagar) sedangkan menuliskan nama warna, jangan menggunakan tanda # (pagar) atau dihilangkan, tulis saja nama warna-nya
Untuk Kode Warna bisa dibaca pada catatan : Daftar Kode Warna HTML - CSS Lengkap untuk Template dan Postingan padding:
berfungsi untuk memberi jarak (lebar) antara teks dengan batas kotak bagian atas dan bagian bawah
Ukuran jarak (lebar) menggunakan satuan pixel (px) dan bisa dirubah sesuai keinginan.
Contoh penulisan kode HTML atribut padding:
Hasilnya :
text-align:
berfungsi untuk mengatur posisi teks dalam kotak / border
Nilai Value text-align; diantaranya :
- Left; posisi teks rata kiri
- center; posisi teks di tengah
- right; posisi teks rata kanan
- justify; posisi teks rata kanan dan kiri
Contoh penulisan kode HTML atribut text-align:
Hasilnya :
border-radius:
berfungsi untuk mengatur kelengkungan border bagian kiri dan kanan
Ukuran border-radius: menggunakan satuan pixel (px)
Penulisan border-radius: ada 2 cara, yaitu :
- Mengatur lengkungan semua sudut kotak (lengkungan kiri kanan dan atas bawah), menggunakan kode border-radius: 15px
Ukuran pixel bisa disesuaikan. - Mengatur salah satu sudut lengkungan kotak, menggunakan kode border-radius: 0px 0px 0px 0px;
- menggunakan ukuran satuan px (pixel), maka panjang kotak akan mengikuti lebar satuan tersebut
- menggunakan auto, maka panjang kotak akan secara otomatis menyesuaikan panjang tampilan blog atau bisa saja di hilangkan atribut width: tersebut
- menggunakan % (persentase)
- menggunakan ukuran satuan px (pixel), maka lebar kotak akan mengikuti lebar satuan tersebut
- menggunakan auto, maka lebar kotak akan secara otomatis menyesuaikan lebar tampilan blog atau bisa saja di hilangkan atribut height: tersebut
- menggunakan % (persentase)
- overflow: berfungsi untuk membuat scroll pada border sebelah kanan dan bawah
- overflow-y: berfungsi untuk membuat scroll pada border sebelah kanan
- overflow-x: berfungsi untuk membuat scroll pada border di bawah
- auto untuk menampilkan scroll
- scroll untuk menampilkan scroll
- hidden untuk menyembunyikan scroll
- membuat scroll pada border / kotak sebelah kanan
kode overflow: auto - Membuat Scroll bagian kanan dan bawah border
kode overflow: auto
Namun untuk menampilkan scroll bagian bawah harus menambahkan salah satu Tag lagi dengan Atribut Style dan Nilai atribut Width. Sebagai contoh di sini menggunakan Tag <p></p>
kode overflow: auto
<p style=" width: 200%;"> Persentase harus di atas 100%
Contoh :
<div style="border: solid 2px #FF0000;
background-color: #DAA520; padding: 10px;
text-align: left; border-radius: 15px; border-Left: 10px solid #0000FF; border-right: 15px solid #DC143C; border-top: 5px solid #8A2BE2; border-bottom: 5px solid green;
color: #7FFF00;
font-family: Bookman Old Style;
font-size: 18px; width: auto; height:300px;
overflow: auto;"> <p style=" width: 200%;">
Contoh hasil Menampilkan Scroll kanan dan bawah
</p></div> - Membuat Scroll bagian bawah border
Pointnya sama dengan point No. 2 di atas, dan karena kita hanya ingin menampilkan scroll di bagian bawah saja maka scroll di bagian kanan di sembunyikan atau di hidden
Kode overflow-x: scroll; overflow-y: hidden
Contoh :
Selain contoh di atas, kita bisa saja menambahkan Tag <pre></pre> untuk menampilkan kode apa adanya
Contoh :
<div style="border: solid 2px #FF0000; background-color: #DAA520; padding: 10px; text-align: left; border-radius: 15px; border-Left: 10px solid #0000FF; border-right: 15px solid #DC143C; border-top: 5px solid #8A2BE2; border-bottom: 5px solid green; color: #7FFF00; font-family: Bookman Old Style; font-size: 18px; width: auto; height: 200px; overflow: auto;"> <pre> Contoh hasil Menampilkan Scroll bagian bawah saja dengan menambahkan Tag <pre></pre> </pre></div>
Contoh
Hasilnya :
Nilai atribut ke-1 0px untuk memberi lengkung pada pojok kiri atas
Nilai atribut ke-2 0px untuk memberi lengkung pada pojok kanan atas
Nilai atribut ke-3 0px untuk memberi lengkung pada pojok kanan bawah
Nilai atribut ke-4 0px; untuk memberi lengkung pada pojok kiri bawah.
Untuk memberi lengkungan pada salah satu sudut kotak, tinggal memberikan nilai atributnya saja.
Contoh :
border-Left:
berfungsi untuk memberi border tambahan / khusus di sebelah kiri pada kotak
Contoh penulisan kode border-Left: 10px solid #0000FF
border-right:
berfungsi untuk memberi border tambahan / khusus di sebelah kanan pada kotak
Contoh penulisan kode border-right: 15px solid #DC143C
border-top:
berfungsi untuk memberi border tambahan di sebelah Atas (Top) pada kotak
Contoh penulisan kode border-top: 5px solid #8A2BE2
border-bottom:
berfungsi untuk memberi border tambahan di sebelah Bawah (Bottom) pada kotak
Contoh penulisan kode border-bottom: 5px solid green
Color:
berfungsi untuk memberi warna pada teks
Contoh penulisan kode Color: #7FFF00
font-family:
berfungsi untuk jenis huruf atau font dalam border/kotak
Contoh penulisan kode font-family: Bookman Old Style
font-size:
berfungsi untuk menentukan ukuran teks dengan menggunakan satuan px (pixel)
Contoh penulisan kode font-size: 18px
width:
berfungsi untuk ukuran panjang border / kotak
Nilai Value dari Atribut width: yaitu :
Contoh penulisan kode width: 400px
Jadi antara menggunakan atribut width dengan nilai value atribut width dengan tanpa menggunakan atribut width maka hasilnya sama
height:
berfungsi untuk membuat scroll pada border
Nilai Value dari Atribut height: yaitu :
Contoh penulisan kode height: 200px
overflow:
berfungsi untuk membuat scroll pada border
Pada atribut overflow: bisa menggunakan :
Nilai Value dari Atribut overflow: yaitu :
Contoh :
background-color: #DAA520; padding: 10px;
text-align: left;
border-radius: 15px;
border-Left: 10px solid #0000FF;
border-right: 15px solid #DC143C;
border-top: 5px solid #8A2BE2;
border-bottom: 5px solid green;
color: #7FFF00;
font-family: Bookman Old Style;
font-size: 18px; width: auto; height:300px;
overflow: auto">
Contoh hasil overflow: auto
</div>
Bisa juga menggunakan Kode overflow-x: scroll; overflow-y: scroll
Contoh :
<div style="border: solid 2px #FF0000;
background-color: #DAA520; padding: 10px;
text-align: left;
border-radius: 15px;
border-Left: 10px solid #0000FF;
border-right: 15px solid #DC143C;
border-top: 5px solid #8A2BE2;
border-bottom: 5px solid green;
color: #7FFF00;
font-family: Bookman Old Style;
font-size: 18px; width: auto; height:300px;
overflow-x: scroll; overflow-y: scroll;"> <p style=" width: 200%;">
Contoh hasil Menampilkan Scroll kanan dan bawah
</p></div>
Itulah beberapa kode atribut dan nilai atribut yang saya ketahui, dan mungkin masih banyak atribut lain yang dapat digunakan dalam membuat sebuah kotak.
Untuk kode HTML dalam membuat kotak yang sudah jadi sebagai referensi bisa dibaca pada catatan Kode HTML Membuat Kotak Di Postingan Blog
Selamat berkreasi