DMI KD 3.6

STYLE PADA MULTIMEDIA INTERAKTIF

Informasi memegang peranan penting dalam berbagai bidang kebutuhan menusia, sehingga dunia teknologi dapat berkambang dengan pesat. Informasi tersebut tidak terlepas dari perkembangan teknologi yang membuat segalanya lebih dinamis dan efisien.

pada umumnya, untuk membuat Multimedia Interaktif dengan tampilan menarik beserta kemudahan dalam mengubah tampilan layar berkaitan erat dengan kinerja style CSS (Cascading Style Sheet). CSS juga dapat diterapkan pada elemen-elemen HTML Multimedia diataranya pada Teks, Gambar, Audio dan Video.

1. Pengaturan Style pada Teks
   Dalam pengaturan style teks meliputi beberapa jenis rangkaian properti, diantaranya pewarnaan, spasi, jenis font, style font, color font, dan sebagainya, yang dapat dikondisikan dalam kemasa CSS. Beberapa properti CSS antara lain sebagai berikut :
   Tabel Properti CSS
   

   No	Properti	Keterangan
   1	Color	Mengatur warna pada teks/ script yang hendak dituju
   2	Direction	Menentukan arah tulisan atau teks pada script terkait
   3	Letter-Spacing	Menambah atau mengurangi properti dari spasi antarkarakter dalam suatu teks
   4	Line-Height	Mengatur tinggi barisnya suatu teks
   5	Text-align	Bertugas memberi rata atau batas teks secara horizontal
   6	Text-decoration	Menentukan hiasan/ dekorasi pada teks
   7	Text-indent	Bertugas mengatur jarak inden dalam baris pertama dalam teks blok
   8	Text-Shadow	Bertugas menentukan efek dari bayangan pada suatua teks
   9	Text-transform	Bertugas mengatur dari teks kecil hingga besar
   10	Unicode-align	Bertugas mengeset unicode
   11	Vertical-align	Mengatur dari batas teks seacara horizontal
   12	White-space	Mengatur dari penulisan white-space pada suatu elemen
   13	Word-spacing	Menambahkan atau mengurangi spasi antarkata dalam teks

2. Pengaturan Style pada Tampilan Gambar
   Style sangat berperan dalam menyajikan suatu sinformasi visual agar terlihat lebih baik serta lebih optimal jika dilihat dari sisi nonpenulisan, sehingga lebih disukai oleh mesin pencari (search engine). Dalam hal ini penggunaan Cascading Style Sheet (CSS) dapat diterapkan pada semua objek yang ingin disisipkan dalam bentuk tag-tag tertentu, misalnya bentuk tulisan, tabel, gambar, maupun objek lainnya. Guna memberi pengaturan dalam penggunaan gambar pada umumnya dapat diterapkan secara inline, misalnya dengan format pemanggilan berikut.
   <img src=’nm-filegbr’ width=’lebargbr’ height=tinggigbr’alt=’kata-kuncigbr’ title=’judulgbr’ border=’garistebal’ />

    

3. Pengaturan Style pada Tampilan Audio
   Sebuah halaman website yang dibuka adakalanya diiringi denga nmusik (audio) dengan menambahkan elemen untuk memanggil file musik didalamnya. Beberapa atribut yang dapat digunakan pada elemen suara, yaitu sebagai berikut.

   No	Properti	Keterangan
   1	Balance	Mengatur keseimbangan suara kiri dan kanan
   2	Loop	Banyak perulangan main yang dilakukan
   3	Volume	Mengatur Volume suara

   Dalam hal ini, elemen yang digunakan adalah tag <bgsound> dengan atribut "src" nama dile suara. Misalnya <bgsound src="musikakustik.wav">. Disamping elemen tag <bgsound>, terdapat elemen <embed> yang dapat digunakan untuk memanggil file suara. Elemen tersebut membutuhkan atribut "src" untuk menentukan file suara yang akan dimainkan pada halaman website, misalnya <embed src="musikakustik.wav"></embed>. Penggunaan elemen <embed> secara otomatis memunculkan "control panel" pada aplikasi multimedia yang terpasang pada sistem, sekaligus sebagai aplikasi default dalam memainkan file multimedia. Beberapa jenis atribut yang dapat digunakan pada elemen <embed> adalah sebagai berikut.
   

   No	Atribut	Keterangan
   1	Align	Mengatur posisi kontrol multimedia
   2	Alt	Menampilkan informasi alternatif
   3	Height	Mengatur tinggi kontrol
   4	Width	Mengatur lebar kontrol
   5	Autostart	Nilai true untuk dimainkan otomatis, false untuk manual
   6	Hidden	Nilai true untuk menyembunyikan kontrol
   7	Loop	Nilai true untuk mengulang terus-menerus

   
   
   
4. Pengaturan Style pada Tampilan Video
   Salah satu contoh paling mudah melihat style jenis ini dapat ditemukan pada video amded dari Youtube secara langsung dari fitur online yang di-frame/embeded-kan pada website youtube ataupun web video lainnya.
   Contoh perintah-perintah script yang digunakan adalah sebagai berikut :

<html>
<head>
<title>Tampilan video dari YOUTUBE</title>
<style>
.video Wrapper {position: relative;

padding-bottom: 50%;
padding-top: 20%;
height: 0;

.video Wrapper iframe {position: absolute;

top: 0;
left: 0;
width: 100%
height: 100%}

</style>
</head>
<body>
<div class='video Wrapper'>
<!--Tampilan video dari YOUTUBE --!>
<iframe width='590' height='379' src='https://www.youtube.com/watch?..........'frameborder='0' allowfullscreen></iframe>
</div>
</body>
</html>