Rabu, 19 Agustus 2020

Menyajikan Hasil Pembuatan List Minimal dan Kombinasi

Mantan KA UPTD
List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar dari makanan dan minuman, beserta harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari langkah pertama sampai 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 menggunakan angka (1, 2, 3,…) maupun karakter alphabet tertentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak dapat dilakukan secara acak. Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML, misalnya :
Langkah-langkah membuat dokumen HTML :
  1. Jalankan aplikasi Text Editor
  2. Isikan kode HTML ke dalam Text Editor
  3. Simpan file dengan ekstension .htm atau .html
  4. Jalankan file HTML menggunakan aplikasi Web browser untuk menampilkan hasilnya

Untuk membuat 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 menandakan bahwa daftar tersebut sudah berakhir. Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>. Contoh penulisan adalah sebagai berikut :
<ol>
<li>Urutan Pertama</li>
<li>Urutan Kedua</li>
</ol>

Maka hasilnya akan seperti di bawah ini.
  1. Urutan Pertama
  2. Urutan Kedua

Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst. Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :
  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
 List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau Menyajikan Hasil Pembuatan List Minimal dan Kombinasi
2. Daftar Tidak Berututan (unordered list)
Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat (bullet).
Contoh :

Daftar buah :
  • Mangga
  • Jambu
  • Semangka
  • Rambutan
  • Jeruk

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

Untuk membuat 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 menandakan bahwa daftar tersebut sudah berakhir. Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>. Contoh penulisan adalah 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> adalah “type” yang menunjukan jenis tanda untuk setiap item berupa tanda bulatan untuk defaultnya.. Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list adalah :
  • 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 adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu, misalnya daftar definisi istilah HTML.

    B. Menyajikan Pembuatan List Kombinasi
    Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan daftar tidak berurutan. Untuk membuat 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 agar tipenya sama dengan daftar berurutan sebelumnya, kita harus memberikan 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
    1. Sandi Jam
    2. Sandi Nomor
    3. Sandi Geser
    4. Sandi Naik Turun Tingkat

    Contoh yang lainnya adalah :
    1. Landasan Hukum/Legal Operasional
    2. Aspek Institusional
    3. Aspek teknis dan Teknologi
    1. Tempat Penampungan Sementara (TPS)
    2. Tempat Pemrosesan AKhir (TPA)
    1. Peran serta Masyarakat dan Jender dalam Pengelolaan sampah
    2. Permasalahan dalam pengelolaan Sampah
    (Maaf contoh gagal, karena pengaturan ol dan ul dalam template)

    Memulai Dengan Nomor Tertentu
    Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1 (nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start” pada elemen tag <ol>. Misalnya contoh berikut :
    <ol start="17">
    <li>Blok huruf dengan text tool</li>
    <li>Klik tab karakter</li>
    <li>Pilih jenis huruf pada menu pop-up .</li>
    </ol>

    Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18 dan 19.
    1. Blok huruf dengan text tool
    2. Klik tab karakter
    3. Pilih jenis huruf pada menu pop-up .

    Demikian juga apabila :
    <ol type=”A” start="17">
    <li>Blok huruf dengan text tool</li>
    <li>Klik tab karakter</li>
    <li>Pilih jenis huruf pada menu 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 diperlukan apabila daftar yang kita buat sudah diselingi beberapa paragraph, sehingga ketika dibuat daftar bernomor, secara default akan dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka digunakanlah atribut “start=” tersebut.