Mengenal Fungsi Image Pada HTML
Mengenal Fungsi Image Pada HTML- Kali ini sampul ilmu memberikan sedikit pengetahuan tentang image, Image (gambar) dalam suatu web merupakan sebuah 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.
Mengenal Fungsi Image Pada HTML image Gambar adalah suatu perpaduan titik, garis, bidang, dan warna yang dikomposisikan untuk mencitrakan sesuatu. Gambar merupakan sajak tanpa kata- kata. Suatu objek bisa dijadikan suatu gambar. dibawah ini adalah penjelasan singkat tentang fungsi dan cara memasukan gambar di HTML
Bentuk Umum
Bentuk Umum Penulisan Kode HTML untuk menampilkan Gambar adalah.
<img src=“nama_image” [Atribut]>
Atribut ImageUmumnya browser menampilkan inline image (gambar disajikan bersamaan dengan teks). Image yang dapat ditampilkan dalam web site adalah jenis GIF, JPG, XBM, dan PNG.
Mengenal Fungsi Image Pada HTML image Gambar adalah suatu perpaduan titik, garis, bidang, dan warna yang dikomposisikan untuk mencitrakan sesuatu. Gambar merupakan sajak tanpa kata- kata. Suatu objek bisa dijadikan suatu gambar. dibawah ini adalah penjelasan singkat tentang fungsi dan cara memasukan gambar di HTML
Bentuk Umum
Bentuk Umum Penulisan Kode HTML untuk menampilkan Gambar adalah.
<img src=“nama_image” [Atribut]>
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.
Hasil Contoh 1:
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>
<BODY BACKGROUND="Sampulilmu.png" >
</BODY>
</HTML>
Hasil Contoh 1:
Contoh 2:
Hasil Contoh 2:
<HTML>
<BODY<H2>Sahabat Sampul Ilmu</H2><P>
<IMG SRC=" Sampulilmu.png "><BR>
<IMG SRC=" Sampulilmu.png "><BR>
</BODY>
</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)
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>
<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
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>
<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>
Image Border
Memberi bingkai pada image
Contoh :
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>
<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>
Image Sebagai Link
Image juga dapat dijadikan sebagai Link
Bentuk:
Buat Terlebih dahulu Halaman coba1.html masih didalam folder latihan kemudian buka halaman coba.html ketikan kode dibawah ini
Semoga Mengenal Fungsi Image Pada HTML Bermanfaat
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>
<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
Post a Comment for "Mengenal Fungsi Image Pada HTML"
Post a Comment