Belajar Html Bab 11 : Cara Menambahkan Gambar Di Html
Wednesday, February 24, 2016
Add Comment
Penambahan media gambar di website tentu akan menciptakan tampilan halaman website terlihat menarik dan informatif, tentu ini akan menciptakan pengunjung betah berlama-lama di website sobat. Format gambar yang paling sering di upload di website ialah PNG, JPEG dan GIF.
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 perihal gambar atau penempatan gambar yang sesuai di website, tetapi akan membahas cara menambahkan gambar di HTML.
Untuk menambahkan gambar di HTML teman akan memakai tag
Pembahasan Tag
Seperti yang Saya bilang untuk menambahkan gambar teman akan memakai tag
Penggunaan Atribut
Atribut
Untuk teman yang ingin ingin menciptakan instruksi HTML untuk menampilkan gambar di browser, 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 pola kali ini aku memakai sebuah gambar dengan nama langit dan format-nya PNG, atau jikalau 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 teman telah menaruh gambar di folder tersebut, jikalau tidak maka gambar tidak akan muncul. Pastikan juga nama dan format gambar di atribut
Jika Saya buka di browser, maka tampilannya akan ibarat 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 ibarat gambar dibawah ini :
Pada gambar diatas terlihat sebuah keterangan berupa teks yang Saya ketik sebelumnya di atribut
Penggunaan Atribut
Untuk memilih tinggi gambar teman sanggup memakai atribut
Contoh penggunaan atribut
Jika Saya buka di browser, maka tampilannya ibarat gambar di bawah ini :
Terlihat pada gambar diatas, gambar langit.png terlihat tidak proporsional, hal ini alasannya ialah penggunaan nilai yang Saya tulis di atribut
Untuk menyebabkan gambar terlihat proporsional, namun tetap menciptakan gambar terlihat kecil, maka teman hanya menambahkan atribut
Contoh penggunaan atribut
Jika Saya buka di browser, maka tampilannya akan ibarat gambar di bawah ini :
Pada pola instruksi diatas Saya mengketik atribut
Untuk pembahasan selanjutnya teman akan mempelajari Cara Membuat Tabel di HTML.
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 perihal gambar atau penempatan gambar yang sesuai di website, tetapi akan membahas cara menambahkan gambar di HTML.
Untuk menambahkan gambar di HTML teman akan memakai tag
<img> yang merupakan kependekan dari image. Untuk pembahasan lebih lanjut silahkan baca artikel ini hingga final :-). Pembahasan Tag <img>
Seperti yang Saya bilang untuk menambahkan gambar teman akan memakai 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 ialah kependekan dari source, atribut ini akan berisi alamat lokasi gambar yang akan di tampilkan.Untuk teman yang ingin ingin menciptakan instruksi HTML untuk menampilkan gambar di browser, 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 pola kali ini aku memakai sebuah gambar dengan nama langit dan format-nya PNG, atau jikalau 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 teman telah menaruh gambar di folder tersebut, jikalau 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 yaitu src="ayam.jpeg".Jika Saya buka di browser, maka tampilannya akan ibarat gambar dibawah ini :
Penggunaan Atribut alt
Atribut alt ialah kependekan dari alternative description, atribut ini dipakai untuk menampilkan keterangan dalam bentuk teks jikalau gambar tidak sanggup tampil di browser alasannya ialah alamat lokasi gambar salah, file gambar tidak ada, format gambar tidak di dukung, internet lemot atau browser yang telah diatur biar 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 halaman website terlihat me Belajar HTML Bagian 11 : Cara Menambahkan Gambar di HTML" 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 ibarat 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, alasannya ialah 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 gosip dari gambar tersebut. Penggunaan Atribut height dan width
Untuk memilih tinggi gambar teman sanggup memakai atribut height dan untuk 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 browser, maka tampilannya ibarat gambar di bawah ini :
Terlihat pada gambar diatas, gambar langit.png terlihat tidak proporsional, hal ini alasannya ialah penggunaan nilai yang Saya tulis di atribut
height dan width yang tidak terlalu sesuai dengan proporsi gambar tersebut.Untuk menyebabkan gambar terlihat proporsional, namun tetap menciptakan gambar terlihat kecil, maka teman 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 ibarat gambar di bawah ini :
Pada pola instruksi 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 biar gambar terlihat proporsional.Untuk pembahasan selanjutnya teman akan mempelajari Cara Membuat Tabel di HTML.
0 Response to "Belajar Html Bab 11 : Cara Menambahkan Gambar Di Html"
Post a Comment