Rabu, 09 September 2020

Membuat List (Daftar) di HTML - Belajar HTML Dasar 8

Membuat List (Daftar) di HTML - Belajar HTML Dasar 8, Setelah belajar beberapa tag dasar di pertemuan sebelumnya dan juga latihan menggunakan tag-tag tersebut dalam membuat website sederhana di beberapa pertemua terakhir, kali ini kita akan belajar membuat list atau daftar dalam sebuah halaman web.

List atau dalam bahasa indonesia dikenal sebagai daftar berurutan merupakan fungsi html yang digunakan untuk menampilkan data secara berurutan kebawah. Di dalam html terdapat dua macam jenis list yaitu List Berurutan (Ordered List) yang ditampilkan dengan simbol angka, huruf, hingga angka romawi dan List Tidak Beraturan (Unordered List) ditampilkan dengan simbol bulatan atau kotak.
Membuat List (Daftar) di HTML - Belajar HTML Dasar 8

Membuat List <li>

List atau item daftar dibuat menggunakan tag <li>, dimana tag <li> ini merupakan item yang akan menjadi daftar nantinya baik secara berurutan maupun tidak berurutan. List memiliki tag pembuka dan tag penutup <li>....</li>

Secara default jika <li> tidak disimpan kedalam <ol> atau <ul> maka <li> secara otomatis menjadi <ul> namun kadang juga hanya menjadin daftar biasa tanpa simbol apapun,jika anda bingung dibawah ini saya perlihatkan tag <li> dipake kedalam html

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat List</title>
</head>
<body>
<li>Jurusan RPL</li>
<li>Jurusan TKJ</li>
</body>
</html>

Hasilnya Seperti dibawah ini : 
Membuat List (Daftar) di HTML - Belajar HTML Dasar 8


Membuat List Berarturan/Ordered List <ol>

Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka tergantung atribut yang dipake, tag yang digunakan untuk membuat ordered list yaitu <ol>, semua item daftar yang mau dibuat angka atau huruf harus ditulis di dalam tag <ol> dan ditutup dengan tag </ol>

Secara default tag <ol> akan membentuk angka latin dimulai dari angka 1 dan seterusnya, namun dengan menggunakan atribut anda bisa mengubahnya menjadi abjad huruf besar atau kecil dan angka romawi, berikut contoh kode tag <ol> yang di dalamnya ada <li> secara default.



<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat List OL</title>
</head>
<body>
<ol>
 <li>Jurusan RPL</li>
 <li>Jurusan TKJ</li>
 <li>Jurusan TAB</li>
 <li>Jurusan TKR</li>
 <li>Jurusan TBSM</li>
</ol>
</body>
</html>

Hasilnya Seperti dibawah ini
Membuat List (Daftar) di HTML - Belajar HTML Dasar 8


Membuat List Tidak Berarturan/Unordered List <ul>

Unordered list berfungsi untuk menampilkan daftar list dalam bentuk simbol kotak atau lingkaran tergantung atribut yang dipake, tag yang digunakan untuk membuat unordered list yaitu <ul>, semua item daftar yang mau dibuat lingkaran atau kotak harus ditulis di dalam tag <ul> dan ditutup dengan tag </ul>

Secara default tag <ul> akan membentuk simbol lingkaran, namun dengan menggunakan atribut anda bisa mengubahnya kotak atau bentuk lain sesuai atribut yang tersedia, berikut contoh kode tag <ol> yang di dalamnya ada <li> secara default.


<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat List UL</title>
</head>
<body>
<ul>
 <li>Jurusan RPL</li>
 <li>Jurusan TKJ</li>
 <li>Jurusan TAB</li>
 <li>Jurusan TKR</li>
 <li>Jurusan TBSM</li>
</ul>
</body>
</html>

Hasilnya Seperti dibawah ini
Membuat List (Daftar) di HTML - Belajar HTML Dasar 8

Selain membuat list secara default diatas, anda juga bisa membuat list sesuai dengan kemauan anda menggunakan atribut dari <ol> maupun <ul>

Atribut dari tag <ol>

Salah satu atribut dari <ol> yaitu type , dimana type memiliki 5 atribut value untuk <ol> yaitu:
Type = "a" akan menghasilkan output seperti : a, b, c dst.
type = "A" akan menghasilkan output seperti : A, B, C dst.
type = "1" akan menghasilkan output seperti : 1, 2, 3 dst.
type = "i" akan menghasilkan output seperti : i, ii, iii dst.
type = "I" akan menghasilkan output seperti : I, II, III dst.

Contoh Penggunaan atribut type pada tag <ol>


<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat List OL</title>
</head>
<body>
    <ol type="A">
        <li>Jurusan RPL</li>
        <li>Jurusan TKJ</li>
        <li>Jurusan TKR</li>
    </ol>
    <ol type="1">
        <li>Jurusan RPL</li>
        <li>Jurusan TKJ</li>
        <li>Jurusan TKR</li>
    </ol>
</body>
</html>

Hasilnya Seperti dibawah ini:
Membuat List (Daftar) di HTML - Belajar HTML Dasar 8

Atribut dari tag <ul>

Salah satu atribut dari <ul> yaitu type , dimana type memiliki 4 atribut value untuk <ol> yaitu:
Type = "disc" akan menghasilkan bentuk bulatan Hitam.
Type = "circle" akan menghasilkan bentuk lingkaran hitam seperti cincin.
Type = "square" akan menghasilkan bentuk bulatan kotak.
Type = "none" tidak akan menghasilkan bentuk apapun atau kosong.

Contoh Penggunaan atribut type pada tag <ul>
<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat List UL</title>
</head>
<body>
    <ul type="disc">
        <li>Jurusan RPL</li>
        <li>Jurusan TKJ</li>
        <li>Jurusan TKR</li>
    </ul>
    <ul type="circle">
        <li>Jurusan RPL</li>
        <li>Jurusan TKJ</li>
        <li>Jurusan TKR</li>
    </ul>
</body>
</html>

Hasilnya Seperti dibawah ini:
Membuat List (Daftar) di HTML - Belajar HTML Dasar 8

Setelah mempraktekkan contoh-contoh list dan segala atributnya diatas, silahkan gunakan tag yang cocok pada tempatnya sesuai dengan kebutuhan dan model web html yang ingin anda buat. Ingat segala tag yang kita pelajari hari ini harus di tulis di antar tag <body> hingga </body>

Demikian sesi berbagi ilmu tentang tag list atau daftar pada web. Jika ada hal yang tidak dimengerti silahkan bertanya di kolom komentar, dan kita sharing sampai sama-sama mengerti. Jangan lupa baca artikel lain tentang Belajar HTML lainnya

Posting Komentar

Halo Cari Apaki? Ketikmi