PEMBUATAN SITUS WEB TAMAN BERMAIN ANAK
SHOLEH DENGAN MENGGUNAKAN PHOTOSHOP
DAN MACROMEDIA DREAMWEAVER 8
PROYEK SKRIPSI III
Diajukan untuk menyelesaikan mata kuliah Projek Program-III
Jenjang Pendidikan Strata 1
Tahun Akademik 2010-20
Disusun Oleh:
ARBA'ATUN NURHIDAYATI
109080640041
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER (STMIK)
PRANATA INDONESIA – BEKASI
2010
11
For Evaluation Only.
ii
LEMBAR PERSETUJUAN PEMBIMBING
Nama
: Arba'atun Nurhidayati
NPM
: 109080640041
Jurusan
: Teknik Informatika
Jenjang Pendidikan : Strata Satu (S1)
Tempat Penelitian : Taman Bermain Anak Sholeh
Judul
: Pembuatan Situs Web TB. Anak Sholeh Dengan
Menggunakan Adobe Photoshop CS 3 dan
Macromedia Dreamweaver
Dinyatakan telah SELESAI / BELUM SELESAI melaksanakan penulisan
laporan proyek situs web sehingga yang bersangkutan DIIZINKAN/TIDAK
DIIZINKAN mengikuti Ujian Project TA/Skripsi.
Bekasi, 23 Juni 2010
Pembimbing I
Pembimbing
II
Ahmad Ali Mahrus, S.Kom
Purwanto, S.Kom
NIK: 0920020213
NIK:
0910020082
Copyright(C) by Foxit Corporation,2005-2009
For Evaluation Only.
iii
LEMBAR PENGESAHAN SIDANG
Laporan ini telah diujikan pada tanggal …… Bulan ……. Tahun ……....
Dan dinyatakan : LULUS / TIDAK LULUS/LULUS BERSYARAT, dengan
catatan : ………...
………
No. Nama Penguji
Tanda Tangan
1.
………..
2.
………..
3.
………..
Menyetujui,
Koordinator Kampus B
Ketua Project TA/Skripsi
Drs. Rusli Puteh
Salman Farizy, S.Kom
NIK :9605001
NIK:960301110002.
iv
MOTTO DAN PERSEMBAHAN
MOTTO
BERUSAHA, BERDO'A DAN BERTAWAKAL
ADALAH JALAN MENUJU KEBERHASILAN
PERSEMBAHAN
v
Dengan memanjatkan puji serta syukur kehadirat Allah SWT dan
sholawat serta salam kepada junjungan kita Nabi Muhammad SAW,
akhirnya penulis dapat menyelesaikan penyusunan laporan proyek skripsi
tahap ketiga. Laporan program skripsi tahap ketiga ini disusun dengan
judul "Pembuatan Situs Web Taman Bermain Anak Sholeh dengan
Menggunakan Adobe Photoshop dan Macromedia Dreamweaver".
Hal ini dimaksudkan agar dalam tahap ketiga ini menjadikan suatu jalan
menuju program web yang sebenarnya.
Terima kasih penulis ucapkan yang sebesar-besarnya kepada :
1. Bapak Drs. Rusli Puteh, selaku Koordinator Kampus B STMIK
Pranata Indonesia
2. Bapak Salman Farizy, S.Kom, MCP, MCSA, MCTS, MCITP, selaku
Wakil Koordinator Kampus B Taman Bermain Anak Sholeh.
3. Bapak Ahmad Ali Mahrus, S.Kom selaku dosen pembimbing project
skripsi tahap ketiga.
4. Orang Tua dan
Keluarga yang selalu
memberi do'a
dan
dukungannya.
5. Teman-teman, yang memberi semangat, motivasi, dan masukan
yang sangat membantu dalampenyusunan laporan proyek situs web
ini.
vi
skripsi tahap ketiga ini jauh dari sempurna. Oleh karena itu penulis
mengharapkan masukan dari berbagai pihak yang sifatnya membangun,
untuk kemajuan penulis di masa yang akan datang.
Bekasi, Oktober 2010
vii
LEMBAR PERSETUJUAN PEMBIMBING ... ii
LEMBAR PENGESAHAN SIDANG ... iii
MOTTO DAN PERSEMBAHAN ...iv
KATA PENGANTAR ... v
DAFTAR ISI ... vii
BAB I PENDAHULUAN
1.1 Latar Belakang Masalah ... 1
1.2 Identifikasi Masalah ... 2
1.3 Pembatasan Masalah ... 2
1.4 Maksud Penulisan Laporan ... 2
1.5 Tujuan Penulisan Laporan ... 3
1.6 Metode Penulisan ... 3
1.7 Sistematika Penulisan ... 4
BAB II LANDASAN TEORI
2.1 Website … ... 5
2.1.1 Pengertian ... 5
2.1.2 Unsur Dalam Penyediaan Website ... 6
2.2 Adobe Photoshop ... 7
2.2.1 Pengertian ... 7
viii
2.3 Macromedia Dreamweaver
………. 9
2.4
Kelompok Bermain (play group) ………. 10
BAB III RANCANGAN DAN IMPLEMETASI
3.1 Perancangan
………... 11
3.1.1 Perancangan Halaman Home
…….……….. 11
3.1.2 Perancangan Halaman Visi ……… 12
3.1.3 Perancangan Halaman Misi
………... 12
3.1.4 Perancangan Halaman Gallery
……….. 13
3.1.5 Perancangan Halaman Sub Gallery
………. 14
3.2 Implementasi
……… 15
3.2.1 Implementasi Halaman Home
……….. 15
3.2.2 Implementasi Halaman Visi ………... 16
3.2.3 Implementasi Halaman Misi
……….. 16
3.2.4 Implementasi Halaman Gallery
………. 17
3.2.5 Implementasi Halaman Sub Gallery
………. 17
3.3 Proses Pembuatan
……….. 18
3.3.1 Perancangan Desain Template
………. 18
3.3.2 Pengelolaan Website ………... 18
3.3.3 Imlementasi
……… 18
BAB IV PENUTUP
4.1 Kesimpulan
……….... 19
ix
DAFTAR RIWAYAT HIDUP
LAMPIRAN-LAMPIRAN
1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Semakin berkembangnya zaman maka semakin tinggi pula
permintaan
masyarakat
akan
adanya
teknologi
yang
dapat
memberikan pelayanan informasi mengenai berbagai macam hal,
antara lain informasi pendidikan, kesehatan, bisnis, hukum dan lain
sebagainya.
Dengan
menggunakan
kecanggihan
system
komputerisasi
yaitu
situs
web,
maka
suatu
institusi
dapat
mengenalkan berbagai produknya ke masyarakat luas. Situs web
dapat digunakan untuk mempromosikan keunggulan institusinya.
Oleh karena itu dalam penulisan Laporan Proyek Tugas Akhir ini
penulis memilih judul Program Situs Web Sekolah dengan
Menggunakan Adobe Photoshop dan Macromedia Dreamweaver.
Dalam tugas laporan ini penulis membahas penerapan Adobe
Photoshop
dan
Macromedia
Dreamweaver
dalam
pembuatan
sebuah situs web sederhana dengan konsep dasar untuk membantu
suatu institusi sekolah dalam mempromosikan keunggulannya dalam
bidang pendidikan.
Tentunya penulis bukan orang yang mengerti benar mengenai
situs web, tetapi dengan belajar selalu berlatih dan mencoba
diharapkan
mampu
menghasilkan
karya
yang
baik.
Penulis
mengucapkan terima kasih atas perhatian dan kesempatan yang
diberikan.
1.2 Identifikasi Masalah
Dewasa ini di dalam dunia pendidikan semakin bersaing dalam
menunjukkan kualitasnya. Namun promosi yang dilakukan masih
belum maksimal karena belum menggunakan media elektronik
sehingga masyarakat belum begitu mudah untuk mengakses
informasi yang dibutuhkan.
1.3 Pembatasan Masalah
Sehubungan dengan hal tersebut diatas penulis membatasi
masalah hanya pada media yang akan digunakan untuk
melakukan promosi yaitu dengan membuat Situs Web sederhana di
Internet.
1.4 Maksud Penulisan Laporan
Penulisan Laporan Proyek Tugas Akhir tahap ketiga bermaksud
untuk
mengetahui
sejauh
mana
kemampuan
penulis
dalam
mempelajari dan memahami Adobe Photoshop dan Macromedia
3
Dreaweaver dalam penerapannya ke sebuah Situs Web selama
mengikuti Program Proyek Tugas Akhir ini.
1.5 Tujuan Penulisan Laporan
Adapun tujuan dalam penulisan laporan ini, antara lain :
a. Memenuhi Tugas Akhir tahap ketiga sebagai syarat kelulusan
bagi mahasiswa STMIK Pranata Indonesia.
b. Sebagai sarana promosi bagi institusi terkait.
c. Media pembelajaran bagi mahasiswa tentang teknik penulisan
laporan.
d. Memberikan wawasan kepada penulis maupun pembaca.
1.6 Metode Penulisan
Adapun metode penulisan yang digunakan oleh penulis, antara lain :
1. Pustaka, yaitu memperoleh informasi dari berbagai buku-buku
yang berkaitan dengan judul karya tulis.
2. Observasi, yaitu mendapatkan informasi dengan cara melakukan
wawancara dengan institusi yang terkait.
3. Internet, yaitu dengan cara browsing ke situs-situs yang
menunjang karya tulis.
1.7 Sistematika Penulisan
Adapun sistematika penulisan agar penataannya lebih rapi :
BAB I PENDAHULUAN
Bab ini terdiri dari Latar Belakang, Identifikasi Masalah,
Pembatasan Masalah, Maksud Penulisan Laporan, Tujuan
Penulisan
Laporan,
Metode
Penulisan,
Sistematika
Penulisan
BAB II LANDASAN TEORI
Bab ini terdiri dari Website, Adobe Photoshop, Macromedia
Dreamweaver.
BAB III RANCANGAN DAN IMPLEMETASI
Bab ini membahas mengenai rancangan atau tampilan web
yang dibuat menggunakan Photoshop.
BAB IV PENUTUP
Bab ini menyajikan kesimpulan dan saran penulis yang
berkaitan dengan panulisan laporan ini.
5
BAB II
LANDASAN TEORI
2.1 Website
2.1.1
Pengertian
Website atau situs juga dapat diartikan sebagai
kumpulan halaman yang menampilkan informasi data teks,
data gambar diam atau gerak, data animasi, suara, video
dan atau gabungan dari semuanya, baik yang bersifat statis
maupun dinamis yang membentuk satu rangkaian bangunan
yang saling terkait dimana masing-masing dihubungkan
dengan jaringan-jaringan halaman (hyperlink). Bersifat
statis apabila isi informasi website tetap, jarang berubah,
dan isi informasinya searah hanya dari pemilik website.
Bersifat dinamis apabila isi informasi website selalu
berubah-ubah, dan isi informasinya interaktif dua arah
berasal dari pemilik serta pengguna website. Contoh website
statis adalah berisi profil perusahaan, sedangkan website
dinamis adalah seperti Friendster, Multiply, dll. Dalam sisi
pengembangannya, website statis hanya bisa diupdate oleh
pemiliknya saja, sedangkan website dinamis bisa diupdate
oleh pengguna maupun pemilik.
2.1.2
Unsur dalam Penyediaan Website
Untuk menyediakan sebuah website, maka kita
harus menyeediakan unsur penunjangnya, yaitu Nama
domain atau biasa disebut dengan Domain Name atau URL
adalah alamat unik di dunia internet yang digunakan untuk
mengidentifikasi sebuah website, atau dengan kata lain
domain name
adalah alamat
yang digunakan
untuk
menemukan sebuah website pada dunia internet. Contoh :
http://www.nama situs .com
Nama
domain
sendiri
mempunyai
identifikasi
ekstensi /akhiran sesuai dengan kepentingan dan lokasi
keberadaan website tersebut. Contoh nama domain
ber-ekstensi internasional adalah com, net, org, info, biz, name,
ws. Contoh nama domain ber-ekstensi lokasi Negara
Indonesia adalah :
.co.id : Untuk Badan Usaha yang mempunyai badan
hukum sah
.ac.id : Untuk Lembaga Pendidikan
.go.id : Khusus untuk Lembaga Pemerintahan Republik
Indonesia
7
.mil.id : Khusus untuk Lembaga Militer Republik
Indonesia
.or.id : Untuk segala macam organisasi yand tidak
termasuk dalam kategori “ac.id”,”co.id”,”go.id”,”mil.id” dan
lain lain
.war.net.id : untuk industri warung internet di Indonesia
.sch.id : khusus untuk Lembaga Pendidikan yang
menyelenggara kan pendidikan seperti SD, SMP dan
atau SMU
.web.id : Ditujukan bagi badan usaha, organisasi ataupun
perseorangan yang melakukan kegiatannya di World
Wide Web.
2.2
Adobe Photoshop
2.2.1
Pengertian
Photoshop adalah software yang digunakan untuk
memodifikasi gambar atau foto secara profesional baik
meliputi modifikasi obyek yang sederhana maupun yang sulit
sekalipun. Photoshop merupakan salah satu software yang
berguna untuk mengolah gambar berbasis bitmap, yang
mempunyai tool dan efek yang lengkap sehingga dapat
menghasilkan gambar atau foto yang berkualitas tinggi.
2.2.2
Bagian-bagian Photoshop
Photoshop terdiri dari beberapa bagian
dalam
tampilannya, yaitu :
a. Menu Bar
Menu bar adalah menu pulldown yang berisi
perintah-perintah dalam Photoshop seperti menu File, Edit, Image,
Layer, Select, Filter, View, Window, dan Help. Baris menu
ini terkelompok berdasarkan topiknya.
b. Toolbox
Toolbox
adalah
alat-alat
yang
digunakan
untuk
memodifikasi image (gambar atau foto). Alat-alat ini juga
dikelompokkan menurut jenisnya.
c. Canvas
Canvas adalah bidang yang digunakan sebagai tempat
untuk meletakkan image. Biasanya ukuran canvas akan
sama dengan ukuran image, tetapi dalam Photoshop kita
dapat merubah ukuran canvas dan image sesuai dengan
kebutuhan. Kalau kita memunculkan canvas baru biasanya
ada tiga pilihan yaitu canvas yang putih, berwarna dan
transparan.
9
d. Window Pallete
Window pallete adalah window yang berguna untuk
memilih atau mengatur berbagai parameter pada saat
menyunting image dalam Photoshop. Untuk menampilkan
Window Pallete dapat kita lakukan dengan cara memilih
menu Window kemudian pilih pallete yang dimunculkan.
2.3
Macromedia Dreamweaver
Macromedia Dreamweaver adalah sebuah HTML editor
profesional untuk mendesain secara visual dan mengelola situs
web maupun halaman web. Bilamana kita menyukai untuk
berurusan dengan kode-kode HTML secara manual atau lebih
menyukai
bekerja
dengan
lingkungan
secara
visual
dalam
melakukan editing, Dreamweaver mambuatnya menjadi lebih
mudah dengan menyediakan tool-tool yang sangat berguna dalam
peningkatan kemampuan dan pengalaman kita dalam mendesain
web.
Dreamweaver MX dalam hal ini digunakan untuk web
desain.Dreamweaver MX mengikutsertakan banyak tool untuk
kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara
lain : Referensi HTML, CSS dan Javascript, Javascript debugger,
dan editor kode ( tampilan kode dan Code inspector) yang
mengizinkan kita mengedit kode Javascript, XML, dan dokumen
teks lain secara langsung dalam
Dreamweaver. Teknologi Dreamweaver Roundtrip HTML
mampu mengimpor dokumen HTML tanpa perlu memformat ulang
kode tersebut dan kita dapat menggunakan Dreamweaver pula
untuk membersihkan dan memformat ulang HTML bila kita
menginginkannya.
Selain
itu
Dreamweaver
juga
dilengkapi
kemampuan manajemen situs, yang memudahkan kita mengelola
keseluruhan elemen yang ada dalam situs. Kita juga dapat
melakukan evaluasi situs dengan melakukan pengecekan broken
link, kompatibilitas browser, maupun perkiraan waktu download
halaman web.
2.4
Kelompok Bermain (play group)
Kelompok Bermain atau sering kita sebut dengan play group
merupakan satuan pendidikan anak usia dini pada jalur pendidikan
non formal yang menyelenggarakan pendidikan bagi anak usia di
bawah lima tahun. Kelompok bermain umumnya beroperasi sampai
siang hari dan hanya 3 kali saja dalam 1 pekan.
Di sini anak bisa belajar sambil bermain melalui alat
permainan yang sudah didesain untuk memberikan
stimulus-stimulus kepada si anak. Sehingga kemampuan otak bisa diaktifkan
sejak dini. Kelompok bermain juga menjadi sebuah ajang
sosialisasi bagi
anak usia
dini.
Hal ini
bertujuan
untuk
11
menumbuhkan
rasa
kepercayaan
diri,
kepedulian
terhadap
sesame, dan juga kemandirian.
Dewasa ini banyak orang tua yang menyadari akan
pentingnya sekolah di usia dini bagi anak-anaknya, apalagi bagi
orang tua yang sibuk bekerja sehingga tidak sempat mendidik
anak-anaknya secara maksimal.
Kesempatan inilah yang membuat setiap sekolah kelompok
bermain perlu untuk memberikan informasi kepada masyarakat luas
mengenai pentingnya sekolah di usia dini. Oleh karena itu, promosi
lewat internet merupakan jalan terbaik dan termudah yang bisa
dimanfaatkan.
11
BAB III
PERANCANGAN DAN IMPLEMENTASI
3.1 Perancangan
Dalam awal pembuatan sebuah web, perancangan desain
templatenya harus dibuat terlebih dulu. Semakin tinggi kreatifitas,
maka akan semakin indah dan menarik pula desain yang dihasilkan.
Berikut akan dibahas pola-pola setiap halaman yang akan dibuat.
3.1.1 Perancangan Halaman Home
Banner
logo
Home
Halaman layout ini terdiri dari bentuk format teks. Sedangkan
isiannya berupa :
a. Informasi umum
b. Alamat
12
3.1.2 Perancangan Halaman Visi
Banner
logo
Visi
Halaman layout ini terdiri dari bentuk format teks. Sedangkan
isiannya berupa visi dari institusi.
3.1.3 Perancangan Halaman Misi
Banner
logo
Halaman layout ini terdiri dari bentuk format teks. Sedangkan
isiannya berupa misi dari institusi.
3.1.4 Perancangan Halaman Gallery
Banner
logo
Gallery
Halaman layout ini terdiri dari bentuk format teks dan
gambar. Sedangkan isiannya berupa foto-foto kegiatan.
Dalam halaman ini terdapat koneksi ke halaman sub gallery
yang berisi foto-foto kegiatan yang lebih detail.
14
3.1.5 Perancangan Halaman Sub Gallery
Banner
Gallery
Halaman layout ini terdiri dari bentuk format teks dan gambar.
Sedangkan isiannya berupa :
a. Foto kegiatan
b. Nama
3.2 Implementasi
Setelah membuat rancangan
layout tampilannya,
maka
langkah
selanjutnya
yaitu
mengimplementasikan
ke
dalam
pembuatan sebuah situs web dengan menggunakan program yang
diperlukan yaitu Adobe Photoshop CS3 untuk desain templatenya
lalu diaplikasikan melalui Macromedia Dreamweaver 8.
3.2.1 Implementasi Halaman Home
16
3.2.2 Implementasi Halaman Visi
Untuk melihat listing program ada di Lampiran. 4
3.3.3 Implementasi Halaman Misi
3.3.4 Implementasi Halaman Gallery
Untuk melihat listing program ada di Lampiran.6
3.3.5 Implementasi Halaman Sub Gallery (Gallery TABAS)
18
3.3 Proses Pembuatan
Dalam pembuatan sebuah situs web terdapat beberapa
langkah yang harus direncanakan, yaitu sebagai berikut :
3.3.1 Perancangan Desain Template
Merupakan langkah awal, yaitu membuat desain
templatenya menggunakan suatu program aplikasi. Dalam
tugas kali ini penulis menggunakan Adobe Photoshop CS3.
Melalui program ini kita bisa memaksimalkan daya kreatifitas
dengan cara mengolah berbagai warna, gambar dan teks
yang ada sehingga terbentuklah suatu desain website yang
menarik.
3.3.2 Pengelolaan website
Setelah desain template selesai, maka kita perlu
mengelolanya agar bisa terkoneksi satu sama lain melalui
tools
"link"
yang
sudah
disediakan
dalam
program
Macromedia Dreaweaver 8.
3.3.3 Implementasi
Merupakan langkah terakhir, yaitu
mengimplementasi-kan website yang telah dibuat.
19
BAB IV
PENUTUP
4.1 Kesimpulan
Project ini bermanfaat untuk meningkatkan pengetahun
pemahaman tentang situs website. Proses pembuatan project ini
bertujuan untuk menumbuhkan sifat kreatif, inovatif, berdikari
sehingga mampu menghasilkan karya yang baik. Dan dapat
menjadi seorang pembuat situs website yang baik. Melalui project
ini mahasiswa dapat mempelajari segala hal tentang situs web.
Secara umum, pembuatan suatu situs web melalui beberapa
proses
yaitu
diantaranya,
merancang
design
atau
layout,
penentuan dan penempatan objek, lalu mengkoneksikan objek.
Hal yang penting dalam pembuatan situs web adalah
terbentuknya suatu situs web yang bagus. Penulis menyimpulkan
sebagai berikut :
1. Situs web yang bagus adalah situs web yang mampu
menyampaikan informasi yang diinginkan oleh pengguna.
2. Situs web yang bagus juga harus menarik, supaya
pengguna lebih tertarik untuk lebih mendalami apa yang
dipromosikan oleh pemilik situs tersebut.
20
4.2 Saran
Banyak hal yang didapat penulis selama proses pembuatan
situs web ini. Bukan hal mudah untuk mempelajari dan membuat
project ini baik secara teori maupun praktik di lapangan. Oleh
karena itu penulis ingin manyampaikan beberapa hal sebagai
berikut :
1. Diperlukan kreatifitas yang tinggi untuk menghasilkan karya
yang efektif dan juga menarik bagi pengguna.
2. Hendaknya
dalam
pembuatan
situs
web
menggunaka
perencanaan yang baik. Mulai dari perancangan, pembuatan
hingga pemanfaatannya. Sehingga penggunaan waktu bisa
efisien.
Zainuddin, Imam, dkk.2010.Projek Skripsi / TA III Situs Web.Bekasi:
STMIK Pranata Indonesia
Komputer, Wahana.2006.
Tutorial 5 Hari Membuat Website Interaktif
dengan Macromedia Dreamweaver 8 .Jakarta:Andi Publisher
________________2005. Adobe Photoshop untuk Desainer Web.Jakarta:
Andi Publisher
blog.re.or.id/macromedia-dreamweaver-mx-web-editor.htm
repository.usu.ac.id/bitstream/123456789/16955/4/Chapter%20II.pdf
www.total.or.id/info.php?kk=Adobe%20Photoshop
DAFTAR RIWAYAT HIDUP
Penulis dilahirkan di Jakarta pada tanggal 11 Juli 1989 dari ayah
H. Muntawalib dan ibu Siti Amirah, merupakan putri keempat dari empat
bersaudara. Tahun 2007 penulis lulus dari SMK Nina Insan Kamil
Bekasi. Berselang 1 tahun, yaitu tahun 2008 penulis melanjutkan kuliah
dan mengambil kelas sarjana di STMIK Pranata Indonesia dengan
memilih jurusan Teknik Informatika.
Saat ini penulis juga sedang bekerja di sebuah play group, yaitu
Taman Bermain Anak Sholeh. Karena kecintaannya terhadap kehidupan
anak-anak di play group inilah penulis termotivasi untuk membuat website
ini.
1. Kode listing index.html
<html><head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"> <script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <style type="text/css"> <!-- #Layer1 { position:absolute; left:99px; top:140px; width:627px; height:445px; z-index:1; } body { background-color: #000000; background-image: url(images/Machovka_Happy_fish.JPG); }
.style3 {font-family: "Kristen ITC"; font-size: 14px;} .style4 { font-family: "Curlz MT"; font-size: 30px; font-weight: bold; } .style5 { font-size: 16px; font-family: "Californian FB"; } #Layer2 { position:absolute; left:728px; top:14px; width:101px; height:98px; z-index:2;
#Layer3 { position:absolute; left:705px; top:418px; width:131px; height:93px; z-index:3; } --> </style> </head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('images/hover_03.gif','images/hover_04.gif','images/hover_05.gif','images/ho ver_06.gif')">
<!-- ImageReady Slices (Untitled-1) --> <div id="Layer1"> <ul type="square"> <li> <h1 align="left" class="style4">Home </h1> </li> </ul> <blockquote> <blockquote>
<h4 align="justify" class="style3"> Memberikan pendidikan kepada anak di usia dini merupakan momentum
yang amat penting. Para ahli pendidikan menamakan usia pra sekolah sebagai "golden age" (usia emas). Setiap orang tua muslim tentu memiliki obsesi untuk memiliki putra-putri yang cerdas secara intelegensi, emosional, dan spiritual.</h4><h4 align="justify" class="style3">Taman Bermain Anak Sholeh merupakan lembaga pendidikan pra sekolah (play group) yang menerapkan dasar-dasar pendidikan islami dengan mengacu Pada Kurikulum Departemen Pendidikan Nasional yang dimodifikasi, berbasis pada kecerdasan intelegensi, emosional, dan spiritual disesuaikan dengan ciri khas Taman Bermain Anak Sholeh melalui metode sentra.</h4>
</blockquote>
<h4 align="justify"> </h4> <blockquote>
<h4 align="justify" class="style5">Hubungi kami : Taman Bermain Anak Sholeh, Taman Iqro' Permai No. 24 Rt. 01 / 09 Jatimakmur - Pondok Gede - Bekasi </h4>
</blockquote> </blockquote> </div>
<div id="Layer2"><img src="images/logo.JPG" width="100" height="100"></div>
<div id="Layer3"><img src="images/Machovka_Happy_fish.JPG" width="145" height="101"></div>
<table width="800" height="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00FF00" id="Table_01">
<tr>
<td colspan="2"><div><img src="images/index_01.gif" width="800" height="129" alt=""></div></td>
</tr> <tr>
<td rowspan="5">
<img src="images/index_02.gif" alt="" width="628" height="471" lowsrc="images/index_02.gif"></td>
<td><a href="index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('home','','images/hover_03.gif',1)"><img src="images/index_03.gif" alt="home" name="home" width="172" height="71" border="0"></a></td>
</tr> <tr>
<td><a href="visi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('visi','','images/hover_04.gif',1)"><img src="images/index_04.gif" alt="visi" name="visi" width="172" height="48" border="0"></a></td>
</tr> <tr>
<td><a href="misi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('misi','','images/hover_05.gif',1)"><img src="images/index_05.gif" alt="misi" name="misi" width="172" height="53" border="0"></a></td>
</tr> <tr>
name="gallery" width="172" height="44" border="0"></a></td> </tr>
<tr>
<td>
<img src="images/index_07.gif" width="172" height="255" alt=""></td> </tr>
</table>
<!-- End ImageReady Slices --> </body>
</html>
2. Kode listing visi.html
<html><head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"> <script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <style type="text/css"> <!-- #Layer1 { position:absolute; left:99px; top:140px; width:627px; height:483px; z-index:1; } body { background-color: #000000; background-image: url(images/Machovka_Happy_fish.JPG); } .style4 { font-family: "Curlz MT"; font-size: 30px; font-weight: bold; }
.style6 {font-family: "Kristen ITC"; font-size: 18px; } #Layer2 {
left:728px; top:14px; width:98px; height:102px; z-index:2; } #Layer3 { position:absolute; left:724px; top:403px; width:121px; height:142px; z-index:3; } #Layer4 { position:absolute; left:569px; top:442px; width:225px; height:123px; z-index:3; } #Layer5 { position:absolute; left:624px; top:414px; width:189px; height:113px; z-index:3; } --> </style> </head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('images/hover_03.gif','images/hover_04.gif','images/hover_05.gif','images/ho ver_06.gif')">
<!-- ImageReady Slices (Untitled-1) --> <div id="Layer1"> <ul type="square"> <li> <h1 align="left" class="style4">Visi</h1> </li> </ul> <blockquote> <blockquote>
<h4 align="center" class="style6">Menjadi Model Play Group Islami </h4> <h4 align="center" class="style6">yang Berkualitas </h4>
<h4 align="center" class="style6">dalam Menyiapkan Generasi Robbani </h4> <h4 align="center" class="style6">yang Berakhlak Islami </h4>
</blockquote> <blockquote> <p> </p> <p> </p> <p> </p> </blockquote> </blockquote> </div> <div id="Layer2">
<div id="layer"><img src="images/logo.JPG" width="100" height="100"></div> </div>
<div id="Layer5"><img src="images/ikan2.JPG" width="218" height="135"></div> <table width="800" height="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00FF00" id="Table_01">
<tr>
<td colspan="2"><img src="images/index_01.gif" width="800" height="129" alt=""></td> </tr>
<tr>
<td><a href="index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('home','','images/hover_03.gif',1)"><img src="images/index_03.gif" alt="home" name="home" width="172" height="71" border="0"></a></td>
</tr> <tr>
<td><a href="visi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('visi','','images/hover_04.gif',1)"><img src="images/index_04.gif" alt="visi" name="visi" width="172" height="48" border="0"></a></td>
</tr> <tr>
<td><a href="misi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('misi','','images/hover_05.gif',1)"><img src="images/index_05.gif" alt="misi" name="misi" width="172" height="53" border="0"></a></td>
</tr> <tr>
<td><a href="gallery.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('gallery','','images/hover_06.gif',1)"><img src="images/index_06.gif" alt="gallery" name="gallery" width="172" height="44" border="0"></a></td>
</tr> <tr>
<td>
<img src="images/index_07.gif" width="172" height="255" alt=""></td> </tr>
</table>
<!-- End ImageReady Slices --> </body>
</html>
3. Kode listing misi.html
<html><head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"> <script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <style type="text/css"> <!-- #Layer1 {
left:99px; top:140px; width:587px; height:445px; z-index:1; } body { background-color: #000000; background-image: url(images/Machovka_Happy_fish.JPG); } .style4 { font-family: "Curlz MT"; font-size: 30px; font-weight: bold; }
.style6 {font-family: "Kristen ITC"; font-size: 18px; } .style8 {
font-family: "Kristen ITC"; font-size: 14px; font-weight: bold; } #Layer2 { position:absolute; left:728px; top:14px; width:99px; height:98px; z-index:2; } #Layer3 { position:absolute; left:725px; top:401px; width:118px; height:150px; z-index:3; } #Layer4 { position:absolute; left:729px; top:397px; width:110px; height:152px; z-index:3; } --> </style> </head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('images/hover_03.gif','images/hover_04.gif','images/hover_05.gif','images/ho ver_06.gif')">
<!-- ImageReady Slices (Untitled-1) --> <div id="Layer1">
<ul type="square"> <li>
<h1 align="left" class="style4">Misi</h1> <ol class="style8"><li>
<p align="justify">Memberikan pelayanan pendidikan yang membantu meletakkan dasar-dasar Keimanan, Ketaqwaan, dana Akhlakul Karimah</p>
</li> <li>
<p align="justify">Mewujudkan program pendidikan yang mengintegrasikan kecerdasan intelegensi (IQ), kecerdasan emosional (EQ), dan kecerdasan spiritual (SQ)</p>
</li> <li>
<p align="justify">Mewujudkan lingkungan belajar yang kondusif dengan membangun hubungan yang sinergis dan harmonis antara pengelola, pimpinan, dan seluruh staff sekolah, pa ra orang tua murid serta masyarakat</p>
<p align="justify">Mewujudkan kurikulum yang berkualitas danmampu menjadi model play group islami </p> </li> </ol> </li> </ul> <blockquote> <blockquote> <h4 align="center" class="style6"> </h4> </blockquote> </blockquote> </div> <div id="Layer2"> <div id="layer">
<div id="div"><img src="images/logo.JPG" width="100" height="100"></div> </div>
</div>
<div id="Layer4"><img src="images/kudalaut.JPG" width="119" height="164"></div> <table width="800" height="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00FF00" id="Table_01">
<tr>
<td colspan="2"><img src="images/index_01.gif" width="800" height="129" alt=""></td> </tr>
<tr>
<td rowspan="5">
<img src="images/index_02.gif" alt="" width="628" height="471" lowsrc="images/index_02.gif"></td>
<td><a href="index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('home','','images/hover_03.gif',1)"><img src="images/index_03.gif" alt="home" name="home" width="172" height="71" border="0"></a></td>
</tr> <tr>
<td><a href="visi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('visi','','images/hover_04.gif',1)"><img src="images/index_04.gif" alt="visi" name="visi" width="172" height="48" border="0"></a></td>
</tr> <tr>
<td><a href="misi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('misi','','images/hover_05.gif',1)"><img src="images/index_05.gif" alt="misi" name="misi" width="172" height="53" border="0"></a></td>
</tr> <tr>
<td><a href="gallery.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('gallery','','images/hover_06.gif',1)"><img src="images/index_06.gif" alt="gallery" name="gallery" width="172" height="44" border="0"></a></td>
</tr> <tr>
<td>
<img src="images/index_07.gif" width="172" height="255" alt=""></td> </tr>
</table>
<!-- End ImageReady Slices --> </body>
</html>
4. Kode listing gallery.html
<html><head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"> <script type="text/JavaScript">
<!--
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <style type="text/css"> <!-- #Layer1 { position:absolute; left:99px; top:140px; width:627px; height:445px; z-index:1; } body { background-color: #000000; background-image: url(images/Machovka_Happy_fish.JPG); }
.style3 {font-family: "Kristen ITC"; font-size: 14px;} .style4 {
font-family: "Curlz MT"; font-size: 30px; font-weight: bold; }
.style6 {font-family: "Kristen ITC"; font-size: 18px; } .style7 {font-size: 18px} #Layer2 { position:absolute; left:728px; top:14px; width:102px; height:97px; z-index:2; } --> </style> </head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('images/hover_03.gif','images/hover_04.gif','images/hover_05.gif','images/ho ver_06.gif')">
<!-- ImageReady Slices (Untitled-1) --> <div id="Layer1"> <ul type="square"> <li> <h1 align="left" class="style4">Gallery</h1> </li> </ul>
<p align="left"><a href="gallery1.html"> <img src="images/foto1.JPG" width="130" height="100" hspace="50" border="0"></a><a href="gallery2.html"><img src="images/foto2.JPG" width="130"
<p align="left"> </p>
<p align="left"><a href="gallery4.html"><img src="images/foto4.JPG" width="130" height="100" hspace="50" border="0"></a><a href="gallery5.html"><img src="images/foto5.JPG" width="130" height="100" border="0"></a> <a href="gallery6.html"><img src="images/foto6.JPG" width="130" height="100" hspace="50" border="0"></a></p>
<p align="left"> </p> <blockquote> <blockquote> <h4 align="left" class="style3"> </h4> <h4 align="center" class="style6"> </h4> </blockquote> </blockquote> </div> <div id="Layer2"> <div id="layer">
<div id="div"><img src="images/logo.JPG" width="100" height="100"></div> </div>
</div>
<table width="800" height="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00FF00" id="Table_01">
<tr>
<td colspan="2"><img src="images/index_01.gif" width="800" height="129" alt=""></td> </tr>
<tr>
<td rowspan="5">
<img src="images/index_02.gif" alt="" width="628" height="471" lowsrc="images/index_02.gif"></td>
<td><a href="index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('home','','images/hover_03.gif',1)"><img src="images/index_03.gif" alt="home" name="home" width="172" height="71" border="0"></a></td>
</tr> <tr>
<td><a href="visi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('visi','','images/hover_04.gif',1)"><img src="images/index_04.gif" alt="visi" name="visi" width="172" height="48" border="0"></a></td>
</tr> <tr>
<td><a href="misi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('misi','','images/hover_05.gif',1)"><img src="images/index_05.gif" alt="misi" name="misi" width="172" height="53" border="0"></a></td>
</tr> <tr>
<td><a href="gallery.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('gallery','','images/hover_06.gif',1)"><img src="images/index_06.gif" alt="gallery" name="gallery" width="172" height="44" border="0"></a></td>
</tr> <tr>
<td>
<img src="images/index_07.gif" width="172" height="255" alt=""></td> </tr>
</table>
<!-- End ImageReady Slices --> </body>
</html>
5. Kode listing gallery1.html
<html><head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256"> <script type="text/JavaScript">
<!--
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <style type="text/css"> <!-- #Layer1 { position:absolute; left:99px; top:140px; width:627px; height:445px; z-index:1; } body { background-color: #000000; background-image: url(images/Machovka_Happy_fish.JPG); } .style3 {
font-family: "Kristen ITC"; font-size: 14px; font-weight: bold; } .style4 { font-family: "Curlz MT"; font-size: 30px; font-weight: bold; }
.style6 {font-family: "Kristen ITC"; font-size: 18px; } #Layer2 { position:absolute; left:726px; top:15px; width:102px; height:94px; z-index:2; } --> </style> </head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('images/hover_03.gif','images/hover_04.gif','images/hover_05.gif','images/ho ver_06.gif')">
<!-- ImageReady Slices (Untitled-1) --> <div id="Layer1">
<ul type="square"> <li>
<h1 align="left" class="style4">Gallery TABAS </h1> </li>
<blockquote> <em> </em> <blockquote>
<p align="left" class="style3">Nama kegiatan : Bersih-bersih Lingkungan</p> <p align="left" class="style3">Lokasi : Outdoor Taman Bermain Anak Sholeh</p> </blockquote> <p align="left" class="style3"> </p> <h4 align="center" class="style6"> </h4> </blockquote> </blockquote> </div>
<table width="800" height="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00FF00" id="Table_01">
<tr>
<td colspan="2"><img src="images/index_01.gif" width="800" height="129" alt=""></td> </tr>
<tr>
<td rowspan="5">
<img src="images/index_02.gif" alt="" width="628" height="471" lowsrc="images/index_02.gif"></td>
<td><a href="index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('home','','images/hover_03.gif',1)"><img src="images/index_03.gif" alt="home" name="home" width="172" height="71" border="0"></a></td>
</tr> <tr>
<td><a href="visi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('visi','','images/hover_04.gif',1)"><img src="images/index_04.gif" alt="visi" name="visi" width="172" height="48" border="0"></a></td>
</tr> <tr>
<td><a href="misi.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('misi','','images/hover_05.gif',1)"><img src="images/index_05.gif" alt="misi" name="misi" width="172" height="53" border="0"></a></td>
</tr> <tr>
<td><a href="gallery.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('gallery','','images/hover_06.gif',1)"><img src="images/index_06.gif" alt="gallery" name="gallery" width="172" height="44" border="0"></a></td>
</tr> <tr>
<td>
<img src="images/index_07.gif" width="172" height="255" alt=""></td> </tr>
</table>
<!-- End ImageReady Slices --> </body>