Pada postingan
perdana di ElmuPangaweruh.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 template gratisan 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.
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:
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.
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:
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.
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.
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.
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>.
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.
0 komentar:
Posting Komentar