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> .
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 :
outpunya akan menjadi seperti ini :
outpunya akan menjadi seperti ini :
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.
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 :
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 :
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 Bijak.
- No link, S@ara, P#rn, etc.
- Jadilah Orang Cerdas agar anda Cerdas .wkwkwkw.
EmoticonEmoticon