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 :
sangat bermanfaat pak mohon ijin saya gunakan script ini untuk saya catata dan pelajari. semoga menjadi amal jariyah Aamiin Allahuma Aamiin
BalasHapusIni yg saya cari, thanks info nya. sangat bermanfaat
BalasHapusLuas biasa Pak Dul....
BalasHapusKami telah mengcopas untuk bahan ajar anak didik kami
Semoga Allah swt membalas kebaikan Pak Dul dengan balasan yang tidak disangka-sangka
aamiiin