BAB 5 MATERI TIK KELAS XI

BAB 5

Membuat Homepage Sederhana

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 Front Page. 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-jenis 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
Membuat frame 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

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. Membuat Aplikasi dalam Sistem yang Terintegrasi.

1. Membuat Aplikasi Terintegrasi dengan Microsoft FrontPage.

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.