Sunday, May 16, 2010

Bab 8 Membuat Lembar Kerja Menggunakan Program Lembar Kerja

A. Manfaat Lembar Kerja


Pada semua program aplikasi Microsoft Office terdapat program aplikasi spreadsheet, yaitu Microsoft Excel yang kita gunakan untuk membantu dalam melakukan pengolahan angka-angka untuk membantu menyelesaikan pekerjaan-pekerjaan kita pada bidang administrasi, akuntansi, perbankan, statistic, bisnis, dan bidang lainnya. Microsoft Excel juga mempunyai kemampuan untuk menghitung dengan menggunakan rumus, membuat grafik, fasilitas hyperlink yang digunakan untuk membuka dan mengaktifkan data atau informasi yang terdapat pada lembar kerja maupun file yang berbeda, bahkan yang terdapat pada web tertentu. Kegunaan Microsoft Excel : Mampu menghitung data table dengan menggunakan rumus formula yang telah tersedia pada program Microsoft Excel. Untuk menganalisa data keuangan dan statistic.
Membuat diagram dan grafik dari sebuah table.
Cara mengaktifkan program Microsoft Excel, yaitu:
Klik start
Pilih All Programs
Pilih Microsoft Excel atau double klik icon Microsoft Excel pada Desktop.
Lambang / tanda operator yang sering kita gunakan untuk menghitung hasil dari sebuah data dalam Microsoft Excel :
No. Lambang Fungsinya / Definisinya
1. : Sampai dengan (untuk memblok beberapa sel)
2. * Perkalian / menghitung hasil perkalian dari sekumpulan data
3. / Pembagian / menghitung hasil bagi dari sekumpulan data.
4. > Lebih besar dari
5. <>= Lebih besar sama dengan
7. <= Lebih kecil sama dengan 8. <> Tidak sama dengan
9. + Penjumlahan
10. - Pengurangan


Keterangan lembar kerja pada Lembar Kerja, yaitu:
Menu Bars →Kumpulan menu yang terdapat pada aplikasi Microsoft Excel.
Sembilan Menu Bars pada Microsoft Excel yaitu:
Menu Bars File yaitu fasilitas untuk mengatur hasil lembar kerja.
No Nama Icon File Fungsinya
1. New Membuat Lembar Kerja Baru
2. Open Membuka Lembar Kerja Yang telah kita simpan
3. Close Menutup Lembar Kerja
4. Save Menyimpan Lembar Kerja yang telah kita buat
5. Save As Menyimpan Lembar Kerja yang telah kita buat
6. Page Setup, Margin Mengatur lembar Kerja kita pada ukuran Kertas seperti atas, bawah, kanan, dan kiri
7. Page Setup, Orientation Bentuk ketikan atau hasil kertas
8. Page Setup, Paper Size Mengatur Lembar Kerja kita pada ukuran kertas
9. Print Preview Mengatur Lembar Kerja untuk kita print/cetak
10. Print Memprint / mencetak hasil Lembar Kerja kita
11. Exit Keluar dari Lembar kerja kita


Menu Bars Edit, yaitu fasilitas untuk membatalkan / editing teks.

No. Nama Icon Menu Edit Fungsinya
1. Can’t Undo Mengulang pekerjaan kita pada lembar kerja
2. Cut Memindahkan Pekerjaan kita pada lembar kerja
3. Copy Mengcopy pekerjaan kita pada lembar kerja
4. Paste Menampilkan pekerjaan yang telah kita copy dan kita cut
5. Delete Menghapus pekerjaan kita pada lembar kerja
6. Delete Sheet Menghapus lembar kerja yang aktif
Menu Bars View, Toolbars (Fasilitas untuk mengubah tampilan layar), yaitu :
Toolbars Standard → Fasilitas yang biasanya kita gunakan untuk membuat dokumen sampai proses pencetakan.
No. Toolbars Standard Fungsinya
1. New Membuat Lembar Kerja Baru
2. Open Membuka Lembar Kerja Yang telah kita simpan
3. Save Menyimpan Lembar Kerja yang telah kita buat
4. Print Memprint / mencetak hasil Lembar Kerja kita
5. Print Preview Mengatur Lembar Kerja untuk kita print/cetak
6. Cut Memindahkan Pekerjaan kita pada lembar kerja
7. Copy Mengcopy pekerjaan kita pada lembar kerja
8. Paste Menampilkan pekerjaan yang telah kita copy dan kita cut
9. Format Painter Mengatur hasil gambar
10. Undo Mengulang pekerjaan kita pada lembar kerja
11. Auto Sum Menghitung hasil jumlah dari sebuah data
12. Sort Ascending Mengurutkan data dari abjad / huruf A-Z
13. Sort Descending Mengurutkan data dari abjad / huruf Z-A
14. Chart Membuat Grafik
15. Drawing Menampilkan toolbars drawing / gambar bangun datar
16. Zoom Mengatur tanpilan layar yang sedang aktif
Toolbar Formatting→ Fasilitas yang biasanya kita gunakan untuk mengatur posisi dan tampilan huruf / teks.
No. Toolbars Font Formatting Fungsinya
1. Font Mengubah Jenis Huruf / teks
2. Font Size Mengubah ukuran huruf / teks
3. Bold Menebalkan huruf / teks
4. Italic Membuat huruf / teks menjadi miring
5. Underline Membuat garis bawah pada teks / huruf
6. Align Left Membuat rata kiri pada teks / huruf
7. Center Membuat rata tengah pada teks / huruf
8. Align Right Membuat rata kanan pada teks / huruf
9. Merge and Center Posisi teks berada di tengah berapa sel kolom / baris
10. Currency Style Memberi satuan mata uang pada sel data angka
11. Percent Style Memberi keterangan presentase pada sel data
12. Comma Style Memberi nilai / angka decimal pada sel data
13. Increase Decimal Mengurangi angka decimal
14. Decrease Decimal Menambah angka decimal
15. Decrease Indent Memajukan teks ke kiri kursor
16. Increase Indent Memajukan teks ke kanan kursor
17. Border Memberi garis tepi / bingkai pada sel table
18. Fill Colors Memberi warna / latar belakang sel table
19. Font Color Memberi warna huruf / teks

Toolbars Drawing→Fasilitas yang biasanya kita gunakan untuk membuat gambar bangun ruang, bangun datar, dan garis lurus.
No. Toolbars Drawing Fungsinya
1. Autoshapes Membuat bangun ruang , datar, dan garis lurus
2. Line Membuat garis pada sel data
3. Arrow Membuat tanda panah pada sel data
4. Rectangle Membuat bangun persegi panjang pada sel data
5. Oval Membuat bangun oval pada sel data
6. Tex Box Menulis langsung pada kotak persegi
7. Word Art Membuat Wordart Syle pada sel data
8. Insert Diagram Membuat diagram / grafik organisasi
9. Insert Clip Art Membuat gambar pada sel data
10. Insert Picture Gambar lain yang tidak ada pada clip art
11. Fill Colors Mewarnai sel data
12. Line Colors Mewarnai garis pada sel data
13. Font Colors Mewarnai huruf / teks pada sel data
14. Line Style Macam-macam bentuk / ketebalan garis
15. Dash Style Macam-macam bentuk garis terputus
16. Arrow Style Macam-macam bentuk tanda / arah panah
17. Shadow Style Memberi efek bayangan pada gambar bangun datar
18. 3-D Style Bentuk bangun datar 3 dimensi
Menu Bars Insert →Fasilitas untuk membuat / menyisipkan sel, kolom, baris, grafik dan lainnya.
No. Nama Icon Menu Insert Fungsinya
1. Cells Menyisipkan / menambah sel kanan / dibawah
2. Rows Menyisipkan / menambah sel baris di atas kursor
3. Columns Menyisipkan / menambah sel kolom di kiri kursor
4. Work Sheet Menyisipkan / menambah Lembar kerja
5. Chart Menyisipkan / membuat grafik
6. Function Letak / tempat untuk menuliskan rumus formula
7. Page Break Memberi batas halaman
8. Picture Membuat gambar
Menu Bars Format→Fasilitas untuk mengatur format dasar dari lembar kerja
No. Nama icon Menu Format Fungsinya
1. Format, Cells, Number, Category Currency Memberi angka decimal dan symbol mta uang Rupiah (Rp) Indonesia
2. Format , Cells, Alignment Membuat / menggabung beberapa sel ( kolom / baris) menjadi satu sel saja.
3. Format, Rows Mengatur ukuran baris
4. Format, Column Mengatur ukuran kolom
Menu Bars Tools→Fasilitas yang digunakan untuk melakukan pengecekan ejaan, pengaturan lembar kerja agar dapat digunakan oleh pengguna computer lain dalam satu jaringan secara bersama-sama, dan pengaturan setting program Microsoft Excel.
Menu Bars Data→Fasilitas yang digunakan untuk pengolahan data yang terdapat pada lembar kerja.
Menu Bars Window→Fasilitas yang digunakan untuk mengatur jendela kerja dari Microsoft Excel yang sedang aktif.
Menu Bars Help→Fasilitas yang digunakan untuk mencari informasi yang diperlukan pada saat bekerja dengan Microsoft Excel.

