Jumat, 03 Desember 2010
Membuat Homepage Sederhana (Bab 5)
Membuat Homepage Sederhana
A.Menentukan Perangkat Lunak untuk Membuat Homepage
Beberapa hal yang harus diperhatikan dalam membuat homepage :
1. Tujuan dibuatnya homepage
2. Siapa 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
5. Buat sebuah skenario setiap hasil klasifikasi tersebut agar infprmasi yang ditampilkan benar-benar jelas
Terdapat tiga kriteria tools yang dapat digunakan untuk membantu pengembangan homepage :
1. Editor HTML
2. Graphics
3. Multimedia animasi dan suara
EDITOR HTML
Editor HTML digunakan untuk mendesain homepage dan komponen-komponennya.
Editor HTML juga digunakan untuk menggabungkan suara,gambar,dan animasi yang telah dibuat di dalam suatu halaman homepage.
Editor HTML yang bersifat graphical user interface akan mengurangi waktu kita dalam proses penulisan sintaks.
Microsoft Fint Page Xp merupakan produk Microsoft sebagai editor HTML.
Bagian-Bagian Microsoft font page :
1. Toolbar : melakukan pengaturan format data atau homepage yang
akan di desain
2. Toolbox views : perorganisasian file kerja dalam sebuah homepage
EDITOR GRAPHICS
Editor grafis digunakan untuk mengedit gambar yang akan ditampilkan pada homepage.
Beberapa hal yang harus diperhatikan dalam membuat homepage :
1. Tujuan dibuatnya homepage
2. Siapa 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
5. Buat sebuah skenario setiap hasil klasifikasi tersebut agar infprmasi yang ditampilkan benar-benar jelas
Terdapat tiga kriteria tools yang dapat digunakan untuk membantu pengembangan homepage :
1. Editor HTML
2. Graphics
3. Multimedia animasi dan suara
EDITOR HTML
Editor HTML digunakan untuk mendesain homepage dan komponen-komponennya.
Editor HTML juga digunakan untuk menggabungkan suara,gambar,dan animasi yang telah dibuat di dalam suatu halaman homepage.
Editor HTML yang bersifat graphical user interface akan mengurangi waktu kita dalam proses penulisan sintaks.
Microsoft Fint Page Xp merupakan produk Microsoft sebagai editor HTML.
Bagian-Bagian Microsoft font page :
1. Toolbar : melakukan pengaturan format data atau homepage yang
akan di desain
2. Toolbox views : perorganisasian file kerja dalam sebuah homepage
EDITOR GRAPHICS
Editor grafis digunakan untuk mengedit gambar yang akan ditampilkan pada homepage.
 |
