Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MEMBUAT KOTAK DI HTML

Pelajari cara membuat kotak di HTML dengan mudah, cepat, dan jelas. Tutorial ini cocok untuk semua level, mulai dari pemula hingga yang sudah berpengalaman.

Daftar Isi:

Langkah Pertama: Membuat Dokum...
Langkah Kedua: Membuat Kotak d...
Langkah Ketiga: Memberi Style ...
Kesimpulan

HTML (Hyper Text Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan tampilan sebuah website. Salah satu elemen yang sering digunakan dalam HTML adalah kotak. Kotak ini biasanya digunakan untuk membungkus isi atau konten di dalam website. Dalam tutorial ini, kita akan membahas cara membuat kotak di HTML.

Langkah Pertama: Membuat Dokumen HTML

Pertama-tama, kamu harus membuat sebuah dokumen HTML. Ini bisa dilakukan dengan menggunakan teks editor seperti Notepad, Sublime Text, atau Visual Studio Code. Berikut adalah struktur dasar dari sebuah dokumen HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
</head>
<body>

</body>
</html>

Penjelasan

  • <!DOCTYPE html> mendefinisikan bahwa ini adalah dokumen HTML5.
  • Elemen <html> adalah root dari sebuah halaman web.
  • Elemen <head> adalah container untuk metadata (data tentang data) dan bisa berisi judul halaman, link ke CSS, link ke JavaScript, dan lainnya.
  • Judul halaman ditampilkan melalui elemen <title>.
  • Elemen <body> berisi semua konten halaman web, seperti teks, gambar, video, dan lainnya.

Langkah Kedua: Membuat Kotak dengan Elemen <div>

Setelah membuat dokumen HTML, kamu bisa membuat kotak dengan menggunakan elemen <div>. Elemen ini adalah container yang digunakan untuk membungkus konten. Berikut adalah cara membuat kotak dengan elemen <div>:

  1. Buka dokumen HTML yang sudah dibuat.
  2. Tambahkan elemen <div> di dalam elemen <body>. Contohnya adalah sebagai berikut:
<body>
  <div></div>
</body>

Langkah Ketiga: Memberi Style kepada Kotak

Kotak yang telah dibuat belum terlihat karena belum diberikan style. Untuk itu, kita perlu menambahkan CSS untuk memberikan style ke kotak. CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan elemen-elemen pada dokumen HTML. Berikut adalah cara memberi style ke kotak:

  1. Tambahkan elemen <style> di dalam elemen <head>.
  2. Berikan style untuk kotak dengan mengatur atribut seperti width, height, border, dan background-color. Contohnya adalah sebagai berikut:
<head>
  <title>Judul Halaman</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: red;
    }
  </style>
</head>

Kesimpulan

Membuat kotak di HTML adalah hal yang mudah dan dapat dilakukan oleh siapa saja. Kotak ini biasanya digunakan untuk membungkus konten dalam website. Selain digunakan untuk styling, kotak juga dapat digunakan sebagai layout dalam pembuatan website. Semoga tutorial ini membantu kamu dalam memahami cara membuat kotak di HTML.

cover kelas Kelas membuat website dengan HTML dan CSS
Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas

Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding