Cara Mengatur Posisi Gambar Di HTML


Mengatur Posisi Gambar Di HTML – Sebuah website atau blog terbuat dari sederet kode yang banyak dan cukup rumit. Salah satu bahasa pemrograman web yang sudah sangat populer adalah HTML. Dengan HTML kita bisa melakukan banyak hal saat ingin membuat sebuah website. Salah satunya adalah memasukkan gambar.

Seperti yang diketahui gambar sudah menjadi bagian tak terpisahkan dari suatu web. Tanpa adanya gambar web atau artikel yang ada di dalam sebuah situs akan terlihat hambar dan monoton. Maka dari itu kita bisa menambahkan gambar ke dalamnya. Dan kita juga bisa melakukannya lewat HTML.

Dengan beberapa kode khusus gambar yang diinginkan bisa muncul pada halaman yang kita buat dengan HTML. Supaya Anda lebih paham berikut kami bahas bagaimana memasukkan gambar di HTML, berikut cara mengatur posisinya sehingga letak gambar bisa sesuai dengan keinginan.

Memasukkan Gambar di HTML

Sebelumnya perlu diketahui bahwa tidak semua format gambar didukung oleh bahasa pemrograman HTML. Sehingga Anda perlu memastikan bahwa format gambar yang Anda miliki sudah sesuai dengan yang didukung oleh dokumen HTML. Silakan simak tabel berikut:

Format Gambar Ekstensi
APNG .apng
GIF .gif
ICO .ico, .cur
JPEG .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG .png
SVG .svg

Setelah mengetahui ekstensi gambar yang didukung, kini kita bahas bagaimana cara menyisipkan gambar ke dalam dokumen HTML. Perlu dicatat bahwa menyisipkan gambar pada dokumen HTML yang dibahas pada tutorial ini memanfaatkan atribut atau tag yang diketikkan secara manual pada text editor.

Baca juga: Cara Membuat Tabel Di HTML

Untuk memasukkan gambar kita harus memakai tag <img>. Di samping itu kita juga membutuhkan atribut untuk memanggil gambar yang diinginkan agar bisa tampil pada browser. Atribut yang dipakai adalah Src. Atribut ini dipakai untuk menarik gambar dari server penyimpanan. Di dalamnya terdapat sebuah link untuk menuju ke direktori beserta nama file gambar yang ingin dimunculkan. Contohnya adalah sebagai berikut:

  1. <img src=”/images/city.png”>
  2. <img src=”holiday.jpg”>

Pada text editor kita hanya perlu memasukkan sintaks tersebut pada bagian yang diinginkan.

Memasukkan Gambar dari Internet

Pada sintaks di atas kita memasukkan gambar yang berada dalam satu server atau lokasi penyimpanan yang sama. Lalu bagaimana jika kita ingin memunculkan gambar dari internet atau web lain?

Penulisan kode HTML untuk kasus ini masih sama seperti di atas. Hanya saja setelah atribut scr yang kita masukkan adalah URL dari gambar tersebut. Penulisannya adalah sebagai berikut:

<img src=”https://namasitus.com/namagambar.jpg” />

Penulisan URL tidak selalu sama dengan contoh di atas. Tinggal disesuaikan dengan URL gambar yang ingin Anda masukkan.

Atribut Tag <img>

Tag <img> mempunyai beberapa atribut yang bisa kita manfaatkan. Setidaknya ada empat atribut yang sering digunakan, antara lain:

  1. alt: fungsinya untuk menambahkan teks alternatif pada suatu gambar.
  2. width: digunakan untuk menentukan lebar gambar.
  3. height: dipakai untuk menentukan tinggi gambar.
  4. style: dipakai untuk menentukan style CSS pada suatu gambar.

Mengatur Ukuran Gambar

Dari atribut yang kami jelaskan di atas, diketahui bahwa dengan tag <img> kita bisa mengubah ukuran atau dimensi sebuah gambar. Caranya dengan menggunakan width dan height. Cara penggunaannya sederhana, cukup ketikkan sintaks seperti berikut:

<img src=”namagambar.png” style=”width:500px;height:400px;”>

Silakan sesuaikan nama gambar dengan gambar yang ingin dimunculkan. Ingat penulisan harus benar. Di samping itu Anda bisa menentukan dimensi dengan memasukkan lebar dan tinggi gambar yang diinginkan pada atribut width dan height yang dinyatakan dalam satuan pixel atau px. Anda juga bisa menentukan width saja untuk mengubah ukuran gambar. Sedangkan tingginya akan menyesuaikan.

