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

List dan List Kombinasi - P4

Pemrograman Web-List Jenis List Ada 3 Macam Listing di HTML diantaranya: 1. Ordered List: Sebagai Penanda secara Terurut 2. Unordered List: Untuk membuat Penanda secara Tak Terurut 3. Definiton List: Sebagai Daftar Definisi Untuk Ordered List biasanya menggunakan angka 1,2,3 atau huruf Romawi I,II,III. Juga dengan Alfabet a,b,c,d atahupun dengan huruf "i"(i,ii,iii).Ordered List ini cocok sebagai urutan, Membuat Teks Prosedur untuk membuat sesuatu seperti langkah langkah,Komposisi makanan,Cara membuat,dan lain sebagainya. Ordered List: Ordered List perlu memakai Tag <ol>bdi bagian awal dan Tag</ol> di bagian akhir. Dan kita huga harus menambahkan Tag<ii> dan </ii> di bagian yang diberi Tanda. Contoh Penulisan Ordered List: <ol> <li> Urutan Pertama </li> <li> Urutan Kedua </li> </ol> Itu adalah contoh penulisan Ordered List.Ordered List bisa ditampilkan dengan huruf, angka, angka Romaw
Post a Comment
Read more