HTML Dasar Part 11: Cara Menambahkan Gambar di HTML ![]()
HTML Dasar Part 11: Cara Menambahkan Gambar di HTML <img>
Hambar rasanya apabila sebuah artikel suatu website tanpa adanya gambar. Pengunjung akan cenderung malas dan cepat bosan hanya menghadapi banyaknya tulisan saja. Setelah kita menguasai cara membuat link di HTML, pada tutorial kali ini kita akan membahas mengenai cara menambahkan gambar di HTML.
----------------------------------------------------------------------------------------------------
mahaamesha.com Website yang bagus tentunya memiliki gambar. Pada suatu waktu, pasti agan / aganwati juga ingin menambahkan gambar dalam website Anda. HTML menyediakan tag khusus untuk menampilkan gambar, yaitu tag image atau <img>. Tag image mendukung gambar dengan berbagai macam format, seperti JPG, JPEG, PNG, GIF, BMP, TGA, dll. Tag ini memiliki 6 buah tag, diantaranya adalah src; alt; name; border; height; dan width. Namun, kali ini kita akan membahas beberapa dari atribut tersebut.
----------------------------------------------------------------------------------------------------
Atribut src dalam tag <img>
Atribut src adalah singkatan dari source (sumber) yang merupakan atribut yang berisikan alamat dari gambar yang ditampilkan. Sama halnya dengan link, gambar juga berkaitan dengan ekternal dan internal link. Keduanya telah kita bahas pada pertemuan sebelumnya pada HTML Dasar Part 10: Cara Membuat Link di HTML. Agan / aganwati yang belum paham atau belum sempat membaca tutorial tersebut bisa membacanya terlebih dahulu agar paham materi tutorial kali ini dan seterusnya.
Pada tutorial kali ini, kita akan menampilkan gambar yang semula kita letakkan terlebih dahulu pada satu folder yang sama dengan halaman yang akan ditampilkan. Silahkan agan / aganwati rename gambar tersebut sesuai keinginan. Saya akan merename gambar pada tutorial ini dengan nama Lampu.png.
Jangan bosan membuka kembali Notepad ++ dan ketikkanlah contoh kode HTML berikut ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | <Img>:</title>
</head>
<body>
<h1>Penggunaan Tag <img></h1>
<p></p>
Dengan tag Image, kita bisa menampilkan gambar di HTML.<br/>
Atribut <b>src</b> / <i>source</i> berisi alamat gambar.<br/>
<img src="Lampu.png"/>
</body>
</html>
|
Save kode HTML tersebut sebagai file dengan nama “Img0.html” dalam satu folder yang sama dengan gambar tersebut. Launch pada web browser dan hasilnya adalah seperti berikut.
Atribut ini merupakan bagian terpenting dari tag <img>. Sebab, syarat muncul tidaknya gambar dalam website adalah atribut ini. Tanpa adanya atribut source ini, web browser akan kebingungan menampilkan gambar dan alhasil tidak muncul. Perhatikan juga penulisan dari atribut ini, terkadang ada orang yang mungkin lupa dan menuliskan atribut ini scr, padahal seharusnya src. Ingat-ingat saja kepanjangannya, src memiliki kepanjangan dari source, dimana dalam kepanjangan tersebut huruf-huruf pembentuk dari “src” berurutan.
----------------------------------------------------------------------------------------------------
Atribut alt dalam tag <img>
Atribut alt memiliki peranan penting dalam Searh Engine (mesin pencarian). Atribut alt merupakan atribut yang mendeskripsikan gambar yang tidak dapat ditampilkan. Alt sendiri adalah singkatan dari alternative. Deskripsi ini sangat penting dalam Google meng-index seluruh website yang ada dengan membaca tulisannya. Google akan kebingunan untuk melakukannya tanpa atribut alt ini. Oleh karena itu, atribut alt sangat penting adanya.
Agar lebih jelas, langsung saja kita beralih ke dua contoh kode HTML berikut.
Contoh pertama :
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | <Img></title>
</head>
<body>
<h1>Atribut Alt</h1>
Gambar di bawah ini menunjukkan bahwa atribut alt tidak bekerja.<br/>
<img src="Lampu.png" alt="Gambar Bohlam"/>
</body>
</html>
|
Contoh Kedua :
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | <Img></title>
</head>
<body>
<h1>Atribut Alt</h1>
Hasil di bawah ini menunjukkan bahwa atribut alt bekerja.<br/>
<img src="Lampu.jpg" alt="Gambar Bohlam"/>
</body>
</html>
|
Perbedaan kedua contoh di atas adalah pada atribut src. Contoh pertama adalah penulisan source yang benar. Lihatlah hasil dari kedua contoh tersebut.
“NB : Penulisan tag <img> ini langsung ditutup, tanpa elemen di belakangnya.”
<img src=”Lampu.png”/>
<img alt=”Gambar Bohlam”/>
----------------------------------------------------------------------------------------------------
Kurang lebih itu dulu yang kita bahas pada pertemuan kali ini. Dalam kita belajar, tidak perlu muluk-muluk. Masih ingat kan, kunci keberhasilan belajar HTML? Yang terpenting adalah konsistensi agan / aganwati dalam belajar. Kita belajar sedikit demi sedikit, namun kita lakukan dengan rutin setiap hari. Konsistensi itulah yang akan membuat agan / aganwati bisa.
Setelah kita memahami bagaimana cara menambahkan gambar di HTML, pada pertemuan selanjutnya kita akan membahas mengenai cara membuat tabel di HTML.
Comments
Post a Comment