PROGRAM SITUS WEB - · PDF filesholawat serta salam kepada junjungan kita Nabi Muhammad SAW,...

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

Mahrus

Typewriter

11

Edited by Foxit Reader Copyright(C) by Foxit Corporation,2005-2009 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:

Mahrus

Typewriter

0910020082


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

Untuk kedua orang tua dan kakak-kakakku tercinta

v

KATA PENGANTAR

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

Penulis menyadari bahwa dalam penyusunan proyek situs web

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

Arba'atun Nurhidayati

vii

DAFTAR ISI

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

2.2.2 Bagian-bagian Photoshop ............................................. 8

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

4.2 Saran ………………………………………………………...... 20

ix

DAFTAR PUSTAKA

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.

2

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.

4

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.

6

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

8

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

10

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

http://id.wikipedia.org/wiki/Pendidikan

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


isiannya berupa visi dari institusi.

3.1.3 Perancangan Halaman Misi

Banner logo

Misi

13


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

c. Lokasi

15

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

Untuk melihat listing program ada di Lampiran 3

16

3.2.2 Implementasi Halaman Visi

Untuk melihat listing program ada di Lampiran. 4

3.3.3 Implementasi Halaman Misi

Untuk melihat listing program ada di Lampiran.5

17

3.3.4 Implementasi Halaman Gallery


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.

DAFTAR PUSTAKA

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.

LAMPIRAN-LAMPIRAN

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">



</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"; }




z-index:2;

}




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')"> 

<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>

<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>



</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">




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];}}

}



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; }



} //-->

</script>

<style type="text/css"> <!--




z-index:1;

} body {


} .style4 {

font-family: "Curlz MT"; font-size: 30px;

font-weight: bold;

} .style6 {font-family: "Kristen ITC"; font-size: 18px; }

#Layer2 {

position:absolute;



z-index:2; }


left:724px;

top:403px; width:121px;

height:142px; z-index:3;

} #Layer4 {

position:absolute; left:569px;

top:442px;


z-index:3; }




z-index:3;

} -->

</style> </head>



<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 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> 

</body> </html>

3. Kode listing misi.html

<html> <head>

<title>Untitled-1</title>





var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();


}



for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);




} //-->

</script>


#Layer1 {

position:absolute;



z-index:1; }

body { background-color: #000000;

background-image: url(images/Machovka_Happy_fish.JPG);

} .style4 {


font-weight: bold; }

.style6 {font-family: "Kristen ITC"; font-size: 18px; }

.style8 {

font-family: "Kristen ITC";


} #Layer2 {




}




z-index:3; }

#Layer4 {




} -->

</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/hover_06.gif')">

 <div id="Layer1">


<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, para orang tua murid

serta masyarakat</p>

</li>

<li> <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"


<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>


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>


name="visi" width="172" height="48" border="0"></a></td> </tr>

<tr>




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>



</body> </html>

4. Kode listing gallery.html

<html>




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();


}

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);



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>




width:627px;


} body {


} .style3 {font-family: "Kristen ITC"; font-size: 14px;}

.style4 {




.style7 {font-size: 18px}


left:728px;



} -->

</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/hover_06.gif')">

 <div id="Layer1">


<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"

height="100" border="0"></a><a href="gallery3.html"><img src="images/foto3.JPG" width="130"

height="100" hspace="50" vspace="0" border="0"></a></p> <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"


<td colspan="2"><img src="images/index_01.gif" width="800" height="129" alt=""></td> </tr>

<tr> <td rowspan="5">



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>


name="visi" width="172" height="48" border="0"></a></td> </tr>

<tr>




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>



</body> </html>

5. Kode listing gallery1.html

<html>




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();


}

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);



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>




width:627px;


} body {


} .style3 {

font-family: "Kristen ITC";


} .style4 {







z-index:2; }

-->

</style> </head>



<div id="Layer1"> <ul type="square">

<li>

<h1 align="left" class="style4">Gallery TABAS </h1> </li>

</ul>

<p align="left"><img src="images/foto1big.JPG" width="300" height="210" hspace="150"></p>

<blockquote> <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">


<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>

 </body>

</html>

PROGRAM SITUS WEB - · PDF filesholawat serta salam kepada junjungan kita Nabi Muhammad SAW,...

Documents

Transcript of PROGRAM SITUS WEB - · PDF filesholawat serta salam kepada junjungan kita Nabi Muhammad SAW,...