Belajar Pemrograman Bersama Portal Coding

Belajar berbagai pemrograman secara gratis dan praktis agar cepat mahir.

Mulai Belajar

Mengenal List pada HTML

Tanggal Upload : 2020-04-28 03:14:20

Diupload Oleh : Ageng Prayoga


# html # html dan css

Mengenal List pada HTML

Mengenal List pada HTML

 

Baiklah sabahat portal coding, pada pembahasan kali ini kita akan membahas mengenai list pada html. Apa itu list? Dialam HTML, list sendiri merupakan elemen pada html yang berfungsi menampilkan informasi dalam bentuk list. 

Didalam HTML , list terbagi menjadi 3 macam yakni : 

  1. Ordered List ialah list yang berurutan;
  2. Unordered List ialah list yang tak berurutan;
  3. Description List ialah list yang berisikan definisi di dalamnya.

 

Agar lebih paham silahkan disimak penjelasan dibawah ini.

 

1. Ordered List

Ordered List merupakan list yang berurutan , dimaksud dengan list yang berurutan, list ini ditandai awalan angka ataupun huruf yang terurut. ( misalkan : 1,2,3 ... dst atau a,b,c ... dst ).

list ini dibuat dengan tag <ol /> dan memiliki anak tag berupa <li /> .
Ditulis seperti dibawah ini.


<html>
<head>
<title> Mengenal List pada HTML <title/>
<head/>
<body>
<ol>
<li> <li/>
<ol/>
<body/>
<html/>
Contoh : 

<html>
<head>
<title> Mengenal List pada HTML </title>
<body>
<h3> Nama - Nama Hewan </h3>
<ol>
<li> Ayam </li>
<li> Bebek </li>
<li> Burung </li>
<li> Kucing </li>
<li> Kura-kura </li>
</ol>
</body>
</html>

 

Hasil : 

ordered list

Pada hasil program diatas dapat dilihat bahwa informasi yang disajikan dalam bentuk data yang berurutan. Program tersebut merupakan penerapan dari ordered list. Tag <ol /> merupakan tag ordered list dan di dalamnya terdapat list dengan tag <li /> . Ordered list sendiri merupakan list yang berurutan dibuat dengan tag <ol />. Jadi tag list yang berada di dalam tag ordered list tersebut akan diurutkan karena adanya tag <ol/> tersebut. Ordered List default urutannnya dalam bentuk urutan angka.  

Bagaimana jika kita ingin mengubah urutan menjadi huruf ataupun angka romawi ?

Nah jika kita ingin mengubahnya dalam bentuk urutan lain seperti huruf ataupun angka romawi kita hanya perlu menambahkan atribut  type pada tag <ol />

Seperti contoh dibawah ini :

Contoh : (alphabet)

<html>
<head>
<title> Mengenal List pada HTML </title>
<body>
<h2> Ordered list </h2>
<ol type="a">
<li> Never Surrender </li>
<li> You can do it </li>
<li> Love Yourself </li>
</ol>
<h2> Ordered list </h2>
<ol type="A">
<li> Never Surrender </li>
<li> You can do it </li>
<li> Love Yourself </li>
</ol>
</body>
</html>

Hasil :

alpabet

Contoh : (romawi)

<html>
<head>
<title> Mengenal List pada HTML </title>
<body>
<h2> Ordered list (romawi) </h2>
<ol type="i">
<li> Aku </li>
<li> Kamu </li>
<li> Dia </li>
</ol>
<h2> Ordered list (romawi/kapital) </h2>
<ol type="I">
<li> Aku </li>
<li> Kamu </li>
<li> Dia </li>
</body>
</html>

Hasil : 

romawi

Contoh diatas pembuatan Ordered List dengan penambahan atribut type . Pada contoh pertama dibuat ordered list dengan penambahan type="a" dan type="A" guna untuk menghasilkan list dalam bentuk urutan alphabet. Seperti yang telah dibuat pada contoh tersebut jika kita ingin membuat huruf dalam bentuk kapital kita hanya perlu menuliskannya huruf(alphabet) dalam bentuk kapital di dalam type nya, adapun jika kita ingin membuat nya dalam bentuk angka romawi kita juga hanya perlu mengisi ke dalam type="" berupa angka romawi pula jadi type="i" dan type="I" seperti yang telah dibuat seperti contoh diatas. 

 

2. Unordered List

Unordered list dibuat dengan menggunakan tag <ul /> dan memiliki tag list berupa tag <li /> didalamnya sama seperti Ordered list.

<html>
<head>
<title> Mengenal List pada HTML </title>
</head>
<body>
<ul>
<li></li>
</ul>
</body>
</html>

Contoh : 

