Minggu, 13 Maret 2011
Minggu, 06 Maret 2011
Membuat Menu Pujasera
Script HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pemesanan Menu Pujasera</title>
<script language="JavaScript" type="text/javascript" src="cantin.js"></script>
<link rel="stylesheet" href="cantin.css" type="text/css" />
</head>
<body>
<header>
<h1 align="center">MENU MAKANAN<br/>PUJASERA UM</h1>
</header>
<section>
<form name="form_menu" action="#">
<table border=1 cellpadding=3>
<tr>
<th><div class="baris_satu">No.<div></th>
<th width = 350px ><div class="baris_satu">Makanan / Minuman </div></th>
<th width = 120px ><div class="baris_satu">Harga</div></th>
<th width = 100px><div class="baris_satu">Jumlah</div></th>
</tr>
<tr>
<td><div class="huruf_isi">1</div></td>
<td><div class="huruf_isi">Tahu Telor</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga1" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan1" value="0" size="3" onChange ="proses()"/> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">2</div></td>
<td><div class="huruf_isi">Bakso </td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga2" value="5000" size="6" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan2" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">3</div></td>
<td><div class="huruf_isi">Nasi Goreng </div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga3" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan3" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">4</div></td>
<td><div class="huruf_isi">Teh Racek</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga4" value="2500" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan4" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td><div class="huruf_isi">5</div></td>
<td><div class="huruf_isi">Jus Jambu</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga5" value="3000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan5" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumTotal" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Diskon</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="Diskon" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah Dibayar</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumBayar" readonly /></div></td>
<tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
<input type="submit" value="Pesan" onclick="pesan()" />
</form>
</section>
<footer>
© vertika 2011
</footer>
</body>
</html>
Kode CSS:
body {
margin: 10px auto;
width: 580px;
}
header,section,footer{
display:block;
border:1px solid green;
}
header{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: white;
float:center;
height:100px;
background : #00CC00;
}
section{
padding: 10px;
height:350px;
}
footer{
clear:both;
height:20px;
background : #00CC00;
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
color: white;
}
.baris_satu{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #00CC00;
float:center;
}
.huruf_isi{
font-family: Tahoma;
font-size: 15px;
text-align: center;
color: #33CC00;
float:left;
}
.huruf_bawah{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #33CC00;
float:right;
}
Kode Java Script:
function JumlahTotal(){
var myForm=document.form_menu;
var total1;
var total2;
var total3;
var total4;
var total5;
total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);
myForm.JumTotal.value=total1+total2+total3+total4+total5;
}
function potongan(){
var myForm=document.form_menu;
if (myForm.JumTotal.value < value =" 0;" value =" 2000;" myform="document.form_menu;" value =" myForm.JumTotal.value" elemen =" document.pemesanan;" value = "" value = "" value = "" value = "" value = "" value = "" value = "" value = "" myform =" document.form_menu;" value="=" value="=">
Hasil:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pemesanan Menu Pujasera</title>
<script language="JavaScript" type="text/javascript" src="cantin.js"></script>
<link rel="stylesheet" href="cantin.css" type="text/css" />
</head>
<body>
<header>
<h1 align="center">MENU MAKANAN<br/>PUJASERA UM</h1>
</header>
<section>
<form name="form_menu" action="#">
<table border=1 cellpadding=3>
<tr>
<th><div class="baris_satu">No.<div></th>
<th width = 350px ><div class="baris_satu">Makanan / Minuman </div></th>
<th width = 120px ><div class="baris_satu">Harga</div></th>
<th width = 100px><div class="baris_satu">Jumlah</div></th>
</tr>
<tr>
<td><div class="huruf_isi">1</div></td>
<td><div class="huruf_isi">Tahu Telor</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga1" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan1" value="0" size="3" onChange ="proses()"/> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">2</div></td>
<td><div class="huruf_isi">Bakso </td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga2" value="5000" size="6" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan2" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">3</div></td>
<td><div class="huruf_isi">Nasi Goreng </div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga3" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan3" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">4</div></td>
<td><div class="huruf_isi">Teh Racek</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga4" value="2500" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan4" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td><div class="huruf_isi">5</div></td>
<td><div class="huruf_isi">Jus Jambu</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga5" value="3000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan5" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumTotal" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Diskon</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="Diskon" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah Dibayar</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumBayar" readonly /></div></td>
<tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
<input type="submit" value="Pesan" onclick="pesan()" />
</form>
</section>
<footer>
© vertika 2011
</footer>
</body>
</html>
Kode CSS:
body {
margin: 10px auto;
width: 580px;
}
header,section,footer{
display:block;
border:1px solid green;
}
header{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: white;
float:center;
height:100px;
background : #00CC00;
}
section{
padding: 10px;
height:350px;
}
footer{
clear:both;
height:20px;
background : #00CC00;
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
color: white;
}
.baris_satu{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #00CC00;
float:center;
}
.huruf_isi{
font-family: Tahoma;
font-size: 15px;
text-align: center;
color: #33CC00;
float:left;
}
.huruf_bawah{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #33CC00;
float:right;
}
Kode Java Script:
function JumlahTotal(){
var myForm=document.form_menu;
var total1;
var total2;
var total3;
var total4;
var total5;
total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);
myForm.JumTotal.value=total1+total2+total3+total4+total5;
}
function potongan(){
var myForm=document.form_menu;
if (myForm.JumTotal.value < value =" 0;" value =" 2000;" myform="document.form_menu;" value =" myForm.JumTotal.value" elemen =" document.pemesanan;" value = "" value = "" value = "" value = "" value = "" value = "" value = "" value = "" myform =" document.form_menu;" value="=" value="=">
Hasil:
Menbuat kalkulator sederhana
Script HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kalkulator Sederhana_Vertika</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
<style type="text/css">
<!--
.huruf_header{
font-family: Berlin Sans FB;
font-size: 40px;
text-align: center;
color: #990066;
float:center;
}
-->
</style>
<link rel="icon" type="image/x-icon" href="a.jpg">
</head>
<body bgcolor="#CC33CC">
<center>
<table bgcolor="#CC99FF" border=0 align="justify" cellspacing=0 cellpadding=5>
<tr>
<td width="1600"><div class="huruf_header">KALKULATOR SEDERHANA</div></td>
</tr>
</table>
<br/>
<form name=form_kalkulator action="#">
<table border ="0">
<tr>
<td><input type="text" name="bil1" value="Input 1"/></td>
<td><select name="operasi" >
<option>Operator</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select></td>
<td><input type="text" name="bil2" value="Input 2"/></td>
<td><input type="button" value="PROSES" onclick="proses()" /></td>
<td><input type="text" name="hasil"/></td>
<td><input type="button" value="Clear" onclick="reset()" /></td>
<td><input type="button" value="Cetak" onclick="cetak()" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Kode Java Script:
function proses(){
var myForm=document.form_kalkulator;
if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "/"){
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}
function reset(){
var elemen = document.form_kalkulator;
elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}
function cetak()
{
var myForm = document.form_kalkulator;
if (myForm.bil1.value=="Input 1" || myForm.operasi.value=="Operator" || myForm.bil1.value=="Input 2")
{
alert("Lengkapi Data Anda..");
}
else
{
alert("Hasil Perhitungan dari " + myForm.bil1.value + " " + myForm.operasi.value + " " + myForm.bil2.value + " = " + myForm.hasil.value);
}
}
Hasil:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kalkulator Sederhana_Vertika</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
<style type="text/css">
<!--
.huruf_header{
font-family: Berlin Sans FB;
font-size: 40px;
text-align: center;
color: #990066;
float:center;
}
-->
</style>
<link rel="icon" type="image/x-icon" href="a.jpg">
</head>
<body bgcolor="#CC33CC">
<center>
<table bgcolor="#CC99FF" border=0 align="justify" cellspacing=0 cellpadding=5>
<tr>
<td width="1600"><div class="huruf_header">KALKULATOR SEDERHANA</div></td>
</tr>
</table>
<br/>
<form name=form_kalkulator action="#">
<table border ="0">
<tr>
<td><input type="text" name="bil1" value="Input 1"/></td>
<td><select name="operasi" >
<option>Operator</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select></td>
<td><input type="text" name="bil2" value="Input 2"/></td>
<td><input type="button" value="PROSES" onclick="proses()" /></td>
<td><input type="text" name="hasil"/></td>
<td><input type="button" value="Clear" onclick="reset()" /></td>
<td><input type="button" value="Cetak" onclick="cetak()" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Kode Java Script:
function proses(){
var myForm=document.form_kalkulator;
if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "/"){
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}
function reset(){
var elemen = document.form_kalkulator;
elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}
function cetak()
{
var myForm = document.form_kalkulator;
if (myForm.bil1.value=="Input 1" || myForm.operasi.value=="Operator" || myForm.bil1.value=="Input 2")
{
alert("Lengkapi Data Anda..");
}
else
{
alert("Hasil Perhitungan dari " + myForm.bil1.value + " " + myForm.operasi.value + " " + myForm.bil2.value + " = " + myForm.hasil.value);
}
}
Hasil:
Membuat Web sederhana
Script HTML
<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Rumah Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>
<body>
<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>SELAMAT DATANG</MARQUEE></info>
</header>
<nav><search>Search</search><box>
<input type="text" size="20">
</box>
<linkmenu>
<home><a href="#" target="_blank" title="About TE UM">Home</a></home>
<materi><a href="#" target="_blank" title="Materi Kuliah">Materi</a></materi>
<jurnal><a href="#" target="_blank" title="Artikel dan Jurnal">Jurnal</a></jurnal>
<agenda><a href="#" target="_blank" title="Acara">Agenda</a></agenda>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>
<section>
<gambar></gambar>
<article>
<b>~SEKILAS PTI~</b><br><br>
Pendidikan Teknik Informatika merupakan salah satu prodi di jurusan Elektro, Program Studi ini ada sejak tahun 2007. Lulusan Pendidikan Teknik Informatika ini diharapkan akan menjadi tenaga pendidik profesional.<br>
Tahun ini prodi PTI akan meluluskan mahasiswa untuk tahun pertama. Selain itu, saat ini PTI sedang melakukan proses akreditasi.
Semoga tahun ini PTI segera memperoleh akreditasi secepatnya...
</article>
<event><a href="#" target="_blank" title="Teknik Elektro"></a>
<b>   EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Lomba Design Web">Lomba Design Web</a></li>
<li><a href="#" target="_blank" title="Kajur Cup">Kajur Cup</a></li>
<li><a href="#" target="_blank" title="LTDC">LTDC</a></li>
<li><a href="#" target="_blank" title="Kontes Band">Kontes Band</a></li>
</ul>
</event>
</section>
<footer>
Home | Materi | Jurnal | Agenda | Download
<br>© CopyRight Vertika Panggayuh
</footer>
</body>
</html>
Script CSS
body{
margin: 10px auto;
width : 1000px;
}
header, logo, nama, nav, search, box, section, gambar, article, event, footer{
display : block;
}
header{
height: 130px;
width: auto;
}
logo{
float : left;
padding-top: 5px;
margin-top: 5px;
margin-left : 25px;
height : 90px;
width : 100px;
background-image : url(um.jpg)
}
nama{
background-color : #990099;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
info{
float: left;
font-family : Arial ;
font-size : 20px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 25px;
background-color : #9900FF;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
nav{
width: 1000px;
height: 30px;
background-color : #CC33CC ;
color : black;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 5px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 5px;
float: left;
width: 165px;
height: 20px;
}
home, materi, jurnal, agenda, download{
display: block;
float: left;
background-color: #990099;
margin-top: 10px;
float: left;
text-align : center;
color : white;
font-size: 14px;
font-family: calibri;
font-weight: bold;
}
home{
float: left;
margin-left: 372px;
width: 75px;
height: 23px;
}
materi{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
jurnal{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
agenda{
float: left;
margin-left: 2px;
width: 85px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 1000px;
height : 415px;
background-color : #9900FF;
}
gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(AN_diff.jpg);
}
article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : #CC99CC;
font-size : 15px;
font-family : Berlin Sans FB;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : black;
margin-top: 5px;
margin-left: 5px;
width: 705px;
height: 100px;
background-color : #CC33CC ;
}
footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #990099;
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: white;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:black;
}
list{
list-style-position: inside;
}
Hasil
<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Rumah Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>
<body>
<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>SELAMAT DATANG</MARQUEE></info>
</header>
<nav><search>Search</search><box>
<input type="text" size="20">
</box>
<linkmenu>
<home><a href="#" target="_blank" title="About TE UM">Home</a></home>
<materi><a href="#" target="_blank" title="Materi Kuliah">Materi</a></materi>
<jurnal><a href="#" target="_blank" title="Artikel dan Jurnal">Jurnal</a></jurnal>
<agenda><a href="#" target="_blank" title="Acara">Agenda</a></agenda>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>
<section>
<gambar></gambar>
<article>
<b>~SEKILAS PTI~</b><br><br>
Pendidikan Teknik Informatika merupakan salah satu prodi di jurusan Elektro, Program Studi ini ada sejak tahun 2007. Lulusan Pendidikan Teknik Informatika ini diharapkan akan menjadi tenaga pendidik profesional.<br>
Tahun ini prodi PTI akan meluluskan mahasiswa untuk tahun pertama. Selain itu, saat ini PTI sedang melakukan proses akreditasi.
Semoga tahun ini PTI segera memperoleh akreditasi secepatnya...
</article>
<event><a href="#" target="_blank" title="Teknik Elektro"></a>
<b>   EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Lomba Design Web">Lomba Design Web</a></li>
<li><a href="#" target="_blank" title="Kajur Cup">Kajur Cup</a></li>
<li><a href="#" target="_blank" title="LTDC">LTDC</a></li>
<li><a href="#" target="_blank" title="Kontes Band">Kontes Band</a></li>
</ul>
</event>
</section>
<footer>
Home | Materi | Jurnal | Agenda | Download
<br>© CopyRight Vertika Panggayuh
</footer>
</body>
</html>
Script CSS
body{
margin: 10px auto;
width : 1000px;
}
header, logo, nama, nav, search, box, section, gambar, article, event, footer{
display : block;
}
header{
height: 130px;
width: auto;
}
logo{
float : left;
padding-top: 5px;
margin-top: 5px;
margin-left : 25px;
height : 90px;
width : 100px;
background-image : url(um.jpg)
}
nama{
background-color : #990099;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
info{
float: left;
font-family : Arial ;
font-size : 20px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 25px;
background-color : #9900FF;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
nav{
width: 1000px;
height: 30px;
background-color : #CC33CC ;
color : black;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 5px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 5px;
float: left;
width: 165px;
height: 20px;
}
home, materi, jurnal, agenda, download{
display: block;
float: left;
background-color: #990099;
margin-top: 10px;
float: left;
text-align : center;
color : white;
font-size: 14px;
font-family: calibri;
font-weight: bold;
}
home{
float: left;
margin-left: 372px;
width: 75px;
height: 23px;
}
materi{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
jurnal{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
agenda{
float: left;
margin-left: 2px;
width: 85px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 1000px;
height : 415px;
background-color : #9900FF;
}
gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(AN_diff.jpg);
}
article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : #CC99CC;
font-size : 15px;
font-family : Berlin Sans FB;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : black;
margin-top: 5px;
margin-left: 5px;
width: 705px;
height: 100px;
background-color : #CC33CC ;
}
footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #990099;
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: white;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:black;
}
list{
list-style-position: inside;
}
Hasil
membuat dasar web
Script Program HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Design Layout Sederhana HTML5</title>
<link rel="stylesheet" href="design.css" type="text/css" />
</head>
<body>
<header>
header
</header>
<nav>
nav
<button>Home</button>
<button>Article</button>
<button>Download</button>
<button>About Us</button>
</nav>
<section>
<article>-article-
</article>
<aside>
<button >L O G I N</button>
<br>
-aside-
</aside>
section
</section>
<footer>
footer
</footer>
</body>
</html>
Script CSS
body{
margin : 10px auto;
width : 900px;
border : 1px solid green ;
}
header, nav, section, article, aside, footer{
display : block;
}
header{
padding-top: 30px;
height: 50px;
border : 1px solid green;
}
nav{
padding-top: 7px;
width: 900px;
height: 30px;
border : 1px solid blue;
}
section{
width : 900px;
height : 450px;
border : 1px solid red;
}
article{
padding-top: 5px;
float: left;
margin : 20px;
width: 700px;
height: 385px;
border: 1px dashed red;
}
aside{
padding-top: 5px;
margin : 20px;
margin-left: 725px;
width: 150px;
height: 385px;
border: 1px dashed black;
}
button{
font-family : calibri;
color : blue;
height :30px;
}
footer{
clear : both;
height : 30px;
}
Hasil:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Design Layout Sederhana HTML5</title>
<link rel="stylesheet" href="design.css" type="text/css" />
</head>
<body>
<header>
header
</header>
<nav>
nav
<button>Home</button>
<button>Article</button>
<button>Download</button>
<button>About Us</button>
</nav>
<section>
<article>-article-
</article>
<aside>
<button >L O G I N</button>
<br>
-aside-
</aside>
section
</section>
<footer>
footer
</footer>
</body>
</html>
Script CSS
body{
margin : 10px auto;
width : 900px;
border : 1px solid green ;
}
header, nav, section, article, aside, footer{
display : block;
}
header{
padding-top: 30px;
height: 50px;
border : 1px solid green;
}
nav{
padding-top: 7px;
width: 900px;
height: 30px;
border : 1px solid blue;
}
section{
width : 900px;
height : 450px;
border : 1px solid red;
}
article{
padding-top: 5px;
float: left;
margin : 20px;
width: 700px;
height: 385px;
border: 1px dashed red;
}
aside{
padding-top: 5px;
margin : 20px;
margin-left: 725px;
width: 150px;
height: 385px;
border: 1px dashed black;
}
button{
font-family : calibri;
color : blue;
height :30px;
}
footer{
clear : both;
height : 30px;
}
Hasil:
Langganan:
Postingan (Atom)
