Belajar HTML Bagian 11 : Cara Menambahkan Gambar di HTML
December 07, 2017
Add Comment
Penambahan media gambar di website tentu akan membuat tampilan halaman website terlihat menarik dan informatif, tentu ini akan membuat pengunjung betah berlama-lama di website sobat. Format gambar yang paling sering di upload di website adalah PNG, JPEG dan GIF.
Sebelum sobat menambahkan gambar di website , sobat harus mempertimbangkan apakah gambar dan penempatan gambarnya tersebut sesuai dengan tampilan website atau konten website sobat. Jika tidak maka akan membuat pengunjung tidak merasa betah berlama-lama- di website sobat dan yang lebih parah pengunjung tidak akan mengunjungi website sobat lagi. Pada pembahasan kali ini Saya tidak akan membahas tentang gambar atau penempatan gambar yang sesuai di website, tetapi akan membahas cara menambahkan gambar di HTML.
Untuk menambahkan gambar di HTML sobat akan menggunakan tag
Pembahasan Tag
Seperti yang Saya bilang untuk menambahkan gambar sobat akan menggunakan tag
Penggunaan Atribut
Atribut
Untuk sobat yang ingin ingin membuat kode HTML untuk menampilkan gambar di browser, maka sobat terlebih dahulu menyiapkan sebuah gambar dan taruh gambar tersebut di folder Belajar HTML. Untuk format gambar dapat berupa PNG, JPEG maupun GIF.
Pada contoh kali ini saya menggunakan sebuah gambar dengan nama langit dan format-nya PNG, atau jika digabungkan yaitu langit.png.
Contoh penggunaan atribut
Jika sudah diketik kode-nya silahkan simpan di folder Belajar HTML dengan nama image.html dan pastikan di folder Belajar HTML sobat telah menaruh gambar di folder tersebut, jika tidak maka gambar tidak akan muncul. Pastikan juga nama dan format gambar di atribut
Jika Saya buka di browser, maka tampilannya akan seperti gambar dibawah ini :
Penggunaan Atribut
Atribut
Contoh penggunaan atribut
Sebelum Saya telah memindahkan gambar langit.png ke folder lain, tujuannya untuk memastikan atribut
Jika Saya buka di browser, maka tampilannya akan seperti gambar dibawah ini :
Pada gambar diatas terlihat sebuah keterangan berupa teks yang Saya ketik sebelumnya di atribut
Penggunaan Atribut
Untuk menentukan tinggi gambar sobat dapat menggunakan atribut
Contoh penggunaan atribut
Jika Saya buka di browser, maka tampilannya seperti gambar di bawah ini :
Terlihat pada gambar diatas, gambar langit.png terlihat tidak proporsional, hal ini karena penggunaan nilai yang Saya tulis di atribut
Untuk menjadikan gambar terlihat proporsional, namun tetap membuat gambar terlihat kecil, maka sobat hanya menambahkan atribut
Contoh penggunaan atribut
Jika Saya buka di browser, maka tampilannya akan seperti gambar di bawah ini :
Pada contoh kode diatas Saya mengketik atribut
Untuk pembahasan selanjutnya sobat akan mempelajari Cara Membuat Tabel di HTML.
Sebelum sobat menambahkan gambar di website , sobat harus mempertimbangkan apakah gambar dan penempatan gambarnya tersebut sesuai dengan tampilan website atau konten website sobat. Jika tidak maka akan membuat pengunjung tidak merasa betah berlama-lama- di website sobat dan yang lebih parah pengunjung tidak akan mengunjungi website sobat lagi. Pada pembahasan kali ini Saya tidak akan membahas tentang gambar atau penempatan gambar yang sesuai di website, tetapi akan membahas cara menambahkan gambar di HTML.
Untuk menambahkan gambar di HTML sobat akan menggunakan tag
<img> yang merupakan singkatan dari image. Untuk pembahasan lebih lanjut silahkan baca artikel ini sampai selesai :-).
Pembahasan Tag <img>
Seperti yang Saya bilang untuk menambahkan gambar sobat akan menggunakan tag <img>, kalau untuk atribut tag <img> silahkan baca tabel di bawah ini berikut fungsi untuk setiap atribut :| Atribut | Fungsi |
src |
Mencari lokasi gambar |
width |
Menentukan lebar gambar |
height |
menentukan tinggi gambar |
align |
Menentukan posisi gambar |
alt |
Semisalnya gambar tidak ditemukan maka akan muncul sebuah teks |
Penggunaan Atribut src
Atribut src adalah singkatan dari source, atribut ini akan berisi alamat lokasi gambar yang akan di tampilkan.Untuk sobat yang ingin ingin membuat kode HTML untuk menampilkan gambar di browser, maka sobat terlebih dahulu menyiapkan sebuah gambar dan taruh gambar tersebut di folder Belajar HTML. Untuk format gambar dapat berupa PNG, JPEG maupun GIF.
Pada contoh kali ini saya menggunakan sebuah gambar dengan nama langit dan format-nya PNG, atau jika digabungkan yaitu langit.png.
Contoh penggunaan atribut
src di tag <img> :<!DOCTYPE html>
<html>
<head>
<title>Belajar Menambahkan Gambar di HTML</title>
</head>
<body>
<img src="langit.png">
</body>
<html>Jika sudah diketik kode-nya silahkan simpan di folder Belajar HTML dengan nama image.html dan pastikan di folder Belajar HTML sobat telah menaruh gambar di folder tersebut, jika tidak maka gambar tidak akan muncul. Pastikan juga nama dan format gambar di atribut
src sesuai dengan gambar yang ada di folder Belajar HTML, misalkan sobat menaruh gambar di folder Belajar HTML dengan nama ayam dan format-nya JPEG, maka sobat ketik di atribut src yaitu src="ayam.jpeg".Jika Saya buka di browser, maka tampilannya akan seperti gambar dibawah ini :
Penggunaan Atribut alt
Atribut alt adalah singkatan dari alternative description, atribut ini digunakan untuk menampilkan keterangan dalam bentuk teks jika gambar tidak bisa tampil di browser karena alamat lokasi gambar salah, file gambar tidak ada, format gambar tidak di dukung, internet lemot atau browser yang telah diatur agar tidak menampilkan gambar.Contoh penggunaan atribut
alt di tag <img> :<!DOCTYPE html>
<html>
<head>
<title>Belajar Menambahkan Gambar di HTML</title>
</head>
<body>
<img alt="Langit" src="langit.png">
</body>
<html>Sebelum Saya telah memindahkan gambar langit.png ke folder lain, tujuannya untuk memastikan atribut
alt bekerja dengan benar.Jika Saya buka di browser, maka tampilannya akan seperti gambar dibawah ini :
Pada gambar diatas terlihat sebuah keterangan berupa teks yang Saya ketik sebelumnya di atribut
alt yaitu Gambar langit.
Atribut alt juga berperan penting untuk mesin pencari, karena cara kerja mesin pencari yang meng-index seluruh teks yang ada di halaman website. Mesin pencari tidak mengerti isi dari gambar tersebut, maka mesin pencari akan mencari atribut alt yang berisi informasi dari gambar tersebut.
Penggunaan Atribut height dan width
Untuk menentukan tinggi gambar sobat dapat menggunakan atribut height dan untuk menentukan lebar gambar sobat dapat menggunakan atribut width.Contoh penggunaan atribut
height dan width di tag <img> :<!DOCTYPE html>
<html>
<head>
<title>Belajar Menambahkan Gambar di HTML</title>
</head>
<body>
<img width="200px" height="200px" src="langit.png">
</body>
<html>Jika Saya buka di browser, maka tampilannya seperti gambar di bawah ini :
Terlihat pada gambar diatas, gambar langit.png terlihat tidak proporsional, hal ini karena penggunaan nilai yang Saya tulis di atribut
height dan width yang tidak terlalu sesuai dengan proporsi gambar tersebut.Untuk menjadikan gambar terlihat proporsional, namun tetap membuat gambar terlihat kecil, maka sobat hanya menambahkan atribut
width saja.Contoh penggunaan atribut
width di tag <img> :<!DOCTYPE html>
<html>
<head>
<title>Belajar Menambahkan Gambar di HTML</title>
</head>
<body>
<img width="200px" src="langit.png">
</body>
<html>Jika Saya buka di browser, maka tampilannya akan seperti gambar di bawah ini :
Pada contoh kode diatas Saya mengketik atribut
width dengan nilai 200px tanpa atribut height, maka browser akan menampilkan gambar dengan lebar 200px dan menghitung secara otomatis tinggi gambar agar gambar terlihat proporsional.Untuk pembahasan selanjutnya sobat akan mempelajari Cara Membuat Tabel di HTML.
0 Response to "Belajar HTML Bagian 11 : Cara Menambahkan Gambar di HTML"
Post a Comment