Mengenal Tag Div Pada HTML

Tag div adalah tag yang membentuk suatu divisi atau bagian, tag div merupakan generik blok konten yang dapat digunakan sebagai kontainer (penampung) untuk mengelompokan beberapa elemen menjadi satu kesatuan. Tag div biasanya digunakan untuk membuat layer yang akan memudahkan kita untuk membuat layout sesuai dengan desain yang kita inginkan.

Atribut ID Pada Div

<div id="unorderlist">
<ul>
<li>List Kesatu</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
</div>

Atribut ini digunakan untuk menamakan suatu elemen HTML yang memiliki karakteristik yang unik atau berbeda, dan tidak boleh sama. Apabila ada salah penggunaan ID, maka akan berdampak pada halaman web yang akan ditampilkan.

Atribut Class Pada Div

<div class="list">
<ul>
<li class="listpertama">List Kesatu</li>
<li class="listkedua">List Kedua</li>
<li class="listketiga">List Ketiga</li>
</ul>
</div>

Atribut ini digunakan untuk menamakan suatu elemen HTML yang memiliki karakteristik atau struktur yang dapat digunakan secara berulang pada tag HTML.

Memberi Style CSS Pada Atribut Class

<html>
<head>
<title>Mengenal Tag Div Pada HTML</title>
<style>
.listpertama {
      color: red;
}
.listkedua {
      color: yellow;
}
.listketiga {
      color: green;
}
</style>
</head>
<div id="list">
<ul>
<li class="listpertama">List Kesatu</li>
<li class="listkedua">List Kedua</li>
<li class="listketiga">List Ketiga</li>
</ul>
</div>

Penulisan style CSS pada atribut class diawali dengan "." sehingga terlihat jelas disitu bahwa yang mempunyai class dengan nama listpertama berwarna merah, class dengan nama listkedua berwarna kuning, dan class dengan nama listketiga berwarna hijau.

Pages

Mengenal Tag Div Pada HTML

Atribut ID Pada Div

Atribut Class Pada Div

Memberi Style CSS Pada Atribut Class

Belum ada tanggapan untuk "Mengenal Tag Div Pada HTML"

Post a Comment

Mengenal Tag Div Pada HTML

Atribut ID Pada Div

Atribut Class Pada Div

Memberi Style CSS Pada Atribut Class

Postingan terkait:

Belum ada tanggapan untuk "Mengenal Tag Div Pada HTML"

Post a Comment