LAPORAN PEMROGAMAN WEB JOB 2 TABLE & LIST

Transkripsi

1 LAPORAN PEMROGAMAN WEB JOB 2 TABLE & LIST Disusun oleh : Nama anda IK 2? NIM anda PROGRAM STUDI TEKNIK INFORMATIKA JURUSAN TEKNIK ELEKTRO POLITEKNIK NEGERI SEMARANG

2 TABLE & LIST I. Tujuan Instruksional Khusus 1. Memahami dan menuliskan tag table pada dokumen HTML. 2. Memahami dan menuliskan tag list pada dokumen HTML. II. Teori Pendahuluan 2.1 Table Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel), width(lebar tabel), height(tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD. <TABLE>.. </TABLE> Atribut : align Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right). bgcolor Mendefinisikan warna latar belakang border Mendefinisikan ukuran garis tepi (border) dalam satuan pixels. cellpadding Mendefinisikan spasi cellspacing Mendefinisikan spasi antara dua cells dalam satuan pixels. width Mendefinisikan ukuran tabel dalam pixels atau persentase. contoh : <TABLE align= center bgcolor= blue border= 2 cellpadding= 5 cellspacing= 2 width= 90% > ELEMEN CAPTION Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top(judul terletak di atas tabel), dan bottom(judul terletak di bawah tabel). Sintaks: <caption align="top" "bottom">... 2

3 </caption> ELEMEN TR (Table Row) Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor. Sintaks: <tr align="left" "center" "right" valign="top" "middle" "bottom" bgcolor="color">... <TR>.. </TR>, untuk menentukan baris (table row) Atribut : align Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right) bgcolor Mendefinisikan warna latar belakang pada baris (rows) valign Mendefinisikan perataan vertikal pada isi dari rows, yaitu perataan top, middle atau bottom. Contoh : <TR align= right bgcolor= red valign=top> ELEMEN TH (Table Header) dan TD (Table Data) Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan Sintaks: <th align="left" "center" "right" 3

4 valign="top" "middle" "bottom" bgcolor="color" colspan="number" rowspan="number">... </th> <td align="left" "center" "right" valign="top" "middle" "bottom" bgcolor="color" colspan="number" rowspan="number">... </td> <TD> </TD>, untuk menampilkan data pada setiap sel tabel (table data) Atribut : align Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right). background Meletakkan image pada latar belakang tabel. bgcolor Mendefinisikan warna latar belakang colspan - height Mendefinisikan tinggi cells dalam pixels nowrap - rowspan - valign Perataan vertikal yaitu perataan pada top, middle atau bottom. width Mendefinisikan ukuran tabel dalam pixels atau persentase. Contoh : <TD align= right background= back.gif bgcolor= green colspan= 3 height= 200 nowrap rowspan= 2 valign= bottom width= 300 > Struktur tag ini adalah sebagai berikut : <TABLE> <TR> <TD> data baris 1 kolom 1 </TD> <TD> data baris 1 kolom 2 </TD> </TR> <TR> <TD> data baris 2 kolom 1 </TD> <TD> data baris 2 kolom 2 </TD> </TR> </TABLE> 4

5 data baris 1 kolom 1 data baris 1 kolom 2 data baris 2 kolom 1 data baris 2 kolom List Memo Hari Ini Yang harus dilakukan : Bayar tagihan listrik Nganterin Ayah ke bandara Beli lampu neon buat di taman Ambil cucian di laundry Nelpon Mirza Diatas adalah contoh dari daftar atau list yang dapat dibuat di HTML. List tersebut dapat dibuat dengan mudah menggunakan tag yang sesuai yaitu tag <ul>, <ol>, dan <li>. Dalam membuat suatu list maka sebaiknya dipikirkan terlebih dahulu, apakah list yang akan dibuat itu harus berurutan atau tidak. Jika jawabannya adalah berurutan maka sebaiknya memakai tag <ol>, namun apabila list yang akan dibuat tidak harus berurutan seperti contoh diatas maka sebaiknya memakai tag <ul>. Tag <li> digunakan untuk membuat detail dari list tersebut. Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. List yang ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail. Lihat contoh dibawah ini: Memo Hari Ini Yang harus dilakukan : 1. Nelpon Mirza 2. Bayar tagihan listrik 3. Ambil cucian di laundry 4. Nganterin Ayah ke bandara 5. Beli lampu neon buat di taman Contoh diatas adalah versi berurutan dari memo yang ditulis pada contoh sebelumnya. Perhatikan bahwa sekarang list yang ada menggunakan nomor urut untuk menentukan prioritas yang harus dikerjakan. Nomor urut ini tampil karena ia menggunakan tag <ol>. Inilah perintah HTML untuk menampilkan list tersebut. <ol> <li>nelpon Mirza</li> <li>bayar tagihan listrik</li> <li>ambil cucian di laundry</li> <li>nganterin Ayah ke bandara</li> <li>beli lampu neon buat di taman</li> </ol> 5

6 Dapat dilihat disini penggunaan <ol> dan <li>, dimana <ol> digunakan untuk memberi petunjuk kepada browser bahwa list yang ditampilkan harus menggunakan nomor urut, dan <li> digunakan untuk membuat detail dari list. Contoh penggunaan Unordered List, atau list secara tidak berurut, persis seperti pada contoh pertama. Perintahnya sama dengan Ordered List namun tag <ol> diganti dengan <ul>. Lihat contoh berikut: <ul> <li>bayar tagihan listrik</li> <li>nganterin Ayah ke bandara</li> <li>beli lampu neon buat di taman</li> <li>ambil cucian di laundry</li> <li>nelpon Mirza</li> </ul> Ada satu lagi jenis list dalam HTML namun pemakaiannya sangat jarang sekali di luar sana. List itu adalah Definition List. List ini digunakan untuk menampilkan suatu daftar istilahistilah berikut penjelasannya. Contohnya adalah seperti ini: Obeng Perkakas yang digunakan untuk memutar suatu skrup Stop Kontak Suatu panel yang digunakan sebagai sumber listrik Mur Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya Baut Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya Perhatikan bahwa tiap istilah berada di sebelah kiri dan penjelasannya berada di bawahnya dengan agak menjorok ke kanan. Inilah yang disebut dengan Definition List. Untuk membuatnya akan dibutuhkan, <dl> untuk membuat suatu Definition List <dt> untuk menampilkan suatu istilah, kependekan dari Definition Term <dd> untuk menampilkan penjelasan dari istilah sebelumnya, kependekan dari Definition Description Penggunaan dari tag-tag diatas adalah seperti ini: <dl> <dt>obeng</dt> <dd>perkakas yang digunakan untuk memutar suatu skrup</dd> <dt>stop Kontak</dt> <dd>suatu panel yang digunakan sebagai sumber listrik</dd> <dt>mur</dt> <dd>pasangannya baut, digunakan untuk menjepit sesuatu, bagian lakilakinya</dd> <dt>baut</dt> <dd>pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya</dd> </dl> 6

7 III. Peralatan dan Bahan 1. PC Processor minimal Pentium IV, RAM minimal 512 MB 2. Editor Web Notepad atau Edit Plus 3. Browser Mozilla, IE, dll IV. Langkah Kerja/Percobaan 1. Hidupkan computer 2. Buat folder Web1Praktek2 pada direktori : D:\ 3. Buka Edit Plus atau NotePad untuk menuliskan kode program HTML. 4. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 1): Praktek2-1-Table ASTRI <table border="1"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> Gambar 1 Tag Table 5. Simpan dengan nama file: Praktek2-1-Table.html 6. Test hasilnya menggunakan browser. 7. Ambil gambar dari hasil kode program Praktek2-1-Table.html dan masukkan dalam lembar kerja. 8. Ulangilangkahkerja no 1-4 untuk melakukan praktek selanjutnya, namun pada point 4, kode programnya sebagai berikut : 7

