DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
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.
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>
<!DOCTYPE html>
mendefinisikan bahwa ini adalah dokumen HTML5.<html>
adalah root dari sebuah halaman web.<head>
adalah container untuk metadata (data tentang data) dan bisa berisi judul halaman, link ke CSS, link ke JavaScript, dan lainnya.<title>
.<body>
berisi semua konten halaman web, seperti teks, gambar, video, dan lainnya.<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>
:
<div>
di dalam elemen <body>
. Contohnya adalah sebagai berikut:<body>
<div></div>
</body>
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:
<style>
di dalam elemen <head>
.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>
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.
Link terkait: