Tutorial HTML - Memuat Gambar

Memuat gambar kedalam sebuah halaman website merupakan hal yang cukup penting untuk meningkatkan desain dan tampilan website, hal itu dapat menarik perhatian pengunjung dan membuat nyaman ketika mellihat website itu.

Dalam HTML untuk memuat sebuah gambar diperlukan element atau tag <img>, dan untuk  tag <img> tidak memerlukan tag penutup. Kemudian didalam nya ada atribut wajib yaitu src=" ", untuk menuliskan nama gambar yang akan kita muat dalam website.

<img src="amartha.jpg">

#Catatan : 

Nama gambar dan nama ekstensi gambar yang dituliskan harus persis sama, baik kapital atau tidak kapital.

Gambar di Folder lain
Kode atribut src diatas bernilai nama gambar yang satu folder dengan file .html nya, bagaimana jika letak gambarnya didalam folder yang berbeda? maka penulisan nilai nya pun ada perbedaan, kita harus menulis nama folder nya pula.
Contoh penulisan jika gambar didalam folder img

<img src="img/amartha.jpg">

Gambar berada diatas folder tersebut
Bagaiman jika letak filenya berada diatas folder tersebut, maka penulisanya dengan cara menambahkan kode ../ untuk mencari gambar naik satu folder.

<img src="../img/amartha.jpg">

Gambar yang diambil dari website
Jika ingin mengambil gambar atau image dari website lain, biasa nya ada website-website penyedia untuk upload dan download gambar. Maka copy alamat url gambarnya, dan masukan dalam atribut src.

<img src="https://www.google.com/amartha.jpg">

Selain atribut wajibnya, ada beberapa atribut lainya yaitu :

Atribut alt

Yaitu atribut yang digunakan untuk menyediakan teks alternatif, jika gambar yidak ditampilkan di browser karna beberapa alasan, misalnya karena koneksi yang lambar, kesalahan dalam atribut src dan lainya. Dan value atau nilai dari atribut ini harus sesuatu yang  menggambarkan gambar itu.

<img src="amartha.jpg" alt="Logo Amartha">

Atribut width dan height

Yaitu atribut yang berfungsi untuk menentukan lebar dan tinggi gambar. Jika  width dan height tidak diatur maka browser akan menampilkan ukuran asli gambar.

<img src="amartha.jpg" alt="Logo Amartha" width="200" height="200">

Membuat gambar menjadi sebuah LINK
Seperti yang tertulis dipostingan sebelumnya, Tutorial Membuat Link pada HTML. Disana kita belajar untuk membuat LINK dari sebuah tulisan atau teks, dan pada kali ini kita akan membuat LINK dari sebuah gambar. Cara penulisanya dengan menuliskan tag <a> terlebih dahulu, lalu didalamnya kita masukan tag <img>.

<a href="https://amartha95.blogspot.com/">
     <img src="amartha.jpg" alt="Logo Amartha">
</a>

Untuk tutorial kali ini sekian
-- Terimakasih --