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

Read More

WEB PROGRAMMING (HTML DINAMIS) PART 2

Tag / Kode / Perintah dari HTML

        Headings

-          Di definisikan dengan menggunakan tag <h1> sampai <h6>

-          Digunakan untuk memberikan format pada judul suatu dokumen/ halaman web

-          Jangan gunakan headings untuk membuat text menjadi besar atau tebal (gunakan hanya untuk heading)

-          Search engine menggunakan headings untuk mengindeks struktur dan isi dari suatu halaman web

-          Browser secara otomatis akan memberikan line kosong di bawah suatu headings

 

       Hr

-          Tag hr digunakan untuk membuat garis horisontal

-          Attribut width

-          Attibut size

-          Attribut color

1.       <center> dan </center> 

Tag ini mempunyai fungsi untuk membuat suatu objek berada di tengah suatu bidang yang ditentukan. Objek itu dapat berupa teks, image maupun tabel. Suatu objek akan tetap berada di tengah sampai Tag penutup </center> ditemukan.

                Jadi setelah Anda memberi Tag <center> jangan lupa untuk memberikan Tag penutupnya yaitu </center> pada akhir dari objek yang akan diposisikan pada tengah suatu bidang.

    2.     <b> dan </b> 

    Tag ini mempunyai fungsi untuk membuat huruf atau karakter yang ditampilkan menjadi tebal (BOLD).

<b> program HTML</b> pertamaku.
            Program HTML pertamaku

           Pada contoh diatas, kalimat program HTML diapit dengan 

           tag <b> dan </b> , maka  Anda jalankan di browser kalimat 

          tersebut akan tercetak dengan huruContoh penggunaan nya           di dalam program :
        Ini adalah tebal.

3.  <font> dan </font> 

Tag ini berfungsi untuk mengatur tampilan jenis, warna, dan ukuran suatu karakter atau huruf (font).

          Atribut dari Tag <font> ini ada beberapa jenis antara lain :

                a. color : Untuk merubah warna dari huruf atau karakter.

                b. size: Untuk merubah ukuran huruf, besar kecilnya ukuran huruf di deklarasikan dengan angka 1 sampai 6.

                c. face : Untuk merubah jenis dari huruf yang akan kita gunakan seperti Arial, Times New Roman, Verdana dan sebagainya.

  Atribut color :
contoh penggunaan nya di dalam program :

<font color="black">Tulisan ini berwarna hitam</font>
<font color="red">Tulisan ini berwarna merah</font>
<font color="blue">Tulisan ini berwarna biru</font>
<font color="green">Tulisan ini berwarna hijau</font>
<font color="orange">Tulisan ini berwarna orange</font>

Selain dengan nama warna dalam bahasa inggris,  juga dapat menggunakan kode HEXA seperti pada table dibawah ini :

Atribut size :
Contoh penggunaan nya di dalam program :

<font size="1">Huruf ini mempunyai ukuran 1</font>
<font size="2">Huruf ini mempunyai ukuran 2</font>
<font size="3">Huruf ini mempunyai ukuran 3</font>
<font size="4">Huruf ini mempunyai ukuran 4</font>
<font size="5">Huruf ini mempunyai ukuran 5</font>

                Selain dengan angka, mendeklarasikan ukuran huruf juga dapat dengan besarnya PIXEL contoh : <font size="1px"> 

Atribut face :
Contoh penggunaan nya di dalam program :

<font face="arial">Huruf ini type ARIAL</font>

<font face="times new roman">Huruf ini type TIMES NEW ROMAN</font>

<font face="verdana">Huruf ini type VERDANA</font>

<font face="tahoma">Huruf ini type TAHOMA</font>

4.     <p>

                Tag ini mempunyai fungsi untuk membuat sebuah paragraf 

                baru. Didalam sebuah artikel tentunya banyak sekali paragraf-

                paragraf untuk memisahkan pokok pikiran yang terkandung 

               dalam kumpulan kalimat tersebut, untuk memisahkan paragraf

               yang satu dengan yang lainnya, maka Tag <p> ini digunakan.

                Atribut dari Tag <p> ini ada 3 jenis yaitu

                Rata kanan ( align="right" ),

                Rata kiri ( align="left" ),

                rata kanan kiri ( align="justify" ).

                dan rata tengah ( align="center" ).

               Contoh penggunaan nya di dalam program :

  

               5.      _dan

                Tag ini mempunyai fungsi untuk membuat sebuah huruf atau 

                karakter berada sedikit kebawah dari huruf atau karakter yang 

               lain. Misalnya kita ingin menuliskan rumus suatu senyawa 

              kimia, maka tag <sub> ini diperlukan. 

               Contoh penggunaan nya di dalam program :

                 H₂O      tampilan di browser :       H₂O
                 FeCl₃   tampilan di browser :     FeCl₃
                CO₂      tampilan di browser :       CO₂

               6.      ^dan

                Tag ini merupakan kebalikan dari tag <sub>, bila kita ingin 

                membuat suatu huruf atau karakter agak sedikit keatas maka 

               tag <sup> ini diperlukan.

                Misalnya kita ingin menuliskan suatu persamaan matematika 

               maka kita gunakan tag ini untuk membuat suatu karakter atau 

                huruf berada sedikit diatas yang lainnya.
                  Contoh penggunaan nya di dalam program :

                X ² + Y ² + X + Y + 1 = 0      

                  tampilan di browser : X ² + Y ² + X + Y + 1 = 0

                  7.    <i> dan </i>

                Tag <i> ini berfungsi untuk membuat huruf atau karakter  

                menjadi ITALIC (miring).
          Contoh penggunaan nya di dalam program :
                     Menteri Pendidikan Nasional <i>memberikan 

                   santunan</i> untuk anak yatim piatu
         Kalimat diatas bila di jalankan pada browser menjadi seperti 

        berikut ini :

                Menteri Pendidikan Nasional memberikan santunan untuk

               anak yatim piatu

                 8. <DD>

                Perintah/tag <DD> merupakan singkatan dari Definition

               Description adalah perintah untuk membuat teks atau 

               paragraph agak masuk kedalam.

                contoh :

                <p align=“justify”>

            <DD>

                banyak yang bingung apa perbedaan Java dan JavaScript, Java adalah bahasa pemrograman yang lebih komplek dibandingkan JavaScript.

                hasilnya :

                                banyak yang bingung apa perbedaan Java dan JavaScript, Java adalah bahasa pemrograman yang lebih komplek dibandingkan JavaScript.

               9.      <!-

                adalah perintah untuk membuat KOMENTAR. Semua teks 

               atau perintah yang diapit oleh perintah ini tidak akan 

               dijalankan. Ini hanya komentar untuk program.

                contoh :

                <!- Ini adalah contoh komentar ->

                                 "SELAMAT BELAJAR"

Read More