PEMBUATAN PETA POTENSI CURAH HUJAN DENGAN MENGGUNAKAN CITRA SATELIT MTSAT DI PULAU JAWA - Diponegoro University | Institutional Repository (UNDIP-IR)

(1)

(2)

LAMPIRAN I

(3)

(4)

(5)

LAMPIRAN II

(6)

(7)

(8)

(9)

(10)

(11)

(12)

(13)

(14)

(15)

(16)

LAMPIRAN III

(17)

SCRIPT WEBSITE

1. Script CSS (emx_nav_left.css)

/***********************************************/ /* emx_nav_left.css */

/* Use with template Halo_leftNav.html */

/***********************************************/ /***********************************************/ /* HTML tag styles */

/***********************************************/ body{

font-family: Arial,sans-serif; color: #333333;

line-height: 1.166; margin: 0px; padding: 0px;

background: #cccccc url(bg_grad.jpg) fixed; }

#pagecell1 #pageName img { }

/******* hyperlink and anchor tag styles *******/ a:link, a:visited{

color: #005FA9; text-decoration: none; }

a:hover{

text-decoration: underline; }

/************** header tag styles **************/ h1{

font: bold 120% Arial,sans-serif; color: #334d55;

margin: 0px; padding: 0px; }

h2{

font: bold 114% Arial,sans-serif; color: #006699;

h3{

font: bold 100% Arial,sans-serif; color: #334d55;

(18)

} h4{

font: 100% Arial,sans-serif; color: #333333;

h5{

font: 100% Arial,sans-serif; color: #334d55;

/*************** list tag styles ***************/ ul{

list-style-type: square; }

ul ul{

list-style-type: disc; }

ul ul ul{

list-style-type: none; }

/********* form and related tag styles *********/ form {

margin: 0; padding: 0; }

label{

font: bold 1em Arial,sans-serif; color: #334d55;

} input{

font-family: Arial,sans-serif; }

/***********************************************/ /* Layout Divs */

/***********************************************/ #pagecell1{

(19)

background-color: #F5f7f7; }

#tl {

position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; }

#tr {

position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; }

#masthead{

position: absolute; top: 0px;

left: 2%; right: 2%; width:95.6%; }

#pageNav{ float: left; width:178px; padding: 0px;

background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; }

#content{

padding: 10px 10px 10px 10px; margin:0px 0px 0px 178px; border-left: 1px solid #ccd2d2; background-color: #FFFFFF; }

/***********************************************/ /* Component Divs */

/***********************************************/ #siteName{

margin: 0px;

(20)

text-indent: 10px; }

/************** utility styles *****************/ #utility{

font: 75% Verdana,sans-serif; position: absolute;

top: 16px; right: 0px; color: #919999; }

#utility a{ color: #ffffff; }

#utility a:hover{

/************** pageName styles ****************/ #pageName{

padding: 0px 0px 14px 10px; margin: 0px;

border-bottom:1px solid #ccd2d2; background: #F3FF66;

}

#pageName h2{

margin:0px; padding: 0px; }

#pageName img{ position: absolute; top: 0px;

right: 6px; padding: 0px; margin: 0px; width: 74px; height: 78px; overflow: visible; }

/************* globalNav styles ****************/ #globalNav{

(21)

color: #cccccc; padding: 0px; margin: 0px;

#globalNav img{ margin-bottom: -4px; }

#gnl {

left:0px; }

#gnr {

right:0px; }

#globalLink{

height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; width: 472px; }

a.glink, a.glink:visited{ font-size: small; color: #000000; font-weight: bold; margin: 0px;

padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; }

a.glink:hover{

}

.skipLinks {display: none;}

(22)

.subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px;

padding: 0px 0px 0px 10px; visibility: hidden;

color: #ffffff; }

.subglobalNav a:link, .subglobalNav a:visited { font-size: 80%;

color: #ffffff; }

.subglobalNav a:hover{ color: #cccccc; }

/*************** search styles *****************/ #search{

right: 10px; z-index: 101; }

#search input{ font-size: 70%;

margin: 0px 0px 0px 10px; }

#search a:link, #search a:visited { font-size: 80%;

font-weight: bold; }

#search a:hover{ margin: 0px; }

/************* breadCrumb styles ***************/ #breadCrumb{

padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA;

(23)

#breadCrumb a{ color: #AAAAAA; }

#breadCrumb a:hover{ color: #005FA9;

/************** feature styles *****************/ .feature{

padding: 0px 0px 10px 10px; font-size: 80%;

min-height: 200px; height: 200px; margin: 4; }

html>body .feature { height: auto; margin-right: 30px} .feature h3{

padding: 30px 0px 5px 0px; }

.feature img{ float: left;

/*************** story styles ******************/ .story {

margin-right: 50px; text-align:justify; text-indent:40px; line-height: 2; }

.contactus {

margin-right: 150px; text-align:justify; }

.story h3{

(24)

.story p {

padding: 0px 0px 10px 0px; line-height: 2;

}

.story a.capsule{

font: bold 1em Arial,sans-serif; color: #005FA9;

display: block; padding-bottom: 5px; }

.story a.capsule:hover{ text-decoration: underline; }

td.storyLeft{

padding-right: 12px; }

/************** siteInfo styles ****************/ #siteInfo{

clear: both;

border-top: 1px solid #cccccc; font-size: small;

color: #cccccc;

padding: 10px 10px 10px 10px; margin-top: 0px;

}

#siteInfo img{

padding: 4px 4px 4px 0px; vertical-align: middle; }

/************ sectionLinks styles **************/ #sectionLinks{

#sectionLinks h3{

padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; }

#sectionLinks a:link, #sectionLinks a:visited { display: block;

border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image: url(bg_nav.jpg); font-weight: bold;

padding: 3px 0px 3px 10px; color: #21536A;

(25)

#sectionLinks a:hover{

border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; }

/************* relatedLinks styles **************/ .relatedLinks{

margin: 0px;

padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; }

.relatedLinks h3{

.relatedLinks a{ display: block; }

/**************** half styles *******************/ .half { width: 400px }

.h20 { height: 20px } .h40 { height: 40px }

img { margin: 0; padding: 0; border: none }

.img_border { background: #525252; padding: 4px; border: 1px solid #282828 } .img_nom { display: block; margin-bottom: 15px }

.img_fl { float: left; margin: 3px 15px 5px 0 } .img_fr { float: left; margin: 3px 0 5px 15px } .left { float: left }

.right { float: right }

/********************* end **********************/ #pagecell1 #content .tutorial {

font: normal 12px "Times New Roman", Times, serif; }

#capsule.content {

font: normal 14px/normal "Times New Roman", Times, serif; letter-spacing: normal;

text-align: justify; word-spacing: normal; padding: 30px; height: auto; width: auto;

border: 3px dotted #99CC00; }

(26)

#time {

font-family: Garamond; font-size: 16px; color:black; padding:3px; width:170px; text-align:center; position:relative;

margin:40px 0px -75px 1000px; }

