Menyajikan css untuk format multimedia dan tabel

Agustus 21, 2019

Menyajikan css untuk format multimedia dan tabel

PRAKTIKUM 10

Nama : M.Fadlul Hafiizh

Kelas : XI-RPL 2

Balik lagi di blog tutor gesit, dipostingan saya sebelumnya kita sudah memahami tentang apa itu css, properti apa saja didalamnya dan bagaimana cara untuk mengimplementasikannya. sekarang kita mulai membuat sesuatu yang berbeda dari sebelumnya. Kita akan menyajikan penggunaan css untuk format multimedia dan tabel. Jadi saya anjurkan sebelum kalian membaca postingan ini kalian baca terlebih dahulu postingan saya sebelumnya: https://tutorgesit.blogspot.com/2019/08/memahami-css-cascading-style-sheet.html agar kalian lebih paham terhadap materi yang akan terpaparkan kaliini.
Baik, tidak perlu basa basi lagi langsung saja kita ke percobaan pertama :

Embedded Image CSS

<!DOCTYPE html>
<html>
<head>
 <title>EmbImageCSS M.Fadlul Hafiizh XI RPL 2</title>
 <style type="text/css">
  img.mouse{
   margin-top: 10px;
   float: left;
   clear: both;
   width: 200px;
   height: 200px;
  }
  img.cat{
   margin-top: 5px;
   float: right;
   clear: both;
   width: 200px;
   height: 200px;
   border: solid;
   border-color: pink;
  }
  img.koa{
   margin-top: 10px;
   float: right;
   clear: both;
   width: 200px;
   height: 200px;
  }
 </style>
</head>
<body>
 <h1>
Contoh embedded CSS pada gambar</h1>
<img class="mouse" src="gambar/tikus.jpg">
 <img class="cat" src="gambar/kucing.jpg">
 <img class="koa" src="gambar/koala.jpg">
</body>
</html>

Hasilnya seperti ini :

Ext Image CSS

<!DOCTYPE html>
<html>
<head>
 <title>CSS pada image M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="extImage.css">
</head>
<body>
<h1>
Contoh CSS pada gambar secara external</h1>
<img id="pikachu" src="gambar/pikacu.gif" />
<img id="ucing" src="gambar/kucing.gif" />
<img id="guguk" src="gambar/pompurin.gif" />
</body>
</html>

CSSnya :

img#pikacu{
 margin-top: 10px;
 float: left;
 clear: both;
}
img#ucing{
 margin-top: 5px;
 float: right;
 clear: both;
 border: dotted;
 border-color: salmon;
}
img#guguk{
 margin-top: 10px;
 float: right;
 clear: both;
}

Hasilnya :

In Line CSS for Background Image

<!DOCTYPE html>
<html>
<head>
 <title>Inline CSS Untuk Bg M.Fadlul Hafiizh XI-RPL 2</title>
</head>
<body style="background-image: url(gambar/bg.gif); background-size: cover;">
 <h1>
Hello World!</h1>
<p align="center" style="color: green; font-family: Impact; font-size: 24px; background-color: yellow;">
Hello World, ini adalah contoh penggunaan in line!
 </p>
</body>
</html>

Hasilnya :

Embedded CSS for Background Image

<!DOCTYPE html>
<html>
<head>
 <title>Background Image Goes Wrong M.Fadlul Hafiizh XI-RPL 2</title>
 <style type="text/css">
  #utama{
   font-family: Impact;
   font-size: 30pt;
   color: bisque;
   text-shadow: 2 2 2 red;
   background-image: url(gambar/bg.gif);
   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 800px dan 600px, maka terjadilah tampilan seperti ini
 </div>
</body>
</html>

Hasilnya :

mbedded Bg Image As Image

<!DOCTYPE html>
<html>
<head>
 <title>CSS Image Placement M.Fadlul Hafiizh XI-RPL 2</title>
 <style type="text/css">
  #headline1{
   background-image: url(gambar/pikacu.gif);
   background-repeat: repeat-x;
   background-position: left top;
   padding-top: 200px;
   margin-bottom: 50px;
  }
  #headline2{
   background-image: url(gambar/pompurin.gif);
   background-repeat: no-repeat;
   background-position: right top;
   padding-top: 200px;
  }
 </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 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 jadi seperti ini :

Embedded Video

<!DOCTYPE html>
<html>
<head>
 <title>Testing viedo M.Fadlul Hafiizh XI-RPL 2</title>
</head>
<body>
 <h1 style="color: orangered; text-align: center; font-family: consolas;">
  Ini video ku 
 </h1>
<video controls="controls" style="display: block; margin: 0 auto; width: 400px; height: 400;">
  <source src="gambar/pilem.mp4" type="video/mp4">
   Your  browser does not support tthe video tag.
 </video>
</body>
</html>

Hasilnya :

Embedded Video Youtube

Untuk Embed video youtube, kalian harus mencari link dari vidio yang ingin kalian input kedalamnya. pertama bukalah youtube dan cari video yang kalian ingin input. setelah itu kalian buka videonya dan pencet opsi share/berbagi dan nanti link video tersebut akan tercantum dalam opsi berbagi dan tinggal kalian salin.

<!DOCTYPE html>
<html>
<head>
 <title>Testing youtube M.Fadlul Hafiizh XI-RPL 2</title>
 <style type="text/css">
  .videoWrapper{
   position: relative;
   padding-bottom: 56.52%; /* 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 and Pasted From Youtube -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Qp2F790d424" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
</body>
</html>

Hasilnya jadi seperti ini :

Embedded Table Border Collapse

<!DOCTYPE html>
<html>
<head>
 <title>Embedded Table Border Collapse M.Fadlul Hafiizh XI-RPL 2</title>
 <style type="text/css">
  table{
   border-collapse: collapse;
  }
  table, td, th{
   border: 2px solid lawngreen;
  }
 </style>
</head>
<body>
 <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>
</body>
</html>

Hasilnya :

Ext Table With CSS 1

<!DOCTYPE html>
<html>
<head>
 <title>CSS Pada Tabel M.Fadlul Hafiizh XI RPL 2</title>
 <link rel="stylesheet" type="text/css" href="CSSOnTable1.css">
</head>
<body>
 <table>
<tr>
   <th>Nama Depan</th>
   <th>Nama Belakang</th>
  </tr>
<tr>
   <td>Thom</td>
   <td>Yorke</td>
  </tr>
<tr>
   <td>Vanessa</td>
   <td>Angel</td>
  </tr>
<tr>
   <td>Jonny</td>
   <td>Greenwood</td>
  </tr>
</table>
</body>
</html>

CSSnya :

table,th{
 border: 2px solid orchid;
 font-family: impact;
 color: violet;
}
td{
 border: 1px solid hotpink;
 font-family: Arial Narrow;
 color: orchid;
}

Hasilnya :

Ext Table With CSS 2

<!DOCTYPE html>
<html>
<head>
 <title>CSS Pada Tabel Kedua M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="CSSOnTable2.css">
</head>
<body>
 <table>
<tr>
   <th>Nama Depan</th>
   <th>Nama Belakang</th>
   <th>Alamat</th>
  </tr>
<tr>
   <td>Karina</td>
   <td>Nuril Aulia</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>Muhammad</td>
   <td>Dandi Ramdani</td>
   <td>Jl. Bumi Abdi Blok s 6</td>
  </tr>
</table>
</body>
</html>

CSSnya :

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; /*untuk warna font*/
 font-family: consolas;
}

Hasilnya:

Ext Table With CSS 3

<!DOCTYPE html>
<html>
<head>
 <title>CSS Pada Tabel Ketiga M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="CSSOnTable3.css">
</head>
<body>
 <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>America</td>
  </tr>
<tr>
   <td>Lorde</td>
   <td>Ajah</td>
   <td>New Zealand</td>
  </tr>
</table>
</body>
</html>

CSSnya :

table, td, th{
 border: 1px solid salmon;
}
td{
 background-color: lawngreen;
 color: green;
 text-align: right;
 height: 30px;
 vertical-align: middle;
 padding-right: 15px;
}
th{
 background-color: red;
 color: mintcream;
 text-align: right;
 height: 50px;
 vertical-align: bottom;
 padding: 15px;
}

Hasilnya :

Tugas Praktikum

Tugas kaliini yang harus saya kerjakan adalah membuat tabel dengan css seperti yang dicontohkan dalam modul. Inilah kodingan yang saya kerjakan :

<!DOCTYPE html>
<html>
<head>
 <title>Quiz M.Fadlul Hafiizh XI-RPL 2</title>
 <style type="text/css">
  table{
   border: dashed blue;
   background-color: green;
  }
  th{
   border-left: dashed red;
   border-right: dashed red;
   border-top: dotted red;
   border-bottom: dotted red;
   background-color: orange;
   height: 50px;
   text-decoration: underline;
  }
  td.timbul{
   border: 1px outset yellow;
   border-width: 2px;
   background-color: red;
   font-style: italic;
  }
  td{
   border-top: solid orange;
   border-left: solid orange;
   border-bottom: solid goldenrod;
   border-right: solid goldenrod;
   border-style: inset;
   background-color: silver;
  }
  td, th{
   font-family: 'PT Sans Narrow', sans-serif;
  }
  img.gambar{
   width: 150px;
   height: 100px;  
 </style>
</head>
<body>
 <table align="center">
<tr>
      <th colspan="2" style="width: 520px">Pendaftaran Acara Porak SMKN 4 BDG</th>
      <th colspan="2"><img class="gambar" src="gambar/mario.jpg"></th>
    </tr>
<tr>
     <td class="timbul">No</td>
     <td class="timbul">Nama</td>
     <td class="timbul">Kelas</td>
     <td class="timbul">X-TKJ</td>
    </tr>
<tr>
     <td>1</td>
     <td>Alianso</td>
     <td rowspan="7" colspan="2"><img src="gambar/naruto.jpg">
    </tr>
<tr>
     <td>2</td>
     <td>Al Ghazali</td>
    </tr>
<tr>
     <td>3</td>
     <td>Bento</td>
    </tr>
<tr>
     <td>4</td>
     <td>Charli</td>
    </tr>
<tr>
     <td>5</td>
     <td>Dube Herlimo</td>
    </tr>
<tr>
     <td>6</td>
     <td>Falseto</td>
    </tr>
<tr>
     <td>7</td>
     <td>Ghafani</td>
    </tr>
</table>
</body>
</html>

dan hasilnya seperti ini :

Untuk efek timbul pada kolom tabel saya gunakan border: inset; ataupun border: outset; dan diberikan warna berbeda dengan fill (warna yg memenuhi kolom) sehingga garis tepi dengan bagian tengah terlihat kontras. semakin kontras perbedaan warnanya maka akan semakin jelas kolom tersebut terlihat timbul/cekung kedalam.

Oke mungkin sekian yang kaliini dapat saya sampaikan

Cari Blog Ini

Tutor Gesit

Menyajikan css untuk format multimedia dan tabel

Komentar

Posting Komentar

Postingan Populer

CRUD(Create, read, update, delete) data dalam relasi 2 tabel

If, If/Else, Else, Switch/Case On java script