Setelah berhasil mengguyur warna pada backgorund html. Saatnya saya belajar menyisip-sisipkan gambar di halaman HTML. Baik dari gambar background, gambar yang dari folder sama dengan file html disimpan, gambar dari folder yang tidak sama dengan file html disimpan, ataupun gambar yang direct ke email saya.

Langsung saja :

1. Menyisipkan file gambar sebagai background

ternyata tinggal memasukkan kata : background=”gambar.ekstensinya” di <body>. Seperti ini :

<html>
<head>
<title>background bergambar</tittle>
</head>
<body background=”gambar.png”>

sedangkan untuk gambar background yang tidak terletak 1 folder dengan tempat menyimpan file html ini, tinggal menambahkan foldernya, misal :

<body background=”/home/pradna/Pictures/gambar.png”>

2. Menyisipkan Gambar

=>Contoh menyisipkan gambar pada folder yang sama dengan tempat file html disimpan. Tentu saja ini dibawah tag <body>

<p><img src=”medal.gif” height=”50″ width=”50″ alt=”" /></p>

tag <p> berarti paragraf…

kok kayaknya tag <br>, <p> dan notakasi tanda baca lainnya, malah belum saya pelajari ya (idiot)

=> ya udah lanjut dulu saja yaa (cozy) ,

intinya sama saja dengan background-bergambar, kalau gambar berada di folder lain dengan file html ini disimpan,

<p><img src=”/home/pradna/Pictures/bugsperado.png” width=”50″ height=”50″ border=”0″ alt=”"></p>

Width dan height tersebut dalam ukuran pixel. Walau bisa juga dalam ukuran % (persen)… tapi saya ndak mudeng itung2annya (ninja)

3. Menyisipkan radio email button

Misal gambar email yang sudah disisipkan alamat email saya, dan jika di klik langsung membuka program email-client di kompyuter si pengeklik,

<p><a href=”mailto:rafeillo@gmail.com”><img src=”email.gif” height=”50″ width=”80″ alt=”Klik buat kirim email” /></a></p>

Berikut contoh script selengkapnya :

<html>
<head>
<title> Menyisipkan Gambar</title>
</head>
<body background=”gambar.png”>
Menyisipkan gambar dari folder yang sama dengan disimpannya file html ini
<p><img src=”medal.gif” height=”50″ width=”50″ alt=”" /></p>
<p>Menyisipkan gambar dari folder lain</p>
<p><img src=”/home/aburadit/Pictures/bugsperado.png” width=”50″ height=”50″ border=”0″ alt=”"></p>
<p>Menyisipkan Gambar email button</p>
<p><a href=”mailto:rafeillo@gmail.com”><img src=”email.gif” height=”50″ width=”80″ alt=”Klik buat kirim email” /></a></p>
<p>(dengan mengklik tombol ini, jika ada program email client di kompyuter Anda, bisa langsung terhubung)</p>
Demikian.
</body>
</html>

Berikut hasilnya jika dibuka di browser :
Image and video hosting by TinyPic

Demikianlah.

Untuk memudahkan penulisan script html ini di Linux Mint, saya menggunakan program bantu yang mirip Dreamweaver, yaitu Bluefish 1.0.7 (scenic)
Ini screenshotnya:
Image and video hosting by TinyPic

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • Live
  • MSN Reporter
  • MySpace
  • Ping.fm
  • RSS
  • StumbleUpon
  • Technorati