PWPB | Pertemuan 10
Penggunaan CSS (Cascading Style Sheet)
1. Mengubah dan Memberi Gaya Pada image di HTML menggunakan CSS
Masukan Gambar menggunakan tag <img> dengan attribut "src" untuk mengimpor file gambar yang ada di suatu folder. Jika menggunakan Penulisan CSS jenis inline kita memberi gaya atau mengubah gaya pada image dengan cara menuliskan style di dalam tag <img>. Tapi Jika ingin lebih gampang gunakan metode penulisan CSS jenis Embedded atau External CSS.
Masukan Gambar menggunakan tag <img> dengan attribut "src" untuk mengimpor file gambar yang ada di suatu folder. Jika menggunakan Penulisan CSS jenis inline kita memberi gaya atau mengubah gaya pada image dengan cara menuliskan style di dalam tag <img>. Tapi Jika ingin lebih gampang gunakan metode penulisan CSS jenis Embedded atau External CSS.
a. EmbImageCSS.html
Contoh Kodingan pemberian gaya menggunakan Penulisan CSS Embedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
img.cat{
margin-top: 10px;
float: left;
clear: both;
width: 300px;
height: 250px;
}
img.shark {
margin-top: 5px;
float: right;
clear: both;
width: 400px;
height: 250px;
border: solid;
border-color: blueviolet;
}
img.eagle {
margin-top: 10px;
float: left;
clear: both;
width: 400px;
height: 250px;
border: solid;
border-color: aqua;
}
</style>
</head>
<body>
<h1></h1>
<img src="../img/cat.jpg" alt="" class="cat">
<img src="../img/shark.png" alt="" class="shark">
<img src="../img/eagle.jpg" alt="" class="eagle">
</body>
</html>
Hasil Kodingan di atas
b. ExtImageCSS
Contoh Kodingan pemberian gaya menggunakan Penulisan CSS Eksternal
file HTML nya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" href="ExtImageCSS.css">
</head>
<body>
<center>
<h1>Contoh CSS pada gambar secara Eksternal</h1>
</center>
<img id="naruto" src="../img/naruto.gif" alt="">
<img id="sasuke" src="../img/sasuke.gif" alt="">
<img id="minato" src="../img/minato.gif" alt="">
</body>
</html>
file CSS nya
img#naruto {
width: 30%;
margin-top: 10px;
margin-right: 5px;
clear: both;
}
img#sasuke {
width: 30%;
margin-top: 10px;
margin-right: 5px;
clear: both;
border: dotted;
border-color:blue;
}
img#guguk {
width: 30%;
margin-top: 10px;
clear: both;
}
Hasil Kodingan di atas
Cara mengubah background di HTML sebenarnya mudah, tinggal menulis attribut background di dalam tag <body>. Tapi agar lebih terstruktur dan lebih bisa di custom sebaiknya menggunakan CSS.
a. Mengubah Background Website dengan cara Penulisan CSS Inline
Contoh kodingan Mengubah Background Website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body style="background-image:url(../img/bg.jpg); background-size: cover;">
<h1 align="center">Hello World</h1>
<p align="center" style="color: greenyellow; font-family:arial; font-size:24px; background-color:indigo;">Hello World, ini adalah contoh penggunaan inline!</p>
</body>
</html>
Hasil Kodingan di atas
b. Mengubah Background Website dengan cara Penulisan CSS Embedded
Contoh Kodingan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
#utama {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30pt;
color: bisque;
text-shadow: 2 2 2 red;
background-image: url(../img/bbgg.jpg);
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<div id="utama">
sebenernya, background gambar ini width dan height nya 2500px X 1667px tapi karena pada css tertulis 800px dan 600px, maka terjadilah seperti ini.
</div>
</body>
</html>
Hasil Kodingan di atas
3. Mengcustom background-image pada CSS
Biasanya untuk menentukan ukuran background-image selain menggunakan width dan height, kita bisa mneggunakan property background-size dan juga background-repeat. Value pada background-repeat yaitu no repeat, repeat-x, repeat-y, repeat. Fungsi penggunaan background-repeat yaitu membuat gambar berulang untuk memenuhui halaman website.
a. EmbBgImageAsImage.html
Contoh Kodingan Mengcustom background-image di CSS dengan cara penulisan CSS Embedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
#headline1 {
height: 300px;
background-image: url(../img/minato.gif);
background-repeat: repeat-x;
background-position: left top;
padding-top: 60px;
margin-bottom: 50px;
color: aliceblue;
}
#headline2 {
height: 300px;
background-image: url(../img/naruto.gif);
background-repeat: no-repeat;
background-position: right top;
padding-top: 60px;
}
</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 latar belakang bisa diatur melalui css.
</div>
<div id="headline2">
Namun, tentu saja kegunaan CSS jauh lebih banyak dari pada hanya dilibatkan dalam dokumen web. kegunaannya adalah untuk memformat dokumen. sebagai contoh, warna teks atau bahkan warna latar belakang bisa diatur melalui css.
</div>
</body>
</html>
Hasil Kodingan di atas
a.EmbVideo.html
Contoh Kodingan Pemberian style pada video menggunakan CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<h1 style="color: orangered; text-align: center; font-family: consolas;">Ini Video Saya</h1>
<video controls style="display: block;
margin:auto; width:400px; height: 400px;">
<source src="../img/tg.mp4">
</video>
</body>
</html>
Hasil Kodingan di atas
b.EmbVideoYoutube.html
Contoh kodingan Pemberian style pada tag <iframe> yang mengimpor file dari youtube
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
.VideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16 : 9 */
padding-top: 25px;
height: 0;
}
.VideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%;
}
</style>
</head>
<body>
<div class="VideoWrapper">
<iframe width="420" height="315" src="https://www.youtube.com/embed/jtwcbqnJLGs"></iframe>
</div>
</body>
</html>
Hasil kodingan di atas
5. Pemberian Style pada Table di HTML menggunakan CSS
Sebelum memasuki pemberian style pada table sebaiknya kita mengetahui konsep dasar model box
Margin adalah daerah paling luar yang membatasi dengan elemen HTML yang lainnya. Border adalah garis yang mengelilingi padding dan content, border ini mempunyai warna,jenis,dan ketebalan. Padding adalah area yang mengelilingi content, warna padding dipengaruhi oleh background dari box. Content adalah isi dari box bisa berupa text maupun gambar.
a.EmbTableBorderCollapse.html
Contoh Kodingan Pemberian style pada table dengan CSS menggunakan property border-collapse yang berufngsi agar border lebih spesifikasi atau lebih jelas.
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI PRL 2</title>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid saddlebrown;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Davandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
Hasil kodingan di atas
Pemberian style dengan cara penulisan eksternal CSS
Kodingan HTML nya
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" href="eXTtablewithcss.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>Milea</td>
</tr>
<tr>
<td>Jonny</td>
<td>Greenwood</td>
</tr>
</table>
</body>
</html>
Kodingan CSS nya
table, th {
border: 2px solid orchid;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: violet;
}
td {
border: 1px solid hotpink;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: orchid;
}
Hasil Kodingan di atas
Kodingan HTML nya
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" href="eXTtablewithcss2.css">
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Alamat</th>
</tr>
<tr>
<td>Fahru</td>
<td>Rozi</td>
<td>JL.Subang 5 No 40</td>
</tr>
<tr>
<td>Umam</td>
<td>Arief</td>
<td>JL.Sukanegla No 14</td>
</tr>
<tr>
<td>Lutfi</td>
<td>Haritsyah</td>
<td>JL.Bumi Abdi No 3</td>
</tr>
</table>
</body>
</html>
Kodingan CSS nya
table,th,td {
border-top: 2px solid red;
border-right: 2px groove yellow;
border-left: 2px dashed greenyellow;
border-bottom: 2px dotted pink;
}
table {
width: 100%;
}
th {
height: 50px;
background-color: mediumorchid;
color: mintcream;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
Hasil Kodingan di atas
d.ExTableWithCSS3
Kodingan HTML nya
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" href="eXTtablewithcss3.css">
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
</tr>
<tr>
<td>Ariana</td>
<td>Grande</td>
<td>America</td>
</tr>
<tr>
<td>Upin</td>
<td>Ipin</td>
<td>Malaysia</td>
</tr>
<tr>
<td>Black</td>
<td>Panther</td>
<td>Wakanda</td>
</tr>
</table>
</body>
</html>
Kodingan CSS nya
table,th,td {
border: 1px solid blueviolet;
}
td {
background-color: aquamarine;
color: green;
text-align: right;
height: 30px;
vertical-align: middle;
padding-right: 10px;
}
th {
background-color: yellowgreen;
color: mediumspringgreen;
text-align: right;
height: 50px;
vertical-align: bottom;
padding: 15px;
}
Hasil Kodingan di atas
6. Praktikum
Setelah mempelajari Pemberian style dengan CSS kita melakukan praktikum
Kodingan Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style>
table {
background-color: grey;
border: 2px dashed blue;
}
a {
color: greenyellow;
}
td {
border: 3px inset blueviolet;
}
</style>
</head>
<body>
<table width="90%">
<tr style="background-color: lightseagreen;">
<th colspan="2" align="center" style="border-left: 2px dashed red; border-right: 2px dashed red; border-top: 2px dotted orange; border-bottom: 2px dotted orange;"><a href="">Pendaftaran Acara Porak SMKN 4 Bandung</a></th>
<th colspan="2" align="center" style="border-left: 2px dashed red; border-right: 2px dashed red; border-top: 2px dotted orange; border-bottom: 2px dotted orange;"><img src="../img/enter.gif" alt=""></th>
</tr>
<tr style="background-color: lime;">
<th width="50" style="border: 5px ridge cyan;"><i>No</i></th>
<th style="border: 5px ridge cyan"><i>Nama</i></th>
<th style="border: 5px ridge cyan"><i>Kelas</i></th>
<th style="border: 5px ridge cyan"><i>XI-RPL 2</i></th>
</tr>
<tr>
<td>1</td>
<td>Adji</td>
<td rowspan="7" colspan="2" align="r" width="40"><img src="../img/bsk.jpg" width="100%" alt=""></td>
</tr>
<tr>
<td>2</td>
<td>Bama</td>
</tr>
<tr>
<td>3</td>
<td>Chandra</td>
</tr>
<tr>
<td>4</td>
<td>Davit</td>
</tr>
<tr>
<td>5</td>
<td>Fajar</td>
</tr>
<tr>
<td>6</td>
<td>Hanif</td>
</tr>
<tr>
<td>7</td>
<td>Yusuf</td>
</tr>
</table>
</body>
</html>
Hasil Kodingan di atas
Saya menggunakan border dengan jenis dashed,dotted,inset, dan ridge.
Sekian Materi yang bisa saya sampaikan semoga bermanfaat terima kasih, Sampai Jumpa (:
0 Comments