Belajar Koding HTML Bagian 14: Membuat Elemen Div Class
.png)
Div
class adalah tag dan elemen HTML yang digunakan untuk mendefinisikan ID
atau Class dari CSS. Div adalah tag kontainer yang digunakan untuk
mengelompokkan konten, sedangkan class adalah atribut yang menentukan tindakan
pada elemen.
Penjelasan
- Div
adalah tag HTML yang digunakan untuk membagi halaman situs web menjadi beberapa
bagian. Div juga bisa digunakan untuk mengelompokkan beberapa elemen
bersama-sama tanpa memiliki makna khusus.
- Class
adalah atribut yang menentukan tindakan yang akan dilakukan pada satu atau
beberapa elemen. Class digunakan sebagai pemanggil untuk styling di
CSS.
- Div,
class, dan id adalah komponen yang penting digunakan dan saling berkaitan
dalam membuat kode HTML.
- Div
class digunakan untuk mendefinisikan ID atau Class dari CSS.
- Div
sering digunakan ketika tidak ada elemen semantik yang sesuai untuk
mengelompokkan konten.
- Div tidak memiliki makna atau arti tertentu, hanya berfungsi sebagai wadah untuk struktur dan tata letak.
Untuk
membuat elemen <div> dengan atribut class
dalam HTML, Anda dapat mengikuti langkah-langkah berikut:
- Membuat
Elemen <div> dengan Atribut class:
- Elemen
<div> adalah elemen blok yang
digunakan untuk mengelompokkan konten dalam sebuah halaman web. Dengan
menambahkan atribut class, Anda dapat menerapkan gaya
CSS atau interaksi JavaScript tertentu pada elemen tersebut.
Contoh:
<div
class="namaKelas">
<!-- Konten di sini -->
</div>
Gantilah
namaKelas dengan nama
kelas yang Anda inginkan.
- Menambahkan
Gaya CSS untuk Kelas Tersebut:
- Setelah
mendefinisikan elemen <div> dengan kelas tertentu, Anda
dapat menambahkan gaya CSS untuk menentukan tampilan elemen tersebut.
Contoh:
.namaKelas
{
background-color: #f0f0f0;
padding: 20px;
margin: 10px;
}
Gaya di atas akan memberikan warna latar belakang abu-abu
muda, padding 20px, dan margin 10px pada elemen <div> dengan kelas namaKelas.
- Menggunakan
Beberapa Kelas pada Satu Elemen:
- Anda
dapat menambahkan beberapa kelas pada satu elemen dengan memisahkan
nama-nama kelas menggunakan spasi.
Contoh:
<div
class="kelasPertama kelasKedua">
<!-- Konten di sini -->
</div>
Dalam contoh ini, elemen <div> akan memiliki gaya yang diterapkan
dari kedua kelas, yaitu kelasPertama dan kelasKedua.
Contoh Lengkap: Berikut adalah contoh lengkap penggunaan elemen <div>
dengan atribut class dan penerapan gaya CSS:
<!DOCTYPE
html>
<html
lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Contoh Penggunaan Div dengan
Class</title>
<style>
.kontainer {
width: 80%;
margin: 0 auto;
}
.header {
background-color:
#4CAF50;
color: white;
text-align: center;
padding: 10px 0;
}
.konten {
background-color: #f9f9f9;
padding: 20px;
margin-top: 10px;
}
.footer {
background-color: #ddd;
text-align: center;
padding: 10px 0;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="kontainer">
<div class="header">
<h1>Judul Halaman</h1>
</div>
<div class="konten">
<p>Ini adalah contoh konten utama
yang berada di dalam elemen div dengan class "konten".</p>
</div>
<div class="footer">
<p>Hak Cipta © 2025</p>
</div>
</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Menggunakan Elemen Div Class |
Dalam
contoh di atas, terdapat beberapa elemen <div> dengan kelas yang berbeda seperti kontainer,
header, konten, dan footer. Setiap kelas memiliki gaya CSS
tersendiri yang menentukan tampilan elemen tersebut.
Catatan:
- Nama
kelas bersifat case-sensitive, jadi pastikan konsistensi penulisan antara
HTML dan CSS.
- Hindari
penggunaan nama kelas yang sama untuk elemen yang berbeda jika gaya yang
diterapkan seharusnya berbeda.
Dengan
memahami cara membuat dan menggunakan atribut class pada elemen <div>,
Anda dapat mengelompokkan dan menata konten halaman web Anda dengan lebih
efektif.
Sumber:
0 Response to "Belajar Koding HTML Bagian 14: Membuat Elemen Div Class"
Post a Comment