Penggunaan Rumus Microsoft Excel

Rumus =SUM digunakan untuk menghitung penjumlahan dari angka-angka (sekumpulan data angka) pada suatu sel / range.
=SUM(Range data 1:Range data terakhir ), enter
Rumus =COUNT digunakan untuk menghitung jumlah sel yang ada pada table (data yang dihitung berupa karakter angka bukan data huruf)
=COUNT(Range sel1:Range sel terakhir), enter
Rumus =MAX digunakan untuk menghitung hasil nilai tertinggi atau nilai terbesar dari sekumpulan data angaka pada suatu sel / range.
=MAX(Range data1:Range data terakhir), enter
Rumus =MIN digunakan untuk menghitung hasil nilai terendah atau nilai terkecil dari sekumpulan data angka pada suatu sel / range.
=MIN(Range data1:Range data terakhir), enter
Rumus =AVERAGE atau =AVG digunakan untuk menghitung hasil nilai rata-rata dari sekumpulan data pada suatu sel / range.
=AVERAGE(Range data1: Range data terakhir), enter
Atau
=AVG(Range data1:Range data terakhir),enter
Rumus =if digunakan untuk mengisi data / keterangan sesuai syarat / ketentuan yang telah ada.
=IF(Syarat, kondisi yang dibenarkan, kondisi yang salah), enter
Rumus =LEFT digunakan untuk mengambil sejumlah karakter/ huruf pada sebuah teks, dihitung / dimulai dari sisi kiri teks.
=LEFT(Syarat, jumlah huruf yang diinginkan)
Rumus =RIGHT digunakan untuk mengambil sejumlah karakter / huruf pada sebuah teks, dihitung / dimulai dari sisi kanan teks.
=RIGHT(Syarat, jumlaha huruf yang diiinginkan)
Rumus =MID digunakan untuk mengambil sejumlah karakter /huruf pada sebuah teks, dihitung / dimulai dari posisi huruf diinginkan dan diikuti berapa jumlah huruf yang akan ditampilkan.
=MID(Syarat, posisi huruf awal, jumlah huruf yang diinginkan)

BAB 7 MENGIDENTIFIKASIKAN PERANGKAT LUNAK LEMBAR KERJA BESERTA FUNGSI IKON DAN MENUNYA

BAB 7: MENGIDENTIFIKASIKAN PERANGKAT LUNAK LEMBAR KERJA BESERTA FUNGSI IKON DAN MENUNYA
1. Membuat Lembar Kerja Baru
Saat pertama kali membuka program Microsoft Excel, secara otomatis akan terbuka sebuah workbook baru yang masih kosong.

2. Memasukkan Data
Untuk memasukkan data ke dalam lembar kerja, dapat dilakukan dengan menggunakan mouse

3. Menghapus data
pada saat bekerja pada Microsoft Excel, ada kalanya kita salah memasukkan data. Apabila data yang diketikkan belum masuk ke dalam sel maka data dapat diperbaiki dengan menekan tombol Backspace pada keyboard. Tetapi bila data sudah masuk ke dalam sel, dapat dilakukan dengan cara memblok sel yang akan dihapus lalu tekan tombol delete pada keyboard.

4. Bekerja dengan Sel
Pada saat bekerja dengan Microsoft Excel, kita tidak hanya belerja dengan satu sel saja, tetapi beberapa sel sekaligus.

5. Menyimpan Lembar Kerja
Setelah workbook selesai dibuat,selanjutnya dapat disimpan ke media penyimpanan seperti harddisk, disket, atau media penyimpanan lainnya.

B. Menggabungkan Dua Lembar Kerja atau Lebih

Pada saat membuka buku kerja baru pada Microsoft Excel, secara default setiap buku kerja baru akan berisi tiga lembar kerja dengan nama sheet1, sheet2, sheet3.
ketiga lembar kerja tersebut dapat digunakan untuk embuat suatu buku kerja yang akan disimpan dalam satu nama file.

Pada saat bekerja dengan Microsoft Excel, kemu dapat memilih beberapa lembar kerja sekaligus. Hal ini akan memudahkan pembuatan buku kerja yang membutuhkan bentuk laporan dengan format yang sama agar tidak perlu membuat laporan yang sama secara berulang.

C. Memasukkan Teks, Tanggal, dan Bilangan

Untuk memasukkannya kedalam lembar kerja, dapat dilakukan dengan memilih sel dimana data tersebut akan dimasukkan, selanjutnya ketikkan data dan tekan tombol Enter atau Tab pada keyboard.

D. Memformat Sel

pengaturan format dilakukan melalui menu Fomat Cells dan selanjutnya membuka tab Number pada kotak dialog Format Cells.

E. Menggabungkan Sel

Penggabungan dua atau lebih sel dapat dilakukan secara horisontal, vertikal, maupun gabungan keduanya. Penggabungan beberapa sel akan menghilangkan batas kolom dan baris dari sel tersebut dan sebagai gantinya sel-sel tersebut akan berupa suatu sel yang lebih panjang atau lebih lebar.

F. Memformat Baris dan Kolom
* Mengatur Tinggi Baris
* Mengatur lebar kolom
* Menyembunyikan baris atau kolom

G. Memindahkan dan Menyalin Data
1. Memindahkan Data, adalah menghapu data yang terdapat pada suatu tempat atau sel dan menepatkannya ditempat sel yang lain. Untuk menghapus dan memindahkan data, digunakan perintah Cut dan Paste.

2. Menyalin Data, Menyalin data pada dasrnya sama dengan memindahkan data, tetapi data yang terdapat pada posisi awal tidak akan dihapus. Untuk menyalin data digunakan perintah Copy dan Paste.

3. Menggunakan Paste Special, fasilitas Paste Special mempunyai beberapa pilihan yang dapat digunakan untuk menyalin sekaligus menjalankan perintah penjumlahan, pembagian, perkalian, dan perintah lainnya.
Selain itu perintah Paste Special juga mempunyai perintah untuk memilih apa yang akan disalin. Untuk menggunakan Paste Special, lakukan perintah pengkopian terlebih dahulu menggunakan fasilitas Copy atau Cut kemudian tekan tanda panah kecil yang terdapat disebelah kanan. atau tombol tanda panah pada keyboard untuk berpindah antarsel.

Thursday, December 10, 2009

Membuat Homepage Interaktif

A. Memprogram Web
1. Persiapan Software
Untuk membuat homepage interaktif cukup dengan menggunakan beberapa software yang sudah kita kenal antara lain ;

