Menghitung Bangun Datar dan Bangun Ruang Dengan HTML
BANGUN DATAR
LUAS DAN KELILING PERSEGI
<html>
<head>
<title>Luas dan Keliling Persegi</title>
<style>
input.btn
{color:
black;
background:
white;
border:
1px outset white;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/10.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="red"
size="5">
<p>Luas dan Keliling Persegi</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="gold"
size="5">Masukan sisi</td>
<td><input
name="sisi" type="text" id="sisi"></td>
</tr>
<tr>
<td><b><font
color="gold" size="5">Hasil Penghitungan Luas</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
<tr>
<td><b><font
color="gold" size="5">Hasil Penghitungan
Keliling</td>
<td><input
name="keliling" type="text"
id="keliling"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
sisi=formulir.sisi.value;
sisi=formulir.sisi.value;
formulir.keliling.value=4*sisi;
formulir.luas.value=sisi*sisi;
}
</script></body></html>
Hasilnya :
Hasilnya :
LUAS DAN KELILING PERSEGI PANJANG
<html>
<head>
<title>Luas dan Keliling Persegi Panjang</title>
<style>
input.btn
{color:
white;
background:
gold;
border:
1px outset gold;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/11.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="orange"
size="5">
<p>Luas dan Keliling Persegi Panjang</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="gold" size="5">Masukan
panjang</td>
<td><input
name="panjang" type="text"
id="panjang"></td>
</tr>
<tr>
<td
width="178"><b><font color="gold"
size="5">Masukan lebar</td>
<td><input
name="lebar" type="text"
id="lebar"></td>
</tr>
<tr>
<td><b><font
color="yellow" size="5">Hasil Penghitungan
Luas</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
<tr>
<td><b><font
color="yellow" size="5">Hasil Penghitungan
Keliling</td>
<td><input
name="keliling" type="text"
id="keliling"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
panjang=formulir.panjang.value;
lebar=formulir.lebar.value;
formulir.keliling.value=2*panjang+2*lebar;
formulir.luas.value=panjang*lebar;
}
</script></body></html>
Hasilnya :
Hasilnya :
LUAS SEGITIGA
<html>
<head>
<title>Luas Segitiga</title>
<style>
input.btn
{color:
silver;
background:
black;
border:
0px outset black;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/13.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="black"
size="5">
<p>Luas Segitiga</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan Alas</td>
<td><input
name="alas" type="text" id="alas"></td>
</tr>
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan Tinggi</td>
<td><input
name="tinggi" type="text"
id="tinggi"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
Luas</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
alas=formulir.alas.value;
tinggi=formulir.tinggi.value;
formulir.luas.value=0.5*alas*tinggi;
}
</script></body></html>
Hasilnya :
Hasilnya :
LUAS DAN KELILING BELAH KETUPAT
<html>
<head>
<title>Luas dan Keliling Belah Ketupat</title>
<style>
input.btn
{color:
white;
background:
black;
border:
1px outset black;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/12.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="black"
size="5">
<p>Luas dan Keliling Belah Ketupat</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan sisi</td>
<td><input
name="sisi" type="text" id="sisi"></td>
</tr>
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan diagonal 1</td>
<td><input
name="d1" type="text" id="d1"></td>
</tr>
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan diagonal 2</td>
<td><input
name="d2" type="text" id="d2"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
Luas</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
Keliling</td>
<td><input
name="keliling" type="text"
id="keliling"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
sisi=formulir.sisi.value;
d1=formulir.d1.value;
d2=formulir.d2.value;
formulir.keliling.value=4*sisi;
formulir.luas.value=0.5*d1*d2;
}
</script></body></html>
Hasilnya :
Hasilnya :
LUAS JAJAR GENJANG
<html>
<head>
<title>Luas Jajar Genjang</title>
<style>
input.btn
{color:
black;
background:
white;
border:
1px outset white;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/14.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="green"
size="5">
<p>Luas Jajar Genjang</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan alas</td>
<td><input
name="alas" type="text" id="alas"></td>
</tr>
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan tinggi</td>
<td><input
name="tinggi" type="text"
id="tinggi"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
Luas</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
alas=formulir.alas.value;
tinggi=formulir.tinggi.value;
formulir.luas.value=alas*tinggi;
}
</script></body></html>
Hasilnya :
Hasilnya :
LUAS DAN KELILING LAYANG-LAYANG
<html>
<head>
<title>Luas dan Keliling Layang-layang</title>
<style>
input.btn
{color:
white;
background:
black;
border:
1px outset black;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/15.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="black"
size="5">
<p>Luas dan Keliling Layang-layang</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan sisi panjang</td>
<td><input
name="sisi1" type="text"
id="sisi1"></td>
</tr>
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan sisi pendek</td>
<td><input
name="sisi2" type="text"
id="sisi2"></td>
</tr>
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan diagonal 1</td>
<td><input
name="d1" type="text" id="d1"></td>
</tr>
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan diagonal 2</td>
<td><input
name="d2" type="text" id="d2"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan Luas</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
Keliling</td>
<td><input
name="keliling" type="text"
id="keliling"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
sisi1=formulir.sisi1.value;
sisi2=formulir.sisi2.value;
d1=formulir.d1.value;
d2=formulir.d2.value;
formulir.keliling.value=2*sisi1+2*sisi2;
formulir.luas.value=0.5*d1*d2;
}
</script></body></html>
Hasilnya :
Hasilnya :
KELILING DAN LUAS LINGKARAN
<html>
<head>
<title>Keliling dan Luas Lingkaran</title>
<style>
input.btn
{color:
white;
background:
orange;
border:
1px outset orange;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/2.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="orange"
size="5">
<p>Keliling dan Luas Lingkaran</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="gold"
size="5">Masukan jari</td>
<td><input
name="jari" type="text" id="jari"></td>
</tr>
<tr>
<td><b><font
color="gold" size="5">Hasil perhitungan
keliling</td>
<td><input
name="keliling" type="text"
id="keliling"></td>
</tr>
<tr>
<td><b><font
color="gold" size="5">Hasil Penghitungan Luas</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="carikeliling()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function carikeliling()
{
jari=formulir.jari.value;
formulir.keliling.value=2*3.14*jari;
formulir.luas.value=3.14*jari*jari;
}
</script></body></html>
Hasilnya :
Hasilnya :
BANGUN RUANG
VOLUME DAN LUAS PERMUKAAN KUBUS
<html>
<head>
<title>Volume dan Luas Permukaan Kubus</title>
<style>
input.btn
{color:
white;
background:
black;
border:
1px outset black;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/5.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="black"
size="5">
<p>Volume dan Luas Permukaan Kubus</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan sisi</td>
<td><input
name="sisi" type="text" id="sisi"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
Volume</td>
<td><input
name="volume" type="text"
id="volume"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan Luas
Permukaan</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="carivolume()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function carivolume()
{
sisi=formulir.sisi.value;
sisi=formulir.sisi.value;
sisi=formulir.sisi.value;
formulir.volume.value=sisi*sisi*sisi;
formulir.luas.value=6*sisi*sisi;
}
</script></body></html>
Hasilnya :
Hasilnya :
VOLUME DAN LUAS PERMUKAAN BALOK
<html>
<head>
<title>Volume dan Luas Permukaan Balok</title>
<style>
input.btn
{color:
white;
background:
black;
border:
1px outset black;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/7.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="black"
size="5">
<p>Volume dan Luas Permukaan Balok</p>
<form id="Formulir" name="formulir"
method=post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="orange"
size="5">Masukan Panjang</td>
<td
width="88"><input name="panjang"
type="text" id="panjang"></td>
</tr>
<tr>
<td
width="178"><b><font color="orange" size="5">Masukan
lebar</td>
<td><input
name="lebar" type="text"
id="lebar"></td>
</tr>
<tr>
<td
width="178"><b><font color="orange"
size="5">Masukan tinggi</td>
<td><input
name="tinggi" type="text"
id="tinggi"></td>
</tr>
<tr>
<td><b><font
color="orange" size="5">Hasil Penghitungan
Volume</td>
<td><input
name="volume" type="text"
id="volume"></td>
</tr>
<tr>
<td><b><font
color="orange" size="5">Hasil Perhitungan Luas
Balok</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="carivolume()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function carivolume()
{
p=formulir.panjang.value;
l=formulir.lebar.value;
t=formulir.tinggi.value;
formulir.volume.value=p*l*t;
formulir.luas.value=2*(p*l+p*t+l*t);
}
</script>
</body></html>
Hasilnya :
Hasilnya :
VOLUME TABUNG
<html>
<head>
<title>Volume Tabung</title>
<style>
input.btn
{color:
black;
background:
#FFCC99;
border:
1px outset #FFCC99;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/6.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="black"
size="5">
<p>Volume Tabung</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan jari</td>
<td><input
name="jari" type="text" id="jari"></td>
</tr>
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan tinggi</td>
<td><input
name="tinggi" type="text"
id="tinggi"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
volume</td>
<td><input
name="volume" type="text"
id="volume"></td>
</tr>
</table>
<p>
<input name="cari" type="button" id="cari"
value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
jari=formulir.jari.value;
jari=formulir.jari.value;
tinggi=formulir.tinggi.value;
formulir.volume.value=3.14*jari*jari*tinggi;
}
</script>
</body></html>
Hasilnya :
VOLUME DAN LUAS BOLA
<html>
<head>
<title>Volume dan Luas Bola</title>
<style>
input.btn
{color:
white;
background:
sky blue;
border:
1px outset sky blue;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/9.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="black"
size="5">
<p>Volume dan Luas Bola</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="black"
size="5">Masukan jari</td>
<td><input
name="jari" type="text" id="jari"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
Luas</td>
<td><input
name="luas" type="text" id="luas"></td>
</tr>
<tr>
<td><b><font
color="black" size="5">Hasil Penghitungan
Volume</td>
<td><input
name="volume" type="text"
id="volume"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
jari=formulir.jari.value;
jari=formulir.jari.value;
jari=formulir.jari.value;
formulir.luas.value=4*3.14*jari*jari;
formulir.volume.value=1.3333333*3.14*jari*jari*jari;
}
</script></body></html>
Hasilnya :
Hasilnya :
VOLUME KERUCUT
<html>
<head>
<title>Volume Kerucut</title>
<style>
input.btn
{color:
white;
background:
orange;
border:
1px outset orange;
font-family:
"calibri", Times, serif;
font-size:
14px;
font-weight:
bold;
width
: auto;}
</style>
</head>
<body background="images/3.jpg"
<body>
<center><br></br><br></br><br></br>
<b><font color="orange"
size="5">
<p>Volume Kerucut</p>
<form id="Formulir" name="formulir"
method="post" action="">
<table
width="500" border="0">
<tr>
<td
width="178"><b><font color="orange"
size="5">Masukan jari</td>
<td><input
name="jari" type="text" id="jari"></td>
</tr>
<tr>
<td
width="178"><b><font color="orange"
size="5">Masukan tinggi</td>
<td><input
name="tinggi" type="text" id="tinggi"></td>
</tr>
<tr>
<td><b><font
color="orange" size="5">Hasil Penghitungan
volume</td>
<td><input
name="volume" type="text"
id="volume"></td>
</tr>
</table>
<p>
<input name="cari" type="button"
id="cari" value="hitung" class="btn"
onclick="cariluas()"/>
</p>
</form>
<p> </p>
<script laguage="javascript">
function cariluas()
{
jari=formulir.jari.value;
jari=formulir.jari.value;
tinggi=formulir.tinggi.value;
formulir.volume.value=0.33333333*3.14*jari*jari*tinggi;
}
</script></body></html>
Hasilnya :
Hasilnya :
Contoh program bisa di download melalui link di bawah :
