List merupakan bentuk yang umum atau yang biasa kita gunakan untuk menguraikan daftar sesuatu, misalnya jenis - jenis list dalam HTML ada beberapa yaitu : list dengan nomor, list tanpa nomor, list definisi. Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang memberikan uraian terhadap suatu item dalam daftar atau bisa di sebut dengan list definisi. Pada pembahasan kali ini kita hanya akan menggunakan alat bantu notepad saja. jadi anda diharap tidak menggunakan alat bantu berupa aplikasi dreamwaver, karena apabila anda menggunakan aplikasi tersebut maka anda akan tidak bisa memahami bagaimana scripnya.
++ LIST TANPA NOMOR (BULLETED LIST) ++
- Mulai dengan tag pembuka list <ul>
- Masukkan setiap item list dengan menggunakan tag <li> kemudian anda tuliskan itemnya, tag penutup itemnya adalah </li>,
- Lakukan langkah ke dua untuk membuat list yang banyak.
- Akhiri seluruh list degan sebuah tag penutup </ul>
- Mulai dengan tag pembuka list <ol>
- Masukkan setiap item list dengan menggunakan tag <li> kemudian anda tuliskan itemnya, tag penutup itemnya adalah </li>,
- Lakukan langkah ke dua untuk membuat list yang banyak.
- Akhiri seluruh list degan sebuah tag penutup </ol>
<html>
<body> <h4>An Ordered List : </h4> <ol> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ol> <h4>An Unordered List : </h4> <ul> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ul> </body> </html> |
 |
>> ORDERED LIST <<
Nomor item secara default adalah menggunakan angka {1, 2, 3, 4, 5, 6, ....}sampai sejumlah data yang anda masukkan dalam list tersebut. Namun terkadang kita ingin merubahnya kedalam bentuk yang lain. Misalnya adalag dalam bentuk romawi, abjad dengan huruf besar, dsb. Maka caranya kita tinggal merubah nomor dalam ordered list dengan model angka yang lain, dengan mengisi atribut type. pada tag <ol>.
Berikut ini nilai - nilai yang dapat digunakan untuk mengubah penomorandalam oredered list:
Type
|
Arti
|
I
| Ditampilkan dalam angka romawi huruf besar |
i
| Ditampilkan dalam angka romawi huruf kecil |
a
| Diubah dengan menggunakan abjad huruf kecil |
A
| Diubah dengan menggunakan abjad huruf besar |
<html>
<body> <h4>Numbered List : </h4> <ol> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ol> <h4>Letters List : </h4> <ol type="A"> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ol> <h4>Lowercase Letters List : </h4> <ol type="a"> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ol> <h4>Roman Numbers List : </h4> <ol type="I"> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ol> <h4>Lowercace Roman Numbers List : </h4> <ol type="i"> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ol> </body> </html> |
 |
>> UNORDERED LIST <<
Unordered list sering disebut sebagai bulleted list, mempunyai bulled default berupa noktah. Jenis bullet bisa diubah, berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list:
# disk --> bentuk noktah tetapi tidak diarsir di tengahya
#box --> bentuk kotak
untuk megubah jenis bullet dapat didefinisikan pada attribut type pada tag <ul>, berikut adalah contoh untuk mengubah jenis bullet menjadi kotak <ul type="box"> ... </ul>. Untuk lebih jelasnya silahkan anda mencoba scrip di bawah ini.
| <html> <body> <h4>Disk Bullets List : </h4> <ul type="disc"> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ul> <h4>Circle Bullets List : </h4> <ul type="circle"> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ul> <h4>Square Bullets List : </h4> <ul type="square"> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ul> </body> </html> |
 |
>> NESTED LIST <<
Bullet dapat digunakan secara bersarang, maksutnya adalah di dalam list ada list lagi. Untuk lebih memahami definisi tersebut cobalah script di bawah ini.
| <html> <body> <h4>A Nested List : </h4> <ul> <li>Teknik Komputer Jaringan</li> <li>Teknik Gambar Bangunan</li> <li>Teknik Multimedia</li> <ul> <li>Hipermedia</li> </ul> <li>Teknik Sepeda Motor</li> <li>Teknik Kendaraan Ringan</li> </ul> </body> </html> |
 |
>> DEFINITION LIST <<
| <html> <body> <h4>A Definition dtst : </h4> <dl> <dt>TKJ</dt> <dd>Teknik Komputer Jaringan</dd> <dt>TGB</dt> <dd>Teknik Gambar Bangunan</dd> <dt>TMM</dt> <dd>Teknik Mumtimedia</dd> <dt>TSM</dt> <dd>Teknik Sepeda Motor</dd> <dt>TKR</dt> <dd>Teknik Kendaraan Ringan</dd> </dl> </body> </html> |
 |
Sampai disini materi pembuatan List menggunakan HTML telah selesai, Sampai jumpa pada Panduan berikutnya.
0 comments:
Post a Comment