Belajar HTML Cara Membuat List Kombinasi HTML

Assalamu'alaikum wr.wb

Pada kesempatan kali ini kami akan belajar mengetnai  Cara Membuat List Kombinasi HTML

Apa yang dimaksud dengan List

List adalah suatu bagian dari text yang berisi daftar item dari suatu kelompok atau juga kita dapat mengartikannya sebagai sebua prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu yang harus dilakukan mulai dari tahap awal hingga selesai.

Terdapat tiga daftar pokok yang dapat dibuat oleh dokumen HMTL yaitu:

  1. Daftar tidak terurut (Unordered List), seperti pada namanyam kita dimungkinkan untuk dapat membuat daftar dari hal tidak memiliki urutan urutan tertentu
  2. Daftar Terurut (Ordered List), Sama halnya seperti tadi sesuai dengan nama, dapat memberikan fasilitas untuk membuat kita dapat diberikan kemudahan untuk dapat mengurutkan data dengan benar.
  3. Daftar Defnisi (Definision List), dapat kita gunakan untuk mendefinisikan daftar - daftar istilah yang terdapat dalam dokument, sering digunakan untuk index dan glosarium.

Apa saja tipe daftar/list dalam dokumen HTML

Didalam dokumen html, tipe daftar/list dibedakan menjadi tiga, yaitu:
  • Daftar yang berurutan (ordered list).
  • Daftar tidak berurutan (unordered list)
  • Daftar definisi (definition list)
Oke sekarang kita akan membahas satu persatu dari poin-poin diatas.

Daftar yang berurutan (ordered list)

Daftar berurutan biasanya kita akan melihat tanda-tanda penomoran tertentu. untuk penomoran itu sendiri biasanya menggunakan angka (1,2,3,....) ataupun menggunakan alphabet (a,b,c,... atau i.ii.iii,....).

Daftar tidak berurutan (unordered list)

perlu teman-teman ketahui, daftar yang tidak berurutan adalah daftar item-item yang dapat diubah posisinya secara acak.

Daftar definisi (definition list)

Daftar definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah, misalkan daftar definisi istilah HTML.

List Kombinasi 

coba temna-teman perhatikan daftar berikut ini:

teman-teman dapat melihat bahwa daftar diatas adalah gabungan daftar berurutan dan daftar tidak beruruan
Untuk teman-teman yang ingin mengetahui script diatas, maka cukup menggabungkan <ol>dengan<ul>

Selanjutnya kita akan menuju pada tahap langkah kerja.

Langkah kerja

yang harus teman-teman siapkan adalah:
  1. silahkan teman-teman buat folder di drive D:, dengan nama foldel nama anda. Misal: prakweb_namaAnda.
  2. Selanjutnya, buat folder praktikum2 didalam folder yang sudah teman-teman buat sebelumnya.
  3. Buka teks editor teman-teman seperti notepad++ atau sublime
  4. Kemudian simpan elemen-elemen struktur dokumen HTML tersebuat dalam format .html
  5. Tahap selanjutnya jalankan masilng-masing contoh element struktur HTML tersebut dengan menggunakan web browser.
percobaan
Pertama teman-teman buat halaman web sebagai berikut (Ordered List).

<html>
 <head>
  <title>Pemrograman Web</title>
 </head>
 <body>
  Daftar program keahlian SMKN 1 Katapang
  <ol>
   <li>Tekstil</li>
   <li>Elektro</li>
   <li>Mesin</li>
   <li>Otomotif</li>
   <li>TKJ</li>
   <li>RPL</li>
   <li>Multimedia</li>
  </ol>
 </body>
</html>
Kemudian teman-teman simpan kode HTML diatas dengan nama ol.html selanjutnya teman-teman buka hasilnya mengguakan web browser. Jika teman-teman benar dalam penulisannya maka akan tampil halaman web sebagai berikut.
Sekarang kita akan membuat halaman web (urordered list), silahkan teman-teman lihat script dibawah ini.

<html>
 <head>
  <title>Pemrograman Web</title>
 </head>
 <body>
  Daftar program keahlian SMKN 1 Katapang
  <ul>
   <li>Tekstil</li>
   <li>Elektro</li>
   <li>Mesin</li>
   <li>Otomotif</li>
   <li>TKJ</li>
   <li>RPL</li>
   <li>Multimedia</li>
  </ul>
 </body>
</html>
Silahkan simpan kode html diatas dan buka dengan web browser, jika teman-teman menuliskannya dengan benar maka akan tampil seperti gambar dibawah ini.
Selanjutnya kita akan membuat halaman (definition list) silahkan teman-teman ikuti script dibawah ini

<html>
 <head>
  <title>Description</title>
 </head>
 <body>
  <u>Drink</u>
  <dl>
   <dt>Coffee</dt>
    <dd>- black hot drink </dd>
   <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>
 </body>
</html>
Silahkan teman-teman simpan kode diatas dengan nama dl.html. Lalu teman-teman buka dengan web browser, jika penulisannya benar maka akan tampil seperti gambar berikut:
Terakhir kita akan membuat list kombinasi Silahkan teman-teman ikuti script dibawah ini

<html>
 <head>
  <title>List Kombinasi</title>
 </head>
 <body>
  <u>Kategori Hewan</u>
  <ol>
   <li>Karnivora</li>
    <ul>
     <li>Singa</li>
     <li>Harimau</li>
     <li>Nuaya</li>
    </ul>
   <li>Herbivora</li>
   <li>Omnivora</li>
  </ol>
 </body>
</html>
Silahkan teman-teman simpan kode diatas dengan nama kombinasi.html. Lalu teman-teman buka dengan web browser, jika penulisannya benar maka akan tampil seperti gambar berikut:
Selamat teman-teman telah belajar sampai pada tahap pembuatan list kombinasi, terimakasih telah berkunjung. :)

Semoga bermanfaat dan salam success

0 Response to "Belajar HTML Cara Membuat List Kombinasi HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel