Langkah berikutnya yang akan kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>.
Cara Membuat Daftar/List di HTML
Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.
Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.
Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ol>
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ol>
</body>
</html>
Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.
Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ul>
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ul>
</body>
</html>
Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.
Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas salah satu tag terpenting dari HTML, yakni tag <a> untuk membuat link di HTML .
Terima Kasih.
thx info nya gan
Terima kasih sudah membantu para newbie yg baru belajar seperti saya
gan untuk tutorial session dan cookie belum ada ya, ane butuh banget :(
Iya, belum ada gan… nanti saya lengkapi ya.. :)
Gan Andre terimakasih sudah banyak tulis tutorial di sini. Ane mau tanya Gan, kalau tag Ul dan Li ini mau jadi list horisontal alias tampil mendatar bagaamana ya? Kalau contoh di atas itu kan list nya menurun. Dan inginnya dikasih border sekalian.
Terimakasih juga untuk kunjungannya gan :)
Kalau ingin membuat seperti itu, sudah bagiannya CSS gan, tidak bisa dengan HTML saja. Nanti akan saya lengkapi tutorial CSS di duniailkom untuk membuat list seperti itu (biasanya digunakan untuk menu navigasi).
Bagaimana kalo untuk melanjutkan penomoran? sy coba pake <ol> nomor selalu kembali dari 1. Kalo pake <ul> cuma untuk bullet. Kalo di kasih nomor, indent tidak bisa lurus.
Oh ini sdh nemu.
<ol start="5">
bg..
kami mau tanyak cara buat kode :
4
3
2
1
0
-1
kayak mana??…
Ini untuk pemrograman seperti PHP sis? soalnya kalau di HTML sangat simple, tinggal buat aja tag "4 <br> 3 <br> 2 <br> 1", dst.
Kalau untuk PHP bisa dibaca pada tutorial tentang perulangan FOR.
Gan saya mau tanya gmna caranya membuat nomor kaya gini
A…….
a.
b
c.
d
B…..
a.
b.
C…
Gimana caranya tolong yah..
Itu harus menggunakan atribut type untuk tag <ol> dan list bersarang gan (list di dalam list), penulisan tagnya seperti ini:
<ol type="A">
<li> Judul 1
<ol type="a">
<li>Judul 1.1</li>
<li>Judul 1.2</li>
<li>Judul 1.3</li>
</ol>
</li>
</ol>
terima kasih banyak gan.semoga berkah
Amiin gan…
terima kasih… semoga bermanfaat
Terimakasih kak atas penjelasannya…
ini saya coba bikin list tagnya <p><li>teks<li/><p/> dan hasilnya jadi
1. teks
2.
3.teks
4.
jadi setelah paragraph ada number,lagi padahal gg tak bikin tag ,tp kalo cman <p><li>teks<p/> hasilnya mau bener :D , itu knapa ya?
dah ketemu haha, ternyata salah naruh slash di akhir tag wkwkkw
gan mau tanya cara dibawah ini gimana ya?
semisal:
Nama Lengkap : Nama Saya
Tempat tanggal Lahir : Disini
Jenis Kelamin : ?
NB: Penulisan diatas diletakkan di tengah tengah halaman HTML gan. kalau hanya dipinggir kanan kiri memang mudah tapi kalau ditengah susah gan. solusi?
Terima Kasih
Seluruh element tersebut ditempatkan ke dalam sebuah container, misalkan tag <div>, kemudian tag div ini diberikan property CSS margin: auto, dan diset lebarnya menggunakan property width CSS. Contohnya seperti ini:
<div style="margin: auto; width:500px">
… isi form disini….
</div>
Untuk penjelasan yang lebih lanjut, agan bisa mulai belajar CSS…
Thanks Gan Tutorialnya Sangat Membantu,Tapi Saya Pengen Tanya Kotak Buat Nulis Codingnya Itu Gimana Yah Bikinnya Buat Di Web Saya Gan Buat Tugas
Web ini dibuat pakai WordPress, dan tampilan kode program itu saya menggunakan plugin SyntaxHighlighter: https://wordpress.org/plugins/syntaxhighlighter/
kalau bikin no
3.1
3.2
3.3
gimana ya caranya?
Lumayan susah nih, soalnya di HTML tidak langsung menyediakan penomoran seperti itu. Setidaknya harus pakai CSS dan itupun cukup rumit.
Misalnya bisa lihat kesini: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
mantap gan tutorialnya
Wah Mas terimakasih Saya Masih Belajar Ni saya Mau Ngulas Pelajaran Lama Terimakasih Mas atas postingannya sangat bermanfaat sekali Semoga Sukses
Siip, sama2…
gan coba dong kasih ilmu nya kalo mau buat page kaya di google 1 2 3 4 5 6 7 next
atau mungkin buat dokumen A , B , C , D next
Itu namanya "pagination" dan termasuk materi lanjutan. Agan setidaknya harus paham HTML, CSS, PHP, dan MySQL untuk bisa membuat yang seperti itu. Halaman yang akan ditampilkan harus disimpan ke dalam database MySQL menggunakan PHP. Silahkan di search di google: "tutorial pagination PHP".
bang kalo mau bikin list
1. ———
1.1 ——-
1.2 ——-
Kalau dari HTML saja tidak bisa, mesti menggunakan CSS dan lumayan rumit. Penjelasan lebih lanjut bisa kesini: http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1
Cukup membantu sekali artikelnya terimkasih gan,
Siip, semoga bisa bermanfaat…
Terimakasih Banyak Mas, atas Artikelnya, Penjelasannya bisa sya pahami, karna sebelumnya saya masih bingung dengan Materi seperti ini, Sekarang sudah sedikit paham.
Siip, semoga bisa bermanfaat…
Saya sebagai pemula dalam bahasa html artikel agan sangat baik buat nambah ilmu dalam belajar html saya gan. saya ingin sedikit bertanya kalau seandainya kita kreasikan menambahkan tag <marquee>pada kode li atu ol itu kira-kira kode nya bisa error atau engga ya ga gan soal nya saya ingin sedikit berkreasi tapi ga tau bisa bener atau engga gan
Mohon bimbingan nya buat saya gan.
Silahkan di coba saja…
Btw meskipun menarik, tag <marquee> disarankan untuk tidak digunakan lagi. Tag ini tidak user friendly dan sudah berstatus "usang" (deprecated) di HTML5. Efeknya terlalu "over".
Gan cara menampilkan salah 1 data dari beberapa data dengan cara berurutan bagaimana yah?
Maksudnya seperti apa y? Kalau sudah interaktif seperti itu, biasanya butuh "bantuan" dari bahasa pemrograman lain seperti JavaScript atau PHP.
jada saya mau menampilkan 1 nama dari 5 nama. Nah bagaimana supaya nama itu tampil salah 1 tapi secara berurutan.
gan,, kalo buat list 2 baris gimana? baris kiri dan kanan
Jika listnya pengen dibagi di kiri dan kanan, itu sudah melibatkan CSS. Nanti halaman web dibagi 2 bagian menggunakan tag <div> dan kode CSS, lalu di dalam masing2 tag <div> baru dibuat tag <ol> atau <ul>.
Konsepnya sama seperti cara membuat sidebar yang ada di kiri atau kanan halaman web.
Kak, kalau mau di order list nya di tambahin gambar gimana caranya? Jd setiap list ada gambarnya gitu
Kalau mau nambah gambar di list, harus pakai kode CSS lagi. Biasanya juga pakai font khusus seperti fontawesome.io. Untuk sementara ini tutorial pembuatannya baru tersedia di eBook CSS Uncover Duniailkom.
Nice gan . Terima kasih .. sangat bermanfaat. Sukses terus kedepan nya memberikan informasi informasi yang menguntungkan setiap orang ..
<h1>daftar belanjaan</h1>
<ol>
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ol>
<h1>daftar belanjaan</h1>
<li>deterjen</li>
<li>shampoo</li>
Gan misi ane mau tanya , ane ga pake skrip <ul></ul> berhasil gan buat list yang bulatan apakah ada bedanya?
Web browser modern memang sudah "pandai" dalam menangani kode HTML yang kurang lengkap seperti itu. Bahkan tanpa tag <head> dan <body> juga g masalah.. (tampilannya tetap sama)
Tapi secara struktur ini tidak sempurna dan akan bermasalah jika kode HTML tersebut nantinya digabung dengan CSS atau JavaScript.
maaf gan ane dah nemu masalahnya . hehe hatur nuhun web na
Gan bisa jelasin buat dropdown list ga ?
Silahkan, bisa langsung kesini: https://www.duniailkom.com/tutorial-form-html-fungsi-dan-cara-penggunaan-tag-select-form-html/
Gan sayamau tanya bagaimana menampilkan tag seperti
1)
2)
3)
Bang, mau tanyak. cara merubah jenis fontnya pada penomeran list menggunakan ol gimana ya bang caranya.
Mengenai design tampilan, itu sudah jadi jatahnya CSS.
Kalau ingin mengubah keseluruhan font pada list, bisa menggunakan property font CSS, misalnya: <li style="font-family:Calibri">sabun mandi</li>
Tapi kalau ingin mengubah font pada penonomran saja, caranya agak rumit karena harus menggunakan pseudo selector CSS (menggunakan selector li:before )
Mas saya mau nanya, kalo seumpama kita pingin bisa membuat aplikasi-aplikasi baik online ataupun offline, program komputer apa saja yang harus dipelajari?
Terimakasih atas infonya.
Setiap aplikasi butuh bahasa pemrograman yang spesifik, jadi ini tergantung aplikasi apa yang akan dibuat. Secara umum ada 3 jenis platform: aplikasi desktop, aplikasi website, dan aplikasi mobile (android).
Jika ingin membuat aplikasi desktop, bahasa pemrograman yang bisa dipakai antara lain: Visual Basic atau Delphi. Untuk membuat website, bisa belajar HTML, CSS, PHP, dst. Untuk membuat aplikasi android bisa belajar bahasa Java atau Kotlin serta Android Studio.
kak, bagaimana cara membuat program di notepad++ untuk perulangan for bersarang angka dan huruf?
Pakai bahasa pemrograman apa y? saran dari saya sih coba pelajari dasar2nya secara berurutan. Jika konsepnya sudah dapat, nanti bisa buat sendiri.
Sayang aja kalau tugas seperti ini dikerjakan dengan cara copas / minta bantuan, soalnya masih dasar dan memang sangat penting untuk dipahami.
kak untuk perbedaan <ol> dengan <ul>apa hanya berbeda di bagian penomoran saja kah? atau bagaimana ya kak?
<li> maksutnya kak
Betul, perbedaan antara <ol> dan <ul> hanya dari tampilan nomor saja.
kak gimana caranya agar ketika kita mengklik sebuah kata,itu akan muncul pilihannya (seperti daftar menu ketika diklik akan muncul kebawah beberapa pilihannya)
Itu harus menggunakan JavaScript dan sepertinya cukup rumit. Untuk sekedar mendeteksi sebuah kata di klik, bisa lihat ke sini: https://codepen.io/w3resource/pen/LJvprN dan http://jsfiddle.net/Vap7C/15/
Kak saya kan coba kode
<ol type="A">
<li>Harimau</li>
<li>Buaya</li>
<li>Hiu</li>
</ol>
tapi kok hasilnya tetap
1. Harimau
2. Buaya
3. Hiu
itu masalahnya di mana ya?
Nyobanya di mana ya? kalau di file HTML yang dibuat sendiri seharusnya akan berubah jadi nomor A, B, C. Tapi kalau di test di blogspot atau web yang sudah jadi, kemungkinan akan tertimpa oleh kode CSS bawaan blog.
di web yang sudah jadi sih..
wah berarti masalah pada template yah
gan tanya gimana ya kode untuk menulis puisi? misal paragraf pertama dan ketiga lurus lalu paragraf 2 dan 4 itu menjorok
Kalau berhubungan dengan tampilan, maka harus minta bantuan CSS. Misalnya bisa pakai property padding-left seperti contoh berikut:
<div>Duniailkom</div>
<div style="padding-left:20px">Duniailkom</div>
<div>Duniailkom</div>
<div style="padding-left:20px">Duniailkom</div>
Jika ingin lebih menjorok, bisa diganti angka 20px dengan angka yang lebih besar seperti 30px.
Kak aku punya tugas nih, tugas nya cara membuat Listing HTML untuk output dibawah ini :
Ini WeBSITE Pertamaku
Tolong dibantu ya kak :)
mantapp gan ;) terimakasih
gan hampir sama kyk pertanyaan si jemi yosua
klo mau buat kyk gini misalnya
Nama Lengkap : Nama Saya
Tempat tanggal Lahir : Disini
Jenis Kelamin : ?
Tapi tanda titik dua (:) biar rata lurus semua
Kayak mana buat kyk gitu gan, saya bikin pake spasi2 tapi kadang2 gk rata diliat di mobile
Min bagaimana caranya agar list sejajar dengan pparagraf
Saya masih awam soal kode HTML khusunya untuk mengedit tampilan dan warna template blog, takut coba-coba nanti berantakan jadinya. thenks infonya.
maaf saya mau nanya, semisal menyusun OL alfabet tapi susunannya seperti ini
D. jambu
E. jeruk
F. kelapa
G. durian
gmna ya gan, mohon pencerahannya, terimakasih