Cara Membuat Menu Daftar/List di HTML dengan (tag li)

Tags

Cara Membuat Menu Daftar/List di HTML - hello sobat, masih dalam pembelajaran tentang html , pada artikel kali ini saya akan mengajarkan tentang penerapan tag - tag daftar seperti tag <li> , <ol> , <ul> , tag - tag ini merupakan tag yang dapat anda pakai sebagai penerapan list dari sub judul anda.

dengan menamahkan tag - tag list maka anda akan mengetahui daftar yang ingin anda buat, dalam betuk penomoran atau bentuk titik - titik. berikut contoh penerapan pada tag - tag <li> , <ol> , <ul> .

Cara Membuat Menu Daftar/List di HTML dengan (tag li)

Penerapan Tag <ol>

sebelum menjelaskan tentang <ol> kita ketahui terlebih dahulu apa itu tag <li>, li merupakan sub judul dari tag daftar diatasnya seperti tag <ol> dan tag <ul> , perbedaan pada tag kedua ini hanya pada penomoran dan titik, jika menggunakan tag <ol> maka anda akan melihat nomor - nomor list dan jika menggunakan tag <ul> maka anda akan melihat titik - titik dari daftar yang anda buat.

berikut ini contoh penerapan daftar tag <ol> :
<!Doctype html>
<html>
<head>
<title>Nama Mahasiswa</title>
</head>
<body>
<h1><center>MAHASISWA TEKNIK INFORMATIKA</center></h1>
<br>
<h2>Berikut ini adalah daftar Nama Mahasiswa</h2>
<ol>
<li>donny</li>
<li>denno</li>
<li>dani</li>
<li>deni</li>
<li>yuni</li>
<li>yani</li>
<li>feri</li>
<li>fera</li>
<li>ferli</li>
<ol>
</body>
</html>

outpunya akan menjadi seperti ini :
Cara Membuat Menu Daftar/List di HTML dengan (tag li)

Penerapan Tag <ul>

untuk contoh selanjutnya, tentang penerapan tag <ul> , seperti yang telah saya terangkan di atas, tag <ul> akan menampilkan list daftar dengan simbol list titik - titik. berikut ini adalah contoh :
<!Doctype html>
<html>
<head>
<title>RESEPWEBSITE</title>
</head>
<body>
<h1><center>MEMBUAT TAHU GOSONG MAKNYOS</center></h1>
<br>
<h2>Berikut Bahan - bahannya</h2>
<ul>
<li>Minyak goreng</li>
<li>Tahu Segar</li>
<li>Sayur Kangkung</li>
<li>TEPUNG TERIGU</li>
</ul>
</body>
</html>

outpunya akan menjadi seperti ini :
Cara Membuat Menu Daftar/List di HTML dengan (tag li)

Penggabungan Penerapan Tag <ul> dan <ol>

contoh penerapan 2 tag <ul> dan<ol>  :
<!Doctype html>
<html>
<head>
<title>RESEPWEBSITE</title>
</head>
<body>
<h1><center>MEMBUAT TAHU GOSONG MAKNYOS</center></h1>
<br>
<h2>Berikut Bahan - bahannya</h2>
<ul>
<li>Minyak goreng</li>
<li>Tahu Segar</li>
<li>Sayur Kangkung</li>
<li>TEPUNG TERIGU</li>
</ul>
<br>
<h2>Berikut Bahan untuk membuat bumbu</h2>
<ol>
<li>Garam secukupnya (banyak juga boleh)</li>
<li>Kecap secukupnya</li>
<li>Rica</li>
<li>Bawang goreng</li>
</ol>
</body>
</html>

outpunya akan menjadi seperti ini : 
Cara Membuat Menu Daftar/List di HTML dengan (tag li)
anda dapat melihat contoh - contoh diatas, dengan mengcopy codenya, dan save kodenya dengan ektensi .Html, buka file tersebut menggunakan browser yang anda gunakan.

dari contoh diatas, merupakan contoh daftar list dengan menggunakan tingkatan 1 daftar, anda dapat membuatnya lebih menjorok kedalam (bersarang) dengan menambahkan output pertama  dan menambahkan tag <ul> dan <li>. tab ini biasa digunakan pada menu categori blog. seperti yang saya pakai pada template blog saya.

untuk pembelajaran HTML selanjutnya dapat anda baca tentang Cara Membuat link di HTML (tag a href), menautkan link pada kode html. demikian posting kali ini semoga bermanfaat.

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon