CSS untuk Format Multimedia
Cascading style sheet dapat pula
diterapkan pada elemen-elemen HTML multimedia, diantaranya gambar,video,audio.
1)
Cascading style sheet 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
dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik
itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat
dituliskan secara inline seperti contoh berikut :
<img src="nama-file-gambar" width="lebar"
height="tinggi" alt="text" title="text"
border="1" />
Selain
dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun eksternal
CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar
dibuat sama 200 x 200 dan margin atas gambar adalah 10px sehingga antar gambar
terlihat ada jarak
Contoh Script
<! DOCTYPE HTML>
<html>
<head>
<tittle>Contoh CSS</tittle>
<style>
Img { Margin-top: 10px;
Float: left;
Clear: both;
width:200px;
height:200px;}
</style>
</head>
<body>
Contoh CSS pada gambar (img)<br>
<img src="brokoli.jpg" >
<img src="tomat.jpg">
<img src="paprika.jpg">
</body>
</html>
<html>
<head>
<tittle>Contoh CSS</tittle>
<style>
Img { Margin-top: 10px;
Float: left;
Clear: both;
width:200px;
height:200px;}
</style>
</head>
<body>
Contoh CSS pada gambar (img)<br>
<img src="brokoli.jpg" >
<img src="tomat.jpg">
<img src="paprika.jpg">
</body>
</html>
2)
Cascading style sheet Gambar untuk background
Seperti
penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan
menggunakan dua properti, yaitu background dan background-image. Nilai yang
diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS,
sama seperti pada penambahan font.
div { background: url(“latar.png”); background-image: url(“latar.png”);}
kesalahan tersebut bekerja, simpan dan jalankan kode Namun, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran gambar. Untuk dapat melihat bagaimana berikut :
<html>
<head>
<title>Background Image Goes
Wrong</title>
<style type="text/css">
#utama{backgroundimage:url(kiwi.jpg);height:600px;width:800px;}
</style>
</head>
<body>
<div id="utama">
</div>
</body>
</html>
Karena ukuran asli gambar adalah 50px X 50px sedangkan
ukuran background yang diinginkan adalah 800px X 600px maka gambar akan
ditampilkan berulang-ulang sampai terpenuhi ukuran background 800px X
600px
Adakalanya perulangan tampilan gambar otomatis ini tidak
diinginkan. Untuk itu dapat menggunakan properti background-repeat untuk
mengatur bagaimana perulangan kode ingin dilakukan. Terdapat empat nilai yang
dapat diisikan pada properti background-repeat, yaitu repeat, no-repeat,
repeat-x, dan repeat-y.
Seperti namanya, no-repeat menghilangkan perulangan,
repeat-x memberikan perulangan hanya pada sumbu x (horizontal), dan repeat-y
memberikan 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 :
#utama {background-image: url(kiwi.jpg);
background-repeat: no-repeat ;
height: 600px;width:
800px;}
3)
Cascading style sheet untuk menyisipkan gambar
Adakala saat membuat halaman web yang berisi artikel
diperlukan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan
menarik maka gambar yang disisipka perlu diberi CSS.
<html>
<head>
<title>
CSS image placement
</title>
<style >
#headline1 { background-image: url(kiwi.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px; }
#headline2 { background-image: url(kiwi.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px; }
</style>
</head>
<body>
<div id="headline1">CSS (versi
sekarang adalah CSS3)
banyak dilibatkan dalam dokumen Web.
Kegunaannya adalah untuk memformat dokumen.
Sebagai contoh, warna teks atau bahkan warna
latarbelakang bisa diatur melalui CSS.
</div>
<div id="headline2">Namun, tentu
saja kegunaan CSS jauh
lebih</div>
</body>
</html>
4)
Cascading style sheet pada tampilan video
Untuk penerapan Cascading style shee pada elemen video dapat
dituliskan secara inline seperti contih berikut ini :
<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block;
margin:
0 auto; width:400px ; heigth:400;" >
<source src="movie.mp4" type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</body>
5)
Cascading style sheet video embed dari youtube
Penyajian
video juga bisa memanfaatkan elemen iframe yang dilinkkan ke alamat video
tertentu , misalnya www.youtube.com. Berikut adalah penerapan CSS secara embed
untuk menampilan video dari youtube.
<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">
<!--
Copy & Pasted from YouTube -->
<iframe
width="560" height="349"
src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1"
frameborder="0"
allowfullscreen></iframe>
</div>
</body>
</html>
1 komentar:
komentarlengkap pak:)
Reply