cara membuat gambar di tengah html

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.

Mengenal HTML dan CSS

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.

Menempatkan Gambar di Tengah Halaman Menggunakan HTML dan CSS

Berikut adalah langkah-langkah sederhana untuk menempatkan gambar di tengah halaman menggunakan HTML dan CSS:

1. Siapkan Gambar

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.

2. Input Gambar

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.

3. Menambahkan CSS

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!

CARA MEMBUAT GAMBAR DI TENGAH HTML

Artikel ini akan memberikan panduan sederhana mengenai cara membuat gambar berada di tengah halaman HTML. Penjelasan didasarkan pada kode HTML dan CSS yang mudah dipahami.

Mengenal HTML dan CSS

Menempatkan Gambar di Tengah Halaman Menggunakan HTML dan CSS

1. Siapkan Gambar

2. Input Gambar

3. Menambahkan CSS

Kelas membuat website dengan HTML dan CSS