HTML image

HTML – Image Height and Width Attributes

Tinggi dan Lebar adalah atribut HTML yang mendefinisikan tinggi dan lebar sifat unsur itu. Nilai-nilai ini dapat menjadi persentase berbasis (%) atau bergantung pada ukuran pixel.

HTML Height and Width Attributes:

<img src="pic/r.png" height="50" width="100" />

HTML Height and Width (Pixels):

Di atas, kita telah menggunakan nilai-nilai pixel hard-coded untuk tinggi dan lebar dari gambar R Logo untuk memastikan bahwa gambar ini akan selalu membuat 50 piksel tinggi dengan 100 piksel lebar. Dengan Hard-coded nilai-nilai ini, kita memastikan bahwa gambar hanya akan menampilkan 50 piksel tinggi oleh 100 piksel lebar, bahkan jika file gambar itu sendiri terjadi menjadi jauh lebih besar. Jika dimensi dari gambar yang jauh lebih besar, maka kita berisiko beberapa browser mencoba untuk mengecilkan gambar kita ke dalam kotak kecil kita.

Tinggi dan lebar nilai juga bisa menjadi persentase. Nilai persentase yang relatif terhadap induk elemen HTML (biasanya body), yang berarti jika Anda memiliki elemen induk seperti elemen <body> yang seluruh layar (1024×768), kemudian gambar dengan tinggi dan lebar 100% akan mengambil bahwa seluruh elemen body (1024×768). Dalam contoh kita di bawah ini, kami telah menempatkan gambar dalam elemen tabel yaitu sekitar 400 pixel dan lebar 200 pixel tinggi.

HTML Height and Width Code:

<table height='200' width='400'>
  <tr>
    <td>
      <img src="pic/r.png" height="100%" width="100%">
    </td>
  </tr>
</table>

HTML Height and Width (Percentage):

Gambar ini sekarang mempunyai satuan pixel, yang telah diberikan untuk mengisi elemen 400×200 table. Alasan kita melihat kualitas rendah, pixelated render gambar adalah karena file gambar yang sebenarnya jauh lebih kecil dari 400×200 dan telah membentang oleh browser web karena kode kita untuk melakukannya.

Berikut adalah beberapa hal yang perlu diingat ketika mencoba untuk menempatkan gambar pada halaman web Anda:

  1. Mempertahankan ketinggian yang sama untuk rasio lebar.Rasio sangat penting, dan harus dijaga untuk menghindari kemiringan.
  2. Selalu menurunkan skala. — Gambar besar akan di turunkan baik dan selalu terlihat tajam.

Jika tidak ada tinggi atau lebar atribut yang ditentukan dalam tag <img>, browser akan menggunakan dimensi sebenarnya dari file gambar untuk membuat gambar. Hal ini dapat menyebabkan masalah dengan tata letak halaman jika file gambar terlalu besar, sebagai elemen HTML lainnya akan dipindahkan di bagian bawah halaman dalam hal gambar lebih dari ukuran.

Konsep lain yang perlu diingat adalah bahwa sebagai browser mulai render komponen HTML, menangani mereka satu demi satu secara berurutan. Sebelum dapat berpindah dari satu elemen ke berikutnya, browser perlu mengetahui ukuran dan bentuk dari suatu elemen. Jika informasi ini disediakan dalam tag, itu kurang satu langkah yang diperlukan oleh browser untuk membuat elemen gambar dan akan menghasilkan halaman loading lebih cepat bagi pengguna Anda.

HTML – Alternative Attribute

altatribut menentukan teks alternatif yang akan ditampilkan jika karena alasan tertentu browser tidak dapat menemukan gambar, atau jika pengguna memiliki file gambar dinonaktifkan dalam pengaturan browser web mereka. Teks saja browser sangat tergantung pada alt atribut karena mereka tidak mampu menampilkan gambar.

HTML Alternative Attribute (alt):

<img src="pic/r.png" alt="R Log" />

HTML Alternative Text Attribute:

Beautiful Sunset

alt Atribut juga merupakan atribut yang mesin pencari mungkin terlihat ketika menampilkan gambar. Nilai teks yang terkandung dalam atribut ini harus mencerminkan substansi gambar untuk menerima “kredit” dari mesin pencari.

HTML – Horizontally Align Images

Gambar dapat sejajar horizontal ke kanan atau ke kiri dari elemen lain menggunakan i menyelaraskan atribut. Elemen gambar sejajar ke kiri secara default.

  1. align
    • right
    • left

HTML Align Attribute Code:

<img src="pic/r.png" align="right">

HTML Image Align: Right:

Seperti yang Anda lihat, tepi kanan gambar itu kini telah sejajar dengan tepi kanan kotak display. Karena kotak display adalah elemen induk, ini adalah perilaku yang diinginkan untuk atribut align. Jika kita mengambil contoh ini langkah lebih lanjut, Anda dapat mencapai beberapa desain benar-benar hebat dengan melekatkan gambar sejajar dalam ayat.

HTML Image Align Code:

<p>Ini adalah paragraf 1, Saya pikir ini merupakan...</p>
<p>
<img src="pic/r.png" align="right">
Gambar akan muncul di sepanjang sisi...bukan?
</p>
<p>Ini adalah paragraf ketiga yang muncul...</p>

Image Wrap Around:

Ini adalah paragraf 1, Saya pikir ini merupakan contoh yang bagus untuk menunjukkan bagaimana gambar ini bekerja keselarasan.

Gambar akan muncul di sepanjang sisi kanan paragraf. Seperti yang anda lihat ini sangat bagus untuk menambahkan eye candy kecil yang berkaitan dengan ayat tertentu. Jika kita berbicara tentang matahari terbenam tropis yang indah, gambar ini akan menjadi sempurna. Tapi kita tidak berbicara tentang hal itu, jadi agak sia-sia, bukan?

Ini adalah paragraf ketiga yang muncul di bawah paragraf dengan gambar!

Leave a Reply

Your email address will not be published. Required fields are marked *