Mengatur Posisi Gambar

Jika Anda ingin mengatur posisi gambar di HTML maka Anda perlu menggunakan atribut align. Atribut ini dipakai untuk mengatur posisi gambar dari objek yang ada di sekitarnya. Bagaimana jika kita tidak memakai atribut ini?

Secara default gambar yang dimasukkan ke dalam dokumen HTML maka akan berada di atas teks. Maka dari itu kita perlu menggunakan atribut align untuk membuat gambar berada di posisi yang diinginkan. Nantinya teks akan menyesuaikan dengan peletakan gambar.

Dengan atribut ini kita bisa meletakkan gambar di beberapa posisi. Seperti kanan kiri, atas, bawah, dan tengah. Penulisan kode HTML align bisa Anda simak di bawah ini:

  1. <img src=”namagambar.jpg” align=”right”>
  2. <img src=”namagambar.jpg” align=”left”>
  3. <img src=”namagambar.jpg” align=”top”>
  4. <img src=”namagambar.jpg” align=”bottom”>
  5. <img src=”namagambar.jpg” align=”middle”>

Misalnya pada contoh ini kami menyisipkan sebuah logo yang diatur dengan align middle. Kode HTML yang dibuat kurang lebih seperti berikut:

<!DOCTPYE html>

<html>

  <head>

    <title>Menggunakan Atribut Align untuk Mengatur Posisi Gambar di HTML</title>

  </head>

  <body>

    <p>

    <img src=”logo.png” style=”width:300px;” align=”middle”/>

    Ini adalah logo Caraharian.com yang diatur dengan align middle.

    </p>

  </body>

</html>

Pada kode HTML di atas kami menambahkan atribut style yang digunakan untuk mengatur dimensi gambar. Hasilnya akan menjadi seperti berikut:

Mengatur Posisi Gambar dengan Atribut Float

Atribut align yang sudah kami jelaskan di atas memiliki satu kekurangan. Saat gambar dieksekusi dengan atribut ini maka hasilnya akan terlihat kurang rapi. Di samping itu atribut ini atribut align juga tidak ada di HTML5 yang menjadi versi terkini dari bahasa pemrograman HTML.

Sebagai gantinya kita bisa menggunakan properti float. Dengan menggunakan atribut ini teks bisa berada di posisi yang tepat tanpa menabrak teks. Sehingga peletakan gambar dan teks akan tampak lebih rapi.

Cara membuatnya juga tidak susah. Anda hanya perlu memasukkan property float ke dalam atribut style. Penulisannya seperti berikut:

<img src=”namagambar.png” style=”float:right”>

Jika diterapkan pada sebuah file HTML jadinya akan seperti berikut.

Seperti yang bisa Anda lihat, antara teks dan gambar terdapat jarak atau spasi. Sehingga membuat tampilan keduanya terlihat lebih rapi dan enak untuk dibaca.

Baca juga: Cara Merapikan Form HTML Dengan CSS

Memasukkan Gambar dengan Tag <picture>

Anda tentu menyadari bahwa ukuran layar pada perangkat PC, notebook, ataupun smartphone bisa berbeda-beda. Hal ini bisa menimbulkan permasalahan tersendiri pada sebuah situs. Seringkali kita menjumpai tampilan web yang tidak sesuai dengan perangkat yang kita pakai. Terutama gambar yang terlihat lebih besar dan tidak simetris.

Untuk mengatasi tersebut kita bisa menggunakan tag <picture> pada saat menyisipkan gambar. Fungsi dari tag ini adalah untuk menentukan gambar mana yang akan ditampilkan pada ukuran layar tertentu. Penulisan tag ini bisa dilihat pada contoh berikut:

<picture>

      <source media=”(min-width: 650px)” srcset=”namagambar.jpg”>

      <source media=”(min-width: 450px)” srcset=”namagambar2.jpg”>

      <img src=”namagambar.jpg”>

    </picture>

Kode min-width: digunakan untuk layar media yang akan digunakan. Saat memenuhi kriteria yang sudah ditetapkan maka gambar yang dimunculkan adalah yang dimasukkan dalam atribut srcset. Pada contoh di atas apabila tag <picture> tidak didukung maka gambar akan ditampilkan seperti biasa (namagambar.jpg).

Sekian tutorial mengatur posisi gambar di HTML yang bisa kami sampaikan. Selamat mencoba dan semoga panduan di atas bisa membantu Anda.



Loading...

Leave a Comment