List HTML
Sekedar mengingatkan saja bahwa pada postingan sebelumnya di blog im.grandong membahas tentang Link HTM, dan kali ini im.grandong akan membahas tentang List HTML. Sebelum saya melanjutkan postingan ini, terlebih dahulu saya akan memberikan dukungan untuk artikel yang berjudul Hosting Murah Indonesia Indositehost.com.
List merupakan bentuk yang umum yang bisa kita gunakan untuk menguraikan daftara sesuatu, misalnya jenis-jenis list dalam HTML:
- List dengan nomor
- List tanpa nomor
- List definisi
List dengan nomor adalah model daftar yang setiap itemnya dibri nomor. Pada contoh kalimat di atas merupakan contoh list tanpa menggunakan nomor.
Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang memberi uraian terhadap sesuatu item dalam daftar ? disebut list definisi.
Untuk membuat list tanpa nomor, disebut juga bulleted list:
- Mulai dengan tag pembuka list <ul>
- Memasukkan setiap item list dengan menggunakan tag <li> kemudian tuliskan itemnya (satu saja), tag penutup item </li>, sebenarnya ini tidak harus dituliskan (tetapi sebaiknya dituliskan)
- Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
- Akhiri seluruh list dengan sebuah tag penutup </ul>.
Untuk list dengan nomor, disebut juga ordered list, tag <ul> diubah dengan <ol>, demikian juga </ul> diganti dengan </ol>
Contoh List
Contoh ini mendemonstrasikan list berurut dan tak berurut menggunakan nomor dan menggunakan billet.
<!-coba_list.html?
<html>
<body>
<h4>An Ordered List: </h4>
<ol>
<li>Coffe</i>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An Unordered List:</h4>
<ul>
<li>Coffe</li>
<li>Tea</li>
<li>Milk</li>
</il>
</body>
</html>
Ordered List
Nomor item secara default adalah menggunakan angka 1,2,3,…, dan seterusnya sampai dengan sejumlah item dalam list tersebut.
Untuk keperluan penyajian tentu kita dapat mengubah nomor dalam order list dengan model angka yang lain, dengan mengisi atribut type pada tag <ol>.
Berikut ini adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam order list;
Type I Arti : Ditampilkan dengan angka Romawi huruf besar
Type i Arti : Ditampilkan dengan angka Romawi huruf kecil
Type a Arti : Diubah dengan menggunakan abjad huruf kecil
Type A rti : Diubah dengan menggunakan abjad huruf besar
Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin supaya list dimulai dari nomor 7, maka berikut adalah contoh penggunaannya <ol start=7>…</ol>
Contoh ini mendemonstrasikan berbagai jenis ordered list yang berbeda.
<!- -coba_listordered.html–>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list : </h4>
<ol type=”A”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list : </h4>
<ol type=”a”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type=”I”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list :</h4>
<ol type=”i”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
Unordered List
Unordered list sering disebut sebagai bulleted list, mempunyai bulleted default berupa noktah. Jenis bulet bisa diubah, berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list:
- disk, bentuk noktah tetapi tidak diarsir ditengahnya
- box, bentuk kotak
untuk mengubah jenis bullet dapat didefinisikan pada atribut type pada tag <ul>, berikut adalah contoh untuk mengubah jenis bullet menjadi kotak <ul type=”box>…</u>
Contoh ini mendemonstrasikan berbagai jenis unoredered list.
<!-coba_listunordered.html?
<html>
<body>
<h4>Disc bullets list : </h4>
<ul type=”disc”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list : </h4>
<ul type=”circle”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Orange</li>
<h4>square bullets list : </h4>
<ul type=”square”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Nested List
Bullet dapat digunakan secara bersarang, maksudnya didalam list ada list lagi. Contoh ini mendemonstrasikan bagaimana membuat list yang bersarang (nested list).
<!–coba_listnested.html – - >
<html>
<body>
<h4>A nested List : </h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul>Black tea</li>
<li>Green tea</li>
</ul>
</body>
</html>
Definition List
Contoh ini mendemonstrasikan suatu definition list
<!-coba_listdef.html?
<html>
<body>
<h4>A Definition List : </h4>
<dl>
<dt>Coffee</dt>
<add>Black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
</body>
</html>
Tag Awal <ol> kegunaan sebagai Defines an ordered list
Tag Awal <ul> kegunaan sebagai Defines an unordered list
Tag Awal <li> kegunaan sebagai Defines a list item
Tag Awal <dl> kegunaan sebagai a Defines a definition list
Tag Awal <dt> kegunaan sebagai Defines a definition term
Tag Awal <dd> kegunaan sebagai Defines a definition description
Tag Awal <dir> kegunaan sebagai Deprecated. Use <ul> instead
Tag Awal <menu> kegunaan sebagai Deprecated. Use <ul> instead
Demikian informasi Belajar HTML kali ini dari blog im.grandong tentang List HTML, jika ada kesalahan mohon di betulkan dan sekali lagi dukuangan untuk Hosting Murah Indonsia Indositehost.com.
Hasil Pencarian Google:
contoh html blog (47)pengertian list item (24)atribut type pada tag- adalah
Filed under: HTML · Tags: Belajar HTML, HTML, List HTML
3 Responses to "List HTML"
Leave a Reply
Link
- Blogger Blogspot
- grandong
- Info Kita
- PBI
- Blogger Media
- Kanghari
- Animal World
- Blogger Indonesia
- Pinehas
- Informasi Terbaru 2012
- Products Approvals Specialist
- SEO Leak
- Type Approval Indonesia
- Type Approval
- Pertempuran Hati
- Orangapatiang
- SEO Support
- Yoursmiless
- Xchanger
- Kualatungkalboy
- Blogger Palembang
- Blogger Pesta
-
-
Recent Comments
- gprszone.com on Petunjuk Untuk Menggunakan Tag
"ok i like it…" - iMCS on Petunjuk Untuk Menggunakan Tag
"Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk menguba…" - belajar html on Belajar HTML
"Salam kenal semuanya, saya mau tanya apakah ada yang punya tutorial html berupa …" - INSPIRASIKU on IDwebhost.com Trend Hosting Indonesia
"info yang bermanfaat ke tkp dulu lah :D…" - Davan Cairns on Osama bin Laden boleh mati
"I try and I try and I still don't quite understand it…"
Genial fill someone in on and this fill someone in on helped me alot in my college assignement. Thanks you for your information.
Cool post thanks, definitely consider a follow up post.
Wow! This can be one particular of the most beneficial blogs We’ve ever arrive across on this subject. Basically Great. I am also a specialist in this topic therefore I can understand your hard work.