TUTORIAL BELAJAR HTML UNTUK PEMULA SECARA OTODIKDAK : CARA MEMBUAT DAFTAR URUT.

Oke sahabat blogger, pada kesempatan ini kita akan belajar tentang bagaimana cara membuat daftar urut pada sebuah postingan artikel atau pada sebuah format halaman website.

Dalam membuat daftar urut pada sebuah postingan artikel kita mengenal setidaknya tiga daftar urut yaitu: Daftar urut beraturan/ordered list, Daftar urut tak beraturan/Unordered list dan campuran.

Perlu saya tekankan, kunci sukses belajar koding pemrograman adalah hindari trik copy paste kode. Hal ini karena terkadang koding tersebut tidak bisa bekerja dengan baik, Sisi buruk copy paste lainnya adalah kita akan lambat dalam memahami arti dari setiap tag koding tersebut. Cara cepat belajar koding pemrograman adalah dengan praktek, praktek dan praktek. Ketik, ketik dan ketik.

Oke kita mulai belajar pelan-pelan yah, chekidot:

1. Daftar Beraturan(Ordered list)

Daftar beraturan digunakan untuk membuat daftar penomoran secara urut 1, 2, 3 dst. Nah daftar beraturan ini memiliki tag pembuka <ol> nama tag ol menjelaskan bahwa data yang berada di bawah tag <ol> tersebut disusun secara Ordered list. Nah untuk setiap daftar pokok yang akan kita beri nomor urut harus di beri list dengan tag <li>, diakhir daftar pokok harus ditutup dengan tag </li>

Praktek: Kita mempunyai makalah dengan daftar isi seperti berikut:

Daftar Isi

  1. Pendahuluan
  2. Pembahasan
  3. Penutup

Nah kalau kita punya daftar seperti itu bagaimana cara membuatnya? Oke buka dulu notepad nya, kita praktekin sama-sama. Selain di notepad kita juga bisa langsung menulisnya di compose blog. Tapi karena kita ini lagi belajar yah lebih mudah pake notepad, karena kita bisa preview hasil praktek kita.

Oke langsung aja kita praktekin ya! Buka notepad anda dan ketikan kode berikut

<b>Daftar Isi</b>
<ol>
<li>Pendahuluan</li>
<li>Pembahasan</li>
<li>penutup</li>
</ol>

 
Sekarang silahkan simpan hasil pekerjaan anda dengan nama : daftarol1.html. Kemudian coba anda buka file tersebut, maka akan muncul tampilan seperti ini di browser:

1.jpg

Itu contoh penulisan daftar berurutan di postingan,lalu bagaimana jika dalam format HTML sebuah website lengkap?. Berikut penulisannya.

<html>
<head>
<title>Contoh form website utuh</title>
</head>
<body>
<b>Daftar Isi</b>
<ol>
<li>Pendahuluan</li>
<li>Pembahasan</li>
<li>penutup</li>
</ol>
</body>
</html>

 
Silahkan anda simpan hasil pekerjaan anda dengan nama: Daftarol2.html. Silahkan coba anda buka file tersebut. Maka akan nampak tampilan seperti ini, sama dengan yang pertama:

1.jpg

Gimana mudah kan?.Ingat ya gan untuk penulisan daftar atau penulisan apapun di form website harus di tulis antara:

<body>
Teks Anda
</body>

 
2. Daftar tak beraturan(Unordered list)

Daftar tak beraturan digunakan untuk membuat daftar tak beraturan. Nah daftar tak beraturan ini memiliki tag pembuka <ul> nama tag ul menjelaskan bahwa data yang berada di bawah tag <ul> tersebut disusun secara Unordered list. Sama halnya dengan tag daftar beraturan, daftar tak beraturan juga diawali dengan tag <li>, diakhir daftar pokok harus ditutup dengan tag </li>

Contoh daftar tak beraturan:

  • Pagi
  • Siang
  • Sore
  • Malam

Yuk buka notepadnya, kita praktek sekarang. silahkan ketik kode dibawah ini di notepad anda:

<ul>
<li>Pagi</li>
<li>Siang</li>
<li>Sore</li>
<li>Malam</li>
</ul>

 
Silahkan simpan kode tersebut dengan nama: daftarul1.html. Sekarang coba anda buka file tersebut, maka dilayar browser anda akan muncul tampilan seperti berikut:

2.jpg

Untuk penulisan di format web lengkap tulis kode berikut ini:

<html>
<head>
<title>Contoh form website utuh</title>
</head>
<body>
<ul>
<li>Pagi</li>
<li>Siang</li>
<li>Sore</li>
<li>Malam</li>
</ul>
</body>
</html>

 
Silahkan simpan kode tersebut dengan nama: daftarul2.html. Sekarang coba anda buka file tersebut, maka dilayar browser anda akan muncul tampilan seperti berikut:

2.jpg

3. Daftar Campuran

Daftar campuran adalah kombinasi antara daftar beraturan dengan daftar tak beraturan. Untuk aturan penulisannya sama seperti diatas.

Contoh daftar campuran:

  1. Pagi
  2. Siang
    • kepasar
    • Makan siang
    • Istirahat
  3. Sore
  4. Malam

Oke sekarang prakteknya ya,silahkan ketik kode berikut di notepad!.

<ol>
<li>Pagi</li>
<li>Siang</li>

<ul>
<li>Kepasar</li>
<li>Makan</li>
<li>Istirahat</li>
</ul>

<li>Sore</li>
<li>Malam</li>
</ol>

 
Silahkan simpan kode tersebut dengan nama: daftarcampur1.html. Sekarang coba anda buka file tersebut, maka dilayar browser anda akan muncul tampilan seperti berikut:

3.jpg

Kode tersebut menjelaskan bahwa ada daftar berurutan <ol>: pagi, siang, sore dan malam, namun di daftar berurutan siang ada daftar tak beraturan<ul> : yaitu kepasar, makan dan istirahat.

Untuk penulisan di format website lengkap penulisan kode HTML nya seperti berikut:

<html>
<head>
<title>Contoh form website utuh</title>
</head>
<ol>
<li>Pagi</li>
<li>Siang</li>

<ul>
<li>Kepasar</li>
<li>Makan</li>
<li>Istirahat</li>
</ul>

<li>Sore</li>
<li>Malam</li>
</ol>
</body>
</html>

 
Hasilnya akan tetap sama seperti pertama, akan muncul tampilan seperti ini di browser anda:

3.jpg

Oke saya kira cukup sekian tutorial tentang cara membuat daftar urut. Maklum kalau ada banyak kekurangan atau penjelasannya kurang jelas karena tutorial ini saya buat melalui handphone. Semoga bermanfaat.

Tutorial terbaru lainnya:

2 Comments
    • feryarya

Tinggalkan Balasan