Cara Mengatur Posisi Gambar di HTML, Begini Tahapannya

Ilustrasi mengoperasikan kode HTML. Foto: Unsplash.com

Salah satu elemen penting di sebuah situs web adalah gambar. Inilah mengapa, cara mengatur posisi gambar di HTML penting diketahui agar tata letaknya di website tak berantakan.

Mempelajari HTML merupakan topik mendasar yang umum dipraktikkan programmer pemula. Salah satu contoh HTML yang paling mudah ditemui adalah situs web. Ada banyak jenis website yang bisa ditemukan di Internet, seperti blog pribadi, hingga situs web resmi perusahaan.

Hampir sebagian besar jenis situs web tersebut memanfaatkan HTML untuk memformat teks dan berbagai media lainnya, termasuk gambar. Lalu, bagaimana cara mengatur gambar di HTML? Simak penjelasan selengkapnya berikut ini.

Cara Mengatur Posisi Gambar di HTML

Ilustrasi cara mengatur posisi gambar di HTML. Foto: Unsplash.com

HTML atau HyperText Markup Language merupakan bahasa markup standar untuk membuat halaman web. Melalui HTML, kamu bisa membuat struktur bagian, paragraf, dan tautan pada halaman web seperti tag dan atribut.

Mengutip Geeks for Geeks, atribut <img> align digunakan untuk mengatur perataan gambar. Atribut itu adalah elemen sebaris dan digunakan untuk menentukan perataan gambar menurut elemen sekitarnya.

Dirangkum dari JavatPoint, berikut cara mengatur posisi gambar di HTML yang bisa kamu coba.

1. Ketikkan kode HTML di editor teks apa pun atau buka file HTML di editor teks yang akan kamu gunakan untuk menyelaraskan gambar.

Contoh kode HTML:

2. Tempatkan kursor di dalam tag <img> dari gambar yang ingin diatur posisinya.

3. Gunakan atribut align dari tag img untuk menentukan lokasi. Artinya, kamu harus mengetikkan atribut align sama seperti yang dijelaskan di blok berikut.

4. Setelah lokasi ditentukan, simpan kode HTML lalu jalankan file tersebut.

Berikut kode HTML untuk mengatur posisi gambar yang bisa kamu coba.

Posisi gambar di bagian tengah

Untuk mengatur posisi gambar di tengah, kamu bisa mencoba kode berikut.

Posisi gambar di bagian atas

Untuk mengatur gambar di bagian atas, berikut kode yang bisa kamu coba.

Posisi gambar di bagian bawah

Untuk meletakkan gambar di bagian bawah, kode HTML berikut bisa kamu gunakan.

Untuk mengatur gambar di bagian atas, berikut kode yang bisa kamu coba.

Posisi gambar di sebelah kiri

Bila kamu ingin mengatur posisi gambar di sebelah kiri, berikut kode yang bisa dimanfaatkan.

Posisi gambar di sebelah kanan

Untuk mengatur gambar agar di posisi kanan, berikut kode HTML yang bisa kamu gunakan.

Itulah cara mengatur posisi gambar di HTML yang bisa kamu praktikkan. Dengan kode di atas, kamu tak perlu khawatir posisi gambar tak sesuai. Selamat mencoba.

(ANM)