8 Praktek2-2-Table & Border Attribute ASTRI <table border="5"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> Gambar 2 Table & Border Attribute 9. Simpan dengan nama file: Praktek2-2-Table&BorderAttribute.html. 10. Test hasilnya menggunakan browser. 11. Ambil gambar dari hasil kode program Praktek2-2- Table&BorderAttribute.html. dan masukkan dalam lembar kerja. 12. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 3): Praktek2-3-Table Headers ASTRI <table border="1"> <th>header 1</th> <th>header 2</th> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> Gambar 3 Headers 13. Simpan dengan nama file: Praktek2-3-Headers.html. 14. Test hasilnya menggunakan browser. 15. Ambil gambar dari hasil kode program Praktek2-3-Headers.html dan masukkan dalam lembar kerja. 16. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 4): 8

9 Praktek2-4-Table Without borders ASTRI <h4>this table has no borders:</h4> <table> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> <h4>and this table has no borders:</h4> <table border="0"> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> Gambar 4 Table Without Borders 17. Simpan dengan nama file: Praktek2-4-TableWithoutBorders.html. 18. Test hasilnya menggunakan browser. 19. Ambil gambar dari hasil kode program Praktek2-4-TableWithoutBorders.html dan masukkan dalam lembarkerja. 20. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 5): 9

10 Praktek2-5-Table Headers ASTRI <h4>table headers:</h4> <table border="1"> <th>name</th> <th>telephone</th> <th>telephone</th> <td>nurul Fajrina Astri</td> <td> </td> <td> </td> <h4>vertical Headers:</h4> <table border="1"> <th>first Name:</th> <th>nurul Fajrina</th> <th>telephone:</th> <td> </td> Gambar 5 Table Headers 21. Simpan dengan nama file: Praktek2-5-TableWithoutHeaders.html. 22. Test hasilnya menggunakan browser. 23. Ambil gambar dari hasil kode program Praktek2-5-TableWithoutHeaders.html dan masukkan dalam lembar kerja. 24. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 6): 10

11 Praktek2-6-Table With a Caption ASTRI <table border="1"> <caption>monthly savings</caption> <th>month</th> <th>savings</th> <td>january</td> <td>$100</td> <td>february</td> <td>$50</td> Gambar 6 Table With a Caption 25. Simpan dengan nama file: Praktek2-6-TableWithaCaption.html. 26. Test hasilnya menggunakan browser. 27. Ambil gambardari hasil kode program Praktek2-6-TableWithaCaption.html dan masukkan dalam lemba rkerja. 28. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 7): 11

12 Praktek2-7-TableCellMoreThanOneRow-Coloumn ASTRI <h4>cell that spans two columns:</h4> <table border="1"> <th>name</th> <th colspan="2">telephone</th> <td>nurul Fajrina Astri</td> <td> </td> <td> </td> <h4>cell that spans two rows:</h4> <table border="1"> <th>first Name:</th> <td>nurul Fajrina</td> <th rowspan="2">telephone:</th> <td> </td> <td> </td> Gambar7 TableMoreThanOneRow-Coloumn 29. Simpan dengan nama file: Praktek2-7-TableMoreThanOneRow- Coloumn.html. 30. Test hasilnya menggunakan browser. 31. Ambil gambar dari hasil kode program Praktek2-7-TableMoreThanOneRow- Coloumn.html dan masukkan dalam lembar kerja. 32. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 8): 12

13 Praktek2-8-Inside a Table ASTRI <table border="1"> <td> <p>this is a paragraph</p> <p>this is another paragraph</p> </td> <td>table cell contains a table: <table border="1"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </td> <td>this cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>hello</td> Gambar 8 Inside a Table 33. Simpan dengan nama file: Praktek2-8-Inside a Table.html. 34. Test hasilnya menggunakan browser. 35. Ambil gambar dari hasil kode program Praktek2-8-Inside a Table.html dan masukkan dalam lembar kerja. 36. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 9): 13

