Css Untuk Memformat Tampilan Multimedia
Multimedia ialah suatu sarana (media) yang didalamnya terdapat perpaduan (kombinasi) banyak sekali bentuk elemen informasi, menyerupai teks, graphics, animasi, video, interaktif maupun bunyi sebagai pendukung untuk mencapai tujuannya yaitu memberikan informasi atau sekedar menawarkan hiburan bagi sasaran audiens-nya. Untuk memaksimalkan fungsi web Cascading style sheet sanggup pula diterapkan pada elemen-elemen HTML multimedia, diantaranya gambar,video,audio.
1. CSS pada Tampilan Gambar
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS sanggup diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar sanggup dituliskan secara inline menyerupai teladan berikut :
<img src="nama-file-gambar" width="lebar" height="tinggi" alt=" interaktif maupun bunyi sebagai pendukung untuk mencapai tujuannya yaitu memberikan inf CSS untuk Memformat Tampilan Multimedia" title="CSS untuk Memformat Tampilan Multimedia" border="1" /> Selain dengan cara inline , stlyle CSS sanggup diberikan secara embed ataupun eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar dibentuk sama 200 x 200 dan margin atas gambar ialah 10px sehingga antar gambar terlihat ada jarak.
2. CSS Gambar untuk Background
Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan memakai dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama menyerupai pada penambahan font.
div { background: url( “latar.png”); background-image: url(“latar.png”);} Namun, penambahan gambar dengan cara di atas akan menawarkan duduk kasus ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, bila ukuran elemen lebih besar dari ukuran gambar. Untuk sanggup melihat bagaimana berikut :
Adakalanya perulangan tampilan gambar otomatis ini tidak diinginkan. Untuk itu sanggup memakai properti background-repeat untuk mengatur bagaimana perulangan instruksi ingin dilakukan. Terdapat empat nilai yang sanggup diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti teladan di bawah ini :
<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC4Zd_rZvGXePAAUj5C_ebqKz58kMiqScaaoWXARUjBJ6vIvtEU63Yp5bVvifeK3MzNR5_pZrL0aENpsClg-tVoYQiMm27e8WuObA6I6T5FclJr3gKLsb7Qkr_EA-KO2-JHJf-kJmwHwTm/s1600/back.jpg'); background-repeat: repeat;">
<div style="color: white; text-align: center;">
<b>BAGIMU NEGERI</b>
Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami
</div>
</div>
Maka karenanya ialah sebagai berikut :
BAGIMU NEGERI
Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami
Seperti namanya, no-repeat menghilangkan perulangan, repeat-x menawarkan perulangan hanya pada sumbu x (horizontal), dan repeat-y menawarkan perulangan hanya pada sumbu y (vertikal). Listing Kode CSS di bawah akan menghilangkan perulangan pada sumbu x dan sumbu y, sehingga kiwi,jpg hanya akan ditampilkan satu kali :
3. CSS untuk Menyisipkan Gambar
Adakala dikala menciptakan halaman web yang berisi artikel diharapkan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar yang disisipka perlu diberi CSS. Seperti teladan di bawah ini.
BAGIMU NEGERI
Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami
Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami
4. CSS pada Tampilan Video
Untuk penerapan Cascading style sheet pada elemen video sanggup dituliskan secara inline menyerupai teladan berikut ini :
Bila jadwal diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center” dengan atribut width:400px dan height:400px menyerupai pada tampilan berikut ini :
<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin: 0 auto; width:400px ; heigth:400;" >
<source src="http://googledrive.com/host/0B7q1GyuInSWkLUdUQTNhU0hkYWs/" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
Bila jadwal diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center” dengan atribut width:400px dan height:400px menyerupai pada tampilan berikut ini :
5. CSS Video Embed dari Youtube
Penyajian video juga sanggup memanfaatkan elemen iframe yang dilinkkan ke alamat video tertentu , contohnya www.youtube.com. Berikut ialah penerapan CSS secara embed untuk menampilan video dari youtube. Seperti di bawah ini.
Menyajikan cascading style sheet untuk memformat tampilan multimedia sanggup menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari.
<html>
<head>
<title>Test</title>
<style>
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;
height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="videoWrapper">
<iframe width="560" height="349" src="url_video" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Menyajikan cascading style sheet untuk memformat tampilan multimedia sanggup menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari.
Komentar
Posting Komentar