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

Array pada JS - P13

Di pembahasan kali ini akan membahas JS Array..Langsung simak aja guys... 1. Pengertian Array 2. Jenis jenis Array 3. Contoh contoh Array 1. Pengertian Array     Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dst.     Array di dalam JavaScript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat. Index array di dalam JavaScript juga tidak harus berurutan, JavaScript membolehkan elemen dari array ‘tidak terur...
Post a Comment
Read more

Profil PHP - P19

PROFIL SAYA 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 <!DOCTYPE html> <html> <head> <title> DATA PRIBADI </title> <link rel="stylesheet" type="text/css" href="coba.css" > </head> <body> <section class="kotaknya" > <img src="FOTO.png" clas="image" width="300" height="450" /> </div> </section> <h1> Biografi pribadi </h1> <?php $nama_saya = "Muhamad Alfi Rizqi"; $kelas = "XI RPL 1"; $sekolah = "SMKN 4 Bandung"; $nis = "1718 117123"; $umur = "16 Tahun"; $berat_badan= "50 kg"; $hobi = "Bersepeda, Playing Games, mendaki"; $tinggi = "167 cm"; $alamat = ...
Post a Comment
Read more

Membuat Coding menjadi lebih bermakna dengan C++

Selamat beraktivitas dimanapun kalian berada... Kali ini saya akan menunjukan dengan Coding menjadi lebih bermakna untuk kalian semua... Misal dengan membuat Kalkulator simpel dengan C++ sangatlah mudah jika kalian ingin mempelajari ini terlebih dahulu.        Sebenarnya banyak bahasa pemrograman yang tentu saja memudahkan bagi kehidupan manusia,Contohnya Java,Phyton,C# dan masih banyak lagi Tapi,Saya akan menunjukan kepada kalian tentang bahasa program C++ dengan mencari tahu kalian tentu akan menjadi Programmer yang handal Dengan catatan ini adalah coding karya saya tentunya, Dan kalian hanya perlu memahami nya dan meniru nya dirumah.. saya hanya menunjukan berbagai cara saja dan sebenarnya C++ lebih dari ini.mungkin ini adalah Coding yang simple yang menurut kalian pasti hanya perlu waktu sebentar untuk memahaminya.. Sebelumya saya sudah menjelaskan di link saya tentang C++ dan tentunya dengan penjelasannya .Saya sarankan untuk membaca ARTIKEL ini...
Post a Comment
Read more