this → Artikel Baru – ( Atrikel Lama ↓ )

3 Jenis Utama Penggunaan List pada HTML

Waktu Publikasi Labels: Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia
List adalah sebuah record dari pecahan kecil informasi, seperti nama seseorang, biasanya ditulis atau dicetak dengan tanda khusus pada setiap barisnya dan disusun dengan suatu cara tertentu sehingga muda untuk menemukan informasi spesifik yang terkandung dalam urutannya. Contohnya:
  • List daftar belanja.
  • List aktifitas sehari-hari.

List pada HTML
HTML memberikan tiga cara untuk menampilkan informasi dalam bentuk list. Semua list tersebut harus mengandung satu atau lebih dari daftar list elemen.

Tipe dari list yang dapat digunakan pada HTML adalah:
  • satu, ul: Unordered list. List ini akan menggunakan bentuk plain bullet sebagai penanda list.
  • dua, ol: Ordered list. List ini akan menggunakan bentuk skema berbeda dari angka terhadap item list.
  • tiga, dl: Definition list. List ini akan mengarahkan item informasi sama seperti pengarahan pada sistem kamus.

Unordered List pada HTML
Anordered list dimulai dengan tag "ul". Setiap item listdimulai dengan tag "li" (list). Item list akan ditandai dengan bullet (titik khusus) seperti lingkaran hitam kecil secara otomatis. 

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Grocery list

</h2>

 

<ul>

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

 

</body>

 

</html>

Output:

Grocery list

  • Bread
  • Eggs
  • Milk
  • Coffee

Item unordered list memiliki berbagai variasi HTML:
satu, Disc: Sekumpulan item list marker untuk tipe bullet default.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Unordered List with Disc Bullets

</h2>

 

<h2>

Grocery List

</h2>

 

<ul style="list-style-type:disc">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

 

</body>

 

</html>

Output:

Unordered List with Disc Bullets

Grocery List

  • Bread
  • Eggs
  • Milk
  • Coffee

Pahami pula, tentang semua konsep desain Web untuk tingkat pemula melalui materi lengkap HTML [klik].


dua, Circle (lingkaran): Sekumpulan item list marker berbentuk tipe lingkaran.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Unordered List with Circle Bullets

</h2>

 

<h2>

Grocery list

</h2>

 

<ul style="list-style-type:circle">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

 

</body>

 

</html>

Output:

Unordered List with Circle Bullets

Grocery list

  • Bread
  • Eggs
  • Milk
  • Coffee

tiga, Square (persegi): Sekumpulan item list marker berbentuk kotak.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Unordered List with Square Bullets

</h2>

 

<h2>

Grocery list

</h2>

 

<ul style="list-style-type:square">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

 

</body>

 

</html>

Output:

Unordered List with Square Bullets

Grocery list

  • Bread
  • Eggs
  • Milk
  • Coffee

Ordered List pada HTML
Ordered list dimulai dengan tag "ol". Setiap list item dimulai dengan tag "li". Item list ditandai dengan angka dengan urutan yang otomatis. 

Baca juga, tentang materi bahasa pemrograman lainnya melalui Materi Lengkap Bahasa Pemrograman [klik].


Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Grocery List

</h2>

 

<ol>

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Grocery List

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

Ordered list HTML memiliki berbagai variasi list item marker:
Tipe atribut dari tag <ol>, mendefinisikan tipe dari list item marker.

satu, tipe="1", item list akan ditandai dengan urutan angka secara otomatis.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Numbers

</h2>

 

<ol type="1">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Numbers

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

dua, type="A", item list akan ditandai dengan urutan huruf uppercase.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Letters

</h2>

 

<ol type="A">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Letters

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

tiga, type="a", item list akan ditandai dengan urutan huruf lowercase.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Lowercase Letters

</h2>

 

<ol type="a">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Lowercase Letters

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

empat, type="I", item list akan ditandai dengan urutan penomoran romawi uppercase.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Roman Numbers

</h2>

 

<ol type="I">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Roman Numbers

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

lima, type="i", item list akan ditandai dengan urutan penomoran romawi lowercase.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Lowercase Roman Numbers

</h2>

 

<ol type="i">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Lowercase Roman Numbers

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

Description List pada HTML
Description list adalah sebuah list dari istilah tertentu, yang disertai dengan deskripsi pada setiap istilah tersebut. Tag <dl> digunakan untuk mendefinisikan description list, yang digunakan untuk mendefinisikan nama istilah, dan tag <dd> digunakan untuk mendeskripsikan setiap istilah pada list. 

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

A Description List

</h2>

 

<dl>

<dt>Coffee</dt>

<dd>- 500 gms</dd>

<dt>Milk</dt>

<dd>- 1 ltr Tetra Pack</dd>

</dl>

 

</body>

 

</html>

Output:

A Description List

