--------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------

Thursday, November 13, 2008

HTML minggu ke-5

---------------------------------------------------------------------------------


 


 


 


 


 

5

LIST HTML


 


 


 

Tujuan Instruksional :


 


 

  1. Mahasiswa memahami pembuatan unordered list (bulleted) dalam HTML
  2. Mahasiswa memahami pembuatan ordered list (numbered) dalam HTML
  3. Mahasiswa memahami pembuatan definition list dalam HTML


 


 


 


 

List HTML


 

Pada bagian sebelumnya telah dijelaskan sedikit mengenai list, namun pada bagian ini akan dijelaskan secara lebih detil mengenai list dalam HTML.


 

Ada tiga jenis list yang dapat ditampilkan melalui dokumen HTML, yaitu :


 

  1. Unordered list
  2. Ordered list
  3. Definition list


 

Masing-masing akan dijelaskan berikut ini.


 


 

Unordered List


 

  1. Sebuah unordered list adalah list (daftar) dari beberapa item.
  2. Setiap item ditandai dengan tanda bullet (biasanya berupa lngkaran hitam kecil).
  3. Unordered list diawali dengan tag <ul> dan diakhiri dengan tag </ul>.
  4. Setiap item dalam list diawali dengan tag <li>


 

<ul>

<li>Kopi</li>

<li>Teh</li>

</ul>


 

Akan ditampilkan di web browser seperti berikut ini :


 

  • Kopi
  • Teh


 


 

Ordered List


 

  1. Sebuah unordered list adalah juga list (daftar) dari beberapa item.
  2. Setiap item ditandai dengan angka atau nomer.
  3. Unordered list diawali dengan tag <ol> dan diakhiri dengan tag </ol>.
  4. Setiap item dalam list diawali dengan tag <li>


 

<ol>

<li>Kopi</li>

<li>Teh</li>




</ol>


 

Akan ditampilkan di web browser seperti berikut ini :


 

  1. Kopi
  2. Teh


 


 

Definition List


 

  1. Sebuah definition list bukan merupakan list (daftar) dari beberapa item, tapi lebih merupakan list (daftar) istilah dan penjelasan dari istilah tersebut.
  2. Definition list diawali dengan tag <dl> dan diakhiri dengan tag </dl>.


 

  1. Setiap istilah dalam list diawali dengan tag <dt> dan diakhiri dengan tag </dt>.
  2. Setiap penjelasan dalam list diawali dengan tag <dd> dan diakhiri dengan tag </dd>.


 

<dl>

<dt>Kopi</dt>

<dd>Minuman panas pahit</dd>

<dt>Teh</dt>

<dd>Minuman dingin manis</dd>

</dl>


 

Akan ditampilkan di web browser seperti berikut ini :


 

Kopi

Minuman panas pahit

Teh

Minuman dingin manis


 


 


 

8
Latihan 1 : Ordered List


 

  1. Jalankan aplikasi Notepad
  2. Ketik baris perintah berikut ini :


 

<html>

<body>


 

<h4>List dengan angka :</h4>

<ol>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>


 

<h4>List dengan huruf besar :</h4>

<ol type="A">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>


 

<h4>List dengan huruf kecil :</h4>

<ol type="a">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>


 

<h4>List dengan angka romawi besar :</h4>

<ol type="I">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>




 

<h4>List dengan angka romawi kecil :</h4>

<ol type="i">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>


 

</body>

</html>


 

  1. Simpan file di My Document sebagai "coba5-1.html" dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba5-1.html" pada bagian File name, klik tombol Save.
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba5-1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba5-1.html), lalu klik OK.


 




 

&
Penjelasan


 

Contoh latihan di atas mendemonstrasikan bagaimana tag <ol> dapat digunakan untuk menampilkan berbagai variasi list dengan menggunakan angka dan huruf. Hal ini dimungkinkan dengan adanya atribut TYPE. Tanpa atribut TYPE secara default HTML akan menampilkan list dengan menggunakan angka. Tetapi bila diatur TYPE sesuai dengan huruf awal yang diinginkan maka list yang ditampilkan akan bervariasi. Misalnya TYPE=A akan menampilkan list dengan huruf besar, TYPE=i akan menampilkan list dengan angka romawi kecil, dan seterusnya.

List dengan angka :

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

    List dengan huruf besar :

  5. Apples
  6. Bananas
  7. Lemons
  8. Oranges

    List dengan huruf kecil :

  9. Apples
  10. Bananas
  11. Lemons
  12. Oranges

    List dengan angka romawi besar :

  13. Apples
  14. Bananas
  15. Lemons
  16. Oranges

    List dengan angka romawi kecil :

  17. Apples
  18. Bananas
  19. Lemons
  20. Oranges


 

