PROYEK WEB / HTML MENGGUNAKAN MICROSOFT FRONTPAGE

PROYEK WEB / HTML MENGGUNAKAN MICROSOFT FRONTPAGE

I. Membuat Dokumen FrontpageMicrosoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain, dan mengedit halaman World Wide Web seperti menambahkan text, images, table, form, dan elemen lain di halaman Web. MS FrontPage menampilkan itu semua seperti apa yang ditampilkan di Web browser. Secara otomatis file akan menjadi sebuah kode HTML (Hyper Text MarkUpLanguage).Frontpage dirancang sebagai tool yang mudah untuk menghasilkan halaman atau situs web, tanpa perlu pemrograman. Contoh hasilnya seperti Gambar 2.4.Ada beberapa tahap yang diperlukan untuk mendisain situs web, yaitu:1. Membuat daftar kebutuhan dan menetapkan tujuan2. Mengorganisasi informasi3. Menentukan struktur aplikasi4. Menentukan struktur navigasi

Tampilan pada Frontpage seperti pada gambar di bawah ini :Microsoft Frontpage memiliki banyak icon yang dapat melakukan banyak operasi yang sama dengan satu klik mouse, jika memindahkan kursor ke atas suatu icon dan menunggu sebentar sebuah kontak penjelasan akan muncul dan memberi tahu apa yang akan terjadi jika suatu icon di klik.Mulai dengan membuat program microsoft frontpage, klik tombol start di bagian bawah sebelah kiri layar kemudian pilih all program dan klik dua kali microsoft frontpage figure P2.2 menampilkan layar yang di tampilkan di frountpage pertama lihat kotak bujur sangkar di tampilan page di kolom sebelah kiri. Sekarang anda sedang melihat sebuah tampilan weblalu lihat kebagian bawah layar di tampilkan tampilan normal jika memiliki HTML akan menampilkan kode komputer di belakang halaman web dan preview akan menampilkan halaman yang akan tampil di browser internet , misalnya internet explore dan netscape

Penting untuuk di perhatikan jenis font untuk kata-kata yang akan kita ketik di halaman web atau times new roman. Ukuran karakter yang di ketik adalah 12 dan yang penting diperhatikan nama yang otomatis di buat untuk halaman web adaalah new_page_1.htm gantilah judul dengan memilih perintah file dan di save as. Figure P2.4 menampilkan seperti apa layak akan di tampilkan biasa nya contoh menyimpan file untuk halaman web padaa dekstop komputer dan menggunakan nama asli file indeks.htm. memungkinkan untuk menyimpan proyek kita di disket, CD, atau USB jump drive (flash drive) pastikan anda menyimpan file terlebih dahulu sebelum pekerjaan kita hilang .Ketik University Pizza pada halaman tersebut, tekan tombol Enter,tandailah kata-kata University Pizza seperti yang di tunjukan oleh Figur P2.5Ketik Universitas Pizza lalu enter buat kalimat berbeda dibagian halaman web tandailah kata-kataUniversitas Pizza seperti figure P2.5 kemudian atur poin 18 pada font untuk ukuran karakter lalu plih format dengan sub perintah paragrph dan pilihlah pilihan center.

Selanjutnya buatlah daftar lokasi ketik kata Locations jika Locations muncul di tengah-tengah halaman dengan huruf-huruf besar maka itu berarti anda tidak dapat memindahkan kursor ke bawah membuat garis baru setelah anda mengetik University Pizza tadi.Ini mudah di perbaiki tandailah Locations dan kemudian pilihlah perintah Format diikuti dengan subperintah paragraph dan Alignment dari pilihan menu drop-down, buatlah agar paragraph terjajar ke kiri (Left). Klik ikon daftar bertanda seperti yang ditampilkan dalam figur P2.7.

Kemudian masukan tiga frase Commuter Parking Lot,Recreation Center, dan 101 North Main Street, dan tekan kunci Enter setelah anda mengetik tiap frase anda akan melihat sebuah bulatan muncul setelah anda memasukan101 North Main street. Hanya tekan kunci Enter lagi dan bulatan ini akan hilang dan dapat mengetikan kembali informasi untuk halaman Web tersebut.

II. Melihat Halaman Web yang Telah DikerjakanSebelum Anda mulai : Tergantung pada browser yang digunakan untuk mengunjungi halaman Web atau menambahkan bookmark, saat Anda mengklik halaman Web dalam riwayat browser atau daftar bookmark, halaman Web mungkin dibuka dalam browser yang digunakan untuk mengunjungihalaman situs Web tersebut dan buka browser yang disetel sebagai browser default. Tarif tambahan dapat dikenakan jika menggunakan browser yang berbeda. Untuk informasi selengkapnya tentang tarif yang terkait dengan masing-masing browser yang ada pada perangkat Anda, hubungi penyedia nirkabel Anda.1. Pada layar Asal, klik ikon Brower2. Tekan tombol Menu3. Klik Riwayat.Dibagian bawah layar FrontPage terdapat tiga pilihan : Normal,HTML. dan Preview.Klik Preview anda akan melihat bagaiman halaman Web kan ditampilkan pada browser, apakah contoh yang telah dibuat bekerja dengan baik halaman tersebut tidak harus terlihat persis perhatikan bahwa teks tersebut berbentuk huruf miring pada halaman Web anda sebagaimana halnya tekstersebut pada

III. Kelebihan dan Kekurangan Microsoft FrontpageNotepad adalah sebuah aplikasi sebuah text editor simple yang sudah ada sejak windows 1.0 di tahun 1985 yang ada di setiap system windows baik xp, vista, seven dan sebagainya. Tentu kode ini sangat penting dan justru mungkin paling sering digunakan oleh para user, baik kepentingan pribadi ataupun lainnya. Misalnya notepad digunakan untuk sekedar belajar, mengetik HTML, membuat blog bahkan ada juga untuk kejailan, contohnya membuat virus. Tentunya disarankan bagi setiap orang agar tidak di salah gunakan karena dapat merugikan orang lain.

Dalam frontpage salah satu fitur yang terkenal adalah Template Web yang otomatis. Template yang dibuat oleh Frontpage mencakup system navigasi otomatis dan mampu menciptakan tombol-tombol yang dapat di animasikan untuk beberapa halaman yang telah di tambahkan oleh pengguna Frontpage dan juga dapat merancang suatu halaman yang ingin ditampilkan di web

Berikut kelebihan Microsoft frontpage :mampu menampilkan struktur data dan situs web sehingga memudahkan navigasi terhadap situs web.Memiliki editor gambar yang terintegrasi, terdapat fungsi-fungsi untuk tool umum secara mudah.Mampu menampilkan data yang di buat oleh Microsoft office yang lainnya.Dan berikut kekurangan dari Microsoft Frontpage :jika tidak terbiasa dengan kode HTML, yaitu membuat tabel. Editor di Blogspot tidak menyediakan toolbar atau tombol untuk membuat tabel.Frontpage tidak bias digunakan untuk script editing.Selain kelebihan dan kekurangan berikut, Microsoft Frontpage juga mempunyai kelebihan lainnya yaitu untuk membuat halaman Web adalah kemudahan penggunanya dan komputer dan peranti lunak semakin murah sementara biaya gaji dan upah semakin tinggi oleh karena itu kebanyakan organisasi mengandalkan peranti lunak seperti FrontPage untuk menghemat biaya karyawan. Dan juga mempunyai kekurangan lainnya yaitu kode HTML (kode yang diproses oleh browser Internet) yang dihasilkan tidak efisien.

IV. Bagian-Bagian dari dokumen HTMLSeperti dokumen pada umumnya yang dapat terdiri dari teks, gambar, animasi atau bahkan video, yang membedakan dokumen HTML dengan dokumen lainnya adalah elemen dantag-tagnya.Elemen danTaginilah yang merubah tulisan atau teks biasa menjadi sebuah tampilan yang menarik.1. ElementElement adalah suatu kode yang menyediakan tempat untuk meletakkan beberapa perintah didalamnya. Dokumen HTML mempunyai 3 element utama yaitu elemen < Head > dan < Body >. yang menyatakan bahwa dokumen tersebut adalah dokumen HTML dan diakhiri oleh .Beberapa editor HTML seperti Netscape perintah ini bisa diabaikan, tetapi disarankan untuk tetap ditulis sesuai ketetapan WWW consursium Elemen < Head > memberikan informasi dari dokumen atau hubungannya dengan dokumen lain yang didalamnya terdiri dari beberapa tag antara lain: yang berguna untuk menampilkan judul WEB pada status bar browser. menyatakan bahwa server mempunyai fasilitas pencarian kata dalam dokumen yang menyatakan URL asal dari suatu dokumen.

