Widodo

#HTML Dasar Part 6 Cara Memasukkan Gambar di HTML

Cara Memasukkan Gambar Di dalam Web

Gambar dapat barupa ilustrasi, foto, atau file-file lain yang didukung untuk ditampilkan di jendela browser seperti JPG, PNG, GIF, dan sebagainya. Untuk meletakkan gambar didalam desain website , kita dapat menggunakan tag <img>. Tag ini berkerja sama dengan atribut src.

Atribut src, singkatan dari source, yaitu atribut yang berisi alamat dari file gambar yang akan ditampilkan nantinya. Alamat ini bisa berjenis alamat relatif atau alamat abolute.

Untuk membuat contoh kode HTML tentang penggunaan tag <img> ini, langkah pertama, sediakan sebuah file gambar yang akan ditampilkan di jendela browser,dan tempatkan file gambar tersebut kedalam satu folder dengan file halaman HTML Anda. Pada contoh dibawah ini, terdapat sebuah file gambar bernama "logo-siwododcom.png" yang berada dalam satu folder dengan halaman HTML saat ini:

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>Belajar Memasukkan Gambar</title>
   </head>
<body>
         <img src="./logo-siwododcom.png" />
</body>
</html>

Tag <img> tidak memiliki elemen sehingga anda tidak perlu menutup tag ini dengan tag penutup, melainkan bisa langsung menulis <img..../>.

 

Mengenal Atribut Alt

Tag <img> juga dilengkapi atribut penting lainnya, yaitu alt. Alt merupakan singkatan dari alternative description, yang digunakan untuk memberi keterangan dari gambar. Jika  gambar  gagal ditampilkan oleh browser, baik karena koneksi internet yang buruk atau jika web browser telah di-setting untuk tidak menampilkan gambar demi penghematan bandwidth.

Contoh penggunaan atribut alt pada tag<img> sebagai berikut:

<!DOCTYPE html>
<html lang="en">
   <head>
        <title>Belajar Memasukkan Gambar</title>
    </head>
<body>
       <img src="./logo-siwododcom.png" alt="S-WIDODO.COM" />
</body>
</html>

Apabila gambar tidak muncul dijendela browser, maka image placeholder, yaitu kotak tempat gambar itu seharusnya ditampilkan akan tertulis teks dari atribut alt ini. ( dalam contoh diatas adalah teks "S-WODODO.COM" ).

Width dan Height

Atribut lainnya yang digunakan untuk menentukan ukuran gambar yang akan ditampilkan dalam jendela browser yaitu Atribut Width dan Height. Contoh penggunaan atribut width dan height pada tag <img> :

<!DOCTYPE html>
<html lang="en">
   <head>
        <title>Belajar Memasukkan Gambar</title>
    </head>
<body>
       <img src="./logo-siwododcom.png" alt="S-WIDODO.COM" height="100" width="100" />
</body>
</html>

Saat pengaturan gambar menggunakan kedua atribut tersebut, mungkin saja gambar terlihat tidak proporsional karena penggunaan atribut width dan height yang tidak simetris.

Untuk mempertahankan Proporsi gambar saat gambar menjadi besar/kecil, maka cantumkan salah satu atribut saja. Misalnya , jika kita mengisi atribut width="200" tanpa mencantumkan height, maka web browser akan menampilkan gambar dengan lebar 200px dan mengitung secara otomatis tinggi gambar secara simetris sehingga gambar tetap proporsional.

Umumnya, web server akan menampilkan teks terlebih dahulu baru mengirim gambar ke jendela browser. Untuk web server yang memiliki trafik internet sangat tinggi, lambatnya akses internet akan menyebabkan teks-teks tersebut berpindah tempat karena gambar yang terlambat ditampilkan.  Mencantumkan ukuran dari gambar dengan atribut width dan height akan memberikan kesempatan kepada browser untuk memepersiapkan ukuran tersebut untuk peletakan gambar sehingga teks tidak akan berpindah tempat.

 

Tips Memilih Format Grafik

