Modul Membina Laman Web_frontpage

  • Uploaded by: Roszelan Majid
  • 0
  • 0
  • June 2020
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Modul Membina Laman Web_frontpage as PDF for free.

More details

  • Words: 3,626
  • Pages: 40
MODUL MEMBINA LAMAN WEB MENGGUNAKAN MICROSOFT FRONTPAGE

1. Membuka kawasan kerja (work area)

KAWASAN KERJA

¾ Klik Start, pilih Moicrosoft Office dan pilih Microsoft Frontpage

2. Membina tapak web menggunakan satu frame

¾

Klik Table, pilih insert table dan klik.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

-1-

¾

Mulakan setting table untuk menentukan reka bentuk tapak web anda.

Untuk Logo

¾ ¾ ¾ ¾ ¾

Untuk Banner

Untuk Logo Ke2

Ada 3 ruang terpapar. Ruang table pertama : isikan logo atau animasi Ruang table kedua : isikan banner atau animasi Ruang table ketiga : isikan logo kedua atau animasi Lihat contoh paparan di bawah ini

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

Letak kursor dan tekan enter untuk jarakkan ruang untuk isikan makmaklumat atau grafik

-2-

¾ Untuk hilangkan garisan dalam kawasan ruang kerja. Pada bahagian tool bar bawah terdapat 3 arahan iaitu Normal, HTML dan Preview . Normal untuk kerja membina web, HTML untuk editing tag dan Preview untuk melihat tapak web dalam keadaan siap atau separuh siap.

¾ Klik HTML dan tuliskan angka kosong pada “1”.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

-3-

¾ Lihat perubahan seperti di bawah setelah angka kosong ditulis dalam tag tersebut.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

-4-

3. Masukkan grafik, animasi dan gambar . Perkara di bawah perlu diberi perhatian: ¾ Semua gambar dan logo perlu diedit dahulu dalam Adobe Photoshope ¾ Jika imej dalam bentuk animasi sediakan dahulu animasi aplikasi seperti Flash, Swish, Animator Gif, Director dan lain-lainnya. Setelah disediakan barulah diletakkan dalam folder web anda. ¾ Letakkan kursor pada table yang dipilih dan klik insert, pilih picture dan pilih from file ………disini pilih nama fail yang anda kehendaki berdasarkan table yang sesuai mengikut storyboard anda.

Pastikan nama fail dan format sesuai contoh : Gambar statik .Jpeg , Animasi .Gif , Audio .Mid /Mp3/ Wav, Video.AVI

¾ Lihat paparan sebelah, folder untuk imej, grafik, animasi dan audio keluar dan anda boleh memilih objek yang sesuai.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

-5-

¾ Klik nama fail yang sesuai dan klik insert, maka imej tersebut akan masuk ke dalam ruang / table yang anda tentukan.

Arahan di atas sesuai untuk insert semua bentuk grafik, animasi,gambar dan sebagainya ke dalam laman web anda.

4. Membina Form (Borang) . Microsoft Front Page menyediakan ruang dan tatacara membina borang dengan menggunakan semua elemen dengan klik Form.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

-6-

Anda hanya perlu klik elemen-elemen di bawah untuk menyediakan form/ borang yang anda kehendaki.

Textbox – Menyediakan kotak TextArea – Ruang untuk menulis Borang File Upload – Arahan untuk upload ( Tetapi perlu di set up) dan lain-lain keperluan untuk membina borang . Tetapi anda perlu settting ruang, width dan sebagainya.

5. Membina Format .

– Arahan format digunakan untuk : - Meletakkan nombor / bullet - Border / Shadow - Page Transition ( Tidak digalakkan ) - Warna latar untuk laman web

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

-7-

5.2 Warna latar laman web.

5.2.1 – Pilihan warna latar : - Background Picture ( Letakkan imej sebagai warna latar) Klik dan browse imej pilihan anda yang telah disediakan awal - Warna latar sedia ada adalah juga disediakan dengan hanya klik Background dan pilih warna pilihan anda - Anda juga boleh memilih warna yang sesuai ketika perbubahanperubahan seperti Hyperlink, Visited Hyperlink dan juga Active Hyperlink 5.2.2 – Dengan ini anda telah menggunakan semua elemen-elemen asas dalam microsft Front Page untuk membina laman web. 5.2.3 - Anda juga telah menyediakan satu tapak/laman INDEX untuk laman web anda. LamanTapak tambahan adalah dengan memperbanyakkan (Copy) laman ini untuk diubahsuai menjadi laman seterusnya supaya kelihatan ada keseragaman. Ini untuk mengelakkan aneka ragam tapak/laman yang berbeza kerana setting laman yang berbeza.

Perhatian: Untuk mereka yang mahir boleh menggunakan arahan secara short cut dengan menggunakan tool bar atas dan juga tool bar di bahagian bawah.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

-8-

6. Membina Hyperlink ( Sambungan antara satu tapak dengan tapak yang lain) Perhatian: 6.1- Ia merupakan kerja akhir sekali dalam menyediakan laman web 6.2- Membuat hyperlink pada peringkat awal akan menyulitkan setting sekiranyas ada beberapa perkara yang perlu untuk pengubahsuaian (imej/table/teks/ animasi dan sebagainya) 6.3- Pastikan semua keperluan tapak web telah lengkap (Teks, imej,animasi, warna,)

6.1 Klik hyperlink – (Sebelum klik hyperlink pastikan anda berada di fail Index (Fail Menu Utama) untuk laman web anda

6.2 Setelah itu pilik dan klik nama fail yang akan dihyperlink dengan fail Index dan ulangi proses memilih nama – nama fail ini sehingga semua fail telah dihyperlinkkan. Contohnya sekiranya anda mempunyai 5 fail maka proses hylerpink anda ialah sebanyak 25 kali.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

-9-

Maklumat Tambahan Untuk MembinA Laman Web 1. Muzik & Video dalam Laman Web

Muzik Ada 2 cara hendak memasuki muzik/ bunyi : 1) Link Method 2) Embed Method Link Method Contoh: Lagu Ikan Kekek Jenis-jenis fail muzik/ bunyi - ?.mid, ?.wav, ?.aud, ?.ra Jika browser anda ada plugin, komputer anda akan download fail. Jika tidak, ia akan tanya anda samada hendak download plugin.

• • • • •

Browser akan buka tetingkap kecil untuk memainkan muzik. Pelayar boleh mengawal mula dan henti muzik. Right Click tetikus boleh tarik fail muzik untuk disimpan dalam harddisk anda. Kekurangan - Pelayar harus klik link dan menanti untuk mendengar muzik Kebaikan - Baik kika ada beberapa muzik yang pelayar boleh memilih dari senarai.

Embed Method

Dengan cara "embed", sound interface akan diletakkkan terus pada muka web. Ia boleh dikawal dengan beberapa attribute seperti mula muzik sebaik sahaja fail web dimasuk dan sebagainya. Sintaks: <EMBED src="failmuzik" width="?" height="?" autostart="true/false" loop="true/false" hidden="true/false"> Contoh: <EMBED src="muzik_klasik.mid" width="144" height="60" autostart="true" loop="true" hidden="false">

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

- 10 -

width="144 " Tells the browser how wide you wish the sound display to be. Input a number in pixels. The most common width is 144. height="60" Tells the browser how tall you want the sound display to be. Input a number in pixels. The most common height is 60. autostart="true" Instructs the browser to begin playing the file automatically once it has been loaded on the page. You can set this value to true or false. The default is false. loop="true" Instructs the browser to play the file over and over again for as long as someone is on that page, or until the user hits the stop button on the display. You can set this value to true or false. The default is false. hidden="true" This command tells the browser to hide the sound display so people viewing you page don't see the sound display with the control buttons. The sound plays as though it were just in the background somewhere. You can set this to true or false. The default is false.

