Sunday, July 27, 2014

Cara Menampilkan Gambar di Browser Dengan Notepad

Cara Menampilkan Gambar di Browser Dengan Notepad


Element yang dibutuhka untuk memasukkan gambar kedalam halaman web adalah element <img>. Tag element ini tidak memerlukan penutup, cukup pembuka dan tambahan di dalam tag ada element tambahan. berikut atribut-atribut yang akan sering digunakan pada element ini :
  • src, nama dan alamat sumber termpat gambar berada.
  • height, untuk menentukan tinggi gambar pada browser.
  • width, untuk mengatur lebar gambar pada browser.
  • align, untuk mengatur  posisi gambar, kiri, kanan dan tengan halaman.
  • hspace, untuk mengatur lebar spasi horisontar.
  • vspace, untuk mengatur lebar spasi vertikal.
  • border, untuk mengatur ketebalan border gambar.
  • alt, sebagai informasi alternatif untuk gambar.
Cara Menampilkan

Buka notepad kalian dan buat suatu folder berisikan program yang kamu ketikan di notepad dan isikan gambar apa saja di folder yang kalian buat.












Perhatikan panah yang berwarna merah, itu adalah folder yang berisikan 4 file yaitu 3 diantaranya  adalah file JPG dan 1 adalah file HTML.

Contoh Program :

<html>
<head>
    <title> UnlimitShared </title>
</head>

<body>
    <img src="WR -.jpg" width="400" height="250"> </img>
</body>

</html>


Simpan file dengan nama file "Cara.html" atau terserah kalian ingin menamakannya apa tapi ingat yah harus menggunakan ".html" di setiap penyimpanan file yang di buat di notepad. Pemanggilan file JPG harus dalam 1 folder yah. Klik 2x pada file html yang kalian buat maka hasil nya seperti dibawah ini:

Output yang dihasilkan :



















Gambar yang dihasilkan di atas saya perkecil tampilan browsernya supaya lebih jelas saat saya printscreen. Ukuran dapat kalian rubah sesuai keingin kalian, ganti angka di widht dan height.

Untuk kalian yang pemula ingin membuat website sendiri dan masih bingung, saya sarankan bertanya lebih baik dari pada tidak tahu sama sekali. penjelasan di atas mungkin cukup yah untuk membahas artikel menampilkan gambar, jika kurang jelas silakan komentar saja.

Terima kasih telah berkunjung di BLOG saya, semoga bermanfaat dan berguna artikel kali ini. Masih banyak artikel yang saya akan tulis untuk kalian pecinta duni Programmer.

No comments:
Write komentar