a. Sistem Operasi
Kita akan menggunakan Windows XP Professional sebagai sistem operasi. Keluarga windows lainnya yang dapat digunakan untuk menjalankan Internet Information Service (IIS) adalah Windows NT,Windows 2000 dan Windows 2003

b. Komponen Internet Information Service (IIS) pada Windows XP
Funsgsi IIS adalah sebagai web server. Dengan menggunakan IIS kita tidak perlu melakukan konfigurasi secara manual.
Langkah-langkah untuk menginstal komponen IIS yaitu sebagai berikut ;
1. Masukkan CD Installer windows XP Professional, aktifkan control panel dan pilih Add or Remove Programs
2. Pilih IIS. Kamu dapat melihat komponen-komponen IIS melalu tombol details. Pilih semua komponen lalu OK. Tekan tombol Next
3. Untuk mencari lokasi bebeapa file yang terdapat dalam CD kita dapat menekan tombol browse lalu OK
4. Lakukan restart pada komputermu. Untuk memastikan komponen IiS sudah terinstal,aktifkan control panel kemudian pilih performance and Maintenance-administrative tools lalu terlihat komponennya

c. Microsoft FrontPage
Digunakan untuk merancang homepage

d. Microsoft Access
Digunakan untuk membuat database sebagai penyimpanan data yang akan dimasukkan ke dalam database.

e. Microsoft Internet Explorer
Digunakan untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah dibuat.

f. Komponen ODBC
Digunakan untuk melakukan koneksi dari program komputer ke database. ODBC merupakan suatu spesifikasi untuk database API. API merupakan standar yang didukung oleh berbagai vendor.

2. Persiapan Direktori Kerja
1. Aktifkan Windows Explorer,buat satu direktori dalam drive C dengan nama SMUKU-INT
2. Buat subdirektori image,css,dan database dalam direktori SMUKU-INT

3. Persiapan Skenario User Interface
Skenario form harus dibuat untuk memberikan gambaran apa yang akan dikerjakan. Terdapat dua form yang fungsinya sebagai form untuk memasukkan dan menampilkan data siswa dari database. Persiapan lebih lanjut mengenai desain form yaitu dengan cara langsung mendesain bentuk database dan formnya. Tipe data digunakan untuk mempresentasikan penyimpanan data dalam database. Beberapa tipe data yang disediakan oleh Microsoft Access yaitu sebagai berikut ;
1. Teks, mempresentasikan data yang berbentuk gabungan huruf,angka dll
2. Number, mempresentasikan data yang berbentuk angka
3. Date, mempresentasikan data yang berbentuk tanggal
4. Memo, mempresentasikan data yang berbentuk teks dan jumlahnya sangat banyak
5. Currency, mempresentasikan data yang memiliki format currency
6. autoNumber, mempresentasikan data yang akan ditangani oleh sistem berupa angka
7. OLE Object, mempresentasikan data yang berupa gabungan dari objek-objek yang dibuat oleh microsoft
8. Hyperlink, mempresentasikan data yang berupa link ke website

Sekarang kita mulai mendesain form yang pertama menggunakan Microsoft FrontPage
1. Aktifkan Microsoft FrontPage. Pilih tab HTML
2. Buat form dengan memilih menu insert-form-form sehingga ditampilkan pasangan tag form yaitu

3. Tuliskan DATA SISWA sebagai judulnya,beri style bold, ubah ukuran font menjadi 16
4. Buat tabel dibagian bawah judul yang terdiri atas 2 kolom dan 6 baris
5. Ubah tampilan editor menjadi tampilan normal. Pada kolom 1 baris 1 ketikkan teks Nomor Induk. Letakkan kursor pada kolom 2 baris 1 lalu pilih textbox. Klik dua kali textbox tersebut dan tuliskan txtNomorInduk pada kotak Name
6. Pada kolom 1 baris 2 ketikkan teks Nama Siswa. Palam kolom 2 baris 2 pilih textbox dan isi kotak Name denagn txtNama
7. Pada kolom 1 baris 3, ketikkan teks Tanggal Lahir. Pada kolom 2 baris 3 pilih textbox dan isi kotak Name dengan txtTanggalLahir
8. Pada kolom 1 baris 4 ketikkan teks Kelas. Pada kolom 2 baris 4 pilih dropdown listbox dan beri nama cboKelas dan isikan nila pilihan 1,2,dan 3 melalui tombol Add
9. Pada kolom 1 baris 5 ketikkan teks Jurusan. Pada kolom 2 baris 5 buat dropdown listbox,beri nama cboJurusan dan isikan nilainya dengan IPA dan IPS
10. Pada kolom 1 baris 6 ketikkan teks Tahun Masuk. Letakkan kursor pada kolom 2 baris 6 buat textbox. Beri nama txtTahunMasuk pada kotak Name
11. Letakkan kursor dibawah tabel. Buat sebuah tombol melali menu insert-form-Push Button
12. Klik dua kali tombol Button. Ubah label menjadi Simpan, beri nama cmdSimpan dan tandai pilihan Submit
13. Klik dua kali tombol Submit ubah labelnya menjadi Lihar beri nama cmdLihat dan tandai pilihan normal
14. Hapus tombol ketiga dari form. Ubah tab form menjadi
pada tampilan HTML
15. Simpan file dalam direktori C:\SMUKU-INT. Beri nama file datasiswa.htm
Sekarang kita akan mendesain form ke 2 untuk menampilkan data dari database melalui langkah langkah ;
1. Pada microsoft FrontPage pilih File-New-Page Or Web
2. Pilih page template. Pilih NormalPage pada tab General
3. Tuliskan DAFTAR SISWA sbgi judulnya,beri style bold,ubah ukuran menjadi 16
4. Di bawah tulisan DAFTAR SISWA, buat tabel yang terdiri atas 7 kolom dan 2 baris
5. Pilih tampilan normal. Pada kolom 1 baris 1 ketikkan Nomor dan pada kolom 1 baris 2 ketikkan nilaiNomor
6. Pada kolom 2 baris 1 ketikkan Nomor Induk dan pada kolom 2 baris 2 ketikkan nilaiNomorInduk
7. Pada kolom 3 baris 1 ketikkan Nama dan pada kolom 3 baris 2 ketikkan nilaiNama
8. Pada kolom 4 barius 1 ketikkan Tanggal Lahir dan pada kolom 4 baris 2 ketikkan nilaiTanggalLahir
9. Pada kolom 5 baris 1 ketikkan Kelas dan pada kolom 5 baris 2 ketikkan nilaiKelas
10. Pada kolom 6 baris 1 ketikkan Jurusan dan pada kolom 6 baris 2 ketikkan nilaiJurusan
11. Pada kolom 7 baris 1 ketikkan Tahun Masuk dan pada kolom 7 baris 2 ketikkan nilaiTahunMasuk
12. Buat 1 tombol beri nama Kembali dan label cmdKembali
13. Simpan file dengan nama lihatdatasiswa.htm dalam direktori C:\SMUKU-INT