Coffee
- 500 gms
Milk
- 1 ltr Tetra Pack

List bersarang pada HTML:
List bersarang adalah sekumpulan list yang terdapat di dalam sebuah list.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

A Nested List

</h2>

 

<ul>

<li>Coffee</li>

 

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

 

<li>Milk</li>

</ul>

 

</body>

 

</html>

Output:

A Nested List

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
Dipublikasikan Oleh
Bekerja Sebagai Guru TIK di Kota Semarang, yang memanfaatkan blog sebagai sarana pendidikan dan informasi.

Komentar

  1. AnonimJumat, 21 Mei 2021 21.51.00 WIB

    Apa fungsi dari penggunaan list atau daftar pada HTML?

    BalasHapus
    Balasan
    1. AnonimJumat, 21 Mei 2021 21.51.00 WIB

      List atau daftar HTML digunakan untuk menyajikan daftar informasi dalam bentuk yang baik dan sistematis. Ada tiga jenis list dalam HTML dan masing-masing penggunaannya memiliki tujuan dan arti tertentu.

      Hapus
  2. AnonimJumat, 21 Mei 2021 21.53.00 WIB

    Apa tujuan dari penggunaan list pada HTML?

    BalasHapus
    Balasan
    1. AnonimJumat, 21 Mei 2021 21.53.00 WIB

      List atau daftar digunakan untuk mengelompokkan informasi yang saling berkaitan, sehingga menjadi jelas hubungan antara satu dan lainnya dalam kumpulan informasi tersebut. Dalam pengembangan web modern, list merupakan elemen yang sering digunakan untuk navigasi serta pembuatan konten secara umum.

      Hapus
  3. AnonimJumat, 21 Mei 2021 21.55.00 WIB

    List merupakan daftar dari hal-hal seperti alamat ataupun sekumpulan dari data yang semuanya termasuk dalam kategori tertentu, dan ditulis secara berurutan dari urutan pertama hingga akhir.

    BalasHapus

Posting Komentar

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Waktu Publikasi 22 komentar
Enkapsulasi didefinisikan sebagai pembungkusan data dalam satu buah unit. Enkapsulasi adalah mekanisme yang mengikat code program dan data yang dimanipulasi secara bersamaan pada bahasa pemrograman Java. Cara lain untuk berpikir mengenai enkapsulasi adalah upaya untuk melindungi atau sebagai perisai proteksi yang mencegah data untuk diakses oleh pihak luar.
Tampilan Selengkapnya »

Perbedaan stdio.h dan stdlib.h pada Bahasa C

Waktu Publikasi 7 komentar
Terdapat dua file header penting yang digunakan dalam bahasa C. Pertama, "<stdio.h>" adalah file header untuk standar input dan output , dan kedua "<stdlib.h>" adalah header file untuk standar library . Salah satu cara mudah untuk membedakan kedua file header tersebut adalah "<stdio.h>" mengandung deklarasi dari printf() dan scanf() , sementara "<stdlib.h>" mengandung deklarasi dari malloc() dan free() . Secara umum, perbedaan kedua file header tersebut adalah "<stdio.h>" mengandung informasi header untuk file yang berkaitan dengan fungsi nilai input output pada program, sedangkan "<stdlib.h>" mengandung informasi untuk fungsi alokasi memori dan pembebasan alokasi memori.
Tampilan Selengkapnya »

Penjelasan Singkat tentang Konsep Asosiasi, Komposisi, dan Agregasi pada Java

Waktu Publikasi 6 komentar
Gambar
Dalam artikel ini akan dijelaskan fungsi dari asosiasi, komposis, dan agregasi yang merupakan bentuk-bentuk hubungan antar  object  dalam OOP Java. Asosiasi   Asosiasi adalah hubungan antara dua  class  terpisah yang terbentuk melalui  object -nya. Asosiasi bisa berupa  one-to-one ,  one-to-many ,  many-to-one ,  many-to-many . Pada pemrograman berorientasi  object ,  object  berkomunikasi dengan  object  lainnya menggunakan fungsi dan  services  yang disediakan oleh  object . Komposisi dan agregasi adalah dua bentuk dari asosiasi seperti diperlihatkan pada  gambar 1 .
Tampilan Selengkapnya »

3 Jenis Utama Looping pada Java

Waktu Publikasi 5 komentar
Gambar
Looping  pada bahasa pemrograman Java adalah fitur yang digunakan untuk memfasilitasi eksekusi program dari sekelompok instruksi atau fungsi secara berulang ketika beberapa kondisi tertentu yang menjadi syarat adalah bernilai benar. Java menyediakan tiga cara untuk melakukan eksekusi  looping  pada program. Dimana semua cara tersebut menyediakan fungsi dasar yang sama, dimana perbedaannya hanya terdapat pada sintak dan kondisi waktu eksekusi.
Tampilan Selengkapnya »