IT SITE

to the point ajah yow...
this is the examples, n source codenya:

<em><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Queen's Cafe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>

<!fungsi matematis tabel>
<script language = "JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<h2 style="text-align:center; color: black;" class="style1" >QUEEN's Cafe </h2>
<form name="formcafe" action="#">
<table width="480" border="2" align="center" style="border-">
<tr bgcolor="violet">
<th><span class="style10">No</span></th>
<th><span class="style10">Daftar Menu </span></th>
<th><span class="style10">Harga</span></th>
<th><span class="style10">Order</span></th>
</tr>
<tr>
<td width="27"><div style="text-align:center"><strong>1.</strong></div></td>
<td width="181"><strong>Bakso</strong></td>
<td width="118" ><strong>@
<input type="text" name="ba" value="5000" size="10" disabled="disabled">
</strong></td>
<td width="124" ><input name="soaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:violet">
<td><div style="text-align:center"><strong>2.</strong></div></td>
<td><strong>Rokok</strong></td>
<td><strong>@
<input type="text" name="rok" value="10000" size="10" disabled="disabled">
</strong></td>
<td><input name="rokokaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr>
<td><div style="text-align:center"><strong>3.</strong></div></td>
<td><strong>Minuman </strong></td>
<td><strong>@
<input type="text" name="mb" value="5000" size="10" disabled="disabled">
</strong></td>
<td><input name="minaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:violet">
<td><div style="text-align:center"><strong>4.</strong></div></td>
<td><strong>Kue</strong></td>
<td><strong>@
<input type="text" name="ku" value="2500" size="10" disabled="disabled">
</strong></td>
<td><input name="kueaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr>
<td><div style="text-align:center"><strong>5.</strong></div></td>
<td><strong>Mie</strong></td>
<td><strong>@
<input type="text" name="mi" value="6000" size="10" disabled="disabled">
</strong></td>
<td><input name="mieaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:blue">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Total </strong></div>
</div></td>
<td><input name="TotalBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
<tr style="background-color:blue">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Diskon )*</strong></div>
</div></td>
<td><input name="Diskon" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
<tr style="background-color:yellow">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Jumlah Pembayaran </strong></div>
</div></td>
<td><input name="JumlahBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
</table>
<p style="text-align:center"> </p>
<p style="text-align:center"><span class="style14">)* </span><span class="style15">:<span class="style16"> <span class="style17">Menunjukkan Jumlah potongan dikarenakan Pemesanan telah melebihi Rp. 50.000,00. Potongan tidak berlaku kelipata</span>n</span></span> <br/>
</p>
<div id="Layer1" style="position:absolute; width:63px; height:23px; z-index:1; left: 600px; top: 326px;">
<input name="button" type="button" onclick="start()" value="B A T A L" size="15">
</div>
</form>
</body>
</html>

</em>

let's get it.....good luck!

hem ne contoh dasar web dengan CSS.
nah kite buat dulu CSSnya=>
#wrapper {
margin: auto;
width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#aaaa {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#top{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}

abiz ntuh ne programnya=>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Desain Layout Halaman Web</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
Header</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="aaaa">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>

</body>
</html>

nah ini baru aplikasinya, upz contoh dikit waelah...
CSS=>
#wrapper {
margin: auto;
width: 1000px;
border: 0;
}
#header {
height:120px;
border: 1px solid blue;
margin-bottom:2px;
background:blue url('header2.jpg');
}
#logo {
float: left;
height: 63px;
width: 61px;
margin-top:20px;
margin-left:50px;
border: 0;
background:red url('logo.jpg');
}
#Elektro {
float:left;
height: 35px;
width:300px;
margin-top:35px;
margin-left:5px;
}
#depan {
float: right;
height: 120;
width:400px;
border: 0;
}
#atas {
float: left;
height:25px;
width:350px;
margin-left:30px;
margin-top:2px;
border: 0;
}
#search {
clear:both;
float: right;
height: 20px;
width:300px;
margin-top:67px;
margin-right:20px;
border: 0;
}
#search1 {
float: left;
height: 15px;
width:120px;
margin-left:50px;
margin-top:4px;
border: 0;
}
#search2 {
float: right;
height: 17px;
width:110px;
margin-right:2px;
margin-top:4px;
border: 1px solid white;
background:white;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
margin-right: 0px;
width: 250px;
height:420px;
border: 1px solid blue;
background:blue url('sidebar.jpg');
}
#Inner2 {
float: left;
width: 745px;
height: 420px;
border: 0;
}
#top{
height: 80px;
border: 0;
background:blue url('header5.jpg');
}
#content {
float: left;
margin-top:10px;
margin-right:15px;
margin-left:15px;
width: 460px;
height: 323px;
border: 0;
}

#Rightbot {
float: left;
width: 250px;
height: 26px;
margin-top:10px;
border: 0;
list-style-position:inside;
}
#footer {
clear: both;
height: 80px;
border: 1px solid blue;
background:blue url('footer.jpg');
}
.style2 {
font-size: 24px;
font-weight: bold;
color: #000099;
}
.style3 {
color: #0000CC;
font-weight: bold;
}
.style4 {
font-family: "Times New Roman", Times, serif;
font-size: xx-large;
color: #FFFFFF;
font-weight: bold;
}
.style6 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
.style7 {color: #FFFFFF}
.style8 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
.style10 {
color: #FFFFFF; font-size: 12px;
}
.style11 {
color: #000066;
font-weight: bold;
}
#leftmenu ul {
width: 250px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: blue url('button.jpg');
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #000066 no-repeat left center; color: #ffffff
}

nah ne programnya=>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Layout UM</title>
<link rel="stylesheet" href="mystyle2.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo.jpg">
</div>
<div class="style4" id="Elektro">TEKNIK ELEKTRO
</div>
<div id="depan">
<div class="style6" id="atas">
<div align="right" class="style7"><a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Home</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Sitemap</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">RSS</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Contact</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">About Us</a> </div>
</div>
<div id="search">
<div class="style7" id="search1">
<div align="right"><em><strong>
Search
</strong></em></div>
</div>
<div id="search2"></div>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Home</a></div>
</li>
<li>
<div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">News & Media </a></div>
</li>
<li>
<div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Tutorial</a></div>
</li>
<li>
<div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Tips and Trik</a></div>
</li>
<li>
<div align="center"><a href="#">Download</a></div>
</li>
</ul>
</div>
</div>
<div id="Inner2">
<div id="top">
</div>
<div id="content">
<p class="style2">Lomba Desain WEB</p>
<p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
nisi ut aliquip ex ea commodo consequat.</p>
<p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div id="right">
</div>
<div id="Rightbot">
<div align="center" class="style11"><u>TEKNIK ELEKTRO UM</u>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
met mencoba ajeh.....

IT SITE

label pembayaran with Javascript

Diposting oleh Informathic_Yoyo di 20.09

Desain WEB with CSS

Diposting oleh Informathic_Yoyo di 20.49

About Me

Blogroll

Blog archive