Monday 7 November 2011

3. Modul Kegiatan HTML Membuat Tabel, Menyisipkan Gambar dan Link


3. Modul Kegiatan HTML
Membuat Tabel, Menyisipkan Gambar dan Link

3.1   Pokok Bahasan
1.      Pengaturan Tabel
2.      Menyisipkan Gambar
3.      Membuat Link

3.2   Tujuan Praktikum
1.      Praktikan mampu memahami maksud dari penggunaan Table, Link, dan Gambar pada Dokumen HTML.
2.      Praktikan mampu membuat satu halaman Web sederhana dengan memanfaatkan Elemen-elemen untuk pengaturan Table, Link, dan Gambar menggunakan bahasa HTML.

3.3   Petunjuk Praktikum
1.      Praktikan diharapkan mempersiapkan diri dengan mempelajari dan memahami teori HTML yang diberikan pada saat perkuliahan teori.
2.      Kegiatan praktikum dilakukan dengan cara mempelajari dasar teori dan melakukan langkah-langkah yang diberikan pada subjudul Dasar Teori dan Kegiatan.
3.      Pada setiap modul, Praktikan wajib mengerjakan jurnal praktikum berupa laporan dengan format yang telah ditentukan dan diserahkan kepada Asisten Laboratorium.

3.4   Dasar Teori dan Kegiatan
1.      Pengaturan Tabel
Tabel adalah bagian dari struktur HTML yang paling banyak digunakan dalam pembuatan web sites (95%). Penggunaan Tabel ini dimaksudkan untuk mempermudah pengguna menyerap informasi yang disampaikan, karena informasi disajikan dalam segmentasi-segmentasi yang terstruktur berupa baris dan kolom. Tag-Tag yang digunakan untuk membuat tabel dalam dokumen HTML adalah:
a. Table           : <table></table> Tag untuk membuat tabel.
b. Table Row  : <tr></tr> menyatakan baris dalam suatu tabel
c. Table Data  : <td></td> menyatakan kolom dalam suatu tabel/tempat meletakkan data
d. Table Header : <th></th> menyatakan judul tabel dalam kolom(optional)
e. Caption       : <caption></caption> menyatakan judul tabel yang terletak diluar tabel

Elemen Tabel memiliki atribut-atribut dengan value tertentu yang berguna untuk mempercantik bentuk tabel, yaitu:
a. Border        : untuk membuat batas tepi dari suatu tabel.
b. Width          : untuk mengatur lebar tabel
c. Align            : untuk mengatur bentuk perataan horisontal dalam tabel
d. Valign         : untuk mengatur bentuk perataan vertical dalam tabel
e. Cellspacing  : untuk mengatur spasi antar sel / kotak data
f.  Cellpadding            : untuk mengatur spasi didalam sel / kotak data
g. Rowspan     : menyatakan gabungan sel-sel dalam satu baris
h. Colspan       : menyatakan gabungan sel-sel dalam satu kolom
b. Bgcolor       : untuk mengatur warna suatu sel
Value yang dimiliki oleh atribut Align dan Valign (Vertical Align) adalah:
a. Align           : Center | Justify | Left | Right
b. Valign         : Baseline | Top | Bottom | Middle

Misalkan kita akan membuat Tabel 2 dimensi seperti gambar berikut:
Telepon
Nama
08123456789
Sayuti
08156789123
Susi

Contoh1: Tabel 2 Dimensi
Modul3-1.html

<html>
<head>
<title>Contoh Tabel 2 Dimensi</title>
</head>
<body>
<table border="1" cellpadding="2" width="250">
  <caption><b>Tabel Telepon</b></caption>
  <tr>
    <th width="100" bgcolor="lavender">Telepon</th>
    <th width="150" bgcolor="lavender">Nama</th>
  </tr>
  <tr>
    <td width="100">08123456789</td>
    <td width="150">Sayuti</td>
  </tr>
  <tr>
    <td width="100">08156789123</td>
    <td width="150">Susi</td>
  </tr>
</table>
</body>
</html>



Misalkan kita akan membuat Tabel dengan Colspan seperti gambar berikut:
Jadwal Kuliah
Senin
Selasa
Nyangkul
Ngarambet

Contoh2: Tabel Dengan Colspan
Modul3-2.html

<html>
<head>
<title>Contoh Tabel Dengan Coslpan</title>
</head>
<body>
<table border="0" cellpadding="2" width="300">
 <tr>
  <td colspan="2" width="296" align="center"
    bgcolor="#9999FF"><b>Jadwal Kuliah</b></td>
 </tr>
 <tr>
  <td width="141" align="center" bgcolor="#99CCFF">Senin</td>
  <td width="153" align="center" bgcolor="#99CCFF">Selasa</td>
 </tr>
 <tr>
  <td width="141" align="center" bgcolor="#99CCFF">Nyangkul</td>
  <td width="153" align="center" bgcolor="#99CCFF">Ngarambet</td>
 </tr>
