Di postingan sebelumnya kita sudah membahas cara membuat link di HTML. Kali ini kita akan bahas cara memasukkan gambar di HTML. Bagaimana caranya? Simak panduan AneIqbal berikut ini. Show
Contents Cara memasukkan gambar di HTMLSelain paragraf, list, dan link, HTML juga dapat menampilkan objek berupa gambar. Tag yang digunakan yakni <img>. ..tag <img> ini merupakan self closing tag, artinya nggak punya tag penutup. Benar: <img /> Salah: <img><img/> Tag <img> selalu diikuti atribut src. Atribut src ini mirip seperti atribut href pada tag </a>. Bedanya, src merujuk ke nama file gambar yang ingin ditampilkan. Contohnya, kami mau menampilkan gambar posting di atas ke halaman HTML. Nama file gambarnya: gambar-posting.png. Jadi seperti ni kodenya: <!DOCTYPE html> <html> <head> <title>Memasukkan gambar di HTML</title> </head> <body> <h1>Cara memasukkan gambar di HTML</h1> <img src="gambar-posting.png" /> </body> </html> Simpan dengan nama file gambar.html. Web browser akan menampilkan: Gambarnya akan gagal dimuat, karena srcnya nggak mengarah ke file gambar dengan benar. Akan seperti ini jadinya: Hasilnya akan proporsional: Memahami Elemen HTML dalam Membuat TabelKetika kamu membuat tabel dengan HTML ada beberapa tag atau elemen HTML yang harus kamu ketahui. Akan tetapi pada dasarnya kamu sudah bisa membuat tabel dengan hanya menggunakan 3 elemen HTML berikut :
Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut :
Daripada kamu bingung dengan elemen-elemen tersebut, mari kita praktikkan saja langsung dengan menggunakan 3 elemen yang umum digunakan dalam membuat tabel. Pertama silakan buat file html baru. Beri nama file html tersebut sesuai selera atau dapat kita beri nama “index.html”. Silakan perhatikan contoh kode berikut dan salin ke dalam file index.html. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mengenal Tabel HTML</title> </head> <body> <table border="1"> <tr> <td>Baris ke 1 - Kolom ke 1</td> <td>Baris ke 1 - Kolom ke 2</td> </tr> <tr> <td>Baris ke 2 - Kolom ke 1</td> <td>Baris ke 2 - Kolom ke 2</td> </tr> </table> </body> </html>
Hasil dari kode program di atas akan seperti berikut : Menggabungkan Sel pada Tabel HTMLSaat membuat tabel, terkadang kita dihadapkan akan kebutuhan untuk menggabungkan beberapa sel menjadi satu. Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa kamu gunakan seperti berikut :
Atribut tersebut bisa diterapkan pada tag td maupun th. Perhatikan contoh kode program berikut : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mengenal Tabel HTML</title> </head> <body> <table border="1"> <tr> <th rowspan="2">Nama</th> <th colspan="3">Nilai</th> </tr> <tr> <th>Kimia</th> <th>Fisika</th> <th>Biologi</th> </tr> <tr> <td>Robby</td> <td>76</td> <td>80</td> <td>81</td> </tr> <tr> <td>Rendi</td> <td>84</td> <td>70</td> <td>75</td> </tr> <tr> <td>Alfian</td> <td>96</td> <td>70</td> <td>71</td> </tr> </table> </body> </html>
Hasil dari kode program diatas seperti berikut : Memberikan Warna dan Jarak Antar Sel pada HTMLPada contoh kode program sebelumnya, tabel yang dihasilkan terkesan saling berdekatan antar satu sel dengan sel yang lain. Untuk mengatasi hal itu HTML telah menyediakan atribut cellpadding yang bisa kamu gunakan untuk mengatur jarak antar sel. Atribut cellpadding ini bisa diterapkan langsung pada tag table seperti berikut : 1 2 3 <table border="1" cellpadding="8"> .... </table>
1 2 <th bgcolor="grey" rowspan="2">Nama</th> <th bgcolor="yellow" colspan="3">Nilai</th>
Menerapkan kode CSS untuk Desain TabelSebelumnya sudah kita bahas bagaimana membuat garis dan memberikan warna serta jarak pada tabel dengan menggunakan atribut yang ada di HTML. Untuk saat ini setelah kehadiran CSS penggunaan atribut tersebut dalam mendesain tabel sudah tidak disarankan lagi. Kamu disarankan menggunakan kode CSS dalam membuat garis dan memberikan warna serta jarak pada tabel. Memasukan kode CSS pada halaman web bisa dengan membuat berkas CSS terpisah atau disimpan dalam elemen head pada HTML. Usahakan jangan disimpan pada elemen HTML yang lain karena bisa membuat kode program terlihat tidak rapi. Selain itu juga dengan menyimpan kode CSS pada file terpisah atau di dalam elemen head akan membuat kode CSS tersebut dapat digunakan secara berulang-ulang. Kode CSS dapat ditulis dengan mendefinisikan terlebih dahulu tag HTML apa yang akan kamu ubah atau beri efek CSS. Lebih jelasnya silakan kamu perhatikan contoh kode program berikut. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mengenal Tabel HTML</title> <style> table { border-collapse: collapse; } table, th, td { border: 1px solid black; } th, td { padding: 10px; } th { background-color: #4CAF50; color: white; } </style> </head> <body> <table> <tr> <th rowspan="2">Nama</th> <th colspan="3">Nilai</th> </tr> <tr> <th>Kimia</th> <th>Fisika</th> <th>Biologi</th> </tr> <tr> <td>Robby</td> <td>76</td> <td>80</td> <td>81</td> </tr> <tr> <td>Rendi</td> <td>84</td> <td>70</td> <td>75</td> </tr> <tr> <td>Alfian</td> <td>96</td> <td>70</td> <td>71</td> </tr> </table> </body> </html>
Lalu properti CSS yang ada pada kode program di atas berfungsi untuk apa aja? Mari kita ulas sekilas mengenai properti CSS yang digunakan pada kode program di atas.
Hasil dari kode program tersebut maka tabel yang ditampilkan akan seperti berikut : Supaya lebih menarik lagi, kamu bisa menambahkan properti CSS width agar tabel bisa mengikuti ukuran layar. Properti hover digunakan agar baris pada tabel akan memberikan efek warna saat kursor mengarah pada baris tersebut. Sehingga kode CSS yang ada akan seperti berikut ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <style> table { border-collapse: collapse; width: 100%; }
table, th, td { border: 1px solid black; } th, td { padding: 10px; } th { background-color: rgb(19, 110, 170); color: white; } tr:hover {background-color: #f5f5f5;} </style>
Bagaimana cukup mudah bukan dalam membuat tabel di HTML? Hal yang harus kamu perhatikan saat membuat tabel adalah penggunaan atribut rowspan dan colspan. Karena kamu harus teliti dalam menentukan berapa ukuran sel yang akan diterapkan pada rowspan maupun colspan.
Sering-seringlah berlatih dan terus kembangkan kemampuanmu dengan mengikuti Dicoding academy Front-End Web Developer. Di sini kamu akan diajarkan mulai dari dasar HTML, CSS, Javascript hingga menyusun layout yang responsif, interaktif dan tentunya user friendly. Simak juga artikel lainnya di blog Dicoding yang bisa memperluas wawasan kamu mengenai pemrograman web. Bagaimana cara menambahkan gambar di dalam tabel HTML?Cara Memasukkan Gambar di HTML. Langkah 1: Memastikan Format Gambar Sudah Sesuai.. Langkah 2: Memasukkan Atribut Sumber Gambar pada Tag HTML Images.. Langkah 3: Memberikan Atribut Alt Text pada Tag HTML Images.. Langkah 4: Mencantumkan Keterangan Gambar.. Cara 1: Mengubah Dimensi Gambar.. Cara 2: Memberikan Bingkai Gambar.. Bagaimana cara menampilkan gambar di HTML?Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src . Jika kita tidak mengisi atribut src , maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.
Bagaimana membuat tabel HTML?Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:. Tag <table> untuk membungkus tabelnya.. Tag <thead> untuk membungkus bagian kepala tabel.. Tag <tbody> untuk membungkus bagian body dari tabel.. Tag <tr> (tabel row) untuk membuat baris.. Tag <td> (table data) untuk membuat sel.. Kenapa gambar tidak bisa muncul di HTML?Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.
|