Modul HTML #4 : List

LIST merupakan salah satu fitur HTML dalam membuat daftar yang berurutan atau tidak berurutan.

4.1 Daftar Berurutan (Order List)

Daftar berurutan adalah suatu metoda untuk menguraikan suatu topik berdasarkan urutan tertentu, dapat berupa :

  1. Angka (1,2,3, dst)
  2. Abjad besar atau kecil (A, B, C, dst atau a, b, c, dst)
  3. Angka Rowawi besar atau kecil (I,II,II, dst atau i,ii,iii, dst)

Contoh :

Matakuliah favorit saya :

  1. Web Desain
  2. Web Programming
  3. Basis Data

Matakuliah favorit saya :

  1. Web Desain
  2. Web Programming
  3. Basis Data

Untuk membuat order list diawali dengan tag <ol> dan dengan tag penutup </ol>, sedangkan untuk listnya diberikan tag list item (<li> dan </li>). 

 

4.2 Daftar Tidak Berurutan (Unorder List)

Dengan metoda ini, urutan-urutan dari sebuah topik diatur dengan menggunakan simbol.

Contoh :

Matakuliah favorit saya :

  • Web Desain
  • Web Programming
  • Basis Data

Matakuliah favorit saya :

  • Web Desain
  • Web Programming
  • Basis Data

Untuk membuat unorder list di awali dengan tag <ul> list </ul>, sedangkan untuk listnya diberikan tag list item (<li> dan </li>).

 

PRAKTIKUM MODUL 4

Untuk lebih memperdalam pemahaman, silahkan coba latihan berikut dan ambil kesimpulan. Sebelumnya silahkan buat folder baru dengan nama Modul_4 di dalam folder Modul_HTML_CSS_Javascript :

Order List :

  1. Latihan 1, buat file baru dengan nama html didalam folder Modul_4 :

 

  1. Latihan 2, buat file baru dengan nama html di dalam folder Modul_4 :

Silahkan ganti nilai type dengan A, a, I dan i untuk menentukan jenis urutannya.

Type

Keterangan

1

List ditampilkan dalam bentuk urutan angka (nilai default)

A

List ditampilkan dalam bentuk urutan Abjad Besar

a

List ditampilkan dalam bentuk urutan abjad kecil

I

List ditampilkan dalam bentuk urutan angka romawi besar

i

List ditampilkan dalam bentuk urutan angka romawi kecil

Baca Juga  Membuat Template Web Responsive Dengan HTML dan CSS

Kita juga dapat menentukan nilai awal dalam daftar urutannya dengan menambahkan atribut start. Kerjakan latihan berikut :

  1. Latihan 3, buat file baru dengan nama html di dalam folder Modul_4 :

Maka daftar urutannya akan dimulai dari angka lima.

Un-Order List :

  1. Latihan 4, buat file baru dengan nama html di dalam folder Modul_4 :
  1. Latihan 5, buat file baru dengan nama html di dalam folder Modul_4 :

Silahkan ganti type dengan nilai square, disc atau none, simpan kemudan lihat perubahannya.

  1. Latihan 6, buat file baru dengan nama html di dalam folder Modul_4 :
  1. Latihan 7, buat file baru dengan nama html di dalam folder Modul_4 :

Daftar Pustaka :

Related Post

Be the first to comment

Leave a Reply

Your email address will not be published.


*


error: Ga bisa dicopy