14 Praktek2-9-Cell Padding ASTRI <h4>without cell padding:</h4> <table border="1"> <td>first</td> <h4>with cell padding:</h4> <table border="1" cellpadding="10"> <td>first</td> <td>second</td> Gambar 9 CellPadding 37. Simpan dengan nama file: Praktek2-9-CellPadding.html. 38. Test hasilnya menggunakan browser. 39. Ambil gambar dari hasil kode program Praktek2-9-CellPadding.html dan masukkan dalam lembar kerja. 40. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 10): 14

15 Praktek2-10-Cell Spacing ASTRI <h4>without cell spacing:</h4> <table border="1"> <td>first</td> <td>second</td> <h4>with cell spacing:</h4> <table border="1" cellspacing="10"> <td>first</td> <td>second</td> Gambar 10 CellSpacing 41. Simpan dengan nama file: Praktek2-10-CellSpacing.html. 42. Test hasilnya menggunakan browser. 43. Ambil gambar dari hasil kode program Praktek2-10-CellSpacing.html dan masukkan dalamlembar kerja. 44. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 11): 15

16 Praktek2-11-The Frame Attribute ASTRI <p> <b>note:</b> If you see no frames/borders around the tables below, your browser does not support the "frame" attribute. </p> <h4>with frame="border":</h4> <table frame="border"> <td>first</td> <td>second</td> <h4>with frame="box":</h4> <table frame="box"> <td>first</td> <td>second</td> <h4>with frame="void":</h4> <table frame="void"> <td>first</td> <td>second</td> <h4>with frame="above":</h4> <table frame="above"> <td>first</td> <td>second</td> 16

17 <h4>with frame="below":</h4> <table frame="below"> <td>first</td> <td>second</td> <h4>with frame="horizontal sides":</h4> <table frame="hsides"> <td>first</td> <td>second</td> <h4>with frame="vertical sides":</h4> <table frame="vsides"> <td>first</td> <td>second</td> <h4>with frame="left side":</h4> <table frame="lhs"> <td>first</td> <td>second</td> <h4>with frame="right side":</h4> <table frame="rhs"> <td>first</td> <td>second</td> Gambar 11 TheFrameAttribute 17

18 45. Simpan dengan nama file: Praktek2-11-TheFrameAttribute.html. 46. Test hasilnya menggunakan browser. 47. Ambil gambar dari hasil kode program Praktek2-11-TheFrameAttribute.html dan masukkan dalam lembar kerja. 48. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 12): Praktek2-12-Unordered List ASTRI <ul> <li>coffe</li> <li>milk</li> </ul> Gambar 12 Unordered List 49. Simpan dengan nama file: Praktek2-12-UnorderedList.html. 50. Test hasilnya menggunakan browser. 51. Ambil gambar dari hasil kode program Praktek2-12-UnorderedList.html dan masukkan dalam lembar kerja. 52. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 13): Praktek2-13-Ordered List ASTRI <ol> <li>coffe</li> <li>milk</li> </ol> Gambar 13 Ordered List 53. Simpan dengan nama file: Praktek2-13-OrderedList.html 54. Test hasilnya menggunakan browser. 18

19 55. Ambil gambar dari hasil kode program Praktek2-13-OrderedList.html dan masukkan dalam lembar kerja. 56. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 14): Praktek2-14-Definition List ASTRI <dl> <dt>coffe</dt> <dd>-black hot drink-</dd> <dt>milk</dt> <dd>-white cold drink</dd> </dl> Gambar 14 Definition List 57. Simpan dengan nama file: Praktek2-14-DefinitionList.html. 58. Test hasilnya menggunakan browser. 59. Ambil gambar dari hasil kode program Praktek2-14-DefinitionList.html dan masukkan dalam lembar kerja. 60. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 15): 19

