Menyajikan Hasil Pembuatan List Minimal Dan Kombinasi

List ialah potongan teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list sanggup berupa daftar dari kuliner dan minuman, beserta harganya. List sanggup juga berupa mekanisme (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari langkah pertama hingga langkah terakhir.

A. Tipe Daftar dalam Dokumen HTML

Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu daftar berurutan,  tidak berurutan, dan daftar definisi.

1.  Daftar berurutan (ordered list).

Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini bias memakai angka (1, 2, 3,…) maupun karakter alphabet tertentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya digunakan untuk item-item yang saling bekerjasama satu sama lain, atau untuk menuliskan langkah-langkah atau mekanisme dari acara terntentu yang tidak sanggup dilakukan secara acak. Contoh daftar yang berurutan ialah pada cara menciptakan dokumen HTML, contohnya :

Langkah-langkah menciptakan dokumen HTML :

1. Jalankan aplikasi Text Editor
2. Isikan isyarat HTML ke dalam Text Editor
3. Simpan file dengan ekstension .htm atau .html
4. Jalankan file HTML memakai aplikasi Web browser untuk menampilkan hasilnya

Untuk menciptakan suatu daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk menunjukan bahwa daftar tersebut sudah berakhir. Masing-masing item di dalam daftar harus dibentuk memakai tag <li> (list item, yang lalu perlu ditutup dengan tag </li>. Contoh penulisan ialah sebagai berikut :

<ol>
<li>Urutan Pertama</li>
<li>Urutan Kedua</li>
</ol>

Maka akibatnya akan ibarat di bawah ini.

1. Urutan Pertama
2. Urutan Kedua

Adapun atribut untuk tag <ol> ialah “type” yang menunjukan jenis penomorannnya. Secara standart, tipenya ialah memakai penomoran 1, 2, 3, 4 dst. Selain tipe default, tipe lain yang sanggup digunakan untuk keperluan penomoran dalam suatu list ialah :

1. A Membuat list dengan penomoran berupa karakter A, B, C, dst
2. a Membuat list dengan penomoran berupa karakter a, b, c, dst
3. I Membuat list dengan penomoran berupa karakter I, II, III, dst
4. i Membuat list dengan penomoran berupa karakter i, ii, iii, dst

2. Daftar Tidak Berututan (unordered list)
Daftar yang tidak berurutan ialah daftar yang item-itemnya sanggup diubah posisinya secara acak. Daftar ibarat ni tidak memakai penomoran ibarat di atas, melainkan hanya dengan memakai tanda atau symbol tertentu, contohnya gambar kotak atau bundar (bullet).
Contoh :

Daftar buah :

• Mangga
• Jambu
• Semangka
• Rambutan
• Jeruk

Pada teladan di atas, kita sanggup mengubah/mengacak secara bebas urutan dari masing-masing item yang ada. Hal ini disebabkan lantaran setiap item yang ada tidak mempunyai keterkaitan satu sama lain dengan item lainnya, berbeda dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan.

Untuk menciptakan suatu daftar yang tidak berurutan dalam dokumen HTML, digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag <ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul> berfungsi untuk menunjukan bahwa daftar tersebut sudah berakhir. Masing-masing item di dalam daftar harus dibentuk memakai tag <li> (list item, yang lalu perlu ditutup dengan tag </li>. Contoh penulisan ialah sebagai berikut :

<ul>
<li>Item satu</li>
<li>Item dua</li>
</ul>

Maka Hasilnya sebagai berikut.

• Item satu
• Item dua

Adapun atribut untuk tag <ul> ialah “type” yang menunjukan jenis tanda untuk setiap item berupa tanda bulatan untuk defaultnya.. Selain tipe default, tipe lain yang sanggup digunakan untuk keperluan unordered list ialah :

• Disk Tanda bulatan hitam <ul type=”disk”>
• Circle Tanda bulatan putih <ul type=”circle”>
• Square Tanda kotak <ul type=”square”>

3. Daftar Definisi (definition list)

Daftar Definisi ialah suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu, contohnya daftar definisi istilah HTML.

B. Menyajikan Pembuatan List Kombinasi

Dapat dilihat bahwa daftar di atas ialah adonan daftar berurutan dan daftar tidak berurutan. Untuk menciptakan daftar diatas pada dokumen HTML maka cukup menggabungkan <ol> dangan <ul>. Perhatikan penggabungan <ol> dengan <ul> berikut ini :

<ol>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ol>

Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh browser akan ditampilkan secara otomatis menjadi daftar bullet. Tidak demikian dengan daftar berurutan <ol>, maka biar tipenya sama dengan daftar berurutan sebelumnya, kita harus menawarkan atribut tipe yang sama dengan daftar berurutan sebelumnya. Contoh :

<ul>
<li> </li>
<ol type=i>
<li > </li>
<li> </li>
</ol>
<li>
<ol type=i>
<li > </li>
<li> </li>
</ol>
</li>
<li>
</li>
</ul>

Contoh :
Tipe-tipe Tulisan Sandi

1. Sandi Abjad/Sandi Balik
2. Sandi Koordinat
3. Sandi Angka
4. Sandi Napoleon
5. Sandi Morse

1. Sandi Rumput
2. Sandi Bangun (Bentuk)
3. Sandi Kimia
4. Sandi Morse
5. Sandi Semahore

6. Sandi Jam
7. Sandi Nomor
8. Sandi Geser
9. Sandi Naik Turun Tingkat

Contoh yang lainnya ialah :

1. Landasan Hukum/Legal Operasional
2. Aspek Institusional
3. Aspek teknis dan Teknologi

1. Tempat Penampungan Sementara (TPS)
2. Tempat Pemrosesan AKhir (TPA)

4. Peran serta Masyarakat dan Jender dalam Pengelolaan sampah
5. Permasalahan dalam pengelolaan Sampah

(Maaf teladan gagal, lantaran pengaturan ol dan ul dalam template)

Memulai Dengan Nomor Tertentu

Untuk menciptakan daftar bernomor dengan urutan yang tidak dimulai dengan 1 (nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start” pada elemen tag <ol>. Misalnya teladan berikut :

<ol start="17">
<li>Blok abjad dengan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis abjad pada hidangan pop-up .</li>
</ol>

Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18 dan 19.

17. Blok abjad dengan text tool
18. Klik tab karakter
19. Pilih jenis abjad pada hidangan pop-up .

Demikian juga apabila :

<ol type=”A” start="17">
<li>Blok abjad dengan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis abjad pada hidangan pop-up .</li>
</ol>

Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R, dan S. Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal, biasanya diharapkan apabila daftar yang kita buat sudah diselingi beberapa paragraph, sehingga dikala dibentuk daftar bernomor, secara default akan dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka digunakanlah atribut “start=” tersebut.

Share this post