Artikel ini merupakan artikel lanjutan dari artikel kemarin yang membahas masalah yang sama yaitu membuat kotak dengan HTML. Jadi saya sarankan membaca artikel sebelumnya yang berjudul membuat kotak dan garis dengan HTML.
[Baca juga : Membuat kotak dan garis dengan HTML lengkap]
Jika Anda membaca artikel sebelumnya, Anda akan mengetahui kode HTML untuk membuat kotak yang ukurannya bisa secara otomatis atau diubah ke ukuran yang diinginkan. Selain itu, Anda bisa merubah model garis nya menjadi garis lurus atau putus-putus.
Sedangkan di dalam artikel ini, Anda akan menemukan :
Sedangkan di dalam artikel ini, Anda akan menemukan :
- Cara membuat kotak dengan garis yang berwarna sesuai keinginan anda
- Cara membuat kotak berwarna sesuai keinginan Anda
- Cara membuat kotak terlengkap
Membuat Garis Kotak Berwarna
Anda dapat membuat kotak yang garis nya berwarna. Contohnya seperti kotak bergaris merah di bawah ini.
Tulis teks di sini
Contoh kotak bergaris biru di bawah ini
Tulis teks di sini
Contoh kotak bergaris hijau di bawah ini
Jika Anda ingin warna yang lain padahal Anda tidak tahu kodenya maka mudah saja. Silahkan cari di situs pencarian atau kunjungi situs yang memuat kode html warna. Salah satunya Anda bisa mengunjungi htmlcolorcode.com
Membuat Kotak Berwarna
Di sini, Anda dapat membuat kotak yang berwarna sesuai keinginan Anda. Beda dengan sebelumnya yang hanya merubah warna garis nya, kode berikut Anda dapat merubah warna dalam kotaknya. Misalnya contoh kotak berwarna hijau di bawah ini
Kode Membuat Kotak Lengkap
Dalam sub pembahasan ini, saya menyarankan untuk tidak memakainya. Loh kenapa? Saya khawatir Anda merasa kebingungan. Saya sendiri jarang memakai kode membuat kotak lengkap kecuali di saat-saat tertentu saja.
Saya merekomendasikan kode-kode sederhana seperti di atas saja untuk memudahkan dan mempercepat proses. Kalau kode kotak lengkap membutuhkan perhatian dan ketelitian ekstra agar kode yang diketik dapat bekerja dengan baik.
Apa fungsi dari kode kotak lengkap? Banyak sekali fungsinya. Namanya juga kode lengkap maka model yang Anda inginkan bisa diwujudkan. Adapun yang bisa diubah sesuai keinginan Anda adalah :
align="center" dibuat untuk mengatur posisi teks di dalam kotak. Cukup ubah kata 'center' menjadi left (posisi kiri) atau right (posisi kanan).
background-color berfungsi untuk merubah warna dalam kotaknya. Ubah kata selanjutnya yaitu RED ke warna yang diinginkan misalnya BLUE (warna biru) dan GREEN (warna hijau).
padding digunakan untuk mengatur jarak antara teks dengan kotaknya. Cukup ubah angkanya.
margin digunakan untuk mengatur jarak antara kotak dengan ruang luarnya atau ruang yang disediakan. Cukup ubah angkanya
border merupakan kode garisnya. Di dalam border terdapat pilihan 2px, solid, dan green. 2px adalah ketebalan garis, solid digunakan untuk mengatur gaya atau model garis, dan green adalah warna garisnya.
Demikian kode HTML membuat kotak di postingan blog secara lengkap. Jika Anda mengalami kesulitan, silahkan tulis di kolom komentar. Terima kasih atas kunjungannya.
Tulis teks di sini
Menarik bukan?! Lalu bagaimana cara membuatnya? Mudah saja. Silahkan salin kode HTML di bawah ini dan selanjutnya ubah tulisan #FF0000 (kode warna merah) ke kode warna yang diinginkan misalnya #0000FF (kode warna biru) atau #00FF00 (kode warna hijau).Jika Anda ingin warna yang lain padahal Anda tidak tahu kodenya maka mudah saja. Silahkan cari di situs pencarian atau kunjungi situs yang memuat kode html warna. Salah satunya Anda bisa mengunjungi htmlcolorcode.com
Membuat Kotak Berwarna
Di sini, Anda dapat membuat kotak yang berwarna sesuai keinginan Anda. Beda dengan sebelumnya yang hanya merubah warna garis nya, kode berikut Anda dapat merubah warna dalam kotaknya. Misalnya contoh kotak berwarna hijau di bawah ini
Tulis teks di sini
Contoh kotak berwarna biru di bawah ini
Tulis teks di sini
Lalu bagaimana caranya? Silahkan salin kode di bawah ini dan ganti kata green (kode warna merah) sesuai warna yang diinginkan misalnya blue (warna biru), red (warna merah), dan lain sebagainya. Jadi tinggal ubah nama warna ke dalam bahasa inggris.Kode Membuat Kotak Lengkap
Dalam sub pembahasan ini, saya menyarankan untuk tidak memakainya. Loh kenapa? Saya khawatir Anda merasa kebingungan. Saya sendiri jarang memakai kode membuat kotak lengkap kecuali di saat-saat tertentu saja.
Saya merekomendasikan kode-kode sederhana seperti di atas saja untuk memudahkan dan mempercepat proses. Kalau kode kotak lengkap membutuhkan perhatian dan ketelitian ekstra agar kode yang diketik dapat bekerja dengan baik.
Apa fungsi dari kode kotak lengkap? Banyak sekali fungsinya. Namanya juga kode lengkap maka model yang Anda inginkan bisa diwujudkan. Adapun yang bisa diubah sesuai keinginan Anda adalah :
- Posisi teks di dalam kotak bisa diubah ke kiri, tengah, dan kanan
- Ubah warna kotak
- Ubah warna semua garis nya misalnya garis kanan merah, garis kiri kuning, garis atas hijau, dan garis bawah abu-abu.
- Ubah model garis nya bisa garis lurus atau garis putus-putus
- Tebal semua garis nya
- Jarak antara teks dengan kotak, dan
- Jarak kotak dengan ruang yang disediakan
align="center" dibuat untuk mengatur posisi teks di dalam kotak. Cukup ubah kata 'center' menjadi left (posisi kiri) atau right (posisi kanan).
background-color berfungsi untuk merubah warna dalam kotaknya. Ubah kata selanjutnya yaitu RED ke warna yang diinginkan misalnya BLUE (warna biru) dan GREEN (warna hijau).
padding digunakan untuk mengatur jarak antara teks dengan kotaknya. Cukup ubah angkanya.
margin digunakan untuk mengatur jarak antara kotak dengan ruang luarnya atau ruang yang disediakan. Cukup ubah angkanya
border merupakan kode garisnya. Di dalam border terdapat pilihan 2px, solid, dan green. 2px adalah ketebalan garis, solid digunakan untuk mengatur gaya atau model garis, dan green adalah warna garisnya.
Demikian kode HTML membuat kotak di postingan blog secara lengkap. Jika Anda mengalami kesulitan, silahkan tulis di kolom komentar. Terima kasih atas kunjungannya.
Tidak ada komentar:
Posting Komentar