4. Persiapan Komponen IIS
Untuk menjadikan sebuah komputer sebagai web server, dala komputer harus terinstall IIS. Cara pengaksesan IISA sebagai berikut ;
1. Pilih tombol start-control panel
2. Pilih Administrative Tools pada jendela Control Panel kemudian pilih Internet Information Services
3. Klik nama komputer kemudian pilih Web Sites dan klik Default web Site
Terdapat dua cara menampilkan informasi homepage melalui IIS yaitu;
a. Pengaksesan menggunakan port
1. Klik kanan web sites klik New Website pilih port
2. Gunakan port sembarang antara 2000-65500. Jangan menggunakan port 80.
3. Pengaksesan dengan menggunakan port 8080 yaitu sebagai berikut;
- Stand alone computer  http://localhost:8080/namafile.htm
- Intranet  http://NamaKomputer:8080/namafile.htm
- Internet  http://www.namadomain.com:8080/namafile.htm
b. Pengaksesan menggunakan direktori virtual
1. Klik kanan Defaul Web Site pilih New Virtual Directory. Tekan tombol next untuk menjalankan ke wizard berikutnya
2. Ketikkan SMUKU-INT untuk mengisi alias direktori lalu Next
3. Tekan tombol browse atau masukkan C:\SMUKU-INT lalu Next sampai finish
4. Pengaksesan dengan menggunakan direktori virtual SMUKU-INT yaitu;
- Komputer lokal  http://localhost/SMUKU-INT/datasiswa.htm
- Intranet  http://namakomputer/SMUKU-INT/datasiswa.htm
- Internet  http://www.namadomain.com/SMUKU-INT/datasiswa.htm

5. Pemilihan Bahasa Pemograman
ASP merupakan bahasa pemograman yang secara otomatis disediakan oleh microsoft jika kita menggunakan IIS. ASP merupakan suatu skrip yang bersifat server side yang ditambahkan pada halaman HTML untuk membuat sebuah web menjadi lebih menarik,dinamis dan interaktif. Server side berarti bahwa proses pengerjaan skrip berlangsung di server bukan di browser. Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript.
Alasan utama penggunaan bahasa pemrograman ASP yaitu sebagai berikut ;
1. Sudah tersedia secara gratis jika kita menggunakan IIS pada sistem operasi Windows.
2. Struktur bahasanya sangat mudah untuk dipelajari karena ASP mengadopsi sintaks dari bahasa pemrograman Visual Basic
3. Mampu berkomunikasi dengan objek komponen (COM/DCOM) yang dibuat dengan berbagai bahasa pemrograman yang lain
4. Mempunyai respons request data dengan cepat
5. Untuk menggunakannya, kita hanya tinggal meletakkan kode pemrograman pada halaman homepage yang akan kita program
Sebuah file ASP merupakan file text only yang didalamnya berisi teks, tag HTML, dan skrip ASP. Skrip ASP dapat diletakkan dimana saja. Untuk membedakan antara teks, tag HTML dan skrip ASP maka digunakan suatu tanda yang disebut delimiter. Delimiter adalah suatu kumpulan karakter yang mengawali dan mengakhiri suatu tag atau skrip. Untuk skrip ASP, delimiter yang digunakan adalah kumpulan karakter <% dan %>
a. Deklarasi Variabel
VBScript mempunyai beberapa pernyataan yang digunakan untuk pendeklarasian variabel yaitu dlm,private dan public. Jika menggunakan dlm maka variabelnya bersifat lokal tetapi jika menggunakan public maka variabelnya bersifat global.
b. Blok kode ASP
ASP selalu diawali dengan blok <% dan diakhiri dengan blok %>
Contoh.
Untuk menuliskan kata HALLO DUNIA kita cukup mengetikkan blok ASP berikut di atas sebuah file HTML dan mengubah nama ekstensi file tersebut menjadi ASP
<% response.write(“HALLO DUNIA”) %>

HALLO DUNIA




c. Statemen input
Sintaks 1  Request.Form()
Sintaks 2  Request.QueryString()

Request.Form digunakan untuk mengambil nilai dari elemen-elemen form HTML. Sedangkan Request.QueryString digunakan untuk mengambil nilai variabel HTTP query string.

d. Statement output
Statement atau pernyataan output digunakan untuk mengatur output yang akan dikirimkan ke browser. Contoh metode yang digunakan yaitu metode write dan redirect. Metode write digunakan untuk menulis output berupa variabel sebagai sebuah string. Metode redirect digunakan untuk mengirimkan pesan ke browser yang mengarahkan browser untuk menuju ke URL tertentu.
Sintaks 1  Response.write()
Sintaks 2  Response.redirect()
Contoh
Untuk menuliskan nilai dari textbox dengan id txtNama dilakukan dengan menambahkan kode berikut
<% dim nama nama=request.form (“txtNama”) response.write (nama) %>

e. Statement Logika
Sintaks logika untuk ASP sama dengan sintaks logika bahasa pemrograman Visual Basic yang telah dipelajari sebelumnya.

f. Statement looping
Sintaks looping untuk ASP juga sama dengan sintaks looping atau perulangan pada bahasa pemrograman visual basic.

g. Operasi pengaksesan data
h. Cara kerja ASP
Misal mengakses halaman ASP dari sebuah website http://www.namadomain.com/index.asp. halaman tersebur akan di-load ke browser internet explorer dalam bentuk HTML setelah terlebih dahulu web server menerjemahkan semua kode yang terdapat dalam blok <% %> pada file index.asp. semua kode ASP yang terdapat dalam file tersebut akan hilang dan diganti dengan value yang dikembalikan dari database. Pilih view source untuk melihat

B. Memprogram Database Web Interaktif

1. Pembuatan Database

Langkah-langkah pembuatan database sebagai berikut;
1. Aktifkan Microsoft Access. Buat database datasiswa dan simpan dalam C:\SMUKU-INT\database yang sudah kamu buat sebelumnya.
2. Buat satu tabel dengan nama DataSiswa dengan struktur isi tabel seperti didefinisikan pada tabel saat kamu melakukan persiapan skenario user interface

2. Pembuatan Data Source Name (DSN)
DSN ini akan mempermudah pengaksesan data dari progam ke database. Langkah-langkah membuat DSN sebagai berikut ;
1. Tekan tombol startControl Panel  Performance and MaintenanceAdministrative ToolsData Sources (ODBC)
2. Pilih tab System DSN. Klik tombol Add pilih Microsoft Access Driver (8.mdb) lalu Finish.
3. Pada kotak dialog ODBC Microsoft Access Setup, isi kotak Data Source Name dengan DataSiswa dan kotak Description dengan data siswa. Tekan tombol Select untuk memasukkan database dengan lokasi C:\SMUKU-INT\database\datasiswa.mdb. lalu OK
3. Pemrograman
Untuk pemrograman ini akan ditampilkan halaman HTML dan halaman modifikasi menjadi ASP. Dari kedua halaman tersebut, dapat dibandingkan perubahan yang diperlukan untuk membuat halaman homepage yang interkatif
1. Programming halaman pertama yaitu pembuatan halaman datasiswa.htm yang telah kamu lakukan sebelumnya. Buka kembali halaman datasiswa.htm pada Microsoft FrontPage.
2. Lakukan modifikasi terhadap halaman datasiswa.htm dengan memasukkan kode ASP dibawah ini pada bagian awal halaman sebelum tag
<%@ Languange=VBScript %>
<% dim comm dim rs dim NomorInduk dim Nama dim TanggalLahir dim Kelas dim Jurusan dim TahunMasuk dim strSQL if request.Form (“cmdSimpan”)=”Simpan” NomorInduk=Request.Form(“txtNomorInduk”) Nama=Request.Form(“txtnama”) TanggalLahir=Request.Form(‘txtTanggalLahir) Kelas=Request.Form(“cboKelas”) Jurusan=Request.Form(“cboJurusan”) TahunMasuk=Request.Form(“cboTahunMasuk”) strSQL=”Insert into DataSiswa(NomorInduk,Nama,TanggalLahir,Kelas,Jurusan,TahunMasuk) values (‘” &_NomorInduk & “ ‘,’ “ & Nama & “ ‘,’ “ & TanggalLahir & “ ‘,’” & Jurusan & “ ‘.’ “ & _ TahunMasuk & “’)” Set conn = Server.CreateObject (“ADODB.Connection”) Set rs = Server.CreateObject (“ADODB.Recordset”) conn.Open “DSN=DataSiswa” rs.open strsql, conn, 2, 2 Set rs = Nothing Set conn = Nothing end if %>
3. Ganti action=”--WEBBOT-SELF--“ yang terdapat dalam tag form datasiswa.asp dengan action=”datasiswa.asp”.
4. Ubahlah baris kode menjadi . Simpan file dengan nama datasiswa.asp
5. Programming halaman kedua yaitu pembuatan halaman lihatdatasiswa.htm yang telah kamu lakukan sebelumnya.
6. Akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htm dengan memasukkan kode ASP di bawah ini pada bagian awal halaman sebelum tag
<%@ Languange=VBScript %>
<% dim conn dim rs dim strSQL dim ccount strSQL=”SELECT count(*) as Ccount FROM DataSiswa” Set conn = Server.CreateObject (‘ADODB.Connection”) Set rs = Server.CreateObject (“ADODB.Recordset”) conn.Open “DSN=DataSiswa” rs.open strsql, conn, 2, 2 ccount=rs (“Ccount”) rs.close strSQL=”SELECT * FROM DataSiswa” rs.open strSQL, 2, 2 %>
7. Ubahlah kode di antara tag
menjadi kode dibawah ini