8
Latihan 2 : Unordered List


 

  1. Jalankan aplikasi Notepad


 

  1. Ketik baris perintah berikut ini :


 

<html>

<body>


 

<h4>List dengan lingkaran hitam :</h4>

<ul type="disc">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>


 

<h4>List dengan lingkaran kosong :</h4>

<ul type="circle">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>


 

<h4>List dengan kotak hitam :</h4>

<ul type="square">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>


 

</body>

</html>


 

  1. Simpan file sebagai "coba5-2.html"
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba5-2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba5-2.html), lalu klik OK.


 




 

&
Penjelasan


 

Contoh latihan di atas mendemonstrasikan bagaimana tag <ul> dapat digunakan untuk menampilkan berbagai variasi list dengan menggunakan bullet. Hal ini juga dimungkinkan dengan adanya atribut TYPE. Tanpa atribut TYPE secara default HTML akan menampilkan list dengan menggunakan bullet lingkaran hitam. Tetapi bila diatur TYPE sesuai dengan jenis bullet yang diinginkan maka list yang ditampilkan juga akan bervariasi. Misalnya TYPE=CIRCLE akan menampilkan list dengan lingkaran kosong, TYPE=SQUARE akan menampilkan list dengan bentuk kotak.

List dengan lingkaran hitam :

  • Apples
  • Bananas
  • Lemons
  • Oranges

    List dengan lingkaran kosong :

  • Apples
  • Bananas
  • Lemons
  • Oranges

    List dengan kotak hitam :

  • Apples
  • Bananas
  • Lemons
  • Oranges


 

8
Latihan 3 : List Bersarang


 

  1. Jalankan aplikasi Notepad
  2. Ketik baris perintah berikut ini :


 

<html>

<body>


 

<h4>Contoh list bersarang :</h4>

<ul>

<li>Kopi</li>

<li>Teh

<ul>

<li>The hitam</li>

<li>The hijau</li>

</ul>

</li>

<li>Susu</li>

</ul>


 

<h4>List bersarang 3 level :</h4>

<ul>

<li>Kopi</li>

<li>Teh

<ul>

<li>Teh hitam</li>

<li>Teh hijau

<ul>

<li>Cina</li>

<li>Afrika</li>

</ul>

</li>

</ul>

</li>

<li>Susu</li>

</ul>


 

</body>

</html>


 

  1. Simpan file sebagai "coba5-3.html"
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba5-3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba5-3.html), lalu klik OK.


 


 

&
Penjelasan


 

Contoh latihan di atas mendemonstrasikan bagaimana list dalam HTML dapat dibuat secara bersarang.

Contoh list bersarang :

  • Kopi
  • Teh
    • The hitam
    • The hijau
  • Susu

    List bersarang 3 level :

  • Kopi
  • Teh
    • Teh hitam
    • Teh hijau
      • Cina
      • Afrika
  • Susu

    Pada contoh pertama list bersarang sebanyak 2 level, sedangkan contoh kedua bersarang sebanyak 3 level.


 


 


 


 


 

8
Latihan 4 : Definition List


 

  1. Jalankan aplikasi Notepad
  2. Ketik baris perintah berikut ini :


 

<html>

<body>


 

<h4>Definition List :</h4>

<dl>

<dt>Kopi</dt>

<dd>Minuman panas pahit</dd>

<dt>Teh</dt>

<dd>Minuman dingin manis</dd>

</dl>


 

</body>

</html>


 

  1. Simpan file sebagai "coba5-4.html"
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba5-4.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba5-4.html), lalu klik OK.


 


 

&
Penjelasan


 

Contoh latihan di atas mendemonstrasikan pembuatan definition list yang akan ditampilkan web browser seperti berikut ini :

Definition List :

Kopi

Minuman panas pahit

Teh

Minuman dingin manis


 


 

Contoh sederhana

Menu:

<script type="text/javascript">

var yourName = prompt("Boleh Tahu Namanya?", "Nama Anda");

</script>

<font color=pink><marquee><h1>Selamat Datang di pemilihan ketua kelas online <script type="text/javascript">document.write(yourName)</script>! Suatu kehormatan bagi saya atas kunjungan <script type="text/javascript">document.write(yourName)</script> ini. saya sangat berharap kunjungan <script type="text/javascript">document.write(yourName)</script> berikutnya</h1></marquee>


 


 


 


 


 


 

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>


 


 


 

<body background="source\1_664514659l.jpg">

<table border=1 table width="100%">

<tr>

<td width="10%" rowspan=1><marquee direction=right><img src="source\soniclari.gif"></marquee></td>

<td width="60%"><center><h3><font color=blue>pemilihan ketua kelas online</font color></h3></center></td>

