WEB PROGRAMMING (HTML DINAMIS) PART 3

Memasang image pada halaman html

 

•          Image atau gambar diperlukan  pada sebuah halaman web agar halaman web tampak lebih indah dan menarik

•          Image yang dapat di masukan ke Document HTML dapat berjenis BMP, JPG, JPEG, GIF, TIFF, dan lain sebagainya.  

•          Sebelum memasukkan image kedalam halaman web ada baiknya memperhatikan ukuran file image tersebut, karena besarnya ukuran image file akan mempengaruhi proses pemuatan file di Browser. 

Tag untuk menempatkan images pada document HTML sebagai berikut :

<img src="lokasi file" alt="keterangan gambar“ border="tebalnya bingkai">

Pada tag diatas ada beberapa atribut yang harus

dituliskan untuk menampilkan suatu image pada

Dokumen HTML. Antara lain :

1. img: Tag ini merupakan inti dari perintah untuk

                                   menampilkan image pada Halaman Web.

2. src: Atribut ini merupakan bagian dari tag yang   berfungsi untuk memberitahu kan kepada           browser tentang nama file image yang akan  ditampilkan serta lokasi dari file image itu       berada.

                Misalkan nama file image yang akan ditampilkan adalah gambar1.jpg dan lokasi file tersebut di simpan pada folder: C:\mydocument\gambar\, maka penulisannya seperti berikut ini  

   src="file:///C:/my document/gambar/gambar1.jpg"

•          Selain itu, kita juga dapat menggunakan url dari situs yang lain, misal gambar tersebut di simpan di http://www.test.com/test-juga. maka penulisan atribut src nya menjadi seperti berikut ini:

src="http://www.test.com/test-juga/gambar1.jpg"

•          Agar memudahkan penulisan dan pemanggilan image, disarankan agar file image tersebut disimpan menjadi satu folder dengan document HTML yang memanggil file image tersebut, sehingga penulisan atribut src nya menjadi seperti ini :

                                                                src="gambar1.jpg"

3. alt: Atribut ini digunakan untuk memberikan keterangan terhadap images tersebut. teks yang dituliskan pada atribut ini akan ditampilkan oleh browser dengan latar belakang kuning ketika mouse mendekati gambar tersebut.
4. border: Atribut ini untuk memberikan efek garis tepi, yang besarnya dapat kita tentukan dengan ukuran pixel, misalnya kita ingin memberikan efek garis tepi sebesar 2 pixel pada file image, maka penulisannya menjadi seperti ini : border="2"
5. contoh penggunaan nya dalam program :

<img src="images/tongtong1.gif" alt="Contoh ke 1" border="0">

<img src="images/tongtong1.gif" alt="Contoh ke 2" border="2">

<img src="images/tongtong1.gif" alt="Contoh ke 3" border="4">

•          Selain images kita juga dapat menampilkan animasi pada dokumen HTML. Animasi itu dapat berupa images dengan Compuserver file yang biasanya ber-ekstensi GIF, Flash animation yang biasanya berekstensi SWF, Java Applet yang biasanya berekstensi CLASS, dan sebagainya.

•          Untuk file animasi berjenis GIF, penulisan tag nya sama dengan penulisan images biasa seperti pada ketiga contoh diatas. Sedangkan untuk FLASH dan JAVA APPLET, diperlukan beberapa tag dan atributnya seperti di bawah ini:

 

Contoh penulisan TAG HTML untuk menampilkan Animasi Flash :

 

<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000

codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version

=5,0,2,0

width=700

height=300>

<param name=movie value=zipper.swf>

<param name=quality value=high>

<param name=BGCOLOR value=#000000>

<param name=SCALE value=showall>

<embed src=zipper.swf

quality=high

pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version

=ShockwaveFlash type=application/x-shockwave-flash

width=700

height=300

bgcolor=#000000

scale= showall>

</embed>

</object>

Tag HTML untuk menampilkan animasi flash terdiri dari beberapa atribut yang perlu di ketahui antara lain :

-    object: Tag ini merupakan penanda untuk Browser Internet explorer (IE) dan kompatibelnya, agar dapat menjalankan flash dengan plugins yang ada. Untuk Netscape (N) dan kompatibelnya Tag ini tidak berfungsi atau di abaikan.

-  width: Atribut ini untuk menentukan lebar dari animasi Flash yang akan ditampilkan oleh Browser

-  height: Atribut ini untuk menentukan tinggi dari animasi Flash yang akan ditampilkan oleh Browser

-  classid: Atribut ini merupakan penanda atau ID yang di gunakan oleh Macromedia. Atribut ini tidak perlu disetting biarkan saja seperti itu.

-  codebase: Atribut ini merupakan kode lokasi yang digunakan oleh Macromedia. Atribut yang ini juga tidak perlu Anda rubah-rubah biarkan apa adanya.

-  param: Atribut ini digunakan untuk men-set parameter dari file flash yang digunakan, atribut param mempunyai beberapa bagian antara lain :

*  Movie Lokasi dari file flash yang akan ditampilkan

*  Quality kalitas dari file flash yang akan ditampilkan. Pilihannya bisa high, medium atau low.

*  Loop Untuk menentukan apakah file flash akan diputar ulang setelah selesai. 1 diulang, 0 tidak diulang.

*   Menu Untuk menset menu dari file flash ketika di klik kanan pada file tersebut. True - menu enable, false - menu disable. 

-     embed: Atribut ini digunakan oleh Netscape dan kompatibel nya untuk menjalankan file flash. Sedangkan untuk IE dan kompatibelnya, parameter ini diabaikan. Parameter ini bukan tag standar yang divalidkan oleh W3C.

 

•          apa ada yang lebih ringkas..?.Ada sebuah Artikel berbahasa inggris yang ditulis oleh : Drew McLellan dengan judul : Embedding Flash While Supporting Standards yang memberitahukan cara ringkas untuk menampilkan animasi flash. Pada artikel itu dia berusaha untuk membuat suatu standard penulisan sebuah kode HTML untuk menampilkan animasi Flash. Akan tetapi hasil penelitian nya belum mendapatkan standarisasi dari W3C, walaupun di beberapa browser kode HTML hasil penelitiannya berjalan dengan mulus. Bila Anda punya kesempatan silahkan Anda membaca Artikel tersebut secara

•          <object type="application/x-shockwave-flash" data="flash/top.swf“ width="384" height="59“

<param name="movie" value="flash/top.swf">

</object>

•          MEMBUAT LINK PADA GAMBAR

<a href=“file1.html”>

<img src=“images/gambar1.jpg” width=“400” heigth=“200” />

</a>

 

•          MEMBUAT TABLE

<table width=“80%” align=“center”>

<tr>

<td>

 ISI WEB DISINI

</td>

</tr>

</table>

IMAGEMAP

•          Image map yaitu suatu area pada image yang bisa kita beri hyperlink, area ini biasanya disebut “hot spots”.

•          Coordinat dari hotspot ditentukan menggunakan bidang geometry seperti rectangle, polygon dan lainnya.

•          Coordinat dari object relatif terhadap pojok kiri atas image

Coordinate	Value
Rect	Left-x, top-y, right-x, bottom-y
Circle	CENTER-X, CENTER-Y, RADIUS
Poly	X1,Y1,X2,Y2,….XN,YN

Posted in: Study