welcome to arrin's blog

^^terima kasih udah datang ke blog saya, maaf kalau isinya tak seindah yang anda semua harapkan.
jangan lupa tinggalkan komentar di bog ini, dan jadilah anggotanya.. :)^^
Minggu, 01 April 2012

TIK~ Microsoft office frontpage dan cara membuat website di frontpage

Sejarah
FrontPage pada awalnya dibuat oleh sebuah perusahaan yang berada di Cambridge, Massachusetts, Amerika Serikat, Vermeer Technologies Incorporated. Hal ini bisa dilihat dari nama berkas dan direktori situs yang dibuat dengan menggunakan FrontPage selalu diawali dengan "_vti_". Pada tahun 1996, Microsoft mengakuisisi Vermeer, dengan tujuan menambahkan FrontPage ke dalam beberapa produknya, terutama Microsoft Internet Explorer, karena di saat yang sama (pada saat perang browser web), saingannya, Netscape Communicator juga telah menambahkan fitur editor situs Web.
Sebagai sebuah editor HTML WYSIWYG, FrontPage didesain untuk menyembunyikan kode HTML dari halaman web yang disunting oleh pengguna dari mata pengguna, sehingga para pemula dalam bidang pemrograman situs Web pun dapat memprogram situs Web dan juga halaman Web.
Rilis pertama kali FrontPage di bawah naungan nama Microsoft, terjadi pada tahun 1996, saat Microsoft merilis Windows NT 4.0 Server dan Internet Information Services 2.0. FrontPage 1.1 dibundel di dalam rilis Windows NT 4.0 Server tersebut dan dapat berjalan di dalam Windows NT 4.0 (edisi Server maupun edisi Workstation), atau bahkan Windows 95, dan dibuat dengan tujuan agar pada administrator situs web dapat membuat situs web dan konten intranet di dalam sebuah paket semudah mereka menggunakan Microsoft Word.
FrontPage membutuhkan sekumpulan plug-in yang bersifat server-side (dapat berjalan di sisi/pihak Web server), yang disebut sebagai IIS Extension. Kumpulan ekstensi tersebut diperbaiki secara signifikan saat Microsoft mengintegrasikan Microsoft FrontPage ke dalam paket Microsoft Office saat Microsoft Office 97 dirilis dan kemudian diubah namanya menjadi FrontPage Server Extension (FPSE). Kedua kumpulan ekstensi tersebut harus diinstalasikan di dalam server Web agar fitur publikasi konten yang ditawarkan oleh FrontPage dapat bekerja dengan baik. Microsoft juga menawarkan FrontPage Server Extension untuk sistem operasi UNIX, selain tentunya untuk Windows. Tetapi, versi yang lebih baru dari FrontPage juga mendukung protokol WebDAV untuk publikasi dan pembuatan situs secara remote (jarak jauh). Versi untuk Macintosh Mac OS dirilis pada tahun 1998, tapi memiliki fitur yang jauh lebih sedikit dibandingkan versi Windows-nya. Sejak saat itu Microsoft tidak mengembangkan lagi FrontPage untuk Macintosh.
Pada tahun 2006, Microsot mengumumkan bahwa FrontPage akan digantikan oleh dua produk, yakni Microsoft SharePoint Designer (yang ditujukan oleh kalangan profesional dan bisnis untuk membangun aplikasi berbasis teknologi Microsoft SharePoint), dan Microsoft Expression Web (yang ditujukan untuk para profesional dan programmer situs Web untuk membuat situs Web yang lengkap). Microsoft pun mengumumkan bahwa mereka akan menghentikan FrontPage mulai bulan Desember 2006. Kedua aplikasi tersebut sebenarnya masih berbasis FrontPage.

Keunggulan FrontPage adalah mudah penggunaannya, memiliki tampilan yang mirip Microsoft Word. Bila Anda terbiasa menggunakan Microsoft Word, tidak terlalu mengalami kesulitan dalam menggunakan program ini.
FrontPage sangat hemat untuk urusan pembuatan website statis, yaitu website yang bersifat satu arah, tidak memiliki sarana komunikasi antara pengunjung dengan pemilik situs. Itu dikarenakan kemudahan dalam pemakaiannya, serta Anda tidak perlu dipusingkan dengan urusan pembuatan kode-kode HTML dalam mendesain sebuah website sebab FrontPage secara otomatis akan membuatnya.

Versi

