List
1. Unordered & Ordered List Pada dokumen HTML terdapat dua jenis list, yaitu unordered list (Bullets) dan ordered list (Numbering). Unordered list adalah suatu list yang tidak memperhatikan urutan penomoran sedangkan ordered list adalah list yang memperhatikan urutan penomoran. Untuk membuat suatu unordered list menggunakan tag <ul>...</ul> sedangkan untuk membuat ordered list menggunakan tag <ol>...</ol>. Dan untuk mengisikan item pada list menggunakan tag <li>...</li>.
Contoh : Unordered List Ordered List
<ul> <ol> Contoh : Unordered List Ordered List
<li>Circle</li> <li>Satu</li>
<li>Disc</li> <li>Dua</li>
<li>Square</li> <li>Tiga</li>
</ul> </ol>
Unordered List mempunyai atribut "type" yaitu bentuk dari bullet-nya. Ada beberapan jenis tipe bullet yaitu disc (default) untuk lingkaran tidak berlubang, circle untuk lingkaran berlubang, dan square untuk kotak.
Ordered List juga memiliki atribut "type" untuk menentukan tipe penomorannya. Tipe-tipenya adalah
- 1 untuk penomoran 1, 2, 3,....
- A untuk penomoran A, B, C,....
- I untuk penomoran I, II, III,....
- a untuk penomoran a, b, c,....
- i untuk penomoran i, ii, iii,....
(1, 2, 3,...). Awal penomoran juga dapat ditentukan dengan menambahkan atribut "start" dan tentukan penomoran akan dimulai dengan karakter ke berapa.
Contoh : Penomoran dengan tipe A tetapi ingin dimulai dari karakter C.
<ol type="A" start="3">...</ol>
2. Nested List
Bullet (unordered list) dapat digunakan secara bersarang, maksudnya di dalam list terdapat list lagi. List ini disebut list bersarang (nested list).2. Nested List
Contoh :
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
<li>Milk</li>
</ul>
3. Definition List
Dalam HTML juga dikenal suatu list yang digunakan untuk membuat daftar definisi yang disebut definition list. Penulisannya dibuka dengan tag <dl>, kemudian <dt> diikuti istilah yang akan didefinisikan, lalu <dd> diikuti definisi istilah. Tag-tag tersebut juga mempunyai tag penutup (disesuaikan urutan penulisannya) yaitu </dl>, </dt>, dan </dd>. Contoh :
<dl>
<dt>HTML</dt>
<dt>HTML</dt>
<dd>Dokumen Web</dd>
</dl>
</dl>
Link
Contoh : <body link="#..." vlink="#..." alink="...">
- Link berupa kata / kalimat : <a href="tujuan">nama link</a>
- Link berupa gambar : <a href="tujuan"><img src="gambar"></a>
- "nama file" (Perpindahan antar halaman dalam satu web site).
- "http://URL" (Perpindahan antar halaman dalam web site atau server yang berbeda).
- "#posisi" (Perpindahan posisi dalam halaman yang sama / bookmark).
- "mailto:alamat email" (Berpindah ke email compose dengan alamat yang diberikan).
Contoh :
Pengarah : <a href="#bawah">Ke bawah</a>
Tujuan : <a name="bawah">Bawah</a>
Tampilan Link halaman juga bisa diatur pada posisi tertentu, pada tag <a> ditambahkan atribut "target" diikuti posisi tampilan yang diinginkan yaitu :
- "_balnk" (Link dokumen ke jendela baru)
- "_top" (Link dokumen ke jendela yang sama)
- "_parent" (Link dokumen ke frameset parentnya)
- "_self" (Link dokumen ke frame yang bersangkutan / aktif)
3 komentar:
Terima kasih telah membaca tulisan saya kali ini.
Mudah-mudahan dapat berguna bagi Anda, baik sebagai bahan pembelajaran ataupun sebagai reverensi.
Kritik atau saran dari Anda akan sangat berguna untuk perbaikan kedepannya.
Jika ada, langsung saja tinggalkan komentar Anda disini.
Sekian,
Salam WEB mastah! :)
bos... itu yg hyperlinknya...
yg ke halaman kita sendiri maksudnya gmn???
pengarah sma tujuannya tarok dimana???
masih g ngerti...
boleh tolong lebih detail???
Link di page yg sama tuh buat ngemudahin pindah2 ke bagian tertentu dlm page yang sama. Ya semacam "auto-scroll" lah.
Contoh sederhananya :
Kita beri penanda tujuan name="B" di posisi tertentu, misalnya di posisi paling atas page, lalu link pengarahnya href="#B">Kembali ke B diletakkan sesuai keinginan, misalnya di posisi paling bawah page. Nah, klo link Kembali ke B diklik, maka secara otomatis page akan bergeser kembali ke posisi paling atas (tempat penanda tujuan name="B" diletakkan)
Posting Komentar