Kerak Telor HTML: Images (Gambar)

Images (Gambar)
 

----------------
Tag <img>
----------------
Tag <img> gunanya untuk menyisipkan gambar ke dalam halaman web. Tag ini sama seperti tag <hr> & <br> yang tidak memiliki tag penutup. Jadi dia hanya memiliki tag pembuka beserta attributes .

Contoh:
<img src="lokasi/dari/gambar.jpg" />

----------------
Attributes tag <img>
----------------
src | Sumber atau lokasi
Desc: Nilai dari attribut ini dalah lokasi dari file gambarnya. Jika gambarnya ada di internet maka dapat diisi dengan alamat URL dari gambar tersebut.

Penentuan lokasi ini susah - susah gampang sih hehe. Okey, misalkan gini :

1. cari file gambar lain dan taruh gambar tersebut di Desktop serta kasih nama misalkan file_gambar_satu.jpg
2. buat folder dengan nama latihan_html di Desktop
3. buat 1 buah file html dengan nama index.html di dalam folder latihan_html tersebut.
4. cari sebuah file gambar misal nama filenya file_gambar_dua.jpg dan letakan juga di folder latihan_html tersebut.
5. buat folder baru di dalam folder latihan_html dengan nama gambar
6. cari file gambar lain dan masukan ke dalam folder gambar tersebut serta kasih nama misalkan file_gambar_tiga.jpg

Jadi struktur folder-filenya seperti ini:

--- Desktop
│   file_gambar_satu.jpg

└───latihan_html
    │   file_gambar_dua.jpg
    │   index.html
    │
    └───gambar
            file_gambar_tiga.jpg

Silahkan dipahami perintah diatas dan dipraktekan dahulu biar ndak bingung nantinya. :D

Selanjutnya jika:
1. Kita hendak memasukan file_gambar_satu.jpg , maka :
Code: <img src=" ../file_gamabar_satu.jpg ">
Arti titik dua diatas artinya adalah kita naik satu folder diatas folder lokasi file index.html untuk menemukan file_gambar_satu.jpg

2. Kita hendak memasukan file_gambar_dua.jpg , maka :
Code: <img src=" file_gamabar_dua.jpg ">
#tidak ada titik dua karena file_gambar_dua.jpg letaknya sama dengan file index.html

3. Kita hendak memasukan file_gambar_tiga.jpg , maka :
Code: <img src=" gambar/file_gambar_tiga.jpg ">
#lokasi file_gambar_tiga.jpg berada di folder gambar

Semoga tidak bingung ya :D

----------------
alt | Alternative | string (text)
Desc: Attribut ini sebagai alternatif jika gambar tidak berhasil dimuat, maka nilai yang ada akan ditampilkan. Nilainya berupa kata-kata (teks).
Ex: <img src="gambar.jpg" alt="Gambar cakep">

width | Lebar
Desc: Mendefinisikan ukuran lebar dari gambar. Jika ini tidak didefinisikan maka nilai defaultnya adalah auto.
Ex: <img src="gambar.jpg" alt="Gambar cakep" width="300px">

height | Tinggi
Desc: Mendefinisikan ukuran tinggi dari gambar. Jika ini tidak didefinisikan maka nilai defaultnya adalah auto.
Ex: <img src="gambar.jpg" alt="Gambar cakep" height="200px">

border | Garis tepi
Desc: Memberikan garis tepi yang mengintari gambar. Nilainya berupa angka beserta satuannya.
Ex: <img src="gambar.jpg" alt="" border="1px">

By Ido Alit