Cara Membuat List dengan Menggunakan HTML

Dutormasi.com - Halo sahabat Dutormasi!!. Kambali lagi di postingan belajar HTML. Bagaimana kabarnya hari ini ? Masih semangat dong untuk menuntut ilmu. Kali ini kita akan melanjutkan seri belajar HTML kita yaitu Ordered List dan Unordered List.

Cara Membuat List dengan Menggunakan HTML

A. Ordered List

Ordered list adalah salah satu cara untuk membuat list di HTML tetapi diurutkan sesuai dengan tipe yang berlaku.Tipe ini dapat berupa angka, huruf, romawi dll. Ordered List ini bisa dimunculkan dengan menggunakan Tag <ol> dan dibungkus dengan beberapa tag <li> .

Cara menggunakannya yaitu: 

1. Seperti biasa buka Code Editor kita, bagi yang belum tau liat postingan sebelumnya ya.

Cara Membuat List dengan Menggunakan HTML

2. Buka login.html yang kita buat pada postingan kemarin pada postingan Cara membuat Link dengan HTML

Cara Membuat List dengan Menggunakan HTML

3. Dibawah Tag <h1> Kita akan membuat Ordered List sederhana yaitu 3 Pembahasan materi tentang HTML, CSS dan Javascript

<ol>

        <li>HTML</li>

        <li>CSS</li>

        <li>Javascript</li>

</ol>

4. Selanjutnya pilih tipe apa yang dinginkan seperti yang terlihat pada tampilan, kita dapat memilih beberapa pilihan. Untuk saat ini kita ambil tipe angka 1 terlebih dahulu.

Cara Membuat List dengan Menggunakan HTML

5. Lalu tampilannya akan menjadi seperti ini.
Cara Membuat List dengan Menggunakan HTML

B. Unordered List

Unordered List sama seperti Ordered List yaitu sama membuat list pada HTML, yang membedakan disini tipe yang digunakan tidak berupa sesuatu yang berurutan, melainkan hanya diurutkan melalui simbol. Tag untuk memunculkan Unordered ini menggunakan tag <ul> dan dibungkus dengan tag <li>.untuk penggunaannya.

Yuk lanjutin project diatas.

1. Buka file login.html dan kita tambahkan sintax berikut. kali ini kita akan coba menambahkan di bawah list HTML.

Cara Membuat List dengan Menggunakan HTML

2. Selanjunya tambahkan sintax berikut

<ul>

  <li>Membuat HTML sederhana</li>

  <li>Heading dan Paragraf</li>

  <li>Memasukkan Gambar</li>

  <li>Membuat Form</li>

  <li>Membuat Link</li>

  <li>Membuat List</li>

</ul>

3. Lalu tampilannya akan menjadi seperti ini.

Cara Membuat List dengan Menggunakan HTML

Keren ya? Bamget dong. Begitu cara jika kita ingin membuat list dengan baik. Jadi gak sulit lagi deh mengingat daftar belanjaan ibu kita... hehehe bercanda. Dengan adanya list ini dapat mempermudah kita dalam mengelompokkan sesuatu materi dan dalam suatu kelompok matero tersebut kita dapat menambah kelompok baru. Kamu bisa juga lo berlatih membuat kelompok di kelasmu dengan menggukan Ordered List dan Unordered List ini.

Demikian postingan ini saya sampaikan. Jika memiliki kekurangan saya mohon maaf, disini kita sama sama belajar untuk mencerdaskan masyarakat. Salam Dutormasi!!.

Ikaln Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel