Wednesday, April 15, 2015

Tutorial Cara Membuat List Dalam HTML | HTML Dasar

9:11:00 PM

Flamingosolution.com | Lanjutan kali ini yaitu tentang Cara membuat Daftar/ List dalam HTML Sederhana. Adapun teman teman sekalian yang belum membaca ulasan sebelumnya, karena sebelum sampai pada Tahap ini Blog telah mengulas topik terdahulu yang juga bisa di lihat dibawah ini yaitu tentang ;

Maka untuk itu kita akan mengulas tentang Judul Kali ini yaitu HTML List :

List dalam HTML atau HTML LIST ialah sebuat daftar dari beberapa item dalam sebuah menu pilihan.
jadi misalkan contoh dalam daftar menu makanan, Biasanya kita melihat daftar menu makanan ditulis dengan beberapa item yang tertera didalamnya seperti ini ;
Menu Makanan
1. Nasi Goreng
2. Mie Goreng
3. Ifo Mie
4. Pangsit.
 dll.
Nah daftar seperti diatas lah yang termasuk sebuah List, jika dalam HTML kita juga pasti akan menemukan hal serupa dan pasti akan memakai untuk penerapannya..

HTML List terbagi menjadi 3 yaitu :
1. Ordered Lists
2. Unordered Lists
3. Defenition Lists



1. Ordered Lists
Yaitu suatu metode perintah dalam Html yang berfungsi dapat mengurutkan daftar dengan menggunakan angka biasa, angka romawi abjad.
contoh :

Daftar Penjualan
a. Sembako
b. Gas Elpiji
c. Rokok dll
Dalam Ordered List. "Tag" yang dipakai untuk pengurutan itu adalah Tag <ol>, Sedangkan tag untuk membuat daftar item nya ialah <li>.
Sehingga dalam segi penerapan Tag item ( <li> ) diapit atau berada diantara tag pengurut (<ol>).
Lebih jelasnya lihat penerapan dibawah ini :
<body>
      <ol> Menu Makanan
          <li>Nasi Goreng</li>
           <li>Mie Goreng</li>
          <li>Ifo Mie</li>
          <li>dll</li>
      </ol>
</body>
hasil pada Browser akan kamu temui sama seperti contoh dibawah ini ;
Menu Makanan 
1. Nasi Goreng
2. Mie Goreng
3. Ifo Mie dll
Atau list bisa juga digunakan dalam penggunaan tag judul  seperti dibawah ini:
<h3>Numbered List:</h3>
  <ol>
     <li>apples</li>
     <li>bananas</li>
     <li>Lemon</li>
     <li>orange</li>
 </ol>
Hasilnya

Numbered List:

  1. apples
  2. bananas
  3. Lemon
  4. orange
Berdasarkan gambar tersebut, bisa disimpulkan bahwa tag <li> dapat berfungsi langsung mengurutkan daftar daftar tersebut langsung menggunakan angka sebagai simbol.

2. Unordered Lists
Sedangkan yang satu ini ialah metode dalam HTML yang mengurutkan daftar dengan menggunakan simbol atau special character.
Spesifikasi Laptop
- CPU Intel Dual core processor (1.9 GHz)
- Ram 4 GB
- Harddisk 500 GB dll

Sedangkan dalam Unordered List"Tag" yang dipakai untuk pengurutan itu adalah Tag <ul>, Sedangkan tag untuk membuat daftar item tetap menggunakan tag <li>.
Dan dalam penerapan, Tag item ( <li> ) diapit atau berada diantara tag pengurut (<ul>).
Lebih jelasnya lihat penerapan dibawah ini
 <body>
     <ul>Spesifikasi Smartphone
         <li>Layar 5.5 In </li>
         <li>Jaringan 3G, EDGE</li>
         <li>Memory Internal (MicroSD)</li>
         <li>dll</li>
     </ul>
</body>
dalam Browser hasilnya akan terlihat seperti dibawah ini;
Spesifikasi Smarphone
  • Layar 5.5 In
  • Jaringan 3G, EDGE
  • Memory Internal (MicroSD) dll

Nah , jadi perbedaan antara Ordered dan Unordered bisa dilihat dari jenis lambang lambang yang digunakan dalam pengurutannya.

