26 November 2009

Bab. 5 Membuat Homepage Sederhana

0

A. Menentukan Perangkat Lunak untuk Membuat Homepage

Membuat homepage atau website tidak sulit. Hal ini dapat dilakukan cukup dengan memperhatikan beberapa hal dibawah ini yang akan memberikan gambaran mengenai bagaimana homepage seharusnya dibuat.

Beberapa hal yang harus diperhatikan, yaitu sebagai berikut :
1. Tujuan dibuatnya homepage, apa yang menjadi tujuan pembuatan utama dari pembuatan homepage harus jelas.
2. Siapa (anak-anak-/remaja/orang dewasa) yang menjadi target untuk melihat homepage yang kita buat.
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.
5. Buat sebuah skenario dari setiap hasil klasifikasi tersebut agar informasi yang akan ditampilkan benar-benar jelas atau tidak "mengambang".

1. Editor HTML

Editor HTML adalah sebuah aplikasi perangkat lunak untuk menciptakan halaman web. Meskipun HTML markup dari halaman suatu web dapat ditulis dengan editor teks, editor HTML khusus menambah kenyamanan dan fungsional. Sebagai contoh, banyak HTML bekerja tidak dengan HMTL, tetapi juga dengan teknologi yang berhubungan seperti, CSS, XML, dan JavaScript atau ECMAScript.Dalam beberapa kasus, mereka juga mengatur dengan web server remote melalui FTP dan WebDAV, dan sistem manajemen versi seperti CVS atau Subversion.


Editor HTML digunakan untuk mendesain homepage dan komponen-komponennya. Selain itu, editor HTML juga digunakan untuk menggabungkan gambar, suara, dan animasi yang telah dibuat dalam satu halaman hompege. Editor HTML yang bersifat graphical user interface, akan mengurangi waktu kita dalam proses penulisan sintaks. Selama ini kita sudah terbiasa dengan produk-produk jadi buatan Microsoft untuk melakukan aktivitas sehari-hari. Demikian juga pengembangan homepage, kita akan menggunakan salah atu produk Microsoft sebagai editor HTML, yaitu Microsof FrontPage XP.

2. Editor Graphics

Editor grafis digunakan untuk mengedit gambar yang akan ditampilkan pada homepage. Kita dapat memodifikasi warna, memotong gambar, memperbesar atau memperkecil gambar, menggabungkan beberapa gambar, memberi efek pada gambar, dan siap untuk ditampilkan pada homepage. Terdapat beberapa editor grafik yang sering digunakan dan populer yaitu, CorelDRAW dan Adobe Photoshop. Untuk pembuatan logo gambar dari homepage yang akan dikembangkan, kita dapat menggunakan Adobe Photoshop 7.0.


3. Editor Multimedia Animasi dan Suara

Editor multimedia digunakan untuk membuat animasi gambar dan suara. Terdapat suatu editor animasi yang paling populer, yaitu Macromedia Flash. Macromedia Flash tidak hanya digunakan untuk membuat animasi gambar dan suara, tetapi juga untuk membuat suatu homepage multimedia. Dengan menggunakan editor Macromedia Flash, animasi yang rumit dapat dikerjakan dan hasilnya sangat baik.


B. Membuat Layout Homepage yang Diinginkan

Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan. Terdapat beberapa layout halaman homepage yang dapat tergantung pada jenis navigasi dan informasi yang akan ditampilkan dalam homepage. Kita tidak perlu membuat layout yang rumit yang akan membuat pengaksesan homepage menjadi lambat atau membingungkan pengguna.
Untuk melihat dan memilih jenis layout yang tersedia dalam Microsoft FronPage XP, dapat kita lakukan pada saat akan membuat halaman atau website baru.

Langkah-langkah untuk melakukannya adalah sebagai berikut :
1. Pilih tombol start-All Programs-Microsoft FrontPage. Selanjutnya, akan ditampilkan dokumen baru pada Microsoft FrontPage.
2. Pilih menu File-New-Page or Web.
3. Pilih Page Templates pada bagian New from template dari taskpane New Page or Web.
4. Selanjutnya, akan ditampilkan kotak dialog Page Templates yang terdiri atas tiga tab, yaitu General, Frames Pages, dan Style Sheets. Pilih tab Frames Pages yang menampilkan berbagai jenis template yang disediakan oleh Microsoft FrontPage XP.
5. Pilih jenis frame yang kamu inginkan kemudian tekan tombol OK.


