HTML LIST

Oke mungkin sebelumnya kalian pada tahu apa itu list, biasanya list itu digunakan untuk mengurutkan suatu data. Nah ternyata di dalam HTML sendiri, ada juga tag untuk list ini.

Ordered List

Nah Ordered List itu bisa sama saja dengan pengurutan data dengan menggunakan nomor. Nah itu fungsi secara default dari Ordered List yaitu dengan nomor, tapi kita bisa merubahnya dengan menggunakan angka romawi, atau huruf.

Berikut adalah contohnya:

Ordered List Default

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ol>

</body>

</html>

Hasilnya:

  1. HTML
  2. CSS
  3. JavaScript
  4. MySQL
  5. Php


Ordered List Huruf Romawi

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<ol type=”A”>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ol>

</body>

</html>

Hasilnya:

  1. HTML
  2. CSS
  3. JavaScript
  4. MySQL
  5. Php

Ordered List Nomor Romawi

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<ol type=”I”>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ol>

</body>

</html>

hasilnya:

  1. HTML
  2. CSS
  3. JavaScript
  4. MySQL
  5. Php

Ordered List Huruf Romawi Kecil

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<ol type=”a”>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ol>

</body>

</html>

hasilnya:

  1. HTML
  2. CSS
  3. JavaScript
  4. MySQL
  5. Php

Ordered List Angka Romawi Kecil

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<ol type=”i”>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ol>

</body>

</html>

hasilnya:

  1. HTML
  2. CSS
  3. JavaScript
  4. MySQL
  5. Php

Unordered List

Nah Unordered List ini bisa dibilang kebalikan dari Ordered List. Dia tidak menampilkan dalam bentuk angka maupun huruf. Tetapi mungkin bentuknya lebih mirip ke bullet.

Berikut ini adalah contohnya:

Unordered List Default

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ul>

</body>

</html>

Hasilnya:

  • HTML
  • CSS
  • JavaScript
  • MySQL
  • Php

Unordered List Disc

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<ul type=”disc”>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ul>

</body>

</html>

Hasilnya:

  • HTML
  • CSS
  • JavaScript
  • MySQL
  • Php

Unordered List Square

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<ul type=”square”>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ul>

</body>

</html>

Hasilnya:

  • HTML
  • CSS
  • JavaScript
  • MySQL
  • Php

Unordered List Circle

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<ul type=”circle”>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>MySQL</li>

</li>Php</li>

</ul>

</body>

</html>

Hasilnya:

  • HTML
  • CSS
  • JavaScript
  • MySQL
  • Php

Definition List

Definition List adalah sebuah daftar item, dengan deskripsi setiap item.

Tag <dl> ini mendefinisikan daftar definisi. Dan tag <dl> sendiri digunakan bersama dengan <dt> (mendefinisikan item dalam daftar) dan <dd> (menjelaskan item dalam daftar):

Ini adalah contohnya:

<html>
<head>
<title>Unordered List</title>
</head>
<body>
<dl>
<dt>Jeruk</dt>
<dd>- Mangga</dd>
<tdt>Manggis</dt>
<dd>- Semangka</dd>
</dl&lt
</body>
</html>

Dan ini dia hasilnya:

Coffee
– black hot drink
Milk
– white cold drink
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s