Assalamualaikum Wr. Wb
Apa kabar semuanya semoga kalian sehat selalu yaa. Baiklah tanpa basa basi kali ini kita akan membahas tentang Css untuk menampilkan tabel dan multimedia, Point-point hari ini:> Embeded Image
> Eksternal Image
> Inline Css untuk backround
> Embed Css untuk backround
> Embeded backround Image
> Embeded Video
> Css pada tabel
> Part bonus
Oke langsung saja ke pembahasan yang pertama yaitu:
1. Embeded Image
Ini dia kodingannya gengs:
<!DOCTYPE html>
<html>
<head>
<title>Css pada image</title>
<style type="text/css">
img.tanaka {
margin-top: 10px;
float: left;
clear: both;
width: 200px;
}
img.naruto {
margin-top: 5px;
float: right;
clear: both;
border: dotted;
border-color: black;
width: 200px;
}
img.alkemis {
margin-top: 10px;
float: left;
clear: both;
width: 200px;
}
</style>
</head>
<body>
<h1>Contoh Embedded Css</h1>
<img class="tanaka" src="bahan/tanaka.gif">
<img class="naruto" src="bahan/naruto.gif">
<img class="alkemis" src="bahan/alkemis.gif">
</body>
</html>
<html>
<head>
<title>Css pada image</title>
<style type="text/css">
img.tanaka {
margin-top: 10px;
float: left;
clear: both;
width: 200px;
}
img.naruto {
margin-top: 5px;
float: right;
clear: both;
border: dotted;
border-color: black;
width: 200px;
}
img.alkemis {
margin-top: 10px;
float: left;
clear: both;
width: 200px;
}
</style>
</head>
<body>
<h1>Contoh Embedded Css</h1>
<img class="tanaka" src="bahan/tanaka.gif">
<img class="naruto" src="bahan/naruto.gif">
<img class="alkemis" src="bahan/alkemis.gif">
</body>
</html>
Hasilnya akan jadi:
2. Eksternal Image
Ini dia kodingan htmlnya:
<!DOCTYPE html>
<html>
<head>
<title>Css pada Image</title>
<link rel="stylesheet" href="image.css">
</head>
<body>
<h1>Contoh Css pada gambar secara eksternal</h1>
<img id="saskeh" src="bahan/saskeh.gif">
<img id="naruto" src="bahan/naruto.gif">
<img id="alkemis" src="bahan/alkemis.gif">
</body>
</html>
<html>
<head>
<title>Css pada Image</title>
<link rel="stylesheet" href="image.css">
</head>
<body>
<h1>Contoh Css pada gambar secara eksternal</h1>
<img id="saskeh" src="bahan/saskeh.gif">
<img id="naruto" src="bahan/naruto.gif">
<img id="alkemis" src="bahan/alkemis.gif">
</body>
</html>
Ini koding css nya:
img#saskeh{
margin-top: 10px;
float: left;
clear: both;
width: 200px;
}
img#naruto{
margin-top: 5px;
float: right;
clear: both;
border: dotted;
border-color: black;
width: 200px;
}
img#alkemis{
margin-top: 10px;
float: left;
clear: both;
width: 200px;
}
margin-top: 10px;
float: left;
clear: both;
width: 200px;
}
img#naruto{
margin-top: 5px;
float: right;
clear: both;
border: dotted;
border-color: black;
width: 200px;
}
img#alkemis{
margin-top: 10px;
float: left;
clear: both;
width: 200px;
}
Hasilnya sih idak jauh beda dengan embed,yg membedakan cuman cara kita memanggilnya, mau tau hasilnya ini dia:
3. Inline Css untuk backround
Ini dia codingannya:
<!DOCTYPE html>
<html>
<head>
<title>Inline css untuk bg image</title>
</head>
<body style="background-image: url(bahan/alkemis.gif);">
<h1>Apa kabs dunia!!</h1>
<p align="center" style="color:green; font-family: Tw Cen Mt; font-size: 24px; background-color: Yellow;">
Apa kabs dunia,ini adalah contoh penggunaan inline!
</p>
</body>
</html>
<html>
<head>
<title>Inline css untuk bg image</title>
</head>
<body style="background-image: url(bahan/alkemis.gif);">
<h1>Apa kabs dunia!!</h1>
<p align="center" style="color:green; font-family: Tw Cen Mt; font-size: 24px; background-color: Yellow;">
Apa kabs dunia,ini adalah contoh penggunaan inline!
</p>
</body>
</html>
Hasilnya:
4. Embed Css untuk backround
Ini dia koding nya:
<!DOCTYPE html>
<html>
<head>
<title>Background Image</title>
<style type="text/css">
#gambar {
font-family: Tw cen Mt;
font-size: 30px;
color: white;
text-shadow: 2 2 2 grey;
background-image: url(bahan/uzumaki.jpg);
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="gambar">
Sebenarnya, background gambar ini menggunakan width 800px dan height 600px, Maka terjadilah tampilan ini
</div>
</body>
</html>
<html>
<head>
<title>Background Image</title>
<style type="text/css">
#gambar {
font-family: Tw cen Mt;
font-size: 30px;
color: white;
text-shadow: 2 2 2 grey;
background-image: url(bahan/uzumaki.jpg);
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="gambar">
Sebenarnya, background gambar ini menggunakan width 800px dan height 600px, Maka terjadilah tampilan ini
</div>
</body>
</html>
Hasilnya akan jadi:
5. Embeded backround Image
Ini kodingnya:
<!DOCTYPE html>
<html>
<head>
<title>Css Repeat</title>
<style type="text/css">
#kepala1{
background-image: url(bahan/naruto.gif);
background-size: 60px;
background-repeat: repeat-x;
background-position: left top;
padding-top: 68;
margin-bottom: 50px;
}
#kepala2{
background-image: url(bahan/saskeh.gif);
background-size: 60px;
background-repeat: repeat-x;
background-position: right top;
padding-top: 68;
}
</style>
</head>
<body>
<div id="kepala1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="kepala2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
<html>
<head>
<title>Css Repeat</title>
<style type="text/css">
#kepala1{
background-image: url(bahan/naruto.gif);
background-size: 60px;
background-repeat: repeat-x;
background-position: left top;
padding-top: 68;
margin-bottom: 50px;
}
#kepala2{
background-image: url(bahan/saskeh.gif);
background-size: 60px;
background-repeat: repeat-x;
background-position: right top;
padding-top: 68;
}
</style>
</head>
<body>
<div id="kepala1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="kepala2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Hasilnya akan jadi:
6. Embeded Video
Ini dia kodingnya:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1 style="color: green; text-align: center; font-family: tw cen mt;">Ini Video ku</h1>
<video controls="controls" style="display: block; margin: 0 auto; width: 360px;">
<source src="bahan/video2.mp4"> Broser kamu tidak support
</video>
</body>
</html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1 style="color: green; text-align: center; font-family: tw cen mt;">Ini Video ku</h1>
<video controls="controls" style="display: block; margin: 0 auto; width: 360px;">
<source src="bahan/video2.mp4"> Broser kamu tidak support
</video>
</body>
</html>
Hasilnya akan jadi :
7. Css pada tabel
Ini codingan htmlnya :
<!DOCTYPE html>
<html>
<head>
<title>Css pada tabel</title>
<link rel="stylesheet" href="table.css">
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
</tr>
<tr>
<td>Tom</td>
<td>Ef kennedy</td>
</tr>
<tr>
<td>Natasha</td>
<td>Wilona</td>
</tr>
<tr>
<td>Verell</td>
<td>Bramashta</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Css pada tabel</title>
<link rel="stylesheet" href="table.css">
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
</tr>
<tr>
<td>Tom</td>
<td>Ef kennedy</td>
</tr>
<tr>
<td>Natasha</td>
<td>Wilona</td>
</tr>
<tr>
<td>Verell</td>
<td>Bramashta</td>
</tr>
</table>
</body>
</html>
Dan ini css nya:
table, th{
border: 2px solid orchid;
font-family: Tw Cen Mt;
color: violet;
}
td{
border: 1px solid hotpink;
font-family: Arial;
color: orchid;
}
border: 2px solid orchid;
font-family: Tw Cen Mt;
color: violet;
}
td{
border: 1px solid hotpink;
font-family: Arial;
color: orchid;
}
Hasilnya:
Ini html nya:
<!DOCTYPE html>
<html>
<head>
<title>Css pada tabel kedua</title>
<link rel="stylesheet" href="cssontable2.css">
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Alamat</th>
</tr>
<tr>
<td>Alivio</td>
<td>Seramos</td>
<td>Jl. Bbk Indah 22</td>
</tr>
<tr>
<td>Ananda</td>
<td>Putri</td>
<td>Jl. Tanjung Indah 33</td>
</tr>
<tr>
<td>Fransesco</td>
<td>Simorangkir</td>
<td>Jl. Permata Indah 11</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Css pada tabel kedua</title>
<link rel="stylesheet" href="cssontable2.css">
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Alamat</th>
</tr>
<tr>
<td>Alivio</td>
<td>Seramos</td>
<td>Jl. Bbk Indah 22</td>
</tr>
<tr>
<td>Ananda</td>
<td>Putri</td>
<td>Jl. Tanjung Indah 33</td>
</tr>
<tr>
<td>Fransesco</td>
<td>Simorangkir</td>
<td>Jl. Permata Indah 11</td>
</tr>
</table>
</body>
</html>
Ini file css nya:
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;/*warna font*/
font-family: tw cen mt;
}
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;/*warna font*/
font-family: tw cen mt;
}
Hasilnya:
> Contoh ke 3
Ini html nya
<!DOCTYPE html>
<html>
<head>
<title>Cssontable3</title>
<link rel="stylesheet" href="cssontable3.css">
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Family Name</th>
<th>Country</th>
</tr>
<tr>
<td>Atta</td>
<td>Halilintar</td>
<td>Indonesia</td>
</tr>
<tr>
<td>Ariana</td>
<td>Grande</td>
<td>America</td>
</tr>
<tr>
<td>Taylor</td>
<td>Swift</td>
<td>America</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Cssontable3</title>
<link rel="stylesheet" href="cssontable3.css">
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Family Name</th>
<th>Country</th>
</tr>
<tr>
<td>Atta</td>
<td>Halilintar</td>
<td>Indonesia</td>
</tr>
<tr>
<td>Ariana</td>
<td>Grande</td>
<td>America</td>
</tr>
<tr>
<td>Taylor</td>
<td>Swift</td>
<td>America</td>
</tr>
</table>
</body>
</html>
Ini cssnya:
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;
}
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;
}
Hasilnya akan jadi:
> Contoh lagi:
Ini htmlnya:
<!DOCTYPE html>
<html>
<head>
<title>Tabel</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>Adelia</td>
<td>Larasati</td>
</tr>
<tr>
<td>Devano</td>
<td>Danendra</td>
</tr>
<tr>
<td>Anwar</td>
<td>Al aqsa</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tabel</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>Adelia</td>
<td>Larasati</td>
</tr>
<tr>
<td>Devano</td>
<td>Danendra</td>
</tr>
<tr>
<td>Anwar</td>
<td>Al aqsa</td>
</tr>
</table>
</body>
</html>
Ini Hasilnya:
8. Part Bonus
Mohon maaf sekali jika pembahasan kali ini sangat berantakan karena mimin udah gak fokus, dikarenakan saat mengerjakan ini pukul 1 malam ;( jadi ya maklum ya gengs
Jaga kesehatan,karena kesehatan itu mahal
0 Komentar