Salah satu penulisan yang sering digunakan dalam sebuah web adalah penulisan daftar atau list. Sepertin menulis daftar klasemen pemuncak motogp terbaru misalnya.
- Marc Marquez
- Valentino Rossi
- Dani Pedrossa
Pembuatan penomoran tersebut yang akan dibahas pada catatan ini. Sebelumnya perlu diketahui bahwa tipe list tersebut ada yang menggunakan penomoran /abjad disebut ordered list (daftar terurut). satu lagi dikenal dengan istilah unordered list (daftar penomoran tak terurut) contohnya dengan menggunakan bullet dan simbol lainnya.
Cara Membuat Numbered List dalam HTML
Cara Membuat Numbered List dalam HTML
Untuk menampilkan daftar yang terurut dengan menggunakan angka pada HTML, bisa digunakan tag pembuka <ol>. Lalu untuk masing masing item di awali dengan tag <li> dan ditutup </li>. ol sendiri adlalah singkatan dari orderet-list. dan li adalah singkatan dari list. Sebagai contoh bisa dicompile script dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Membuat Numbered dan Bullet dalam HTML </title>
</head>
<body>
<h1>Klasemen MOTOGP Terbaru</h1>
<ol>
<li>Marc Marques</li>
<li>Valentino Rossi</li>
<li>Dani Pedrosa</li>
<li>Lorenzo</li>
<li>Davioso</li>
</ol>
</body>
</html>
 |
| Hasil Membuat Numbered List |
Perhatikan bagian pembuka <ol> dan penutup </ol> yang diberi warna biru. Ini menyatakan bahwa semua yang ada dalam tag tersebut adalah sebuah list. Masing masing list (yang diwarnai merah) ditandai dengan tag pembuka <li> dan penutup </li>.
Cara Membuat Bullet List (Unordered List) pada HTML
Untuk membuat unordered list caranya sama saja dengan ordered list. Bedanya, untuk tampilan dengan bullet, digunakan tag pembuka <ul> dan penutup </ul>. ul ini adalah singkatan dari unordered list. Sementara untuk daftar item tetap mengunakan tag <li>. Sebagai contoh ambil script di atas untuk di compile.
<!DOCTYPE html>
<html>
<head>
<title> Membuat Numbered dan Bullet dalam HTML </title>
</head>
<body>
<h1>Klasemen MOTOGP Terbaru</h1>
<ul>
<li>Marc Marques</li>
<li>Valentino Rossi</li>
<li>Dani Pedrosa</li>
<li>Lorenzo</li>
<li>Davioso</li>
</ul>
</body>
</html>
Jika dicompile maka untuk nama Marc Marquez akan diberikan bukan nomor. Melainkn berupa bullet. Jika dibandingkan dengan bentuk dengan menggunakan nomor hanya berbeda pada bagian yang berwarna biru saja.
Bentuk lain pemakaian list ini adalah dalam pembuatan menu bar bagian atas seperti di blogini ada menu disclaimer, sitemap. Atau Navigasi " javascript, html" dan lain lain. Pembuatan menu tersebut list seperti ini akan dikombinasikan dengan CSS. Lebih lanjut akan dibahas pada tutorial CSS.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment