Haikal PG - XI RPL 1 - PWPB Sesi 10

Assalamualaikum Warahmatullahi Wabarokatuh
Pada sesi kali ini kita akan mengedit format multimedia dan tabel dengan CSS (Cascading Style Sheet), seperti menambahkan border, warna border, ukurannya, jenisnya dll. Ok, kita langsung saja tutorialnya :

EmbImageCSS.html

Disini kita akan menambahkan selector class pada tag img. <img src="bla.png" class="burung" /> dan nantinya kita akan mengedit tampilannya dengan CSS. Contoh Tampilan :

EmbImageCSS

Pertama-tama saya akan kasih codenya dulu dan nanti saya jelaskan pada teman-teman :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansya XI RPL 1 EmbImage</title>
 <style type="text/css">
  image.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>

Saya jelaskan : Yang pertama teman-teman buat dahulu tag image, sesudah memasukan tag image masukkan foto yang akan di edit tampilanya dengan CSS, dan jangan lupa tambahkan juga selector class didalam tag image. Sesudah kita akan mengembbed CSS, gunakan tag style di bagian <head></head> type nya 'text/css' lalu kita tambahkan property seperti margin top, float, clear, width juga height.

ExtImageCSS.html

Hampir sama seperti diatas namun ini menggunakan metode pengkodingan external yang mana kita harus membuat sebuat file dengan ekstensi .css. Sesudah teman-teman membuat file tersebut langsung saja hubungkan dengan tag <link> yang sudah saya jelaskan di sesi sebelumnya. Tampilan nya:

ExtImageCSS

Codenya :

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal PUtra Gusiansyah XI RPL 1 ExtImageCSS</title>
 <link rel="stylesheet" type="text/css" href="extImage.css">
</head>
<body>
 <h1>
Contoh CSS pada gambar secara external</h1>
<img src="gambar/pikachu.gif" id="pikachu" />
 <img src="gambar/ucing.gif" id="ucing" />
 <img src="gambar/pompurin.gif" id="guguk" />
</body>
</html>

CSS:

img#pikachu{
 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;
}

Hampir sama seperti diatas propertynya ada margin, float, clear, dan ada yang baru nih!! border, border ini digunakan unttuk menambahkan garis seperti bingkai pada foto.

Menambahkan background dengan CSS.
HTML juga bisa menambahkan background di bagian body atau tag-tag lain yang memungkinkan. CSS juga bisa dipakai untuk menambahkan backgound dengan 'background : URL(pppp.png)'

InlineCSSforBgImage.html

InlineBG

Codenya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 InlineCSSforBgImage</title>
</head>
<body style="background-image: url(gambar/tikus.jpg);">
 <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 inline!</p>
</body>
</html>

Seperti yang tgeman-teman lihat background image didalam body dengan tag style terlebih dahulu. dan didalam tag p ada lagi inline css.

EmbCSSforBgImage.html
Background juga bisa di tambahkan di embedded ini. Contohnya :

embBG

Codenya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 EmbCSSforBgImage</title>
 <style type="text/css">
  #utama{
   font-family: impact;
   font-size: 30pt;
   color: bisque;
   text-shadow: 2 2 2 red;
   background-image: url(gambar/tikus.jpg);
   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 seperti ini
 </div>
</body>
</html>

Mengkustomisasi image
Mengkustom gambar agar sesuai tampilan, tidak ada perulangan dll. dengan menambahkan propety 'background-repeat : no-repeat' maka gambar tidak akan ada perulangan seperti diatas. Langsung saja

EmbBgImageAsImage.html
Kita akan menggukan tipe pengkodean embbeded CSS dan mengkustom gambar agar sesuai yang diinginkan. Contoh :

Kustom Image

Codenya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 EmgBgImageAsImage</title>
 <style type="text/css">
  #headline1{
   background-image: url(gambar/pikachu.gif);
   background-repeat: repeat-x;
   background-position: left top;
   padding-top: 68px;
   margin-bottom: 50px;
  }
  #headline2{
   background-image: url(gambar/kucing.jpg);
   background-repeat: no-repeat;
   background-position: right top;
   padding-top: 60px; 
  }
 </style>
</head>
<body>
 <div id="headline1">
CSS (versi sekarang adalah CSS) banyak dilibatkan dalam dokumen web. kegunaanya 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 banyak dari pada hanya dilibatkan dalam dokumen web. kegunaanya asalah untuk memformat doumen. Sebagai contoh. warna teks atau bahkan warna latarbelakang bisa diatur melalui CSS</div>
</body>
</html>

Pada kodingan diatas terdapat property dan value seperti ini : 'background-repeat : repeat-x;', property dan value diatas digunakan untuk perulangan gambar di koordinat x saja.

EmgVideo.html
Sekarang kita akan mengembedded video dan mengedit tampilanya dengan CSS. Masih ingan bagaimana memasukkan video di HTML? Tentu saja pasti ingat ya haha. dengan tag <video></video>. Tampilan:

Codenya agar tampilanya seperti diatas :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 EmbVideo</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: 400; height: 400;"><source src="gambar/movie.mp4" type="video/mp4" />Your Browser Doest Support the video tag</video>
</body>
</html>

EmbVideoYoutube.html
Kita akan mengembedded video dari youtube. Dengan cara salin link/url video yang akan di masukkan. Dan buatlah tampilanya agar seperti berikut :

Youtubes

Codenya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 EmbVideoYoutube</title>
 <style type="text/css">
  .videoWrapper{
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 25px;
   height: 0;
  }
  .videoWrapper iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
  }
 </style>
</head>
<body>
 <div class="videoWrapper">
  <!-- Copy & Fasted from Youtube -->
  <iframe src="https://youtu.be/pv7G5OBiMmM?t=106" frameborder="0" allowfullscreen></iframe><iframe width="560" height="315" src="https://www.youtube.com/embed/smcBjKqewlA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
</body>
</html>

Kita bisa mengkustom ukuran dan letak yang diinginkan dengan CSS.

CSS Pada Tabel
Kali ini kita akan menerapkan CSS pada tabel agar memiliki warna pada border, warna background yang diinginkan dll.

embtableborderCollapse.html
Kita akan menggunakan proprty-property pada CSS untuk menghias tampilan sebuah tabel agar seperti berikut:

Table

Codenya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 embtableborderColappse</title>
 <style type="text/css">
  table{
   border-collapse: collapse;
  }
  table, td, th{
   border:1px solid LawnGreen;
  }
 </style>
</head>
<body>
 <table>
<tr>
   <th>Nama Depan</th>
   <th>Nama</th>
  </tr>
<tr>
   <td>Adalin</td>
   <td>Laraseti</td>
  </tr>
<tr>
   <td>Novaro</td>
   <td>Davandra</td>
  </tr>
<tr>
   <td>Adika</td>
   <td>Dayandra</td>
  </tr>
</table>
</body>
</html>

diatas ada property border collapse, border collapse ini digunakan untuk membuat border yang lebih spesifik lagi daripada attribut border pada tag table. Juga kita bisa memberikan warna border pada tabel seperti diatas.

eXTablewithcss.html
Kita menggunakan penkodingan external. Pertama-tama seperti yang teman-teman ketahui yaitu dengan membuat file .html juga file .css agar nanti bisa dihubungkan. Kita akan membuat table dengan tampilan seperti berikut :

Lebih bagus bukan? CSS mantap bro...

Source Codenya :

HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 eXTableWwithcss</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>Carlton</td>
  </tr>
<tr>
   <td>Jonny</td>
   <td>Greenwood</td>
  </tr>
</table>
</body>
</html>

CSS:

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

eXTablewithcss.html
Kita buat lagi agar terbiasa dengan CSS pada tabel. Dengan tampilan seperti ini:

eXtablewithcss

Codenya :
HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustinsyah XI RPL 1 eXTablewithcss2</title>
 <link rel="stylesheet" type="text/css" href="cssOnTable2.css">
</head>
<body>
 <table>
<tr>
   <th>Nama Depan</th>
   <th>Nama Belakang</th>
   <th>Alanat</th>
  </tr>
<tr>
   <td>Karina</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>Muhmad Dendi</td>
   <td>Ramdani</td>
   <td>Jl. Bumi Abdi Blok S 6</td>
  </tr>
</table>
</body>
</html>

CSS:

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;
 font-family: consolas;
}

eXTablewithcss.html
Kita buat lagi hehe biar terbiasa. Tampilanya seperti ini :

Bisa tanpa source code?? hehe. Becanda.

Source Code :

HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPl 1 eXTablewithcss3</title>
 <link rel="stylesheet" type="text/css" href="cssOnTable3.css">
</head>
<body>
 <table>
<tr>
   <th>First Name</th>
   <th>Family Name</th>
   <th>Coutry</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>

CSS:

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;
}

Quizzz Time!
Seperti biasa kita adakan quiz time.
Tampilanya :

Quizzzz

Source Codenya :

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 </title>
 <style type="text/css">
  table#universe{
   border-left: 2px dotted lightblue;
   border-right: 2px dotted lightblue;
   border-top: 2px dotted lightblue;
   border-bottom: 2px dotted lightblue;
   background-color: lavender;
  }
  tr.row1{
   border-top: 1px dashed gold;
   border-bottom: 1px dashed gold;
   border-right: 1px dotted red;
   border-left: 1px dotted red;
  }
  tr.row2{
   border:3px dashed red;
   background-color: cyan;
  }
  tr.row{
   border:1px solid grey;
  }
 </style>
</head>
<body>
 <table id="universe" border="1">
<tr class="row1">
   <th colspan="2">Pendaftaran Acara Porak SMKN 3 Bandung</th>
   <th colspan="3"><img src="gambar/tikus.jpg" height="20px" width="20px"></th>
  </tr>
<tr class="row2">
   <td>No</td>
   <td>Nama</td>
   <td>Kelas</td>
   <td>XI-RPL</td>

  </tr>
<tr class="row">
   <td>1</td>
   <td>Alianso</td>
   <td rowspan="7" colspan="2"><img src="gambar/kucing.jpg" height="100px" width="200px"></td>
  </tr>
<tr class="row">
   <td>2</td>
   <td>Al Ghazali</td>
  </tr>
<tr class="row">
   <td>3</td>
   <td>Bento</td>
  </tr>
<tr class="row">
   <td>4</td>
   <td>Charli</td>
  </tr>
<tr class="row">
   <td>5</td>
   <td>Dube herlino</td>
  </tr>
<tr class="row">
   <td>6</td>
   <td>falseto</td>
  </tr>
<tr class="row">
   <td>7</td>
   <td>Ghafani</td>
  </tr>
</table>
</body>
</html>

Sekian saja pada sesi kita kali ini, semoga bermanfaat
Wassalamualaikum Warahtamullahi Wabarokatuh

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 10

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 9

Haikal PG - XI RPL 1 - PWPB Sesi 38

Haikal PG - XI RPL 1 - PWPB Sesi 25