| Corel Draw |
Beberapa Editor Graphics yang sering digunakan :1. CorelDRAW
2. Adobe Photoshop
EDITOR MULTIMEDIA ANIMASI DAN SUARA
Editor multimedia digunakan untuk membuat animasi gambar dan suara.
Macromedia Flash merupakan editor animasi yang paling populer.
Macromedia Flash tidak hanya digunakan untuk membuat animasi gambar dan suara tetapi juga untuk membuat suatu homepage multimedia.
Editor multimedia digunakan untuk membuat animasi gambar dan suara.
Macromedia Flash merupakan editor animasi yang paling populer.
Macromedia Flash tidak hanya digunakan untuk membuat animasi gambar dan suara tetapi juga untuk membuat suatu homepage multimedia.
B. Membuat Layout Homepage yang Diinginkan
Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan.
Langkah-langkah untuk melihat dan memilih jenis layout yang tersedia dalam Microsoft Font Page XP, sebagai berikut :
1) Pilih tombol start - All Program- Microsoft Font Page
2) Pilih menu file- New - Page or Web
3) Pilih page templates pada bagian bawah new form 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 Mirosoft Font Page XP.
5) Pilih jenis frame yang diinginkan kemudian tekan tombol OK.
Jenis-jenis frame :
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 di frame utama.
4)Footnotes
Sama dengan Footers, tetapi hyperlink di frame utama akan menubah tampilan footnotes.
5)Header
Membuat frame header navigasi dan sebuah frame utama di bawahnya.
6)Header, Footer, and Contents
Membuat frame header dan footer untuk navigasi.
7)Horizontal Split
Frame atas dan bawah yang independent atau tidak, saling berhubungan.
8)Nested Hierarchy
Hyperlink di sebelah kiri akan mengubah frame sebelah kanan atas. Hyperlink di kanan atas akan mengubah isi frame utama.
9)Top-Down Hierarchy
Frame paling atas akan mengubah frame di bawahnya. Frame kedua akann mengubah 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.
Langkah-langkah membuat hyperlink menggunakan Microsoft Font Page XP :
1.Aktifkan aplikasi Microsoft Font Page XP
2.Buat tulisan “Link ke halaman lain” pada dokumen baruyang ditampilkan pertama kali
3.Blok tulisan “Link ke halaman lain”
4.Tekan tombol Ctrl+K sehingga akan ditampilkan kotak dialog Insert Hyperlink.
5.Akan terlihat hasil
6.Setelah file disimpan kita klik “Link ke halaman lain” maka akan membuka halaman tjuan link tersebut
D. Menerapkan Cascading Style Sheet
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
Normal Style sheet :
CSS kosong
Ancs :
-teks menggunakan jenis huruf Verdana berwarna coklat
-Headers menggunakan jenis huruf Times New Roman berwarna coklat
-Background berwarna light oliveBars
-teks menggunakan jenis huruf Arial
-hyperlink berwarna merah
-Background berwarna light olive
Blocks :
-Teks dan Headers menggunakan jenis huruf Bookman Oldstyle
-hyperlink berwarna merah
-Background berwarna light silver
Blueprint :
-Teks dan Headers menggunakan jenis huruf Century Gothic
-hyperlink berwarna purple
-Background berwarna bright yellow
Capsules :
-Teks dan Headers menggunakan jenis huruf Arial
-hyperlink berwarna red orange
-Background berwarna light green
Downtown :
-teks menggunakan jenis huruf Gramond berwarna kuning
-Headers menggunakan jenis huruf Verdana
-Hyperlink berwarna orange
-Background berwarna royal blue
Expediton :
-Teks dan Headers menggunakan jenis huruf book antiqua
-Background berwarna peach
4)Footnotes
Sama dengan Footers, tetapi hyperlink di frame utama akan menubah tampilan footnotes.
5)Header
Membuat frame header navigasi dan sebuah frame utama di bawahnya.
6)Header, Footer, and Contents
Membuat frame header dan footer untuk navigasi.
7)Horizontal Split
Frame atas dan bawah yang independent atau tidak, saling berhubungan.
8)Nested Hierarchy
Hyperlink di sebelah kiri akan mengubah frame sebelah kanan atas. Hyperlink di kanan atas akan mengubah isi frame utama.
9)Top-Down Hierarchy
Frame paling atas akan mengubah frame di bawahnya. Frame kedua akann mengubah 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.
Langkah-langkah membuat hyperlink menggunakan Microsoft Font Page XP :
1.Aktifkan aplikasi Microsoft Font Page XP
2.Buat tulisan “Link ke halaman lain” pada dokumen baruyang ditampilkan pertama kali
3.Blok tulisan “Link ke halaman lain”
4.Tekan tombol Ctrl+K sehingga akan ditampilkan kotak dialog Insert Hyperlink.
5.Akan terlihat hasil
6.Setelah file disimpan kita klik “Link ke halaman lain” maka akan membuka halaman tjuan link tersebut
D. Menerapkan Cascading Style Sheet
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
Normal Style sheet :
CSS kosong
Ancs :
-teks menggunakan jenis huruf Verdana berwarna coklat
-Headers menggunakan jenis huruf Times New Roman berwarna coklat
-Background berwarna light oliveBars
-teks menggunakan jenis huruf Arial
-hyperlink berwarna merah
-Background berwarna light olive
Blocks :
-Teks dan Headers menggunakan jenis huruf Bookman Oldstyle
-hyperlink berwarna merah
-Background berwarna light silver
Blueprint :
-Teks dan Headers menggunakan jenis huruf Century Gothic
-hyperlink berwarna purple
-Background berwarna bright yellow
Capsules :
-Teks dan Headers menggunakan jenis huruf Arial
-hyperlink berwarna red orange
-Background berwarna light green
Downtown :
-teks menggunakan jenis huruf Gramond berwarna kuning
-Headers menggunakan jenis huruf Verdana
-Hyperlink berwarna orange
-Background berwarna royal blue
Expediton :
-Teks dan Headers menggunakan jenis huruf book antiqua
-Background berwarna peach
Highway :
- Teks menggunakan jenis huruf Verdana berwarna putih
- Headers menggunakan jenis huruf Verdana
- Hyperlink berwarna orange
- Background berwarna black
Neon :
- Teks menggunakan jenis huruf Verdana berwarna hijau
- Hyperlink 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 Sains MS
-Background berwarna light cyan
E.Membuat Aplikasi dalam Sistem yang Terintregasi
Untuk membuat sebuah situs atau homepage dibutuhkan skenario sederhana. Fungsi dari skenario untuk memandu dalam menentukan apa saja yan dapat dilakukan oleh suatu halaman atau website.
 | |
