CARA MEMBUAT WEB SECARA OFFLINE
Hallo sahabat netter semua,
Pada postingan perdana diElmuPangaweruh.Blogspot.Com ini, saya ingin berbagi dengan anda semua tentang ‘cara membuat website atau blog secara offline dengan menggunakan suatu aplikasi tertentu, yaitu Microsoft Office FrontPage. Walaupun sekarang banyak sekali website yang menyediakan templategratisan untuk membuat atau menulis di blog atau website, seperti Blogspot dan Wordpress yang paling sering digunakan oleh para blogger.
Mungkin muncul pertanyaan di hati para netter semua, “kalau begitu untuk apa kita harus membuat website statis atau website secara offline ini dengan menggunakan Microsoft Office FrontPage”.
Awalnya saya juga berpikir demikian. Akan tetapi, perlu kita ketahui bahwa blog atau web yang dibuat secara offline, selain bisa kita publikasikan menjadi website online, juga bisa kita jadikan sebagai sebuah ebook. Yang menarik di sini bahwa file-file HTM/HTML pada FrontPage yang terkumpul dalam sebuah folder bisa kita kompilasi dengan aplikasi ebook compiler sehingga menghasilkan sebuah file berformat .exe. Untuk melihat contohnya, silahkan anda bisa download di sini...
Okay, sekarang saya akan membahasnya step by step saja, dan postingan ini nanti akan saya buat secara serial dalam beberapa tulisan ke depan.
Mengenal Microsoft Office FrontPage
Microsoft Office FrontPage, selanjutnya saya sebut saja FrontPage, adalah sebuah program web Authoring berbasis WYSIWYG (What You See Is What You Get), artinya apa yang kita buat desainnya maka hasilnya di browser persis seperti desain kita. FrontPage merupakan salah satu program yang dikeluarkan oleh perusahaan Software Raksasa bernama Microsoft dan masuk ke dalam kelompok aplikasi Microsoft Office (sepengetahuan penulis hanya sampai pada Microsoft Office 2003). Jadi jangan heran kalau program ini biasa disebut Microsoft Office FrontPage.
Keunggulan FrontPage adalah mudah penggunaannya, memiliki tampilan yang mirip Microsoft Word. Bila kita sudah terbiasa menggunakan Microsoft Word, maka kita tidak akan 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 kita tidak perlu dipusingkan dengan urusan pembuatan kode-kode HTML dalam mendesain sebuah website sebab FrontPage secara otomatis akan membuatnya.
Mengaktifkan Microsoft FrontPage
Microsoft FrontPage yang akan digunakan dalam pembelajaran ini adalah Microsoft FrontPage 2003. Untuk mengaktifkan/membuka aplikasi FrontPage 2003 yang sudah terinstal di komputer kita adalah:
- Klik Start, kemudian pilih All Programs
- Arahkan pointer pada menu Microsoft Office, lalu klik Microsoft Office FrontPage 2003
Pada jendela kerja Frontpage terdapat 4 jenis tampilan jendela yang berbeda-beda, yang dapat kita gunakan sesuai dengan kebutuhan pada saat mendesain sebuah halaman website, yaitu:
- Design : Dengan menggunakan tampilan ini kita dapat mendesain halaman web semudah menggunakan Microsoft Word.
- Split : Menampilkan dua buah tampilan, yaitu tampilan WYSIWYG dan tampilan tag HTML.
- Code : Menampilkan tag atau kode-kode perintah HTML.
- Preview : Menampilkan halaman web yang kita buat seperti saat ditampilkan pada web browser.
Mengenal Dasar-Dasar HTML
FrontPage menggunakan bahasa standar web, yaitu HTML (Hypertext Markup Language). Meskipun program FrontPage menggunakan sistem WYSIWYG yang sangat memudahkan kita, tetapi pengenalan tentang dasar HTML dan komponen Form hendaklah kita pahami juga.
1. Struktur HTML
Perintah HTML yang biasa disebut Tag, digunakan untuk menentukan tampilan dari dokumen HTML. Struktur dasar dari HTML adalah:
- HTML
Setiap halaman web harus diawali dan ditutup dengan tag HTML. <html> … </html>. Tag HTML tidak case sensitif, jadi bisa kita gunakan huruf besar ataupun huruf kecil, keduanya akan menhasilkan output yang sama.
- HEAD
Bagian header menggunakan tag <head> … </head>. Di dalam bagian ini biasanya terdapat tag <title> … </title> yang menampilkan judul dari halaman web ke dalam title web browser. Title ini akan disimpan pada saat kita menggunakan fasilitas Bookmark dan akan digunakan sebagai keyword pada saat kita melakukan pencarian.
- BODY
Di antara tag <body> … </body> digunakan untuk menampilkan text, image, link, dan semua yang ditampilkan pada halaman web kita.
2. Elemen Dasar HTML
Elemen-elemen dasar HTML di antaranya adalah:
- Teks Elemen:
<p> … </p> : format paragraf
<br> : membuat baris baru
<hr> : membuat garis horizontal
<pre> …</pre> : menampilkan format teks sesuai dengan tampilan desain
<font> … </font> : memformat seluruh properties font
<h> … </h> : mengubah ukuran font
<b> … </b> : bold (font tebal)
<i> … </i> : italic (font miring)
<u> … </u> : underline (font bergaris bawah)
- Link, Image, dan List Elemen:
<a href=”alamat web”> … </a> : ini adalah sebuah link
<a href=mailto:alamat e-mail> … </a> : link ke alamat e-mail
<img scr=”gambar” align=? border=?> : menampilkan gambar
<ul><li> … </li></ul> : menampilkan list bullets
<ol><li> … </li></ol> : menampilkan list nomor
- Tabel:
<table> … </table> : tag tabel
<tr> … </tr> : tag baris
<th> … </th> : tag judul tabel
<td> … </td> : tag kolom
Mengenal Komponen Form
Fungsi dari komponen form adalah untuk mendapatkan data atau memperoleh feedback dari user mengenai website kita. Semua kontrol biasanya diletakkan di dalam tag <form> … </form> tapi bisa juga di luar tag. Untuk menambahkan kontrol, gunakan tag <input>.
Perhatikan contoh di bawah ini.
<form action=”” method=”post/get”>
<input type=”text” name=”nama” value=”Samsudin” size=”30” maxlength=”10”>
<input type=”password”>
<input type=”checkbox”>
<input type=”radio”>
<input type=”submit”>
<input type=”reset”>
<select>
<option>Apel
<option selected>Pisang
<option>Jeruk
</select>
<textarea name=”komentar” rows=”60”
Cols=”20”></textarea>
</form>
Okay, untuk postingan kali ini saya cukupkan sekian dulu. Silahkan ikuti kelanjutan dari seri tulisan ini pada postingan berikutnya.
sumber : http://elmupangaweruh.blogspot.com
No comments:
Post a Comment