<html>
<head>
<title> Mengenal List pada HTML </title>
</head>
<body>
<h2> Bahasa Pemrograman </h2>
<ul>
<li> Java </li>
<li> Python </li>
<li> C++ </li>
<li> Kotlin </li>
<li> HTML </li>
</ul>
</body>
</html>

Hasil : 

unordered list

Pada hasil program diatas dapat dilihat data informasi yang ditampilkan tidak memiliki urutan karena hanya menggunakan sebuah simbol. Tag <ul /> inilah yang membuat list ataupun tag <li /> didalamnya menjadi tidak terurut dan hanya diberi simbol sebelum data yang ditampilkan. Nah , simbol itu juga dapat diganti dengan simbol lainnya dengan menggunakan atribut type. 

contoh : 

<html>
<head>
<title> Mengenal List pad HTML </title>
</head>
<body>
<h2> Bahasa Pemrograman (Circle) </h2>
<ul type="circle">
<li> Java </li>
<li> Python </li>
<li> C++ </li>
<li> Kotlin </li>
<li> HTML </li>
</ul>
<h2> Bahasa Pemrograman (Square) </h2>
<ul type="square">
<li> Java </li>
<li> Python </li>
<li> C++ </li>
<li> Kotlin </li>
<li> HTML </li>
</ul>
</body>
</html>

Hasil : 

ul-shape

Dari hasil contoh program tersebut digunakan penambahan type untuk mengubah simbol sebelum data yang disajikan, di dalam atribut type di isi kan "circle" dan "square" untuk mengubah bentuk simbolnya, selain itu juga dapat diganti dengan "disc" dan "none". Selain itu juga dapat diganti dengan menggunakan gambar, dengan menerapkan style CSS. Penambahan style di dalam tag <ul /> (style CSS inline) ini guna untuk mengganti simbol dengan gambar yang kita inginkan, dengan menggunakan style="list-style-image " url() . Akses gambar bisa secara offline maupun online. Jika secara offline kalian harus memasukan alamat directory file gambarnya dari device yang kalian gunakan. Jika secara online kalian hanya perlu memasukan alamat file gambar dalam bentuk icon kedalam url yang disediakan. Dapat dilihat seperti contoh berikut ini. 

<html>
<head>
<title> Mengenal List pad HTML </title>
</head>
<body>
<h2> Bahasa Pemrograman (Circle) </h2>
<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);">
<li> Java </li>
<li> Python </li>
<li> C++ </li>
<li> Kotlin </li>
<li> HTML </li>
</ul>
</body>
</html>

Hasil :

img list

3. Description List 

Description list merupakan list yang berisikan definisi ataupun penjelasan di dalamnya.  

List ini dibuat dengan menggunakan tag <dl /> , <dt /> , dan <dd />.

<dl />, ialah data list

<dt />, ialah data term

<dd />, ialah data description

<html>
<head>
<title> Mengenal List pada HTML </title>
</head>
<body>
<dl>
<dt> </dt>
<dd> </dd>
</dl>
</body>
</html>

 

Contoh :

<html>
<head>
<title> Mengenal List pada HTML </title>
</head>
<body>
<h2> Desciption List </h2>
<dl>
<dt> HTML </dt>
<dd> Sebuah bahasa pemrograman yang digunakan untuk membuat halaman web </dd>
<dt> Susu </dt>
<dd> Cairan bergizi berwarna putih yang dihasilkan oleh kelenjar susu mamalia </dd>
<dt> Perasaan </dt>
<dd> Pertimbangan Batin(hati) atas sesuatu </dd>
</dl>
</body>

Hasil : 

description list

Dari hasil contoh program di atas data informasi disajikan dalam bentuk Description List. Tag <dl /> merupakan data list. Kemudian di dalam tag <dl /> terdapat dua tag lagi yaitu tag <dt /> dan tag <dd /> . Tag <dt /> merupakan data term ataupun data yang nantinya akan dijelaskan pada tag <dd /> data description.

Baiklah sabahat portal coding, sampai disini dulu untuk pembahasan kali ini sampai jumpa di pembahasan berikutnya. 

Semoga bermanfaat, dan jangan pernah menyerah dalam menggapai sesuatu.

 

Materi Berikutnya

=> Macam - Macam input pada HTML

Advertisement


Tentang Portal Coding

Tentang Portal Coding

Portal Coding adalah situs web yang membahas mengenai berbagai macam bahasa pemrograman baik versi web, desktop maupun mobile secara lengkap.

Portal Coding On Youtube

Ayo subscribe channel Portal Coding di Youtube. Dichannel ini kami menyediakan berbagai tutorial dalam bentuk video. Agar kita lebih mudah belajar pemrograman. Klik disini untuk subscribe.

Subscribe