LAPORAN PRAKTIKUM MATERI WEBSITE
MODUL 3
Cassading Sheet Style
Cassading Sheet Style
Oleh
· Aldini Vida Steivia
TKJ 8
SMK INDUSTRI AL KAAFFAH
Praktikum Ke-3
A. TUJUAN
1. Memahami komponen komponen CSS
2. Memiliki strategi penggunaan komponen CSS
3. Mamu menyelesaikan kasus kasus yang berhubngan dengan komponen CSS
B. HASIL TUGAS PRAKTIKUM
1. Studi Kasus
a. <html>
<html lang="en">
<head>
<title>Lingkaran</tittle>
<style type="text/css">
<!--
.circle {
background:yellow;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border: 2px solid #897048;
padding: 10px;
width: 180px;
height: 180px;
}
.blunder {
padding: 15px 15px 15px 15px;
width: 100px;
border: 2px;}
-->
<!--
.kotaklengkung {
background: red;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
padding:15px;
width:150px;
height:75px;
border: 2px solid #897048;}
-->
<!--
.shadow {
background: grey;
-moz-border-radius-topleft: 15px;
-moz-box-shadow: 10px 7px 5px;
-webkit-border-radius: 40px;
border: 2px solid #897048;
padding: 15px;
width: 150px;
height: 75px; }
-->
</style>
</head>
<body>
<div class="circle" align="center"><div class="blunder">
Border lingkaran, cocok untuk pemain bola, tapi sayang tidak bisa menggelinding sendiri
</div></div>
<br />
<div class="kotaklengkung" align="center">
Dalam kenyataan, pasti ada sesuatu yang lancip maupun yang tumpul,
seperti bangun ini
</div>
<br />
<div class="shadow" align="center">
Efek shadow, menggambarkan bayang-bayang ilusi....
Keren juga sih....
</div>
<br />
</body>
</html
b. Save dalam bentuk html
c. Buka script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
2. Tugas Praktikum
a. Masukkan script di bawah ini pada notepad++
<HTML>
<html lang="en">
<head>
<title>Face You</title>
</head>
<style type="text/css">
<!--header, footer{
background-color :turquoise;
}
header{
height : 100px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
}
#lebar{
width : 1000px;
}
footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : white;
font-family : Copper Black;
font-size : small;
font-weight : bold;
}
bg-color{
height : 410px;
background-image : url(bg.jpg);
background-color : white;
background-repeat : repeat-x;
}
login{
float : right;
color : white;
font-family : Calibri(body);
font-size : small;
}
#logo{
margin-top : 5px;
float : left;
height : 30px;
}
#kanan{
float: left;
padding: 5px;
width:200px;
height: 160px;
}
#tengah {
float: left;
}
#kiri {
float: left;
width: 200x;
height: 160px;
}
#imageface{
padding-top : 5px;
padding-bottom : 5px;
padding-left : 45px;
width: 350px;
height: 150px;
font-family : Comic San MS;
font-weight : bold;
color: #cf0707;
}
#huruf{
font-family : Comic San MS;
font-size : small;
font-weight : bold;
line-height : 35px;
color: #792323;
}
#klik_in{
background-color : #870b0b;
color : grey;
}
#button_daftar{
background-color : #870b0b;
color : grey;
}-->
</style>
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="you.jpg" height="50">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td> </td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="password"></td>
<td><input type="submit" value="Masuk" id="klik_in"></td>
</tr>
<tr>
<td height="15"><input type="checkbox">Ingat...</td>
<td height="15">Lupa kata sandi???(kasihan)</td>
<td height="15"> </td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-color">
<form>
<div id="tengah">
<div id="kiri">
<div id="imageface">
<font size="3">Face-You Just for Praktikum B P W Modul 3 </font>
<img src="you.jpg">
</div>
</div>
</div>
</form>
<div id="kanan">
<div id="huruf">
<h2>Akun Face-You GET FREE. </h2>
<hr style="color: turquoise">
<form>
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="40"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="40"></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="text" size="40"></td>
</tr>
<tr>
<td>Password Baru:</td>
<td><input type="password" size="40"></td>
</tr>
<tr>
<td>Ulangi Password :</td>
<td><input type="password" size="40"></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><select name="kelamin">
<option value="pria" selected>Laki-laki
<option value="wanita">Perempuan
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Get Now" id="button_daftar">
</div>
</div>
</div>
<div class="footer">
Created by : Aldn V Stva
<br>
Supported by : Ps CS5<br/>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Face You</title>
</head>
<style type="text/css">
<!--header, footer{
background-color :turquoise;
}
header{
height : 100px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
}
#lebar{
width : 1000px;
}
footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : white;
font-family : Copper Black;
font-size : small;
font-weight : bold;
}
bg-color{
height : 410px;
background-image : url(bg.jpg);
background-color : white;
background-repeat : repeat-x;
}
login{
float : right;
color : white;
font-family : Calibri(body);
font-size : small;
}
#logo{
margin-top : 5px;
float : left;
height : 30px;
}
#kanan{
float: left;
padding: 5px;
width:200px;
height: 160px;
}
#tengah {
float: left;
}
#kiri {
float: left;
width: 200x;
height: 160px;
}
#imageface{
padding-top : 5px;
padding-bottom : 5px;
padding-left : 45px;
width: 350px;
height: 150px;
font-family : Comic San MS;
font-weight : bold;
color: #cf0707;
}
#huruf{
font-family : Comic San MS;
font-size : small;
font-weight : bold;
line-height : 35px;
color: #792323;
}
#klik_in{
background-color : #870b0b;
color : grey;
}
#button_daftar{
background-color : #870b0b;
color : grey;
}-->
</style>
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="you.jpg" height="50">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td> </td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="password"></td>
<td><input type="submit" value="Masuk" id="klik_in"></td>
</tr>
<tr>
<td height="15"><input type="checkbox">Ingat...</td>
<td height="15">Lupa kata sandi???(kasihan)</td>
<td height="15"> </td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-color">
<form>
<div id="tengah">
<div id="kiri">
<div id="imageface">
<font size="3">Face-You Just for Praktikum B P W Modul 3 </font>
<img src="you.jpg">
</div>
</div>
</div>
</form>
<div id="kanan">
<div id="huruf">
<h2>Akun Face-You GET FREE. </h2>
<hr style="color: turquoise">
<form>
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="40"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="40"></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="text" size="40"></td>
</tr>
<tr>
<td>Password Baru:</td>
<td><input type="password" size="40"></td>
</tr>
<tr>
<td>Ulangi Password :</td>
<td><input type="password" size="40"></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><select name="kelamin">
<option value="pria" selected>Laki-laki
<option value="wanita">Perempuan
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Get Now" id="button_daftar">
</div>
</div>
</div>
<div class="footer">
Created by : Aldn V Stva
<br>
Supported by : Ps CS5<br/>
</div>
</body>
</html>
b. Save dalam bentuk html
c. Buka script pada browser dan pastikan muncul dalam bentuk seperti di bawah ini
Tidak ada komentar:
Posting Komentar