Wednesday, July 3, 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.
<HTML>
<BODY BACKGROUND="Sampulilmu.png" >
</BODY>
</HTML>

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

Hasil Contoh 2:

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 Mengubah Ukuran Image:

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 Alternatif Image:

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 Border :

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>

Semoga Mengenal Fungsi Image Pada HTML Bermanfaat



Penulis : sampul ilmu

RegiBrader Anda telah membaca artikel tentang Mengenal Fungsi Image Pada HTML. Anda diperbolehkan mengcopy paste atau menyebar luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya.

@ Sampul Ilmu @

Ditulis oleh: NurFatin Sampul Ilmu Updated at : 9:03 AM

Ditulis Oleh : sampul ilmu Hari: 9:03 AM Kategori:

Comments
1 Comments

1 komentar:

  1. salam, sekarang dah mulai aktif lagi ya, terima kasih boss sudah berbagi buat nambah-nambah ilmu.

    ReplyDelete

 

Trafik Rank


Page Ranking Tool W3 Directory - the World Wide Web Directory DMCA.com