Css Untuk Memformat Tampilan Multimedia
Wednesday, March 25, 2020
Edit
Multimedia yaitu suatu sarana (media) yang didalamnya terdapat perpaduan (kombinasi) aneka macam bentuk elemen informasi, ibarat 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 ibarat rujukan 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 yaitu 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 ibarat pada penambahan font.
div { background: url( “latar.png”); background-image: url(“latar.png”);} Namun, penambahan gambar dengan cara di atas akan menawarkan problem ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, kalau 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 arahan ingin dilakukan. Terdapat empat nilai yang sanggup diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti rujukan di bawah ini :
<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUX_8_-IJE5yrxP3oKDa6iidiz0xZYk4-xrEYlIXh0TsNe6fxzfLmplFuFwaWOxpx49jXUOzQmA22pXtRi_rwIwpRIdvHMifh5KPUCge92t9YD31Vkfk61czx4fO3lNG49TJPTUFgi90_/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 yaitu 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 ketika 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 rujukan 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 ibarat rujukan berikut ini :
Bila jadwal diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center” dengan atribut width:400px dan height:400px ibarat 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 ibarat 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 yaitu 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.