Menyisipkan Gambar di HTML

Tutorial HTML | Salam sejahtera semuanya…., Pada kesempatan kali ini saya akan sharing bagaimana cara menyisipkan gambar di html. Menampilkan gambar di HTML bukanlah hal yang rumit. kita bisa menyisipkan gambar di web, mengatur ukuran gambar, posisi gambar html, dan memberikan link gamabr di html serta keterangan pada gambar tersebut dengan kode html. Perintah untuk menampilkan format gambar atau menambah gambar di HTML atau halaman web ditandai dengan tag <img> dan atribut ” src “ untuk lokasi dari gambar yang akan kita ambil.

Sintaks gambar bergerak dan gambar diam adalah sama hanya beda pada extensi gambarnya. Hal yang perlu diperhatikan adalah ukuran dari gambar yang di tampilkan. semakin besar ukuran gambar, maka proses menampilkannya semakin lama. Atribut dalam tag <img> adalah src (alamat gambar), align/float (posisi gambar), width (lebar gambar), height (tinggi gambar), alt (keterangan gambar).

Cara menyisipkan gambar di HTML

Untuk lebih jelasnya kita liat contoh kode menyisipkan gambar dengan html sbb:

<html>
<body>
<img src=”http://seputarti.com/logo.png”>
<h2>
Belajar menyisipkan gambar dengan html.
</h2>
</body>
</html>

Nah kita liat kode html tag <img> dan atribut src mengarah pada lokasi gambar, yaitu logo.png. kita juga bisa menyisipkan gambar dengan extensi jpg, png, gif, bmt, swf, dll. Berikut adalah contoh dari kode di atas:

menyisipkan gambar di html

Mengatur Ukuran Gambar di HTML dan Mengatur Posisi Gambar di HTML

oKE, di atas adalah cara mudah menyisipkan gambar di html, sekarang kita akan mencoba menambah atribut untuk mengatur ukuran dan posisi serta keterangan gambar yang kita sisipkan pada halaman web. berikut adalah contoh kode sederhana menambah dan mengatur gambar html:

<html>
<body>
<img src=”http://seputarti.com/logo.png” alt=”Ini gambar logo” width=”90″ height=”35″ style=”float:right;”>
<h2>
Belajar menyisipkan gambar dengan html.
</h2>
</body>
</html>

Nah, atribut alt adalah untuk memberi keterangan gambar html dan kita mengatur lebar serta tingi gambar di html dalam satuan pixel, serta untuk posisi gambar agak memerlukan css dalam hal ini memakai float right(rata kanan). Berikut adalah contoh hasilnya menyisipkan gambar serta mengatur lebar gamabr, tinggi dan posisi gambar :

mengatur gambar yang di sisipkan dalam html

Membuat Link Pada Gambar di HTML

Next, kita akan mencoba membuat link gambar dalam html dengan menggunakan tag <a>. tag <a> atau hiperlink selalu diikuti dengan href=””. dimna merupakan tujuan dari link yang diberikan pada gambar. oke langsung saja kita coba membuat kode html sederhana untuk link gambar :

<html>
<body>
<a href=”http://seputarti.com”><img src=”http://seputarti.com/logo.png”></a>
<h2>
Belajar menyisipkan gambar dengan html, dan memberikan link pada gambar.
</h2>
</body>
</html>

Mengatur Ukuran Garis Tepi (border) Gambar di HTML

Oke gan, itu adalah kode membuat link pada gambar dengan html. gambar tersebut akan mengarah pada home web saya jika di klik. oh iya tambahan saja, jika anda ingin menebalkan border pada gambar bisa menggunakan atribut border=””. makin besar nilainya, maka makin besar ukuran bordernya/garis tepi gambar tersebut.

Keterangan :

• Align/float = adalah atribut posisi gambar di sebelah kanan , kiri , tengah , atas dan buttom .
• Width = pengaturan lebar gambar yang akan ditampilkan pada halaman web .
• Height= pengaturan tinggi gambar yang akan ditampilkan pada halaman web .
• Alt = adalah deskripsi gambar jika kursor di tempat gambar .
• Border = garis tebal yang mengelilingi gambar .

Sekian artikel tentang cara menyisipkan gambar di HTML dengan mudah. Lo pengen lebih tahu tentang HTML, baca juga artikel lcara membuat gambar lebih seo friendly dan cara memberikan link gambar di html lebih lengkapnya.

download aja Gan file HTML menyisipkan Gambar lebih lengkap disini.

About Ganang Julianto 254 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

6 Comments

Leave a Reply

Your email address will not be published.


*