Sebelum teman menambahkan gambar di WEBsite , teman harus mempertimbangkan apakah gambar dan penempatan gambarnya tersebut sesuai dengan tampilan WEBsite atau konten WEBsite sobat. Jika tidak maka akan menciptakan pengunjung tidak merasa betah berlama-lama- di WEBsite teman dan yang lebih parah pengunjung tidak akan mengunjungi WEBsite teman lagi. Pada pembahasan kali ini Saya tidak akan membahas wacana gambar atau penempatan gambar yang sesuai di WEBsite, tetapi akan membahas tips menambahkan gambar di HTML.
Untuk menambahkan gambar di HTML teman akan memakai tag
<img> yang merupakan abreviasi dari image. Untuk pembahasan lebih lanjut silahkan baca article ini hingga jawaban :-). Pembahasan Tag <img>
Seperti yang Saya bilang untk menambahkan gambar teman akan memakai tag <img>, kalau untk atribut tag <img> silahkan baca tabel di bawah ini berikut fungsi untk setiap atribut :| Atribut | Fungsi |
src | Mencari lokasi gambar |
width | Menentukan lebar gambar |
height | menentukan tingi gambar |
align | Menentukan posisi gambar |
alt | Semisalnya gambar tidak ditemukan maka akan muncul sebuah teks |
Penggunaan Atribut src
Atribut src adlah abreviasi dari source, atribut ini akan berisi alamat lokasi gambar yang akan di tampilkan.Untuk teman yang ingin ingin menciptakan arahan HTML untk menampilkan gambar di broser, maka teman terlebih dahulu menyiapkan sebuah gambar dan taruh gambar tersebut di folder Belajar HTML. Untuk format gambar sanggup berupa PNG, JPEG maupun GIF.
Pada rujukan kali ini aku memakai sebuah gambar dengan nama langit dan format-nya PNG, atau bila digabungkan ialah 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 teman telah menaruh gambar di folder tersebut, bila 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 teman menaruh gambar di folder Belajar HTML dengan nama ayam dan format-nya JPEG, maka teman ketik di atribut src ialah src="ayam.jpeg".Jika Saya buka di broser, maka tampilannya akan ibarat gambar dibawah ini :
Penggunaan Atribut alt
Atribut alt adlah abreviasi dari alternative description, atribut ini dipakai untk menampilkan keterangan dalam bentuk teks bila gambar tidak sanggup tampil di broser sebab alamat lokasi gambar salah, file gambar tidak ada, format gambar tidak di dukung, internet lemot atau broser yang telah diatur semoga 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="Penambahan media gambar di WEBsite tentu akan menciptakan tampilan halman WEBsite terlihat me Belajar HTML Bagian 11 : Trik Menambahkan Gambar di HTML" src="langit.png"> </body> <html>Sebelum Saya telah memindahkan gambar langit.png ke folder lain, tujuannya untk memastikan atribut
alt bekerja dengan benar.Jika Saya buka di broser, maka tampilannya akan ibarat gambar dibawah ini :
Pada gambar diatas terlihat sebuah keterangan berupa teks yang Saya ketik sebelumnya di atribut
alt ialah Gambar langit. Atribut alt juga berperan penting untk mesin pencari, sebab tips kerja mesin pencari yang meng-index seluruh teks yang ada di halman WEBsite. Mesin pencari tidak mengerti isi dari gambar tersebut, maka mesin pencari akan mencari atribut alt yang berisi gosip dari gambar tersebut. Penggunaan Atribut height dan width
Untuk memilih tingi gambar teman sanggup memakai atribut height dan untk memilih lebar gambar teman sanggup memakai 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 broser, maka tampilannya ibarat gambar di bawah ini :
Terlihat pada gambar diatas, gambar langit.png terlihat tidak proporsional, hal ini sebab penggunaan nilai yang Saya tulis di atribut
height dan width yang tidak terlalu sesuai dengan proporsi gambar tersebut.Untuk mengakibatkan gambar terlihat proporsional, namun tetap menciptakan gambar terlihat kecil, maka teman hnya 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 broser, maka tampilannya akan ibarat gambar di bawah ini :
Pada rujukan arahan diatas Saya mengketik atribut
width dengan nilai 200px tanpa atribut height, maka broser akan menampilkan gambar dengan lebar 200px dan menghitung setips otomatis tingi gambar semoga gambar terlihat proporsional.Untuk pembahasan selanjutnya teman akan mempelajari Trik Membuat Tabel di HTML. Sumber https://mas-abdi.blogspot.com/
No comments:
Post a Comment