MATERI PEMROGRAMAN

WEB
FORMAT TABEL PADA HALAMAN WEB
KOMPETENSI DASAR

3.3 MENERAPKAN FORMAT TABELPADA HALAMAN WEB

AYO PAHAMI
a. FORMAT TABEL PADA HALAMAN WEB
DALAM MENAMPILKAN DATA YANG TERSTRUKTUR ATAU TAMPILKAN DARI DATABASE,
UMUMNYA AKAN DIBUAT DALAM BENTUK TABEL. HAL INI DIKARENAKAN
MENGGUNKAN CSS UNTUK MENGATUR TAMPILAN HALAMAN WEB SANGAT
DIANJURKAN.
1. TAG TAG TABEL DALAM
HTML
 TAG  <TABLE> DIGUNAKAN UNTUK MEMBUAT TABEL
 TAG  <TR> (TABLE ROWS) DIGUNAKAN UNTUK MEMBUAT BARIS PADA TABEL
 TAG  <TD> (TABLE DATA) ATAU <TH> (TABLE HEADER) DIGUNAKAN UNTUK
MEMBUAT KOLOM PADA TABEL

 
BENTUK LANGSUNG PENGGUNAAN KODE
HTML PADA TAG <TABLE> SEPEERTI
BERIKUT
2. ELEMENT TABLE TBODY, THEAD,
TFOOD, TR, TH, DAN TD
1). ELEMENT <TBODY> DIGUNAKAN DIGUNAKAN SECARA BERSAMA-
SAMA DENGAN ELEMEN <THEAD>YANG MENUNUKKAN BAGIAN ATAS
TABEL DAN <TFOOT> YANG MENUNJUKKAN BAGIAN BAWAH SEBUAG
TABEL
2). ELEMENT THEAD DIGUNKAN SECARA BERSAMA-SAMA DENGAN
ELEMENT <TBODY> YANG MENUNJUKKAN ISI TABEL DAN <TFOOT>
MENUNJUKKAN BAGIAN BAWAH (KAKI) SEBUAH TABEL.
3). ELEMENT TFOO DIGUNAKAN UNTUK MENGELOMPOKKAN ISI ATAU
KONTEN YANG BERADA DIBAGIAN BAWAH (KAKI) SEBUAH TABEL.
3. CALLPEDDING
DI GUNAKAN UNTUK MENETUKKAN JARAK SPASI DIDALAM SEL YAITU ANTARA
DINDING SEL DAN ISI SEL. CALPEDDING HANYA DIDUKUNG OLEH HTML 4.0.
BERIKUT PENULISAN KODE HTML ATRIBUT CALLPEDDING.

CONTOH KODE CALLPEDDING HASIL CALLPEDDING

3. CALLPEDDING
BUATLAH SEBAUAH KODE HTML DENGAN HASIL
SEPERTI YANG TERDAPAT DI BAWAH INI…
CONTOH HTML DENGAN
CALLPEDDING HASIL CALLPEDDING
4. CELLSPACING
DIGUNAKAN UNTUK MENENTUKAN JARAK SPASI ANTAR ANTAR SEL.
DIDUKUNG OLEH HTML 4.0.
BERIKUT PENULISAN KODE HTML ATRIBUT CELLSPACING.

CONTOH KODE CELLSPACING HASIL CELLSPACING

5. BORDER
DIGUNAKAN UNTUK MEMBUAT BINNGKAI PADA TABEL DENGAN MENENTUKAN TABEL BINGKAI TERSEBUT.

BERIKUT PENULISAN KODE HTML ATRIBUT BORDER.

CONTOH KODE BORDER HASIL BORDER

6. COLSPAN
ATRIBUT COLSPAN DIGUNAKAN UNTUK MENGGABUNGKAN BEBERAPA KOLOM MENJADI SATU SEL TABEL.
YANG DIDUKUNG OLEH HTML 5

BERIKUT PENULISAN KODE HTML ATRIBUT COLSPAN .

CONTOH KODE COLSPAN HASIL COLSPAN

7. ROWSPAN
MERUPAKAN PENGGABUNNGAN BEBERAPA BARIS SEL MENJADI SATU BARIS SEL.
YANG DIDUKUNG OLEH HTML 5

BERIKUT PENULISAN KODE HTML ATRIBUT ROWSPAN.

CONTOH KODE ROWSPAN HASIL ROWSPAN

TUGAS ROWSPAN DAN COLSPAN
KOMPETENSI DASAR
3.4 MENERAPKAN TAMPILAN FORMAT MULTIMEDIA PADA HALAMAN
WEB
A. KONSEP MULTIMEDIA
SUATU HALAMAN WEB AKAN TERLIHAT KAKU, TERKESAN FORMAL, DAN
SEDIKIT MENJEMUKAN BILA TIDAK DISERTAI DENGAN GAMBAR. KITA BISA
LIHAT SAAT INI, HALAMAN WEB YANG ADA DI INTERNET, HAMPIR SEMUANYA
MEMASUKKAN UNSUR GAMBAR, ANIMASI, BAHKAN AUDIO DAN VIDEO
UNTUK MENARIK DAN MEMBUAT TERCENGANG PARA PENGUNJUNGNYA. 
B. TAG MENAMPILAKN
GAMBAR
UNTUK MENAMBAHKAN GAMBAR PADA HTML, KITA DAPAT MENGGUNAKAN
ELEMEN IMG. ELEMEN IMG SENDIRI MERUPAKAN ELEMEN YANG BERSIFAT
SELF-CONTAINED, YAITU TIDAK MEMILIKI TAG PENUTUP. ELEMEN IMG JUGA
HARUS MEMILIKI ATRIBUT SRC, YANG DAPAT DIISIKAN DENGAN DUA CARA,
YAITU TEMPAT DARI GAMBAR DISIMPAN RELATIF TERHADAP FILE HTML DAN
URL DARI GAMBAR TERSEBUT.
BERIKUT ADALAH CONTOH PENGGUNAAN TAG IMG:

