_Berbagi Dengan Penuh Ikhlas_

Blogger

Thursday, July 25, 2013

Mengenal Fungsi Image Pada HTML


Kali ini sampul ilmu memberikan sedikit pengetahuan tentang HTML,
Image
Image (gambar) dalam suatu web merupakan daya tarik bagi pengunjung. Umumnya browser menampilkan inline image (gambar disajikan bersamaan dengan teks). Image yang dapat ditampilkan dalam web site adalah jenis GIF, JPG, XBM, dan PNG
Bentuk Umum
<img src=“nama_image” [Atribut]>
Atribut Image
Contoh1:
Cara Membuat Gambar Background Di HTML. Buatlah Folder Latihan DiDrive D setelah itu siapkan terlebih dahulu file image/gambar yang ingin dijadikan background (“disini sampul ilmu menggunakan gambar Sampulilmu.png”) Kemudian Buat Halaman coba.html dengan cara klik Notepad kemudian ketikan kode dibawah ini yang berwarna biru
<HTML>
<BODY BACKGROUND="Sampulilmu.png" >
</BODY>
</HTML>

Hasil :
 
Contoh 2:
<HTML>
<BODY<H2>Sahabat Sampul Ilmu</H2><P>
<IMG SRC=" Sampulilmu.png "><BR>
<IMG SRC=" Sampulilmu.png "><BR>
</BODY>
</HTML>

Hasil:

Catatan :
File image/gambar harus berada satu folder dengan Halaman html yang telah dibuat ( sampulilmu.png dan coba.html berada didalam folder Latihan)

Mengubah Ukuran Image
<HTML>
<BODY>
<IMG SRC="sampulilmu.png"> (ukuran asli)
<IMG SRC="sampulilmu.png" WIDTH="45" HEIGHT="60"> (45x60 pixel)
<IMG SRC="sampulilmu.png" WIDTH="180" HEIGH="240"> (180x240 pixel)
</BODY>
</HTML>
Hasil :

Alternatif Image
<HTML>
<BODY>
<IMG SRC="sampulilmu.png" WITH="120" HEIGHT="150" ALT ="Gambar Sampul Ilmu 1">
<IMG SRC="sampulilmu.png" WIDTH=120 HEIGHT=150 ALT="Gambar Sampul Ilmu 2">
</BODY>
</HTML>
Hasil :

Image Border
Memberi bingkai pada image
Contoh :
<HTML>
<BODY><B>
<IMG SRC="Sampulilmu.png" width=90 height=90>
<IMG SRC="Sampulilmu.png" BORDER="5" width=90 height=90>
<IMG SRC="Sampulilmu.png" BORDER="10" width=90 height=90>
</BODY>
</HTML>
Hasil :

Image Sebagai Link
Image juga dapat dijadikan sebagai Link
Bentuk:
<a href=“Sumber”> <img src=“Nama_Image”></a>
Contoh:
Buat Terlebih dahulu Halaman coba1.html masih didalam folder latihan kemudian buka halaman coba.html ketikan kode dibawah ini
<HTML>
<BODY><B>
<p align="center">
<a href="coba1.html"><img src="Sampulilmu.png"></a>
<a href=" coba1.html"><img src="Sampulilmu.png"></a></p>
</BODY>
</HTML>
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Posts RSSComments RSSBack to top
© 2011 Ramdani Fitrian ∙ Designed by BlogThietKe
Released under Creative Commons 3.0 CC BY-NC 3.0