Format Multimedia Dan Tabel Dalam CSS (Pertemuan 10)

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Sekarang kita masih membahas seputar CSS, tentu saja menggunakan tag-tag yang telah dipelajari dalam materi-materi sebelumnya hanya saja menggunakan CSS untuk memperbagus tampilannya. Langsung saja kita mulai pembahasan kita kali ini.

1. Menampilkan Gambar Pada CSS
Dalam CSS, kita hanya perlu memanggil file gambarnya saja pada HTMl, kemudian untuk mengatur tampilan gambarnya kita menggunakan CSS, tentu saja codingan pada CSS kita pisahkan agar tidak membuat pusing.

Embed Image CSS

Yang pertama kita akan menggunakan Embed CSS (Codingan CSS terdapat dalam file yang sama dengan HTML). Untuk lebih jelas kalian dapat melihat codingan dibawah ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - CSS Pada Image </title>
  <style type = "text/css">
   #Background{
   background-image: url(1.png);
   font-family  : Comic Sans MS;
   font-size  : 10pt;
   color   : Chocolate;
   }
   img.mouse {
   margin-top : 10px;
   float  : left;
   clear  : both;
   width  : 100px;
   height  : 100px;
   }
   img.cat {
   margin-top : 5px;
   float  : right;
   clear  : both;
   width  : 200px;
   height  : 300px;
   border  : solid;
   border-color: pink;
   }
   img.koala {
   margin-top : 10px;
   float  : right;
   clear  : both;
   width  : 200px;
   height  : 200px;
   }
  </style>
 </head>
  <body id = "Background" >
   <h1>
 Contoh Embedded CSS pada gambar </h1>
<img class = "mouse" src = "Media/Mouse.png" />
    <img class = "cat" src = "Media/Cat.png" />
    <img class = "koala" src = "Media/Koala.jpg" />
  </body>
</html>

Hasilnya akan menjadi seperti ini :

External Image CSS

Yang kedua kita menggunakan External CSS (File CSS berada dalam file yang berbeda dengan file HTML) Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - CSS Pada Image </title>
   <link href = "CSS/ExtImage.css" rel = "stylesheet" type = "text/css">
 </head>
  <body id = "Background">
   <h1>
 Contoh CSS pada gambar secara Extermal </h1>
<img id = "Pikachu" src = "Media/Pika.gif" />
   <img id = "Neko" src = "Media/Neko.gif" />
   <img id = "Inou" src = "Media/Inou.gif" />
  </body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
img#Pikachu {
 margin-top : 10px;
 float  : left;
 clear  : both;
 width  : 180;
 }
img#Neko {
 margin-top : 5px;
 float  : right;
 clear  : both;
 width  : 180;
 border  : dotted;
 border-color: salmon;
 }
img#Inou {
 margin-top : 10px;
 width  : 180;
 float  : right;
 clear  : both;
 }

Hasilnya akan menjadi seperti ini :

Terdapat beberapa attribute baru yang digunakan dalam CSS, antara lain adalah :

margin-top : Untuk mengatur margin atas
float : Hampir sama seperti attribute align, yaitu untuk mengatur posisi gambar
clear : Untuk menutup attribute float,
border : Untuk mengatur jenis border yang akan digunakan
border-color : Untuk mengatur warna border

2. Mengatur Background
Sama hal nya dengan menampilkan gambar, kita juga hanya perlu memanggil file gambar yang akan dijadikan background.

In Line Background CSS

Pertama kita akan menggunakan In Line CSS (CSS berada dalam 1 letak dengan bagian yang akan dieditnya). Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3- InLine CSS untuk Bg Image </title>
 <body style = "background-image : url(Media/Pika.gif)" >
 
 <h1>
 Hello World! </h1>
<p align = "center" style = "color : Green; font-family : impact;
  font-size : 24px; background-color : Chocolate; ">
Hello World, ini adalah contoh penggunaan In Line
  </p>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Embed Background CSS

