tutorial pengembangan web terbaru

Daftar HTML

❮ Sebelumnya Berikutnya Bab ❯

HTML Daftar Keterangan

Sebuah daftar deskripsi, yang terdiri dari kelompok nama-nilai, dan dikenal sebagai daftar definisi sebelum HTML5. Deskripsi daftar dimaksudkan untuk kelompok "istilah dan definisi, topik metadata dan nilai-nilai, pertanyaan dan jawaban, atau kelompok lain data nama-nilai".

DL ada di HTML Tag, dan standar dalam HTML 2.0; masih saat ini.

Contoh daftar unordered dan ordered list dalam HTML:

Daftar unordered:

  • Barang
  • Barang
  • Barang
  • Barang

Daftar memerintahkan:

  1. item pertama
  2. kedua barang
  3. Item ketiga
  4. butir keempat

Daftar HTML unordered

Daftar unordered dimulai dengan <ul> tag. Setiap item daftar dimulai dengan <li> tag.

Daftar item akan ditandai dengan peluru (small black circles) :

Contoh

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Cobalah sendiri "

Daftar HTML unordered - The Style Atribut

Sebuah style atribut dapat ditambahkan ke daftar unordered, untuk menentukan gaya penanda:

Gaya Deskripsi
list-style-type:disc Daftar item akan ditandai dengan peluru (default)
list-style-type:circle Daftar item akan ditandai dengan lingkaran
list-style-type:square Daftar item akan ditandai dengan kotak
list-style-type:none Daftar barang yang tidak akan ditandai

Disc :

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Cobalah sendiri "

Circle :

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Cobalah sendiri "

Square :

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Cobalah sendiri "

None :

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Cobalah sendiri "

Daftar HTML memerintahkan

Daftar memerintahkan dimulai dengan <ol> tag. Setiap item daftar dimulai dengan <li> tag.

Daftar item akan ditandai dengan nomor:

Contoh

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Cobalah sendiri "

Daftar HTML memerintahkan - The Type Atribut

Sebuah type atribut dapat ditambahkan ke daftar memerintahkan, untuk menentukan jenis penanda:

Mengetik Deskripsi
type="1" Daftar item akan diberi nomor dengan angka (default)
type="A" Daftar item akan diberi nomor dengan huruf besar
type="a" Daftar item akan diberi nomor dengan huruf kecil
type="I" Daftar item akan diberi nomor dengan angka romawi huruf besar
type="i" Daftar item akan diberi nomor dengan angka romawi huruf kecil

nomor:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Cobalah sendiri "

Huruf besar:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Cobalah sendiri "

Huruf kecil:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Cobalah sendiri "

Numbers huruf besar Roman:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Cobalah sendiri "

Huruf kecil Bilangan Romawi:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Cobalah sendiri "

Deskripsi HTML

HTML juga mendukung daftar deskripsi.

Sebuah daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.

The <dl> tag mendefinisikan daftar deskripsi, yang <dt> tag mendefinisikan istilah (name) , dan <dd> tag menjelaskan setiap istilah:

Contoh

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Cobalah sendiri "

Daftar HTML bersarang

Daftar dapat bersarang (lists inside lists) :

Contoh

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Cobalah sendiri "

Daftar item dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll

Daftar horisontal

daftar HTML bisa ditata dalam berbagai cara dengan CSS.

Salah satu cara yang populer, adalah gaya daftar yang akan ditampilkan horizontal:

Contoh

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

</body>
</html>
Cobalah sendiri "

Dengan sedikit tambahan gaya, Anda dapat membuatnya terlihat seperti menu:

Contoh

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
Cobalah sendiri "

Bab Ringkasan

  • Gunakan HTML <ul> elemen untuk mendefinisikan daftar unordered
  • Gunakan HTML style atribut untuk menentukan gaya peluru
  • Gunakan HTML <ol> elemen untuk mendefinisikan daftar memerintahkan
  • Gunakan HTML type atribut untuk menentukan jenis penomoran
  • Gunakan HTML <li> elemen untuk menentukan item daftar
  • Gunakan HTML <dl> elemen untuk mendefinisikan daftar deskripsi
  • Gunakan HTML <dt> elemen untuk mendefinisikan istilah deskripsi
  • Gunakan HTML <dd> elemen untuk mendefinisikan data deskripsi
  • Daftar dapat bersarang di dalam daftar
  • Daftar item dapat berisi elemen HTML lainnya
  • Menggunakan tampilan properti CSS: inline untuk menampilkan daftar horizontal

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»

HTML Daftar Tag

Menandai Deskripsi
<ul> Mendefinisikan daftar unordered
<ol> Mendefinisikan daftar ordered
<li> Mendefinisikan sebuah item daftar
<dl> Mendefinisikan daftar deskripsi
<dt> Mendefinisikan istilah dalam daftar deskripsi
<dd> Mendefinisikan deskripsi dalam daftar deskripsi

❮ Sebelumnya Berikutnya Bab ❯