MODUL III, WEB 1

MEMBUATLINK, INSERT GAMBAR DAN MULTIMEDIA
 

1.      TUJUAN
a.           Mahasiswa dapat membuat link untukmenghubungkan ke halaman lain.
b.           Mahasiswa mampumenyisipkan gambar serta menjadi gambar sebagai background pada halaman web.
c.            Mahasiswa mampumenyisipkan multimedia berupa suara dan video pada halaman web.
2.      TEORISINGKAT
·       Untuk membuat link perintah yangdigunakan adalah [label link]
·       Untuk menampilkangambar ada dua macam, pertama adalah menampilkan gambar sebagai background danmenampilkan gambar sebagai ornamen ataupun simbol link.
Untuk menampilkan sebagai background maka kita harusmenuliskan bada body yaitu . Demikian jugauntuk background suara, maka cukup dengan perintah digunakan , termasuk untuk film /video dapat digunakan http://”taxi.dat”
Sedangkan untuk menampilkan gambar sebagai icon maupunsimbol link maka digunakan
3.      PRAKTEK
a.      Scriptpertama link1
         Berikut ini adalah script sederhana yang akan memberikankepada kita gambaran penggunaan link. Perintah umum yang digunakan sebagaimanadi 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 bersarangdengan sempurna. Simpan dengan nama link1.html dan eksekusi script tersebutmaka akan menghasilkan tampilan sebagaimana di bawah:
        
         Dari hasil tampilan di atas  diperlihatkanbahwa kalimat yang menjadi indicator link akan diberi warna default ungubergaris bawah. Pada saat kursor mouse di makke over maka akan tampil lambangtangan pada kursor yang menunjukkan sambungan ke alamat atau file html lainnya.
b.      Dengan perubahan
         Sedikitmemberikan perubahan pada script body, sebagaimana dibawah ini. Dapat terlihat pada tampilan bahwa ada perubahan tampilanpada kalimat yang dilink-kan. Dapat dijabarkan bahwa fungsi script di bawah iniadalah untuk memberikan setting pada link. Link=”warna” menunjukkan warna padalink default sebelum diklik adalah warna olive atau hijau muda, kemudianalink=”warna” menunjukkan perubahan warna pada saat menunggu sampai linkterbuka. Sedangkan pada vlink=”warna” menunjukkan bahwa suatu link pernahdiakses/dibuka, dapat ditunjukkan bahwa link yang pernah dibuka berwarna biru..
        
        
        
c.      Perubahanketiga dengan menambahkan tab index
Sekalilagi kami jelaskan bahwa fungsi script body diikuti dengan variablelink=”olive” adalah fungsi untuk mendefinisikan agar link yang berada pada bodyberwarna dasar olive atau warna zaitun/hijau muda sebelum dilakukan klik atauwarna default link. Sedangkan variablealink=”#00000”  adalah menunjukkan warnahitam dimana saat link diklik selama menunggu link terbuka. Sedangkanvlink=”blue” menyatakan bahwa warna link setelah diklik maka akan menunjukkanwarna biru. Sehingga kita dapat mengetahui apakah sebuah link pernah diaksesatau tidak. Seorang pengguna mungkin tidak perlu mengingat link mana saja yangsudah pernah dilihat, cukup dengan melihat warna yang terpampang.
Fungsi lain dalam listing di atas adalah ahref=”help.html”, dimana perintah tersebut akan mengalamatkan sesuai denganfile html yang tertulis diantara dua tanda petik ””.  Jadi pada statemen di atas maka link akandialamatkan ke help. Html dalam satu direktori. Kemudian statemen tabindex=”1”,berarti bahwa link ini mendapatkan prioritas apabila fungsi tab pada keyboarddipencet dibandingkan dengan yang menggunakan statemen tabindex=”2” danseterusnya. Sedangkan target memberikan perintah alternatif apabila pada tagetlink 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 dibawahini memerintahkan agar script memanggil dan menampilkan file GRYTXTR2.jpg (adalahfile gambar berekstensi jpg dengan bentuk gambar raster grey) untuk ditampilkansebagai background halaman web dengan formasi title yaitu memenuhi seluruhhalaman web. Sedangkan apabila kita menginginkan untuk menampilkan gambar sajayang diletakkan pada halaman web maka cara pemanggilan adalah denganmenggunakan perintah . Sedangkanalign=”right” menunjukkan bahwa gambar tersebut diletakkan di sisi kananhalaman web pada baris paling atas.
         Dan
    
        