Yang kedua kita akan menggunakan Embed CSS (CSS berada dalam 1 file dengan file HTML). Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Background Image Goes Wrong </title>
  <style type = "text/css">
   #utama{
   font-family   : impact;
   font-size   : 30pt;
   color    : chocolate;
   text-shadow   : 2 2 2 red;
   background-image : url(1.png);
   height    : 600px;
   width    : 800px;
   }
  </style>
 </head>
  <body>
   <div id = "utama">
   Sebenarnya, background gambar ini width dan height nya 300px X 200px
   tapi karena pada css tertulis tertulis 800px dan 600px, maka terjadilah tampilan seperti ini
   </div>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Selanjutnya, kita masih akan menggunakan Embed CSS, tetapi kita akan mengatur background pada suatu paragraf / teks, Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - CSS Image Placement </title>
  <style type = "text/css">
   #Background{
   background-image: url(1.png);
   font-family  : Comic Sans MS;
   font-size  : 15pt;
   color   : Chocolate;
   }
   #headline1 {
   background-image : url(Media/Pika.gif);
   background-repeat : repeat-x;
   background-position : left top;
   padding-top   : 68px;
   margin-bottom  : 50px;
   }
   #headline2 {
   background-image : url(Media/Inou.gif);
   background-repeat : no-repeat;
   background-position : right top;
   padding-top   : 68px;
   }
  </style>
 </head>
  <body id = "Background" >
 <div id = "headline1">
 CSS (Versi sekarang adalah CSS 3)
 banyak dilibatkan dalam dokumen Web. Kegunaannya adalah untuk
 memformat dokumen. Sebagai contoh, warna teks atau bahwa warna
 latar belakang bisa diatur melalui css.
 </div>
<div id = "headline2">
 Namun, tentu saja kegunaan CSS jauh lebih
 banyak dari pada hanya dilibatkan dalam dokumen Web. Kegunaannya
 adalah untuk memformat dokumen. Sebagai contoh, warna teks atau bahkan
 warna latar belakang bisa diatur melalui CSS.
 </div>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Terdapat beberapa attribute baru untuk yang digunakan dalam CSS, antara lain adalah :

background-image : Untuk mengatur image pada background
background-repeat : Untuk mengulang image pada background, apabila ingin mengulang background kalian dapat mengisinya dengan repeat-x / repeat-y, apabila tidak ingin diulang kalian dapat mengisinya dengan no-repeat
background-position : Untuk mengatur letak background
padding : Untuk mengatur ukuran padding

3. Menampilkan Video

Kita juga dapat menampilan file berupa Video / Audio menggunakan CSS.

Embed Video CSS

Yang pertama kita akan menggunakan Embed CSS, untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Testing Video </title>
  <style type = "text/css">
   #Background{
   background-image: url(1.png);
   font-family  : Comic Sans MS;
   font-size  : 10pt;
   color   : Chocolate;
   }
  </style>
 </head>
  <body id = "Background">
   <h1 style = "color : OrangeRed; text-align : center;
   font-family : Comic Sans MS; ">
 Ini Video ku </h1>
<video controls = "controls" style ="display : block; margin : 0 auto; width : 480px; height : 270px;">
    <source src ="Media/Doraemon Movie 720p.mp4" type = "video/mp4" />
    Your browser does not support the video tag.
    </video>
  </body>
</html>

Hasilnya akan menjadi seperti ini :

Kita juga dapat menampilkan Video yang berasal dari youtube, namun kita harus mengubah link nya menjadi fotmat embed, untuk mengatur format embed pada Video youtube, kalian dapat mendapatkan link nya dengan cara :
Video Youtube > Share/Bagikan > Sematkan/Embed > Copy
Untuk lebih jelas kalian dapat melihat codingan dibawah ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Testing Video </title>
  <style type = "text/css">
   #Background{
   background-image: url(1.png);
   font-family  : Comic Sans MS;
   font-size  : 10pt;
   color   : Chocolate;
   }
   .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 id = "Background">
 <div class = "videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe src="https://www.youtube.com/embed/vNuN8xH3X74" 
  frameborder="0" allow="autoplay; 
  encrypted-media" allowfullscreen></iframe>
 </div>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Dalam contoh yang kedua, kita dapat mengatur ukuran frame untuk Videonya, padding serta posisi Videonya.

