Rabu, 15 Juni 2016

HTML5 Mudah Banget Cara menampilkan Gambar di halaman web

Mudah Banget Cara menampilkan Gambar di halaman web-Pada kesempatan kali ini saya akan membagikan post tentang cara bagaimana kita menyisipkan atau memasukan gambar ke dalam skrip HTML agar nantinya bisa di tampilkan di halaman web, ok sobat intinya seperti itu. ok lasung saja,

Siapkan gambar yang akan di sisipkan ke halaman web simpan di folder yang anda sudah buat.
Kemudian siapkan notepad++ untuk membuat kodingnya.
dan web browser untuk menjalankan file HTML.

Ok sbat lasung saja berikut ini adalah kodingnya.

<html>
<head>
<title>Menampilkan gambar di halaman web</title>
</head>
<body>
<hr/>
<h1 align="center">Menampilkan Gambar Di halaman Web</h1>
<hr/>
<img src="icon.png">
<hr/>
</body>
</html>
Sedikit penjelasan, koding yang saya beri tag warna merah adalah tag,untuk memanggil file gambar untuk di tampilkan di web browser nantinya. icon.png ,adalah nama gambar yang akan di tampilkan di web browser.

Kemudian simpan di folder di mana anda menyimpan gambar ya,simpan dengan nama , contoh.html ,kemudian jalan kan /atau buka file tersebut dengan web browser.
jika di jalankan akan tampak seperti berikut.



Nah sampai sini semoga sobat semua mengerti,dan pastinya mengerti karena ini sangat mudah,

Kita juga bisa mengatur Gambar yang di tampilkan di web browser dengan sedemikian rupa ,contohnya saya akan meberi atribut untuk merubah size gambar tersebut caranya dengan menambah atribut height dan width.
lebih lengkapnya lihat koding berikut.

<html>
<head>
<title>Menampilkan gambar di halaman web</title>
</head>
<body>
<hr/>
<h1 align="center">Menampilkan Gambar Di halaman Web</h1>
<hr/>
<img src="icon.png"  height="420px" width="380px">
<hr/>
</body>
</html>
Makan akan Tampak Di halaman web seperti berikut.



Tampak halaman web ,bahwa gambar tersebut tampil di sisi kiri,untuk meletakan gambar di tengah ,kita bisa menggunakan tag <center></center> ,caranya lihat koding berikut.

<html>
<head>
<title>Menampilkan gambar di halaman web</title>
</head>
<body>
<hr/>
<h1 align="center">Menampilkan Gambar Di halaman Web</h1>
<hr/>
<center>
<img src="icon.png"  height="420px" width="380px">
</center>
<hr/>
</body>
</html>

Kemudian simpan file html kembali dan refresh web browser sobat,maka akan tampak gambar sudah terletak di tengah.


Nah,sekian sobat,post dari saya semoga post ini bermanfaaat. untuk sobat semua.

Load comments