Video ?.avi - Video for Windows format, tidak perlu plug-in. ?.mov - Quicktime Movie. Plug-in boleh didapati dari http://www.apple.com/quicktime/download/index.html ?.ram - Real Audi Player player plug-in dari http://www.real.com/products/player/download.html <EMBED src="video_avisample.avi" width="200" height="200" autostart="false" loop="false">

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

- 11 -

2. Menulis dengan format file HTML Pendahuluan Html singkatan dari hypertext markup language, merupakan program penulisan informasi sebuah homepage. Tulisan ini merupakan pendahuluan cara menulis dengan bahasa HTML. Banyak orang masih menuliskan bahasa HTML mempergunakan alat bantu seperti NotePad yang terdapat dalam Windows atau Simple Text Macintosh. Panduan ini akan menolong anda menulis HTML dengan lancar. Bahkan apabila anda cenderung tidak melakukan pengeditan HTML secara langsung dan hendak mempergunakan Editor HTML seperti Netscape Composer atau Amaya dari W3C atau Frontpage Express dari Microsoft, panduan ini akan semakin menolong anda dalam menulis HTML dengan program-program tersebut dan memungkinkan dokumen HTML buatan anda dapat diakses oleh berbagai jenis program browser. Setelah anda mempelajari dasar-dasar penulisan HTML, anda akan membutuhkan pelajaran bagaimana menambahkan sentuhan style mempergunakan CSS, dan penulisan HTML lanjut. Saran : adalah cara yang baik dengan mempelajari bagaimana orang lain telah menuliskan kode-kode nya pada setiap halaman html. Untuk melakukan ini, klik menu "View" dan klik "Source". Cobalah lakukan langkah ini pada saat anda sedang membuka halaman html dokumen orang lain yang anda download atau copy dari internet. Dengan langkah ini maka anda akan melihat sendiri di layar monitor komputer anda berbagai kode yang dituliskan pada halaman html tersebut. Dalam uraian berikut dijelaskan tentang : Menulis judul pada halaman homepage Setiap dokumen HTML sebuah homepage perlu diberi judul. Berikut adalah tampilan pada saat anda melakukan perintah penulisan judul atau title : My first HTML document

Ubahlah teks "My first HTML document" dengan judul artikel anda. Penulisan judul biasanya dimulai dengan tanda tag dan diakhiri dengan tanda tag . Judul tulisan sebaiknya dituliskan pada awal dokumen anda. Menambahkan sub-sub judul dan paragraphnya Apabila anda telah biasa mempergunakan Microsoft Word, anda sudah biasa pula dengan model-model kodifikasi sub judul (heading) dengan tingkatan kepentingannya. Dalam bahasa HTML ada enam tingkat sub judul (heading). H1 adalah sub judul yang paling penting, H2 adalah sub judul yang agak kurang penting, begitu seterusnya sampai H6, yang paling sedikit kepentingannya..

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

- 12 -

Berikut adalah bagaimana caranya menambahkan sub judul (heading) :

An important heading

dan berikut adalah penulisan sub judul selanjutnya :

A slightly less important heading

Setiap paragraph yang anda tulis sebaiknya dimulai dengan sebuah kode tag

. Kode tag

hanya dipergunakan bila perlu. Kecuali pada penulisan sub judul biasanya diakhiri dengan kode tag

. Contoh :

This is the first paragraph.

This is the second paragraph.