4. Table Pada CSS

Tentu saja kita dapat menampilkan / membuat Table dan dimodifikasi menggunakan CSS.

Embed Table CSS

Contoh pertama, kita akan menggunakan Embed CSS. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Testing Video </title>
  <style type = "text/css">
   #Background{
   background-image: url(1.png);
   font-family  : Comic Sans MS;
   font-size  : 10pt;
   color   : Chocolate;
   }
   table {
   border-collapse : collapse;
   }
   table, td, th {
   border : 1px solid LawnGreen;
   }
  </style>
 </head>
  <body id = "Background">
   <center>
<table>
<tr>
     <th> Nama Depan </th>
     <th> Nama </th>
    </tr>
<tr>
     <td> Adelin </td>
     <td> Larasati </td>
    </tr>
<tr>
     <td> Novero </td>
     <td> Davandra </td>
    </tr>
<tr>
     <td> Adika </td>
     <td> Dayandra </td>
    </tr>
</table>
</center>
</body>
</html>

Hasilnya akan menjadi seperti ini :

External Table CSS

Selanjutnya, kita akan menggunakan External CSS pada table, untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Testing Video </title>
  <link href = "CSS/CSSonTable1.css" rel = "stylesheet" type = "text/css"></link>
 </head>
  <body id = "Background" >
   <center>
<table>
<tr>
     <th> Nama Depan </th>
     <th> Nama Belakang </th>
    </tr>
<tr>
     <td> Thom </td>
     <td> Yorke </td>
    </tr>
<tr>
     <td> Vanessa </td>
     <td> Carlton </td>
    </tr>
<tr>
     <td> Jonny </yd>
     <td> Greenwood </td>
    </tr>
</table>
</center>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
table, th {
 border  : 2px solid orchid;
 font-family : impact;
 color  : violet;
}
td {
 border  : 1px solid hotpink;
 font-family : Arial Narrow;
 color  : orchid;
}

Contoh selanjutnya tidak jauh berbeda dengan contoh sebelumnya namun terdapat attribute yang baru untuk memodifikasi table pada cssnya. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Testing Video </title>
  <link href = "CSS/CSSonTable2.css" rel = "stylesheet" type = "text/css"></link>
 </head>
  <body id = "Background" >
   <center>
<table>
<tr>
     <th>Nama Depan</th>
     <th>Nama Belakang</th>
     <th>Alamat</th>
    </tr>
<tr>
     <td>Karine</td>
     <td>Nurul Islami</td>
     <td>Jl. Rumahku Blok C 34</td>
    </tr>
<tr>
     <td>Salman</td>
     <td>Ravi</td>
     <td>Jl. Disini Aja Blok R 45</td>
    </tr>
<tr>
     <td>Muhamad Dandi</td>
     <td>Ramdani</td>
     <td>Jl. Bumi Abdi Blok D 6</td>
    </tr>
</table>
</center>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
table,th,td{
 border-top  : 2px solid Red;
 border-right : 2px groove Yellow;
 border-left  : 2px dashed Green;
 border-bottom : 2px dotted Pink;
}
table{
 width : 100%;
}
th{
 height    : 50px;
 background-color : MediumPurple;
 color    : mintcream; /*Warna Font*/
 font-family   : Comic Sans MS;
}

Hasilnya akan menjadi seperti ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Testing Video </title>
  <link href = "CSS/CSSonTable3.css" rel = "stylesheet" type = "text/css"></link>
 </head>
  <body id = "Background" >
   <center>
<table>
<tr> 
     <th>First Name</th>
     <th>Family Name</th>
     <th>Country</th>
    </tr>
<tr>
     <td>Ariana</td>
     <td>Grande</td>
     <td>America</td>
    </tr>
<tr>
     <td>Taylor</td>
     <td>Swift</td>
     <td>Amaerica</td>
    </tr>
