Cara Membuat Kotak di HTML dalam Satu Menit Saja
Hai apa kabar semuanya? Sebagai seorang blogger, tentu kita harus tahu seluk-beluk website, bagaimana konten diorganisasi sehingga pengalaman pembaca (user experience) itu ketagihan datang berkunjung ke website kita. Salah satunya adalah mengenal teknis koding HTML.
Apa Sih HTML itu? Dan Apa Kegunaannya?
Pada tulisan kali ini kita akan membahas bagaimana sih caranya membuat kotak pada HTML. HTML atau Hyper Text Markup Language adalah sejenis bahasa pemrograman ataupun kode yang umumnya digunakan di dunia website dalam menyusun konten. Ada banyak jenis konten di internet, yang antara lain adalah teks, gambar, video, hyperlink (links) dan shapes yang akan kita bahas disini.
Misalnya, jika kita ingin membuat kotak pencarian di halaman website ecommerce yang kita punya atau di blog pribadi kita, agar pengunjung bisa dengan mudah mencari produk yang mereka inginkan, kita bisa membuat kotak pencarian melalui koding HTML. Sementara itu, membuat kotak bisa divariasikan dengan berbagai cara, misalnya membuat kotak bergaris-garis atau putus-putus, membuat kotak berisi centang (checklist), membuat kotak yang berisi teks, dan membuat kotak disertai garis lurus dan lain sebagainya masih banyak lagi.
Cara Membuat Kotak HTML
Mengatur konten di dalam HTML tidaklah sulit. Kita tidak perlu mengunduh software pemrograman, kemudian menginstallnya ke PC atau laptop kita. HTML dapat kita edit di dalam website kita sesaat setelah kita masuk ke halaman dashboard.
Membuat kotak sederhana di HTML misalnya, Anda hanya membutuhkan script CSS. Di dalam CSS Anda hanya akan menggunakan tiga properti yaitu width, height dan background. Width digunakan untuk mengatur lebar kotak, height untuk mengatur ketinggian dan background untuk mengatur warna di latar belakang kotak tersebut. Nah, saya rasa teman-teman sudah tidak sabar. Jadi, tanpa perlu berpanjang lebar, mari kita mulai praktiknya.
- Login lebih dulu ke halaman website Anda
- Pilih Entri baru, kemudian ketik materi apa yang ingin Anda posting.
- Masukkan kode HTML kotak script di bawah ini ke bagian HTML (bukan di Compose)
- Kembali ke Compose, kemudian masukkan kode atau kalimat di dalam kotak sesuai dengan apa yang Anda inginkan
Berikut ini adalah diantara opsi script box yang Anda gunakan:
- Kotak double-bolder >> vertical/tinggi, menyesuaikan:
| <div style=”background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;”> TULISAN DISINI<br /></div> </div> |
- Kotak border-dotted 2pk dan warna bisa disesuaikan
| <div style=”background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;”>
TULISAN DISINI</div> |
- Kotak dengan border radius 20px, -border left-right 10px, background
| <div style=”-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;”>
TULISAN DISINI</div> |
- Scroll box vertical + horizontal polos, warna dan ukuran bisa disesuaikan
| <div style=”border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;”>
<div style=”width: 2500%;”> TULISAN DISINI</div> </div> |
Bagaimana? Apakah sudah dicoba dan dipraktikkan? Bagaimana hasilnya? Teman-teman bisa mengganti warna, ukuran teks dengan mengedit kode script pada tulisn di atas.
Jadi itulah beberapa diantara cara-cara membuat kotak di bahasa pemrograman HTML yang bisa Anda terapkan di website Anda. Selain cara-cara di atas, sebenarnya masih ada banyak cara lain. Koding adalah persoalan menyelesaikan masalah, dan caranya bukan hanya satu saja. Kita juga bisa berkreasi dengan mengedit tampilannya, warna, script kodingnya. Siapa tahu teman-teman bisa menciptakan script cara baru membuat kotak di HTML.
Untuk informasi lebih lanjut bisa mengunjungi link website Lewatin Aja.ย Ini menyajikan berbagai macam informasi yang menarik yang berkaitan dengan dunia teknologi yang sangat sayang untuk dilewatkan.