Assalamu'alaikum poinreaders,
Pada kesempatan kali ini kita akan belajar sebuah materi mengenai HTML, yaitu tentang List tag. List adalah sekumpulan teks yang disusun sedemikian rupa sehingga di dalam sebuah teks tersebut memiliki point-point tersendiri yang tersusun dengan rapi. Untuk lebih jelasnya tentang List tag, yuk simak ulasan berikut...
Pada kesempatan kali ini kita akan belajar sebuah materi mengenai HTML, yaitu tentang List tag. List adalah sekumpulan teks yang disusun sedemikian rupa sehingga di dalam sebuah teks tersebut memiliki point-point tersendiri yang tersusun dengan rapi. Untuk lebih jelasnya tentang List tag, yuk simak ulasan berikut...
Fungsi :
Atribut :
Contoh Penulisan :
2. <ol>
Fungsi :
Atribut :
Contoh Penulisan :
3. <li>
Fungsi :
Atribut :
Contoh Penulisan :
4. <dir>
Fungsi :
Contoh Penulisan :
5. <dl>
Fungsi :
Contoh Penulisan :
6. <dt>
Fungsi :
Contoh Penulisan :
7. <dd>
Fungsi :
Contoh Penulisan :
8. <menu>
Fungsi :
Atribut :
Contoh Penulisan :
9. <menuitem>
Fungsi :
Atribut :
Contoh Penulisan :
Semoga materi yang saya sampaikan tentang HTML dapat dipahami poinreaders. Silakan tulis pertanyaan seputar materi yang telah dibahas pada kolom komentar. jangan lupa follow akun sosial kami agar poinreaders bisa mendapatkan materi terbaru tentang pemrograman.
Mendefinisikan sebuah unordered list (daftar acak).Format Penulisan :
<ul>...</ul>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| type | disc square circle |
optional | Menentukan jenis penanda pada list (daftar). |
<!DOCTYPE HTML>
<html>
<head>
<title>Tag unordered list</title>
</head>
<body>
<h4>Daftar judul buku terlaris 2017:</h4>
<ul>
<li>Buku pintar pemrograman HTML 5</li>
<li>Pemrograman JAVA tingkat lanjut</li>
<li>Belajar praktis algoritma dan pemrograman</li>
</ul>
</body>
</html>
2. <ol>
Fungsi :
Mendefinisikan sebuah ordered list (daftar terstruktur).Format Penulisan :
<ol>...</ol>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| reversed | reversed | optional | Menentukan bahwa urutan daftar/list harus turun/dibalik. |
| start | number | optional | Menentukan nilai awal pada sebuah list/daftar. |
| type | 1 A a I i |
optional | Menentukan jenis penanda pada list (daftar). |
<!DOCTYPE HTML>
<html>
<head>
<title>Tag ordered list</title>
</head>
<body>
<h4>Daftar judul buku terlaris 2017:</h4>
<ol>
<li>Buku pintar pemrograman HTML 5</li>
<li>Pemrograman JAVA tingkat lanjut</li>
<li>Belajar praktis algoritma dan pemrograman</li>
</ol>
</body>
</html>
3. <li>
Fungsi :
Mendefinisikan sebuah list item (daftar item).Format Penulisan :
<li>...</li>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| value | number | optional | Menentukan nilai dari list item/daftar item. |
| type | 1 A a I i disc square circle |
optional | Menentukan jenis penanda pada list (daftar). |
<!DOCTYPE HTML>
<html>
<head>
<title>Tag list item</title>
</head>
<body>
<h4>Daftar judul buku terlaris 2017 (menggunakan unordered list):</h4>
<ul>
<li>Buku pintar pemrograman HTML 5</li>
<li>Pemrograman JAVA tingkat lanjut</li>
<li>Belajar praktis algoritma dan pemrograman</li>
</ul>
<h4>Daftar judul buku terlaris 2017 (menggunakan ordered list):</h4>
<ol>
<li>Buku pintar pemrograman HTML 5</li>
<li>Pemrograman JAVA tingkat lanjut</li>
<li>Belajar praktis algoritma dan pemrograman</li>
</ol>
</body>
</html>
4. <dir>
Fungsi :
Mendefinisikan sebuah directory list (daftar direktori).Format Penulisan :
<dir>...</dir>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag directory list</title>
</head>
<body>
<h4>Daftar judul buku terlaris 2017:</h4>
<dir>
<li>Buku pintar pemrograman HTML 5</li>
<li>Pemrograman JAVA tingkat lanjut</li>
<li>Belajar praktis algoritma dan pemrograman</li>
</dir>
</body>
</html>
5. <dl>
Fungsi :
Mendefinisikan sebuah description list (daftar deskripsi).Format Penulisan :
<dl>...</dl>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag description list</title>
</head>
<body>
<h4>Daftar bahasa pemrograman:</h4>
<dl>
<dt>HTML</dt>
<dd>Bahasa pemrograman berbasis web.</dd>
<dt>C</dt>
<dd>Bahasa pemrograman berbasis desktop.</dd>
</dl>
</body>
</html>
6. <dt>
Fungsi :
Mendefinisikan sebuah description term/name (daftar istilah/nama) dalam description list (daftar deskripsi).Format Penulisan :
<dt>...</dt>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag description term</title>
</head>
<body>
<h4>Daftar bahasa pemrograman:</h4>
<dl>
<dt>HTML</dt>
<dd>Bahasa pemrograman berbasis web.</dd>
<dt>C</dt>
<dd>Bahasa pemrograman berbasis desktop.</dd>
</dl>
</body>
</html>
7. <dd>
Fungsi :
Digunakan untuk menjelaskan istilah/nama dalam description list (daftar deskripsi). Di dalam tag <dd> kita dapat menyisipkan sebuah paragraf, gambar, link, list (daftar), dll.Format Penulisan :
<dd>...</dd>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag description describe</title>
</head>
<body>
<h4>Daftar bahasa pemrograman:</h4>
<dl>
<dt>HTML</dt>
<dd>Bahasa pemrograman berbasis web.</dd>
<dt>C</dt>
<dd>Bahasa pemrograman berbasis desktop.</dd>
</dl>
</body>
</html>
8. <menu>
Fungsi :
Digunakan untuk menampilkan daftar / menu perintah. Tag <menu> ini hanya support pada browser firefox saja.Format Penulisan :
<menu>...</menu>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| type | list toolbar context |
wajib | Menentukan jenis menu yang akan ditampilkan. |
<!DOCTYPE HTML>
<html>
<head>
<title>Tag menu</title>
</head>
<body>
<p>Klik kanan pada teks dibawah untuk menampilkan menu konteks!</p>
<span contextmenu="mymenu">
<h1>KLIK KANAN DISINI!</h1>
<menu type="context" id="mymenu">
<menuitem label="Contoh menu konteks 1"></menuitem>
<menu label="Contoh menu konteks 2">
<menuitem label="Menu konteks 2.1"></menuitem>
<menuitem label="Menu konteks 2.2"></menuitem>
</menu>
</menu>
</span>
<p><strong>Note* :</strong><br>
Tag ini hanya support pada browser MOZILA FIREFOX!</p>
</body>
</html>
9. <menuitem>
Fungsi :
Digunakan untuk menampilkan sebuah perintah / item menu di dalam tag <menu>. Tag <menuitem> ini hanya support pada browser firefox saja.Format Penulisan :
<menuitem>...</menuitem>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| checked | checked | optional | Menentukan apakah perintah / item menu harus dicek atau tidak ketika halaman pertama kali dimuat (hanya untuk item menu yang bertipe "radio" atau "checkbox"). |
| default | default | optional | Menandai sebuah perintah / item menu sebagai perintah default. |
| disabled | disabled | optional | Menonaktifkan sebuah perintah / item menu. |
| icon | URL | optional | Menentukan ikon perintah / item menu. |
| label | text | wajib | Menampilkan label pada menu. |
| radiogroup | groupname | optional | Menentukan nama kelompok perintah ketika sebuah perintah / item menu dibuka (hanya untuk item menu yang bertipe "radio"). |
| type | checkbox command radio |
optional | Menentukan jenis perintah / item menu yang akan ditampilkan. |
<!DOCTYPE HTML>
<html>
<head>
<title>Tag menuitem</title>
</head>
<body>
<p>Klik kanan pada teks dibawah untuk menampilkan menu konteks!</p>
<span contextmenu="mymenu">
<h1>KLIK KANAN DISINI!</h1>
<menu type="context" id="mymenu">
<menuitem label="Contoh menu konteks 1"></menuitem>
<menu label="Contoh menu konteks 2">
<menuitem label="Menu konteks 2.1"></menuitem>
<menuitem label="Menu konteks 2.2"></menuitem>
</menu>
</menu>
</span>
<p><strong>Note* :</strong><br>
Tag ini hanya support pada browser MOZILA FIREFOX!</p>
</body>
</html>
Semoga materi yang saya sampaikan tentang HTML dapat dipahami poinreaders. Silakan tulis pertanyaan seputar materi yang telah dibahas pada kolom komentar. jangan lupa follow akun sosial kami agar poinreaders bisa mendapatkan materi terbaru tentang pemrograman.