Ada banyak jenis graphic yang ada didunia ini. dari yang sangat spesifik seperti PSD-nya photoshop hingga yang paling umum dan berumur cukup tua seperti GIF.  Namun didunia HTML para web designer memanfaatkan format-format yang paling populer seperti GIF, JPG/JPEG, dan PNG.

Berikut keunggulan masing-masing format graphic diatas.

  • GIF merupan format gambar paling tua diantara  JPEG dan PNG. Hanya mensupport maksimal 256 warna sehingga tidak cocok untuk menampilkan gambar foto terutama yang memiliki informasi warna sangat melimpah. Keunggulannya, ukuran file kecil  sehingga cocok untuk tranmisi internet berbandwidth rendah sekalipun. Keunggulan lainnya anda bisa membuat animasi berbasis GIF.
  • JPEG merupakan format gambar yang paling populer karena memiliki color depth teerbanyak yaitu, 24 bit dengan ukuran yang sangat rendah.cocok untuk menampilkan foto dengan kualitas tinggi sehingga sangat realistis wujudnya.
  • PNG merupakan singkatan dari Portable Network Graphics, format yang digadang-gadang menggantikan JPEG. Color depth-nya bisa mencapai 48-bit yang artiya mampu menyajikan warna jauh lebih banyak, dua kali lipat dari JPEG ( atau dua kali lipat dari 1.6 juta warna ). Tidak men-suport animasi, namun bisa menddukung transparansi.

Variasi Memasukkan Gambar

Cukup mudah memasukkan graphic, baik foto maupun gambar kedalam web page. Anda bisa memanfaatkan tag <img> dan menyebut nama file gambar yang akan diletakkan.

Contohnya :

 <img src="logo-siwododcom.png" alt="S-WIDODO.COM">

Pada contoh penulisan script diatas, diasumsikan bahwa file gambar itu berada dalam folder yang sama dengan script HTML yang sedang anda buat. Jika letaknya berbeda, Anda bisa menggunakan absolute path atau relative path.

Contoh script HTML untuk menghadirkan gambar dalam web page.

 <!-- absolute -->
    <img src="https://s22.postimg.org/72h82he5d/logo-siwododcom.png" alt="S-WIDODO.COM">
<!-- relative -->
   <img src="./nama-folder/logo-siwododcom.png" alt="S-WIDODO.COM">

Secara default, teks-teks akan diletakkan dibawah gambar walaupun gambar itu-secara horizontal-menyisakan ruang kosong di sisi kanannya. Agar teks bisa "naik" sehingga sejajar dengan gambar atau foto,Anda bisa menggunakan float dan mengisinya dengan atribut left atau right. Berikut Contohnya :

<!DOCTYPE html>
<html lang="en">
      <head>
            <title>Belajar Memasukkan Gambar</title>
       </head>
<body>
         <img src="./logo-siwododcom.png" alt="S-WIDODO.COM" height="100" width="100" style="float:left" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>


Hyperlink Menggunakan Gambar

Jika sebelumya kita bekerja menggunakan teks sebagai hyperlink pada artikel sebelumnya Cara Membuat Link maka sekarang saatnya memanfaatkan gambar sebagai hyperlink. Caranya dengan menggabungkan tag <a> dan <img>.

Berikut Contoh scriptnya :

<!DOCTYPE html>
<html lang="en">
   <head>
        <title>Belajar Memasukkan Gambar</title>
    </head>
<body>
       <a href="http://s-widodo.com">
                 <img src="./logo-siwododcom.png" alt="S-WIDODO.COM" height="100" width="100" style="float:left" />
       </a>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Secara default, gambar yang telah dijadikan sebuah link akan dikelilingi border. Apabila anda tidak ingin ada border di sekeliling foto atau gambar ber-link, hilangkan dengan menggunakan border : none.

Untuk menampilkan data, baik itu berasal dari database atau dari sumber lain, akan lebih rapih jika menggunakan tabel. Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas tentang Cara Membuat tabel di HTML menggunakan tag <table>.



0 Komentar


Copyright © 2015 S-widodo.com Digital marketing