Cara Memusatkan Gambar Menggunakan Pemrograman HTML

...

Gunakan CSS untuk menentukan tampilan halaman Web.

Pengkode halaman Web menggunakan Hypertext Markup Language untuk memberi tahu browser Web tujuan fungsional setiap elemen pada halaman, seperti paragraf, judul, atau daftar. Sejak HTML 4, Cascading Style Sheets telah menyediakan pembuat kode dengan cara untuk memberitahu browser bagaimana masing-masing elemen akan terlihat, terpisah dari mendefinisikan apa mereka. Halaman dapat memiliki gaya CSS yang berbeda untuk berbagai jenis perangkat, seperti ponsel dan komputer desktop, yang memungkinkan tampilan halaman berubah tanpa pembuat kode perlu mengubah HTML. Gunakan properti CSS untuk memusatkan gambar.

Langkah 1

Tempatkan tag "img" di file HTML di mana Anda ingin gambar Anda ditampilkan di halaman Web. Itu harus berada di antara tag "body" dan setelah tag "h1". Sebagai contoh,

Video Hari Ini

Ini adalah teks Anda.

Deskripsi gambar

mendefinisikan gambar bernama photo.jpg dengan lebar 170 piksel dan tinggi 50 piksel. Ini adalah hal pertama pada halaman setelah heading teratas.

Langkah 2

Gunakan atribut CSS "margin" untuk menentukan ruang di sekitar elemen halaman, seperti gambar. Nilai "otomatis" untuk atribut margin memberitahu browser Web untuk secara otomatis menentukan jumlah ruang. Jadi, Deskripsi gambar mendefinisikan bahwa ruang di sekitar gambar ditentukan oleh browser.

Langkah 3

Gunakan properti "display" untuk menentukan bagaimana elemen halaman ditampilkan. Nilai "blok" untuk properti tampilan memberitahu browser Web untuk menampilkan elemen pada barisnya sendiri, dengan spasi di atas dan di bawahnya. Jadi, Deskripsi gambar mendefinisikan gambar yang sama, tetapi penambahan "display: block;" sekarang menempatkannya di jalurnya sendiri.

Langkah 4

Lihat halaman Web di beberapa browser berbeda untuk memverifikasi bahwa gambar berada di tengah dengan benar.

Tip

Sertakan deskripsi gambar dalam tag "alt". Ini membuat halaman Anda lebih mudah diakses oleh pembaca dengan gangguan penglihatan dan memastikan bahwa kode Anda sesuai standar. Deskripsi gambar