Selasa, 28 Maret 2017

Belajar HTML dan CSS Bagian 7 : Membuat list Pada HTML

Membuat list Pada HTML

Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSS Bagian 6. Bagi sahabat lupacode yang baru saja bergabung atau nyasar ke halaman ini, silahkan pelajari terlebih dahulu dari artikel yang pertama agar sahabat paham dan mengerti maksud dari artikel yang akan saya bahas kali ini. Sahabat semua dapat melihat seluruh isi artikel pada blog ini di halaman Daftar isi

lupacode - Belajar HTML dan CSS Bagian 7

      Pada kesempatan kali saya akan membahas mengenai pembuatan list pada <html> untuk membuat list pada html terdapat tiga buah tag. Pertama ada tag <ol> </ol> ol itu adalah ordered list yaitu untuk membuat list terurut, lalu yang kedua ada tag <ul> </ul> ul itu adalah unordereded list yaitu untuk membuat list tidak terurut, dan yang terakhir adalaha <dl> </dl> dl itu definiton list untuk membuat daftar terminologi dan definisi.

Sekarang kita bahas semuanya satu persatu :

Ordered list <ol> </ol>

        Seperti biasa langkah pertama saya buat file html dengan nama list.html yang berada pada folder html yang sebelumnya telah saya buat. Saya akan coba ketikan terlebih dahulu struktur htmlnya dan sebagai contoh saya akan mencoba membuat Ordered list atau list terurt dengan tag <ol> </ol> sehingga strukturnya menjadi seperti ini

<!DOCTYPE html>
<html>
<head>
            <title>List HTML</title>
</head>
<body>

            <h3>Ini adalah list terurut</h3>
            <ol>
                        <li>Bangun pagi</li>
                        <li>Sarapan dulu</li>
                        <li>Lalu tidur lagi</li>
            </ol>

</body>


</html>

     List terurut ini atau ol terbuat dengan memperhatikan urutan dari item yang ada di dalamnya. Di dalam tag ol struktur listnya seperti ini, dan Kita dapat membuat itemnya sebanyak mungkin

<ol>
<li>item 1</li>
<li>item 2</li>
 ....
</ol>
                        
kita akan mencoba melihat terlebih dahulu hasilnya, ya seperti ini hasilnya :

lupacode - hyperlink pada html
       Defaultnya kalau kita menggunakan <ol> urutannya berbentuk angka, 1, 2 dan seterusnya. Kalau kita ingin merubah urutan ini misalkan menggunakan huruf a, b, c kita dapat menggunakan atribut type=” “

<ol type=""></ol>
            1
            A
            a
            I
            i

    Defaultnya adalah type nya 1. Jika kita ingin menggunakan huruf A, a, I, i kita tinggal memasukannya saja ke dalam type tersebut, contohnya seperti ini <ol type=”A”> atau seperti ini <ol type=”i”> terserah sahabat saja disesuaikan dengan kebutuhan.


Unordered list <ul> </ul>

      Unordered list merupakan list yang tidak berurutan. Dimana tag nya adalah <ul> dan di dalam nya kita bisa simpan <li> seperti berikut

<ul>
            <li>item 1</li>
            <li>item 2</li>
</ul>

Jika menggunakan ul list itemnya itu urutannya tidak berpengaruh, misalnya saya membuat list satu lagi seperti ini

<h3>Makanan sarapan pagi</h3>
            <ul>
                        <li>Nasi goreng</li>
                        <li>Mie goreng</li>
                        <li>Telur ceplok</li>
            </ul>
            
Hasilnya adalah seperti ini :

lupacode - hyperlink pada html
  Secara default html menampilkannya menggunakan titik atau bullets, jika kalian ingin menggunakan yang lain, html mempunyai 3 buah type yaitu :

<ul type=""> </ul>
Disc
Square
Circle

Definition list <dl> </dl>

       Pada definition list, disini agak berbeda dari dua list sebelumnya yaitu digunakan untuk membuat terminologi atau deskripsi dan di isinya secara bersamaan, seperti ini

<dl>
            <dt>term 1</dt>
            <dd>description 1</dd>
            <dt>term 2</dt>
            <dd>description 2</dd>
</dl>

        Yang pertama kita bungkus dengan dl atau definition listnya atau daftar definisi. Lalu didalamnya ada dua buah tag yang harus kita tulis, yang pertama <dt> atau terminologinya apa, lalu di bawahnya <dd> deskripsinya apa, saya buatkan contohnya seperti ini :

<h3>Pemrograman Web 1</h3>
<dl>
            <dt>HTML</dt>
            <dd>Hypertext markup languange</dd>
            <dt>CSS</dt>
            <dd>Cascading style sheet</dd>
</dl>

    Jadi itu adalah tiga buah list yang dimiliki oleh html, silahkan dicoba-coba dan bereksperiman dengan mengganti type-typenya, walaupun type ini bisa kalian ubah juga menggunakan cssnya. Saya rasa cukup sampai disini dulu untuk materi Belajar HTML dan CSS Bagian 7 yaitu Tentang Membuat list Pada HTML. Selanjutnya kita masuk ke dalam materi Belajar HTML dan CSS Bagian 8

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon