MODUL III, WEB 1

MEMBUAT LINK, INSERT GAMBAR DAN MULTIMEDIA
 

1.      TUJUAN
a.            Mahasiswa dapat membuat link untuk menghubungkan ke halaman lain.
b.            Mahasiswa mampu menyisipkan gambar serta menjadi gambar sebagai background pada halaman web.
c.             Mahasiswa mampu menyisipkan multimedia berupa suara dan video pada halaman web.
2.      TEORI SINGKAT
·        Untuk membuat link perintah yang digunakan adalah [label link]
·        Untuk menampilkan gambar ada dua macam, pertama adalah menampilkan gambar sebagai background dan menampilkan gambar sebagai ornamen ataupun simbol link.
Untuk menampilkan sebagai background maka kita harus menuliskan bada body yaitu . Demikian juga untuk background suara, maka cukup dengan perintah digunakan , termasuk untuk film /video dapat digunakan http://”taxi.dat”
Sedangkan untuk menampilkan gambar sebagai icon maupun simbol link maka digunakan
3.      PRAKTEK
a.      Script pertama link1
         Berikut ini adalah script sederhana yang akan memberikan kepada kita gambaran penggunaan link. Perintah umum yang digunakan sebagaimana di bawah menggunakan [Symbol, huruf, kata, kalimat sebagai media link (untuk diklik)] dan ditutup dengan tanda sebagai aturan umum dari xhtml dimana setiap perintah harus ditutup dan bersarang dengan sempurna. Simpan dengan nama link1.html dan eksekusi script tersebut maka akan menghasilkan tampilan sebagaimana di bawah:
        
         Dari hasil  tampilan di atas  diperlihatkan bahwa kalimat yang menjadi indicator link akan diberi warna default ungu bergaris bawah. Pada saat kursor mouse di makke over maka akan tampil lambang tangan pada kursor yang menunjukkan sambungan ke alamat atau file html lainnya.
b.      Dengan perubahan
         Sedikit memberikan perubahan pada script body, sebagaimana dibawah ini. Dapat terlihat pada tampilan bahwa ada perubahan tampilan pada kalimat yang dilink-kan. Dapat dijabarkan bahwa fungsi script di bawah ini adalah untuk memberikan setting pada link. Link=”warna” menunjukkan warna pada link default sebelum diklik adalah warna olive atau hijau muda, kemudian alink=”warna” menunjukkan perubahan warna pada saat menunggu sampai link terbuka. Sedangkan pada vlink=”warna” menunjukkan bahwa suatu link pernah diakses/dibuka, dapat ditunjukkan bahwa link yang pernah dibuka berwarna biru..
        
        
        
c.      Perubahan ketiga dengan menambahkan tab index
Sekali lagi kami jelaskan bahwa fungsi script body diikuti dengan variable link=”olive” adalah fungsi untuk mendefinisikan agar link yang berada pada body berwarna dasar olive atau warna zaitun/hijau muda sebelum dilakukan klik atau warna default link. Sedangkan variable alink=”#00000”  adalah menunjukkan warna hitam dimana saat link diklik selama menunggu link terbuka. Sedangkan vlink=”blue” menyatakan bahwa warna link setelah diklik maka akan menunjukkan warna biru. Sehingga kita dapat mengetahui apakah sebuah link pernah diakses atau tidak. Seorang pengguna mungkin tidak perlu mengingat link mana saja yang sudah pernah dilihat, cukup dengan melihat warna yang terpampang.
Fungsi lain dalam listing di atas adalah a href=”help.html”, dimana perintah tersebut akan mengalamatkan sesuai dengan file html yang tertulis diantara dua tanda petik ””.  Jadi pada statemen di atas maka link akan dialamatkan ke help. Html dalam satu direktori. Kemudian statemen tabindex=”1”, berarti bahwa link ini mendapatkan prioritas apabila fungsi tab pada keyboard dipencet dibandingkan dengan yang menggunakan statemen tabindex=”2” dan seterusnya. Sedangkan target memberikan perintah alternatif apabila pada taget link yang ditentukan tidak ada maka akan diisi dengan halaman kosong.

d.      Menambah background gambar
         Sekarang dengan menambahkan background pada tag body. Dengan menambahkan statemen background=”image/GRYTXTR2.jpg” sebagaimana dibawah ini memerintahkan agar script memanggil dan menampilkan file GRYTXTR2.jpg (adalah file gambar berekstensi jpg dengan bentuk gambar raster grey) untuk ditampilkan sebagai background halaman web dengan formasi title yaitu memenuhi seluruh halaman web. Sedangkan apabila kita menginginkan untuk menampilkan gambar saja yang diletakkan pada halaman web maka cara pemanggilan adalah dengan menggunakan perintah . Sedangkan align=”right” menunjukkan bahwa gambar tersebut diletakkan di sisi kanan halaman web pada baris paling atas.
         Dan
    
        
e.      Memodifikasi dengan script
         Kita akan menambahkan perintah agar gambar ditampilkan sesuai dengan keinginan kita. Dengan memberikan statemen width=”100” artinya bahwa tampilan gambar akan diformat mempunyai ketinggian sebesar 100 pixel. Demikian juga statement height=”100” artinya gambar akan ditampilkan dengan lebar 100 pixel.
    

link gambar

    

<!–[if gte vml 1]>

Link yang dilambangkan dengan gambar

