Belajar membuat list pada html
List adalah salah satu elemen HTML yang berguna untuk menampilkan data secara berurutan. Biasanya <li> ditampilkan bersamaan tag <ul> yang kepanjangan dari Unordered atau <ol> yang kepanjangan dari Ordered. List sendiri ditampilkan secara default dengan bola hitam.
Unordered list
Unordered adalah salah satu elemen HTML kegunaanya membuat daftar yang tidak berurutan. Biasanya ditandai dengan bola hitam secara defaultnya. Cara membuat unordered menggunakan <ul> dan <li>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ul>
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ul>
</body>
</html>
Hasilnya:
- Html
- Css
- Javascript
- Php
Memilih gaya penandaan unordered
| Value | Kegunaanya |
|---|---|
| disc | Menampilkan gaya bola hitam ( default ) |
| circle | Menampilkan gaya bola putih |
| square | Menampilkan gaya kotak |
| none | Menghapus gaya |
Contoh menggunakan disc ( Default ):
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ul style="list-style-type: disc">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ul>
</body>
</html>
Hasil menggunakan disc ( Default ):
- Html
- Css
- Javascript
- Php
Contoh menggunakan circle:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ul style="list-style-type: circle">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ul>
</body>
</html>
Hasil menggunakan circle:
- Html
- Css
- Javascript
- Php
Contoh menggunakan square:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ul style="list-style-type: square">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ul>
</body>
</html>
Hasil menggunakan square:
- Html
- Css
- Javascript
- Php
Contoh menggunakan none:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ul style="list-style-type: circle">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ul>
</body>
</html>
Hasil menggunakan none:
- Html
- Css
- Javascript
- Php
Ordered list
Ordered adalah salah satu elemen HTML kegunaanya membuat daftar yang berurutan. Biasanya ditandai dengan angka secara default. Cara membuat Ordered menggunakan <ol> dan <li>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ol>
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ol>
</body>
</html>
Hasilnya:
- Html
- Css
- Javascript
- Php
Memilih gaya penandaan ordered
| Value | Kegunaanya |
|---|---|
| type=”1″ | Menampilkan gaya dengan angka ( default ) |
| type=”A” | Menampilkan gaya dengan huruf besar |
| type=”a” | Menampilkan gaya dengan huruf kecil |
| type=”I” | Menampilkan gaya dengan huruf romawi besar |
| type=”i” | Menampilkan gaya dengan huruf romawi kecil |
Contoh menggunakan type 1 ( default ):
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ol type="1">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ol>
</body>
</html>
Hasil menggunakan type 1 ( Default ):
- Html
- Css
- Javascript
- Php
Contoh menggunakan type A:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ol type="A">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ol>
</body>
</html>
Hasil menggunakan type A:
- Html
- Css
- Javascript
- Php
Contoh menggunakan type a:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ol type="a">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ol>
</body>
</html>
Hasil menggunakan type a:
- Html
- Css
- Javascript
- Php
Contoh menggunakan type I:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ol type="I">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ol>
</body>
</html>
Hasil menggunakan type I:
- Html
- Css
- Javascript
- Php
Contoh menggunakan type i:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ol type="i">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Php</li>
</ol>
</body>
</html>
Hasil menggunakan type i:
- Html
- Css
- Javascript
- Php
List bersarang
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<ul>
<li>Html</li>
<li>Css
<ul>
<li>Bootstrap</li>
<li>Materialize</li>
<li>Bulma</li>
</ul>
</li>
<li>Javascript</li>
<li>Php</li>
</ul>
</body>
</html>
Hasilnya:
- Html
- Css
- Bootstrap
- Materialize
- Bulma
- Javascript
- Php
Description List
Anda bisa membuat list HTML untuk deskripsi.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<dl>
<dt>Html</dt>
<dd>Html kepanjangan dari Hypertext Markup Language.</dd>
<dt>Css</dt>
<dd>Html kepanjangan dari Cascading Style Sheet.</dd>
</dl>
</body>
</html>
Hasilnya:
- Html
- Html kepanjangan dari Hypertext Markup Language.
- Css
- Html kepanjangan dari Cascading Style Sheet.
Elemen <dl> mendefinisikan sebuah Deskripsi List yang didalamnya terdapat Elemen <dt> dan <dd>.
Elemen <dt> mendefinisikan sebuah Data Term atau Data Title
Elemen <dd> mendefinisikan sebuah Data Deskripsi
| Elemen | Kegunaanya |
|---|---|
| <ul> | Mendefinisikan unordered untuk list |
| <ol> | Mendefinisikan ordered untuk list |
| <li> | Mendefinisikan sebuah list item |
| <dl> | Mendefinisikan deskripsi list |
| <dt> | Mendefinisikan sebuah data title atau data term |
| <dd> | Mendefinisikan sebuah data deskripsi |