</table>
</body>
</html>

Misalkan kita akan membuat Tabel dengan Colspan Bertingkat seperti gambar berikut:
Quarter 1
Quarter 2
Jan
Feb
Mar
Apr
May
Jun
100
5000
200
1500
2500
1750
290
5050
2300
100
270
300

Contoh3: Tabel Dengan Colspan Bertingkat
Modul3-3.html

<html>
<head>
<title>Contoh Tabel Dengan Colspan Bertingkat</title>
</head>
<body>
<table bgcolor=#FFFFCC width="301" border="1" cellpadding="2">
  <tr>
    <td colspan="3" align="center" width="136"
        bgcolor="#FFCC66"><b>Quarter 1</b></td>
    <td colspan="3" align="center" width="153"
        bgcolor="#FFCC66"><b>Quarter 2</b></td>
  </tr>
  <tr align="center">
    <td width="38"><b>Jan</b></td>
    <td width="48"><b>Feb</b></td>
    <td width="42"><b>Mar</b></td>
    <td width="46"><b>Apr</b></td>
    <td width="54"><b>May</b></td>
    <td width="45"><b>Jun</b></td>
  </tr>
  <tr>
    <td width="38">100</td>
    <td width="48">5000</td>
    <td width="42">200</td>
    <td width="46">1500</td>
    <td width="54">2500</td>
    <td width="45">1750</td>
  </tr>
  <tr>
    <td width="38">290</td>
    <td width="48">5050</td>
    <td width="42">2300</td>
    <td width="46">100</td>
    <td width="54">270</td>
    <td width="45">300</td>
  </tr>
</table>
</body>
</html>

Misalkan kita akan membuat Tabel dengan Rowspan seperti gambar berikut:
Satu
Dua
Tiga
Empat
Dua
Tiga
Empat

Contoh4: Tabel Dengan Rowspan
Modul3-4.html

<html>
<head>
<title>Contoh Tabel Dengan Coslpan</title>
</head>
<body>
<table border="0" cellpadding="2" width="300">
  <tr>
    <td rowspan="2" bgcolor="#00CC00"><p align="center">Satu</td>
    <td bgcolor="#99FF33">Dua</td>
    <td bgcolor="#99FF33">Tiga</td>
    <td bgcolor="#99FF33">Empat</td>
  </tr>
  <tr>
    <td bgcolor="#CCFF99">Dua</td>
    <td bgcolor="#CCFF99">Tiga</td>
    <td bgcolor="#CCFF99">Empat</td>
  </tr>
</table>
</body>
</html>



Misalkan akan membuat Tabel dengan Rowspan dan Colspan seperti gambar berikut:

COLSPAN
Kolom 1
Kolom 2
ROWSPAN
Baris 1
Baris1, Kolom1
Baris1, Kolom2
Baris 2
Baris2, Kolom1
Baris2, Kolom2

Contoh5: Tabel Dengan Rowspan dan Colspan
Modul3-5.html

<html>
<head>
<title>Contoh Tabel Dengan Colspan dan Rowspan</title>
</head>
<body>
<table border="1" width="363" bgcolor="#99FF33">
  <tr>
   <td colspan="2" rowspan="2" width="141">&nbsp;</td>
   <td colspan="2" width="215" align="center"><b>COLSPAN</b></td>
  </tr>
  <tr>
   <td width="110" align="center"><b>Kolom 1</b></td>
   <td width="104" align="center"><b>Kolom 2</b></td>
  </tr>
  <tr>
   <td rowspan="2" width="79"><b>ROWSPAN</b></td>
   <td width="60" align="center"><b>Baris 1</b></td>
   <td width="110">Baris1, Kolom1</td>
   <td width="104">Baris1, Kolom2</td>
  </tr>
  <tr>
   <td width="60" align="center"><b>Baris 2</b></td>
   <td width="110">Baris2, Kolom1</td>
   <td width="104">Baris2, Kolom3</td>
  </tr>
</table>
</body>
</html>



2.      Menyisipkan Gambar
Satu gambar mewakili seribu arti”, sebagai sarana komunikasi dan sumber informasi maka Situs Web yang baik harus didesain sedemikian rupa sesuai DKV dan kaidah Tata Letak. Untuk alasan kepraktisan biasanya teks dalam situs web diganti dengan image atau gambar. Gambar memiliki banyak format, tapi hanya sebagian saja yang bisa di interpretasi oleh web browser misalnya: GIF, JPG, PNG. Standar W3C menyarankan PNG sebagai format gambar untuk web karena format tersebut dibuat oleh konsorsium W3C itu sendiri. Biasanya ukuran gambar yang digunakan tidak lebih dari 100kb. Besarnya ukuran file gambar atau banyaknya gambar yang digunakan dalam situs web akan mempengaruhi waktu Loading sebuah situs web pada browser client. Untuk menyisipkan gambar dalam sebuah dokumen HTML menggunakan Elemen IMG, yang merupakan Tag Tunggal tanpa tag penutup.