Jenis-Jenis Frame pada Microsoft FrontPage XP.

1. Banners and Contents : Membuat frame banner di atas, frame isi di bagian bawah kiri, dan frame utama di bagian bawah kanan. Hyperlink pada frame banner akan mengubah frame isi.
2. Contents : Frame di sebelah kiri merupakan link yang akan mengubah frame utama di sebelah kanan.
3. Footers : Frame utama di atas, frame bawah adalah footer. Hyperlink di footer akan mengubah tampilan frame utama.
4. Footnotes : Sama dengan footers, tetapi hyperlink di frame utama akan mengubah tampilan Footnotes.
5. Header : Membuat frame header navigasi dan sebuah frame utama di bawahnya. Hyperlink di header akan mengubah frame utama.
6. Header, Footers, and Contents : Membuat frame header dan footer untuk navigasi. Hyperlink di header dan footer akan mengubah frame isi.
7. Horizontan Split : Frmae atas dan bawah yang independent atau tidak saling berhubungan.
8. Nested Hierarchy : Hyperlink di sebelah kiri akan mengubah frame sebelah kanan atas. Hyperlink di frame kanan atas akan mengubah isi frame utama.
9. Top-Down Hierarchy : Frame paling atas atau pertama akan mengubah frame di bawahnya, frame kedua akan mengubah isi frame ketiga.
10. Vertical Split : Frame kanan dan kiri yang independent atau tidak saling terhubung.


C. Menerapkan Hyperlink

Hyperlink digunakan sebagai alat navigasi halaman pada homepage. Diperlukan sebuah hyperlink, karena terdapat banyak informasi yang tidak dapat dijelaskan dalam satu halaman homepage secara keseluruhan. Cukup dengan menggunakan hyperlink, kita dapat menuju ke informasi yang akan kita akses pada page lain.

Langkah-langkah membuat hyperlink menggunakan Microsoft FrontPage XP, yaitu sebagai berikut :
1. Aktifkan aplikasi Microsoft FrontPage XP.
2. Buat tulisan "Link ke halaman lain" pada dokumen baru yang ditampilkan pertama kali.
3. Blok tulisan "Link ke halaman lain".
4. Tekan tombol Ctrl + K pada keyboard sehingga akan ditampilkan kotak dialog Insert Hyperlink. Kotak Text to display menampilkan teks yang akan dijadikan link. kolom link to digunakan untuk memilih link tujuan. Kotak Log in digunakan untuk memilih lokasi tujuan link. Setelah selesai melakukan pengaturan terhadap link yang dibuat, tekan tombol OK.
5. Setelah file disimpan dan dijalankan, mketika kita klik "Link ke halaman lain", maka akan membuka halamana tujuan link tersebut.

Langkah-langkah untuk membuat hyperlink dengan tag HTML, yaitu sebagai berikut :
1. Aktifkan aplikasi Microsoft FrontPage XP.
2. Buat tulisan "Link ke halaman lain" pada dokumen baru yang ditampilkan pertama kali.
3. Klik tab HTML di bagian bawah dokumen.
4. Letakkan kursor di depan kata "Link" dan di belakang tag (p) pada sintaks HTML yang ditampilkan.
5. Klik tab Normal di bagian bawah dokumen untuk melihat hasil akhir.

Note : tanda kurung ( ) diganti dengan < >


D. Menerapkan Cascading Style Sheet

Dengan menggunakan Microsoft FrontPage XP, kita tidak perlu merasa bingung untuk memberikan efek warna dan tampilan pada homepage yang akan kita buat. Microsoft FrontPage sudah menyediakan Cascading Style Sheet (CSS) yang dapat kita gunakan. Fungsi utama (CSS) adalah untuk melakukan pengaturan beberapa format, yaitu :
1. bentuk huruf,
2. ukuran huruf,
3. format huruf,
4. warna huruf,
5. warna background,
6. warna hyperlink,
7. format textbox.

Beberapa CSS yang telah tersedia dalam Microsoft FrontPage XP, dapat diakses dengan menggunakan langkah-langkah di bawah ini :
1. Aktifkan Microsoft FrontyPage XP dalam komputermu.
2. Pilih menu File-New-Page or Web.
3. Pilih Page Templates pada bagian New from template dari taskpane New Page or Web.
4. Selanjutnya, akan ditampilkan kotak dialog Page Templates yang terdiri atas tiga tab, yaitu General, Frames, Pages, dan Style Sheets. Pilih tab Style Sheets yang menampilkan berbagai jenis style sheet yang disediakan oleh Microsoft FrontPage XP.
5. Pilih jenis style sheet yang kamu inginkan kemudian tekan tombol OK.