20 Praktek2-15-Different Ordered List ASTRI <h4>numbered List:</h4> <ol> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> <h4>letters List:</h4> <ol type="a"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> <h4>lowercase Letters List:</h4> <ol type="a"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> <h4>roman Numbers List:</h4> <ol type="i"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> <h4>lowercase Roman Numbers List:</h4> <ol type="i"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> Gambar 15 Different Oredered List 61. Simpan dengan nama file: Praktek2-15-DifferentOrderedList.html. 62. Test hasilnya menggunakan browser. 20

21 63. Ambil gambar dari hasil kode program Praktek2-15-DifferentOrderedList.html dan masukkan dalam lembar kerja. 64. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 16): Praktek2-16-Different Unordered List ASTRI <h4>disc bullets list:</h4> <ul type="disc"> <li>apples</li> <li>bananas</li> <li>lmeons</li> <li>oranges</li> </ul> <h4>circle bullets list:</h4> <ul type="circle"> <li>apples</li> <li>bananas</li> <li>lmeons</li> <li>oranges</li> </ul> <h4>square bullets list:</h4> <ul type="square"> <li>apples</li> <li>bananas</li> <li>lmeons</li> <li>oranges</li> </ul> Gambar 16 Different Unordered List 65. Simpan dengan nama file: Praktek2-16- DifferentUnorderedList.html 66. Test hasilnya menggunakan browser. 67. Ambil gambar dari hasil kode program Praktek2-16- DifferentUnorderedList.html dan masukkan dalam lembar kerja. 68. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 17): 21

22 Praktek2-17-Nested List ASTRI <h4>a nested List:</h4> <ul> <li>coffe</li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ul> Gambar 17 Nested List 69. Simpan dengan nama file: Praktek2-17-NestedList.html. 70. Test hasilnya menggunakan browser. 71. Ambil gambar dari hasil kode program Praktek2-17-NestedList.html dan masukkan dalam lembar kerja. 72. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 18): 22

23 Praktek2-18-Nested List2 ASTRI <h4>a nested List:</h4> <ul> <li>coffe</li> <li>tea <ul> <li>black Tea</li> <li>green Tea</li> <ul> <li>china</li> <li>africa</li> </ul> </li> </ul> </li> <li>milk</li> </ul> Gambar 18 Nested List2 73. Simpan dengan nama file: Praktek2-18-NestedList2.html 74. Test hasilnya menggunakan browser. 75. Ambil gambar dari hasil kode program Praktek2-18-NestedList2.html 76. dan masukkan dalam lembar kerja. 77. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 19): 23

24 Praktek2-19-Definition List2 ASTRI <h4>a Definition List:</h4> <dl> <dt>coffe</dt> <dd>black Hot Drink</dd> <dt>milk</dt> <dd>white Cold Drink</dd> </dl> Gambar 19 Definition List2 78. Simpan dengan nama file: Praktek2-19-DefinitionList2.html. 79. Test hasilnya menggunakan browser. 80. Ambil gambar dari hasil kode program Praktek2-19-DefinitionList2.html dan masukkan dalam lembar kerja. 24

25 V. Lembar Kerja No Praktik Hasil Program Komentar 1 Praktek2-1- Table.html 2 Praktek2-2- Table & Border Attribute.html 3 Praktek2-3- Table Headers.html 4 Praktek2-4- Table Without Border.html 5 Praktek2-5- Table Headers.html 6 Praktek2-6- Table With a Caption.html 7 Praktek2-7- Table More Than One Row- Coloumn.html 8 Praktek2-8- Inside a Table.html 9 Praktek2-9- Cell Padding.html 25

26 10 Praktek2-10- Cell Spacing.html VI. Tugas/Pertanyaan Buatlah daftar keluarga anda dilengkapi dengan keterangan nama, tempat tanggal lahir, pekerjaan, status. Berilah warna dan pengaturan lay out data yang sesuai. Contoh tabelnya adalah sebagai berikut: No Tabel 1. Data Keluarga nama anda Data Pribadi Nama Tempat Tanggal Lahir Pekerjaan Status VII. Kesimpulan 26