Bab 5 TIK Kelas XI

Bab 5

Membuat Homepage Sederhana

A. Menentukan Perangkat Lunak untuk Membuat Homepage

v Hal yang harus diperhatikan dalam membuat homepage:

1. Tujuan dibuatnya homepage

2. Orang yang menjadi target untuk melihat homepage kita

3. Informasi yang akan ditampilkan dalam homepage

4. Hasilnya mewakili satu halaman homepage dan dapat ditambah dengan hyperlink

5. Buat kerangka homepage yang akan kita buat

3 kriteria tools atau alat bantu dalam pengembangan homepage:

1. Editor HTML

Digunakan untuk mendesain homepage diantaranya menggabungkan gambar, suara dan animasi dalam suatu halaman homepage. Contoh produknya Microsoft FrontPage XP

2. Editor Graphics

Digunakan untuk megedit gambar yang akan ditampilkan pada homepage. Kita dapat memodifikasi warna, memotong gambar, memperbesar atau memperkecil gambar, menggabungkan beberapa gambar, memberi efek pada gambar sehingga siap ditampilkan pada homepage. Contohnya CorelDRAW dan Adobe Photoshop.

3. Editor Multimedia Animasi dan Suara

Digunakan untuk membuat animasi gambar dan suara. Macromedia Flash adalah editor animasi yang paling populer. Kita dapat merubah animasi yang rumit sehingga dapat dikerjakan dengan baik

B. Membuat Layout Homepage yang Diinginkan

Layout atau frame adalah bentuk format navigasi dari homepage yang akan ditampilkan.

Untuk melihat dan memilih jenis layout tersedia dalam Microsoft FrontPage XP, dapat kita lakukan pada saat akan membuat halaman atau website baru. Langkah-langkah untuk melakukannya, yaitu :

1. Pilih tombol start. All Programs. Microsof FrontPage XP. 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

5. Pilih jenis frame yang kamu inginkan, kemudian klik tombol OK.

Ø Jenis-jenis frame pada MIcrosoft FrontPage XP

1. Banners and Contents

2. Contents

3. Footers

4. Footnotes

5. Header

6. Header, Footer and Contents

7. Horizontal Split

8. Nested Hierarchy

9. Top Down Hierarchy

10. Vertical Split

C. Menerapkan Hyperlink

Hyperlink digunakan sebagai alat navigasi halaman pada homepage. Lagkah-langkah mermbuat hyperlink menggunakan Microsoft FrontPage XP, yaitu :

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 tombol CTRL+K pada keyboard sehingga akan ditampilkan kotak dialog Insert Hyperlink

5. Setelah file disimpan dan dijalankan, ketika kita klik “Link ke halaman lain” maka akan membuka halaman tujuan link tersebut

v Langkah-langkah untuk membuat hyperlink dengan tag HTML, antara lain :

1. Aktifkan aplikasi Microsoft FrontPage XP.

2. Buat tulisan “Link ke halan lain” pada dokumen baru yang ditampilkan pertama kali.

3. Klik tab HTML di bagian bawah dokumen.

4. Selanjutnya, akan tampil sintaks HTML.

5. Letakkan kursor di depan kata “Link” dan di belakang tag pada sintaks HTML yang ditampilkan.

6. Letakkan kursor di belakang kata “lain” dan di depan tag Ketikkan tag .

7. Klik tab normal di bagian bawah dokumen untuk melihat hasil akhir.

Link istilah singkat untuk hyperlink, merupakan serangkaian teks atau gambar yang terhubung dengan file atau halaman lain dalam satu atau beberapa dokumen.

D. Menerapkan Cascading Style Sheet

Tag merupakan elemen dalam HTML yang merupakan perintah kepada web browser untuk menampilkan elemen teks, gambar, atau link. Tag dimulai dengan karakter <>. Dalam tanda < > tertulis perintah kepada web browser. Satu perintah terdiri atas dua tag, yaitu tag pembuka < > dan tag penutup . Contoh :

Hello World!

.

Ø Fungsi utama dari CSS adalah untuk melakukan pengaturan beberapa format, yaitu :

- Bentuk huruf,

- Ukuran huruf,

- Format huruf,

- Warna huruf,

- Warna background,

- Warna hyperlink,

- Format textbox.

Style Sheet merupakan file atau format yang menentukan layout dari sebuah dokumen. Style sheet biasanya disebut juga template.

CSS (Cascading Style Sheets) merupakan sebuah file yang berisi sekumpulan perintah untuk memformat bagaimana sebuah halaman web ditampilkan oleh web browser. Dengan kata lain, CSS merupakan rujukan format tampilkan halaman web. CSS dapat ditulis sendiri dalam satu file yang terpisah dari HTML atau ditulis langsung pada bagian head HTML. Karena sifatnya cascade (seperti air terjun), satu perintah CSS berlaku untuk semua bagian dalam dokumen HTML.

Ø Jenis-jenis CSS pada Microsoft FrontPage:

1. Normal Style Sheet

2. Arcs

3. Bars

4. Blocks

5. Blueprint

6. Capsules

7. Downtown

8. Expedition

9. Highway

10. Neon

11. Poetic

12. Street

13. Sweet

