Panduan Cara Membuat Kotak di HTML Menggunakan CSS
Irhan Hisyam Dwi Nugroho
•
22 September 2023
•
11855
Catatan Redaksi:
Artikel ini pertama kali diterbitkan pada September 2023 dan diperbarui pada 7 Mei 2025 untuk memastikan informasi tetap akurat dan relevan.
Warga Bimbingan, MinDi di sini untuk memandu kamu tentang Cara Membuat Kotak di HTML dengan menggunakan CSS. Di artikel ini, kamu akan belajar langkah demi langkah bagaimana membuat kotak yang menarik dan fungsional.
Membuat kotak di HTML adalah dasar penting dalam desain web, memungkinkan kamu mengelola layout dengan lebih mudah. Dengan sedikit CSS, kamu bisa mengubah kotak sederhana menjadi elemen yang sangat berguna di halaman web.
Yuk, simak terus panduan ini dan mulai praktekkan Cara Membuat Kotak di HTML menggunakan CSS untuk desain yang lebih menarik!
Baca juga : Cara Membuat Pop Up di HTML: Panduan Mudah untuk Pemula
Apa Itu Kotak di HTML?
Kotak di HTML merujuk pada elemen yang dibatasi dengan ukuran tertentu yang dapat digunakan untuk mengelompokkan konten atau elemen lainnya.
Biasanya, kotak ini dibuat menggunakan tag seperti <div> atau <span>, yang merupakan elemen dasar di HTML.
Dengan menggunakan CSS, kita dapat menyesuaikan tampilan kotak ini, seperti ukuran, warna, border, dan posisi di halaman web.
Kotak ini sangat berguna dalam membangun layout halaman, menata elemen-elemen, serta membuat antarmuka pengguna yang terstruktur dengan baik.
Baca juga : Panduan Memilih Bootcamp Front-End Development Terbaik 2025
Cara Membuat Kotak di HTML
Untuk membuat kotak di HTML, pertama buat dokumen HTML, pilih elemen untuk kotak, lalu beri style menggunakan CSS. Berikut adalah Cara Membuat Kotak di HTML selengkapnya:
1. Membuat Dokumen HTML
Langkah pertama adalah membuat dokumen HTML yang akan menjadi dasar untuk halaman web. Kamu perlu memulai dengan struktur dasar HTML, di mana kamu akan menyisipkan elemen kotak yang akan dibuat.
Langkah-langkah:
- Buat file HTML baru dengan ekstensi .html.
- Sertakan tag <html>, <head>, dan <body> sebagai struktur dasar halaman.
Contoh Kode:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cara Membuat Kotak di HTML</title> </head> <body> <!-- Kotak akan ditempatkan di sini --> </body> </html> |
Penjelasan Kode:
Kode di atas adalah struktur dasar dari halaman HTML. Tag <head> berisi metadata tentang halaman web, sementara tag <body> adalah tempat di mana elemen-elemen seperti kotak akan ditampilkan.
Baca juga : 7 Rekomendasi Bootcamp Programmer Gratis & Bersertifikat
2. Membuat Kotak dengan Elemen
Langkah berikutnya adalah memilih elemen HTML untuk membuat kotak. Elemen yang sering digunakan untuk membuat kotak adalah tag <div>, karena fleksibilitasnya dan kemampuannya untuk membungkus konten lainnya.
Langkah-langkah:
- Pilih elemen seperti <div>, <span>, atau elemen semantik seperti <section> untuk membuat kotak.
- Masukkan elemen ini ke dalam tag <body> di dokumen HTML.
Contoh Kode:
<div class="kotak"></div> |
Penjelasan Kode:
Di sini, tag <div> digunakan untuk membuat kotak. Elemen ini tidak memiliki tampilan khusus secara default, tetapi dapat diberi gaya menggunakan CSS. Class “kotak” akan digunakan untuk mengidentifikasi elemen ini dan menerapkan gaya di CSS.
3. Memberi Style pada Kotak
Setelah membuat elemen HTML untuk kotak, langkah berikutnya adalah memberikan style pada kotak tersebut menggunakan CSS.
Dengan CSS, kita dapat menentukan ukuran, warna, dan properti lainnya untuk membuat kotak terlihat lebih menarik dan sesuai desain.
Langkah-langkah:
- Tambahkan kode CSS di dalam tag <style> atau di file CSS terpisah.
- Tentukan lebar, tinggi, warna latar belakang, border, dan margin pada elemen kotak.
Contoh Kode:
<style> .kotak { width: 200px; /* Lebar kotak */ height: 150px; /* Tinggi kotak */ background-color: lightblue; /* Warna latar belakang kotak */ border: 2px solid #000; /* Border kotak */ margin: 20px; /* Jarak luar kotak */ } </style> |
Penjelasan Kode:
- width: 200px; : Menentukan lebar kotak sebesar 200px.
- height: 150px; : Menentukan tinggi kotak sebesar 150px.
- background-color: lightblue; : Memberikan warna latar belakang kotak dengan warna biru muda.
- border: 2px solid #000; : Menambahkan border kotak dengan ketebalan 2px dan warna hitam.
- margin: 20px; : Menambahkan jarak antara kotak dan elemen lainnya di sekitarnya.
4. Membuat Kotak Menggunakan Tag <section>
Tag <section> digunakan untuk mengelompokkan bagian tertentu dari konten di halaman web, dan sangat berguna jika kamu ingin membuat kotak yang memiliki makna semantik.
Ini lebih cocok digunakan jika konten dalam kotak tersebut adalah bagian independen dari halaman web, seperti artikel, berita, atau bagian terpisah lainnya.
Langkah-langkah:
- Tentukan tag <section> untuk mengelompokkan bagian konten yang ingin diberi kotak.
- Gunakan CSS untuk mengatur ukuran, warna latar belakang, border, dan properti lainnya pada kotak tersebut.
Contoh Kode HTML dan CSS:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Membuat Kotak dengan Tag Section</title> <style> .kotak { width: 300px; /* Lebar kotak */ height: 200px; /* Tinggi kotak */ background-color: lightcoral;/* Warna latar belakang kotak */ border: 3px solid #000; /* Border kotak */ padding: 10px; /* Jarak dalam kotak */ margin: 20px; /* Jarak luar kotak */ } </style> </head> <body> <section class="kotak"> <h2>Artikel Terbaru</h2> <p>Ini adalah contoh kotak yang dibuat dengan tag <code><section></code>. Anda dapat menggunakan tag ini untuk membungkus bagian konten yang relevan dalam halaman.</p> </section> </body> </html> |
Hasil Codingan:
Baca juga : Cara Membuat HTML di Notepad: Langkah Mudah untuk Pemula
Ingin Menjadi Web Developer Profesional?
Setelah memahami cara membuat kotak di HTML dan menata tampilannya dengan CSS, kini saatnya menguasai lebih banyak teknik dalam pengembangan web!
Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan mempelajari cara menggunakan HTML, CSS, dan JavaScript untuk membangun website profesional yang responsif dan modern.
Belajar langsung dari mentor berpengalaman dengan kurikulum praktis yang membantumu menciptakan aplikasi web dan desain antarmuka yang menarik.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 95%, peluang kariermu di dunia pengembangan web semakin terbuka lebar!
Jadi, tunggu apa lagi? Hubungi kami di sini dan Daftar sekarang di sini untuk memulai perjalananmu menjadi seorang Web Developer profesional. #BimbingSampeJadi!
Referensi
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
