Cara mengatur lebar dan tinggi gambar menggunakan HTML

Pengarang: Clyde Lopez
Tanggal Pembuatan: 17 Juli 2021
Tanggal Pembaruan: 1 Juli 2024
Anonim
#4.2 Belajar HTML cara mengubah ukuran gambar / image untuk pemula
Video: #4.2 Belajar HTML cara mengubah ukuran gambar / image untuk pemula

Isi

Artikel ini akan menunjukkan cara mengatur tinggi dan lebar gambar dalam HTML.

  • Atribut "width" mengatur lebar gambar (dalam piksel).
  • Atribut "height" mengatur tinggi gambar (dalam piksel).
  • Dalam HTML4.01, tinggi dapat diatur dalam piksel atau sebagai persentase, tetapi dalam HTML5, hanya dalam piksel.

Langkah

  1. 1 Buka file HTMLnya. Misalnya, buka file default.html.
  2. 2 Tambahkan baris berikut ke kode HTML Anda.
    • img src = "file gambar.webp" alt = "Gambar" tinggi = "42" lebar = "42">
    • src berisi path ke file grafik (gambar).
    • di alt, ukuran gambar diatur.
  3. 3 Ganti nilai atribut tinggi dan lebar dengan nilai yang Anda inginkan. Misalnya seperti ini: tinggi = "19" lebar = "20"
  4. 4 Simpan file dan buka di browser web apa pun. Lakukan ini untuk memeriksa bagaimana gambar diubah ukurannya. Atribut "width" didukung oleh semua browser utama (Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer).

Tips

  • Selalu atur tinggi dan lebar gambar. Jadi ketika halaman dimuat, ruang disediakan untuk gambar. Jika tidak, browser tidak akan mengetahui ukuran gambar dan tidak akan memesan ruang, menyebabkan tata letak halaman berubah saat halaman dimuat.
  • Jika ukuran gambar besar diperkecil menggunakan atribut "height" dan "width", pengguna akan memuat gambar besar (meskipun tampak kecil di halaman). Oleh karena itu, kami menyarankan Anda terlebih dahulu mengubah ukuran gambar di editor grafis.