Cara Mengatur Panjang dan Lebar Gambar Menggunakan HTML

Unduh PDF
Disusun bersama Staf wikiHow

Unduh PDF

Panjang dan lebar gambar pada HTML menunjukkan ukuran gambar dalam piksel. Pada HTML 4.01, panjang dan lebar gambar dapat ditampilkan dalam piksel atau %. Pada HTML5, panjang dan lebar gambar harus menggunakan piksel. Artikel wikiHow ini berisi panduan untuk mengatur ukuran gambar melalui kode HTML.

Langkah

Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Komputer Windows dan Mac memiliki program penyunting teks, seperti Notepad dan Text Edit, yang bisa digunakan untuk membuat atau menyunting HTML. Anda dapat membuka dokumen HTML melalui program penyunting teks dengan cara mengeklik Open pada menu File . Anda juga dapat mengeklik kanan berkas yang ingin disunting lalu klik Open With… .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <img src="imagefile.jpg" alt="Image" height="42" width="42">
    • src adalah tempat berkas gambar.
    • alt adalah penanda ( tag ) yang Anda tentukan untuk gambar.
    • Perhatikan bahwa angka yang dimasukkan berbentuk piksel.
    • Anda juga dapat menggunakan penanda style . Sebagai contoh, kode ini akan dimasukkan pada teks: <img src="imgfile.jpg" alt="Image" style="width:500px;height:600px;"> . Penanda style memastikan ukuran benda tidak akan berubah dan menolak pengubahan ukuran gambar lanjutan. [1]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Sebagai contoh, apabila Anda memasukkan 21 pada area width dan height , ukuran gambar akan berubah menjadi setengah ukuran semula.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Apabila Anda tidak menyukai hasilnya, ulangi proses di atas. [2]
    Iklan

Tips

  • Selalu sesuaikan panjang dan lebar gambar. Apabila panjang dan lebar gambar sudah diatur, ruang yang dibutuhkan gambar akan tersimpan ketika memuat halaman tersebut. Akan tetapi, apabila ini tidak dilakukan, peramban tidak dapat mengetahui ukuran gambar dan tidak bisa menyediakan ruang yang sesuai. Struktur halaman akan berubah ketika dimuat (sementara gambar terus memuat).
  • Mengecilkan panjang dan lebar gambar yang besar akan memaksa pengguna mengunduh gambar yang besar (walaupun gambar terlihat kecil di halaman). Untuk menghindari ini, ubah ukuran gambar menggunakan program yang sesuai sebelum digunakan pada halaman.
Iklan

wikiHow Terkait

Cara
Memperbesar Volume Komputer
Cara
Memperbaiki Laptop yang Tidak Mengisi Daya
Cara
Mengatur Kecerahan Layar di Komputer Windows 7
Cara
Mengatur Komputer untuk Mengakses LAN
Cara
Mematikan Komputer Secara Otomatis pada Waktu Tertentu
Cara
Menutup Jendela Aplikasi pada Komputer dan Ponsel
Cara
Mengetikkan Simbol pada Laptop
Cara
Menghubungkan Laptop ke Proyektor
Cara
Menghubungkan Printer ke Komputer Anda
Cara
Menghubungkan Perangkat Audio ke Komputer
Cara
Membalikkan Layar Komputer Anda
Cara
Menonaktifkan Tombol Function
Cara
Menggunakan Aplikasi AirDroid pada Android
Cara
Menghubungkan Headset ke PC
Iklan

Referensi

  1. ↑ https://www.w3schools.com/html/html_images.asp
  2. ↑ https://www.w3schools.com/tags/att_img_width.asp

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 126.366 kali.

Apakah artikel ini membantu Anda?

Iklan