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



Leave a Comment