Cara Mengatur Posisi Gambar di HTML dan CSS: Panduan Lengkap
Siti Khadijah Azzukhruf Firdausi
•
22 September 2023
•
5594
Salah satu elemen krusial di web development adalah pengaturan tata letak gambar. Oleh sebab itu, developer sebaiknya memiliki keterampilan mengenai cara mengatur posisi gambar di HTML dan CSS.
Gambar di web bukan hanya sekadar elemen penambah estetika, namun ini juga meningkatkan pengalaman pengguna. Untuk membantu kamu memahaminya, berikut adalah panduannya!
Fungsi Gambar untuk Pengembangan Web
Beberapa fungsi pentingnya dalam pengembangan web, antara lain:
Memberikan ilustrasi visual pada konten teks.
Menghias halaman web, serta membuatnya lebih menarik dan estetis.
Memberikan penjelasan tambahan. Contohnya ada di dalam tutorial atau artikel, gambar dapat digunakan untuk menunjukkan langkah-langkah atau ilustrasi konsep.
Tampil sebagai branding misalnya sebagai logo perusahaan.
Digunakan pada menu atau tombol navigasi untuk memberikan pengguna petunjuk visual tentang tindakan yang dapat mereka ambil.
Elemen utama yang ditampilkan pada web galeri foto.
Menambah aksesibilitas sebab gambar dapat memiliki atribut alt yang memberikan deskripsi alternatif bagi pengguna.
Meningkatkan visibilitas dan interaksi dengan halaman web saat gambar menjadi thumbnail.
Pada halaman web e-commerce, gambar digunakan untuk memperkenalkan produk kepada pengunjung.
Sebagai dekorasi pelengkap tampilan web.
Apa Saja Elemen HTML untuk Sisipkan Gambar?
Sebelum pelajari cara mengatur posisi gambar di HTML, mari pelajari elemen terkaitnya. Untuk menyisipkan gambar dalam dokumen HTML, elemen <img> umumnya akan digunakan.
Elemen ini memungkinkan developer untuk memuat gambar dari sumber lokal atau URL. Berikut adalah atribut utama dari elemen <img>:
src (source): Atribut yang paling penting, menentukan path ke gambar yang ingin ditampilkan.
alt (alternative text): Teks alternatif yang muncul jika gambar tidak bisa ditampilkan, penting untuk aksesibilitas.
title: Menyediakan informasi tambahan tentang gambar ketika pengguna mengarahkan kursor ke atasnya.
width: Mengatur lebar gambar. Bisa dalam piksel atau persentase.
height: Mengatur tinggi gambar. Bisa dalam piksel atau persentase.
Berikut adalah skrip contoh penggunaan elemen <img>:
Apa Saja Elemen CSS untuk Sisipkan Gambar?
CSS tidak digunakan untuk menyisipkan gambar ke dalam halaman web dengan cara yang sama seperti elemen HTML. Sebaliknya, CSS sering digunakan untuk mengatur tampilan dan posisi gambar yang sudah disisipkan dengan HTML.
Namun, ada beberapa properti CSS yang memungkinkan developer untuk menggunakan gambar dalam desain. Contohnya, sebagai latar belakang elemen:
background-image: Menyisipkan gambar sebagai latar belakang elemen.
background-position: Mengatur posisi latar belakang.
background-size: Mengontrol ukuran latar belakang, misalnya cover atau contain.
background-repeat: Menentukan apakah gambar latar belakang harus diulang.
Selain itu, CSS dapat digunakan untuk mengatur aspek visual gambar seperti:
border: Menambahkan bingkai di sekitar gambar.
border-radius: Membuat sudut gambar menjadi bulat.
opacity: Mengatur tingkat kejelasan gambar.
filter: Menerapkan efek seperti blur atau grayscale pada gambar.
Contoh penggunaan CSS untuk gambar:
Baca Juga: Cara Memanggil CSS di HTML Lewat 3 Metode
Bagaimana Cara Mengatur Posisi Gambar di HTML?
Secara umum, cara mengatur posisi gambar di HTML secara langsung sangat terbatas. Hal ini karena HTML sendiri tidak didesain untuk mengendalikan layout atau posisi elemen secara detail.
1. Sisipkan Gambar dengan Tag <img>
Cara mengatur posisi gambar di HTML pertama adalah menggunakan tag <img>. Untuk melakukan hal ini, pastikan untuk menyertakan atribut src untuk menunjukkan sumber file gambar dan alt untuk teks alternatif.
Berikut penggunaannya:
2. Menggunakan Atribut align pada Tag <img>
Kedua, cara mengatur posisi gambar di HTML adalah dengan menggunakan atribut align pada tag <img>. Hal ini bisa digunakan untuk mengapit gambar dengan teks. Atribut align dapat memiliki nila left, right, top, middle, atau bottom.
Perlu dicatat bahwa penggunaan atribut align sudah agak ketinggalan jaman dalam HTML5. Oleh sebab itu, penggunaan CSS sangat disarankan.
3. Mengatur Gambar dalam Tabel (Tidak Direkomendasikan)
Cara mengatur posisi gambar di HTML berikutnya adalah memindahkan gambar dengan tabel. Namun, praktik ini tidak disarankan. Sebab, semantik HTML mengharuskan tabel digunakan untuk data, bukan layout.
Namun, kamu bisa mengelabui posisi gambar dengan tabel. Berikut adalah penggunaannya:
4. Menyesuaikan dengan Spasi Non-Breaking ( )
Cara mengatur posisi gambar di HTML terakhir adalah menyesuaikan dengan spasi non-breaking ( ). untuk mendorong gambar dari elemen lain atau tepi halaman. Ini sangat tidak efisien dan kurang direkomendasikan untuk penggunaan praktis. Berikut penggunaannya:
Baca Juga: Cara Membuat Form di HTML Secara Lengkap
Bagaimana Cara Mengatur Posisi Gambar di CSS?
Berbeda dengan cara mengatur posisi gambar di HTML, CSS memberikan kontrol yang lebih luas dan presisi tinggi atas penampilan dan tata letak gambar di halaman web.
Dengan CSS, kamu bisa menentukan posisi gambar relatif terhadap elemen lain, mengatur ukurannya, dan menentukan interaksinya dengan elemen lain. Berikut adalah panduan lengkap tentang cara mengatur posisi gambar di CSS:
1. Menentukan Gambar dalam HTML
Cara mengatur posisi gambar di CSS adalah sisipkan gambar ke dalam dokumen HTML. Ini akan menjadi titik awal sebelum mengaplikasikan gaya CSS.
Berikut adalah contoh penyisipannya:
Dalam contoh di atas, class=”myImage” digunakan untuk mengidentifikasi gambar dalam file CSS.
2. Menggunakan Properti position
CSS position adalah properti inti untuk mengontrol penempatan gambar. Berikut beberapa komponennya:
Static: Ini adalah nilai default untuk setiap elemen. Elemen akan berada dalam aliran normal dokumen.
Relative: Elemen diposisikan relatif terhadap posisinya yang normal, tanpa mempengaruhi layout elemen lain.
Absolute: Elemen diposisikan relatif terhadap elemen induknya yang pertama kali memiliki properti position selain static. Elemen ini akan keluar dari aliran normal dokumen.
Fixed: Elemen diposisikan relatif terhadap viewport dan tetap di tempat saat halaman di-scroll.
Sticky: Elemen adalah kombinasi antara relative dan fixed, di mana elemen akan "bertahan" di posisi tertentu saat pengguna melakukan scroll.
3. Mengatur z-index (Opsional)
Apabila kamu bekerja dengan lebih dari satu elemen untuk diposisikan, z-index dapat membantu pengontrolan elemen tersebut.
4. Menggunakan Flexbox atau Grid untuk Tata Letak Kompleks
Terakhir, kamu bisa gunakan Flekbox atau CSS Grid untuk penempatan dan penyelarasan yang lebih kompleks, terutama dalam konteks layout responsif.
Flexbox
CSS Grid
Itulah beberapa cara untuk mengatur posisi gambar di HTML. Untuk mengatur gambar, ada baiknya kamu juga menggunakan bantuan CSS untuk desain web yang lebih baik.
Berbicara tentang desain dan pengembangan web, MinDi punya rekomendasi untuk kamu yang tertarik mempeljarinya. Apabila kamu tertarik, MinDi sarankan untuk ikuti Bootcamp Frontend Web Development Dibimbing.
Dengan mengikuti program ini, kamu bisa belajar semua hal berkaitan dengan web development. Mulai dari teori hingga praktik dengan real-case project. Intinya, kamu bakal dibimbing sampai jadi!
Menarik bukan? Yuk, daftar dan kembangkan keahlianmu di industri ini bersama Dibimbing.id!
Tags
Siti Khadijah Azzukhruf Firdausi
Khadijah adalah SEO Content Writer di Dibimbing dengan pengalaman menulis konten selama kurang lebih setahun. Sebagai lulusan Bahasa dan Sastra Inggris yang berminat tinggi di digital marketing, Khadijah aktif berbagi pandangan tentang industri ini. Berbagai topik yang dieksplorasinya mencakup digital marketing, project management, data science, web development, dan career preparation.