3. Defenition Lists
Adalah sebuah pengurutan dalam html yang diurutkan berdasarkan daftar daftar defenisi atai istilah.
Jenis ini berfungsi/ digunakan saatmembuat daftar defenisi atau menggunakan istilah istilah yang ada dalam dokumen , terutama membuat Glosarium HTML.
Dengan kata lain, jenis ini digunakaan disaat kita ingin memberi Indeks Tersendiri.

Tag yang dipakai dalam bentuk ini adalah;
Tag <dl> (sebagai pengurut)
Tag <dt> (Sebagai Pembuat Defenisi/istilah)
Tag <dd> (Sebagai isi/ istilah)

Dalam penerapan Tag <dd> haruslah diapit atau berada dalam Tag <dt> , dan Tag <dd> harus berada atau diapit oleh Tag <dl>.
Sebagai contoh lihat penerapan dibawah ini ;
<body>
    <dl>
       <dt>Kopi</dt>
           <dd>Kopi Hitam Panas</dd>
       <dt>Susu</dt>
           <dd>Susu Putih Panas</dd>
   </dl> 

</body>

Maka dalam browser akan terlihat seperti dibawah ini :
Kopi
Kopi Hitam Panas
Susu
Susu Putih Panas
--------------------------------------------------------------------------------------------------------------------

ATTRIBUT dalam List
Tak sampai disitu, dalam Tag list ada juga saat saat dibutuhkannya penggunaan attribut,

Berikut Contoh penggunaan attribut dalam tag ordered list sebeagai abjad, yang ditandai kode "Biru" seperti dibawah ini :

<h4>Letters Lists: </h4>
<ol type ="A">
       <li>Apples</li>
       <li>Bananas</li>
       <li>Lemons</li>
       <li>Oranges</li>
</ol>
 hasilnya

Letters Lists:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Maka Kesimpulannya Attribut (warna Biru) tersebut berfungsi untuk menampilkan pengurutan berdasarkan abjad (Ordered List) tersebut menjadi abjad Kapital.
Namun jika pada Attribut ditulis seperti ini Type="a" , maka pengurutan abjad akan kembali ke huruf kecil.

Dan berikut contoh penggunaan attribut dalam tag Unordered list sebeagai Angka Romawi, yang ditandai kode "Biru" seperti dibawah ini :

<h4>Roman Number List: </h4>
<ol type ="I">
       <li>Apples</li>
       <li>Bananas</li>
       <li>Lemons</li>
       <li>Oranges</li>
</ol>
Hasil dalam browser seperti dibawah
Roman Number List:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
Namun jika mengubah attribut Type menjadi type="i" ,maka secara otomatis juga pengurutan unordered list berdasarkan romawi kecil, seperti dibawah ini
<h4>Roman Number List: </h4>
<ol type ="i">
       <li>Apples</li>
       <li>Bananas</li>
       <li>Lemons</li>
       <li>Oranges</li>
</ol>
hasilnya

Roman Number List:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Sekian pembahasan topik kali ini, semoga bermanfaat dan dapat menambah refrensi.
Jangan lupa Klik Like Facebook, atau bagikan Link ke teman anda yang ingin belajar HTML,
Jika ada sesuatu dalam artikel yang kurang dipamahi, atau kesalahan, silahkan meninggalkan pertanyaan atau saran dalam kotak komentar.

Terima kasih,

Salam.






Ditulis oleh

Flamingo Solution | Media Informasi Seputar Teknologi dan Seni Visual

3 komentar:

  1. Bagi kamu yang membutuh box makanan untuk makanan kecil seperti pangsit, dim sum, siomay, takoyaki, dll. Kamu bisa coba cek di sini http://www.greenpack.co.id/

    ReplyDelete
  2. terima kasih ilmunya kak. ini sangat bermanfaat untuk saya.

    ReplyDelete
  3. Mantap, terima kasih kak. artikel ini sangat membantu saya.

    My blog

    ReplyDelete

Mari Saling Berbagi, Membangun dengan memberi kritik, saran jika ada yang kurang jelas, dan tentunya Komentar yang tidak mengandung hal NEGATIF, SARA, BERBAU PORNO GRAFI.
Salam BLOGGER

 

© 2013-2019 Flamingo Solution. All rights resevered. Designed by Templateism

Back To Top