Sebuah halaman HTML niscaya mempunyai gambar, selain sebagai sarana untuk memperindah halaman HTML, gambar juga berkhasiat sebagai klarifikasi dari kat-kata, alasannya ialah tidak semuanya sanggup dijelaskan dengan kata-kata, makanya diharapkan gambar.
Tidak heran pada setandard web ketika ini sangat jarang kita lihat lahaman HTML tanpa adanya gambar. Dengan memasang gambar pada halaman HTML maka halaman tersebut akan lebih manis dan lebih segar. Pada tutorial kali ini kita akan mempelajari cara menampilkan gambar kedalam halaman web dengan penggunaan tag <img>.
Fungsi atribut src dalam tag <img>
Atribut src ialah abreviasi dari source, merupakan atribut yang berisi perihal alamat dari sebuah gambar yang akan ditampilkan. Alamat ini sanggup relatif atau absolute. (perbedaan perihal alamat relatif dan alamat absolute telah kita bahas pada Cara Membuat Link Pada HTML). Untuk memudahkan kita dalam mempelajari image ini, sebaik kita pribadi memperaktekkannya. Untuk tutorial kali ini kita membutuhkan sebuah gambar, gambar sanggup berupa JPEG, PNG, maupun GIF.
Dibawah ini aku sudah sediakan pola Code HTML untuk menampilkan gambar. Pada pola diibawah ini file Gambar dengan file HTML-nya berada dalam satu folder. Teman-teman sanggup menulis code diibawah ini dan simpan dengan nama gambar.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1> Menampilkan Gambar </h1>
<img src="gambar.jpg" />
</body>
</html>
Maka kalau teman-teman jalankan pada web browser akan menghasilkan menyerupai gambar berikut ini :
Hati-hati dengan penulisan alamat dari gambar, sering gambar gagal tampil alasannya ialah letak file HTML berbeda dengan file Gambar. Pada CODE diatas file HTML dan file GAMBAR nya berada dalam satu folder sehingga kita sanggup pribadi memanggil nama dari file gambar tersebut, kalau file gambar berbeda folder dengan file HTML-nya kita haru sebutkan nama folder nya. Contoh file gambar berada dalam folder images maka kita harus merubah code HTML nya menyerupai ini : <img src="images/gambar.jpg" />
Fungsi Atribut alt dalam tag <img>
Dalam tag image juga mempunyai atribut penting lainnya, yaitu alt. Atribut alt ialah abreviasi dari alternative description, dimana alt dipakai untuk keterangan dari gambar kalau gambar tersebut gagal ditampilkan oleh browser, atau kalau web broser telah disetting untuk tidak menampilkan gambar Atribut ini lah yang akan memperlihatkan keterangan perihal gambar tersebut. Berikut ialah Contoh penggunaan atribut alt pada tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1>Menampilkan Gambar</h1>
<img src=" gambar.jpg" alt=" Sebuah halaman HTML niscaya mempunyai gambar Cara Menambahkan Gambar dalam HTML "font-family: "times new roman" , "serif"; font-size: 14.0pt; line-height: 115%;">Gambar vektor aku " />
</body>
</html>
Hasil dari code diatas sama seperi gambar pertama alasannya ialah alt dipakai untuk keterangan dari gambar kalau gambar tersebut gagal ditampilkan oleh browser. Atribut alt juga berperan penting untuk mesin pencari menyerupai Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses goresan pena yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa pemberian deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.
Mengatur ukuran gambar dengan Atribut width dan height dalam tag <img>
Selain atribut yang sudah dijelaskan diatas masih ada satu atribut lain yang juga sangat penting yaitu width dan height. Atribut width dan height ialah Atribut yang mengatur ukuran dari gambar yang kita tampilkan. Berikut pola penggunaan atribut width dan height pada tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1> Menampilkan Gambar </h1>
<img src="gambar.jpg" alt=" Sebuah halaman HTML niscaya mempunyai gambar Cara Menambahkan Gambar dalam HTML "font-family: "times new roman" , "serif"; font-size: 14.0pt; line-height: 115%;">Gambar vektor aku " height="200" width="100" />
</body>
</html>
Maka kalau teman-teman jalankan pada web browser akan menghasilkan menyerupai gambar berikut ini :
Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini alasannya ialah penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan. Untuk mempertahankan proporsi gambar, namun tetap menciptakan gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan kalau kita memutuskan atribut height =200px (tanpa mencantumkan width), maka web browser akan menampilkan gambar dengan tinggi 200px, dan menghitung secara otomatis lebar gambar semoga gambar tetap proporsional. Berikut ini pola yang memakai hanya salah satu atribut saja.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1> Menampilkan Gambar </h1>
<img src="gambar.jpg" alt="Gambar Koala" height="200" />
</body>
</html>
Maka kalau teman-teman jalankan pada web browser akan menghasilkan menyerupai gambar berikut ini :
Tutorial diatas hanya sebatas untuk menampilkan gambar, memperlihatkan keterangan dari gambar dan mengatur lebar atau tinggi dari gambar. Jika teman-teman mau untuk memperindah dan mengatur letak tampilan dari gambar tersebut, teman-teman sanggup memakai CSS. Terimakasi atas kunjungan nya, untuk tutorial lain nya akan aku bahas dilain waktu.
No comments:
Post a Comment