Head merupakan elemen HTML yang berisi informasi umum mengenai dokumen atau disebut juga meta-information. Meta berarti “informasi tentang”. Metadata adalah informasi tentang data, sedangkan meta-information berarti informasi tentang informasi. Web browser tidak menampilkan informasi yang terdapat dalam head kepada pengguna.

Tittle merupakan bagian dari head HTML yang berisi teks, digunakan untuk mendefinisikan judul sebuah halaman web yang akan ditampilkan pada tittle bar web browser.

E. Membuat Aplikasi dalam Sistem yang Terintegrasi

1. Membuat Aplikasi Terintegrasi dengan Microsoft FrontPage

Untuk membuat sebuah situs atau homepage, diperlukan sebuah scenario yang sederhana. Fungsi dari scenario tersebut, yaitu untuk memandu kita dalam menentukan apa saja yang dapet dilakukan oleh suatu halaman atau website. Setelah scenario terbentuk, kita juga perlu memikirkan tools atau alat bantu yang akan digunakan untuk mengembangkan homepage tersebut.

2. Menentukan Directory Lokasi Kerja

v Langkah-langkah yang dilakukan untuk mempermudah pencarian file hasil kerja pada saat diperlukan, sebagai berikut :

1. Buat directory pada drive C:\

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

3. Pada Windows Explorer akan terlihat struktur file

3. Membuat Halaman pada Homepage

a. Membuat halaman 1

b. Membuat halaman 2

c. Membuat halaman 3

d. Membuat halaman 4

4. Mengaplikasikan Casading Style Sheet

1. Copy file yang telah dibuat sebelumnya ke dalam directory C:\...\CSS
2. Masukan diantara tag <meta> dan
3. Simpan halaman tersebut
4. Melalui Windows Explorer, kamu dapat melihat tampilan akhir dengan cara kli dua kali file “…..htm”, pastikan semua link ke halaman lain seperti jadwal pelajaran, data siswa, dan link bermanfaat berfungsi dengan benar
5. Hasilnya dapat terlihat

F. Membuat Grafis Sesuai dengan Homepage yang Diinginkan

Menggunakan editor Adobe Photoshop 7.0 :

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
4. Setelah dilakukan pengaturan, aka nada ditampilan lembaran baru
5. Selanjutnya, pilih Rectangle Tool pada toolbox. Sebelumnya, pilih warna di bagian Set foreground
6. Berikan efek texturizer. Filter ~ Texture ~ Texturizer
7. Ganti warna lagi dengan cara mengklik tool Set foreground
8. Klik Horizontal Type Tool pada toolbox
9. Langkah terkhir yaitu menyimpan gambar dengan nama logosmu dengan format GIF dalam subfolder Image dalam folder C:\.... kemudian tekan tombol Save

G. Mendaftarkan Alamat Domain ke Provider Web Hosting

Langkah-langkah yang digunakan untuk mendaftarkan alamat domain ke provider hosting, yaitu :

1. Aktifkan Internet Explorer. Ketik http://www.register.com pada kotak URL pada web browser.

2. Cari kotak pencarian domain. Lalu ketik nama domain yang akan kita cari.

3. Jika berhasil maka hasilnya akan terbuka

4. Ketik nama domain pada kotak TRY A NEW SEARCH, kemudian tekan tombol search.

ü World Wide Web Consortium (W3C) mengembangkan teknologi (spesifikasi, petunjuk – guide line, software dan tool) yang dapat dioperasikan pada platform mana pun, membawa web mencapai potensi yang utuh sebagai suatu forum informasi, commerce, komunikasi dan perjanjian bersama (collective understanding). W3C dibentuk pada Oktober 1994, dengan anggota lebih dari 400 organisasi.. W3C saat ini merupakan badan resmi yang membuat standar web. W3C meletakkan gabungan spesifikasi dalam standar web. Berikut ini merupakan hasil dari W3C.

- Standar web yang paling mendasar adalah HTML, CSS dan XML.

- Standar HTML yang terakhir adalah XHTML 1.0

ü Wesite copier merupakan aplikasi yang digunakan untuk meng-copy sebuah website dari internet ke dalam harddisk.

ü Website file sharing merupakan website yang menyediakan fasilitas untuk menampung file dari seseorang untuk disebarluaskan dengan cara menyediakan link untuk men-donwload file tersebut kepada orang lain.

ü HTTP (Hyper Text Protocol) merupakan protocol yang digunakan pada World Wide Web (WWW).

H. Melakukan Upload

Upload merupakan proses meng-copy file computer lokal ke komputer remote. Biasanya menggunakan jalur (protokol) HTTP, FTP, dan protokol lainnya. Upload merupakan kebalikan dari download.

v Langkah-langkah melakukan upoad:

1. daftarkan homepage dengan cara tekan tombol Sign Up Now klik link Sign Up dibawah kotak Log In

2. lengkapi form untuk anggota baru

3. setelah selesai klik link build up your website now.

4. Pada geocities control panel pilih menu manage kemudian klik link file mnager.

5. Klik link open file manager.

6. Tekan tombol upload files.

7. Tekan link file manager

8. Tekan tombol create subdirectory

9. Tekan Save

I. Memperbaiki dan Merevisi Data yang Sudah Ada

· Aktifkan Yahoo! Geocities

· Aktifkan geocities control panel, klik link file manager

· Upload file

· Klik link view my site