<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.
Pemrograman Web
Page | 76
<! 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>
Bila listing kode diatas dijalankan maka akan menghasilkan tampilan gambar seperti berikut ini :
Gambar 5.1 penerapan CSS untuk image
Pemrograman Web
Page | 77
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{background-image:url(kiwi.jpg);height:600px;width:800px;} </style> </head> <body> <div id="utama"> </div> </body> </html>
Gambar asli yang digunakan sebagai background dengan ukuran 50px X 50px
Gambar 5.2 kiwi.jpg
Pemrograman Web
Page | 78
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 seperti pada gambar berikut :
Gambar 5.3 penerapan CSS untuk image background
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;}
Pemrograman Web
Page | 79
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
Pemrograman Web
Page | 80
Bila listing kode dijalankan akan menghasilkan tampilan sebagai berikut :
Gambar 5.4 penerapan CSS untuk penyisipan image pada teks
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>
Bila listing program diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center” dengan atribut width:400px dan height:400px seperti pada tampilan berikut ini :
Pemrograman Web
Page | 81
Gambar 5.5 penerapan css pada video
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>
Pemrograman Web
Page | 82
<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>
Bila listing kode diatas dijalankan dalam keadaan komputer terhubung dengan internet akan menghasilkan tampilan sebagai berikut :
Gambar 5.6 video dengan embed youtube
c. Rangkuman
Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style sheet untuk memformat tampilan multimedia dapat dibuat rangkuman materi sebagai berikut :
Pemrograman Web
Page | 83
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari.
Untuk mengatur format multimedia dapat dituliskan secara inline, embed maupun eksternal CSS.
Pemberian style pada gambar dapat menggunakan selector <img>
Pemberian style pada video dapat menggunakan selector <video>
Penambahan gambar sebagai latar belakang menggunakan dua properti, yaitu property background image dengan menggunakan tag div seperti format berikut div { background-image: url(“latar.png”); }