Modul 2

Bagian 1 Format Tabel Pada Halaman Web

Pendahuluan
Kolom

Baris

Baris pada tabel html digambarnya dengan tag <tr> atau table row.
Sedangan kolom digambarkan dengan tag <td> atau table data untuk
menyimpan data selain <td> juga ada <th> atau table header yang juga
berguna untuk menyimpan data untuk header atau judul tabel dimana jika
menggunakan tag <th> maka judul tersebut akan otomatis menjadi huruf
tebal meskipun tanpa tag <b> atau <strong>. Berikut adalah atribut –
atribut yang terdapat pada tabel.
Atribut pada <table></table>
ƒ border (membuat garis pada tabel)
ƒ align (perataan table, contoh : align=”center”;)
ƒ width (mengatur lebar tabel)
ƒ height (mengatur tinggi tabel)
ƒ bgcolor (membari warna pada, contoh : bgcolor="blue";)
Atribut pada <tr></tr>
ƒ align (perataan tabel, memiliki atribut center, left, dan right)

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

ƒ bgcolor
ƒ width
ƒ height
Atribut pada <td></td>
ƒ align
ƒ bgcolor
ƒ width
ƒ height
1. Tabel Sederhana

Hasilnya:

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

2. Tabel dengan Cellpadding

Hasilnya :

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

3. Tabel dengan Border

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

 Hasilnya :

4. Tabel dengan Cellspacing

Hasilnya :

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

5. Tabel dengan rowspan dan colspan

Hasilnya:

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

Latihan
Buatlah halaman website seperti dibawah ini:

Kalimat berjalan

 Buatlah kreasi dengan menambahkan tag html lainnya sehingga

tampilannya semakin menarik.
 Isilah data minamal 5 destinasi wisata.
 Gunakan atribut – atribut pada tabel untuk menyesuaikan lebar
tabel.
 Berilah nama filenya Latihan1_nama

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

Bagian 2 Format Multimedia pada Halaman Web
1. Menambahkan gambar pada halaman web
Buatlah folder gambar pada folder kalian dalam htdocs. Lalu
ketikkan coding seperti dibawah :

Hasilnya:

Src diisi tempat menyimpan gambar.

2. Mengubah ukuran gambar menggunakan css

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

3. Pengaturan posisi gambar

4. Menggabungkan gambar dan teks

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

Hasilnya:

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom

5. Menambahkan audio

- Src diisi letak menyimpan audio

- Controls untuk memunculkan elemn audio
- Autoplay untuk memutar audio secara otomatis ketika halaman
web sibuka
- Untuk mengulang audio dapat digunkan atribut loop

6. Menambahkan video

7. Menambahkan gambar sebelum video dimulai

Modul Pemrograman Web dan Perangkat Bergerak – Meti Rasmini, S.Kom