<![endif]–>Rectangular Callout: Link yang dilambangkan dengan gambar        

         Untuk menampilkan tanpa border gunakan perintah border=”0” sebagaimana ditunjukkan di bawah ini.
        
        
LATIHAN:
Memasukkan sound:
Secara prinsip sebenarnya di dalam script java untuk pemograman web dapat kita identifikasikan sebagai bentuk perpaduan antara beberapa tag. Sebagaimana di atas untuk menggunakan gambar sebagai link. Dan bentuk link pun dapat berbagai ragam. Dari link berbentuk file html sampai kepada gambar, juga dapat berupa file multimedia semacam sound, gambar animasi bahkan gambar video juga mampu ditampilkan. Namun karena di dalam browser mechin tidak mesti mempunyai masing-masing player file maka komputer akan memanfaatkan fasilitas program multimedia yang sudah terinstal pada komputer lokal. Sebagaimana dibawah ini kita lihat bagaimana kita dapat menampilkan / melinkkan file sound. File sound yang dipanggil berekstensi wma. Kita lihat pula bahwa script di bawah ini memadukan antara script list dengan bentuk bullet circle.

Menambah background sound:
Sebagaimana keterangan di atas, di bawah ini kita akan menampilkan background tapi berupa suara. Dinamakan bachground suara karena pada saat halaman web ini dibuka maka dengan sendirinya langsung akan diikuti dengan iringan suara. Statemen loop=”10” berfungsi sebagai pembatas perulangan. Andai tidak kita tuliskan statemen loop maka suara akan diputar sekali saja. Namun apabila kita menginginkan sepanjang web tersebut dibuka suara tetap keluar maka dalam statemen loop tersebut diisi dengan angka -1 pada nilai loop. Sebagai contoh di bawah bgsound akan diperdengarkan 10 kali

Background suara

Selamat mendengarkan suara selama Anda membuka wev ini!
        
Menambah tampilan Video:
Tidak sulit untuk menambahkan tampilan video, cukup dengan menambahkan statemen berikut. Sebagai pengganti format video, dibawah ini kita tampilkan saja sebuah animasi gif. Sebenarnya format gif disini lebih spesifik pada gambar, tatapi untuk mewakili video rasanya tidak begitu jelek. Perintah yang digunakan adalah tag embed. Variabel yang dapat mengikuti sama dengan menampilkan gambar height, width. Value lainnya adalah units yang dapat diisi dengan kekerapan dot atau pixels dan biasanya pixels ini sebagai defaultnya dalamsatuan dot per inchi. Variabel autostar menunjukkan bahwa video akan diputar dikala web dibuka andai valuenya true, anda false maka tidak akan diputar langsung kecuali kita harus mengeksekusinya secara manual. Sedangkan loop sama halnya dengan bgsound digunakan sebagai option apakah video tersebut akan diputar berulang-ulang atau sekali saja. Apabila sekali saja maka pada loop isilah dengan ”false”.
Tampil Video
TUGAS:
Membuat sebuah halaman web (bebas sesuai kreativitas Anda), yang di dalamnya terdapat link (minimal 3 link), gambar (sebagai background dan images) sertakan multimedia.
PROFIL MUHAMMAD ARIEF SATEJO KINADY

Selokambang Rt 02 Tamantirto Kasihan Bantul

Link Gambar

   


  • Saya adalah seorang suami dengan satu orang istri dan dua orang anak. Anak pertama sudah kelas 1 SMP, sedang yang kedua baru kelas 1 SD. Mereka hoby makan makanan berasal dari laut, semacam kerang, kepiting, cumi dan ikan-ikanan laut.

  • Kebiasaan kami setiap hari libur mencari kepiting dan kerang mentah di jln. Cik Di Tiro. Karena disana ada distributor jenis ikan-ikannan termasuk kepiting dan kerang. Harganya juga lumayan murah. Hanya saja kita perlu belajar cara memasaknya. Bagi kita sih, enjoy,cukup direbus dengan bawang merah, bawang putih dan garam. Rasanya sudah nikmat. Hanya saja jangan lupa dibersihkan ekstra agar rasanya lebih enak. Bila ada telur kepiting rasanya lebih asoi, wuich nikmat sekali. Biasanya dengan 5 buah kepiting rebus dan satu piring kerang gorong kami berempat bisa menghabiskan 1 kiloan nasi.
  • Selain itu Kami senang jalan-jalan pakai sepeda motor, lebih nyaman dan dapat menikmati keindahan alam. Kami sering touring ke Surabaya, Semarang, Cilacap dan Tuban.
    Tampil Video

Hasil Tampilan:
KESIMPULAN:
  • Dengan menggunakan fasilitas gambar untuk dijadikan background maupun insert isi / materi dari web memberikan penampilan web semakin nyaman. Lebih representative dan menarik untuk dilihat dan diketahui isinya. Lebih mudah untuk menceritakan suatu berita/informasi dan nampak lebih nyata. Ditambah dengan fasilitas mutimedia, animasi baik suara maupun gambar yang sangat mendukung sebagai media informasi yang handal dan terpercaya.
  • Untuk menggunakan semua fasilitas tersebut sangat mudah dan tidak membingungkan. Tinggal kreatifitas kita untuk memilih gambar/suara yang menarik dan memadukan gambar-gambar tersebut menjadi layout yang sempurna dalam sebuah web akan menjadikan media web yang kita buat menjadi informasi yang menarik dan publik akan senang mengunjunginya.
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s