Cara Membuat Kotak Dengan Kode Html Pada Website

Tampilan website yang indah adalah nilai tambah untuk pengembangan SEO. Meskipun yang diutamakan adalah konten, tampilan website juga bisa menarik perhatian pengunjung. Otomatis ini akan meningkatkan traffic ke website itu sendiri.

Pada dasarnya desain website terkait dengan seni. Penyusunan tata letak dan bentuk - bentuk yang unik seperti kotak, lingkaran, segitiga dan sebagainya adalah hal yang biasa terjadi. Semuanya adalah kreatifitas penataan konten.

Kali ini, kita akan membahas tentang pembuatan kotak dengan kode html. Dengan keahlian "encoding", bisa dibentuk berbagai desain sesuai keinginan.

Contoh Tampilan Kotak

Kotak Polos Sederhana

Untuk pembuatan kotak polos dengan warna tertentu, Anda cukup menggunakan kode seperti ini :

<div style=" background-color: skyblue; border: 1px solid red; height:100px; width: 250px; "> </div>

Kotak Dengan Isi Teks

<div style=" background-color: skyblue; border: 1px solid red; height:100px; width: 250px;"> Selamat berkunjung ke website kami, Orvinesia </div>

Selamat berkunjung ke website kami, Orvinesia

Kotak Dengan Isi Gambar

<div style=" background-color: lightgrey; border:1px solid lightgrey;"> <br /> <br /><center> <div style=" background-color:skyblue; border:1px solid red; height:100px; width:200px;"> tambahkan gambar di sini dengan kode img... </div></center> <br /> <br /> </div>

Gambar yang terletak di dalam kotak di atas, kebetulan tidak dengan background transparan. Terkadang, kita memerlukan transparansi background agar tampak lebih bagus. Dalam hal ini, disarankan file gambar format svg.

Kotak di Dalam Kotak

<div style=" background-color:skyblue; border:1px solid red; height:100px; width:200px;"> <div style=" background-color:yellow; border:1px solid red; height:50px; width:100px;"> </div></div>

Kotak kuning di dalam kotak skyblue. Masing - masing dengan posisi tengah.

Modifikasi Border Kotak

Border merupakan garis batas yang mengelilingi kotak, biasanya dimulai dengan ketebalan 1px. Bentuknya ada yang dotted, dashed, solid, double, groove, ridge, inset, outset.

Formula kode pada umumnya:
border: [n]px [tipe garis] [warna]

[n] adalah ketebalan border
[tipe garis] adalah bentuk border
[warna] adalah warna border

Modifikasi Background Kotak

Warna background bisa diganti sesuka Anda, cukup mengganti kode "warnabaru" pada : background-color:warnabaru

Pengaturan Posisi Kotak Dalam Website

Letak kotak yang berbeda yaitu atas, bawah, kiri, kanan, tengah, bisa diarahkan dengan penambahan "float".