Rangkuman bab 5

A. Menentukan Perangkat Lunak Untuk Membuat Homepage.

Beberapa hal yang harus diperhatikan, yaitu sebagai berikut :

l. Tujuan dibuatnya homepage, sebenarnya yang menjadi tujuan utama dari pembuatan homepage harus jelas.
2. Siapa (anak-anak/remaja/orang dewasa) yang menjadi target untuk melihat homepage yang kita buat. Misalnya, yang menjadi target utama untuk melihat dan mengakses adalah teman-teman di SMUKU dari kelas 1 sampai 3.
3. Klasifikasikan informasi yang akan ditampilkan dalam homepage. Misalnya, informasi pelajaran, data siswa, link bermanfaat, dan informasi lainnya.
4. Hasil klasiflkasi 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".

Terdapat tiga kriteria tools atau alat bantu yang dapat digunakan untuk membantu pengembangan homepage, yaitu editor HTML, graphics, dan multimedia animasi dan suara.

1. Editor HTML.

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 suatu halaman homepage. Editor HTML yang bersifat graphical user interface, akan mengurangi waktu kita dalam proses penulisan sintaks. Demikian juga untuk pengembangan homepage, kita akan menggunakan 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. 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. Penggunaan layout untuk navigasi ini tergantung pada jenis navigasi dan informasi yang akan ditampilkan dalam homepage. Untuk melihat dan memilih jenis layout yang tersedia dalam Microsoft FrontPage XP, dapat kita lakukan pada saat akan membuat halaman atau website baru. Langkah untuk melakukannya, yaitu sebagai berikut :

1. Pilih tombol start -> All Programs -> Microsoft FrontPage. Lalu,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.
5. Pilih jenis frame yang kamu inginkan kemudian tekan tombol OK.

Jenis-]enis frame pada Microsoft FrontPage XP, yaitu :

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

- Contents

Frame di sebelah kiri merupakan link yang akan mengubah frame utama di sebelah kanan.

- Footers

Frame utama di atas, frame bawah adalah footer. Hyperlink di footer akan mengubah tampilan di frame utama.

- Footnotes

Sama dengan Footers, tetapi hyperlink di frame utama akan mengubah footnes.

- Header
Membuatyrame header navigasi dan sebuah frame utama di bawahnya. Hyperlink di header akan mengubah frame utama.

- Header, Footer and Contents

Membuat frame header dan footer runtuk navigasi. Hyperlink di header dan footer akan mengubah frame isi.

- Horizontal Split

Frame atas dan bawah yang independent atau tidak saling berhubungan.

- Nested Hierarchy

Hyperlink di sebelah kiri akan mengubah frame sebelah kanan atas. Hyperlink di frame kanan atas akan mengubah isi frame utama.

- Top-Down' Hierarchy

Frame paling atas atau pertama akan mengubah frame di bawahnya, frame kedua akan mengubah isi frame ketiga.

- Vertical Split

Frame kanan dan kiri yang independent atau tidak saling terhubung.

C. Menerapkan Hyperlink

