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.
Cara menyisipkan gambar di HTML
Untuk lebih jelasnya kita liat contoh kode sebagai berikut:
<html>
<body>
<img src=”http://tomy8725.blogspot.com/logo.png”>
<h2>
Belajar menyisipkan gambar dengan html.
</h2>
</body>
</html>
<body>
<img src=”http://tomy8725.blogspot.com/logo.png”>
<h2>
Belajar menyisipkan gambar dengan html.
</h2>
</body>
</html>
Mengatur Ukuran Gambar di HTML dan Mengatur Posisi 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://tomy8725.blogspot.com/logo.png” alt=”Ini gambar logo” width=”90″ height=”35″ style=”float:right;”>
<h2>
Belajar menyisipkan gambar dengan html.
</h2>
</body>
</html>
<body>
<img src=”http://tomy8725.blogspot.com/logo.png” alt=”Ini gambar logo” width=”90″ height=”35″ style=”float:right;”>
<h2>
Belajar menyisipkan gambar dengan html.
</h2>
</body>
</html>
Membuat Link Pada Gambar di HTML
Kita akan mencoba membuat link gambar dalam html dengan menggunakan tag <a>. tag <a> atau hiperlink selalu diikuti dengan href=””. dimana 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://tomy8725.blogspot.com”><img src=”http://tomy8725.com/logo.png”></a>
<h2>
Belajar menyisipkan gambar dengan html, dan memberikan link pada gambar.
</h2>
</body>
</html>
<body>
<a href=”http://tomy8725.blogspot.com”><img src=”http://tomy8725.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
• 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
.jpg)
0 komentar:
Posting Komentar