Cara Mengatur Posisi Gambar di HTML, Begini Tahapannya
How to tekno
·waktu baca 3 menit
Tulisan dari How To Tekno tidak mewakili pandangan dari redaksi kumparan
PerbesarSalah 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
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:
<!Doctype Html>
<Html>
<Head>
<Title>
Cara mengatur posisi gambar
</Title>
</Head>
<Body>
Hello!
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" >
</Body>
</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.
<img align="top/left/bottom/middle/right" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="200" height="200" >
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.
<!Doctype Html>
<Html>
<Head>
<Title>
Cara mengatur posisi gambar di bagian tengah
</Title>
</Head>
<Body>
Hello!
<p>Website ini memberikan informasi bagaimana cara mengatur posisi gambar.
<img align="middle" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" >
</p>
</body>
</html>
Posisi gambar di bagian atas
Untuk mengatur gambar di bagian atas, berikut kode yang bisa kamu coba.
<!Doctype Html>
<Html>
<Head>
<Title>
Cara mengatur gambar di bagian atas
</Title>
</Head>
<Body>
Hello!
<p>Website ini memberikan informasi bagaimana cara mengatur posisi gambar.
<img align="top" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" >
</p>
</body>
</html>
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.
<!Doctype Html>
<Html>
<Head>
<Title>
Cara mengatur gambar di bagian bawah
</Title>
</Head>
<Body>
Hello!
<p>Website ini memberikan informasi bagaimana cara mengatur posisi gambar.
<img align="bottom" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" >
</p>
</body>
</html>
Posisi gambar di sebelah kiri
Bila kamu ingin mengatur posisi gambar di sebelah kiri, berikut kode yang bisa dimanfaatkan.
<!Doctype Html>
<Html>
<Head>
<Title>
Cara mengatur gambar di sebelah kiri
</Title>
</Head>
<Body>
Hello!
<p>Website ini memberikan informasi bagaimana cara mengatur posisi gambar.
<img align="left" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" >
</p>
</body>
</html>
Posisi gambar di sebelah kanan
Untuk mengatur gambar agar di posisi kanan, berikut kode HTML yang bisa kamu gunakan.
<!Doctype Html>
<Html>
<Head>
<Title>
Cara mengatur gambar di sebelah kanan
</Title>
</Head>
<Body>
Hello!
<p>Website ini memberikan informasi bagaimana cara mengatur posisi gambar.
<img align="right" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" >
</p>
</body>
</html>
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)
Frequently Asked Question Section
Apa yang dimaksud dengan HTML?
Apa yang dimaksud dengan HTML?
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.
HTML biasanya digunakan untuk apa?
HTML biasanya digunakan untuk apa?
Sebagian besar jenis situs web seperti blog pribadi, hingga situs web resmi perusahaan memanfaatkan HTML untuk memformat teks dan berbagai media lainnya, termasuk gambar.
Apa atribut untuk meratakan posisi gambar di HTML?
Apa atribut untuk meratakan posisi gambar di HTML?
Atribut <img> align digunakan untuk mengatur perataan gambar. Atribut itu adalah elemen sebaris dan digunakan untuk menentukan perataan gambar menurut elemen sekitarnya.