Gambar dan Tambel
A. Tujuan Praktikum
1. Mahasiswa dapat menampilkan gambar
2. Mahasiswa dapat membuat tabel
B. Dasat Teori
Tag yang digunakan unuk menampilkan image atau animasi gif pada halaman web adalah:
<img src="nama file gambar">
Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right), hspace, vspace, border,
width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai
dengan ukuran aslinya. Untuk mengatur ukuran gambar, menggunakan attribut width dan height.
Attribut align digunakan untuk perataan posisi gambar. Attribut border digunakan untuk memberi
bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika
mouse
berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace dan vspace.
Gambar dapat dipakai sebagai latar belakang di body dengan bentuk:
<body background="namagambar">
Tabel dokumen HTML dipergunakan tag tabel, tabel berikut untuk keperluan menampilkan tabel:
Tabel 4.1 Tag untuk Tabel
Start Tag Kegunaan
<table> Mendefenisikan sebuah table
<th> Mendefenisikan sebuah header table
<td> Mendefenisikan suatu sel dalam table
<caption> Mendefenisikan sebuah caption untuk table
<colgroup> Mendefenisikan sekelompok kolom dalam table
<col> Mendefenisikan nilai attribut untuk satu atau lebih kolom dalam sebuah tabel
<thead> Mendefenisikan sebuah head table
<tbody> Mendefenisikan suatu badan tabel
<tfoot> Mendefenisikan suatu footer table
Berikut contoh skrip-skripnya:
Skrip 4.1 Menampilkan Gambar
1. <html>
2. <head>
3. <title>Percobaan Gambar</title>
4. </head>
5. <body background="floral_background_a1.gif">
6. <center>
7. <b><font color="#cffc0f" size = "9">UNIVERSITAS AHMAD DAHLAN </font>
8. </b> <hr>
9. <marquee direction=right>
10. Fakultas Matematika dan Ilmu Pengetahuan Alam ...</marquee>
11. <hr>
12. <img alt="tux-transparent (1).gif (28k)"
13. src="tux-transparent%20(1). height="100" width="80"
14. align="left">
15. <img alt="bunga.gif (61k)" src="bunga.gif" height="80" width="100"
16. align="right">
17. <img alt="Logo Universitas Ahmad Dahlan" src="UADStandar_BW2.gif"
18. height="250" width="250" align="middle" >
19. </center> </body>
20. </html>
skrip 4.2 Tabel Dua Baris Dua Kolom________________________________________________
1. <html>
2. <hrad>
3. <title>Penggunaan Tabel Biasa</title>
4. </head>
5. <body>
6. <table border="1">
7. <tr>
8. <td>baris 1, kolom 1</td>
9. <td>baris 2, kolom 2</td>
10. </tr>
11. <tr>
12. <td>baris 2, kolom 1</td>
13. <td>baris 2, kolom 2</td>
14. <tr>
15. </table>
16. sumber :
17. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
18. pada-html.php"> Klikbelajar</a>
19. </body>
20. </html>
skrip 4.3. Penggabungan kolom______________________________________________________
1. <html>
2. <head>
3. <title> Penggabungan kolom </title>
4. </head>
5. <body>
6. <table>
7. <tr>
8. <td colspan="2">Ini adalah kolom yang digabungkan</td>
9. </tr>
10. <tr>
11. <td>baris 2, kolom 1</td>
12. <td>baris 2, kolom 2</td>
13. </tr>
14. <tr>
15. <td>baris 3, kolom 1</td>
16. <td>baris 3, kolom 2</td>
17. </tr>
18. </table>
19. sumber:
20. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
21. pada-html.php"> Klikbelajar</a>
22. </body>
23. </html>
skrip 4.4 Penggabungan baris dan kolom____________________________________________
1. <html>
2. <head>
3. <title>Penggabungan baris</title>
4. </head>
5. <body>
6. <table>
7. <tr>
8. <td colspan="2">Ini adalah kolom yang digabungkan</td>
9. </tr>
10. <tr>
11. <td rowspan="2">baris 2, kolom 1</td>
12. <td>baris 2, kolom 2</td>
13. </tr>
14. <tr>
15. <td>baris 3, kolom 2</td>
16. </tr>
17. </table> </body>
18. sumber:
19. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
20. pada-html.php"> Klikbelajar</a>
21. </html>
skrip 4.5. Rancangan Tugas_________________________________________________________
1. <html>
2. <head>
3. <title>Rancangan Tugas</title>
4. </head>
5. <body>
6. <table border="1" width="100%">
7. <tr>
8. <td colspan="4">baris 1 c1 </td><td rowspan="2">baris 1 c5</td></tr>
9. <tr><td>baris 2 c1 </td><td>baris 2 c2 </td><td>baris 2 c3 </td><td>baris 2 c4
10. </td></tr>
11. <tr><td colspan="5">baris 3 c1</td></tr>
12. </table></body>
13. </html>
C.Tugas
1. Ketiklah skrip 4.1 dengan notepad simpan dengan nama prg41.html
2. Doubleklik-lah file:prg41.html amati hasilnya
3. Lakukan yang sama untuk skrip 4.2 sampai 4.5
A. Tujuan Praktikum
1. Mahasiswa dapat menampilkan gambar
2. Mahasiswa dapat membuat tabel
B. Dasat Teori
Tag yang digunakan unuk menampilkan image atau animasi gif pada halaman web adalah:
<img src="nama file gambar">
Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right), hspace, vspace, border,
width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai
dengan ukuran aslinya. Untuk mengatur ukuran gambar, menggunakan attribut width dan height.
Attribut align digunakan untuk perataan posisi gambar. Attribut border digunakan untuk memberi
bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika
mouse
berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace dan vspace.
Gambar dapat dipakai sebagai latar belakang di body dengan bentuk:
<body background="namagambar">
Tabel dokumen HTML dipergunakan tag tabel, tabel berikut untuk keperluan menampilkan tabel:
Tabel 4.1 Tag untuk Tabel
Start Tag Kegunaan
<table> Mendefenisikan sebuah table
<th> Mendefenisikan sebuah header table
<td> Mendefenisikan suatu sel dalam table
<caption> Mendefenisikan sebuah caption untuk table
<colgroup> Mendefenisikan sekelompok kolom dalam table
<col> Mendefenisikan nilai attribut untuk satu atau lebih kolom dalam sebuah tabel
<thead> Mendefenisikan sebuah head table
<tbody> Mendefenisikan suatu badan tabel
<tfoot> Mendefenisikan suatu footer table
Berikut contoh skrip-skripnya:
Skrip 4.1 Menampilkan Gambar
1. <html>
2. <head>
3. <title>Percobaan Gambar</title>
4. </head>
5. <body background="floral_background_a1.gif">
6. <center>
7. <b><font color="#cffc0f" size = "9">UNIVERSITAS AHMAD DAHLAN </font>
8. </b> <hr>
9. <marquee direction=right>
10. Fakultas Matematika dan Ilmu Pengetahuan Alam ...</marquee>
11. <hr>
12. <img alt="tux-transparent (1).gif (28k)"
13. src="tux-transparent%20(1). height="100" width="80"
14. align="left">
15. <img alt="bunga.gif (61k)" src="bunga.gif" height="80" width="100"
16. align="right">
17. <img alt="Logo Universitas Ahmad Dahlan" src="UADStandar_BW2.gif"
18. height="250" width="250" align="middle" >
19. </center> </body>
20. </html>
skrip 4.2 Tabel Dua Baris Dua Kolom________________________________________________
1. <html>
2. <hrad>
3. <title>Penggunaan Tabel Biasa</title>
4. </head>
5. <body>
6. <table border="1">
7. <tr>
8. <td>baris 1, kolom 1</td>
9. <td>baris 2, kolom 2</td>
10. </tr>
11. <tr>
12. <td>baris 2, kolom 1</td>
13. <td>baris 2, kolom 2</td>
14. <tr>
15. </table>
16. sumber :
17. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
18. pada-html.php"> Klikbelajar</a>
19. </body>
20. </html>
skrip 4.3. Penggabungan kolom______________________________________________________
1. <html>
2. <head>
3. <title> Penggabungan kolom </title>
4. </head>
5. <body>
6. <table>
7. <tr>
8. <td colspan="2">Ini adalah kolom yang digabungkan</td>
9. </tr>
10. <tr>
11. <td>baris 2, kolom 1</td>
12. <td>baris 2, kolom 2</td>
13. </tr>
14. <tr>
15. <td>baris 3, kolom 1</td>
16. <td>baris 3, kolom 2</td>
17. </tr>
18. </table>
19. sumber:
20. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
21. pada-html.php"> Klikbelajar</a>
22. </body>
23. </html>
skrip 4.4 Penggabungan baris dan kolom____________________________________________
1. <html>
2. <head>
3. <title>Penggabungan baris</title>
4. </head>
5. <body>
6. <table>
7. <tr>
8. <td colspan="2">Ini adalah kolom yang digabungkan</td>
9. </tr>
10. <tr>
11. <td rowspan="2">baris 2, kolom 1</td>
12. <td>baris 2, kolom 2</td>
13. </tr>
14. <tr>
15. <td>baris 3, kolom 2</td>
16. </tr>
17. </table> </body>
18. sumber:
19. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
20. pada-html.php"> Klikbelajar</a>
21. </html>
skrip 4.5. Rancangan Tugas_________________________________________________________
1. <html>
2. <head>
3. <title>Rancangan Tugas</title>
4. </head>
5. <body>
6. <table border="1" width="100%">
7. <tr>
8. <td colspan="4">baris 1 c1 </td><td rowspan="2">baris 1 c5</td></tr>
9. <tr><td>baris 2 c1 </td><td>baris 2 c2 </td><td>baris 2 c3 </td><td>baris 2 c4
10. </td></tr>
11. <tr><td colspan="5">baris 3 c1</td></tr>
12. </table></body>
13. </html>
C.Tugas
1. Ketiklah skrip 4.1 dengan notepad simpan dengan nama prg41.html
2. Doubleklik-lah file:prg41.html amati hasilnya
3. Lakukan yang sama untuk skrip 4.2 sampai 4.5
Tidak ada komentar:
Posting Komentar