Jenis-jenis CSS pada Microsoft FrontPage XP

1. Normal Style Sheet
CSS kosong
2. Arcs
- Teks menggunakan jenis huruf Verdana berwarna cokelat.
- Headers menggunakan jenis huruf Times New Roman berwarna cokelat.
- Background berwarna kuning.
3. Bars
- Teks menggunakan jenis huruf Arial.
- Headers menggunakan jenis huruf Times New Roman.
- Background berwarna light olive.
4. Blocks
- Teks dan headers menggunakan jenis huruf Bookman Old Style.
- Hyperlinks berwarna merah.
- Background berwarna light silver.
5. Blueprint
- Teks dan headers menggunakan jenis huruf Century Gothic.
- Hyperlinks berwarna purple.
- Background berwarna bright yellow.
6. Capsules
- Teks dan headersmenggunakan jenis huruf Arial.
- Hyperlinks berwarna red orange.
- Background berwarna light green.
7. Downtown
- Teks menggunakan jenis huruf Garamond berwarna kuning.
- Headres menggunakan jenis huruf verdana.
- Hyperlinks berwarna orange.
- Background berwarna royal blue.
8. Expediton
- Teks dan headers menggunakan jenis huruf Book Antiqua.
- Background berwarna peach.
9. Highway
- Teks menggunakan jenis huruf Verdana berwarna putih.
- Headers menggunakan jenis huruf Verdana.
- Hyperlinks berwarna orange.
- Background berwarna black.
10. Neon
- Teks dan headres menggunakan jenis huruf Verdana berwarna hijau.
- Hyperlinks berwarna chartreuse.
- Background berwarna black.
11. Poetic
- Teks menggunakan jenis huruf Book Antiqua berwarna purple.
- Headers menggunakan jenis huruf Book Antiqua.
-Backgroud berwarna white.
12. Street
- Teks menggunakan jenis huruf Verdana berwarna navy.
- Headers menggunakan jenis huruf Comic Sans MS.
- Background berwarna light cyan.
13. Sweets
- Teks menggunakan jenis huruf Arial berwarna dark blue.
- Headers menggunakan jenis huruf Comic Sans MS.
- Background berwarna pale yellow.

Langkah-langkah membuat CSS, yaitu :
1. Aktifkan Microsoft FrontPage XP.
2. Pilih menu File - New - Page or Web.
3. Pilih Page Templates pada bagian New from template dari taskpane New Page or Web.
4. Selanjutnya, akan ditampilkan kotak dialog Page Templates yang terdiri atas tiga tab, yaitu General, Frames Pages, dan Style Sheets. Pilih tab Style Sheets yang menampilkan berbagai jenis style sheet yang disediakan oleh Microsoft FrontPage XP.
5. Pilih jenis Arcs kemudian tekan tombol OK.
6. Pilih File - Save
7. Ketikkan SMUKU pada kotak File name kotak dialog Save As kemudian tekan tombol Save.

Untuk mengaplikasikan CSS pada halaman HTML, lakukan langkah-langkah berikut :
1. Aktifkan Microsoft FrontPage XP.
2. Pilih menu File - New - Page or Web.
3. Pilih menu Page Templates pada bagian New from template dari taskpane New Page or Web.
4. Selanjutnya, pilih tab General yang menampilkan berbagai jenis tampilan homepage yang disediakan oleh Microsoft FrontPage XP.
5. Pilih jenis Frequently Asked Questions kemudian tekan tombol OK.
6. Klik tab HTML di bagian bawah di samping tab Normal.
7. Kita akan mengaplikasikan file "SMUKU.css" pada page HTML. Letakkan kursor di sebelah kiri tag (title) kemudian tekan tombol Enter pada Keyboard sehingga terdapat satu baris kosong antara tag (meta name) dengan (title) kemudian letakkan kursor di antara kedua tag tersebut.
8. Ketikkan (LINK href="SMUKU.css" type=text/css rel=stylesheet). Link tersebut akan memberikan efek gratis sederhana yang didefinisikan pada SMUKU.css pada halaman HTML.
9. Selanjutnya, simpan halaman tersebut menggunakan menu File - Save. Beri nama file "table_of_contents.htm". Selanjutnya, klik tab Preview di bagian bawah.