<>








<% If not rs.EOF or not rs.BOF then for i=1 to ccount %>









<% Next End If rs.close conn.Close Set rs = Nothing Set conn = Nothing %>
No Nomor Induk Nama Tanggal Lahir Kelas Jurusan Tahun masuk
<%=1%> <%=rs(“NomorInduk”) %> <%=rs(“Nama”) %> <%=rs(“TanggalLahir”) %> <%=rs(“Jurusan”)%> <%=rs(“TahunMasuk”)%>



8. Ganti dengan utnuk menutup jendela baru yang dibuka dengan cara menekan tombol Lihat pada halaman datasiswa.asp,
9. Simpan file dengan nama lihatdatasiswa.asp.

4. Pengujian (Testing)
Testing ini adalah memberitahukan kepada kita apabila terdapat kesalahan dalam coding yang kita lakukan. Keslaahan tersebut akan langsung ditampilkan dalam browser yang kita akses. Jika tidak terdapat kesalahan maka kita dapat mengetahui bahwa data tersebut sudah tersimpan dalam database bukan dalam halaman lihatdatasiswa.asp

Wednesday, December 9, 2009

Membuat Homepage Sederhana

A. Menentukan Perangkat Lunak Untuk Membuat Homepage

Beberapa hal yang harus diperhatikan dalam membuat homepage yaitu sebagai berikut ;

1. Tujuan dibuatnya homepage. Misal kita akan membuat homepage untuk semua siswa kelas 3A SMUKU.

2. Siapa yang menjadi target utama untuk melihat homepage yang kita buat. Misal yang menjadi target utama untuk melihat dan megakses adalah teman-teman di SMUKU dari kelas 1 samapai kelas 3

3. Klasifikasikan informasi yang akan ditampilkan dalam homepage

4. Hasil klasifikasi tersebut akan mewakili satu halaman homepage sedangkan hasil klasifikasi yang lain akan ditampilkan sebagai hyperlink yang akan ditampilkan pada saat pengguna mengakses link tersebut.

Terdapat 3 kriteria tools yang dapat digunakan untuk pengembangan homepage yaitu;

1. Editor HTML

Editor HTML digunakan untuk mendesain homepage dan komponen-komponennya. Selain itu juga digunakan untuk menggabungkan gambar,suara dan animasi yang telah dibuat di dalam homepage. Editor HTML yang bersifat graphical user interface akan mengurangi waktu dalam penulisan sintaks. Salah satu produk microsoft sebagai editor HTML yaitu Microsoft FrontPage XP

2. Editor Graphics

editor grafis digunakan untuk mengedit gambar yang akan ditampilkan pada homepage. Beberapa editor grafik yang sering digunakan dan populer yaitu CorelDRAW dan Adobe Photoshop. Untuk pembuatan logo gambar dari homepage yang akan dikembangkan dapat menggunakan adobe Photoshop 7.0

3. Editor Multimedia Animasi dan Suara

Editor multimedia digunakan untuk membuat animasi gambar dan suara. Editor animasi yang paling populer yaitu Macromedia Flash

B. Membuat Layout Homepage yang Diinginkan

Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan. Beberapa layout halaman homepage tersedia di Microsoft FrontPage XP. Penggunaan layout tergantung jenis navigasi dan informasi yang akan ditampilkan dalam homepage.

Langkah-langkah untuk melihat dan memilih jenis layout yaitu sebagai berikut ;

1. Pilih tombol start-all programs-microsoft frontpage

2. Pilih menu file-new-page or web

3. Pilih page templates pada bagian new from templates

4. Akan ditampilkan kotak dialog page templates yang terdiri atas General,Frames Pages dan Style Sheets

5. Pilih jenis frame lalu tekan tombol OK

C. Menerapkan Hyperlink

Hyperlink digunakan sebagai alat navigasi halaman pada homepage. Cukup dengan menggunakan hyperlink kita dapat menuju ke informasi yang akan kita akses pada page yang lain

Langkah-langkah membuat hyperlink menggunakan Microsoft FrontPage XP sebagai berikut ;

1. Aktifkan aplikasi Microsoft FrontPage XP,buat tulisan ‘Link ke halaman lain’ pada dokumen baru

2. Blok tulisan tadi lalu tekan tombol Ctrl+K sehingga ditampilkan kotak dialog Insert Hyperlink.

3. Kotak text to display menampilkan teks yang dijadikan link,kolom link digunakan untuk memilih link tujuan. Kotak Look In digunakan untuk memilih lokasi tujuan Link. Setelah selesai tekan tombol OK

langkah-langkah membuat hyperlink dengan tag HTML yaitu sebagai berikut ;

1. Aktifkan Microsoft FrontPage XP,buat tulisan ‘Link ke halaman lain’ pada dokumen baru

2. Letakkan kursor di depan kata ‘Link’ dan di belakang tag

pada sintaks HTML

3. Letakkan kursor di belakang kata ‘lain’ dan di depan tag

.ketikkan tag

4. Klik tab Normal di bagian bawah dokumen untuk melihat hasil akhir

D. Menerapkan Cascading Style Sheet

Fungsi utama dari CSS adalah untuk melakukan pengaturan beberapa format yaitu;

1. Bentuk huruf 5. Warna Background

2. Ukuran huruf 6. Warna hyperlink

3. Format huruf 7. Format textbox

4. Warna huruf

Css yang telah tersedia dalam Microsoft FrontPage XP dapat diakses dengan menggunakan langkah-langkah berikut ;

1. Aktifkan Microsoft FrontPage XP

2. Pilih menu File-New-Page Or Web

3. Pilih page templates. Pilih tab style sheets

4. Pilih jenis style sheet lalu tekan OK

Langkah-langkah membuat CSS yang akan ditampilkan pada salah satu page HTML;

1. Aktifkan Microsoft FrontPage XP

2. Pilih menu File-new-Page Or Web

3. Pilih tab style sheets lalu pilih jenis Arcs,pilih file-save

4. Ketikkan SMUKU pada kotak File name lalu tekan save

Untuk mengaplikasikan CSS pada halaman HTML,langkah-langkahnya sebagai berikut

1. Aktifkan Microsoft FrontPage XP,pilih menu file-new-Page Or Web

2. Pilih page templates, pada kotak dialog page templates puluh tab general

3. Pilih jenis Frequently Asked Questions lalu tekan OK

4. Tampilkan sintaks HTML melalui tab Normal