2. Script Beranda (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

var time = 3000; var numofitems = 7; //menu constructor

function menu(allitems,thisitem,startstate){ callname= "gl"+thisitem;

divname="subglobal"+thisitem; this.numberofmenuitems = allitems;

this.caller = document.getElementById(callname); this.thediv = document.getElementById(divname); this.thediv.style.visibility = startstate;

}

//menu methods

function ehandler(event,theobj){

for (var i=1; i<= theobj.numberofmenuitems; i++){ var shutdiv =eval( "menuitem"+i+".thediv"); shutdiv.style.visibility="hidden";

}

theobj.thediv.style.visibility="visible"; }

function closesubnav(event){

if ((event.clientY <48)||(event.clientY > 107)){ for (var i=1; i<= numofitems; i++){

var shutdiv =eval('menuitem'+i+'.thediv'); shutdiv.style.visibility='hidden';

(27)

// -->

<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="#pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site

information)</a> </div> <div id="masthead">

<h1 class="style1" id="siteName">Informasi Peta Curah Hujan</h1>

<div id="globalLink"> <a href="index.html" id="gl1" class="glink" > Beranda</a><a href="tutorial.html" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">

Tutorial</a><a href="peta.html" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);"> Peta</a><a href="hubungikami.html" id="gl5" class="glink"> Hubungi Kami</a></div>

</div>

<div id="subglobal1" class="subglobalNav"> <a href="#">subglobal1 link</a> | <a

<div id="subglobal3" class="subglobalNav"> <a href="konversi_data.html">Konversi PGM ke ERS </a> | <a href="koreksi_geo.html">Koreksi Geometrik</a> | <a

(28)

href="tutorial_layout.html">Layout-ing Peta </a> | <a href="tutorial_animasi.html">Membuat Animasi Peta</a> </div>

<div id="subglobal4" class="subglobalNav"> <a href="peta_mei.html">Bulan Mei 2013</a> | <a href="peta_juni.html">Bulan Juni 2013</a> | <a href="peta_juli.html">Bulan Juli 2013</a> | <a href="peta_agust.html">Bulan Agustus 2013</a> | </div>

</div>

<div id="pagecell1">

<div id="breadCrumb"> <a href="#">Beranda</a> /</div> <div id="pageName">

<h2>Informasi Peta Curah Hujan <img src="images/Logo.png" alt="logo" name="logo" width="66" height="72"/>

tday =new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"); tmonth=new

else if(nhour >= 13) {ap = " PM";nhour -= 12;}if(nmin <= 9) {nmin = "0" +nmin;} if(nsec <= 9) {nsec = "0" +nsec;}

(29)

setTimeout("GetClock()", 1000);}window.onload=GetClock;</script><div id="clockbox"> </div>

</div> </h2> </div>

<div id="sectionLinks"> <span class="style4"><a href="index.html"> Beranda</a><a href="tutorial.html"> Tutorial</a> <a href="peta.html"> Peta Curah Hujan</a> <a href="hubungikami.html"> Hubungi Kami</a></span></div>

<div class="relatedLinks"> <h3>Link Terkait </h3>

<a href="http://geodesi.undip.ac.id/" target="_blank">Geodesi - UNDIP </a> <a href="http://www.undip.ac.id/" target="_blank">UNDIP</a> <a

href="http://www.bmkg.go.id/BMKG_Pusat/Main.bmkg" target="_blank">BMKG</a> <a href="http://www.lapanrs.com/simba" target="_blank">Simba LAPAN </a></div> <p></p>

<h3 align="left">Selamat Datang ! </h3>

<p align="justify">Selamat Datang di Website Kami.</p> <p align="justify"> </p>

<p><strong>Latar Belakang</strong></p>

(30)

sangat penting dan dibutuhkan oleh hampir semua bidang seperti pertanian, transportasi, perkebunan, hingga untuk peringatan dini bencana alam, banjir, longsor, dan kekeringan (Parwati <em>et al. </em>2009). </p>

<p align="justify">Data dan informasi curah hujan masih terbatas baik untuk skala spasial yang luas maupun satuan wilayah yang lebih kecil. Akses untuk data sulit dan belum memenuhi syarat layak pakai. Jumlah stasiun penakar hujan mungkin banyak namun kelengkapan data masih belum

menjanjikan. Keterbatasan-keterbatasan tersebut menjadi penghambat bagi pengguna data curah hujan dan kegiatan yang memfokuskan diri pada implementasi analisis data hujan.</p>

<p align="justify">Keterbatasan ini mampu dijawab oleh data satelit penginderaan jauh. Beberapa data satelit meteorologi telah mampu memberikan informasi cuaca yang <em>up to date </em>setiap jam dan dapat diakses gratis. Meskipun begitu pemanfaatannya masih sangat terbatas. Pendugaan curah hujan dengan satelit diawali sekitar tahun 1960 dengan memanfaatkan kanal inframerah serta cahaya tampak atau <em>visible </em>(Suseno 2009). Berbagai metode masih terus dikembangkan agar hasil penghitungan nilai curah hujan dugaan mendekati hasil pengukuran stasiun penakar hujan. </p>

<p align="justify">Salah satu data satelit penginderaan jauh yang dapat digunakan untuk memantau dan memberikan informasi tentang kondisi keawanan dan curah hujan antara lain adalah MTSAT-1R (<em>Multifunction Transport Satellite 1 Replacement</em>). Data satelit penginderaan jauh MTSAT-1R ini mampu memberikan informasi kondisi awan melalui kanal inframerah setiap 30 menit dengan resolusi spasial 4 km. Data MTSAT dapat diunduh setiap jam ini dapat menginformasikan kondisi awan di Indonesia sehingga diharapkan ke depan data MTSAT-1R ini mampu untuk

 memprediksi daerah berpotensi banjir dengan berdasarkan kondisi curah hujan di wilayah Pulau Jawa. </p>

<p align="justify">Oleh karenanya perlu dilakukan analisis kondisi awan di wilayah Indonesia yang menyebabkan curah hujan tinggi yang memicu terjadinya banjir. Diharapkan kajian ini dapat dimanfaatkan dalam pembuatan peta persebaran curah hujan di Pulau Jawa melalui data satelit khususnya dari parameter suhu kecerahan awan dari MTSAT-1R terhadap data curah hujan yang diperoleh dari stasiun pengamatan seperti BMKG. </p>

<p align="justify">Website ini menyajikan peta curah hujan yang merupakan hasil dari pengolahan citra MTSAT-1R. Wilayah peta itu sendiri mencakup seluruh wilayah di Pulau Jawa. Peta-peta yang terdapat di website ini terhitung sejak tanggal 1 Mei 2013 hingga 31 Agustus 2013. Disini tersedia pula hasil layout peta berupa animasi dalam format .gif . Hasil output dalam bentuk .gif tersebut merupakan gabungan selama satu bulan. Misal untuk mei.gif, itu berarti dari tanggal 1 Mei 2013 sampai dengan 31 Mei 2013. Demikian sekilas isi dari website ini. Terima Kasih. Semoga Bermanfaat. </p>

<p align="right"> </p> <p align="left">Penulis</p> <p align="left"> </p> <p align="left"> </p> </blockquote>

</div>

<h3 align="left"><a href="tutorial.html">Tutorial</a></h3>

<p><span class="style4">Bagaimana cara untuk membuat Peta Curah Hujan ?? Apa saja data yang perlu disiapkan ?? Software pendukung apa saja yang diperlukan ?? Tenang tenang.. Satu persatu kita akan mengupas dan menjelaskannya semuanya disini. Bagi yang belom mempunyai software-software pendukungnya, disini tersedia juga link-link untuk mengunduh software tersebut. </span></p> <p><a href="tutorial.html">Selengkapnya >>></a> </p>

(31)

<div id="siteInfo"><a href="#">About Us</a> | <a href="#">Site Map </a>| <a

</div>

<br />

var menuitem1 = new menu(7,1,"hidden");

var menuitem2 = new menu(7,2,"hidden"); var menuitem3 = new menu(7,3,"hidden"); var menuitem4 = new menu(7,4,"hidden"); var menuitem5 = new menu(7,5,"hidden"); var menuitem6 = new menu(7,6,"hidden"); var menuitem7 = new menu(7,7,"hidden"); // -->

</script> </body> </html>

3. Script Tutorial (tutorial.html)

<h3 class="style2">Tutorial</h3> <blockquote>

<p class="style4">Bagaimana cara untuk membuat Peta Curah Hujan ?? Apa saja data yang perlu disiapkan ?? Software pendukung apa saja yang diperlukan ?? Tenang tenang.. Satu persatu kita akan mengupas dan menjelaskannya semuanya disini. Bagi yang belum mempunyai software-software pendukungnya, disini tersedia juga link-link untuk mengunduh software tersebut. </p>

<span class="style4">Oke, pertama kita mulai untuk menyiapkan bahan (data) dan peralatannya (software). <br />

Data - data yang dibutuhkan untuk membuat Peta Curah Hujan ini adalah :<br /> 1. Peta Administrasi Indonesia<br />

2. Data Citra MTSAT - 1R. <br />

untuk Data Citra MTSAT-1R dapat diunduh secara gratis di website resmi Kochi - Jepang, untuk mengunduh silahkan klik <a href="http://weather.is.kochi-u.ac.jp/sat/GAME/2013/May/IR1/"

target="_blank">disini. </a><br />

Data yang berhasil diunduh formatnya berupa file kompresan berformat .gz , ini bisa diekstrak dengan menggunakan <a href="http://www.7-zip.org/" target="_blank">.7zip</a> atau<a

href="http://www.rarlab.com/" target="_blank"> winrar.</a><a href="http://www.rarlab.com/"></a><br />

<br />

Kemudian untuk software - software pengolahan data adalah sebagai berikut : (klik untuk men-download) <br />

<a href="http://www.4shared.com/rar/vvPlO_27/ER_Mapper_701.html" target="_blank">2. ER Mapper 7.0</a> ,<br />

(32)

<a href="http://www.4shared.com/rar/7jdXqF31/xampp.html" target="_blank">4. XAMPP</a> ,<br />

<a href="http://www.4shared.com/file/mHKdjSDe/notepad_.html" target="_blank">5. Notepad ++</a> ,<br />

<a href="http://www.4shared.com/rar/zz1vKtc7/MACROMEDIA_FLASH_MX_6.html" target="_blank">6. Macromedia Flash MX </a>,<br />

<a href="https://creative.adobe.com/products/dreamweaver" target="_blank">7. Macromedia Dreamweaver 8</a> , </span>

<p class="style4">Langkah - langkah dalam pembuatan Peta Curah Hujan dapat dilihat pada link - link tutorial dibawah ini. Agar saudara tidak salah dalam langkah - langkah pembuatan peta nya, berikut adalah diagram alir nya :</p>

<p align="center"><a href="tutorial_clip_image002.gif" target="_blank"><img

src="tutorial_clip_image002.gif" alt="diagram_alir" width="370" height="411" border="0" /></a> <br />

<strong>Gambar. </strong>Diagram Alir</p>

<p class="style4">Selamat mencoba, semoga berhasil dan bermanfaat. Terima Kasih.</p> </blockquote>

<p align="justify"> <a href="konversi_data.html" class="capsule">1. Konversi PGM ke ERS </a><em>Covert file </em>dilakukan untuk mengubah format file dari format .pgm kedalam format .ers agar bisa dibuka dan dilakukan pengolahan data di software Er-Mapper 7.01.

Peng-<em>convert</em>-an <em>file</em> dilakukan dengan menggunakan software ENVI 4.3. Langkah-langkah konversi adalah sebagai berikut : </p>

</blockquote></td>

<p align="justify"> <a href="koreksi_geo.html" class="capsule">2. Koreksi Geometrik dengan GCP Point </a> Koreksi Geometrik pada dasarnya adalah meningkatkan ketelitian geometrik dengan menggunakan titik kendali / kontrol tanah (<em>Ground Control Point </em>biasa disingkat GCP). GCP dimaksud adalah titik yang diketahui koordinatnya secara tepat dan dapat terlihat pada citra inderaja satelit seperti perempatan jalan dan lain-lain. Adapun langkah-langkah untuk melakukan koreksi geometrik adalah sebagai berikut : </p>

</blockquote></td> </tr>

<p align="justify"><a href="penggabungan.html" class="capsule">3. Penggabungan Data Tiap Jam menjadi Data Harian </a>Untuk melakukan penggabungan data diperlukan langkah-langkahnya sebagai berikut: </p>

</blockquote></td> <td><blockquote>

<p align="justify"> <a href="konversi_BT.html" class="capsule">4. Konversi Nilai DN ke Brightness Temperature (BT) </a><span class="storyLeft">Data Citra MTSAT-1R itu berupa data raster yang<em> cell value</em> -nya masih berupa nilai warna pixel belum berupa nilai

<em>brightness</em> <em>temperature</em> yang sebenarnya. Oleh karena itu, untuk membuat Peta Curah Hujan diperlukan nilai <em>Brightness</em> <em>Temperature</em> yang sebenarnya untuk melakukan klasifikasi sehingga bisa dilakukan identifikasi terhadap peta tersebut.

(33)

<p align="justify"> <a href="klasifikasi.html" class="capsule">5. Klasifikasi nilai BT (Brightness Temperature)</a>Klasikasi nilai <em>Brightness Temperature</em> (BT) ini dilakukan untuk melakukan pengkelompokan agar bisa diidentifikasi area-area yang terindikasi terjadi Hujan Lebat, Hujan Sedang, Hujan Ringan ataupun malah Tidak Hujan (Cerah). <br />

Adapun klasifikasi nilai <em>Brightness Temperature </em>yaitu : </p> </blockquote></td>

<p align="justify"> <a href="tutorial_layout.html" class="capsule">6. Layout-ing Peta via Arc GIS </a><span style="line-height:25px">Dalam penelitian ini, proses <em>layouting </em>peta dilakukan dengan <em>software</em> ArcGIS. Data yang digunakan adalah citra hasil klasifikasi, yaitu data citra MTSAT-1R yang sudah diolah di Er Mapper dan Peta Administrasi Indonesia 2010.<br />

Pembuatan peta curah hujan dilakukan dengan menggabungkan data spasial Peta Administrasi Indonesia dengan hasil pengolahan citra MTSAT-1R yang telah di klasifikasi sebelumnya. </span></p>

<p align="justify"> <a href="tutorial_animasi.html" class="capsule">7. Membuat Animasi Peta via Macromedia Flash </a>Macromedia Flash adalah software yang salah satunya digunakan untuk membuat animasi bergerak yang terdiri dari gambar - gambar. Berikut ini adalah langkah - langkah untuk membuat animasinya : </p>

</blockquote></td>

4. Script Peta Curah Hujan (peta.html)

<h3 align="left">Peta Curah Hujan</h3>

<p align="left" class="style5">Berikut adalah Peta Curah Hujan yang merupakan hasil dari pengolahan data citra MTSAT-1R yang digabungkan dengan </p>

<p class="style5">data Administrasi Pulau Jawa Tahun 2010 : </p> <ol>

<p class="style5"><a href="peta_mei.html" target="_top">Peta Bulan Mei 2013</a></p> </li>

<p><a href="peta_juni.html" target="_self">Peta Bulan Juni 2013</a></p> </li>

<p><a href="peta_juli.html" target="_parent">Peta Bulan Juli 2013</a></p> </li>

(34)

</li> </ol>

<p class="style5">Anda juga dapat membuat Peta Curah Hujan sendiri dengan mengikuti step-step yang telah saya posting di Menu <a href="tutorial.html">Tutorial</a>.</p>

<p class="style5"> </p> <p class="style5">Terima Kasih </p> <p> </p>

a.

Script Peta Bulan Mei 2013 (peta_mei.html)

<h3 align="left">Peta Curah Hujan Bulan Mei 2013 </h3> <form id="form1" name="form1" method="post" action=""> <p> </p>

<p><span class="style6">Berikut adalah Peta Curah Hujan Bulan Mei 2013 : </span></p>

<br />

</label> </form>

<p align="left" class="style6">Anda juga dapat melihat peta curah hujan harian (per tanggal) sesuai dengan pilihan anda.</p>

<p align="left" class="style6">beikut adalah Kalender Bulan Mei 2013 : </p> <h2 align="center" class="style6"> </h2>

(35)

</div> </td>

(36)

(37)

<label>

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version= 5,0,0,0" name="peta" width="100" height="22" id="peta">

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version =ShockwaveFlash" type="application/x-shockwave-flash" name="peta" ></embed>

</object>

</div>

(38)

b.

Script Peta Bulan Juni 2013 (peta_juni.html)

<h3 align="left">Peta Curah Hujan Bulan Juni 2013 </h3> <form id="form1" name="form1" method="post" action=""> <p> </p>

<p><span class="style6">Berikut adalah Peta Curah Hujan Bulan Juni 2013 : </span></p>

<br />

</label> </form>

<p align="left" class="style6">beikut adalah Kalender Bulan Juni 2013 : </p> <h2 align="center" class="style6"> </h2>

(39)

(40)

(41)

</tr>

<label>

</object>

</div>

c.

Script Peta Bulan Juli 2013 (peta_juli.html)

<h3 align="left">Peta Curah Hujan Bulan Juli 2013 </h3> <form id="form1" name="form1" method="post" action=""> <p> </p>

<p><span class="style6">Berikut adalah Peta Curah Hujan Bulan Juli 2013 : </span></p>

<br />

(42)

</label> </form>

<p align="left" class="style6">beikut adalah Kalender Bulan Juli 2013 : </p> <h2 align="center" class="style6"> </h2>

(43)

(44)

(45)

<label>

</object> </div> </label> </form>

</div> </div>

</div>

<br />

</body> </html>

d.

Script Peta Bulan Agustus 2013 (peta_agust.html)

<h3 align="left">Peta Curah Hujan Bulan Agustus 2013 </h3> <form id="form1" name="form1" method="post" action=""> <p> </p>

<p><span class="style6">Berikut adalah Peta Curah Hujan Bulan Agustus 2013 : </span></p>

<br />

</label> </form>

<p align="left" class="style6">berikut adalah Kalender Bulan Agustus 2013 : </p> <h2 align="center" class="style6"> </h2>

(46)

<td class="calendar-day-head">Selasa</td>

(47)