Note: tanda ( ) diganti dengan tanda < >


E. Membuat Aplikasi dalam Sistem yang Terintegrasi

1. Membuat Aplikasi Terintegrasi dengan Microsoft FrontPage

Untuk mebuat sebuah situs atau homepage, dipelukan sebuah skenario yang sederhana. Fungsi dari skenario adalah untuk memandu kita dalam menentukan apa saja yang dapat dilakukan oleh suatu halaman atau website. Jika skenario sudah dibuat maka implementasi atau pembuatan website tidak akan "mengambang".
Berhasil tidaknya pembuatan sebuah homepage sangat tergantung pada skenario yang dikembangkan. Semakin detail sebuah skenario, akan semakin mudah homepage tersebut untuk dikembangkan.

2. Menentukan Directory Lokasi Kerja

Directory tempat kita menyimpan file-file hasil kerja juga harus dipersiapkan dengan baik dan terorganisir. Pada satu directory, sebaiknya tidak terdapat beberapa pekerjaan yang berbeda fungsinya. Pengorganisasian ini untuk mempermudah pencarian file hasil kerja pada saat diperlukan. Lakukan langkah-langkah berikut ini :
1. Buat directory C:\SMUKU pada drive C:\.
2. Dalam directory C:\SMUKU, buat folder Image yang akan digunakan untuk menyimpan gambar-gambar yang akan digunakan dalam homepage SMUKU. Selanjutnya, buat directory / folder CSS yang akan digunakan untuk menyimpan CSS.

3. Membuat Halaman pada Homepage

a. Membuat halaman 1

Langkah-langkahnya, yaitu :
1. Aktifkan Microsoft FrontPage XP.
2. Pilih menu File-New-Page or Web.
3. Pilih menu Page Templates pada bagian New from template dari taskpane New Page or Web. Selanjutnya, pilih tab General yang menampilkan berbagai jenis tampilan homepage yang disediakan oleh Microsoft FrontPage XP.
4. Pilih One-column Body with Cintents on Left kemudian tekan tombol OK.
5. Pada frame page sebelah kiri, hapus SECTION 2 sampai 4.
6. Pada page frame utama yang diperoleh, hapus semua tulisan dibawah "Fish Photo Caption".
7. Ganti tulisan "Your Heading Goes Here" dengan "KEGIATAN SISWA".
8. Ganti "SECTION 1" dengan "Kegiatan Siswa", "Title 1" dengan "Jadwal Pelajaran", "Title 2" dengan "Data Siswa", dan Title 3 "dengan "Link Bermanfaat".
9. Hapus tulisan "Fish Photo Caption" kemudian tekan tombol Enter pada Keyboard. Tulis "Kegiatan Siswa" kemudian tekan tombol Enter pada keyboard. Tulis "Kembali" dan aniikan kursor di atas tulisan "Kembali".
10. Pilih Menu Table-Insert-Table. Selanjutnya, akan ditampilkan kotak dialog Insert Table. Masukkan 5 pada kotak Rows dan 4 pada kotak Columns kemudian tekan tombol OK.
11. Simpan halaman kegiatan siswa pada lokasi C:\SMUKU dengan nama file "kegiatansiswa.htm".
12. Selanjutnya, buat link dari navigasi yang terdapat pada frame kiri. Blok "Kegiatan Siswa" kemudian pilih menu Insert-Hyperlink atau tekan tombol Ctrl + K pada keyboard. Selanjutnya, akan ditampilkan kotak dialog Insert Hyperlink. Tentukan tujuan link yang dituju yaitu file "kegiatan siswa.htm" kemudian tekan tombol OK.
13. Simpan kembali perubahan melalui menu File-Save.

b. Membuat halaman 2

Untuk membuat halaman 2, yaitu halaman jadwal pelajaran kita tidak perlu membuat halaman tersebut dari awal, tetapi cukup melakukan modofikasi pada halaman 1 dengan cara melakukan penyimpanan kembali menggunakan menu File-Save As.
1. Pastikan halaman "kegiatansiswa.htm" masih terbuka.
2. Pilih menu File-Save As. Beri nama file "jadwalpelajaran.htm".
3. Tekan tombol Change title untuk mengganti page title dari DATA SISWA menjadi JADWAL PELAJARAN. Lalu, tekan tombol Save.
4. Ganti "KEGIATAN SISWA" di frame header dengan "JADWAL PELAJARAN" dan "Jadwal Pelajaran" pada bagian frame isi.
5. Lalu, simpan kembali data tersebut.