5. Kita akan mengaplikasikan file ‘SMUKU.css’ pada page HTML.letakkan kursor di kiri tag lalu enter</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">6.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ketikan <link href="”SMUKU.css”" type="text/css" rel="stylesheet">. Link tersebut akan memberikan efek garis sederhana</p> <p class="MsoListParagraphCxSpLast" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">7.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Simpan halaman tersebut menggunakan menu file-save. Beri nama file “table_of_contents.htm”. klik tab preview</p> <p style="color: rgb(0, 102, 0);" class="MsoNormal"><b style=""><o:p> </o:p></b></p> <p class="MsoListParagraphCxSpFirst" style="text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><b style=""><span style=""><span style="">E.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></b><!--[endif]--><b style="">Membuat Aplikasi dalam Sistem yang Terintegrasi<o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Membuat Aplikasi Terintegrasi dengan Microsoft FrontPage</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; color: rgb(0, 102, 0);">Untuk membuah suatu situs diperlukan sebuah skenario yang sedrhana. Fungsi skenario tersebut untuk memandu kita dalam menentukan apa saja yang dapat dilakukan oleh suatu website. Berhasil tidaknya pembuatan sebuah homepage sangat tergantung pada skenario yang dikembangkan</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Menentukan Directory Lokasi Kerja</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; color: rgb(0, 102, 0);">Directory tempat kita menyimpan file-file hasil kerja harus terorganisir.</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; color: rgb(0, 102, 0);">Langkah-langkah pengorganisasian directory sebagai berikut ;</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Buat directory SMUKU pada drive C:\</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Dalam directory C:\SMUKU,buat directory/folder Image yang digunakan untuk menyimpan gambar-gambar yang digunakan halaman homepage</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Buat directory/folder CSS yang akan digunakan untuk menyimpan CSS</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Membuat Halaman pada Homepage</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; color: rgb(0, 102, 0);">Homepage yang akan dibuat terdiri atas empat halaman ;</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">a.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Membuat Halaman 1</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Aktifkan Microsoft FrontPage XP,pilih menu file-new-Page Or Web</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pilih page templates. Pilih tab general</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pilih one-column Body with Contents on Left kemudian tekan OK</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">4.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pada page frame sebelah kiri hapus SECTION 2 sampai 4</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">5.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pada page frame utama yang diperoleh hapus semua tulisan dibawah “Fish Photo Caption”</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">6.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ganti tulisan ‘Your Heading Goes Here’ dengan “KEGIATAN SISWA”</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">7.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ganti “SECTION 1” dengan kegiatan “kegiatan siswa”,”Title 1” dengan “jadwal pelajaran”,”Title 2” dengan “Data siswa” dan “Title 3” dengan “Link bermanfaat”</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">8.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Tulis “Kegiatan Siswa” lalu Enter.tulis “Kembali” dan naikkan kursor </p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">9.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pilih menu Table-Insert-Table. Masukkan 5 pada kotak Rows dan 4 pada kotak Columns kemudian tekan OK</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">10.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Simpan pada lokasi C:\SMUKU dengan nama file “kegiatansiswa.htm”</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">11.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Kita akan membuat link dari navigasi yang terdapat pada frame kiri. Blok ‘kegiatan siswa’ kemudian pilih menu Insert-Hyperlink atau tekan Ctrl+K. Tentukan tujuan link yaitu file “kegiatan siswa.htm” lalu OK</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">12.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Simpan hasil perubahan halaman 1 melalui menu file-save</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">b.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Membuat halaman 2</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pastikan halaman “kegiatansiswa.htm” masih terbuka</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pilih menu file-save as.beri nama file “jadwalpelajaran.htm”. tekan tombol Change Title utnuk mengganti page title dari DATA SISWA menjadi JADWAL PELAJARAN selanjutnya tekan save.</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Kita hanya akan memodifikasi frame isi dan header dari halaman kegiatan siswa,ganti ‘KEGIATAN SISWA’ di frame header menjadi ‘JADWAL PELAJARAN’ dan ‘jadwal pelajaran’ pada bagian frame isi</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">4.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ubah isi tabel di bawah “Jadwal Pelajaran” lalu simpan kembali</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">c.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Membuat halaman 3</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pilih menu file-Save As dan beri nama file “datasiswa.htm”</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Tekan tombol Change Title untuk mengganti oage title menjadi DATA SISWA lalu tekan Save</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ubah isi tabel lalu simpan kembali hasil perubahannya</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">d.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Membuar halaman 4</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Pilih menu file-Save As beri nama file “linkbermanfaat.htm”</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Tekan tombol Change Title untuk mengganti Page Title menjadi LINK BERMANFAAT. Lalu save</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ubah isi tabel lalu simpan kembali hasilnya</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 90pt; color: rgb(0, 102, 0);"><o:p> </o:p></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">4.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Mengaplikasikan Cascading Style Sheet</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Copy file yang telah dibuat sebelumnya yaitu file SMUKU.css ke dalam directory C:\SMUKU\CSS.</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Masukkan <link href="”CSS\SMUKU.css”" type="text/css" rel="stylesheet"> di antara tag <meta> dan <title> dalam setiap HTML yang dibuat</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Simpan halaman tersebut. Kamu dapat melihat tampilan akhir dengan cara klik 2 kali file “kegiatansiswa.htm” melalui Windows Explorer.</p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><b style=""><span style=""><span style="">F.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></b><!--[endif]--><b style="">Membuat Grafis sesuai dengan Homepage yang Diinginkan<o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Aktifkan Adobe Photoshop 7.0. pilih menu file –new</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Lakukan pengaturan pada kotak dialog new alu tekan OK</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Setelah ditampilkan lembar baru pilih Rectangle Tool. Sebelumnya pilih warna di bagian Set foreground color. Blok kotak yang menutupi seluruh halaman</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">4.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Berikan efek texturizer dengan cara pilih menu filter-texture-texturizer. Untuk texture,pilih brick,scaling 55 dan Relief4</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">5.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ganti warna dengan tool set foreground color lalu OK. Klik Horizontal Type Tool untuk membuat tulisan SMUKU KELAS 3A ANGKATAN 2005 pada halaman kerja</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">6.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Klik Move Tool sehinnga 8 titik akan ditampilkan. Jika belum,aktifkan Show Bounding Box. Geser tulisan tersebut untuk menyesuaikan ukurannya</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">7.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Simapn gambar dengan nama logosmuku dengan format GIF dalam subfolder Image dalam folder C:\SMUKU kemudian tekan Save</p> <p style="color: rgb(0, 102, 0);" class="MsoListParagraphCxSpMiddle"><b style=""><o:p> </o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><b style=""><span style=""><span style="">G.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></b><!--[endif]--><b style="">Mendaftarkan Alamat Domain ke Provider Web Hosting<o:p></o:p></b></p> <p style="color: rgb(0, 102, 0);" class="MsoListParagraphCxSpMiddle">Untuk mencari nama domain salah satunya di <a href="http://www.internic.com/">http://www.internic.com</a> dan <a href="http://www.register.com/">http://www.register.com</a>.</p> <p style="color: rgb(0, 102, 0);" class="MsoListParagraphCxSpMiddle">Langkah-langkah untuk mendaftarkan alamat domain ke provider web hosting;</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Aktifkan internet explorer lalu ketikkan <a href="http://www.register.com/">http://www.register.com</a></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Cari kotak pencarian lalu ketikkan nama domain yang akan kita cari lalu Go</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Cari nama domain yang masih tersedia agar dapat digunakan</p> <p style="color: rgb(0, 102, 0);" class="MsoListParagraphCxSpMiddle"><b style=""><o:p> </o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><b style=""><span style=""><span style="">H.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></b><!--[endif]--><b style="">Melakukan Upload<o:p></o:p></b></p> <p style="color: rgb(0, 102, 0);" class="MsoListParagraphCxSpMiddle">Kita akan meng-upload homepage yang kita buat sebelumnya ke Yahoo Geocities agar mudah diakses dengan langkah-langkah ;</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Daftarkan nama sekolahsmuku sebagai user dengan cara Sign Up Now<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Lengkapi form,setelah proses registrasi lengkap klik link build your website now!<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Akan ditampilkan halaman GeoCities Control Panel,pilih menu Manage lalu klik link file manager-klik open file manager<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">4.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Tekan tombol Upload Files di kanan atas lalu masukkan file-file HTML yang telah dibuat dengan cara tekan tombol browse. Setelah selesai tekan tombol Upload Files. Untuk menambah file tekan tombol Add More Files<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">5.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Setelah selesai proses upload klik link file manager. Untuk memasukkan folder kita perlu membuat subdirectory untuk folder gambar tsb dengan cara tekan New dibawah subdirectories<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">6.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Beri nama subdirectory dengan nama Image lalu tekan tombol Create Subdirectory<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">7.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Buat subdirectory untuk menyimpan file CSS dengan cara yang sama,beri nama kemudian tekan tombol Create Subdirectory<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">8.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Edit file index.htm yang sudah disediakan Geocities dengan melakukan modifikasi terhadap isinya<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">9.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Lakukan proses pengeditan melalui editor HTML yang tersedia lalu tekan tombol Save<b style=""><o:p></o:p></b></p> <p class="MsoListParagraphCxSpLast" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">10.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Untuk memasukkan file gambar SMUKU.css ke dalam subdirectory image dan CSS,klik 2x subdirectory CSS kemudian lakukan upload file SMUKU.css<b style=""><o:p></o:p></b></p> <p style="color: rgb(0, 102, 0);" class="MsoNormal"><b style=""><o:p> </o:p></b></p> <p class="MsoListParagraphCxSpFirst" style="text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><b style=""><span style=""><span style="">I.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span></b><!--[endif]--><b style="">Memperbaiki dan Merevisi Data yang Sudah Ada<o:p></o:p></b></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">1.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Aktifkan Yahoo!Geocities dan lakukan login</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">2.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Aktifkan GeoCities Control panel,pilih menu Manage lalu klik link file manager-klik link open file manager</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">3.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Upload file logosmuku.gif dengan menekan tombol browse</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">4.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ubah gambar fish.jpg yaitu datasiswa.htm, jadwalpelajaran.htm, kegiatansiswa.htm, dan linkbermanfaat.htm dengan gambar logosmuku.gif</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">5.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Ubah link <img src="”Fish.jpg”" width="”188”" height="”103”" /> dengan <img src="”logosmuku.gif”" width="”500”" height="”103”" />,lalu Save</p> <p class="MsoListParagraphCxSpLast" style="margin-left: 54pt; text-indent: -18pt; color: rgb(0, 102, 0);"><!--[if !supportLists]--><span style=""><span style="">6.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]-->Untuk menampilkan halaman yang sudah diubah gambarnya klik link View My Site</p> <p style="color: rgb(0, 102, 0);" class="MsoNormal">.</p> <p class="MsoListParagraphCxSpFirst" style="margin-left: 54pt; color: rgb(0, 102, 0);"><o:p> </o:p></p> <p style="color: rgb(0, 102, 0);" class="MsoListParagraphCxSpLast"><o:p> </o:p></p> <p style="color: rgb(0, 102, 0);" class="MsoNormal"><o:p> </o:p></p> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='http://www.blogger.com/profile/02084273774987220546' itemprop='url'/> <a class='g-profile' href='http://www.blogger.com/profile/02084273774987220546' rel='author' title='author profile'> <span itemprop='name'>alinayeey</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://mygoodpen.blogspot.com/2009/12/membuat-homepage-sederhana.html' itemprop='url'/> <a class='timestamp-link' href='http://mygoodpen.blogspot.com/2009/12/membuat-homepage-sederhana.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-12-09T06:22:00-08:00'>6:22 AM</abbr></a> </span> <span class='reaction-buttons'> </span> <span class='star-ratings'> </span> <span class='post-comment-link'> <a class='comment-link' href='http://mygoodpen.blogspot.com/2009/12/membuat-homepage-sederhana.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-backlinks post-comment-link'> </span> <span class='post-icons'> <span class='item-control blog-admin pid-980182460'> <a href='http://www.blogger.com/post-edit.g?blogID=844022435895893253&postID=8173235233223033113&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> </div></div> <!-- google_ad_section_end --> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='http://mygoodpen.blogspot.com/search?updated-max=2009-12-09T06:22:00-08:00&max-results=7' id='Blog1_blog-pager-older-link' title='Older Posts'>Older Posts</a> </span> <a class='home-link' href='http://mygoodpen.blogspot.com/'>Home</a> </div> <div class='clear'></div> <div class='blog-feeds'> <div class='feed-links'> Subscribe to: <a class='feed-link' href='http://mygoodpen.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Posts (Atom)</a> </div> </div> <script type="text/javascript">window.___gcfg = {'lang': 'en'};</script> </div></div> </div> <div id='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget Followers' id='Followers1'> <h2 class='title'>Followers</h2> <div class='widget-content'> <div id='Followers1-wrapper'> <div style='margin-right:2px;'> <script type="text/javascript"> if (!window.google || !google.friendconnect) { document.write('<script type="text/javascript"' + 'src="//www.google.com/friendconnect/script/friendconnect.js">' + '</scr' + 'ipt>'); } </script> <script type="text/javascript"> if (!window.registeredBloggerCallbacks) { window.registeredBloggerCallbacks = true; gadgets.rpc.register('requestReload', function() { document.location.reload(); }); gadgets.rpc.register('requestSignOut', function(siteId) { google.friendconnect.container.openSocialSiteId = siteId; google.friendconnect.requestSignOut(); }); } </script> <script type="text/javascript"> function registerGetBlogUrls() { gadgets.rpc.register('getBlogUrls', function() { var holder = {}; holder.postFeed = "http://www.blogger.com/feeds/844022435895893253/posts/default"; holder.commentFeed = "http://www.blogger.com/feeds/844022435895893253/comments/default"; holder.currentBlogUrl = "http://mygoodpen.blogspot.com/"; holder.currentBlogId = "844022435895893253"; return holder; }); } </script> <script type="text/javascript"> if (!window.registeredCommonBloggerCallbacks) { window.registeredCommonBloggerCallbacks = true; gadgets.rpc.register('resize_iframe', function(height) { var el = document.getElementById(this['f']); if (el) { el.style.height = height + 'px'; } }); gadgets.rpc.register('set_pref', function() {}); registerGetBlogUrls(); } </script> <div id="div-9my6ddkdrqpe" style="width: 100%; border: 1px solid #fff;"></div> <script type="text/javascript"> var skin = {}; skin['FACE_SIZE'] = '32'; skin['HEIGHT'] = "260"; skin['TITLE'] = "Followers"; skin['BORDER_COLOR'] = "#FFFFFF"; skin['ENDCAP_BG_COLOR'] = "transparent"; skin['ENDCAP_TEXT_COLOR'] = "#632035"; skin['ENDCAP_LINK_COLOR'] = "#000000"; skin['ALTERNATE_BG_COLOR'] = "transparent"; skin['CONTENT_BG_COLOR'] = "transparent"; skin['CONTENT_LINK_COLOR'] = "#000000"; skin['CONTENT_TEXT_COLOR'] = "#632035"; skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF"; skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000"; skin['CONTENT_HEADLINE_COLOR'] = "#000000"; skin['FONT_FACE'] = "normal normal 100% Helvetica,Arial,Verdana,\x27Trebuchet MS\x27, Sans-serif"; google.friendconnect.container.setParentUrl("/"); google.friendconnect.container["renderMembersGadget"]( {id: "div-9my6ddkdrqpe", height: 260, site: "01026042894868435224", locale: 'en' }, skin); </script> </div> </div> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=844022435895893253&widgetType=Followers&widgetId=Followers1&action=editWidget§ionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("Followers1"));' target='configFollowers1' title='Edit'> <img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div> </div> </div><div class='widget BlogArchive' id='BlogArchive1'> <h2>Blog Archive</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'>▼ </span> </a> <a class='post-count-link' href='http://mygoodpen.blogspot.com/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=2'>2010</a> <span class='post-count' dir='ltr'>(2)</span> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'>▼ </span> </a> <a class='post-count-link' href='http://mygoodpen.blogspot.com/2010_05_01_archive.html'>May</a> <span class='post-count' dir='ltr'>(2)</span> <ul class='posts'> <li><a href='http://mygoodpen.blogspot.com/2010/05/bab-8-membuat-lembar-kerja-menggunakan.html'>Bab 8 Membuat Lembar Kerja Menggunakan Program Lem...</a></li> <li><a href='http://mygoodpen.blogspot.com/2010/05/bab-7-mengidentifikasikan-perangkat.html'>BAB 7 MENGIDENTIFIKASIKAN PERANGKAT LUNAK LEMBAR ...</a></li> </ul> </li> </ul> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> ►  </span> </a> <a class='post-count-link' href='http://mygoodpen.blogspot.com/search?updated-min=2009-01-01T00:00:00-08:00&updated-max=2010-01-01T00:00:00-08:00&max-results=6'>2009</a> <span class='post-count' dir='ltr'>(6)</span> <ul class='hierarchy'> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> ►  </span> </a> <a class='post-count-link' href='http://mygoodpen.blogspot.com/2009_12_01_archive.html'>December</a> <span class='post-count' dir='ltr'>(5)</span> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> ►  </span> </a> <a class='post-count-link' href='http://mygoodpen.blogspot.com/2009_11_01_archive.html'>November</a> <span class='post-count' dir='ltr'>(1)</span> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=844022435895893253&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("BlogArchive1"));' target='configBlogArchive1' title='Edit'> <img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div> </div> </div><div class='widget Profile' id='Profile1'> <h2>About Me</h2> <div class='widget-content'> <a href='http://www.blogger.com/profile/02084273774987220546'><img alt='My Photo' class='profile-img' height='80' src='http://1.bp.blogspot.com/_sitPfs94bPQ/SfwePw_za1I/AAAAAAAAAAM/ugscYnzZU0Q/S220/040420092653.jpg' width='60'/></a> <dl class='profile-datablock'> <dt class='profile-data'> <a class='profile-name-link g-profile' href='http://www.blogger.com/profile/02084273774987220546' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'> alinayeey </a> </dt> <dd class='profile-textblock'>spidergirl! (by :bedon)</dd> </dl> <a class='profile-link' href='http://www.blogger.com/profile/02084273774987220546' rel='author'>View my complete profile</a> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=844022435895893253&widgetType=Profile&widgetId=Profile1&action=editWidget§ionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("Profile1"));' target='configProfile1' title='Edit'> <img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div> </div> </div></div> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> <div id='footer-wrapper'> <div class='footer section' id='footer'></div> </div> </div></div> <!-- end outer-wrapper --> <script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); </script><script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2520687781-widgets.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type='text/javascript'> if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '844022435895893253';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d844022435895893253','//mygoodpen.blogspot.com/','844022435895893253'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '844022435895893253', 'bloggerUrl': 'http://www.blogger.com', 'title': 'rangkuman TIK', 'pageType': 'index', 'url': 'http://mygoodpen.blogspot.com/', 'canonicalUrl': 'http://mygoodpen.blogspot.com/', 'canonicalHomepageUrl': 'http://mygoodpen.blogspot.com/', 'homepageUrl': 'http://mygoodpen.blogspot.com/', 'blogspotFaviconUrl': 'http://mygoodpen.blogspot.com/favicon.ico', 'enabledCommentProfileImages': true, 'adultContent': false, 'disableAdSenseWidget': false, 'analyticsAccountNumber': '', 'searchLabel': '', 'searchQuery': '', 'pageName': '', 'pageTitle': 'rangkuman TIK', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42rangkuman TIK - Atom\42 href\75\42http://mygoodpen.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42rangkuman TIK - RSS\42 href\75\42http://mygoodpen.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42rangkuman TIK - Atom\42 href\75\42http://www.blogger.com/feeds/844022435895893253/posts/default\42 /\76\n', 'meTag': '\74link rel\75\42me\42 href\75\42http://www.blogger.com/profile/02084273774987220546\42 /\76\n', 'openIdOpTag': '\74link rel\75\42openid.server\42 href\75\42http://www.blogger.com/openid-server.g\42 /\76\n\74link rel\75\42openid.delegate\42 href\75\42http://mygoodpen.blogspot.com/\42 /\76\n', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var b\75window,f\75\42chrome\42,g\75\42jstiming\42,k\75\42tick\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){var e\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[e,d];if(void 0\75\75c)try{b.console.timeStamp(\42CSI/\42+a)}catch(h){}};this[k](\42start\42,null,a)}var a;b.performance\46\46(a\75b.performance.timing);var n\75a?new d(a.responseStart):new d;b.jstiming\75{Timer:d,load:n};if(a){var c\75a.navigationStart,h\75a.responseStart;0\74c\46\46h\76\75c\46\46(b[g].srt\75h-c)}if(a){var e\75b[g].load;0\74c\46\46h\76\75c\46\46(e[k](\42_wtsrt\42,void 0,c),e[k](\42wtsrt_\42,\42_wtsrt\42,h),e[k](\42tbsd_\42,\42wtsrt_\42))}try{a\75null,\nb[f]\46\46b[f].csi\46\46(a\75Math.floor(b[f].csi().pageT),e\46\0460\74c\46\46(e[k](\42_tbnd\42,void 0,b[f].csi().startE),e[k](\42tbnd_\42,\42_tbnd\42,c))),null\75\75a\46\46b.gtbExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b.external.pageT,e\46\0460\74c\46\46(e[k](\42_tbnd\42,void 0,b.external.startE),e[k](\42tbnd_\42,\42_tbnd\42,c))),a\46\46(b[g].pt\75a)}catch(p){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[g].load[k](\42aft\42)};var l\75!1;function m(){l||(l\75!0,b[g].load[k](\42firstScrollTime\42))}b.addEventListener?b.addEventListener(\42scroll\42,m,!1):b.attachEvent(\42onscroll\42,m);\n })();\74/script\076', 'mobileHeadScript': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/76f25a6f2e06af76', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sf': 'n'}}, {'name': 'skin', 'data': {'vars': {'textColor': '#632035', 'mainVisitedLinkColor': '#96095a', 'sidebarVisitedLinkColor': '#b02c56', 'pageTitleFont': 'normal bold 200% Helvetica,Arial,Verdana,\47Trebuchet MS\47, Sans-serif', 'blogDescriptionFont': 'normal normal 80% Helvetica,Arial,Verdana,\47Trebuchet MS\47, Sans-serif', 'postTitleColor': '#ba476b', 'sidebarLinkColor': '#e25984', 'mainLinkColor': '#bf277e', 'sidebarHeaderColor': '#bd8095', 'headerFont': 'normal bold 100% Helvetica,Arial,Verdana,\47Trebuchet MS\47, Sans-serif', 'bodyFont': 'normal normal 100% Helvetica,Arial,Verdana,\47Trebuchet MS\47, Sans-serif', 'blogDescriptionColor': '#feeef3', 'dateHeaderColor': '#c88fa2', 'endSide': 'right', 'startSide': 'left', 'blogTitleColor': '#feeef3'}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}}}]); _WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'sidebar', null, document.getElementById('Followers1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', null, document.getElementById('BlogArchive1'), {'languageDirection': 'ltr'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', null, document.getElementById('Profile1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', null, document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', null, document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1848225700-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/3904812905-lightbox_bundle.css'}, 'displayModeFull')); </script> </body> </html>