Microsoft FrontPage - 1
1. Perkenalan FrontPage
Paket aplikasi FP terdiri dari FP Explorer, di mana dapat dibuat, dirancang dan manajemen situs Web dan FP Editor, penyunting halaman Web, tanpa pengguna harus terlampau berumit-rumit dengan kode HTML. Tetapi nantinya pun dapat dilihat bahwa FP Editor yang bersifat WYSISYG serta visual ini masih memiliki kekurangan-kekurangan yang pada akhirnya akan “memaksa” seorang perancang Web untuk kembali mengutak-atik kode HTML dengan editor teks yang sederhana macam Notepad, EditPad, atau WinEdit.
Di dalam FPEditor ada tiga tab menu: - NORMAL: untuk melihat secara normal visual dan melakukan editing visual. Mode normal lazimnya hanya menampilkan visual namun berhenti (tidak teranimasi).
- HTML: untuk mengetikkan kode HTML langsung.
- PREVIEW: untuk melihat tampilan hasil di browser, tetapi tidak dapat dilakukan modifikasi. Untuk memodifikasi halaman, pindahlah ke mode NORMAL.
Di dalam FPEditor ada tiga tab menu: - NORMAL: untuk melihat secara normal visual dan melakukan editing visual. Mode normal lazimnya hanya menampilkan visual namun berhenti (tidak teranimasi).
- HTML: untuk mengetikkan kode HTML langsung.
- PREVIEW: untuk melihat tampilan hasil di browser, tetapi tidak dapat dilakukan modifikasi. Untuk memodifikasi halaman, pindahlah ke mode NORMAL.
Satu dokumen web yang sama (sebuah file HTML) dapat dilihat dan diedit menggunakan tiga mode ini secara berganti-ganti.
Bekerja dengan Front Page Editor sangat mudah, persis ketika bekerja dengan pengolah kata biasa, semacam MS-Word. Cobalah praktekkan! Setelah membuat dokumen Web, intiplah kode HTML yang dibangkitkan oleh FP Editor dengan berpindah ke menu tab HTML.
Sebuah halaman web memiliki sesuatu (property). Menu Property dapat diaktifkan dari “File:Page Properties” atau klik kanan pada halaman web dan pilih “Page Properties”. Dua yang paling penting adalah:
1) General a) Title: judul halaman Web, yang biasanya ditampilkan di caption browser.
b) Background Sound: untuk diisi suara latar bila halaman Web tersebut diakses.
Suara latar dapat dimainkan terus menerus, atau beberapa kali saja ketika web tsb diakses.
2) Background
a) Background color (warna latar) Secara default, lazimnya warna latar halaman adalah putih. Warna latar ini dapat diganti.
Bekerja dengan Front Page Editor sangat mudah, persis ketika bekerja dengan pengolah kata biasa, semacam MS-Word. Cobalah praktekkan! Setelah membuat dokumen Web, intiplah kode HTML yang dibangkitkan oleh FP Editor dengan berpindah ke menu tab HTML.
2. Page Properti
1) General a) Title: judul halaman Web, yang biasanya ditampilkan di caption browser.
b) Background Sound: untuk diisi suara latar bila halaman Web tersebut diakses.
Suara latar dapat dimainkan terus menerus, atau beberapa kali saja ketika web tsb diakses.
2) Background
a) Background color (warna latar) Secara default, lazimnya warna latar halaman adalah putih. Warna latar ini dapat diganti.
Demikian pula dengan warna link, link aktif, dan link yang telah telah diklik (visited link).
b) Background image Jika diperlukan, latar belakang bisa diberi gambar. Gambar ini akan ditumpuk merata pada semua layar. Dengan gambar latar, dapat dilakukan trick-trick tertentu, misalnya membuat semacam kotak-kotak grid atau papan catur, atau warna gradasi.
Opsi “Watermark” gunanya untuk setting agar gambar tetap mengambang ketika halaman web digulung (scroll).
Untuk menyisipkan gambar ke dalam halaman web, pakailah menu “Insert:Image” atau Insert:ClipArt”. Bila yang digunakan menu “Insert ClipArt” maka yang dapat disisipkan tidak saja gambar, tetapi juga bisa berupa suara, atau video.
Gambar yang disisipkan bisa berformat nyaris apa saja, seperti TIFF, RAS, PCX, BMP (bitmap) tetapi yang umum format GIF dan JPG/JPEG. Mengapa dua format gambar GIF dan JPG ini menjadi kelaziman di Internet?
a) Format GIF dan JPEG menyediakan kompresi yang sangat memadai, sehingga ukuran file gambar bisa kecil. Ukuran file yang kecil cocok untuk kebutuhan ber-Internet-ria.
b) GIF menyediakan format tambahan, yaitu berupa animasi (GIF Animation, *disediakan ulasan lebih lanjut). Sedang JPG menawarkan JPG progressive, yaitu gambar yang dimuat perlahan dimulai dari gambar yang paling kecil (dengan resolusi paling rendah, yang menampilkan sketsa samar-samar)
sampai format gambar paling bagus, bila pengguna sabar menunggu atau membiarkan halaman dimuat sampai benar-benar komplit.
Setelah file gambar disisipkan ke dalam halaman Web, dapat dimodifikasi lebih lanjut tampilannya dengan klik kanan pada gambar tsb, kemudian memilih “Image Properties”.
c) Text: menunjukkan teks apa yang bakal tampil di sisi kursor ketika kursor berada di atas gambar tsb. Di dalam kode HTML, teks ini diletakkan setelah “alt=”.
d) Default Hyperlink: gambar tsb dapat merupakan wakil dari link. Bila gambar tsb diklik maka pengguna akan diantarkan ke link yang telah didefinisikan di “Location”.
Macam-macam link:
3. Link lokal Untuk link lokal, bila berada dalam satu folder yang sama, akan langsung menunjuk ke file bersangkutan. Contoh: “diriku.htm”. Kalau berada di folder di bawahnya, akan berbunyi seperti ini “folderbawah/lebihbawah/fileku.htm”. Untuk pemakaian web sesungguhnya pastikan kode HMTL memuat folder tanpa didahului teks “file://” atau memakai huruf drive seperti “d:\”, karena bila demikian, link tsb tidak valid kalau sudah diletakkan ke sebuah server web.
4. Link ke anchor/bookmark (“penanda buku”) Link ke anchor/bookmark adalah link yang menunjuk ke suatu bagian tertentu yang telah diberi nama, dalam satu halaman web yang sama. Untuk mendefinisikan nama bookmark atau anchor, ketikkan kode HTML <a name=”nama_anchor”> di tempat teks yang diinginkan, lalu seperti biasa tutup dengan </a>.
5. Link e-mail Menunjukkan suatu alamat e-mail tertentu, yang bila diklik, browser akan memanggil aplikasi klien pengirim e-mail. Cirinya: diawali protokol “mailto:”.
b) Background image Jika diperlukan, latar belakang bisa diberi gambar. Gambar ini akan ditumpuk merata pada semua layar. Dengan gambar latar, dapat dilakukan trick-trick tertentu, misalnya membuat semacam kotak-kotak grid atau papan catur, atau warna gradasi.
Opsi “Watermark” gunanya untuk setting agar gambar tetap mengambang ketika halaman web digulung (scroll).
3. Menyisipkan Gambar
Gambar yang disisipkan bisa berformat nyaris apa saja, seperti TIFF, RAS, PCX, BMP (bitmap) tetapi yang umum format GIF dan JPG/JPEG. Mengapa dua format gambar GIF dan JPG ini menjadi kelaziman di Internet?
a) Format GIF dan JPEG menyediakan kompresi yang sangat memadai, sehingga ukuran file gambar bisa kecil. Ukuran file yang kecil cocok untuk kebutuhan ber-Internet-ria.
b) GIF menyediakan format tambahan, yaitu berupa animasi (GIF Animation, *disediakan ulasan lebih lanjut). Sedang JPG menawarkan JPG progressive, yaitu gambar yang dimuat perlahan dimulai dari gambar yang paling kecil (dengan resolusi paling rendah, yang menampilkan sketsa samar-samar)
sampai format gambar paling bagus, bila pengguna sabar menunggu atau membiarkan halaman dimuat sampai benar-benar komplit.
Setelah file gambar disisipkan ke dalam halaman Web, dapat dimodifikasi lebih lanjut tampilannya dengan klik kanan pada gambar tsb, kemudian memilih “Image Properties”.
c) Text: menunjukkan teks apa yang bakal tampil di sisi kursor ketika kursor berada di atas gambar tsb. Di dalam kode HTML, teks ini diletakkan setelah “alt=”.
d) Default Hyperlink: gambar tsb dapat merupakan wakil dari link. Bila gambar tsb diklik maka pengguna akan diantarkan ke link yang telah didefinisikan di “Location”.
4. Menyisipkan Link
Cara termudah untuk mendefinisikan link pada sebuah teks adalah mengetik kata kata terlebih dulu, mem blok dengan kursor, lalu “Insert:Hyperlink” atau Ctrl-K.
Macam-macam link:
- Link dengan representasi gambar atau teks.
- Sebetulnya link dengan representasi gambar atau teks sama saja, hanya beda penampilan.
- Link ke situs web lain
- Selalu diawali dengan definisi protokol “http://”, atau suatu lokasi URL tertentu, misal “www.google.com/mai/~john/personal.htm”.
3. Link lokal Untuk link lokal, bila berada dalam satu folder yang sama, akan langsung menunjuk ke file bersangkutan. Contoh: “diriku.htm”. Kalau berada di folder di bawahnya, akan berbunyi seperti ini “folderbawah/lebihbawah/fileku.htm”. Untuk pemakaian web sesungguhnya pastikan kode HMTL memuat folder tanpa didahului teks “file://” atau memakai huruf drive seperti “d:\”, karena bila demikian, link tsb tidak valid kalau sudah diletakkan ke sebuah server web.
4. Link ke anchor/bookmark (“penanda buku”) Link ke anchor/bookmark adalah link yang menunjuk ke suatu bagian tertentu yang telah diberi nama, dalam satu halaman web yang sama. Untuk mendefinisikan nama bookmark atau anchor, ketikkan kode HTML <a name=”nama_anchor”> di tempat teks yang diinginkan, lalu seperti biasa tutup dengan </a>.
5. Link e-mail Menunjukkan suatu alamat e-mail tertentu, yang bila diklik, browser akan memanggil aplikasi klien pengirim e-mail. Cirinya: diawali protokol “mailto:”.