1. Home
    2. »
  2. Web Design
    3. » Menambahkan Gambar dan Tabel

Menambahkan Gambar dan Tabel

Web Design
didi Comments

Selamat datang kembali! Pada bagian sebelumnya, kita telah mempelajari dasar-dasar HTML, seperti cara membuat judul, paragraf, dan daftar. Kali ini, kita akan mempelajari cara menambahkan gambar dan tabel ke dalam halaman web kita.

Menambahkan Gambar

Untuk menambahkan gambar ke dalam halaman HTML, kita menggunakan tag  <img> . Tag  <img>  merupakan tag kosong, yang berarti tidak memiliki tag penutup. Tag ini memiliki atribut  src  yang menentukan URL atau path gambar yang akan ditampilkan.

<img src="gambar.jpg" alt="Gambar kucing">  

Atribut  src : Menentukan URL atau path gambar.

Atribut  alt : Menentukan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat. Teks alternatif ini juga digunakan oleh pembaca layar untuk membantu pengguna yang memiliki disabilitas penglihatan.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Tutorial HTML</title>
</head>
<body>

  <h1>Gambar Kucing</h1>

  <img src="kucing.jpg" alt="Gambar kucing">

</body>
</html>

 

Kode di atas akan menampilkan gambar dengan nama "kucing.jpg" di dalam folder yang sama dengan file HTML. Jika gambar tidak dapat dimuat, teks "Gambar kucing" akan ditampilkan sebagai gantinya.

Menambahkan Tabel

Untuk menambahkan tabel ke dalam halaman HTML, kita menggunakan tag  <table> . Tag <table> memiliki tag penutup  </table>. Di dalam tag  <table> , kita dapat menambahkan tag  <tr>  untuk baris tabel dan tag  <td>  untuk sel tabel.

<table>
  <tr>
    <td>Sel 1</td>
    <td>Sel 2</td>
  </tr>
  <tr>
    <td>Sel 3</td>
    <td>Sel 4</td>
  </tr>
</table>

 

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Tutorial HTML</title>
</head>
<body>

  <h1>Daftar Hewan</h1>

  <table>
    <tr>
      <th>Nama</th>
      <th>Jenis</th>
    </tr>
    <tr>
      <td>Kucing</td>
      <td>Mamalia</td>
    </tr>
    <tr>
      <td>Anjing</td>
      <td>Mamalia</td>
    </tr>
    <tr>
      <td>Burung</td>
      <td>Aves</td>
    </tr>
  </table>

</body>
</html>

 

Kode di atas akan menampilkan tabel dengan judul "Daftar Hewan". Tabel ini memiliki dua kolom, yaitu "Nama" dan "Jenis". Setiap baris tabel berisi nama hewan dan jenis hewan tersebut.

Atribut  <th> : Menentukan sel sebagai header tabel. Sel header biasanya ditampilkan dengan font yang lebih tebal dan ukuran yang lebih besar.

Atribut  <tr> : Menentukan baris dalam tabel.

Atribut  <td> : Menentukan sel dalam tabel.

Kesimpulan

Dalam tutorial ini, kita telah mempelajari cara menambahkan gambar dan tabel ke dalam halaman HTML. Dengan menggunakan tag  <img>  dan  <table> , kita dapat membuat halaman web yang lebih informatif dan menarik.

Jangan lupa untuk terus berlatih dan bereksperimen dengan kode HTML untuk meningkatkan pemahaman Anda. Selamat belajar!

Quiz

Tags

Comments