Tabel berikut berisi versi-versi Microsoft FrontPage.
Tahun Versi FrontPage Integrasi dengan
Tidak diketahui  Vermeer FrontPage 1.0 Tidak diintegrasikan
1995 Microsoft FrontPage 1.1 Microsoft Windows NT 4.0 Server
1997 Microsoft FrontPage 97 (FrontPage 2.0) Microsoft Office 97
1997 Microsoft FrontPage Express 2.0 (perangkat lunak gratis) Diintegrasikan dalam Microsoft Internet Explorer
1998 Microsoft FrontPage for Macintosh 1.0 Tidak diintegrasikan
1998 Microsoft FrontPage 98 (FrontPage 3.0) Tidak diintegrasikan
1999 Microsoft FrontPage 2000 (FrontPage 9.0) Microsoft Office 2000 Premium
2001 Microsoft FrontPage 2002 (FrontPage 10) Microsoft Office XP
2003 Microsoft Office FrontPage 2003 (FrontPage 11) Microsoft Office System 2003

Fitur

FrontPage memiliki fitur-fitur sebagai berikut:
  • Secara visual mampu menampilkan struktur berkas dan situs Web sehingga memudahkan navigasi terhadap situs Web.
  • Dukungan terhadap HTML, CSS, dan Java/JavaScript
  • Memiliki editor gambar yang terintegrasi (Microsoft Image Composer)
  • Menyediakan fungsi-fungsi untuk beberapa tool umum secara mudah, seperti halnya mouseover, form e-mail dan counter.
  • Lebih mudah digunakan (jika memang telah menggunakan produk Microsoft Office sebelumnya)
  • Mampu menampilkan data yang dibuat oleh produk Microsoft Office lainnya, seperti Microsoft Access, atau Microsoft Excel.
  • Dukungan terhadap tema berbasis CSS (seperti halnya ASP.NET master page)
  • Ketika kita mengubah URL ke sebuah halaman, semua pranala yang merujuk ke halaman tersebut akan diubah secara dinamis.
  • Konten dapat disunting dari mana saja dengan FrontPage (password dibutuhkan untuk perlindungan)/
  • Dukungan terhadap pengimporan data dari clipboard (contoh: melakukan operasi Copy/Paste data dari Microsoft Internet Explorer ke dalam FrontPage 2003 akan secara otomatis melakukan downloading sumber daya yang disalin tersebut dan FrontPage akan menyimpannya secara lokal.)

    CARA MEMBUAT WEBSITE DENGAN MICROSOFT FRONTPAGE 2003

    Masalah besar yang menjadi kendala bagi pemula untuk memulai bisnis di internet adalah ketidakmampuan untuk membuat website sendiri karena berkenaan dengan bahasa pemrograman atau kode-kode HTML yang cukup rumit. Tapi sebenarnya kerumitan itu terjadi akibat ketidaktahuan pemula karena belum pernah mempelajarinya atau pernah belajar tapi dengan sumber yang salah. Insya Allah dengan paparan berikut ini, pandangan tentang sulitnya membuat website akan hilang dan berubah menjadi kegiatan yang mengasyikkan.

    Okay kita mulai....
    Sebelum kita membuat halaman website, kita membutuhkan suatu program editor. Ada beberapa program editor yang bisa digunakan untuk pembuatan halaman website (web page), tapi untuk kali ini kita akan menggunakan program editor "Microsoft Office FrontPage 2003". Program ini biasanya sudah terpasang di komputer Anda yang berbasis Windows.

    Langkah pertama yang harus Anda lakukan sebelum membuat website adalah membuat terlebih dahulu sebuah folder yang khusus menyimpan hasil pembuatan website Anda. Buat folder dengan nama public_html. Mengapa dengan nama public_html? Karena file-file yang akan kita buat nantinya akan kita transfer ke folder di Server Host yang juga bernama folder public_html.

    Selanjutnya silakan Anda buka program Microsoft Frontapage pada komputer Anda :
    Klik Start menu lalu klik All Program.  Selanjutnya temukan icon program Microsoft Office FrontPage.

    Setelah icon FrontPage Anda klik, maka halaman kerja FrontPage akan tampil. Sekarang saatnya Anda mengenal area kerja FrontPage.

    Setelah Anda berhasil membuka program Frontpage, langkah selanjutnya adalah membuka halaman kerja baru, caranya : klik icon Create new page, atau melalui menu : File lalu pilih New

    Di dalam MS FrontPage 2003 terdapat 4 macam mode tampilan berbeda yang memiliki kegunaan dan fungsi masing-masing (icon ada di kiri bawah). Keempat  mode tampilan itu adalah :

    1. Mode Design. Mode ini digunakan untuk membuat halaman web langsung di halaman kerjanya. Format design mode ini mirip dengan MS word, jadi sangat memudahkan bagi Anda untuk membuat tampilan website tanpa harus mengetikkan kode-kode /script webnya secara manual.

    2. Mode Split. Mode ini akan menampilkan 2 bentuk tampilan di halaman kerja FrontPage, satu dalam bentuk/tampilan desain, dan satu lagi dalam bentuk/tampilan Kode ( html ).

    3. Mode Code. Mode ini digunakan untuk membuat halaman website dengan menggunakan format kode html, selain itu berfungsi untuk menuliskan mengcopykan kode-kode/script website.

    4. Mode Preview. Digunakan untuk melihat hasil edit atau hasil pembuatan website kita.

    I. Membuat Halaman Website
    Sekarang kita mulai latihan membuat halaman website dengan menggunakan mode Design.

    a. Menuliskan Teks
    Langkah pertama, silakan tulis teks judul pada halaman kerja Anda. Untuk membuat paragraf baru tinggal tekan
    tombol Enter saja. Selanjutnya tulis deskripsi website dan dibawahnya tulis kata cahayausaha.
    CAHAYA USAHAPanduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    cahayausaha
    Untuk melihat hasilnya, silakan klik mode Preview.

    b. Mengatur Format Teks
    Pastikan Anda sudah keluar dari mode Preview dengan mengklik mode Design. Sekarang kita coba memodifikasi tulisan teks di dalam halaman web yang sebelumnya sudah kita buat supaya tampilannya lebih menarik. Kita akan modifikasi teks pada tulisan judul. Ikuti langkah-langkah berikut ini :

    1. Blok tulisan judul menggunakan mouse.

    2. Lihat kotak menu Font Size yang bertuliskan angka 3(12pt) yang berada di sebelah kanan kotak bertuliskan Times New Roman.

    3. Ganti ukuran hurufnya (Font) menjadi 6(24pt).

    4. Tekan icon "B" yang ada di sebelah kanan menu Font Size untuk cetak tebal.

    5. Edit posisi tulisan agar berada di tengah-tengah area halaman website dengan mengklik icon Center.

    6. Lihat tampilannya...Mudah seperti MS Word kan?
    CAHAYA USAHA
    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    cahayausaha

    c. Merubah warna pada tulisan
    Sekarang kita beri warna lain pada teks judul. Blok/highlight tulisan tersebut, lalu arahkan panah mouse pada icon "A" kemudian klik untuk memilihan warna yang Anda inginkan.
    CAHAYA USAHA
    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    cahayausaha
    d. Membuat Garis pemisah
    Selanjutnya kita akan mencoba membuat garis, yang akan memisahkan antara judul dan isi text dibawahnya, caranya ;

    - Tempatkan pointer mouse Anda setelah huruf terakhir pada judul.
    - Klik menu Insert lalu Horizontal line.

    Klik mode preview untuk melihat hasilnya.
    CAHAYA USAHA

    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    cahayausaha
    e. Cara Membuat Hyperlink

    Selanjutnya kita akan membuat Hyperlink. Anda pasti pernah membuka website yang di dalam halamannya terdapat banyak bagian atau kalimat yang mengandung link. Kalau kita klik bagian yang mengandung link tersebut, maka kita akan dibawa ke halaman atau website baru yang ditunjuk oleh link tersebut, inilah yang disebut dengan hyperlink.

    Sekarang perhatikan di dalam website kita ada tulisan Cahayausaha. Kita akan membuat hyperlink di tulisan tersebut sehingga apabila kita mengarahkan mouse kita dan mengklik tulisan Cahayausaha maka kita akan dibawa ke halaman website www.Cahayausaha.com. Cara membuatnya adalah sebagai berikut:

    1. Blok tulisan Cahayausaha.
    2. Kemudian arahkan panah mouse ke bagian yang sudah diblok tadi.
    3. Klik tombol kanan mouse.
    4. Klik menu Hyperlink.
    5.Perhatikan kolom Address, lalu masukkan alamat lengkap website Cahayausaha pada kolom ini. Ketikkan http://www.Cahayausaha.com, lalu klik tombol OK.

    Sekarang Anda sudah bisa membuat sebuah hyperlink.
    CAHAYA USAHA

    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    BISNIS DAN INVESTASI
    f. Menyimpan File ( Save )

    Langkah selanjutnya silakan simpan/save hasil kerja Anda dengan mengklik menu File lalu klik menu Save As. Kemudian akan muncul kotak dialog Save As, lalu simpan hasil kerja Anda tadi ke dalam folder public_html yang sudah Anda buat sebelumnya dan beri nama file latihan.htm


    II Membangun Website

    Di atas adalah cara untuk membuat hyperlink teks dimana link teks di arahkan ke sebuah alamat website tertentu. Dalam latihan berikut ini kita akan membuat link dalam website kita sendiri tentunya dengan membuat halaman website lebih dari satu. Kita akan membuat sebuah halaman index (halaman index adalah halaman yang pertama tampil bila sebuah website dibuka). Kita akan mencoba membuat 4 link yang saling berhubungan antar halaman, yaitu :

    1. Halaman HOME
    2. Halaman PRODUK
    3. Halaman TANYA JAWAB
    4. Halaman KONTAK

    Yang harus Anda buat selanjutnya adalah membuat 4 buah halaman website dengan nama file home.htm, produk.htm, tanya_jawab.htm
    dan kontak.htm.

    Buatlah ke 4 file tersebut lalu simpan didalam folder public_html yang sebelumnya sudah Anda buat. Cara membuat ke 4 file tersebut adalah dengan meng-klik icon Create new normal page, atau melalui klik menu : File lalu klik New. Bila diberi pilihan silakan pilih blank page.

    Lalu masukkan tulisan/teks dihalaman kosong tersebut, misalnya Halaman HOME. Selanjutnya Anda save halaman tersebut dengan nama file index.htm .

    Lakukan langkah tersebut berulang-ulang, untuk membuat tiga file lainnya, yaitu : produk.htm, tanya_jawab.htm dan kontak.htm.

    Silakan cek dengan melihat ke dalam folder public_html dan pastikan Anda telah berhasil melakukan save ke-4 file tersebut,

    Cara menghubungkan halaman yang satu dengan yang lainnya adalah sebagai berikut:

    1. Pada file index.htm, buatlah daftar link menu yang akan Anda hubungkan. Karena kita akan menghubungkan 4 buah halaman web maka kita akan menyiapkan 4 buah teks menu yaitu: HOME, PRODUK, TANYA JAWAB dan KONTAK.
       HOME     PRODUK    TANYA JAWAB     KONTAK
    2. Blok pada tulisan PRODUK lalu klik tombol kanan mouse dan pilih menu Hyperlink (bila sub menu hiperlink tidak ada coba ulangi blok dengan menambah blok 1 karakter dari kata PRODUK).

    3. Pada kotak dialog Edit Hyperlink, perhatikan kolom Look in: klik pada kolom Look in ini untuk mencari nama file halaman web yang akan dituju. Dalam contoh ini teks menu PRODUK akan dihubungkan dengan halaman web yang sudah diberi nama file produk.htm . Kalau sudah ketemu file halaman web yang Anda tuju, selanjutnya klik 1x pada nama file tersebut lalu klik tombol OK...Selesai

    Kita coba lakukan sekali lagi untuk menghubungkan sebaliknya dari halaman PRODUK ke halaman HOME.
    1. Pastikan Anda membuka file produk.htm. Buat 4 teks menu seperti di atas yaitu: HOME, PRODUK, TANYA JAWAB dan KONTAK. Blok pada teks menu HOME lalu klik tombol kanan mouse dan pilih menu Hyperlink.
    2. Cari file halaman web dengan nama index.htm, lalu klik 1x pada nama file tersebut lalu klik tombol OK...Selesai
    Lakukan hal yang sama untuk menghubungkan sisa menu lainnya, yaitu menu TANYA JAWAB dan KONTAK.

    Untuk menguji apakah hyperlink yang sudah Anda buat tersebut sudah berjalan dengan baik, cobalah klik mode Preview dan klik pada masing-masing link tersebut. Atau, Anda bisa langsung mengeceknya melalui Browser Internet Explorer atau Mozilla Firefox Anda, caranya :

    Buka folder public_html lalu klik kanan file index.htm pilih Open With lalu pilih Internet Explorer atau cukup dengan dobel klik file yang akan dibuka, maka otomatis file akan tampil seakan-akan Anda sedang membuka website.

    Jika sudah terbuka di Internet Explorer, silakan Anda cek satu persatu link menu yang sebelumnya sudah Anda buat, klik setiap menu yang ada, jika berhasil terhubung ke halaman yang dimaksud, berarti proses pembuatan link nya sudah berhasil.


    Catatan: Sebelum Anda membuat link untuk menghubungkan halaman satu dengan yang lainnya, pastikan semua file yang akan dilink-kan berada dalam satu folder, hal ini untuk mengihindari kesalahan link ketika file web Anda di upload ke Server Hosting. Dan perhatikan pula alamat linknya, jangan ada perbedaan antara alamat link dan nama file yang akan dilink-kan baik penulisan nama maupun besar-kecil hurufnya.

    III. Memasang Background Pada Halaman Website

    Selanjutnya kita akan mempelajari bagaimana membuat background di halaman website. Biasanya orang memberi warna latar belakang website agar website-nya tampil lebih menarik. Ada dua jenis format background yang bisa kita tampilkan di website kita, yaitu Background Warna dan Background Gambar.
    a. Memasang Background Warna

    Langkah pertama, siapkan halaman website yang akan kita beri warna background. Silakan Anda buka kembali file index.htm yang sebelumnya sudah Anda buat. Jika sudah dibuka, kita akan mulai melakukan proses pemberian warna background, caranya :

    1. Klik kanan di halaman web Anda, selanjutnya pilih Page Properties

    2. Setelah muncul kotak dialog Page Properties, Anda klik Tab Formatting

    3. Klik colors Background, dan tentukan warna yang ingin Anda tambahkan, misalnya warna 'Kuning'.

    4. Klik OK...Jreengggg....Mantab kan???
     HOME

    b. Memasang Background Gambar

    Setelah tadi Anda belajar memasang background dalam format warna, sekarang Anda akan mempelajari cara pemasangan background dalam format gambar/image. Siapkan sebuah gambar yang akan dijadikan sebagai latar/background-nya.
    Pertama, buat folder baru dengan nama gambar atau image dan simpan folder baru tersebut di dalam folder public_html bersama-sama dengan 4 file Anda yang lain. Jika sudah disiapkan file gambarnya lalu simpan di dalam folder gambar/image tadi.

    Catatan : Untuk nama file gambar itu terserah Anda, namun pastikan format nya berbentuk JPG, GIF atau PNG.

    Sekarang kita kembali ke FrontPage. Silakan buka kembali file index.htm. Kita akan mulai melakukan proses pemberian background gambar pada halaman web, caranya :

    1. Klik kanan di halaman web Anda, selanjutnya pilih Page Properties

    2. Setelah muncul kotak dialog Page Properties, Anda klik Tab Formatting

    3. Setelah itu, silakan Anda centang/checklist kotak Background picture, selanjutnya klik tombol Browse.

    4. Setelah Anda mengklik tombol browse, maka akan muncul kotak dialog untuk membuka file image background-nya, silakan Anda temukan di folder gambar/image, tempat file gambar Anda disimpan.

    5. Jika sudah ditemukan, klik file gambarnya, lalu klik 'ok'.

    6. Setelah keluar nama file imagenya (background.jpg), silakan Anda klik tombol 'ok', dan lihatlah sekarang tampilan background-nya sudah berubah.
     HOME


    IV. Menyisipkan Gambar Dan Tabel Pada Halaman Website

    a. Menyisipkan Gambar

    Masih di file index.htm. Sebelumnya Anda juga harus menyiapkan gambar yang akan dimasukan ke dalam website Anda. Pastikan file gambarnya sudah Anda masukan ke folder gambar/image. Sama seperti ketika Anda mempersiapkan sebuah file gambar untuk latihan background tadi. Sekarang kita mulai menyisipkan gambar kedalam halaman website Anda, caranya :

    1. Klik menu Insert, lalu pilih menu Picture, kemudian pilih menu From File.

    2. Pilih gambar yang akan dimasukan ke dalam halaman website, lalu klik tombol Insert.
    3. Gambar Anda sudah terpasang. Anda juga bisa membedakan antara gambar yang Anda sisipkan dan gambar yang menjadi background. Gambar background ada di bagian bawah gambar yang Anda sisipkan.
     HOME



    b. Menyisipkan Tabel

    Sekarang kita akan belajar menyisipkan tabel pada halaman website. Fungsi tabel dalam mendesain website ini sangat penting, karena dengan tabel ini Anda bisa mengatur dan merancang halaman website dengan baik. Bagian dari tabel, yaitu cell, row (baris) dan column (kolom). Cell adalah bagian tabel yang terdiri dari 1 row dan 1 column. Sedangkan row adalah cell yang berjajar horisontal, dan column adalah cell yang berjajar vertikal. Langkah-langkahnya sebagai berikut:

    1. Kita buka file latihan.htm. Tempatkan kursor tepat di bawah garis pemisah judul, lalu klik menu Table, kemudian pilih menu Insert, lalu klik menu Table.

    2. Setelah muncul kotak dialog Insert Table. Kita akan mencoba memasukan link menu dan gambar kedalam table yang nanti akan kita buat. Kolom size rows kita isi dengan 3, dan di kolom columns juga kita isi dengan 3.

    3. Lalu di kotak dialog itu juga ada menu Alignment. Menu ini berfungsi untuk mengatur posisi tabel di halaman website Anda, apakah mau rata kiri, rata kanan, atau di tengah halaman website. Kita posisikan di tengah-tengah, kita isi kolom ini dengan pilihan Center.

    4. Di dalam kotak dialog tersebut, juga ada menu Specify Width. Menu ini berfungsi untuk mengatur lebar tabel. Nantinya Anda bisa mengatur lebar tabel sesuai kemauan dan kebutuhan Anda.

    5. Ada juga menu Border Size, menu ini berfungsi untuk mengatur ketebalan sisi-sisi tabel. Kalau kita isi dengan 0 maka sisi-sisi tabel tidak akan kelihatan. Tapi karena kita masih belajar dan ingin mengetahui bagaimana bentuk tabel di dalam halaman website ini, maka kita isi saja kolom ini dengan 1.

    6. Setelah selesai, lalu klik tombol "OK".

    7. Lihatlah sekarang tabel sudah terbentuk tepat berada di bawah gambar garis judul.
    CAHAYA USAHA










    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    BISNIS DAN INVESTASI
    c. Menyisipkan Gambar ke dalam Tabel

    Selanjutnya, kita coba masukan gambar ke dalam tabel di cell dalam kolom ke-1 baris ke-1 dan cell pada baris ke-2 kolom ke-2. Caranya sebagai berikut:

    1. Klik gambar Anda. Setelah itu, klik tombol kanan mouse, lalu pilih menu Copy. Kemudian, pindahkan kursor mouse ke tabel Baris ke-1 kolom ke-1, lalu klik kembali tombol kanan mouse dan pilih menu Paste. Setelah itu pindahkan kursor mouse ke tabel Baris ke-2 kolom ke-2, lalu klik kembali tombol kanan mouse dan pilih menu Paste.

    2. Gambar Anda sudah berada di cell tabel tersebut!
    CAHAYA USAHA

    Gambar 1
    Masalah besar yang menjadi kendala bagi pemula untuk memulai bisnis di internet adalah ketidakmampuan untuk membuat website sendiri. Tapi sebenarnya kerumitan itu terjadi akibat ketidaktahuan pemula karena belum pernah mempelajarinya atau pernah belajar tapi dengan sumber yang salah.
    Catatan: Sebelum Anda membuat link untuk menghubungkan halaman satu dengan yang lainnya, kumpulkan dulu semua file yang akan dilink-kan ke dalam satu folder, hal ini untuk mengihindari kesalahan link ketika file web Anda di upload ke Server Hosting. Dan perhatikan pula alamat linknya, jangan ada perbedaan antara alamat link dan nama file yang akan dilink-kan baik penulisan nama maupun besar-kecil hurufnya.

    Gambar 2







    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    BISNIS DAN INVESTASI

    3. Selanjutnya pada Baris ke-1 kolom ke 1, Anda isi dengan tulisan Gambar 1, dan pada Baris ke-2 kolom ke-2, Anda isi dengan Tulisan Gambar 2.
    Agar tampilannya terlihat lebih rapi, kita harus menyesuaikan antara lebar kolom dan lebar gambar, untuk menyesuaikannya, Anda bisa mengaturnya melalui Cell Properties, caranya :
    1. Klik kanan pada cell gambar 1, selanjutnya pilih Cell Properties.

    2. Setelah itu akan muncul kotak dialog Cell Properties,
    3. Pada menu Specify Width isi dengan ukuran sesuai lebar gambar Anda, bisa dalam pixel ataupun dalam percentage. Kemudian klik tombol OK.

    Lakukan hal yang sama pada gambar 2, ubah lebar Specify Width, sesuaikan dengan ukuran gambar yang Anda masukkan. Anda juga bisa mengatur posisi gambar dan teks dengan memilih horizontal alignment dan vertical alignment.

    Anda juga bisa menyisipkan tabel ke dalam tabel seperti yang terlihat di cell baris ke-3 kolom ke-3 gambar di atas atau menggabungkan 2 cell atau lebih menjadi satu (merge cell) seperti pada cell di atasnya yang berisi narasi.

    d. Mewarnai Latar Tabel

    Kita akan rubah warna latar tabel yang ada di Baris 1.

    Caranya sebagai berikut:

    1. Blok semua cell yang ada pada baris ke-1, lalu tekan tombol kanan mouse dan pilih menu Cell Properties. Ke-tiga kolom pada baris ke 1 dalam keadaan terblok, selanjutnya klik kanan pada kolom yang sedang terblok tersebut.

    2. Selanjutnya akan muncul dialog properties. Fokus pada menu Background, lalu pilih warna, klik menu dropdown Color.

    3. Pasang background tabel dengan warna yang Anda sukai dan akhiri dengan menekan tombol OK.

    4. Sekarang lihat hasilnya.
    CAHAYA USAHA

    Gambar 1
    Masalah besar yang menjadi kendala bagi pemula untuk memulai bisnis di internet adalah ketidakmampuan untuk membuat website sendiri. Tapi sebenarnya kerumitan itu terjadi akibat ketidaktahuan pemula karena belum pernah mempelajarinya atau pernah belajar tapi dengan sumber yang salah.
    Catatan: Sebelum Anda membuat link untuk menghubungkan halaman satu dengan yang lainnya, kumpulkan dulu semua file yang akan dilink-kan ke dalam satu folder, hal ini untuk mengihindari kesalahan link ketika file web Anda di upload ke Server Hosting. Dan perhatikan pula alamat linknya, jangan ada perbedaan antara alamat link dan nama file yang akan dilink-kan baik penulisan nama maupun besar-kecil hurufnya.

    Gambar 2







    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    BISNIS DAN INVESTASI



    e. Memasang gambar sebagai Background Tabel

    Sekarang kita coba ubah warna latar belakang tabel kita pada gambar 1 dengan memasukan gambar sebagai pengganti warna latar, caranya sbb:

    1. Arahkan kursor pada cell gambar 1 lalu klik tombol kanan mouse dan pilih menu Cell Properties . Selanjutnya akan tampil jendela tampilan Cell Properties.

    2. Perhatikan pada kolom Background. Aktifkan fasilitas Use background picture dengan cara meng-klik kotak kecil yang ada disampingnya.
    3. Klik tombol Browse untuk mencari gambar yang ingin Anda jadikan background.

    4. Klik pada file gambar yang akan dijadikan background lalu klik tombol Open.

    5. Terakhir klik tombol OK.
    CAHAYA USAHA

    Gambar 1
    Masalah besar yang menjadi kendala bagi pemula untuk memulai bisnis di internet adalah ketidakmampuan untuk membuat website sendiri. Tapi sebenarnya kerumitan itu terjadi akibat ketidaktahuan pemula karena belum pernah mempelajarinya atau pernah belajar tapi dengan sumber yang salah.
    Catatan: Sebelum Anda membuat link untuk menghubungkan halaman satu dengan yang lainnya, kumpulkan dulu semua file yang akan dilink-kan ke dalam satu folder, hal ini untuk mengihindari kesalahan link ketika file web Anda di upload ke Server Hosting. Dan perhatikan pula alamat linknya, jangan ada perbedaan antara alamat link dan nama file yang akan dilink-kan baik penulisan nama maupun besar-kecil hurufnya.

    Gambar 2







    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    BISNIS DAN INVESTASI

    Coba lihat hasilnya. Apabila gambar dijadikan sebagai background pada sebuah tabel maka gambar tersebut akan ditampilkan berulang-ulang hingga memenuhi area tabel tersebut. Dengan perhitungan yang tepat maka Anda bisa memanfaatkan fasilitas ini untuk mendesain sebuah tampilan website yang bagus. Apabila Anda bisa memanfaatkan penggunaan tabel dengan tepat, maka Anda bisa menjadi seorang webmaster handal. Jadi... teruslah berlatih, jangan takut salah karena Anda justru akan belajar banyak dari kesalahan.
    Bila judul website dimasukan ke dalam table baru, lalu Borders size dihilangkan dan Anda isi cell yang kosong dengan iklan dari program afiliasi maka tampilannya akan seperti di bawah ini....Seperti buatan webmaster profesional kan...???
    CAHAYA USAHA

    Gambar 1
    Masalah besar yang menjadi kendala bagi pemula untuk memulai bisnis di internet adalah ketidakmampuan untuk membuat website sendiri. Tapi sebenarnya kerumitan itu terjadi akibat ketidaktahuan pemula karena belum pernah mempelajarinya atau pernah belajar tapi dengan sumber yang salah.
    Catatan: Sebelum Anda membuat link untuk menghubungkan halaman satu dengan yang lainnya, kumpulkan dulu semua file yang akan dilink-kan ke dalam satu folder, hal ini untuk mengihindari kesalahan link ketika file web Anda di upload ke Server Hosting. Dan perhatikan pula alamat linknya, jangan ada perbedaan antara alamat link dan nama file yang akan dilink-kan baik penulisan nama maupun besar-kecil hurufnya.

    Gambar 2

    Membuat
    Website
    Itu
    Gampang

    Panduan pemula membuat website sendiri dan sukses berbisnis di internet dengan cara mudah dan murah.
    BISNIS DAN INVESTASI
    V. Cara Mengedit File PHP
    Bila Anda menggunakan file dengan format PHP maka cara mengeditnya adalah sbb:
    1. Aktifkan program Microsoft Frontpage.
    2. Buka file PHP dengan Frontpage, caranya: klik File lalu open file xxx.php Anda
    3. Save file xxx.php Anda ke format htm, caranya: klik File lalu pilih save as kemudian ubah file extensi xxx.php menjadi xxx.htm
    4.Tampilan halaman Frontpage dan nama file aktif Anda (di bagian atas) berubah dari format PHP ke format html.
    5. Bila sudah selesai mengedit, Anda save as kembali file xxx.htm ke format php.
    6. Ulangi langkah di atas bila Anda ingin mengedit kembali file PHP.


    VI. Pengenalan Kode HTML

    Tadi kita telah mempelajari pembuatan website melalui mode design. Pembahasan berikut adalah bagian yang amat penting untuk Anda ketahui, yaitu penjelasan mengenai kode HTML (HyperText Markup Language). HTML adalah suatu standar bahasa program yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. HTML biasanya berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang di perintahkan/diinginkan. Coba Anda ganti mode yang semula menggunakan mode Design ke mode Split. Perhatikan tampilannya. Sekarang Anda menjadi tahu bahwa desain website yang sebelumnya Anda buat (bagian bawah halaman Frontpage), ternyata memiliki kode-kode tersendiri sebagai pembentuknya (bagian atas halaman Frontpage). Kode-kode itu terbentuk secara otomatis ketika Anda mendesain halaman web tadi. Di waktu mendatang pasti Anda juga akan mengalami pembuatan tampilan website yang justru dilakukan dari kode HTML.


    Penggunaan Kode Tag HTML

    1. Membuat Hyperlink:

    <a href="alamat link">Tulisan Link</a>

    Kode script yang diatas adalah kode script html yang digunakan untuk membuat sebuah hyperlink.

    Sebagai contoh, silakan Anda buka halaman baru pada frontpage Anda, selanjutnya ubah modenya menjadi mode 'code', ikuti langkah
    berikut :

    - Tuliskan kode hyperlink nya setelah tag '<body>'
    - Coba buat link yang mengarah ke www.Cahayausaha.com
    - Penulisan kode hyperlinknya adalah sebagai berikut :
    <a href="www.Cahayausaha.com">Cahayausaha</a>

    Untuk melihat hasilnya silakan Anda ubah ke mode Split.


    2. Membuat Garis Baru:

    <br>

    Kode script diatas adalah kode script html yang digunakan untuk membuat sebuah garis baru sebesar 1 spasi. Tag ini bisa Anda gunakan untuk memisahkan baris atau paragraph pada website Anda.


    3. Menampilkan Gambar / Image:

    <img src="file gambar">

    Jika file gambar Anda simpan dalam folder terpisah, misalkan folder image maka penulisan script untuk menampilkan gambarnya harus Anda sisipkan 'path' atau nama folder dimana lokasi file gambarnya berada. Contoh scriptnya :

    <img src="NamaFolder/NamaFile">

    Bila file gambar berada di folder image, penulisan scriptnya menjadi :

    |<img src="image/gambar.jpg">|


    Untuk latihan lebih lanjut Anda bisa mencobanya dengan menggunakan mode Split. Anda ketikkan kalimat website di halaman Frontpage di bagian bawah lalu Anda lihat kode HTML yang tersusun secara otomatis di halaman Frontpage bagian atas. Selamat berlatih...
    CATATAN :
    1.. Setiap kalimat diawali dan diakhiri dengan format. Pelajari setiap format dan lihat hasil yang muncul di website. Semakin sering Anda pelajari maka akan semakin cepat Anda menguasai ilmu mendesain website.
    2. Dengan menggunakan program Filezilla, upload file-file website Anda ke folder public_html yang ada di Server Host
          3. Program filezilla dapat Anda download gratis di cnet.com .
          4. Cara mentransfer file dari komputer Anda ke Server Host dapat Anda pelajari dalam materi Web Hosting.

    Salam Sukses!!

3 komentar:

konde mengatakan...

minta tutorial lebih banyaknya donk....!!! orang baru... pengen belajar desain web...!!! ohhh iya apa web ini di desain make ms frontpage juga...!!!

MUX mengatakan...

copas dari mana -_-

Unknown mengatakan...

thanks gan artikelnya, nice :)
http://goo.gl/21T1Mx

Posting Komentar

 
;