FORMAT GAMBAR YANG DIDUKUNG HAMPER SEMUA

PERANGKAT SECARA UMUM YAITU JPG,,PNG, JPEG

<IMG SRC="IMAGES/SINTEL.PNG"

ALT="SINTEL MERUPAKAN SEBUAH FILM SINGKAT.">

<IMG SRC="HTTP://I.IMGUR.COM/CYWVEEA.JPG"

ALT="CONTOH PENGUNAAN URL UNTUK SRC.">

CONTOH PENGGUNAAN TAG IMG

BERIKUT KODE TAG IMG BERIKUT HASILNYA

1. MENGUBAH UKURAN GAMBAR
PERUBAHAN UKURAN GAMBAR DAPAT DILAKUKAN DENGAN MENGGUNAKAN
PROPERTI WIDTH DAN HEIGHT, SEPERTI PADA ELEMEN-ELEMEN LAINNYA. YANG
PERLU DIPERHATIKAN DALAM PERUBAHAN UKURAN IALAH BAGAIMANA SEBUAH
GAMBAR DAPAT MENYESUAIKAN UKURAN YANG TEPAT KETIKA KITA HANYA
MEMBERIKAN SALAH SATU DIMENSI. MISALNYA, SEBUAH GAMBAR DENGAN
UKURAN ASLI 800X600 AKAN SECARA OTOMATIS BERUBAH MENJADI 1024X768
MESKIPUN KITA HANYA MENGISIKAN NILAI WIDTH SAJA. BROWSER SECARA
OTOMATIS AKAN MENGHITUNG RASIO PANJANG DAN LEBAR GAMBAR LALU
MENYESUAIKAN UKURAN GAMBAR DENGAN NILAI YANG KITA BERIKAN.
TETAPI PERLU DIINGAT BAHWA PENGISIAN NILAI WIDTH DAN HEIGHT DENGAN
RASIO PANJANG-LEBAR YANG TIDAK TEPAT TENTUNYA AKAN MENYEBABKAN
GAMBAR MENJADI “TERTARIK”.
COBA JALANKAN KODE BERIKUT PADA
GAMBAR YANG DIBERI NAMA GAMBAR.JPG:
B. PENGGUNAAN TAG AUDIO
ADA 3 JENIS SUARA, YAITU UCAPAN MUSIC , DN EFEK SUARA, SELAIN
ITU SUAR TERBAGI ATAS 2 JENIS FORMATNYA, YAITU MIDI DAN WAVE.
1. MIDI YAITU IDENTIC DENGAN SUARA YANG BERASAL DARI
INSTRUMENT ALAT MUSIK,. NAMUN JENIS MIDI TIDAK DAPAT
MEMAINKAN/ MEREKAM BUNYI ATAU SUARA ALAMI SEPERTI,
SUARA TETESAN AIR, SUARA MANUSIA, DA LAIN-LAIN.
2. WAVE YAITU IDENTIK DENGAN JENIS FORMA MUSIK ATU SUARA
BERBASIS DIGITAL YANG MEREKAM DAN MEMAINNKAN JENIS
SUARA APAPUN. BAIK REAL SOUND EFFECT ATAUPUN SUARA
MANUSIA.
C. PENGGUNAN TAG VIDEO
TAG YANG DIGUNAKAN UNTUK  MENAMPILKAN VIDEO ADALAH  <VIDEO>
</VIDEO>. NAMUN TIDAK SEMUA FORMAT VIDEONYA DAPAT DITAMPILKAN DI WEB.
SEMENTARA INI, HANYA BEBERAPA FORMAT VIDEO YANG BISA DIPROSES, DI
ANTARANYA ADALAH WEBM ,OGG , MP4.
MIME (MULTIPURPOSE INTERNET MAIL EXTENSION) DIGUNAKAN UNTUK
MEKANISME UNTUK MENGIRIM BERBAGAI INFORMASI SEPERTI TEXT, APLIKASI,
GAMBAR, SUARA, VIDEO, DAN LAIN SEBAGAINYA AGAR BROWSER TIDAK SALAH
MENTERJEMAHKAN KONTEN YG DITERIMA. TIDAK HANYA PADA WEB, EMAIL JUGA
MENGGUNAKAN MIME. BERIKUT ADALAH TIPE MIME UNTUK FORMAT VIDEO :
CONTOH PENGGUNAAN TAG VIDEO
LATIHAN
• Berikut kode html • Berikut hasil