More Related Content
What's hot
What's hot (20)
Similar to BAB IV - FORMAT TABEL DAN HALAMAN WEB
Similar to BAB IV - FORMAT TABEL DAN HALAMAN WEB (20)
More from TeukuMahawira
More from TeukuMahawira (20)
Recently uploaded
Recently uploaded (20)
BAB IV - FORMAT TABEL DAN HALAMAN WEB
- 1. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1 BAB IV - FORMAT TABEL DAN HALAMAN WEB Tujuan Pembelajaran: Setelah mempelajari bab ini siswa diharapkan dapat mampu : 1. Menerapkan format table pada halaman web 2. Menerapkan tampilan format multimedia pada halaman web 3. Membuat kode html untuk menampilkan table pada halaman web 4. Membuat kode html untuk menampilkan tampilan format multimedia pada halaman web A. Format Tabel pada Halaman Web Dalam menampilkan data yang terstruktur atau tampilan dari database, umumnya akan dibuat dalam bentuk table. HTML juga menyediakan table tag yang digunakan untuk menampilkan data dalam bentuk table. Hal ini dikarenakan menggunakan CSS untuk mengatur tampilan halaman web sangat dianjurkan. 1. Tag-Tag Tabel dalam HTML Tabel diterjemahkan sebagai cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag<Table>. Untuk membuat table di HTML minimal membutuhkan 3 tag utama sebagai berikut. Tabel 2.1. Tag-Tag Tabel dalam HTML No. Tag Keterangan 1. Tag<table> Digunakan untuk memulai table 2. Tag<tr> Singkatan dari table row, digunakan untuk membuat baris dari table 3. Tag<td> Singkatan dari table data, digunakan untuk menginput data ke tabel Bentuk langsung penggunakan kode HTML pada tag <table> dapat dilihat sebagai berikut. Kode Program:
- 2. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2 <!DOCTYPE html> <html> <head> <title>MEMBUAT TABEL</title> </head> <body> <h1>BELAJAR MEMBUAT TABEL</h1> <table border="1"> <tr> <td>Baris 1, Kolom1</td> <td>Baris 1, Kolom2</td> <td>Baris 1, Kolom3</td> <td>Baris 1, Kolom4/td> <td>Baris 1, Kolom5</td> <td>Baris 1, Kolom6</td> <td>Baris 1, Kolom7</td> </tr> <tr> <td>Baris 2, Kolom1</td> <td>Baris 2, Kolom2</td> <td>Baris 2, Kolom3</td> <td>Baris 2, Kolom4</td> <td>Baris 2, Kolom5</td> <td>Baris 2, Kolom6</td> <td>Baris 2, Kolom7</td </tr> <tr> <td>Baris 3, Kolom1</td> <td>Baris 3, Kolom2</td> <td>Baris 3, Kolom3</td> <td>Baris 3, Kolom4</td> <td>Baris 3, Kolom5</td> <td>Baris 3, Kolom6</td> <td>Baris 3, Kolom7</td> </tr> </table> </body> </html> Hasil Keluarannya :
- 3. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3 2. Elemen Table Tbody, Thead, Tfoot, Tr, Th, dan Td Elemen table memiliki beberapa atribut seperti align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antar sel), width (lebar table), dan height (tinggi tabel). Baris-baris yang ada pada tabel dapat dibagi menjadi tabel thead, table tfoot, dan tabel tbody yang dinyatakan dengan elemen thead, tfoot, dan tbody. Setiap thead, tfoot, tbody berisi grup baris dan masing-masing grup paling sedikit berisi satu baris yang didefinisikan dengan elemen <tr>. a. Elemen Tbody, Thead, dan Tfoot Elemen <thead>, <tfoot>, dan <tbody> akan sangat berguna dalam penulisan sebuah tabel yang panjang, lebar, dan lebih dari satu halaman yang masing-masing halaman tesebut, tabel head dan foot-nya tertulis juga. 1) Elemen Tbody Dalam penggunaannya, elemen <tbody> digunakan secara bersama- sama dengan elemen <thead> yang menunjukkan bagian atas (kepala) tabel dan <tfoot> yang menunjukkan sebagai bawah (kaki) sebuah tabel. 2) Elemen Thead Elemen<thead> digunakan secara bersama-sama dengan elemen <tbody> yang menunjukkan isi tabel dan <tfoot> yang menunjukkan bagian bawah (kaki) sebuah tabel. 3) Elemen Tfoot Element foot digunakan untuk mengelompokkan isi atau konten yang berada di bagian bawah (kaki) sebuah tabel. 4) Implementasi Elemen Tbody, Thead, dan Tfoot Hal yang perlu dipahami adalah thead, tbody, dan tfoot berisi jumlah kolom yang sama. Meskipun meletakkan element foot di paling depan (sesudah tag pembuka <tabel>), browser akan melakukan eksekusi dan hasilnya berada di paling bawah karena fungsi dari element foot digunakan mengelompokkan isi sel atau konten di bagian bawah tabel. b. Element TR (Table Row) Pada elemen TR, terdapat elemen TH dan TD dengan atribut yang terdapat pada elemen jenis berupa align, valign (posisi vertical), dan bgcolor. Elemen TR mendefinisikan baris pada tabel dan elemen ini harus berada di dalam elemen TABLE. Sintaks yang digunakan sebagai berikut.
- 4. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4 c. Element TH (Table Header) dan TD (Table Data) Atribut kedua elemen ini adalah align, valign, bgcolor, colspan, dan rowspan. Elemen TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dengan data tercetak tebal dan dengan posisi di tengah sel. Elemen TH dan TD ini harus terletak di dalam elemen TR. Sintaks yang digunakan sebagai berikut. 3. Cellpadding Penggunaan atribut cellpadding hanya didukung oleh HTML4.01, namun tidak didukung oleh HTML5. Artibut cellpadding digunakan untuk menentukan jarak spasi did dalam sel, yaitu antara dinding sel da nisi sel. Berikut ini penulisan kode HTML atribut cellpadding. Nilai dari atribut cellpadding dalam menentukan spasi di dalam sel adalah pixel. Perhatikan kode penulisan dan penggunaan cellpadding di HTML berikut ini. Setelah kode HTML di atas di jalankan pada browser, akan tampil gambar sebagai berikut: 4. Cellspacing Atribut cellspacing digunakan untuk menentukan jarak spasi antar sel. Sama halnya dengan atribut cellpadding, atribut cellspacing juga tidak didukung oleh HTML5. Nilai dari atribut cellspacing dalam menentukan spasi di dalam sel adalah pixel. Berikut ini bentuk penulisan atribut cellspacing di HTML. Berikut ini bentuk kode penulisan dana penggunaan cellspacing di HTML. 5. Border Atribut border digunakan untuk membuat bingkai pada tabel dengan menentukan tebal bingkai tersebut. Berikut ini bentuk kode penulisan dan penggunaan atribut border di HTML Setelah kode HTML di atas dijalankan di browser, akan tampil gambar sebagai berikut.
- 5. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 5 Atribut border tidak didukung oleh HTML5. Oleh sebab itu, digambarkan CSS sebagai gantinya. Berikut ini bentuk kode penulisan dan penggunaan atribut border di CSS. Pada kode di atas terdapat penggunaan property border-collapse. Properti tersebut jika diberi nilai “collapse” akan membuat bingkai tunggal dan akan tampak gambar di atas. 6. Rowspan dan Colspan Mayoritas browser, seperti Firefox, Chrome, Opera, Safari, dan Internet Explorer mendukung penggunaan colspan dan rowspan. Colspan dan rowspan juga didukung oleh HTML5. Merge cell adalah suatu metode menggabungkan beberapa sel menjadi satu dalam sebuah tabel. HTML menyediakan atribut khusus untuk merge cell, yaitu rowspan dan colspan. Penggunaan atribut colspan dan rowspan diterapkan pada tag <td> dan tag <th>. Colspan berarti penggabungan beberapa baris sel menjadi satu sel, sedangkan rowspan berarti penggabungan beberapa baris sel menjadi satu baris sel. a. Kode Penulisan Colspan Penulisan sintaks colspan : <td colspan=”number”> Penulisan sintaks rowspan : <td rowspan=”number”> Kolom ataupun baris yang akan digabungkan menjadi satu. Berikut ini bentuk kode penulisan dan penggunaan colspan di HTML. b. Kode Penulisan Rowspan Berikut ini bentuk kode penulisan dan penggunaan rowspan di HTML. Pada baris kedua yang berisi data untuk “No” dan “Nama” diterapkan rowspan yang menggabungkan dua baris, yaitu baris kedua dan ketiga pada kolom satu dan dua. Berikut ini kode penulisan serta penggunaan colspan dan rowspan dengan menggunakan CSS. B. Format Multimedia pada Halaman Web 1. Konsep Tampilan Multimedia dalam HTML Multimedia identik dengan suatu sarana komunikasi yang berupa gabungan dari text, gambar, animasi, video, dan audio. Pada media digital dapat ditambahkan suara dan video ke dalam teks untuk menambahkan informasi
- 6. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 6 kepada pengguna. HTML sendiri menyediakan fitur untuk memberikan gambar, suara, maupun video untuk digunakan dalam dunia web. Pada umumnya, elemen multimedia (seperti suara/video) disimpan dalam file media dan cara yang paling umum untuk melihat format sebuah media adalah melihat ekstensi yang digunakan oleh file tersebut. Ketika browser menemukan file berekstensi .swf, .wmv, .mp3, .mp4, browser akan berasumsi bahwa file tersebut merupakan file multimedia. 2. Tag Menampilkan Gambar Gambar identic dengan suatu objek yang dapat ditampilkan dalam bentuk grafik (nonteks) atau konsep yang berbentuk kode yang tidak berelasi dengan waktu. Gambar terbagi tiga jenis sebagai berikut. Penambahan gambar pada HTML dapat menggunakan elemen img. Namun, terdapat format gambar yang didukung oleh hamper semua perangkat secara umum, misalnya PNG (Portable Network Graphics), JPG (Joint Photographic Expert Group), atau GIF (Graphics Interface Format). Berikut ini bentuk penggunaan tag img. 3. Tag untuk Audio Penggunaan audio ke dalam aplikasi multimedia dapat memberikan informasi yang tidak mungkin diberikan oleh media informasi, seperti gambar, grafik, ataupun teks. Sementara itu, untuk menampilkan elemen audio, Anda harus menambahkan atribut controls pada elemen sebagai berikut. Penggunaan atribut autoplay digunakan jika ingin memastikan audio dapat dimainkan secara otomatis ketika halaman selesai diunduh oleh browser. Berikut ini penggunaan atribut autoplay. 4. Tag untuk Video Penambahan video pada dokumen HTML dilakukan dengan elemen video yang sangat mirip dengan elemen audio. Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan pada elemen video sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format. Video seperti layaknya animasi, namun video lebih cenderung pada hasil karya
- 7. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 7 dari adegan dunia nyata yang direkam secara langsung. Dalam video terkandung juga elemen multimedia lainnya, seperti gambar, suara, dan tulisan. Video menyuguhkan informasi lebih lengkap dan menarik dibanding dengan elemen lainnya. Berikut ini prosedur untuk menambahkan video. RANGKUMAN 1. HTML menyediakan banyak tag lain untuk merancang tabel yang lebih rumit. Untuk halaman web yang panjang, kadang perlu diberi komentar mengenai fungsi dan tujuan kita membuatnya. 2. Secara mendasar, elemen TABLE memiliki atribut seperti align, bgcolor, order, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antar sel), width (lebar tabel), dan hight (tinggi tabel). 3. Untuk membuat Table di HTML minimal membutuhkan 3 Tag utama sebagai berikut: No. Tag Keterangan 1. Tag<table> Digunakan untuk memulai table 2. Tag<tr> Singkatan dari table row, digunakan untuk membuat baris dari table 3. Tag<td> Singkatan dari table data, digunakan untuk menginput data ke tabel 4. Mayoritas browser seperti Firefox, Chrome, Opera, Safari, dan Internet Explorer mendukung penggunaan colspan dan rowspan. 5. Ada tiga jenis suara, yaitu ucapan (specch), music, dan efek suara. Selain itu, suara juga terbagi dua jenis formatnya, yaitu MIDI dan WAVE. 6. Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan pada elemen video sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format.