HIMANIFO UNIMMA
 Membuat List di HTML Web Programming 

14:00:00, 10 November 2020

Web Programming

MEMBUAT LIST DI HTML

Membuat list atau daftar dalam dokumen HTML dapat dilakukan dengan menggunakan tag <li>. Ada 3 jenis list dalam dokumen html yaitu:
1. Ordered List <ol>
2. Unordered List <ul>
3. List Tanpa Bullet <dl>

1. ORDERED LIST

Tag <ol> adalah kependekan dari Ordered List, yang berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Ordered List di HTML</title>
</head>
<body>
<ol start="1" type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
</body>
</html>

Try Here >>

Default dari tag <ol> yaitu: start="1" type="1".
Sedangkan type tag <ol>, yaitu:
"1" mewakili 1, 2, 3, 4, dan seterusnya .
"a" mewakili a, b, c, d, dan seterusnya.
"A" mewakili A, B, C, D, dan seterusnya.
"i" mewakili i, ii, iii, iv, dan seterusnya.
"I" mewakili I, II, III, IV, dan seterusnya.

2. UNORDERED LIST

Tag <ul> adalah kependekan dari Unordered List, yang berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan.
Contoh:

​​​​​​<!DOCTYPE html>
<html>
<head>
<title>Unordered List di HTML</title>
</head>
<body>
<ul type="disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>

Try Here >>

Default dari tag <ul> yaitu: type="circle".
Sedangkan nilai dari attribute type ini adalah "circle", "square" dan "disc". 

3. LIST TANPA BULLET

Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis dengan pembuatan list dengan tag ol/ul, hanya saja tag <ul> diganti
dengan <dl> lalu tag <li> diganti dengan <dd>
Contoh:

​​​​​​<!DOCTYPE html>
<html>
<head>
<title>List Tanpa Bullet di HTML</title>
</head>
<body>
<dl>
  <dd>Coffee</dd>
  <dd>Tea</dd>
  <dd>Milk</dd>
</dl>
</body>
</html>

Try Here >>

MUDAH KAN ?? SELANJUTNYA..

Membuat Table di HTML Web Programming | HIMANIFO UNIMMA →

Jika ada pertanyaan bisa gabung diskusi dibawah atau kontak langsung
Mail :
ajiwahyu12592@gmail.com

#Himanifo Unimma
#Membuat List Di HTML
#Belajar Web Programming
#Himpunan Mahasiswa Jurusan Teknik Informatika

Gabung Diskusi