(Tugas 9A) IMAGE
Untuk menyisipkan gambar ke dalam sebuah halaman HTML,
mula-mula kita harus menyediakan terlebih dahulu file gambar yang
dibutuhkan. Fila gambar ini biasanya berekstensi GIF, JPG atau BMP. Bila
file gambar itu telah tersedia, dan kita mengetahui nama dan letak,
atau lokasi file tersebut, barulah kita bisa menyisipkannya ke dalam
halaman web kita dengan menggunakan TAG <IMG SRC="nama file gambar tersebut">.
Bila terletak dalam folder lain, maka harus dituliskan lokasinya, MIsalnya:
<IMG SRC="images/email.gif"> bila file gambar itu terletak (di dalam) folder yang ditempati oleh halaman HTML yang disisip gambar.
<IMG SRC=".../email.gif"> bila file gambar itu terletak satu tingkat di atas (di luar) folder yang ditempati oleh halaman HTML yang disisipi gambar.
ATRIBUT-ATRIBUT GAMBAR
Setelah kita mengetahui cara menyisipkan gambar, sekarang kita akan mempelajari atribut apa saja yang bisa di sertakan dalam TAG <IMG SRC> untuk menghasilkan sejumlah efek tertentu. Atribut pertama yang bisa kita tambahkan ke dalam tag gambar adalah BORDER. Sesuai dengan namanya, atribut ini digunakan untuk memberi efek bingkai pada gambar. Bukalah file HTML di atas tadi, kemudian sisipkanlah atribut border dalam tag gambar. Contohnya akan seperti ini :
Tampilan Notepad :
<html>
<head>
<title> Latihan 9A IMAGE </title>
</head>
<body> Jadi hasilnya akan seperti ini. Maaf ya tidak bisa ScreenShot, karena laptop yang digunakan kehilangan slah satu tombol.
<p> Nama folder yang telah di sisipkan gambar </p>
<p><img src="TOK.jpg></p>
</body>
</html>
Hasilnya :
Bila terletak dalam folder lain, maka harus dituliskan lokasinya, MIsalnya:
<IMG SRC="images/email.gif"> bila file gambar itu terletak (di dalam) folder yang ditempati oleh halaman HTML yang disisip gambar.
<IMG SRC=".../email.gif"> bila file gambar itu terletak satu tingkat di atas (di luar) folder yang ditempati oleh halaman HTML yang disisipi gambar.
ATRIBUT-ATRIBUT GAMBAR
Setelah kita mengetahui cara menyisipkan gambar, sekarang kita akan mempelajari atribut apa saja yang bisa di sertakan dalam TAG <IMG SRC> untuk menghasilkan sejumlah efek tertentu. Atribut pertama yang bisa kita tambahkan ke dalam tag gambar adalah BORDER. Sesuai dengan namanya, atribut ini digunakan untuk memberi efek bingkai pada gambar. Bukalah file HTML di atas tadi, kemudian sisipkanlah atribut border dalam tag gambar. Contohnya akan seperti ini :
Tampilan Notepad :
<html>
<head>
<title> Latihan 9A IMAGE </title>
</head>
<body> Jadi hasilnya akan seperti ini. Maaf ya tidak bisa ScreenShot, karena laptop yang digunakan kehilangan slah satu tombol.
<p> Nama folder yang telah di sisipkan gambar </p>
<p><img src="TOK.jpg></p>
</body>
</html>
Hasilnya :
Mudah, bukan?
Atribut image berikutnya yang akan kita pelajari adalah atribut ukuran gambar yaitu WIDTH (Lebar) dan HEIGHT (Tinggi). Tanpa menggunakan atribut ini, browser akan menampilkan gambar sesuai dengan ukuran asli dari file gambar yang disisipkan. Kita bisa mengatur ukuran tampilan gambar dalam browser lebih kecil ataupun lebih besar dari ukuran aslinya dengan menggunakan atribut WIDTH dan HEIGHT tersebut.
Saya mengambil contoh gambar TOK.jpg di atas. Ukuran gambar yang sebenarnya dari file foto ini adalah 7874x3937 pixel. Ukuran suatu gambar bisa teman-teman ketahui dengan menggunakan program penampil gambar seperti ACDSee, IrfanView, dan lain masih banyak lagi.
Komentar
Posting Komentar