HTML Ordered List atau Daftar Bernomor Urut
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.
Untuk menampilkan daftar barang atau benda beserta nomor urutnya, maka gunakan kode
<ol><li> </li></ol>
<li> </li> digunakan untuk setiap benda yang didaftar.
<ol> </ol> digunakan untuk membungkus kode <li> </li>
Langkah-langkahnya
1. Tulislah perintah berikut
<!DOCTYPE html>
<html>
<body>
</body>
</html>
secara manual di halaman kosong di Google Docs.
2. Tulislah kode paragraf
<p> </p> ke dalam kode <body> </body>
sehingga kode menjadi
<!DOCTYPE html>
<html>
<body>
<p> </p>
</body>
</html>
3. Tulislah kode <ol><li> </li></ol>
ke dalam kode <p> </p>
sehingga kode menjadi
<!DOCTYPE html>
<html>
<body>
<p>
<ol><li> </li></ol>
</p>
</body>
</html>
4. Tulislah tiga benda yang masing-masing dimasukkan ke dalam kode <li> </li>
Misalnya
<li> jeruk </li>
<li> mangga </li>
<li> pisang </li>
sehingga kode menjadi
<!DOCTYPE html>
<html>
<body>
<p>
<ol>
<li> jeruk </li>
<li> mangga </li>
<li> pisang </li>
</ol>
</p>
</body>
</html>
5. Copy-lah seluruh kode tersebut
6. Kemudian beralih ke Blogger.
Bukalah akun Blogger anda.
Pilihlah menu Tampilan HTML (yang berada di sebelah atasnya menu Tampilan Menulis)
Di halaman menu Tampilan HTML inilah kita paste semua kode yang sudah kita copy dari Google Docs.
7. Pilihlah Publikasikan
Maaf, beberapa langkah sudah saya potong karena saya pikir anda sudah menguasai dan hafal langkah-langkah tersebut sehingga tidak perlu semua langkah secara detail ditampilkan di sini untuk selanjutnya.
Kode selengkapnya berikut:
<!DOCTYPE html>
<html>
<body>
<p>
<ol>
<li> jeruk </li>
<li> mangga </li>
<li> pisang </li>
</ol>
</p>
</body>
</html>
Hasil tampilannya sebagai berikut:
1. jeruk
2. mangga
3. pisang
