3.6 Memahami Style pada Multimedia Interaktif Berbasis Halaman Web dan Media Interaktif

Style pada Multimedia Interaktif

Teknologi informasi memegang peranan penting dalam berbagai bidang kehidupan manusia yang semakin berkembang dengan pesat. Informasi tersebut tidak terlepas dari perkembangan teknologi yang membuat segalanya lebih dinamis dan efisien. Salah satunya pada penggunaan bidang multimedia interaktif berupa gambar, teks, video, audio dan animasi dalam style CSS. Bidang-bidang yang dimaksud banyak digunakan dalam desain majalah, iklan televisi, presentasi, seminar, maupun membuat film animasi sebagai langkah alternatif dalam menyampaikan informasi agar lebih menarik.

1. Format Style pada Teks 

Pada umumnya, untuk membuat multimedia interaktif dengan tampilan menarik beserta kemudahan dalam mengubah tampilan layar berkaitan erat dengan kinerja style CSS (Cascading Style Sheet). Cascading style sheet juga dapat diterapkan pada elemen-elemen HTML multimedia di antaranya gambar, video, dan audio. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan parent-child pada setiap style.

a. Properti CSS 

Dalam pengaturan style teks meliputi beberapa jenis rangkaian property di antaranya perwarnaan, spasi, jenis font, style font, color font, dan lain sebagainya yang dapat dikondisikan dalam kemasan CSS. Beberapa properti dari CSS antara lain sebagai berikut. 

1. Color digunakan untuk mengatur warna pada teks/script yang hendak dituju. 
2. Direction digunakan untuk menentukan arah ingin ditentukannya dalam tulisan atau teks pada script terkait. 
3. Letter-spacing digunakan untuk menambah atau mengurangi property dari spasi antar-karakter dalam suatu teks.  
4. Line-heightht digunakan untuk mengatur tinggi barisnya suatu teks. 
5. Text-align digunakan untuk memberi rata atau batas teks secara horizontal. 
6. Text-decoration digunakan untuk menentukan hiasan/dekorasi pada teks. 
7. Text-indent digunakan untuk mengatur jarak inden dalam baris pertama dalam teks-blok. 
8. Text-shadow digunakan untuk menentukan efek dari bayangan pada suatu teks. 
9. Text-transform digunakan untuk mengatur dari teks kecil hingga besar. 
10. Unicode-bidi digunakan untuk mengeset unicode. 
11. Vertical-align digunakan untuk mengatur dari batas teks secara horizontal.
12. White-space digunakan untuk mengatur dari penulisan white-space pada suatu element. 
13. Word-spacing digunakan untuk menambahkan atau mengurangi spasi antar kata-kata dalam suatu teks.

b. Bentuk-Bentuk Pengaturan Style 

Beberapa bentuk pengaturan style pada teks adalah sebagai berikut. 

