STUDI KASUS
script<!DOCTYPE html>
<html lang="en">
<head>
<title>Studi Kasus Border</title>
<style type="text/css">
<!--
.round{
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-khtml-border-radius: 100px;
-ms-border-radius: 100px;
-chrome-border-radius: 100px;
background-color: yellow;
border: 2px solid black;
padding: 5px;
width: 150px;
height:150px;
}
.round1{
-moz-border-radius-topleft:25px 25px;
-moz-border-radius-bottomright:25px 25px;
-webkit-border-radius-topleft:25px 25px;
-webkit-border-radius-bottomright:25px 25px;
-o-border-radius-topleft:25px 25px;
-o-border-radius-bottomright:25px 25px;
-khtml-border-radius-topleft:25px 25px;
-khtml-border-radius-bottomright:25px 25px;
-ms-border-radius-topleft:25px 25px;
-ms-border-radius-bottomright:25px 25px;
-chrome-border-radius-topleft:25px 25px;
-chrome-border-radius-bottomright:25px 25px;
background-color:white;
border:4px solid green;
padding:10px;
width: 400px;
height:40px;
}
.round2 {
-moz-box-shadow:10px 10px 10px black;
-webkit-box-shadow:10px 10px 10px black;
-o-box-shadow:10px 10px 10px black;
-khtml-box-shadow:10px 10px 10px black;
-ms-box-shadow:10px 10px 10px black;
-chrome-box-shadow:10px 10px 10px black;
background-color:white;
border:2px solid red;
padding:5px;
width: 400px;
height:40px;
}
-->
</style>
</head>
<body>
<div class="round" align="center">
<br>
Yang ini border lingkaran. Pendekatan yang digunakan masih sama lho.
Ayo, kreasikan sendiri ya??
</div>
<br/>
<div class="round1">
Bisa juga bikin kreasi border seperti ini.<br>
Mmmmm....!!!
</div>
<br/>
<div class="round2">
Kalau yang ini semacam efek shadow.<br>
Keren kan?
</div>
</body>
</html>
Screenshot
TUGAS PRAKTIKUM
script
html (script)
<!DOCTYPE htmlpublic "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<title>Selamat Datang di Face-mu</title>
<link rel="shortcut icon" href="icon.png"/>
<style type="text/css">
<!--
.header{
background-color:RoyalBlue;
padding: 15px;
height: 55px;
}
.content{
background-image:url(bg.jpg);
padding: 15px;
height: 457px;
}
.footer{
background-color:RoyalBlue;
padding: 1px;
height: 25px;
}
.font{
font-family: Arial, Helvetica, sans-serif;
color: RoyalBlue;
}
.font2{
font-family: Arial, Helvetica, sans-serif;
color: RoyalBlue;
font-size: 12px;
}
.font3{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: RoyalBlue;
font-weight: bold;
}
.font4{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.font5{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: RoyalBlue;
font-weight: bold;
}
.font6{
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 12px;
}
.font7{
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 11px;
}
.button-daftar{
-moz-border-radius-topleft:5px 5px;
-moz-border-radius-topright:5px 5px;
-moz-border-radius-bottomleft:5px 5px;
-moz-border-radius-bottomright:5px 5px;
-webkit-border-radius-topleft:5px 5px;
-webkit-border-radius-topright:5px 5px;
-webkit-border-radius-bottomleft:5px 5px;
-webkit-border-radius-bottomright:5px 5px;
-o-border-radius-topleft:5px 5px;
-o-border-radius-topright:5px 5px;
-o-border-radius-bottomleft:5px 5px;
-o-border-radius-bottomright:5px 5px;
-khtml-border-radius-topleft:5px 5px;
-khtml-border-radius-topright:5px 5px;
-khtml-border-radius-bottomleft:5px 5px;
-khtml-border-radius-bottomright:5px 5px;
-ms-border-radius-topleft:5px 5px;
-ms-border-radius-topright:5px 5px;
-ms-border-radius-bottomleft:5px 5px;
-ms-border-radius-bottomright:5px 5px;
-chrome-border-radius-topleft:5px 5px;
-chrome-border-radius-topright:5px 5px;
-chrome-border-radius-bottomleft:5px 5px;
-chrome-border-radius-bottomright:5px 5px;
background-color: RoyalBlue;
border: 1px solid white;
padding: 0px;
width: 100px;
height:25px;
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 12px;
font-weight: bold;
}
.button-masuk{
-moz-border-radius-topleft:5px 5px;
-moz-border-radius-topright:5px 5px;
-moz-border-radius-bottomleft:5px 5px;
-moz-border-radius-bottomright:5px 5px;
-webkit-border-radius-topleft:5px 5px;
-webkit-border-radius-topright:5px 5px;
-webkit-border-radius-bottomleft:5px 5px;
-webkit-border-radius-bottomright:5px 5px;
-o-border-radius-topleft:5px 5px;
-o-border-radius-topright:5px 5px;
-o-border-radius-bottomleft:5px 5px;
-o-border-radius-bottomright:5px 5px;
-khtml-border-radius-topleft:5px 5px;
-khtml-border-radius-topright:5px 5px;
-khtml-border-radius-bottomleft:5px 5px;
-khtml-border-radius-bottomright:5px 5px;
-ms-border-radius-topleft:5px 5px;
-ms-border-radius-topright:5px 5px;
-ms-border-radius-bottomleft:5px 5px;
-ms-border-radius-bottomright:5px 5px;
-chrome-border-radius-topleft:5px 5px;
-chrome-border-radius-topright:5px 5px;
-chrome-border-radius-bottomleft:5px 5px;
-chrome-border-radius-bottomright:5px 5px;
background-color: RoyalBlue;
border: 1px solid white;
padding: 0px;
width: 50px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 11px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="header">
<img src="facemu.png" align="left"/>
<form action="" method="post">
<table border=0 align="right">
<tr>
<td><span class="font6">E-mail :</span></td>
<td>
<span class="font6">Password :</span></td>
<tr><td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td><input type="submit" value="Masuk"
class="button-masuk"/></td>
</tr>
</tr>
<tr>
<td>
<input type="checkbox">
<span class="font7">Biarkan saya tetap masuk</span>
</td>
<td>
<span class="font7"><u>Lupa kata sandi Anda?</u></span>
</td>
</tr>
</table>
</div>
<div class="content">
<img src="face-mu6.png" align="left"/>
<h1><span class="font">Mendaftar</span></h1>
<span class="font">Gratis, sampai kapanpun</span>
<hr align="left" width="310" color="RoyalBlue"/>
<form action="" method="post">
<table border=0>
<tr>
<td><span class="font2">Nama Depan</span></span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Nama Belakang</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">E-mail Anda</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Masukkan Ulang E-mail
      </span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Kata Sandi Baru</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Saya Seorang</span></td>
<td>
<select name="Jenis Kelamin"/>
<option>Pria</option>
<option>Wanita</option></select>
</td>
</tr>
<tr>
<td><span class="font2">Tanggal Lahir</span></td>
<td>
<select name="Tanggal"/>
<option>01</option><option>02</option><option>03</option>
<option>04</option><option>05</option><option>06</option>
<option>07</option><option>08</option><option>09</option>
<option>10</option><option>11</option><option>12</option>
<option>13</option><option>14</option><option>15</option>
<option>16</option><option>17</option><option>18</option>
<option>19</option><option>20</option><option>21</option>
<option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27</option>
<option>28</option><option>29</option><option>30</option>
<option>31</option>
</select>
<select name="Bulan"/>
<option>Jan</option><option>Feb</option><option>Mar</option>
<option>Apr</option><option>Mei</option><option>Jun</option>
<option>Jul</option><option>Agu</option><option>Sep</option>
<option>Okt</option><option>Nov</option><option>Des</option>
</select>
<select name="Tahun"/>
<option>'94</option><option>'93</option><option>'92</option>
<option>'91</option><option>'90</option><option>'89</option>
<option>'88</option><option>'87</option><option>'86</option>
<option>'85</option><option>'84</option><option>'83</option>
<option>'82</option><option>'81</option><option>'80</option>
<option>'79</option><option>'78</option><option>'77</option>
<option>'76</option><option>'75</option><option>'74</option>
<option>'73</option><option>'72</option><option>'71</option>
<option>'70</option><option>'69</option><option>'68</option>
<option>'67</option><option>'66</option><option>'65</option>
<option>'64</option><option>'63</option><option>'62</option>
<option>'61</option><option>'60</option><option>...</option>
</select>
</td>
</tr>
<tr>
<td><td>
<span class="font5">Mengapa saya perlu mengisinya?
</span></td></td>
</tr>
<tr>
<td><td>
<input type="submit" value="Mendaftar" class="button-daftar"/>
</td></td>
</tr>
</table>
<hr align="left" width="310" color="RoyalBlue"/>
<tr align="center"><span class="font3">Buat halaman</span>
<span class="font4">untuk selebritis, grup musik, atau bisnis
</span></tr>
</div>
<div class="footer">
<span class="font6">
Face-mu © 2011 - bang_hendri Production
</span>
</div>
</body>
</html>
Screenshot
Tidak ada komentar:
Posting Komentar