HTML Perintah Dasar dl Element yang Umum Digunakan di HTML
labkom997 Januari 2020
0 27 2 menit dibaca
Labkom99.com – Kali ini Belajar tentang perintah dasar element dl Pada HTML Yang Sering Digunakan. Element < dl > pada HTML digunakan untuk menjelaskan definisi suatu kata benda. Kata benda biasanya berada pada tingkat pertama atau sebagai Judul. Sedangkan pada tingkat kedua adalah ditafsirkan sebagai definisi.
Daftar definisi juga disebut daftar kamus karena memiliki format yang sama dengan kamus. Dalam daftar definisi, setiap item memiliki bidang definisi indentasi, seperti kamus yang menerjemahkan teks. Tag HTML yang digunakan adalah , , dan .
Contoh Elemen Perintah Dasar dl
Tag dl digunakan untuk menampilkan item daftar dengan judul dan item konten. Tag dl menyematkan tag dt dan dd, tag dt mewakili judul, dan tag dd mewakili konten. Perintah Elemen Kebijakan dl, dt, dan dd digunakan bersama, bukan secara terpisah
Tag dl, dt, dan dd memiliki efek rendering indentasinya sendiri, tetapi biasanya digunakan untuk mendefinisikan ulang gaya baru dengan CSS untuk memenuhi kebutuhan estetika halaman web secara keseluruhan.
<DL> <dt> ????? </dt> <dd> ????? </dd> <dd> … </dd> <dt> ????? </dt> <dd> · ·· </dd> <dd> ··· </dd> </dl>Perintah Dasar Element Tag digunakan untuk membuat daftar definisi, dan tag Konten dari definisi tag akan dibiarkan rata.
Tag digunakan untuk membuat item level kedua dalam daftar. Tag ini hanya dapat digunakan dalam tag . Saat ditampilkan, konten yang ditentukan oleh tag akan relatif terhadap Konten yang ditentukan oleh tag diindentasi rata kanan.
Artikel terkait
Pelajari HTML Lengkap Untuk Pemula Dengan Contoh Untuk Pelatihan
29 Juni 2022
Keterampilan HTML5 yang Harus Dikuasai Pengembang Web
8 Mei 2021
Baca Juga. Membuat Paragraf Dengan HTML
<html xmlns=”//www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Membuat Daftar Element</title> </head> <body> <p><strong> Informasi rekrutmen perusahaan::</strong> <dl> <dt>Persyaratan:</dt> <dd>Wanita, 158 CM , Berpenampilan menarik.</dd> <dd>Memiliki pengalaman kerja stu tahun. </dd> <dd>Bekelakuan baik.</dd> <dt>Bonafit:</dt> <dd>gaji pokok + komisi + bonus + tunjangan </dd> <dd>asuransi kesehatan </dd> <dd>sistem promosi yang adil </dd> <dd>rumah dinas </dd> </dl><br /> <br /> </body> </html>_Perintah Dasar Elemen Dt dan dd pertama ditempatkan pada tag dl, dan tag dt dan dd berada pada level yang sama di bawah dl. Ini juga berarti bahwa dt tidak dapat ditempatkan di dd, dan dd tidak dapat ditempatkan di dt. Di bawah dl, dt dan dd ada di label yang sama. Label DD atau berapa banyak. Pada saat yang sama harus menambahkan dl untuk menggunakan tag dt atau tag dd saja
Kesimpulan
Kami sebenarnya menggunakan Perintah Dasar Elemen dl dt dd paling banyak di HTML. Biasanya ada judul pertanyaan, dan nomor daftar di bawah judul sederhana (judul kolom + daftar pertanyaan yang sesuai) dan pertanyaannya sesuai dengan pola di atas. Di lingkungan di mana kita dapat menyederhanakan kode HTML dari waktu ke waktu, belajar menggunakan dl dt dd secara fleksibel, memahami dan mengontrol sintaks struktur tag
HTML sudah menyediakan elemen untuk membuat daftar. Ada tiga jenis daftar yang dapat dibuat dalam HTML
- Daftar Berurutan adalah daftar berurut;
- Daftar Unordered adalah daftar unordered;
- dan Keterangan Daftar adalah daftar yang berisi definisi
Mari kita bahas satu per satu…
1. Daftar Terurut dalam HTML
Daftar pesanan dibuat dengan tag <ol>. Kemudian diisi dengan item yang akan dimasukkan dalam daftar. Item dibuat dengan tag <li> (daftar item)
Contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>
Hasil
Daftar di atas diurutkan berdasarkan angka dari <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>0, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>1, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>2, hingga <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>3
Lalu bagaimana jika kita ingin menggunakan huruf seperti <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>_4, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>5, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>6 atau angka romawi seperti <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>7, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>8, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>9?
Mudah
Untuk membuat sesuatu seperti itu, kita dapat menggunakan atribut <!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>0 pada tag <!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>1 dan nilai-nilai berikut dapat diberikan
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>4 untuk alfabet <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>4, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>5, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>6, dan seterusnya;
- <!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>6 untuk alfabet <!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>6, <!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>8, <!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>9, dan seterusnya;
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> </body> </html>0 untuk angka Romawi <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> </body> </html>0, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> </body> </html>2, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> </body> </html>3, dan seterusnya;
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>7 untuk angka romawi <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>7, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>8, <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Ordered List</title> </head> <body> <h1>Buah Favoritku:</h1> <ol> <li>Jeruk</li> <li>Durian</li> <li>Pisang</li> <li>Pepaya</li> <li>Mangga</li> </ol> </body> </html>9, dan seterusnya
Contoh
<!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>
Hasil
2. Daftar Unordered dalam HTML
Unordered list adalah unordered list yang menggunakan simbol pada itemnya. Unordered list dibuat dengan tag <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> </body> </html>8 dan untuk item juga dibuat dengan tag <li>
Contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> </body> </html>
Hasil
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut <!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>0
Berikut adalah nilai yang dapat diberikan untuk atribut <!DOCTYPE html> <html> <head> <title>Ordered List dengan Atribut Type</title> </head> <body> <h3>List dengan type alfabet</h3> <ol type='a'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type alfabet kapital (huruf besar)</h3> <ol type='A'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi</h3> <ol type='i'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> <h3>List dengan type romawi kapital</h3> <ol type='I'> <li>Tutorial List di HTML</li> <li>Tutorial Link di HTML</li> <li>Tutorial Tabel di HTML</li> </ol> </body> </html>0
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul type="square"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> <h1>Framework untuk dipelajari:</h1> <ul type="circle"> <li>Vuejs</li> <li>Svelte</li> <li>Reactjs</li> </ul> <h1>Tools untuk dipelajari:</h1> <ul type="none"> <li>Gulp</li> <li>NPM</li> <li>Js Lint</li> </ul> <h1>Pelajari juga:</h1> <ul type="disc"> <li>JSON</li> <li>XML</li> <li>Markdown</li> </ul> </body> </html>2 untuk simbol persegi;
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul type="square"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> <h1>Framework untuk dipelajari:</h1> <ul type="circle"> <li>Vuejs</li> <li>Svelte</li> <li>Reactjs</li> </ul> <h1>Tools untuk dipelajari:</h1> <ul type="none"> <li>Gulp</li> <li>NPM</li> <li>Js Lint</li> </ul> <h1>Pelajari juga:</h1> <ul type="disc"> <li>JSON</li> <li>XML</li> <li>Markdown</li> </ul> </body> </html>3 (default) untuk simbol lingkaran cakram;
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul type="square"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> <h1>Framework untuk dipelajari:</h1> <ul type="circle"> <li>Vuejs</li> <li>Svelte</li> <li>Reactjs</li> </ul> <h1>Tools untuk dipelajari:</h1> <ul type="none"> <li>Gulp</li> <li>NPM</li> <li>Js Lint</li> </ul> <h1>Pelajari juga:</h1> <ul type="disc"> <li>JSON</li> <li>XML</li> <li>Markdown</li> </ul> </body> </html>4 tidak memakai simbol;
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul type="square"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> <h1>Framework untuk dipelajari:</h1> <ul type="circle"> <li>Vuejs</li> <li>Svelte</li> <li>Reactjs</li> </ul> <h1>Tools untuk dipelajari:</h1> <ul type="none"> <li>Gulp</li> <li>NPM</li> <li>Js Lint</li> </ul> <h1>Pelajari juga:</h1> <ul type="disc"> <li>JSON</li> <li>XML</li> <li>Markdown</li> </ul> </body> </html>5 untuk simbol lingkaran;
Contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul type="square"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> <h1>Framework untuk dipelajari:</h1> <ul type="circle"> <li>Vuejs</li> <li>Svelte</li> <li>Reactjs</li> </ul> <h1>Tools untuk dipelajari:</h1> <ul type="none"> <li>Gulp</li> <li>NPM</li> <li>Js Lint</li> </ul> <h1>Pelajari juga:</h1> <ul type="disc"> <li>JSON</li> <li>XML</li> <li>Markdown</li> </ul> </body> </html>
Hasil
Selain menggunakan type, kita juga bisa menggunakan gambar
Ini dilakukan dengan gaya CSS
Sebagai contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul style="list-style-image: url(//assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> </body> </html>
Hasil
3. Deskripsi Daftar dalam HTML
Description List adalah daftar yang berisi keterangan atau penjelasan tentang sesuatu
Ada tiga tag yang digunakan untuk membuat daftar deskripsi
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul type="square"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> <h1>Framework untuk dipelajari:</h1> <ul type="circle"> <li>Vuejs</li> <li>Svelte</li> <li>Reactjs</li> </ul> <h1>Tools untuk dipelajari:</h1> <ul type="none"> <li>Gulp</li> <li>NPM</li> <li>Js Lint</li> </ul> <h1>Pelajari juga:</h1> <ul type="disc"> <li>JSON</li> <li>XML</li> <li>Markdown</li> </ul> </body> </html>6 (daftar deskripsi) tag untuk memulai daftar deskripsi;
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul type="square"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> <h1>Framework untuk dipelajari:</h1> <ul type="circle"> <li>Vuejs</li> <li>Svelte</li> <li>Reactjs</li> </ul> <h1>Tools untuk dipelajari:</h1> <ul type="none"> <li>Gulp</li> <li>NPM</li> <li>Js Lint</li> </ul> <h1>Pelajari juga:</h1> <ul type="disc"> <li>JSON</li> <li>XML</li> <li>Markdown</li> </ul> </body> </html>7 (istilah deskripsi) tag untuk membuat kata-kata yang akan dijelaskan;
- <!DOCTYPE html> <html lang="en"> <head> <title>Membuat Unordered List</title> </head> <body> <h1>Bahasa Pemrograman untuk dipelajari:</h1> <ul type="square"> <li>Javascript</li> <li>PHP</li> <li>Java</li> <li>Python</li> <li>Kotlin</li> </ul> <h1>Framework untuk dipelajari:</h1> <ul type="circle"> <li>Vuejs</li> <li>Svelte</li> <li>Reactjs</li> </ul> <h1>Tools untuk dipelajari:</h1> <ul type="none"> <li>Gulp</li> <li>NPM</li> <li>Js Lint</li> </ul> <h1>Pelajari juga:</h1> <ul type="disc"> <li>JSON</li> <li>XML</li> <li>Markdown</li> </ul> </body> </html>8 (deskripsi deskripsi) tag untuk membuat penjelasan dari kata tersebut
Format penulisannya seperti ini
Contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Membuat Description List</title> </head> <body> <h1>Daftar istilah:</h1> <dl> <dt>Kopi</dt> <dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd> <dt>Kopi Black Magic</dt> <dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd> <dt>White Coffee</dt> <dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd> <dt>Kopi++</dt> <dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd> </dl> </body> </html>
Hasil
Daftar dalam Daftar (Daftar Bersarang)
Daftar juga dapat dibuat di dalam daftar, misalnya kita ingin menggabungkan daftar berurut dengan daftar tidak berurut