Chyul's Zone: Tugas Modul 3 Praktikum Web

Tugas Rumah

code.css

#atas{<br /> height:100px;<br /> background-color:#3366cc;}<br /> <br /> #facemu{<br /> float:left;<br /> height:100px;<br /> width:350px;<br /> padding-left:100px;<br /> padding-top:20px;<br /> }<br /> <br /> #kanan{<br /> padding-top:20px;<br /> padding-right:100px;<br /> float:right;<br /> }<br /> <br /> #tombol{<br /> background-color:#4f1cf5;<br /> color:#ffffff;<br /> }<br /> <br /> #tengah{<br /> height:500px;<br /> background-image:URL(bg.jpg);<br /> }<br /> <br /> #bawah{<br /> padding-left:5px;<br /> padding-top:15px;<br /> height:40px;<br /> background-color:#3366cc;}<br />

facemu.html

<!DOCTYPE html> <br /> <html lang="en"><br /> <head><br />   <title>Design Layout face-mu </title><br />   <link rel="stylesheet" href="code.css" type="text/css" /><br />   <link rel="icon" href="icon.png" type="image/x-icon" /><br />   <div id="atas">  <div id="facemu">  <font color="white" face="calibri" size=8><b> face-mu </b></font><br />   </div>  <div id="kanan">  <font color="white" face="cambria" size=2><br />   <table>  <tr>   <td>Email </td>   <td>Password </td>   </tr>     <tr>   <td><br />   <input type="text" maxlength=23><br />   </td>   <td><br />   <input type="password" maxlength=23><br />   </td>   <td><input id="tombol" type="submit" maxlength=8 value="Log In" color="#ffffff"></td>   </tr>   <tr>   <td><input type="checkbox" checked>Keep Me Logged In</td>   <td>Forgot Your Password?</td>   </tr>   </table>  </font><br />   </div>  </div> </head><br />  <body><br />  <div id="tengah"> </div> <div id="bawah"> <font color="white" face="cambria" size=3><br />  <center>face-mu © 2011 - Zulfa Rumailah<br />  <br>109533414510-S1 PTI 2009 A</center><br />  </font><br />  </div> </body><br />  </html>

screenshot

Studi Kasus

studikasus.css

.lingkaran{<br />  width : 200px;<br />  height : 200px;<br />  -moz-border-radius : 100px;<br />  -webkit-border-radius : 100px;<br />  border : 2px solid #000000;<br />  background-color : #c0c0c0;<br /> }<br /> <br /> #dalam-lingkaran{<br />  text-align : center;<br />  position : relative;<br />  border : none;<br />  width : 100px;<br />  heigth : 100px<br /> } <br /> <br /> .daun{<br />  padding : 10px;<br />  border : 5px solid #008000;<br />  width : 500px;<br />  height : 50px;<br />  border-bottom-left-radius : 50px;<br />  border-top-right-radius : 50px;<br /> }<br /> <br /> .bayangan{<br />  padding : 10px;<br />  border : 2px solid #000000;<br />  -moz-box-shadow : 5px 5px 8px rgba(255,0,255,1);<br />  -webkit-box-shadow : -5px -5px 3px rgba (255,0,0,0.5);<br />  width : 500px;<br />  height : 30px;<br /> }

studikasus.html

<!DOCTYPE html><br /> <html lang="en"><br />     <head><br />         <title>Studi Kasus CSS</title><br />         <link href="studikasus.css" rel="stylesheet" type="text/css"><br />     </head><br />     <body><br />         <div class="lingkaran" align="center">            <p id="dalam-lingkaran">Paragraf ini tetap berada di dalam lingkaran </p>        </div>        <br><br />         <div class="daun">Border Menyerupai Daun </div>        <br><br />         <div class="bayangan">Efek Bayangan pada border persegi panjang</div>    <br />  <br><br />  Zulfa Rumailah - 109533414520<br />  PTI 2009 A<br />  </body><br /> </html>

Screenshot