Belajar HTML Lengkap Part 9 : Cara Menambahkan Gambar di HTML (tag img)
Menampilkan Gambar Pada HTML
Gambar atau Image merupakan sebuah bagian penting dari sebuah website karena dengan adanya gambar informasi yang di sajikan dapat lebih menarik, gambar juga dapat menjadikan suasana lebih hidup. Tak terbayang jika semua website di dunia ini tak satu pun menyajikan gambar melainkan hanya kumpulan dari teks saja, sudah bisa di bayangkan ya teman-teman akan sangat-sangat membosankan untuk mengunjunginya apalagi membacanya hehe..
Oleh sebab itu wajib banget temen-temen pelajari bagaimana cara menampilkan gambar pada HTML, Karena dengan gambar juga dapat menarik minat pengunjung untuk betah mengunjungi website kita teman-teman.
Untuk menampilkan gambar pada HTML tag yang di gunakan adalah <img> dimana tag ini dapat menampilkan gambar berbagai jenis atau exstensi seperti jpg, jpeg, png, svg, gif, bmp, ico dan lain sebagainya. Namun untuk menampilkan gambar kita perlu beberapa atribut dan paling tidak untuk menampilkan gambar kita butuh satu atribut yaitu src. Macam-macam atribut pada tag image atau gambar :
Atribut src dalam tag <img>
Atribut src adalah singkatan dari source dimana atribut ini di gunakan sebagai pemanggil alamat dari file gambar yang ingin di tampilkan. Penulisan atribut src dalam tag image yaitu <img src="#" /> Tanda # di isi dengan alamat file gambar nya. Penulisan alamat gambar bisa menggunakan jenis alamat Absolute atau bisa juga Relatif untuk mengtahui apa perbedaanya bisa teman-teman lihat pada episode sebelumnya Belajar HTML Lengkap Part 8 : Cara Membuat Link Di HTML (tag a)
Cara menampilkan gambar pada HTML, dalam contoh ini silahkan teman-teman buat sebuah folder lalu siapkan gambar dan beri nama gambarnya misalkan logo.jpg di sesuaikan dengan exstensi gambar nya jika kalian punya gambar png jadi di tuliskan logo.png tinggal di sesuaikan saja dengan gambar nya ya teman-teman dan tuliskan kode HTML berikut ini beri nama file nya misalkan index.html :
<!DOCTYPE html>
<html>
<head>
<title>Cara Menampilkan Gambar Di HTML</title>
</head>
<body>
<h3>Tag imgage & Atribut src</h3>
<img src="logo.jpg">
</body>
</html>Jangan lupa untuk meletakan gambar dan juga file HTML nya pada satu folder yang sama seperti berikut ini :
Lalu buka file index.html nya teman-teman berikut tampilan contoh yang saya buat :
Atribut Alt dalam tag <img>
Atribut Alt yaitu singkatan dari alternative description dari nama nya saja mungkin sudah tergambar ya teman-teman apa fungsi dari atribut ini, Atribut Alt adalah keterangan dari sebuah gambar yang akan tampil jika gambar dalam browser gagal di tampilkan atau jika pengunjung website telah mensetting pengaturan pada browser untuk tidak menampilkan gambar. Contoh penulisan Atribut Alt pada tag <img> sebagai berikut :
<img src="logo.jpg" alt="Logo HTML">Atribut Title dalam tag <img>
Atribut Title adalah untuk memberikan keterangan jika kursor/pointer atau mouse di arahkan pada gambar. Contoh penulisan Atribut Title pada tag <img> sebagai berikut :<img src="logo.jpg" alt="Logo HTML" title="Ini adalah Gambar Logo HTML">Atribut Width dan Height dalam tag <img>
Atribut Width (Lebar) dan Height (Tinggi) adalah untuk mengatur ukuran gambar yang di tampilkan. coba perhatikan contoh berikut :
<img src="logo.jpg" alt="Logo HTML" title="Ini adalah Gambar Logo HTML" width="300px" height="200px">Oke mungkin sekian pembahasaan tentang Cara Menambahkan Gambar di HTML (tag img). Tunggu yang lebih seru lagi sampai jumpa di episode berikutnya sobat!
Incoming Search Terms :
→ kode html untuk memasang gambar→ memasukan gambar di html
→ menampilkan gambar di html
→ mengatur posisi gambar di html
→ menyisipkan gambar di html
→ mengatur ukuran gambar di html
→ membuat tulisan di gambar pada html
→ tutorial menampilkan foto di html
→ belajar dasar html 5 lengkap untuk pemula dari awal
→ Rio Ananda Putra
0 Response to "Belajar HTML Lengkap Part 9 : Cara Menambahkan Gambar di HTML (tag img)"
Post a Comment