| homepage register.com |
F. Mendaftarkan Alamat Domain ke Provider Web Hosting
Langkah-langkah untuk mendaftarkan alamat domain ke provider web hosting :
1. Aktifkan internet explorer ketik http://www.register.com pada kotak url.
2. Cari kotakpencarian domain lalu ketik misalkan sekolah.com tekan tombol Go
3. Hasilnya akan terlihat bahwa domain sekolah.com sudah ada dan yang tersedia yaitu sekolah.tv dan sekolah.cc
4. Cari domain yang lain yaitu sekolahsmuku.com ketikkan pada TRY A NEW SEARCH kemudian tekan tombol search.
5. Hasil pencarian domain sekolahsmuku.com menunjukkan bahwa nama domain tersebut masih
tersedia.
G. Melakukan Upload
Daftarkan nama sekolah SMUKU sebagai user. Untuk pengguna baru akan ditampilkan halaman untuk melakukan registrasi lakukan proses registrasi secara lengkap.
Selanjutnya akan ditampilkan halaman Geocities ControlPanel. Pilih menu Manage kemudian klik link File Manager. Pada Halaman File Manager,klik link open file manager
Pada halaman berikutnya akan ditampilkan fasilitas untuk melakukan upload file. Tekan tombol upload files yang terdapat di sebelah kanan atas. Selajutnya masukkan file-file HTML yang sudah dibuat sebelumnya. Setelah memasukkan file yang dibutuhkan tekan tombol Upload Files.
Lalu akan ditampilkan pesan bahwa proses upload file telah berhasil dilakukan
Tekan link file manager yang terdapat di bagian bawah halaman
Untuk memasukkan folder gambar yang sudah dibuat kita buat sub directory dengan tekan tombol New di bawah Subdirectories beri nama Image kemudian tekan tombol Create Subdirectory.
Selanjtnya buat subdirectory untuk menyimpan CSS file dengan cara yang sama
Edit file index.htm yang sudah disediakan Geocities kemudian tekan tombol Edit
Lakukan proses pengeditan melalui editor HTML yang tersedia. Tekan tombol Save untuk menyimpan hasil pengeditan.
Untuk memasukkan file gambar k dalam subdirectory Image dan CSS,klik dua kali subdiectory CSS kemudian lakukan upload file SMUKU.css melalui tombol upload files
Klik link View My Site untuk menampilkan tampilan homepage yang telah di upload.
Langkah-langkahnya :
1. Aktifkan Yahoo!GeoCities lakukan log in
2. Aktifkan GeoCities Control Panel. Pilih menu Manage kemudian klik file manager. Klik link open file manager.
3. Upload file dengan cara menekan tombol browse
4. Ubah gambar yang terdapat di setiap halaman dengan gambar yang baru di upload dengan cara pengeditan index.htm
5. Ubah linknya. Selanjutnya tekan tombol save untuk menyimpan hasil pengeditan halaman
6. Untuk menampilkan halaman yang sudah diubah gambarnya klik link View My Site
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar