Menampilkan gambar pada halaman web
Gambar pada halaman web dapat berfungsi untuk memperindah tampilan halaman website. Selain itu gambar juga dapat berisi informasi yang dapat melengkapi data yang kita sampaikan pada halaman website. Tidak semua extension gambar/image yang dapat digunakan pada halaman HTML. Jenis-jenis ext gambar yang biasanya digunakan pada halaman web adalah GIF, JPEG dan PNG. Nama file gambar pada script HTML harus dipastikan sesuai dengan file gambarnya, perhatikan huruf besar atau huruf kecilnya, jika tidak sama, maka gambar tidak akan muncul dan sebisa mungkin hindari penamaan gambar dengan menggunakan spasi kemudian, pastikan juga bahwa gambar yang kita gunakan bersifat open.Menampilkan gambar pada folder utama, folder sesudah dan folder sebelumnya
Untuk menampilkan gambar di web tag yang digunakan adalah <img>. Tag <img> adalah tag tunggal yang tidak memerlukan tag penutup. Untuk mengarahkan sumber file gambarnya tag <img> di kombinasikan dengan atribut “src” sehingga format lengkapnya adalah <img src=“file_gambar.ext_gambar”> contoh aplikasi scriptnya seperti berikut ini:<html>Seperti biasa, simpan dengan ekstensi dot html. Kemudian yang perlu diperhatikan adalah file gambar dengan script ini harus berada pada direktori atau satu tempat (folder) yang sama. Jika file gambar berada di folder anak atau di dalam folder dari folder tempat script / file html, Maka yang perlu anda lakukan adalah menambahkan nama folder tersebut diikuti dengan tanda slash (/) dan nama file gambar yang akan dimuat seperti: <img src="nama_folder-1/gambar.png"> Jika dalam folder tersebut terdapat folder lagi, dan gambar yang ingin dimuat ada di dalamnya maka penulisannya menjadi seperti ini :<img src="nama_folder/nama_folder-1/nama_folder-2/gambar.png">
<head>
<title>Menampilkan gambar</title></Head>
<body>
<img src=”logo_dignet.png” alt=”logo dIgnet” width=”50” height=”100”>
</body>
</html>
Kemudian jika yang lokasi file gambarnya berada di luar folder utama (tempat file html) yang kita lakukan adalah menambahkan tanda "../". Contohnya seperti ini <img src="../gambar.png"> ini maksudnya kita lompat keluar dari satu folder. Jika kita ingin keluar atau melompati 2 dua folder kita tinggal menambahkan "../../" contoh: <img src="../../gambar.png"> ini maksudnya kita keluar dari 2 buah folder, dan begitu seterusnya, tinggal menyesuaikan berapa jumlah folder yang akan dilompati.
Note: tag alt seperti contoh script diatas adalah untuk memberi keterangan pada gambar. Jika nanti gambar tidak muncul pada halaman web mungkin karena koneksi terputus sehingga gambar belum sepenuhnya termuat, maka akan muncul teks keterangan tersebut yang dihasilkan oleh tag alt.
Menampilkan gambar dari web lain
Kemudian untuk menampilkan gambar yang berasal dari halaman website lain caranya adalah, dengan mengarahkan isi atribut src dengan url letak gambar itu berada. Contoh:<html>
<body>
<img src=”http://domain.com/gambar.png” alt=”keterangan gambar” width=”50” height=”50”>
</body>
</html>
Membuat sebagian gambar menjadi link aktif
Bagaimana untuk membuat sebagian gambar menjadi link aktif yang bisa diklik dan berpindah halaman? untuk membuatnya yaitu dengan menggunakan atribut usemap. Value usemap adalah name dari atribut map yang ditambahkan tanda pagar, untuk tag map memiliki atribut nam. Tag map mengapit tag area yang memiliki atribut shape, coords, href dan alt.Atribut shape memiliki value:rect, circle dan poly. Value dari atribut coords adalah koordinat dari bentuk yang didefinisikan dalam atrubut shape.
- Untuk bentuk rect value dari coords-nya adalah x1,y1,x2,y2 dimana utk menunjukan left, top, right, bottom
- Untuk bentuk poly value dari coords-nya adalah x,y, radius
- Untuk bentuk circle value dari coods-nya adalah x1,y1,x2,y2,..,xn,yn
Sebelumnya siapkan gambar penguins.jpg (bawaan dari windows), buat 3 halaman html baru dengan isi bebas, beri nama file html tersebut secara berurut dengan nama “halaman 1”, “halaman 2”, “halaman 3”. simpan gambar dan 3 halaman html tersebut pada satu folder yang sama.
kemudian buat halaman berikut ini:
<html>simpan dengan ekstensi dot html dan berada pada satu folder yang sama dengan file gambar dan 3 halaman web yang dibuat sebelumnya. Jalankan filenya dan beberapa (3) potongan gambar pinguin tersebut akan menjadi link aktif yang bisa diklik dan menampilkan 3 halaman yang berbeda (3 halaman yang dibuat sebelumnya).
<head>
<TITLE> link pada gambar </TITLE>
</head>
<body>
<br>
<p>-Halaman 1 bisa di buka dengan mengklik gambar pada bagian kepala pinguin sebelah kanan yang paruhnya tertutup rapat. ketika
diklik kanan akan muncul shape berbentuk rect/persegi.<br>
-Halaman 2 bisa dibuka dengan mengklik bagian kepala pinguin sebelah kiri yang paruhnya sedikit terbuka. ketika di klik kanan
akan muncul shape berbentuk circle atau linkaran.<br>
-Halaman 3 bisa dibuka dengan mengklik bagian kepala penguin yang ditengah. ketika
di klik kanan akan muncul shape berbentuk likngkaran.</p>
<img src="penguins.jpg" width="500" height="400" alt="gembar isi menu" usemap="#peta_menu">
<map name="peta_menu">
<area shape="rect" coords="400,30,300,90," alt="kotak" href="halaman 1.html">
<area shape="circle" coords="150,60,50" alt="lingkaran" href="halaman 2.html">
<area shape="circle" coords="245,80,52" alt="linkaran2" href="halaman 3.html">
</map>
</BODY>
</HTML>
Untuk menentukan koordinat gambar yang bisa dijadikan link bisa dengan cara manual atau memprediksi posisinya hingga ditemukan posisi yang diinginkan, dan bisa juga dengan bantuan aplikasi paint, photoshop dan aplikasi editor gambar lainnya yang bisa menampilkan ruler (penggaris), satuan penggaris yang digunakan adalah pixel.
Selamat ber-eksperimen. Terimakasih
Tidak ada komentar:
Posting Komentar