Sabtu, 20 Agustus 2016

Tutorial HTML: Menambahkan Gambar di HTML

Menambahkan gambar di HTML didenifisikan menggunakan tag <img> dengan atribut src sebagai URL untuk memanggil gambar.
Dalam penulisannya tag <img> tidak memiliki tag penutup dan langsung diakhiri dengan "/>". Berikut kami sajikan cara menambahkan gambar di HTML. 


Cara Menambahkan Gambar di HTML

Buka notepad++ anda atau web editor yang lain, kemudian
ketik koding dibawah ini:

<!DOCTYPE html>
<html>
<head>

<title>Menambahkan Gambar di HTML</title>

</head>
<body>

<img src="bunga.jpg" />

</body>
</html>

Simpan kode diatas dengan nama "gambar1.html" di folder "belajarcoding".
catatan: Gambar yang dipanggil oleh src harus satu folder atau jika tidak ikutkan nama folder yang berisi file gambar tersebut, misal: src="D://picture/bunga/bunga.jpg".



Mengatur Ukuran Gambar


Untuk mengatur ukuran gambar digunakan atribut width dan height.

Ketik koding di bawah ini di web editor anda:

<!DOCTYPE html>
<html>
<head>

<title>Menambahkan Gambar di HTML</title>

</head>
<body>

<img src="bunga.jpg" height="200" width="100"/>

</body>
</html>

Simpan kode diatas dengan nama "gambar2.html" di folder "belajarcoding".




Mengatur Posisi Gambar


Dalam hal mengatur posisi gambar di HTML bisa menggunakan atribut style dengan property float.

<!DOCTYPE html>
<html>
<head>

<title>Menambahkan Gambar di HTML</title>

</head>
<body>

<h1>Ini adalah bunga</h1>
<img src="bunga.jpg" height="200" width="100" style="float:left;"/>
<p>Bunga merupakan Simbol keindahan dan kecantikan,
semua negara-negara di diunia memiliki bunga 
kebangsaannya masing-masing. Sebagaimana bunga
bangsa mereka.
</p>

</body>
</html>

Simpan kode diatas dengan nama "gambar3.html" di folder "belajarcoding".
catatan: 
  • left: Posisi kiri
  • right: posisi kanan
  • center: posisi tengah


Memberi Border pada Gambar

Untuk membuat border pada gambar dibutuhkan atribut gambar.

Ketik koding berikut:

<!DOCTYPE html>
<html>
<head>

<title>Menambahkan Gambar di HTML</title>

</head>
<body>

<h1>Ini adalah bunga</h1>
<img src="bunga.jpg" height="200" width="100" style="float:right;" border="5"/>
<p>Bunga merupakan Simbol keindahan dan kecantikan,
semua negara-negara di diunia memiliki bunga 
kebangsaannya masing-masing. Sebagaimana bunga
bangsa mereka.
</p>

</body>
</html>

Simpan kode diatas dengan nama "gambar4.html" di folder "belajarcoding".



Membuat Link Gambar


<!DOCTYPE html>
<html>
<head>

<title>Menambahkan Gambar di HTML</title>

</head>
<body>

<h1>Ini adalah bunga</h1>
<a href="http://tomingoding.blogspot.com">
<img src="bunga.jpg" height="100" width="200" style="float:left;" border="2"/>
</a>
<p>Bunga merupakan Simbol keindahan dan kecantikan,
semua negara-negara di diunia memiliki bunga 
kebangsaannya masing-masing. Sebagaimana bunga
bangsa mereka. <i>Silahkan klik gambar disamping<i>.
</p>

</body>
</html>

Simpan kode diatas dengan nama "gambar5.html" di folder "belajarcoding".



Atribut alt


Atribut alt digunakan untuk menampilkan nama gambar bila web browser gagal dalam menampilkan gambar. contoh:

<img src="bunga.jpg" alt="bunga"/>

Demikian tutorial cara menambahkan gambar di HTML beserta atribut yang sering digunakan. Anda dapat berkreasi sendiri untuk mengasah kreatifitas dalam mendesain web dengan melibatkan gambar didalamnya.

Semoga artikel ini membantu dan menjawab pertanyaan anda seputar gambar di HTML. Pilih artikel pilihan lainnya klik disini.

Tidak ada komentar:

Posting Komentar