e.      Memodifikasi dengan script
         Kita akan menambahkan perintah agar gambar ditampilkansesuai dengan keinginan kita. Dengan memberikan statemen width=”100” artinya bahwatampilan gambar akan diformat mempunyai ketinggian sebesar 100 pixel. Demikianjuga statement height=”100” artinya gambar akan ditampilkan dengan lebar 100pixel.
    

link gambar

    

<!–[if gte vml 1]>

Link yang dilambangkan dengan gambar

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

         Untuk menampilkan tanpa border gunakan perintahborder=”0” sebagaimana ditunjukkan di bawah ini.
        
        
LATIHAN:
Memasukkansound:
Secaraprinsip sebenarnya di dalam script java untuk pemograman web dapat kitaidentifikasikan sebagai bentuk perpaduan antara beberapa tag. Sebagaimana di atas untuk menggunakan gambar sebagailink. Dan bentuk link pun dapat berbagai ragam. Dari link berbentuk file htmlsampai kepada gambar, juga dapat berupa file multimedia semacam sound, gambaranimasi bahkan gambar video juga mampu ditampilkan. Namun karena di dalambrowser mechin tidak mesti mempunyai masing-masing player file maka komputerakan memanfaatkan fasilitas program multimedia yang sudah terinstal padakomputer lokal. Sebagaimana dibawah ini kita lihat bagaimana kita dapatmenampilkan / melinkkan file sound. File sound yang dipanggil berekstensiwma. Kita lihat pula bahwa script di bawah ini memadukan antara script listdengan bentuk bullet circle.

Menambahbackground sound:
Sebagaimana keterangan di atas, di bawah ini kita akanmenampilkan background tapi berupa suara. Dinamakan bachground suara karenapada saat halaman web ini dibuka maka dengan sendirinya langsung akan diikutidengan 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 tetapkeluar 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!
        
Menambahtampilan Video:
Tidak sulit untuk menambahkan tampilan video, cukupdengan menambahkan statemen berikut. Sebagai pengganti format video, dibawahini kita tampilkan saja sebuah animasi gif. Sebenarnya format gif disini lebihspesifik pada gambar, tatapi untuk mewakili video rasanya tidak begitu jelek.Perintah yang digunakan adalah tag embed. Variabel yang dapat mengikuti samadengan menampilkan gambar height, width. Value lainnya adalah units yang dapatdiisi dengan kekerapan dot atau pixels dan biasanya pixels ini sebagaidefaultnya dalamsatuan dot per inchi. Variabel autostar menunjukkan bahwa videoakan diputar dikala web dibuka andai valuenya true, anda false maka tidak akandiputar langsung kecuali kita harus mengeksekusinya secara manual. Sedangkanloop sama halnya dengan bgsound digunakan sebagai option apakah video tersebutakan diputar berulang-ulang atau sekali saja. Apabila sekali saja maka padaloop isilah dengan ”false”.
TampilVideo
TUGAS:
Membuatsebuah halaman web (bebas sesuai kreativitas Anda), yang di dalamnya terdapatlink (minimal 3 link), gambar (sebagai background dan images) sertakanmultimedia.
PROFIL MUHAMMAD ARIEF SATEJOKINADY

Selokambang Rt 02 Tamantirto KasihanBantul

LinkGambar

   


  • Saya adalahseorang suami dengan satu orang istri dan dua orang anak. Anak pertama sudah kelas 1 SMP, sedangyang kedua baru kelas 1 SD. Mereka hoby makan makananberasal dari laut, semacam kerang, kepiting, cumi dan ikan-ikanan laut.

  • Kebiasaan kami setiap hari libur mencari kepitingdan kerang mentah di jln. Cik DiTiro. Karena disana ada distributor jenis ikan-ikannan termasukkepiting dan kerang. Harganya juga lumayan murah. Hanya saja kita perlu belajarcara memasaknya. Bagi kita sih, enjoy,cukup direbus dengan bawang merah, bawangputih dan garam. Rasanya sudah nikmat. Hanya saja jangan lupa dibersihkanekstra agar rasanya lebih enak. Bila ada telur kepiting rasanya lebih asoi,wuich nikmat sekali. Biasanya dengan 5 buah kepiting rebus dan satu piringkerang gorong kami berempat bisa menghabiskan 1 kiloan nasi.
  • Selain itu Kami senang jalan-jalan pakai sepedamotor, lebih nyaman dan dapat menikmati keindahan alam. Kamisering touring ke Surabaya, Semarang,Cilacap dan Tuban.
    TampilVideo

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