Menambahkan emphasis Anda dapat menambahkan emphasis yang terdiri dari sebuah kata atau beberapa kata dengan menuliskan kode tag <em> pada awal emphasisnya dan diakhiri dengan kode tag . Contoh This is a really <em>interesting topic! Menambahkan gambar (images) Gambar (atau images) dapat ditambahkan kedalam halaman Web anda agar semakin informatif dan menolong penyampaian pesan anda. Cara sederhana untuk menambahkan sebuah gambar adalah dengan menggunakan kode tag . Misalkan anda hendak menambahkan sebuah file gambar "peter.jpeg" dalam folder atau direktori yang sama dimana file dokumen HTML anda simpan. Gambar ini memiliki lebar 200 pixel dan tingginya 150 pixel.Maka menulisnya sebagai berikut : Lebar dan tinggi tidaklah terlalu penting akan tetapi ukuran gambar yang kecil akan menolong cepatnya tampilan halaman web anda diakses oleh orang lain di internet. Namun masih ada kekurangannya ! Orang lain yang tidak dapat melihat gambar anda, akan memerlukan deskripsi gambarnya. Anda dapat menambahkan deskripsinya dengan cara sebagai berikut : My friend Peter Atribut alt dipergunakan untuk menuliskan perintah deskripsi singkat yaitu "My friend Peter". Untuk gambar-gambar yang kompleks, anda akan membutuhkan deskripsi yang lebih banyak. Misalkan perintah ini akan dituliskan dalam file "peter.html", anda dapat menambahkan atribut deskripsi yang panjang seperti dalam contoh berikut :
Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

- 13 -

alt="My friend Peter" longdesc="peter.html"> Anda dapat membuat gambar dengan beberapa cara, dapat dengan mempergunakan kamera digital, scanner, atau membuat gambar dengan program pembuatan gambar seperti Photoshop, Microsoft Photoeditor, LViewpro dll. Kebanyakan program browser dapat membaca format gambar GIF dan JPEG, program browser yang terbaru juga dapat membaca format PNG. Untuk mencegah lambatnya gambar anda diakses di internet sebaiknya anda menerapkan ukuran file gambar yang tidak terlalu besar. Secara umum, format JPEG adalah format terbaik untuk fotografi dan memperhalus berbagai jenis gambar, sedangkan format GIF dan PNG baik untuk grafis seperti bidang datar berwarna, garis dan teks. Ketiga bentuk format itu memiliki kemampuan "progressive rendering" yaitu kemampuan mengirimkan gambar kasarnya terlebih dahulu dan kemudian dilanjutkan dengan menambahkan detailnya sampai gambar tersebut tampil seluruhnya dengan baik. Menambahkan link (tanda berhubungan) dengan halaman lain Yang membuat Web demikian efektif adalah adanya kemampuan untuk membuat hubungan (link) dari satu halaman dengan halaman lainnya dan halaman lain yang berhubungan ini dapat dikerjakan cukup dengan satu kali klik saja. Hubungan atau Link biasa ditulis dengan kode tag . Misalkan sebuah hubungan atau link hendak dibuat pada file "peter.html": This a link to Peter's page. Teks antara kode tag dengan kode tag adalah keterangan tentang hubungan atau link yang akan dibuat. Umumnya keterangan ini diberi garis bawah. Warna teks dan garis bawah dibuat berwarna biru. Untuk membuat link ke tempat Web yang lain anda perlu menambahkan alamat internet Web selengkapnya (biasanya disebu URL), contoh untuk link ke http://www.w3.org/ anda perlu menuliskan : This is a link to W3C. Anda dapat juga membuat gambar logo memiliki link ke halaman lain. Contoh penulisan berikut memungkinkan gambar logo anda dapat berhubungan dengan home page. home page Tiga macam daftar Bahasa HTML memiliki kemampuan membuat tiga jenis daftar (list). Pertama daftar dengan kode bulat (bulleted list), biasa disebut unordered list. Penulisannya mempergunakan kode tag
    dan kode tag
  • , contoh :
    • the first list item


      • Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

      - 14 -

    • the second list item
    • the third list item
    Perhatian, anda selalu harus menuliskan kode tag