<td width="10%"><marquee height=30 direction=up><font color=orange>5PTI1 <br>created by David wong</font color></marquee>&nbsp;&nbsp;&nbsp;<img src="source\LOGO.JPG"></td>

</tr>

<tr>

<td><a href="form peserta.html">form peserta</a></td>

<td width="100%"rowspan=5 colspan=2><marquee direction=right><font color="red">pilihlah salah satu di antara calon-calon ketua kelas berikut ini</font color></marquee></td>

</tr>

<tr>

<td><a href="info peserta.html">informasi peserta</a></td>

</tr>

<tr>

<td><a href="voting.html">proses voting</a></td>

</tr>

<tr>

<td><a href="info pemenang.html">informasi pemenang</a></td>

</tr>

</table>

<script src='source\snow.js'type='text/javascript'>

</script>

Form:

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>


 

<body bgcolor="black">

<center><font color="red"><h3>FORM PESERTA</h3></center>

<center><form method=post action="">

<table border=1 width="30%">

<tr>

<td><font color="red">Nama</td>

<td><input name="text1"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

<td><font color="red">Nim</td>

<td><input name="text2"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

<td><font color="red">Jurusan</td>

<td><input name="text3"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

<td><font color="red">No Telp</td>

<td><input name="text4"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

<td><font color="red">Alamat</td>

<td><input name="text1"type="text"maxlength="25" size="25"></td>

</tr>

<tr>

<td><font color="red">Gender</td>

<td><input type="radio" name=radio1><font color="red">pria<br>

<input type="radio" name=radio1><font color="red">wanita</input></td>

</tr>

<tr>

<td colspan=2><input type="submit" value="Submit">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Cancel"></td>

</tr>

</center>

<script src='source\snow.js'type='text/javascript'>

</script>

Info:

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>


 

<body background="source\18821167553584l.jpg">

<center><font color=blue>INFO PESERTA

<br>

<table border=1 width="50%">

<tr>

<td width="30%" align="center"><font color=blue>Nim</td>

<td width="30%" align="center"><font color=blue>Nama</td>

<td width="30%" align="center"><font color=blue>Foto</td>

</tr>

<tr>

<td align="center"><font color=blue>111</td>

<td align="center"><font color=blue>hehe</td>

<td align="center"><img src="source\TFR146C.gif"></td>

</tr>

<tr>

<td align="center"><font color=blue>112</td>

<td align="center"><font color=blue>hoho</td>

<td align="center"><img src="source\rambo.gif"></td>

</tr>

</center>

<script src='source\snow.js'type='text/javascript'>

</script>

Voting:

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>


 

<body background="source\30948779641343l.jpg",position="stretch">

<center><font color=YELLOW><h3>voting</h3></center>

<form method=post action="">

<table width= 100% border=1>

<tr>

<th><font color=YELLOW>Choice</th>

<th><font color=YELLOW>Nim</th>

<th><font color=YELLOW>Nama</th>

<th><font color=YELLOW>Foto</th>

</tr>

<td align="center"><input name="opt1" type="radio" value="a"></td>

<td align="center"><font color=YELLOW>111</td>

<td align="center"><font color=YELLOW>hehe</td>

<td align="center"><img src="source\TFR146C.gif"></td>

</tr>

<TR>

<tr>

<td align="center"><input name="opt1" type="radio" value="b"></td>

<td align="center"><font color=YELLOW>112</td>

<td align="center"><font color=YELLOW>hoho</td>

<td align="center"><img src="source\rambo.gif"></td>

</tr>

</table>

</form>

<center><input name="sub" type="submit" value="vote"></center>

<script src='source\snow.js'type='text/javascript'>

</script>

Pemenang:

<script language='JavaScript'> var txt=" .:: my heart, Your home ::. "; var kecepatan=200; var segarkan=null; function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+ txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

<body background="fun\image005.jpg">

<center><font color=blue><h3>informasi pemenang</h3></center>

<form method=post action="">

<table width= 100% border=1>

<tr>

<th><font color=blue>nim</th>

<th><font color=orange>nama</th>

<th><font color=yellow>persentase</th>

</tr>

<td align="center"><font color=green>111</td>

<td align="center"><font color=brown>hehe</td>

<td align="center" bgcolor="blue"width="10%"></td>

</tr>

<tr>

<td align="center"><font color=orange>112</td>

<td align="center"><font color=red>hoho</td>

<td align="center" bgcolor="red"width="10%"></td>

</tr>

<tr>

<td align="center"><font color=orange>000</td>

<td align="center"><font color=orange>abstain</td>

<td align="center" bgcolor="white"width="10%"></td>

</tr>

</table>

<br>

<center><img src="source\poll.JPG"></center>


Posted by setsuna.f.seiei at 6:51 PM  

Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
----------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------