MEMBUAT DESAIN HEADER WEB MEMANFAATKAN CSS
CSS merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Disini saya akan membuat contoh tampilan dari facebook dengan menggunakan css dan html.
CSS merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Disini saya akan membuat contoh tampilan dari facebook dengan menggunakan css dan html.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Selamat Datang di Face-mu - Masuk, Daftar atau Pelajari Selengkapnya</title>
<link rel="Shortcut Icon" href="file:///D:/wamp/www/latihan3/icon.png">
<style type="text/css">
<!--
.satu {
background-color: royalblue;
padding: 15px;
height: 50px;
}
.dua {
background-image: url(images/bg.jpg);
padding: 15px;
height: 340px;
}
.tiga {
background-color: royalblue;
padding: 1px;
height: 30px;
}
.mendaftar {
position: absolute;
left: 760px;
top: 80px;
padding: 15px;
height: 450px;
width: 450px;
}
.namadepan {
position: absolute;
left: 760px;
top: 140px;
padding: 15px;
height: 250px;
width: 100px;
}
.kotaknamdep {
line-height: 11px;
position: absolute;
top: 140px;
left: 900px;
padding: 15px;
height: 250px;
width: 250px;
}
.email {
position: absolute;
top: 10px;
right: 400px;
padding: 15px;
height: 28px;
width: 170px;
}
.password {
position: absolute;
right: 100px;
top: 10px;
padding: 15px;
height: 28px;
width: 300px;
}
.masuk {
background-color: royalblue;
position: absolute;
top: 40px;
right: 200px;
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
-moz-box-shadow: 0px 2px 2px black;
border: 1px groove white;
height: 18px;
width: 50px;
}
.daftar {
background-color: royalblue;
position: absolute;
left: 900px;
top: 465px;
padding: 5px;
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-moz-box-shadow: 0px 2px 2px black;
border: 1px groove white;
height: 10px;
width: 100px;
}
-->
</style>
</head>
<body>
<div class="satu">
<img src = "facemu.png">
</div>
<br />
<div class="email">
<font face="Tahoma" size="2" color="white">Email:</br>
<input type="text" name="nama"></br>
<input type="checkbox" name="check">
<font face="Tahoma" size="1" color="white"><SUP>Biarkan saya tetap masuk</sup></font></font><br/>
</div>
<div class="password">
<font face="Tahoma" size="2" color="white">Password:</br>
<input type="text" name="pasword"></br>
<font face="Tahoma" size="1" color="white">Lupa kata sandi Anda?</font></font>
</div>
<div class="masuk" align="center">
<font face="Tahoma" size="2" color="black">
<b style="text-shadow: black 0px 0px 3px; color:white;">Masuk</b></font>
</div>
<div class="dua">
<body background = "bg.jpg">
<font color = "royalblue"><font size = "5">Face-mu membantu Anda terhubung dan terbagi
<br>dengan orang-orang dalam kehidupan Anda di
<br>Indonesia
</font>
<br><img src = "peta.png" width="600" height="200" />
</div>
<br />
<div class="mendaftar" >
<font face="Tahoma" size="4" color="royalblue">
<b>Mendaftar</b></font></br>
<font face="Tahoma" size="3" color="royalblue">Gratis, sampai kapanpun</font>
<hr color="royalblue"/>
</div>
<div class="namadepan" align="right">
<font face="Tahoma" size="2" color="royalblue">
Nama Depan: </br></br>
Nama Belakang: </br></br>
Email Anda: </br></br>
Masukkan Ulang Email:</br></br>
Kata Sandi Baru: </br></br>
Saya Seorang: </br></br>
Tanggal Lahir:</br></br></font>
</div>
<div class="kotaknamdep">
<input type="text" name="namadepan"></br></br></br>
<input type="text" name="namabelakang"></br></br></br>
<input type="text" name="email"></br></br></br>
<input type="text" name="katasandi"></br></br></br>
<input type="text" name="katasandibaru"></br></br></br>
<select name="pilihan"> <option value="Pria">Pria</option><option value="Wanita">Wanita</option></select></br></br></br>
<select name="tgl"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option> </select>
<select name="bln"> <option value="januari">januari</option>
<option value="februari">februari</option>
<option value="maret">maret</option>
<option value="april">april</option>
<option value="mei">mei</option>
<option value="juni">juni</option>
<option value="juli">juli</option>
<option value="agustus">agustus</option>
<option value="septembet">september</option>
<option value="oktober">oktober</option>
<option value="nopember">nopember</option>
<option value="desember">desember</option></select>
<select name="thn"> <option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option> </select></br></br>
<font face="Tahoma" size="1" color="royalblue">Mengapa saya perlu mengisinya?</font></br>
</div>
<div class="daftar" align="center" valign="middle">
<font face="Tahoma" SIZE="2" color="black">
<b style="text-shadow: black 0px 0px 3px; color:white;">
Mendaftar</b></font>
</div>
<div class="tiga">
<font color = "white">Face-mu c 2011 - Tia Production
</div>
</body>
</html>
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Selamat Datang di Face-mu - Masuk, Daftar atau Pelajari Selengkapnya</title>
<link rel="Shortcut Icon" href="file:///D:/wamp/www/latihan3/icon.png">
<style type="text/css">
<!--
.satu {
background-color: royalblue;
padding: 15px;
height: 50px;
}
.dua {
background-image: url(images/bg.jpg);
padding: 15px;
height: 340px;
}
.tiga {
background-color: royalblue;
padding: 1px;
height: 30px;
}
.mendaftar {
position: absolute;
left: 760px;
top: 80px;
padding: 15px;
height: 450px;
width: 450px;
}
.namadepan {
position: absolute;
left: 760px;
top: 140px;
padding: 15px;
height: 250px;
width: 100px;
}
.kotaknamdep {
line-height: 11px;
position: absolute;
top: 140px;
left: 900px;
padding: 15px;
height: 250px;
width: 250px;
}
.email {
position: absolute;
top: 10px;
right: 400px;
padding: 15px;
height: 28px;
width: 170px;
}
.password {
position: absolute;
right: 100px;
top: 10px;
padding: 15px;
height: 28px;
width: 300px;
}
.masuk {
background-color: royalblue;
position: absolute;
top: 40px;
right: 200px;
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
-moz-box-shadow: 0px 2px 2px black;
border: 1px groove white;
height: 18px;
width: 50px;
}
.daftar {
background-color: royalblue;
position: absolute;
left: 900px;
top: 465px;
padding: 5px;
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-moz-box-shadow: 0px 2px 2px black;
border: 1px groove white;
height: 10px;
width: 100px;
}
-->
</style>
</head>
<body>
<div class="satu">
<img src = "facemu.png">
</div>
<br />
<div class="email">
<font face="Tahoma" size="2" color="white">Email:</br>
<input type="text" name="nama"></br>
<input type="checkbox" name="check">
<font face="Tahoma" size="1" color="white"><SUP>Biarkan saya tetap masuk</sup></font></font><br/>
</div>
<div class="password">
<font face="Tahoma" size="2" color="white">Password:</br>
<input type="text" name="pasword"></br>
<font face="Tahoma" size="1" color="white">Lupa kata sandi Anda?</font></font>
</div>
<div class="masuk" align="center">
<font face="Tahoma" size="2" color="black">
<b style="text-shadow: black 0px 0px 3px; color:white;">Masuk</b></font>
</div>
<div class="dua">
<body background = "bg.jpg">
<font color = "royalblue"><font size = "5">Face-mu membantu Anda terhubung dan terbagi
<br>dengan orang-orang dalam kehidupan Anda di
<br>Indonesia
</font>
<br><img src = "peta.png" width="600" height="200" />
</div>
<br />
<div class="mendaftar" >
<font face="Tahoma" size="4" color="royalblue">
<b>Mendaftar</b></font></br>
<font face="Tahoma" size="3" color="royalblue">Gratis, sampai kapanpun</font>
<hr color="royalblue"/>
</div>
<div class="namadepan" align="right">
<font face="Tahoma" size="2" color="royalblue">
Nama Depan: </br></br>
Nama Belakang: </br></br>
Email Anda: </br></br>
Masukkan Ulang Email:</br></br>
Kata Sandi Baru: </br></br>
Saya Seorang: </br></br>
Tanggal Lahir:</br></br></font>
</div>
<div class="kotaknamdep">
<input type="text" name="namadepan"></br></br></br>
<input type="text" name="namabelakang"></br></br></br>
<input type="text" name="email"></br></br></br>
<input type="text" name="katasandi"></br></br></br>
<input type="text" name="katasandibaru"></br></br></br>
<select name="pilihan"> <option value="Pria">Pria</option><option value="Wanita">Wanita</option></select></br></br></br>
<select name="tgl"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option> </select>
<select name="bln"> <option value="januari">januari</option>
<option value="februari">februari</option>
<option value="maret">maret</option>
<option value="april">april</option>
<option value="mei">mei</option>
<option value="juni">juni</option>
<option value="juli">juli</option>
<option value="agustus">agustus</option>
<option value="septembet">september</option>
<option value="oktober">oktober</option>
<option value="nopember">nopember</option>
<option value="desember">desember</option></select>
<select name="thn"> <option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option> </select></br></br>
<font face="Tahoma" size="1" color="royalblue">Mengapa saya perlu mengisinya?</font></br>
</div>
<div class="daftar" align="center" valign="middle">
<font face="Tahoma" SIZE="2" color="black">
<b style="text-shadow: black 0px 0px 3px; color:white;">
Mendaftar</b></font>
</div>
<div class="tiga">
<font color = "white">Face-mu c 2011 - Tia Production
</div>
</body>
</html>
0 komentar:
Posting Komentar