Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Dalam pembuatan website, seringkali kita perlu membuat sebuah gambar berada di tengah halaman. Proses ini mungkin tampak rumit bagi beberapa orang, terutama bagi pemula dalam bidang web design dan development. Namun jangan khawatir, artikel ini akan membimbing kamu untuk melakukan hal tersebut dengan mudah dan cepat.
Sebelum melangkah lebih jauh, penting bagi kita untuk mengetahui dasar dari HTML dan CSS. HTML (Hyper Text Markup Language) adalah bahasa markup standar yang digunakan untuk pembuatan struktur halaman web. Sedangkan CSS (Cascading Style Sheets) adalah bahasa gaya yang digunakan untuk mendesain dan mempercantik tampilan halaman web yang sudah dibuat dengan HTML.
Berikut adalah langkah-langkah sederhana untuk menempatkan gambar di tengah halaman menggunakan HTML dan CSS:
Pertama, kamu perlu memiliki gambar yang ingin di letakkan di tengah halaman. Pastikan kamu sudah menyimpan gambar tersebut di folder yang sama dengan file HTML kamu.
Kedua, masukkan gambar ke dalam dokumen HTML dengan tag <img>. Sebagai contoh:
<img src="gambar.jpg" alt="Deskripsi gambar">Attribute src berfungsi untuk menunjukkan lokasi dari gambar yang ingin ditampilkan, sedangkan alt digunakan untuk deskripsi gambar.
Ketiga, tambahkan CSS untuk membuat gambar berada di tengah. Kita bisa menggunakan CSS Inline, Internal CSS, ataupun External CSS. Namun, pada contoh kali ini kita akan menggunakan CSS Inline sebagai metode penyelesaian.
Berikut adalah kode lengkap dengan CSS Inline.
<html>
<body>
<div style="display: flex; justify-content: center;">
<img src="gambar.jpg" alt="Deskripsi Gambar">
</div>
</body>
</html>Di dalam kode di atas, kita menggunakan properti display: flex; dan justify-content: center;. Ini akan membuat gambar berada di tengah secara horizontal.
Dan itulah cara sederhana untuk meletakkan gambar di tengah halaman HTML. Semoga artikel ini membantu kamu dalam belajar HTML dan CSS. Selamat mencoba!
Link terkait: