CARA MENGATUR LETAK GAMBAR DI HTML

HTML atau Hyper Text Markup Language adalah bahasa markup yang digunakan untuk mengatur layout dan menentukan konten dari sebuah website. Salah satu elemen penting dalam HTML adalah gambar. Gambar dapat menambah nilai estetika dalam sebuah website, dan itu sangat penting dalam menarik perhatian pengunjung.

Pada artikel ini, kita akan membahas bagaimana cara mengatur letak gambar di dalam HTML.

Menggunakan Tag <img>

Terdapat banyak cara untuk mengatur posisi gambar di HTML. Cara pertama adalah dengan menggunakan tag <img> yang merupakan standar dalam menampilkan sebuah gambar.

Cara menambahkan gambar di HTML adalah sebagai berikut:

<img src="url_gambar" alt="deskripsi_gambar">

Di dalam tag <img>, title dan alt adalah atribut yang dimasukan untuk memberikan teks alternatif pada gambar.

Pengaturan Letak Gambar

Untuk mengatur letak gambar di halaman web, kamu dapat menggunakan beberapa metode berikut:

Menggunakan CSS

CSS atau Cascading Style Sheets adalah bahasa pemrograman yang digunakan untuk mengatur tampilan elemen-elemen pada sebuah website, termasuk posisi dan layout gambar.

Berikut adalah cara penggunaan CSS untuk mengatur letak gambar.

<img src="url_gambar" alt="deskripsi_gambar" style="position:absolute; TOP:50px; LEFT:150px;">

Menggunakan Tag <center>

Kamu juga bisa menggunakan tag <center> untuk memusatkan gambar di tengah halaman. Namun, penggunaan tag <center> sudah tidak direkomendasikan lagi dan sebaiknya kamu menggunakan CSS.

<center>
  <img src="url_gambar" alt="deskripsi_gambar">
</center>

Menggunakan Tabel

Selain menggunakan CSS, kamu juga bisa menggunakan tabel untuk mengatur letak gambar. Contoh penggunaan tabel adalah sebagai berikut:

<table>
  <tr>
    <td>
      <img src="url_gambar" alt="deskripsi_gambar">
    </td>
  </tr>
</table>

Dengan memahami cara-cara di atas, kamu sekarang sudah dapat mengatur letak gambar di HTML dengan mudah dan cepat. Belajar pemrograman tidaklah sulit asalkan kamu mau berlatih dan terus mencoba. Selamat mencoba!