Monday, June 14, 2010

Turorial HTML-4 (ateonsoft.com/ayomaju.com)

HTMLSetelah tahu tentang macam-macam Basic HTML Element, yaitu tentang Heading dan paragraf pada tutorial HTML lengkap 3, kita lanjutkan pada basic HTML element yang
lain. Kali ini membahas tentang kode untuk list item, kode yang sering digunakan
dalam kegiatan bloging.

List Item(LI)


List item di gunakan untuk mengelompokkan data baik berurutan
(ordered list) maupun yang tidak berurutan (unordered list). List
item berurutan menggunakan kode <ol></ol> sedangkan list item tidak berurutan
menggunakan kode <ul></ul>. Sedangkan rincian datanya menggunakan kode
<li></li>. Agar lebih jelas seperti dibawah ini:

Ordered List (Numbering)


Macam-macam kode dan atributnya seperti dibawah ini:

TagAtributValueDescription
<ol>typetanpa value
I

i


A

a
angka biasa

upper Roman

lower Roman

uppercase

lowercase
<ol>startnbegin number


Agar lebih jelas silahkan copy kode dibawah ini pada notepad kemudian silahkan disimpan dalam
format HTML.
<code><html>
<head>
<title>Ordered List</title>
</head>
<body>
<P>Shedule for HTML Course</P>
<ol start="1" type="I">
<li>Sunday</li>
<ol type="a">
<li>Introduction to HTML</li>
<li>Creating List</li>
</ol>
<li>Monday</li>
<ol type="A">
<li>Creating table</li>
<li>Inserting Image</li>
</ol>
<li>Tuesday</li>
<ol type="I">
<li>Creating Link</li>
<li>Preparing Website</li>
</ol>
<li>Wednesday</li>
</ol>
</body>
</html></code>

Nah hasil dari kode diatas seperti dibawah ini:
Shedule for HTML Course

  1. Sunday


    1. Introduction to HTML

    2. Creating List


  2. Monday


    1. Creating table

    2. Inserting Image


  3. Tuesday


    1. Creating Link

    2. Preparing Website


  4. Wednesday

Untuk macam kombinasi atau macam atribut silahkan dicoba-coba sendiri. Sebagai referensi sebaiknya simpan tabel diatas.

Untuk unordered list atau list item yang tidak berurutan akan saya bahas di tutorial HTML lengkap 5. Sudah pegal-pegal tangan
ngetiknya. Selamat mencoba. 


feed dari situs: http://www.ateonsoft.com

No comments:

Post a Comment