c. Membuat halaman 3

Untuk mebuat halaman 3, lakukan langkah-langkah yang sama dengan langkah-langkah yang dilakukan pada saat membuat halaman 2.
1. Pilih menu File-Save As. Beri nama file "datasiswa.htm".
2. Tekan tombol Change title untuk mengganti page title menjadi DATA SISWA. Selanjutnya, tekan tombol Save.

d. Membuat halaman 4

Untuk membuat halaman 4 atau link bermanfaat, lakukan langkah-langkah yang sama sperti langkah-langkah mebuat halaman 2 dan 3.
1. Pilih menu file-Save As. Beri nama file "linkbermanfaat.htm".
2. Tekan tombol Change title untuk mengganti page title menjadi LINK BERMANFAAT. Selanjutnya tekan tombol Save.


4. Mengaplikasikan Cascading Style Sheet

1. Copy file yang telah dibuat sebelumnya yaitu file SMUKU.css ke dalam directory C:\SMUKU\CSS.
2. Masukkan (link href="CSS\SMUKU.css"type=text/css rel=stylesheet) di antara tag (meta) dan (title) dalam setiap halaman HTML yang telah dibuat.
3. Simpan halaman tersebut.
4. Melalui Windows Explorer, kamu dapat melihat tampilan akhir dengan cara klik dua kali file "kegiatansiswa.htm", pastikan semua link ke halaman lain seperti jadwal pelajaran, data siswa, dan link bermanfaat berfungsi dengan benar.

Note : Tanda ( ) diganti dengan < >


F. Membuat Grafis Sesuai dengan Homepage yang Diinginkan

Membuat logo grafis SMUKU dengan menggunakan editor Adobe Photoshop 7.0. Langkah-langkahnya yaitu :
1. Aktifkan Adobe Photoshop 7.0.
2. Pilih menu File-New.
3. Lakukan pengaturan pada kotak dialog itu, lalu klik OK.
4. Akan ditampilkan lembar baru. Pilih Rectangle Tool pada toolbox di sebelah kiri halaman kerja untuk memblok halaman kerja. Pilih warna di bagian Set foreground color dengan warna kuning atau sesuai dengan keinginanmu. Blok kotak yang menutupi seluruh halaman sehingga berubah warna sesuia warna yang dipilih.
5. Berikan efek texturize pada halaman kerja dengan cara pilih menu Filter-Texture-Texturize. Untuk Texture, pilih Brick, Scaling 55, dan Relief 4.
6. Ganti warna dengan biru tua dengan cara mengklik tool Set foreground color yang akan menampilkan kotak dialog Color Picker.
7. Klik Horizontal Type Tool pada toolbox untuk membuat tulisan pada halaman kerja. Buat tulisan SMUKU KELAS 3A ANGKATAN 2005 pada halaman kerj. Lalu, klik Move Tool pada toolbox sehingga akan ditampilkan 8 titik.
8. Langkah terakhir yaitu menyimpan gambar dengan nama logosmuku dengan format GIF dalam subfolder Image dalam flder C:\SMUKU kemudian tekan tombol Save. Jika muncul prompt atau kotak dialog lain setelah menekan tombol Save, tekan tombol OK.


G. Mendaftarkan Alamat Domain ke Provider Web Hosting

Untuk mempublikasikan homepage yang telah dibuat melalui Internet, kita perlu mempunyai alamat di Internet yang disebut domain. Untuk mendapatkan alamat di Internet, kita harus membeli domain tersebut. Nama domain sangat spesifik atau bersifat unik. Untuk mendapatkan nama yang sama, kita harus mempunyai extension domain yang berbeda. Misalnya, jika SMUKU.com sudah ada pemiliknya maka kita tidak dapat menggunakannya atau kita harus memilih extension yang lain, misalnya SMUKU.co.id.
Untuk pencarian nama domain, saat ini sudah banyak web hosting atau domain hosting yang mempunyai kemampuan untuk itu, baik hosting lokal maupun internasional. Akan tetapi, yang paling lengkan, yaitu http://www.internic.com dan http://www.register.com.

