Order dan Unorder List.

Presentasi berjudul: "Order dan Unorder List."— Transcript presentasi:

1 Order dan Unorder List

2 Order List Tag html : <ol>…..</ol>
Berfungsi sebagai pembuat daftar data dalam html secara berurutan.

3 Contoh Order List <ol> <li> sekarang <li> besok
<li> lusa </ol> Hasilnya : 1. sekarang 2. besok 3. lusa

4 Contoh type dalam Order List
<ol type=“A”> <li> sekarang <li> besok <li> lusa </ol> Hasilnya : A. sekarang B. besok C. lusa

5 Contoh start type dalam Order List
<ol start=5> <li> kamis <li> jum’at <li> sabtu </ol> Hasilnya : 5. kamis 6. jum’at 7. sabtu

6 Unorder List Tag html : <ul>…..</ul>
Berfungsi sebagai pembuat daftar data dalam html yang tidak memperhatikan urutan.

7 Contoh Unorder List <ul> <li> senin <li> selasa
<li> rabu </ul> Hasilnya : senin selasa rabu

8 Contoh type dalam Unorder List
<ul type=square> <li> senin <li> selasa <li> rabu </ul> Hasilnya : senin selasa rabu

9 Contoh type dalam Unorder List
<ul type=circle> <li> senin <li> selasa <li> rabu </ul> Hasilnya : senin selasa rabu

10 Contoh type dalam Unorder List
<ul type=disc> <li> senin <li> selasa <li> rabu </ul> Hasilnya : senin selasa rabu

11 Menu List Untuk membuat daftar item-item pendek tanpa nomor atau tanda item. Biasanya digunakan untuk link

12 Contoh Menu List <menu>
<li> <a href=“file1.html”>file pertama</a> <li> <a href=“file2.html”>file kedua</a> <li> <a href=“file3.html”>file ketiga</a> </menu> Hasilnya file pertama file kedua file ketiga

13 Directory List Seperti menu list
Digunakan untuk daftar item yang pendek, kurang dari 20 karakter. <dir> <li> <a href=“file1.html”>file pertama</a> <li> <a href=“file2.html”>file kedua</a> <li> <a href=“file3.html”>file ketiga</a> </dir> Hasilnya file pertama file kedua file ketiga

14 Definition List Digunakan untuk mendefinisikan atau menjelaskan istilah-istilah. Ada dua definition list (DL) : DT (definition term) DD (definition data)

15 Contoh Definiton List <dl> <dt> html </dt>
<dd> hyper text markup language </dd> </dl> Hasilnya : Html

16 <ol type=“A”> <li> hari ke 1  A. <ol start=1> <li> ahad, senin </li>  1. </ol> <li> hari ke 2 -- B. <ol start=2> <li> selasa, rabu </li>  2. </li>

17 TABEL

18 Bagian-bagian Tabel Tag Table dengan <table>..</table>
Table Row dengan tag <tr>…</tr> Yaitu baris pada suatu tabel. Table Data dengan tag <td>…</td> Yaitu tempat untuk memasukkan informasi dalam suatu tabel

19 Bagian-bagian Tabel (lnjt)
Table Header dengan tag <th>..</th> Adalah judul tabel yang biasanya terletak di bagian paling atas atau paling kiri tabel. Caption dengan tag <caption>…</caption> <caption align=bottom>…</caption> Adalah judul tabel yang terletak di bagian luar suatu tabel, biasanya dibagian atas atau bagian bawah tabel.

20 Atribut-atribut pada tabel
Border Untuk membuat batas tepi tabel. Width Untuk mengatur lebar tabel

21 Atribut-atribut pada tabel (lnjt)
Align Untuk mengatur perataan horizontal data dalam tabel (kiri, tengah, dan kanan) Valign Untuk mengatur perataan vertikal data dalam tabel (kiri, tengah, dan kanan)

22 Atribut-atribut pada tabel (lnjt)
Cellspacing Untuk menentukan jumlah spasi antar sel. Cellpadding Untuk menentukan jumlah spasi yang terdapat diantara border sel dengan isi dalam sel.

23 Atribut-atribut pada tabel (lnjt)
Rowspan Untuk menggabungkan sel-sel dalam baris. Colspan Untuk menggabungkan sel-sel dalam kolom.

24 Atribut-atribut pada tabel (lnjt)
Color Untuk mengatur warna suatu sel. Nowrap Untuk memunculkan isi sel dalam satu baris. Khususnya untuk elemen TH dan TD. Mempunyai sifat berlawanan dengan elemen BR. Penggunaan width tidak akan ada pengaruh.

25 Link

26 Link Internal Memungkinkan user berpindah baris dalam halaman yang sama Contoh : <a name="tengah"> <a href=#bawah> ke bawah</a> data teks, gambar, dsb xxxxxxx </a> <a name=“bawah"> <a href=#tengah> ke tengah</a>

27 Link External Memungkinkan user berpindah halaman yang saling terkait satu dengan yang lain. Pada posisi file satu.html terdapat link : <a href="dua.html">ke file dua</a> Hasilnya : ke file dua

28 External dan Internal Menuju ke halaman dan daerah tertentu. Contoh :
<a href="dua.html#bawah">ke file dua bagian bawah</a>

29 Link External Link untuk masuk ke alamat web :
<a href=" Link untuk masuk ke alamat ftp : <a href="ftp.dinus.ac.id"> Link untuk masuk ke alamat <a href="mail

30 Link External atribut: menuju ke windows baru
<a href= target="_blank"> menuju ke windows baru <a href=" target="_self"> menuju ke windows yang sama

31 Link External atribut: menuju ke windows satu tingkat diatasnya
<a href= target="_parent"> menuju ke windows satu tingkat diatasnya <a href= target="_top"> menuju ke windows yang paling atas