Elemen Tabel memiliki atribut-atribut dengan value tertentu yang berguna untuk mempercantik bentuk tabel, yaitu:
a. Src               : untuk menentukan sumber inline image.
b. Alt               : untuk referensi alternatif bagi browser berbasis teks
c. Width          : untuk menentukan lebar image (dinyatakan dalam px atau %)
d. Height         : untuk menentukan tinggi image (dinyatakan dalam px atau %)
e. Border         : untuk memberikan batas pada suatu inline image
f.  Align           : untuk mengatur perataan teks pada image terhadap teks disekitarnya

Value yang dimiliki oleh atribut Align adalah: Bottom | Top | Middle | Left | Right | Baseline | Texttop | Absmiddle | Absbottom

Contoh6: Penyisipan Gambar
Modul3-6.html

<html>
<head>
  <title>Contoh Menyisipkan Gambar</title>
</head>
<body>
<img border="0" src="http://www.gambar.com/file.png" /><br/><br/>
<img border="1" src="../file.png" /><br/><br/>
<img border="5" src="file.png" /><br/><br/>
<img border="1" src="file.png" alt="ini gambar monyet" width="100" height="100" align="bottom"/>Teks ini dipengaruhi oleh penggunaan Align, coba gunakan dengan value lain untuk melihat perbedaannya<br/>
</body>
</html>



3.      Membuat Link
Link digunakan sebagai pemicu untuk memanggil halaman web lain dari halaman web yang aktif di browser. Link pada HTML ada yang diletakkan di dalam Tag <head> dan ada juga yang diletakan diantara Tag <body>. Pada bahasan ini kita akan mempelajari link yang diletakkan diantara Tag <body>. Link pada dokumen HTML dilambangkan dengan Anchor atau Tag <a></a>. Fungsinya adalah:
1.      Menjadi penghubung dengan dokumen lain menggunakan atribut ”href
2.      Menjadi sebuah bookmark (penanda) paa halaman yang sama dengan atribut ”name” atau ”id”.
Link hanya memiliki dua atribut, artinya Tag Anchor tidak dapat dimanipulasi langsung, Tapi bisa dipercantik (warnanya) pada bagian Body dengan menambahkan atribut:
a. link              : menandakan Hyperlink / suatu teks sebagai link
b. vlink                        : visited hyperlink / link yang sudah dikunjungi
c. alink                        : active link / link yang sedang aktif berlaku untuk link bookmark

Contoh7: Membuat Link
Modul3-7.html

<html>
 <head>
  <title>New Page 1</title>
 </head>
 <body link="red" vlink="yellow" alink="green">
  <a name="Top">Bookmark</a><br/>
  <a href="http://www.google.co.id">Link antar website</a><br/>
  <a href="modul3-1.html">Link antar halaman</a><br/>
  <a href="mailto:emailkamu@yahoo.co.id">Link ke email</a><br/>
  <a href="#Top">Link yang digunakan sebagai bookmark</a><br/>
 </body>        
</html>




3.5   Jurnal Praktikum
Buatlah 3 buah dokumen  HTML dengan menggunakan dan memanfaatkan Tag-Tag yang telah anda pelajari pada modul ini dan modul sebelumnya untuk membuat Pengaturan Teks, Enumerasi, Tabel, Menyisipkan Gambar dan Membuat Link. Tabel-Tabel yang dibuat berisi data Gambar, Teks dan Enumerasi. Tiap-tiap dokumen HTML yang dibuat memiliki link yang saling terhubung. Tema masing-masing dokumen HTML, Bebas! Misalnya Tabel Jadwal Kuliah, Tabel Gambar-Gambar dan lainnya. Penilaian diberikan berdasarkan kompleksitas dari tugas yang anda kerjakan dan kreativitas anda dalam memanfaatkan materi HTML yang telah anda kuasai.
Jurnal Praktikum dikumpulkan dalam bentuk:
a.       Laporan yang berisi Source Code dan Print Screen tampilan tugas anda pada browser. Laporan wajib menggunakan kertas A4, Format laporan tanyakan ke Asisten!
b.      File Tugas diperlihatkan dan diserahkan pada Asisten Laboratorium.
Tugas dikerjakan sendiri-sendiri, tidak diperkenankan melakukan Copy-Paste-Replace terhadap tugas rekan anda. Apabila ditemukan Plagiat (antar teman sekelas atau antar teman beda kelas), maka semua tugas yang ”Sama” tersebut dianggap batal/ tidak mengumpulkan! 


See also:  2. Modul Kegiatan HTML Pengaturan Teks dan Enumerasi

No comments: