Skip to main content

Format Tampilan Multimedia dan Tabel - P10

Format Tampilan Multimedia & Tabel


Inilah beberapa Contoh yang saya akan tunjukan kepada kalian

1. Embed Image CSS


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
 <title>CSS pada Image</title>
 <style type="text/css">
  img.mouse {
   margin-top: 10px;
   float: left;
   clear: both;
   width: 200px;
   height: 200px;
  }
  img.wormy{
   margin-top: 5px;
   float: right;
   clear: both;
   width: 200px;
   height: 200px;
   border: solid;
   border-color: pink;
  }
  img.koala{
   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="gambarku/tikus.jpg">
 <img class="wormy" src="gambarku/wormy.jpg">
 <img class="koala" src="gambarku/koala.jpg">

</body>
</html>

Hasilnya:


2.External Image CSS


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
 <title>CSS pada Image</title>
 <link rel="stylesheet" type="text/css" href="extImage.css">
</head>
<body>
 <h1>Contoh CSS pada Gambar external</h1>
 <img class="minion" src="gambarku/minion.gif"/>
 <img class="ucing" src="gambarku/ucing.gif"/>
 <img class="yes" src="gambarku/giphy.gif"/>
</body>
</html>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
img.minion{
 margin-top: 10px;
 float: left;
 clear: both;
 border-radius: 50%;
}
img.ucing{
 margin-top: 5px;
 float: right;
 clear: both;
 border: dotted;
 border-color: Gold;
 border-radius: 50%;
}
img.yes{
 margin-top: 10px;
 float: right;
 clear: both;
 border-radius: 50%;
}

Hasilnya:


  3. Inline CSS for bgImage


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<head>
 <title>inline css untuk bg image</title>
</head>
<body style="background-image: url(gambarku/hujandonat.gif)">
 <h1>Hello Paradise!</h1>
 <p align="center" style="color: aqua; font-family: Algerian; font-size: 24px;
 background-image: linear-gradient(to bottom right, cyan, darkblue);">
 Hello World, ini adalah contoh penggunaan inline!</p>
</body>
</html>

hasilnya:


4. Embed CSS for Bg Image


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
 <title>Background Image Goes wrong</title><style type="text/css">
  #utama{
   font-family: impact;
   font-size: 30pt;
   color: bisque;
   text-shadow: 5 5 5 gold;
   background-image: url(gambarku/giphy.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:

5.Embed Bg Image As Image


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
 <title>CSS Image placement</title>
 <style type="text/css">
  #headline1 {
   background-image: url(gambarku/ucing.gif);
   background-repeat:  repeat-x;
   background-position: left top;
   padding-top: 68px;
   margin-bottom: 50px;
  }
  #headline2 {
   background-image: url(gambarku/ucing.gif);
   background-repeat: no-repeat;
   background-position: right 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 banyak
  daripada hanya dilibatkan dalam dokumen web.Kegunaannya adalah untuk memformat dokumen.
  Sebagai contoh, warna teks atau bahkan warna
  latarbelakang bisa diatur melalui CSS.
 </div>

</body>
</html>

Hasilnya:

6. Embed Video


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
 <title>Testing Video</title>
</head>
<body>
 <h1 style="color: OrangeRed; text-align: center;
 font-family: Consolas;">Ini videoku</h1>
 <video controls="controls"
  style="display:block; margin: 0 auto;
  width: 999px; height: 400;">
  <source src="Deadpool 2.mkv" type="video/mp4"/>
  Your browser does not support the video tag.
 </video>

</body>
</html>

Hasilnya:

7. Embed Video Youtube


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
 <title>Testing Youtube </title>
 <style type="text/css">
 .videowrapeer {
 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>
 <div class="videowrapper">
 <!-- Copy Paste From YOUTUBE-->
 <iframe width="560" height="350" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
 </div>

</body>
</html>

Hasilnya:

8. Ext Tabel with CSS

See the Pen Ext Tabel with CSS by Muhamad Alfi (@AlviRizqi) on CodePen.

9. Ext Tabel with CSS2

See the Pen Ext Tabel with CSS by Muhamad Alfi (@AlviRizqi) on CodePen.

10.Ext Tabel with CSS3

See the Pen Ext Tabel with CSS by Muhamad Alfi (@AlviRizqi) on CodePen.

11. Tugas


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
 <title>CSS Pada Tabel</title>
 <link rel="stylesheet" type="text/css" href="TugasCSS.css">
</head>
<body> 
<table border="2">
 <tr>
 <td align="center" class="judul" colspan="2"><u> OCEAN'S 8</u></td>
 <td class="film" colspan="2"><img height="110" width="110" src="gambarku/th.gif"></td>
 </tr>
 <tr >
 <td class="no"><b><center> NO </center></b></td>
 <td class="judul"><b><center> Ibunya </center></b></td>
 <td class="nama" ><b><center> Nama </center></b></td>
 <td class="judul"><b><center> Family 8 </center></b></td>
 </tr>

<tr>
 <td align="center">1</td>
 <td> Wanita </td>
 <td align="center"> |Muhamad Alfi|XI RPL1 </td>
 <td colspan="2" rowspan="8" ><img width="450" height="337" align="center" src="gambarku/gambar.jpg"></td>
 </tr>
 <tr>
 <td align="center">2</td>
 <td> Griffin Dunne </td>
 <td align="center"> Justin Bieber </td>
 
 </tr>
 <tr>
 <td align="center">3</td>
 <td> Deidre Goodwin </td>
 <td align="center"> Kratos Carlwill </td>
 
 </tr>
 <tr>
 <td align="center">4</td>
 <td> Brian J. Carter </td>
 <td align="center"> Rowan Atkinson </td>
 
 </tr>
 <tr>
 <td align="center">5</td>
 <td> Gemma Forbes </td>
 <td align="center"> Edward J Freddy </td>
 
 </tr>
 <tr>
 <td align="center">6</td>
 <td>Richard Armitage</td>
 <td align="center"> Vanessa </td>
 
 </tr>
 <tr>
 <td align="center">7</td>
 <td> Charlott Kirk </td>
 <td align="center"> Wishnutama </td>
 
 </tr>
  <tr>
 <td align="center">8</td>
 <td> Daniela Rabbani </td>
 <td align="center"> Gerald Bill </td>
 
 </tr>

</table>
</body>
</html>

CSS:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
body{
 background-image: url('gambarku/latar.gif');
 background-size: cover;
 margin-bottom: 10%;
 margin-top: 10%;
 margin-right: 20%;
 margin-left: 20%;
}
table{
 height: 100%;
 width: 780px;
 border:1px dashed red;
 background-color: rgb(20 204 127);
}

td{

 background-color: rgb(190 0 255);
}

td.film{
 border-right:2px dashed;
 border-left: 2px dashed ;
 border-top: 2px dotted ;
 border-bottom: 1px dotted;
 border-color: gold;
 background-color: #BE00FF;
 color: gold;
 width: 75%;
 height: 7%;
 text-align: center;
}
td.no{
 width: 5%;
 background-color: linear-gradient(to top left, #66ffff 0%, #ff99cc 100%);
 border-color: red;
 size: 10px;
 font-family: Bahnschrift SemiLight;
}
td.nama{
 background-color: #14CC7F;
 width: 36%;
 border-color: red;
 size: 10px;
 font-family: Bahnschrift SemiLight;

}
td.judul{
 background-color: linear-gradient(to top left, #66ffff 0%, #ff99cc 100%);
 border-color: red;
 size: 10px;
 font-family: Bahnschrift SemiBold;
}

Hasilnya:


Itulah beberapa contoh yang bisa saya tunjukan kepada kalian semoga bermanfaat Selamat beraktivitas kembali..

Comments

Post a Comment

Popular posts from this blog

Membuat Anak Tangga menggunakan PHP - P24

Cara Membuat Anak Tangga menggunakan Array 2 Dimensi & Looping  Kali ini saya akan menunjukan kepada kalian cara membuat Anak Tangga di PHP menggunakan Array 2 dimensi & Looping dengan menyesuaikan Input dan pilihan warna dari User. Semoga bermanfaat~ <?php error_reporting ( 0 ); $jumlah = $_POST [ 'anakTangga' ]; $warna = $_POST [ 'warnaTangga' ]; for ( $i = 0 ; $i < $jumlah ; $i ++) { for ( $j = 0 ; $j < $i ; $j ++) { echo "<div class='kotak' style='background-color:$warna'></div>" ; } echo "<div class='kotak' style='background-color:$warna'></div><br>" ; } ?> Dan ini hasilnya Keterangan: Bahwa dalam menggunakan Array 2 Dimensi & Looping akan terus menerus mengulang sesuai dengan Input User <!DOCTYPE html> <html> <head> <title> Tangga Berwarna </title> </head> ...
Post a Comment
Read more

Komponen Audio,Video & Flash - P7

Menyediakan komponen, Audio, Video & Flash Format Tampilan Video Kita dapat menampilkan format audio pada halaman web, untuk menampilkannya dapat digunakan format seperti ini  Hasilnya: Source Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> cek video </title> </head> <body> <video width= "999" height= "540" controls poster= "gambarku/cute-030.jpg" > <source src= "This Is Me.mkv" type= "video/mp4" > browser anda tidak mendukung format video ini </video> </body> </html> Format Tampilan Audio  Hasilnya: Format Tampilan Flash 1 2 3 4 5 6 7 8 <html> <head> <title> Animasi </title> </head> <body> <embed src= "media/Strong.swf" > </body> </html> Hasilnya: Aud...
4 comments
Read more

Algoritma C++ Konversi dan Menukar Bilangan dari User

MENJADIKAN CODING C++ BERMANFAAT UNTUK USER Selamat beraktivitas bagi pembaca sekalian dimanapun kalian berada.. Kali ini saya akan menunjukan kepada kalian coding sederhana dengan C++ sesuai dengan judulnya  Yang saya bahas kali ini adalah  -PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -PERTUKARAN NILAI TANPA MENGGUNAKAN VARIABEL BANTU -BILANGAN POSITIF & NEGATIF dan -KONVERSI WAKTU DARI DETIK KE JAM, MENIT, dan DETIK Langsung saja ke pembahasan di bawah ini. 1. PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -Kita menginisialisasikan terlebih dahulu variabelnya x, y, z dengan tipe data Integer sebenarnya variabel z hanya variabel pembantu saja -Lalu untuk pengulangannya saya memakai do while  dengan menginisialisasikan pilih dengan tipe data char -Lalu pengulangannya saya tulis do{ -Saya outputkan dengan  cout << "Masukan Nilai X : " ; dan input dengan cin >> a ; -Untuk proses saya masukan z = x ; x = y ; y = z ; ...
Post a Comment
Read more