Dengan menggunakan Cascading Style Web, tampilan layout web akan semakin menarik dan elagan.
Inilah contoh yang sangat sederhana dari tampilan halaman web yang mengunakan pendekatan CSS
Dan inilah sourch codenya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>FACE-MU by mianapti.blogspot</title>
<link rel ="shortcut icon" href="http://localhost/ICON/icon.png">
<style type="text/css">
#top{
height: 100px;
background: limegreen;
}
#down {
float:left;
clear: both;
width: 1260px;
height: 30px;
background: limegreen;
margin :22px 0;
}
#logo{
float: left;
padding-left: 80px;
padding-top: 20px;
}
.kotak1 {
float: right;
padding: 5px;
height: 100px;
}
.kotak2 {
float: right;
padding: 5px;
height: 100px;
}
.kotak3 {
}
.kotak4 {
width : 1300px;
height: 18px;
background:#4169Ei;
color : limegreen
}
#tengah {
float: left;
}
#ratakiri {
float: left;
width: 680px;
height: 380px;
}
#subkiri{
width: 400px;
height: 200px;
padding: 40px;
color: limegreen;
}
#ratakanan {
float: left;
padding: 5px;
width: 370px;
height: 380px;
color: limegreen;
}
#bottom {
clear: both;
height: 40px;
background: limegreen;
font-size:6px;
color: limegreen;
}
</style>
</head>
<background color ="lime">
<body>
<div id="logo">
<img width="180"src="http://localhost/ICON/facemu.png">
</div>
<div id="top">
<div class="kotak2">
<br><input type="button" value="Log In">
</div>
<div class="kotak1">
Password <br><input type="text" size="25">
<br>Forgot password?
</div>
<div class="kotak1">
Username or Email<br><input type="text" size="25">
<br><input type="checkbox">Keep me log in
</div>
</div>
<div id="tengah">
<div id="ratakiri">
<div id="subkiri">
<font size="5" color="limegreen">Face-Mu membantu anda untuk terhubung dan berbagi dengan orang - orang dalam kehidupan anda diindonesia</font>
<br>
<p>
<img src="http://localhost/images/peta-indonesia.gif">
</div>
</div>
</div>
<div id="ratakanan">
<h2>Mendaftar GRATIS, Sampai kapanpun <img width="30"></h2>
<hr style="color: limegreen">
<table>
<tr><td>Nama Depan :</td><td><input type="text" size="35"></td></tr>
<tr><td>Nama Belakang :</td><td><input type="text" size="35"></td></tr>
<tr><td>Email Anda :</td><td><input type="text" size="35"></td></tr>
<tr><td>Masukkan Ulang email :</td><td><input type="text" size="35"></td></tr>
<tr><td>Kata Sandi Baru :</td><td><input type="text" size="35"></td></tr>
<tr><td>Jenis Kelamin :</td><td>
<select name="kelamin">
<option value="pria">Pria
<option value="wanita">Wanita
</select></td></tr>
<tr><td>Tanggal lahir :</td><td>
<select name="tanggal">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
<select name="bulan">
<option value="januari">Januari
<option value="februari">Februari
<option value="maret">Maret
<option value="april">April
<option value="mei">Mei
<option value="juni">Juni
<option value="juli">Juli
<option value="agustus">Agustus
<option value="september">September
<option value="oktober">Oktober
<option value="november">November
<option value="desember">Desember
<select name="tahun">
<option value="1990">1990
<option value="1991">1991
<option value="1992">1992
<option value="1993">1993
<option value="1994">1994
<option value="1995">1995
<option value="1996">1996
<option value="1997">1997
<option value="1998">1998
</select></td></tr>
</table>
<hr style="color: limegreen">
<br><input type="button" value="DAFTAR"></br>
</div>
<div id="down">
Face-Mu by © Mianapti.blogspot.com
</body>
</html>
<html lang="en">
<head>
<title>FACE-MU by mianapti.blogspot</title>
<link rel ="shortcut icon" href="http://localhost/ICON/icon.png">
<style type="text/css">
#top{
height: 100px;
background: limegreen;
}
#down {
float:left;
clear: both;
width: 1260px;
height: 30px;
background: limegreen;
margin :22px 0;
}
#logo{
float: left;
padding-left: 80px;
padding-top: 20px;
}
.kotak1 {
float: right;
padding: 5px;
height: 100px;
}
.kotak2 {
float: right;
padding: 5px;
height: 100px;
}
.kotak3 {
}
.kotak4 {
width : 1300px;
height: 18px;
background:#4169Ei;
color : limegreen
}
#tengah {
float: left;
}
#ratakiri {
float: left;
width: 680px;
height: 380px;
}
#subkiri{
width: 400px;
height: 200px;
padding: 40px;
color: limegreen;
}
#ratakanan {
float: left;
padding: 5px;
width: 370px;
height: 380px;
color: limegreen;
}
#bottom {
clear: both;
height: 40px;
background: limegreen;
font-size:6px;
color: limegreen;
}
</style>
</head>
<background color ="lime">
<body>
<div id="logo">
<img width="180"src="http://localhost/ICON/facemu.png">
</div>
<div id="top">
<div class="kotak2">
<br><input type="button" value="Log In">
</div>
<div class="kotak1">
Password <br><input type="text" size="25">
<br>Forgot password?
</div>
<div class="kotak1">
Username or Email<br><input type="text" size="25">
<br><input type="checkbox">Keep me log in
</div>
</div>
<div id="tengah">
<div id="ratakiri">
<div id="subkiri">
<font size="5" color="limegreen">Face-Mu membantu anda untuk terhubung dan berbagi dengan orang - orang dalam kehidupan anda diindonesia</font>
<br>
<p>
<img src="http://localhost/images/peta-indonesia.gif">
</div>
</div>
</div>
<div id="ratakanan">
<h2>Mendaftar GRATIS, Sampai kapanpun <img width="30"></h2>
<hr style="color: limegreen">
<table>
<tr><td>Nama Depan :</td><td><input type="text" size="35"></td></tr>
<tr><td>Nama Belakang :</td><td><input type="text" size="35"></td></tr>
<tr><td>Email Anda :</td><td><input type="text" size="35"></td></tr>
<tr><td>Masukkan Ulang email :</td><td><input type="text" size="35"></td></tr>
<tr><td>Kata Sandi Baru :</td><td><input type="text" size="35"></td></tr>
<tr><td>Jenis Kelamin :</td><td>
<select name="kelamin">
<option value="pria">Pria
<option value="wanita">Wanita
</select></td></tr>
<tr><td>Tanggal lahir :</td><td>
<select name="tanggal">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
<select name="bulan">
<option value="januari">Januari
<option value="februari">Februari
<option value="maret">Maret
<option value="april">April
<option value="mei">Mei
<option value="juni">Juni
<option value="juli">Juli
<option value="agustus">Agustus
<option value="september">September
<option value="oktober">Oktober
<option value="november">November
<option value="desember">Desember
<select name="tahun">
<option value="1990">1990
<option value="1991">1991
<option value="1992">1992
<option value="1993">1993
<option value="1994">1994
<option value="1995">1995
<option value="1996">1996
<option value="1997">1997
<option value="1998">1998
</select></td></tr>
</table>
<hr style="color: limegreen">
<br><input type="button" value="DAFTAR"></br>
</div>
<div id="down">
Face-Mu by © Mianapti.blogspot.com
</body>
</html>
Tidak ada komentar:
Posting Komentar
anybody yang mau komentar no problem, gak masalah smua .
monggo komentar. . . . .