Lakukan langkah-langkah di bawah ini untuk mendaftarkan alamat domain ke provider web hosting.
1. Buka Internet Explorer dan ketikkan http://www.register.com pada kotak URL pada web browser komputermu.
2. Selanjutnya, ketikkan nama domain yang akan kita cari, misalnya sekolah.com kemudian tekan tombol Go.
3. Akan tampil halaman baru. Ketikkan sekolahsmuku pada kotak TRY A NEW SEARCH kemudian tekan tombol Search. Kamu dapat menggunakan nama domain yang lain yang kamu inginkan.


H. Melakukan Upload

Kita akan mempelajari cara melakukan upload dokumen yang telah kita buat dalam komputer kita ke Internet. Hal ini mebutuhkan tempat untuk menyimpan dan menampilkan data di Internet. Untuk lebih mudah memahami cara melakukan upload dan perbaikan data homepage, kita gunakan fasilitas gratis dari Yahoo dengan alamat http://www.yahoo.com.

Langkah-langkahnya, yaitu :
1. Daftarkan nama sekolahsmuku sebagai user atau pengguna Yahoo Geocities. Caranya, tekan tombol Sign Up Now. Klik link Sign Up di bawah kotak log in.
2. Isi form tersebut dengan lengkap. Setelah itu, tekan tombol I Agree.
3. Lalu, klik link Build your website now! untuk berpindah ke halaman berikutnya.
4. Akan ditampilkan halaman GeoCities Control Panel. Pilih menu Manage kemudian klik link File Manager. Klik link Open File Manager.
5. Di halaman berikutnya akan ditampilkan fasilitas untuk melakukan upload file. Tekan tombol Upload Files yang terdapat di sebelah kanan atas. Lalu, masukkan file-file HTML yang sudah dibuat sebelumnya. Caranya, tekan tombol Browse di sebelah kanan setiap kotak untuk mengisi lokasi nama file yang dimaksud. Kemudian, tekan tombol Upload Files.
6. Selanjutnya, tekan link File Manager yang terdapat di bagian bawah halaman.
7. Untuk memasukkan folder gambar yang sudah kita buat, kita perlu membuat subdirectory untuk folder gambar tersebut. Caranya, tekan tombol New di bawah Subdirectories. Beri nama subdirectories dengan nama Image kemudian tekan tombol Create Subdirectory.
8. Selanjutnya, buat subdirectory untuk menyimpan file CSS dengan ara yang sama. Beri nama subdirectories dengan nama CSS kemudian tekan tombol Create Subdirectory.
9. Edit file index.htm yang sudah disediakan oleh Geocities dengan melakukan modifikasi terhadap isinya. Tandai file index.htm kemudian tekan tomobol Edit.
10. Lakukan proses pengeditan melalui editor HTML yang tersedia. Setelah selesai, tekan tombol Save.
11. Untuk memasukkan file gambar Fish.jpg dan file CSS SMUKU.css ke dalam subdirectory Image dan CSS, klik dua kali subdirectory CSS pada halaman yang ditampilkan kemudian lakukan upload file SMUKU.css melalui tombol Upload Files. Kamu dapat memasukkan file Fish.jpg ke dalam subdirectory Image dengan cara yang sama.
12. Untuk menampilkan tampilan homepage yang telah kamu upload, klik link View My Site yang terdapat di sebelah kanan atas.


I. Memperbaiki dan Merivisi Data yang Sudah Ada

Langkah-langkah memperbaiki homepage yang telah kita buat pada Yahoo! Geocities agar mudah diakses, yaitu :
1. Aktifkan Yahoo! Geocities, lakukan log in dengan nama sekolahsmuku dan password yang sesuai.
2. Aktifkan GeoCities Control Panel. Pilih menu Manage kemudian klik link File Manager. Pada halaman File Manager, klik link Open File Manager.
3. Upload file logosmuku.gif dengan cara menekan tombol Browse di sebelah kanan kotak upload file.
4. Ubah gambar fish.jpg yang terdapat dalam setiap halaman, yaitu datasiswa.htm, jadwalpelajaran.htm, kegiatansiswa.htm, dan linkbermanfaat.htm dengan gamabr logosmuku.gif.
5. Ubah link (img src="Fish.jpg" width="188" height="103") dengan (img src="logosmuku.gif" width="500" height=103"). Selanjutnya, tekan tombol Save.
6. Untuk menampilkan halaman yang sudah diubah gambarnya, klik link View My Site.

Note : Tanda ( ) diganti dengan < >