pada bagian akhir daftar anda, tetapi kode tag bersifat tambahan atau bisa juga tidak dipergunakan. Jenis daftar kedua disebut daftar bernomor atau disebut juga ordered list. Ini dituliskan dengan kode tag
    dan kode tag
  1. . Contoh :
    1. the first list item
    2. the second list item
    3. the third list item
    Seperti daftar pertama, anda selalu perlu mengakhiri daftar dengan kode tag
, tetapi kode tag pada bagian akhir adalah tambahan dan dapat dihilangkan. Daftar ke tiga dan terakhir adalah daftar berdefinisi (definition list). Dengan daftar ini memungkinkan anda membuat daftar terminologi dan definisinya. Daftar ini ditulis dengan kode tag
pada awal tulisan dan diakhiri dengan kode tag
. Masing-masing terminologi dimulai dengan kode tag
dan setiap definisi dimulai dengan kode tag
. Contoh :
the first term
its definition
the second term
its definition
the third term
its definition
Kode tag dan
adalah tambahan dan bisa tidak dipergunakan. Catatan, tiap daftar dapat disubkan antara satu daftar dengan daftar lainnya.Contoh :
  1. the first list item
  2. the second list item
    • first nested item
    • second nested item


      • Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

      - 15 -

  3. the third list item
Anda bahkan dapat membuat paragraph dan headingnya dan lain-lainl.pada daftar yang lebih panjang.

3. BORANG



TEXT FIELD: Teks mantap

Name: Name: Name ialah apakah isi medan teks akan digelarkan di dalam penghantaran borang . Value ialah teks mantap yang akan muncul di dalam medan teks (Jika ada). Size ialah berapa besar kotak yang akan muncul di halaman (selebar berapa banyak huruf). Maxlength ialah bilangan huruf yang maksima yang boleh dimasukkan di dalam medan teks.

TEXT AREA: Tuliskan komen/pandangan anda:

Name ialah nama isi-isi yang akan dipanggil dalamasa penghantaran borang . Baris dan Lajur (Rows and columns) menerangkan saiz `text area'.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

- 16 -

BUTANG RADIO, (RADIO BUTTONS) namanya, mengizinkan pilihan dari apa yang dipaparkan. Sistem Operasi: Windows 3.1 Windows for Workgroups 3.11 Windows 95 Sistem Operasi
Windows 3.1
Windows for Workgroups 3.11
Windows 95
Dalam kes ini sekali lagi, name ialah hasil yang akan dipanggil masuk di dalam penghantaran borang, kecuali dalam hal sebegini, anda perlu mengetahui bahawa kesemua butang-butang dalam kumpulan yang serupa mesti mempunyai nama yang serupa. Value ialah apa yang dikandungi oleh penghantaran borang tatkala butang ini dipilih. DIPILIH (CHECKED) menunjukkan butang mantap (jika ada). Dalam kes butang radio sebegini, hanya satu pilihan yang dibenarkan.

KOTAK PILIHAN (CHRCK BOX) membenarkan pengguna satu atau banyak pilihan. Saya menggunakan browser-browser ini: Netscape 3.0 Explorer Mosaic Cello Saya menggunakan browser-browser ini:
Nestcape 3.0
Explorer
Mosaic
Cello
Name ialah apakah output untuk setiap kotak pilihan itu digelarkan semasa ianya dikembalikan Kesemua kotak pilihan di dalam satu-satu kumpulan tidak boleh mempunyai nama yang sama,kerana hasil tiap-tiap satu kotak terpilih adalah dikembalikan. CHECKED menentukan pilihan mantap di dalam kotak.

Jab.Aplikasi Komputer Dlm Pendidikan@ Zorkarnain Ujang - IAB) Mac 2006

- 17 -

PILIHAN LIS TARIK-BAWAH (COMBO LIST BOX) digunakan untuk membuat satu pilihan tertentu Umur saya:

25-50

My age: <SELECT NAME="age">