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
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 :
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>
<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)
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>
<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>
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>
Semoga 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>
Semoga Bermanfaat
{ 0 komentar... Views All / Send Comment! }
Posting Komentar