Penyajian CSS untuk format tampilan Multimedia & Tabel



CSS Untuk Format Multimedia

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 dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, table, dan gambar maupun objek lainnya. 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, style css dapat diberikan secara embed seperti contoh berikut ini : 
 
Maka hasilnya akan seperti berikut :




Jika yang tadi dengan cara embed dan inline, bisa juga dengan cara 
External. seperti contoh berikut ini : 
File HTML :
Extimagecss.html


FIle CSS :





Hasil nya akan seperti berikut :




2. CSS Gambar untuk background
       Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua property, yaitu background dan background-iamge. Nilai yang  diisikan untuk property ini ialah url dari gambar, relative terhadap file.css, sama seperti pada penambahan font.

  div { background: url( “latar.png”); background-image:   url(“latar.png”);}  
Berikut contoh gambar untuk background secara inline :

 InlineCssForImage.html

Hasil dari source code di atas :




Contoh gambar untuk background secara embed :

 EmbCssforBgImage.html

Hasil dari source code diatas :





3. CSS gambar pada background
        Background-image pada CSS sebenarnya bisa di custom lagi dengan cara seperti berikut : 
 #utama {

   background-image: url(kiwi.jpg);
   background-repeat: no-repeat; 
   height: 200px; width: 600px;} 

Pada property background-repeat memiliki value : no-repeat, repeat-x, repeat-y, repeat.

Berikut contoh secara embed : 

 EmbBgImageAsImage.html


Hasilnya akan seperti berikut :


5. CSS pada tampilan Video
      Untuk penerapan Cascading style shee pada elemen video dapat dituliskan secara inline seperti contih berikut ini :

 EmbVideo.html


Hasilnya akan seperti berikut :
6. CSS 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.
Berikut merupakan contoh embed dari youtube : 

 EmbVideoYoutube.html


Hasil dari source code diatas :

CSS Pada Tabel


Seperti yang tampak pada gambar diatas, tampilan dari table itu masih sangat standar. Dan sekarng kita akan langsung memulai mendesign table nya. Langsung saja buat file html nya.
Berikut contoh penggunaan css untuk table secara embed :

embtableborderCollapse.html



hasilnya akan seperti berikut :
Berikut penggunaan CSS secara External pada table :

 eXTtablewithcss.html
FILE CSS
CSSOnTable1.css

Hasilnya akan seperti berikut :
eXTtablewithcss2.html

FILE CSS
CSSOnTable2.css

Hasilnya akan seperti berikut :


ExtTableWithCss3.html


FILE CSS
ExtOnTable3.css

Hasilnya seperti berikut :
Ok .. kalian bisa mencoba untuk membuat sekreatif mungkin.

 berikut contoh penggunaan css pada tabel yang saya buat :

 source code :

 Quiz.html


Quiz.css

Hasilnya akan seperti berikut :
Mungkin sekian dulu dari saya , hanya itu yang dapat saya bagikan mohon maaf apabila ada kesalahan, 
terimakasih dan selamat mencoba... :)