Cerita Motivasi Blogger

Rabu, 20 Januari 2010

Format Daftar pada HTML

Sering menggunakan Aplikasi pengolah kata Microsoft Word? jika iya tentu tidak asing lagi dengan penggunaan bulleted atau daftar berupa simbol. Nah pada HTML sendiri mendukung tiga jenis daftar. Jenis yang pertama adalah daftar dengan bullet (bulletted list), atau sering disebut unordered list. Yang menggunakan tag <ul> dan <li>,


Sebagai contoh :

<ul>
  <li>list item pertama</li>

  <li>list item kedua</li>

  <li>list item ketiga</li>
</ul>

Catatan bahwa anda perlu mengakhiri daftar dengan tag </ul>, tetapi tag </li> merupakan opsi dan dapat di hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering juga disebut ordered list. Hal tersebut menggunakan tag <ol> dan <li>. Sebagai contoh :

<ol>
  <li>list item pertama</li>

  <li>list item kedua</li>

  <li>list item ketiga</li>
</ol>


Seperti juga bulletted lists, anda perlu mengakhiri daftar dengan tag </ol> , tetapi tag penutup </li> merupakan opsi dan dapat di hiraukan.

Yang ketiga dan yang terakhir adalah daftar definisi. Daftar ini memungkinkan anda untuk membuat daftar suatu hal dan penjelasannya. Daftar ini diawali dengan sebuah tag <dl> dan diakhiri dengan </dl> Tiap hal diawali dengan sebuah tag <dt> dan tiap penjelasannya diawali dengan sebuah tag <dd> . Sebagai contoh :

<dl>
  <dt>hal pertama</dt>
  <dd>penjelasannya</dd>

  <dt>hal kedua</dt>
  <dd>penjelasannya</dd>

  <dt>hal ketiga</dt>
  <dd>penjelasannya</dd>
</dl>

Tag penutup </dt> dan </dd> merupakan opsi dan dapat diabaikan. Perlu dicatat bahwa daftar ini bisa saling disisipkan, satu diantari yang lain. Sebagai contoh :

<ol>
  <li>list item pertama</li>

  <li>
    list item kedua
    <ul>
      <li>list pertama yang disisipkan</li>
      <li>list kedua yang disisipkan</li>
    </ul>
  </li>

  <li>list item ketiga</li>
</ol>

Anda juga dapat menggunakan paragrapf dan heading dsb. untuk daftar hal yang lebih panjang. Semoga Bermanfaat.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 komentar

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Motivasi Blogger
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top