Cara mengatur posisi gambar di php

Pada tutorial HTML dasar tentang gambar, kita telah mempelajari cara memasukkan gambar ke dalam HTML. Dalam tutorial HTML lanjutan ini kita akan membahas 2 buah atribut yang sering digunakan di dalam mengatur tampilan gambar dalam HTML, yaitu atribut align dan atribut border.

Table of Contents Show

Mengenal Atribut Border pada Tag <img>
Dalam Attribute elemen manakah yang menentukan posisi gambar terhadap text?
Manakah atribut yang dapat dipakai untuk mengubah ukuran image?
Bagaimana cara menampilkan gambar di HTML?
3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?

Seperti yang terlihat, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Sebagai sarana latihan, anda bisa merubah kode diatas dengan mengubah-ubah nilai dari atribut align.

Mengenal Atribut Border pada Tag <img>

Atribut border digunakan untuk menambahkan garis tepi (border) kedalam gambar. Nilai dari atribut ini adalah angka yang berisi ukuran lebar garis tepi dalam satuan pixel. Berikut adalah contoh kode HTML dengan menggunakan atribut border=”5” pada gambar:

Membuat gambar pada posisi tengah memang lebih sedikit digunakan blogger dari pada posisi gambar di kiri dan kanan (using float-left, float-...

Membuat gambar pada posisi tengah memang lebih sedikit digunakan blogger dari pada posisi gambar di kiri dan kanan (using float-left, float-right). Sedikit kode yang berbeda diperlukan untuk membuat gambar berposisi seperti itu (tengah). Posisi ini lebih sering dikenal dengan sebutan "center of position". Tidak banyak kode CSS yang kita butuhkan dan kode ini bisa digunakan secara langsung dalam tag img atau dengan menggunakan kode CSS yang kita simpan di template blog. Satu contoh di bawah ini adalah kode html yang berfungsi untuk membuat center gambar dan digunakan secara langsung di tag img:

<img style="display: block; margin: 0 auto; text-align: center; width: 300px; height: 219px;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJ4GCd1zFnI/AAAAAAAAApc/UFMMwG8Q3ok/s320/Pantai-1.jpg" />

Kode di atas adalah kode html pembuat posisi center dengan bentuk yang paling dasar. Jika sampeyan banya menggunakan posting dalam bentuk gambar akan jauh lebih baik seandainya kode dibuat dalam bentuk kode CSS sehingga bisa dimanfaatkan setiap kali posting. Kode CSS ini disimpan di template blog kemudian beri tanda dalam bentuk "class" seperti misalnya img.imgcenter sehingga ketika gambar diterbitkan maka ditambahkan sebuah "class" dalam "tag img" dan berbentuk seperti berikut : img class="imgcenter". Penggunaan kode CSS juga akan membuat ruang posting menjadi lebih praktis (tidak berjejalan dengan kode html). Sampeyan dapat juga menambahkan beberapa kode CSS yang lain dalam "class tersebut" hingga gambar yang dipostingkan akan tampillebih cantik. Kode baru seperti border, border-radius, drop-shadow (box-shadow), CSS3 transition dan transformation serta hover pasti akan membuat bentuk gambar lebih menarik saat ditonton.

Di bawah ini adalah satu contoh penggunaan kode HTML untuk membuat posisi gambar ditengah (center) yang dilengkapi dengan beberapa kode CSS untuk memperindah tampilan gambar.

Example - Image on Center of Position

Beberapa kode CSS untuk membuat gambar "center" dengan berbagai variasi tambahan kode CSS telah aku sediakan berikut demonya. Sampeyan bisa melihat dan menggunakan kode-kode tersebut untuk membuat tampilan gambar posting yang cantik. Silahkan buka link DEMO di bawah ini:

D E M O

Kode CSS dan xHTML

<style type="text/css">
.imgcenter {
      display: block;
      margin: 0px auto;
      text-align: center;
      width: 400px;
      height: 300px;
}
</style>

<img class="imgcenter" src="http://..../..../images.jpg" />

Fungsi margin pada kode CSS di atas selain untuk membuat "center of position", juga berfungsi untuk mengatur jarak dengan elemen di atas dan bawahnya. Sampeyan bisa mengganti 0 auto dengan yang lain seperti misalnya 10px auto (jarak dengan elemen di atas dan bawahnya 10px) atau bentuk yang lain seperti 2em auto (jarak dengan elemen di atas dan bawahnya 2em --> 1em=18px). Apabila margin-top dan margin-bottom (jarak atas dan bawah) ingin dibuat dalam ukuran berbeda, maka bisa menambahkan kode baru seperti di bawah ini :

<style type="text/css">
.imgcenter {
      display: block;
      margin: 0px auto;
      text-align: center;
      width: 400px;
      height: 300px;
      margin-top: 0;
      margin-bottom: 20px;
}
</style>

Dengan penambahan margin baru seperti di atas, maka jarak dengan element di atasnya sebesar 0px sedang dengan elemen di bawahnya 20px. Satu hal yang amat penting diperhatikan, mungkin pada beberapa kasus dibutuhkan tambahan kode clear: both. Penggunaan kode ini harus kita lakukan saat di atas gambar ada elemen lain yang menggunakan kode float-left atau float-right. Silahkan segera buka DEMO yang telah disertai juga beberapa contoh penggunaan kode CSS pelengkap "fungsi center" berikut penggunaan clear: both;. Simpan kode CSS di template sampeyan (di atas kode ]]></b:skin>). Jangan lupa saat menyimpan kode untuk membuang tag "style" yang berupa <style type="text/css"> dan </style>.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «

Dalam Attribute elemen manakah yang menentukan posisi gambar terhadap text?

Caranya yaitu dengan menggunakan atribut align. Atribut align akan membuat gambar berada pada posisi yang Anda inginkan. Teks yang ditampilkan pun akan menyesuaikan dengan penempatan gambar.

Manakah atribut yang dapat dipakai untuk mengubah ukuran image?

anda bisa menentukan ukuran gambar yang tampil dengan menambahkan atribut height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan lebar gambar yang tampil.

Bagaimana cara menampilkan gambar di HTML?

Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src . Jika kita tidak mengisi atribut src , maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.

3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?

Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar. Atribut alt juga berperan penting untuk mesin pencari seperti Google.