1. Warna Teks (Color) Pengaturan warna dalam teks menggunakan 3 nilai jenis warna yang terdiri atas nilai HEX, nilai RGB, dan nilai warna live (langsung) misalnya blue, red, black, pink, brown, atau white. Bentuk format penulisan untuk pemberian warna pada teks adalah : Selector {color:'nilai warna'}. Penggunaan style pada pengaturan warna (color) dapat diimplementasikan dalam sebuah teks/script. Sedangkan bentuk implementasinya adalah sebagai berikut. a) .kotak {color:"#21cd76"} b) .kotak {color:"rgb(124,45)"} c) .kotak {color:" yellow"} 
2. Spasi Antar-Karakter (Word Letter Spacing). Bentuk format penulisan untuk pengaturan spasi antar-karakter (word letter spacing) adalah Selector: {letter-spacing: nilai spasi;}. Komponen letter-spacing berfungsi sebagai sarana atau alat yang digunakan untuk memberikan jarak (spasi) dalam karakter atau huruf terkait. Sedangkan bentuk implementasinya adalah sebagai berikut. selector: {letter-spacing: 14px;} 
3. Bentuk Teks Dekorasi (Decoration). Bentuk format penulisan untuk pengaturan bentuk dalam teks dekorasi (decoration) adalah selector {text-decoration: nilai text- decoration} dengan tujuan untuk membantu dalam mengatur atau menghapus suatu dekorasi dalam suatu teks. Sedangkan bentuk penerapannya sebagai berikut. .kotak {text-decoration: 25px text-decoration}
4. Antar Kata (Spasi Word Spacing). Word-spacing sebagai salah satu style pada CSS dipergunakan dalam memberikan spasi (jarak) pada beberapa kata-kata atau huruf. Bentuk format penulisan untuk pengaturan antar-kata (spasi word spacing) adalah : selector: {word-spacing: nilai spasi;}. Sedangkan bentuk penerapannya sebagai berikut. selector: {word-spacing: 24px;} 
5. Jarak Indentasi Paragraf (Text Indent). Bentuk format penulisan untuk pengaturan jarak indentasi paragraf (text indent) adalah : selector: {text-indent: nilai indent}. Dalam hal ini, posisi text-indent sebagai alat untuk mengatur jarak indent dari baris awal dalam suatu teks blok, sehingga teks pada baris-baris awal terlihat lebih menjorok ke dalam dibandingkan teks baris lainnya. Sedangkan bentuk penerapannya sebagai berikut. .kotak: {text-indent: 16px indent}
6. Posisi Huruf Besar dan Kecil dalam Sebuah Teks (Text Transform). Bentuk format penulisan untuk dari huruf besar dan kecil dalam sebuah teks (text transform) adalah : selector: {text-transform: nilai text-transform}. Sedangkan bentuk penerapannya sebagai berikut. selector: {text-transform: 22px text-transform}
7. Efek Bayangan (Shadow Effect) dalam Text Bayangan (Shadow Text) Bentuk format penulisan untuk pengaturan efek bayangan (shadow effect) dalam text bayangan (shadow text) adalah : selector {text-shadow: koordinatx koordinatY nilai warna teks;}. Dalam hal ini. Shadow Text berfungsi sebagai alat yang dipergunakan untuk memberikan suatu bayangan pada sebuah teks. Sedangkan bentuk penerapannya sebagai berikut. selector {text-shadow: koordinatx koordinatY #30cc90;}
8. Teks Rata (Text Alignment) Teks rata dapat ditulis dalam bentuk rata kanan, rata kiri, rata tengah, rata sejajar, maupun rata kanan kiri. Dalam hal ini, property dari text-alignment sebagai alat mengatur dari jenis rata pada suatu teks bertipe horizontal. Bentuk format penulisan untuk pengaturan teks rata (text alignment) adalah : selector (text-align: jumlah nilai text- align;}. Sedangkan bentuk penerapannya sebagai berikut. .kotak (text-align: 18px text-align;}

2. Format Style pada Tampilan Gambar 

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. Style sangat berperan dalam menyajikan suatu informasi visual agar terlihat lebih baik serta lebih optimal jika dilihat dari sisi non-penulisan sehingga lebih disukai oleh mesin pencari (search engine). Dalam hal ini, CSS 3 bisa diterjemahkan sebagai versi yang paling baru dan masih digunakan sampai saat ini karena mampu melakukan berbagai hal dalam mendesain suatu website. CSS 3 dapat melakukan animasi pada halaman web kita, di antaranya animasi warna dan animasi 3D. Dengan adanya CSS 3 desaigner dimudahkan untuk membuat halaman web menjadi kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yaitu media query. Selain itu kita juga bisa memanfaatkan fitur yang banyak dari CSS 3 terbaru ini yaitu Multiple Background, border radius, drop shadow, border image, CSS Math dan CSS Object Model 

a. Jenis Format Pemanggilan Gambar 

Beberapa jenis format pemanggilan gambar dikategorikan menjadi format pemanggilan gambar secara inline dan metode embed (di luar/eksternal). 

1. Format Pemanggilan Gambar Secara Inline. Guna memberi pengaturan dalam penggunaan gambar pada umumnya dapat diterapkan secara inline dengan format pemanggilan gambar sebagai berikut. <img src='nm-fileImg' width='lebarImg' height='tinggilmg' alt='kata- kuncilmg' title=judulImg' border='garistebal' /> 
2. Format Pemanggilan Gambar dengan Metode Embed (di Luar/Eksternal) Jika terdapat 6 gambar yang ingin diberi style, di mana ke 6 gambar tersebut berukuran sama yaitu 100px x 100px dengan jarak margin atas dari gambar tersebut adalah 12px. Maka metode penambahan CSS diterapkan dengan metode embed (di luar/eksternal) dalam CSS. 

b. Pengaturan Style pada Latar Belakang (Background) 

Pada dasarnya, penambahan gambar pada latar belakang (background) menggunakan dua jenis properti, yaitu latar belakang (background) dan gambar latar belakang (background-image). Nilai yang di-input-kan untuk properti tersebut adalah URL gambar yang adakalanya berjumlah lebih dari satu dalam sebuah file CSS, termasuk di dalamnya penambahan dalam suatu font. Misalnya gambar akan ditampilkan berulang-ulang secara horizontal maupun vertikal jika ukuran elemen tersebut lebih besar dari ukuran gambar. Jika gambar aslinya berukuran 40 DY x 40 px dan ukuran background yang digunakan adalah 300px x maka hasilnya adalah gambar tersebut ditampilkan berulang-ulang dalam bidang latar belakang berukuran 300px x 500px. Agar terlihat rapi, dapat menggunakan properti background-repeat guna mengatur perulangan kode. Dalam hal ini, terdapat 4 nilai yang dapat dimasukan dalam properti background-repeat, yaitu no-repeat, repeat, repeat-y, dan repeat-x. 

1. No-repeat yang berarti menghilangkan perulangan.
2. Repeat adalah memberikan perulangan.  
3. Repeat-x yaitu memberikan perulangan pada sumbu x (horizontal). 
4. Repeat-y adalah atribut yang memberikan perulangan pada sumbu y (vertikal). 500px, 

c. Penggunaan Style untuk Menyisipkan Gambar 

Pada saat membuka sebuah halaman website, akan dijumpai adanya artikel yang di dalamnya berisi suatu gambar sebagai pemberi keindahan dalam suatu artikel tersebut, misalnya penggunaan thumbnail. 

3. Format Style pada Tampilan Audio 

Sering dijumpai sebuah halaman website yang dibuka adakalanya diiringi alunan musik (suara) dengan menambahkan element untuk memanggil file musik di dalamnya. Beberapa atribut yang dapat digunakan pada element suara di antaranya Balance untuk mengatur keseimbangan suara kiri dan kanan, Loop untuk mengatur perulangan main yang dilakukan, dan Volume untuk mengatur volume suara. Dalam hal ini, elemen-elemen yang digunakan sebagai berikut. 

a. Elemen tag <bgsound> 

Elemen tag <bgsound> dengan atribut "src" nama file suara. Misalnya <bgsound src="sulingsunda.wav">. 

b. Elemen <embed> 

Penggunaan element <embed> secara otomatis memunculkan control panel pada aplikasi multimedia yang terpasang pada sistem sekaligus sebagai aplikasi default dalam memainkan file multimedia. Elemen <embed> dapat digunakan untuk memanggil file suara. Element tersebut membutuhkan atribut "src" untuk menentukan file suara yang aka website, dimainkan pada halaman misalnya <embed src- "sulingsunda.wav"> </embed>. 

Beberapa jenis atribut yang dant digunakan pada element <embed> adalah sebagai berikut. 

1. Align digunakan untuk mengatur posisi control multimedia.  
2. Alt digunakan untuk menampilkan informasi alternatif.  
3. Autostart digunakan untuk nilai False untuk manual dan bemilaj Tne jika dimainkan otomatis.  
4. Height digunakan untuk mengatur tinggi control.  
5. Hidden digunakan untuk nilai true untuk menyembunyikan control.  
6. Loop digunakan untuk nilai true untuk mengulang terus-menerus.  
7. Width digunakan untuk mengatur lebar control. 

 

4. Format Style pada Tampilan Video 

Video identik dengan teknologi untuk menangkap, merekam, memproses, mentransmisikan dan menata ulang gambar bergerak. Video juga bisa dikatakan sebagai gabungan gambar-gambar mati yang dibaca berurutan dalam suatu waktu dengan kecepatan tertentu. Gambar-gambar yang digabung tersebut dinamakan frame dan kecepatan pembacaan gambar disebut dengan frame rate, dengan satuan fps. Salah satu contoh paling mudah dalam style jenis ini dapat dilihat pada video embed dari Youtube secara langsung dari fitur online yang di-iframe/embed-kan pada website Youtube ataupun web video lainnya.