Sedangkan elemen < Body > berisi semua yang akan ditampilkan oleh browser seperi teks, gambar dan grafik. Body adalah bagia utama yang berisi teks dan gambar yang akan ditampilkan pada halaman web. Bagian body ini dapat diisi dengan JS, VB dan css untuk membuat tampilan web lebih interaktif.Atribut elemen body :Background= lokasi dan nama file (latar belakang image dan dokumen)Bgcalor= warna (warna latar belakang dokumen, default putih)Text= warna (warna teks dokumen, default hitam)Link= warna (warna link dokumen, default biru)Vlink= warna (warna visited link dokumen, default ungu)Alink= warna (warna active link dokumen, default merah).

2. TagTag adalah bentuk kode yang hanya menangani satu kode perintah saja. Kode perintah tersebut akan diterjemahkan oleh browser sesuai dengan fungsinya. SuatuTagselalu diapit oleh tanda kurang dari () dan biasanya merupakan pasangan yang terdiri dariTagawal danTagakhir.Tagakhir sendiri mempunyai pernyataan yang sama denganTagawal hanya saja diawali dengan tanda slash atau garis miring . Bentuk umum penulisanTagadalah: teks yang akan ditampilkan Misalkan kita akan menampilkan teks dengan garis bawah:< U > teks berikut bergaris bawah < /U >Tag-tag dalam HTML tidak dipengaruhi oleh huruf besar ataupun huruf kecil. Namun perlu selalu diingat bahwa penulisanTagyang salah meskipun hanya satu karakter akan berpengaruh terhadap Dokumen HTML tersebut, bahkan dapat berakibat dokumen HTML tersebut tidak bisa ditampilkan pada browser.3. Tag Berattribut

Tidak Semua Tag mengikuti aturan standart seperti diatas, secara umum HTML mengenal 3 bentuk Tag sebagai berikut :Open tag atau Tag tunggal :< nama_Tag > yaitu Tag yang tanpa diikuti Tag akhir sebagai penutup perintahContainer tag atau Tag ganda: < Tag _awal > ....< /Tag_akhir >Container Tag atau Tag ganda dengan atribut : ....4. AtributTag awal bisa mempunyai beberapa atribut dan masing-masing atribut mempunyai beberapa nilai. Penulisan nilai suatu atribut harus diapit dengan tanda petik kecuali nilai tersebut merupakan gabungan atau hanya terdiri dari angka atau satu kata saja. Misalkan < p align="right" > dapat ditulis dengan < p align=right.Di dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita pelajari, adapun contoh atributh dan kegunaannya sebagai berikut,

, untuk menandai sebuah subdefinisi dari daftar ataupun table definisi , Untuk menandai bagian text ataupun kata dari penting dari sebuah kalimat, paragraph ataupun dokumen , untuk menampilkan nama variable , Menandai kutipan , Menampilakan sebuah kode pemrograman , Penekanan sebuah kalimat , untuk membuat contoh ataupun sample didalam sebuah dokumen , menandai suatu text dimana text tersebut harus dimasukan oleh user melalui keyboard , Bold membuat tampilan tebal huruf, kata ataupun kalimat , Italic membuat tampilan miring , Underline membuat tampilan garis bawah , Membuat tampilan jenis huruf menyerupai huruf mesin ketik , membuat garis tengah pada sebuah kalimat , memperbesar ukuran huruf , memperkecil ukuran huruf , menampilkan superscript , tag yang berada di dalam attribute UL ataupul OL digunakan untuk memisah baris daftar yang akan di beri penomoron ataupun tanda bullet , membuat sebuah table , Membuat row atau baris didalam table , membuat judul kolom di table membuat isi pada kolom table, ketiga tag ini diisikan pada atribut table Rowspan, Colspan merupakan pengaturan merge cell pada atribut table untuk membuat form Hypertext Hyper Lin insert image5. Struktur Dokumen HTMLStruktur dokumen HTML terdiri dari 3 tag utama yaitu , < Head > dan < Body >.File HTML yang sudah di buat harus disimpan (Save) terlebih dahulu sebelum file tersebut dapat dibuka pada browser. File name pada kotak file harus diberi penambahan ekstensi .html di belakang nama file tersebut. Untuk membuka file yang tersimpan tersebut maka kita harus membuka program browser misal: Mozilla Firefox lalu klikfile, laluopen file.Pilih file yang akan dibuka lalu klikopen.