<tr>
     <td>Lorder</td>
     <td>Ajah</td>
     <td>New Zealand</td>
    </tr>
</table>
</center>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
table,td,th{
 border : 1px solid salmon;
}
td{
 background-color : Lawngreen;
 color    : green;
 text-align   : right;
 height    : 30px;
 vertical-align  : middle;
 padding-right  : 10px;
}
th{
 background-color : red;
 color    : Mintcream;
 text-align   : right;
 height    : 50px;
 vertical-align  : bottom;
 padding    : 15px;
}

Hasilnya akan menjadi seperti :

Terdapat beberapa attribute baru untuk yang digunakan dalam CSS, antara lain adalah :

color : Mengatur warna font
font-family : Mengatur font style
border-top/left/right/bottom : Mengatur border pada bagian top/left/right/bottom, kita juga mengubah bentuk border seperti apa yang diinginkan dengan menambahkan attribute dashed,groove,dotted, dan juga dapat mengatur warna border
text-align : Mengatur tata letak teks / paragraf
padding/right/top/left/bottom : Mengatur ukuran padding pada bagian right/top/left/bottom
vertical-align : Mengatur tata letak teks pada bagian vertical

Contoh yang terakhir, saya akan mencontohkan bagaimana membuat sebuah table yang dimodifikasi menggunakan CSS. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
   <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Quiz</title>
  <link href = "CSS/Nugas.css" rel = "stylesheet" type = "text/css" > </link>
 </head>
  <body id = "Background">
   <center>
<table>
<tr id = "Judul" >
     <th colspan = "2" width = "60%"> <center>
 Pendaftaran Acara Porak SMKN 4 Bandung </center>
</th>
     <th colspan = "2" width = "60%" > 
     <center>
<img src = "Media/dota2.png" alt = "icon" id = "Icon"> </th></center>
</tr>
<tr id="Isi">
     <th width = "8%" >No</th>
     <th width = "80%" >Nama</th>
     <th>Kelas</th>
     <th>XI-RPL 3</th>
    </tr>
<tr>
     <td>1</td>
     <td>Miracle~</td>
     <td colspan = "2" rowspan = "7" > 
     <img src = "Media/TheInternational.jpg" alt = "gambar" id = "Dota"> </td>
    </tr>
<tr>
     <td>2</td>
     <td>Abed</td>
    </tr>
<tr>
     <td>3</td>
     <td>InYourDream</td>
    </tr>
<tr>
     <td>4</td>
     <td>Kuroky</td>
    </tr>
<tr>
     <td>5</td>
     <td>GH</td>
    </tr>
<tr>
     <td>6</td>
     <td>MinD_ContRoL</td>
    </tr>
<tr>
     <td>7</td>
     <td>Matumbaman</td>
    </tr>
</table>
</center>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Cyan;
}
table{
 width   : 850px;
 background-color: #6342ff;
 border   : 2px dashed #0000ff;
}
th{
 border-top  : 2px dotted #61c2ff;
 border-right : 2px dashed #61c2ff;
 border-left  : 2px dashed #61c2ff;
 border-bottom : 2px dotted #61c2ff;
}
td{
 border-top  : 2px solid Lawngreen;
 border-right : 2px solid Lawngreen;
 border-left  : 2px solid Lawngreen;
 border-bottom : 2px solid Lawngreen;
}
img#Icon{
 width   : 80px;
} 
img#Dota{
 width   : 300px
}
tr#Judul{
 color   : #66ccff;
 text-decoration : underline;
}
tr#Isi,th{
 color   : Cyan;
 background-color: #1f2eff;
 text-align  : left;
 border-top  : 2px groove #61c2ff;
 border-right : 2px groove cyan;
 border-left  : 2px gro

Hasilnya akan menjadi seperti ini :

Sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalahan pada penyampaian maupun pengetikan. See you Next!

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Format Multimedia Dan Tabel Dalam CSS (Pertemuan 10)

Komentar

Posting Komentar