Pranala, pautan atau link (juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain. Seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan.

Ada beberapa cara (format) untuk menampilkan pranala pada halaman web. Sebuah embedded link (pranala yang tersimpan) adalah salah satu dari beberapa cara yang biasa digunakan: satu atau lebih dari kata-kata yang menggunakan tipe/gaya teks khusus.

Hyperlink digunakan sebagai alat navigasi halaman pada homepage. 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" dengan cara men-drag tombol kiri mouse.
4. Tekan torabol 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 Look in digunakan untuk memilih lokasi tujuan link. Setelah selesai melakukan pengaturan terhadap link yang dibuat, tekan tombol OK.
5. Setelah file disimpan dan dijalankan, ketika kita klik "Link ke halaman Iain" maka akan membuka halaman 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 bam yang ditampilkan pertama.
3. Klik tab HTML di bagian bawah dokumen.
4. Selanjutnya, akan ditampilkan sintaks HTML.
5. Letakkan kursor di depan kata "Link" dan di belakang tag
pada sintaks HTML yang ditampilkan.
6. Sebagai contoh, link tujuan kita adalah filejadwalpelajaran.htm. Ketikkan tag di depan kata "Link" dan di belakang tag.
7. Letakkan kursor di belakang kata "lain" dan di depan tag.
Ketikkan tag.
8. Klik tab Normal di bagian bawah dokumen untuk melihat hasil akhir. Hasilnya akan berbentuk tampilan.

D. Menerapkan Cascading Style Sheet.

Microsoft FrontPage sudah menyediakan Cascading Style Sheet (CSS) yang dapat kita gunakan. Fungsi utama dari 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 FrontPage 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

- Normal Style Sheet
-> CSS kosong

- Arcs
-> - Teks menggunakan jenis huruf Verdana berwarna coklat.
- Headers menggunakan jenis huruf Times New Roman berwarna coklat.
- Background berwarna kuning.

- Bars
-> - Teks menggunakan jenis huruf Arial.
- Headers menggunakan jenis huruf Times New Roman.
- Background berwarna light silver.

- Blocks
-> - Teks dan headers menggunakan jenis huruf Bookman Old Style.
- Hyperlinks berwarna merah.
- Background berwarna light silver.

- Blueprint
-> - Teks dan headers menggunakan jenis huruf Century Gothic.
- Hyperlinks berwarna purple.
- Background berwarna bright yellow.

- Capsules
-> - Teks dan headers menggunakan jenis huruf Arial.
- Hyperlinks berwarna red orange.
- Background berwarna light green.

- Downtown
-> - Teks menggunakan jenis huruf Garamond berwarna kuning.
- Headers menggunakan jenis huruf Verdana.
- Hyperlinks berwarna orange.
- Background'berwarna royal blue.

- Expedition
-> - Teks dan headers menggunakan jenis huruf Book Antiqua.
- Background berwarna peach.

- Highway
-> - Teks menggunakan jenis huruf Verdana berwarna putih.
- Headers menggunakan jenis huruf Verdana.
- Hyperlinks berwarna orange.
- Background berwarna black.

- Neon
-> - Teks dan headers menggunakan jenis huruf Verdana berwarna hijau.
- Hyperlinks berwarna chartreuse.
- Background berwarna black.

- Poetic
-> - Teks menggunakan jenis huruf Book Antiqua berwarna purple.
- Headers menggunakan jenis huruf Book Antiqua.
- Background berwarna white.

- Street
-> - Teks menggunakan jenis huruf Verdana berwarna navy.
- Headers menggunakan jenis huruf Comic Sans MS.
- Background berwarna light cyan.

- Sweets
-> - Teks menggunakan jenis huruf Arial berwarna dark blue.
- Headers menggunakan j enis huruf Arial Rounded MT Bold.
- Background berwarna pale yellow.

E. Skenario membuat homepage sederhana :

Topik
Membuat homepage untuk kelas 3 A SMUKU.

Fungsi homepage
1. Menampilkan berita kegiatan terbaru dari kelas 3A.
2. Menampilkan jadwal pelajaran untuk kelas 3A.
3. Menampillkan data siswa kelas 3A lengkap dengan foto dan hobi.
4. Menampilkan link ke homepage-homepage yang berguna.
5. Latar belakang homepage berwarna kuning.

Halaman 1
Halaman 1 merupakan halaman kegiatan siswa yang terdiri atas :

1. Logo SMUKU.
2. Berita kegiatan terbaru siswa.
3. Link ke halaman jadwal pelajaran.
4. Link ke halaman data siswa kelas 3A.
5. Link ke halaman homepage yang berguna.

Halaman 2
Halaman 2 merupakan halaman jadwal pelajaran yang terdiri atas :

1, Logo SMUKU.
2. Jadwal pelajaran siswa kelas 3A.
3. Link ke halaman berita kegiatan siswa.
4. Link ke halaman data siswa kelas 3A.
5. Link ke halaman homepage yang berguna.

Halaman 3
Halaman 3 merupakan halaman data siswa yang terdiri atas :

1. Logo SMUKU.
2. Data siswa kelas 3 A.
3. Link ke halaman berita kegiatan siswa.
4. Link ke halaman jadwal pelajaran siswa kelas 3A.
5. Link ke halaman homepage yang berguna.

Halaman 4
Halaman 4 merupakan halaman yang berisi link ke homepage-homepage yang berguna, terdiri atas :

1. Logo SMUKU.
2. Homepage dan link yang berguna.
3. Link ke halaman berita kegiatan siswa.
4. Link ke halaman jadwal pelajaran siswa kelas 3A.
5. Linkke halaman data siswa kelas 3A.

2. Menentukan Directory Lokasi Kerja.

Directory tempat kita menyimpan 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 di bawah ini :

1. Buat directory SMUKU pada drive C:\.

2. Dalam directory C:\ SMUKU, buat directory/folder Image yang digunakan untuk menyimpan gambar-gambar yang akan digunakan dalam homepage SMUKU. Selanjutnya, buat directory /folder CSS yang akan digunakan untuk menyimpan CSS.

3. Pada Windows Explorer akan terlihat struktur file.

3. Membuat Halaman pada Homepage.

Homepage yang kita buat terdiri atas empat halaman. Setiap halaman memperlihatkan tampilan yang berbeda sesuai dengan fungsinya masing-masing.

a. Membuat halaman 1

Dengan menggunakan skenario yang telah dibuat sebelumnya, kita akan mulai membuat halaman 1, yaitu halaman Kegiatan Siswa. Langkah-langkahnya, yaitu sebagai berikut :

1. Aktifkan Microsoft FrontPage XP.

2. Pilih menu File -> Hew -> Page or Web.

3. Pilih Page Templates pada bagian New from template dari task pane New Page or Web.

4. Selanjutnya, akan ditampilkan kotak dialog Page Templates yang terdiri atas tiga tab, yaitu General, Frar, Pages, dan Style Sheets. Pilih tab General yang menampilkan berbagai jenis tampilan homepage yang disediakan oleh Microsoft FrontPage XP.

5. Pilih One-column Body with Contents on Left kemudian tekan tombol OK.

6. Pada page frame sebelah kiri, hapus SECTION 2 sampai 4.

7. Pada page frame utama yang diperoleh, hapus semua tulisan di bawah "Fish Photo Caption". Hasilnya, akan diperoleh satu page.

8. Ganti tulisan "Your Heading Goes Here" dengan "KEGIATAN SISWA".

9. Ganti "SECTION 1" dengan "Kegiatan Siswa", "Title 1" dengan "Jadwal Pelajaran", "Title 2" dengan "Data Siswa", dan "Title 3" dengan "Link Bermanfaat".

10. Hapus tulisan "Fish Photo Caption" kemudian tekan tombol Enter pada keyboard. Tulis "Kegiatan Siswa" kemudian tekan tombol £«rerpada keyboard. Tulis "Kembali" dan naikkan kursor di atas tulisan "Kembali".

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

12. Ketikkan data di bawah ini dalam tabel yang disisipkan.

Navigasi & Hyperlink
Jadwal Pelajaran -> jadwalpelajaran. htm
Data Siswa -> datasiswa.htm
Link Bermanfaat -> linkbermanfaat.htm
Kembali -> kegiatansiswa.htm


13. Simpan halaman kegiatan siswa pada lokasi C:\SMUKU dengan nama file "kegiatansiswa.htm".

14. Selanjutnya, kita akan membuat 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 linkyang dituju yaitn file "kegiatansiswa.htm" kemudian tekan tombol OK.

b. Membuat halaman 2.

Untuk membuat halaman 2, yaitu halaman jadwai pelajaran kita tidak perlu membuat halaman tersebut dari awal, tetapi cxikup melakukan modifikasi terhadap 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 paga title dari DATA SISWA menjadi JADWAL PELAJARAN. Selanjutnya, tekan tombol Save.
4. Kita hanya akan memodifikasi frame isi dan header dari halaman kegiatan siswa.
5. Ganti "KEGIATAN SISWA" di frame header dengan "JADWAL PELAJARAN" dan "Jadwal Pelajaran" pada b&gian frame isi.
6. Ubah isi tabel di bawah "Jadwal Pelajaran" seperti tabel pada Gambar 5.35. Simpan kembali hasil perubahan yang dilakukan.

c. Membuat halaman 3.

Untuk membuat halaman 3 atau data siswa, 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 Qhange title untuk mengganti page title menjadi DATA SISWA. Selanjutnya, tekan tombol Save.
3. Ubah isi tabel. Simpan kembali hasil perubahanyang dilakukan.

d. Membuat halaman 4.

Untuk membuat halaman 4 atau link bermanfaat, lakukan langkah-langkah yang sama dengan langkah-langkah yang dilakukan pada saat membuat halaman 2 dan 3.

1. Pilih menu File -> Save As. Beri nama file "linkbermanfaat.htm".
2. Tekan tombol Qhange title untuk mengganti page title menjadi LINK BERMANFAAT. Selanjutnya, tekan tombol Save.
3. Ubah isi tabel. Simpan kembali hasil perubahan yang dilakukan.

4. Mengaplikasikan Cascading Style Sheet.

1. Copy file yang telah dibuat sebelumnya yaitu file SMUKU.css ke dalam directory C:\SMUKU\CSS.

2. Masukkan di antara tag dan

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.

F. Membuat Grafis Sesuai dengan Homepage yang Diinginkan.

Langkah membuat membuat logo grafis SMUKU dengan menggunakan editor Adobe Photoshop 7.0, yaitu sebagai berikut :

1. Aktifkan Adobe Photoshop 7.0 dengan cara klik tombol start -> All Programs -> Adobe Photoshop 7.0.
2. Pilih menu File -> New.
3. Selanjutnya, akan ditampilkan kotak dialog New. Lakukan pengaturan pada kotak dialog tersebut. Selanjutnya, tekan tombol OK.
4. Setelah dilakukan pengaturan lembar baru pada Adobe Photoshop, akan ditampilkan lembar baru tersebut.
5. Selanjutnya, pilih Rectangle Tool pada toolbox di sebelah kiri halaman kerja untuk memblok halaman kerja. Sebelumnya, pilih warna di bagian Set foreground color dengan warna kuning atau sesuai dengan keinginanmu. Blok kotak yang menutupi seluruh halaman sehingga berubah warna sesuai dengan warna yang kamu pilih.
6. Berikan efek texturizer dengan cara pilih menu Filter -> Texture -> Texturizer. Selanjutnya, akan ditampilkan kotak dialog Texturizer. Untuk Texture, pilih Brick, Scaling 55, dan Relief 4
7. Ganti warna dengan biru tua dengan cara mengklik tool Set foreground color yang akan menampilkan kotak dialog Color Picker. Pilih warna biru kemudian tekan tombol OK.
8. Klik Horizontal Type Tool pada toolbox untuk membuat tulisan pada halaman kerja. Buat tulisan SMUKU KELAS 3A ANGKATAN 2005 pada halaman kerja. Selanjutnya, klik Move Tool pada toolbox sehingga akan ditampilkan 8 titik. Jika 8 titik tersebut belum dapat ditampilkan, aktifkan Show Bounding Box pada bagian atas halaman kerja. Geser (drag) tulisan tersebut untuk menyesuaikan ukurannya dengan halaman kerja.
9. Langkah terakhir yaitu menyimpan gambar dengan namalogosmuku dengan format GIF dalam subfolder lmage dalam folder C:\SMUKU kemudian tekan tombol Save. Jika muncul prompt atau kotak dialog lain setelah menekan tombol Save, tekan tombol OK pada kotak dialog tersebut.

G. Mendaftarkan Alamat Domain ke Provider Web Hosting.

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. Yang paling lengkap,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. Untuk melakukan akses Internet, aktifkan Internet Explorer dan pastikan komputer sudah terhubung dengan Internet melalui modem atau jaringan sekolah atau warnet. Ketikkan http://www.register.com pada kotak URL pada web browser komputermu yang akan menampilkan halaman web.
2. Selanjutnya, cari kotak pencarian domain. Selanjutnya, ketikkan nama domain yang akan kita cari, misalnya sekolah.com kemudian tekan tombol Go.
3. Pada halaman tersebut terlihat bahwa domain sekolah. com sudah ada dan yang tersedia yaitu sekolah.tv dan sekolah.cc.
4. Sekarang, kita mencari domain lain yaitu sekolahsmuku.com. Ketikkan sekolahsmuku pada kotak TRY A NEW SEARCH kemudian tekan tombol Search. Kamu dapat menggunakan nama domain yang lain yang kamu inginkan.
5. Hasil menunjukkan bahwa nama domain tersebut masih tersedia. Kita dapat membelinya jika kita mempunyai kartu kredit, tetapi jika kita ingin melakukan pembelian kita harus mencari yang paling murah dan yang paling dekat atau berada dalam saru negara dengan kita. Misalnya, dari Indosat, Telkom, atau beberapa perusahaan hosting lain yang sudah mulai menyediakan layanan tersebut di Indonesia dengan tarif yang relatif terjangkau. Hal yang paling penting, yaitu pembayaran yang fleksibel (dengan rupiah) dan tanpa kartu kredit.

H. Melakukan Upload

Untuk lebih mudah memahami cara melakukan upload dan perbaikan data homepage, kita gunakan fasilitas gratis dari Yahoo dengan alamat http://www.yahoo.com. kita akan meng-upload homepage yang kita buat sebelumnya ke Yahoo Geocities agar mudah diakses. Langkah-langkahnya, yaitu :

1. Daftarkan nama sekolahsmuku sebagai user atau pengguna Yahoo Geodties. Caranya, tekan tombol Sign Up Now. Selanjutnya, akan ditampilkan halaman yang menyediakan fasilitas log in. Klik link Sign Up dibawah kotak log in.
2. Untuk pengguna baru, akan ditampilkan halaman untuk melakukan registrasi. Lengkapi form, Setelah selesai melengkapi form registrasi yang tersedia, tekan tombol I Agree.
3. Lakukan proses registrasi secara lengkap. Setelah selesai melakukan proses registrasi, selanjutnya akan ditampilkan halaman. Klik link Build your websites now! untuk berpindah ke halaman berikutnya.
4. Selanjutnya, akan ditampilkan halaman Geocities Control Panel, Pilih menu Manage kemudian klik link File Manager.
5. Pada halaman File Manager, klik link Open File Manager.
6. Pada halaman berikutnya akan ditampilkan fasilitas untuk melakukan upload file. Tekan tombol Upload Files yang terdapat di sebelah kanan atas.Selanjutnya, masukkan file-file HTML yang sudah dibi sebelumnya. Caranya, tekan tombol Browse di sebelah kanan setiap kotak untuk mengisi lokasi nama file dimaksud. Setelah selesai memasukkan semua file yang dibutuhkan, tekan tombol Upload File Kamu dapat menekan tombol Add more files untuk menambah jumlah file yang akan dimasukkan.
7. Setelah memasukkan file yang dibutuhkan, selanjutnya akan ditampilkan pesan bahwa proses upload file telah berhasil dilakukan.
8. Lalu, tekan link File Manager yang terdapat dibagian bawah halaman.
9. Untuk memasukkan folder gambar yang sudah dibuat, kita perlu membuat subdirectory untuk folder gambar tersebut. Caranya, tekan tombol New di bawah Subdirectories yang ditampilkan. Beri nama subdirectory dengan nama Image kemudian tekan tombol Create Subdirectory.
10. Selanjutnya, buat subdirectory untuk menyimpan/fe CSS dengan cara yang sama. Beri nama subdirectory dengan nama CSS kemudian tekan tombol Create Subdirectory
11. Edit file index.htm yang sudah disediakan oleh Geocities dengan meiakukan modifikasi terhadap isinya. Tandai file index.htm kemudian tekan tombol Edit.
12. Lakukan proses pengeditan melalui editor HTML yang tersedia. Setelah selesai, tekan tombol Save untuk menyimpan hasil pengeditan.
13. 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.
14. Untuk menampilkan tampilan homepage yang telah kamu upload, klik link View My Site yang terdapat di halaman sebelah kanan atas.

I. Memperbaiki dan Merevisi Data Yang Sudah Ada

Cara memperbaiki homepage yang telah kita buat pada Yahoo! Geocities, mudah diakses. Langkah-langkahnya, yaitu sebagai berikut:

1. Aktifkan Yahoo! Geocities, lakukan login dengan nama sekolahsmuku dan password yang sesuai.
2. Aktifkan Geocities Control Panel yang akan menampilkan halaman. Pilih menu
Manage kemudian klik link File Manager. Pada halaman File Manager, klik link Open File Manager kemudian 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 gambar logosmuku.gif.
5. Ubah link dengan. Selanjutnya, tekan tombol Save untuk menyimpan hasil pengeditan
halaman.
6. Untuk menampilkan halaman yang sudah diubah gambarnya, klik link View My Site di bagian kanan atas halaman.