PROYEK WEB/HTML MENGGUNAKAN MICROSOFT FRONTPAGE

PROYEK WEB / HTML MENGGUNAKAN MICROSOFT FRONTPAGE

I. Membuat Dokumen Frontpage

            Microsoft 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 tujuan
2. Mengorganisasi informasi
3. Menentukan struktur aplikasi
4. 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.

Berikut P2.2 (Memulai Microsoft Frontpage)

Layar pembuka yang di tampilkan di Frontpage (Figur P2.3)

            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.5

Ketik Universitas Pizza lalu enter buat kalimat berbeda dibagian halaman web tandailah kata-kata  “Universitas 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.

Figur P2.7 membuat sebuah daftar yang tidak berurutan

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 memasukan  “101 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 Dikerjakan

Sebelum 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 mengunjungi  halaman 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 Brower

2. Tekan tombol Menu

3. 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 teks  tersebut pada (Figur P2.1)

Klik link “Contack Us” sebuah jendela yang berinteraksi dengan program e-mail akan terbuka. Pada bagian “To” nda dapat melihat alamat e-mail anda pada bagian subjek.
Anda akan melihat “University Gunadarma” jika tulisan-tulisan ini tidak muncul maka kemungkinan komputer anda tidak diizinkan untuk mengirimkan e-mail atau anda belum membuat link dengan benar.

III. Kelebihan dan Kekurangan Microsoft Frontpage

Notepad 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 HTML

Seperti dokumen pada umumnya yang dapat terdiri dari teks, gambar, animasi atau bahkan video, yang membedakan dokumen HTML dengan dokumen lainnya adalah elemen dan tag-tagnya.Elemen dan Tag inilah yang merubah tulisan atau teks biasa menjadi sebuah tampilan yang menarik.

1. Element

Element adalah suatu kode yang menyediakan tempat untuk meletakkan beberapa perintah didalamnya. Dokumen HTML mempunyai 3 element utama yaitu elemen <HTML> < Head > dan < Body >. <HTML> yang menyatakan bahwa dokumen tersebut adalah dokumen HTML dan diakhiri oleh </HTML>.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:

• <Title> yang berguna untuk menampilkan judul WEB pada status bar browser.
• <ISINDEX> menyatakan bahwa server mempunyai fasilitas pencarian kata dalam dokumen
• <Base> 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. Tag

Tag adalah bentuk kode yang hanya menangani satu kode perintah saja. Kode perintah tersebut akan diterjemahkan oleh browser sesuai dengan fungsinya. Suatu Tag selalu diapit oleh tanda kurang dari (<) dan lebih besar dari (>) dan biasanya merupakan pasangan yang terdiri dari Tag awal dan Tag akhir.Tag akhir sendiri mempunyai pernyataan yang sama dengan Tag awal hanya saja diawali dengan tanda slash atau garis miring </Tag >. Bentuk umum penulisan Tag adalah:

<Tag awal> teks yang akan ditampilkan </Tag akhir >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 penulisan Tag yang 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 perintah
• Container tag atau Tag ganda: < Tag _awal > ....< /Tag_akhir >
• Container Tag atau Tag ganda dengan atribut : <Tag_awal atribu="nilai" > ....</Tag_Akhir >

4. Atribut

Tag 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,

•    <DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table definisi

•    <STRONG>, Untuk menandai bagian text ataupun kata dari penting dari sebuah kalimat, paragraph ataupun dokumen

•    <VAR>, untuk menampilkan nama variable

•    <CITE>, Menandai kutipan

•    <CODE>, Menampilakan sebuah kode pemrograman

•    <EM>, Penekanan sebuah kalimat

•    <SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen

•    <KBD>, menandai suatu text dimana text tersebut harus dimasukan oleh user melalui keyboard

•    <B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat

•    <I>, Italic membuat tampilan miring

•    <U>, Underline membuat tampilan garis bawah

•    <TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik

•    <STRIKE>, membuat garis tengah pada sebuah kalimat

•    <BIG>, memperbesar ukuran huruf

•    <SMALL>, memperkecil ukuran huruf

•    <SUP>, menampilkan superscript

•    <SUB>, menampilkan subscript

•    <FONT>, merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan paragraph di mana dalam atribut ini terdapat value yang mengatur tampilan huruf tersebut seperti color. Size, style dan lainnya

•    <P>, Paragrah untuk membuat sebuah paragraph

•    <BR>, Line break berfungsi untuk mengganti baris

•    <H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan sebuah header dimana dari keenam jenis tersebut mempunyai perbedaan ketebalan dan ukuran huruf

•    <PRE> Preformatted Text berfungsi menampilkan text apa adanya

•    <CENTER> membuat sebuah text berada di posisi tengah

•    <LEFT> membuat sebuah text berada di posisi kiri

•    <RIGHT> membuat sebuah text berada di posisi kanan

•    <Basefont size=”pixel”>mengubah ukuran sebuah huruf

•    <HR> Horizontal rule berfungsi untuk membuat garis bawah

•    <OL>, membuat penomoran pada daftar

•    <UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)

•    <LI>, tag yang berada di dalam attribute UL ataupul OL digunakan untuk memisah baris daftar yang akan di beri penomoron ataupun tanda bullet

•    <TABLE>, membuat sebuah table

•    <TR>, Membuat row atau baris didalam table <TH>, membuat judul kolom di table <TD> membuat isi pada kolom table, ketiga tag ini diisikan pada atribut table

•    Rowspan, Colspan merupakan pengaturan merge cell pada atribut table

•    <FORM> untuk membuat form

•    <A HREF=”url link”>Hypertext</A> Hyper Link

•    <IMG SRC=”url img”> insert image

5. Struktur Dokumen HTML

Struktur dokumen HTML terdiri dari 3 tag utama yaitu <HTML>, < 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 klik file, lalu open file.Pilih file yang akan dibuka lalu klik open.

V. Membuat Dokumen Notepad

Berikut cara atau llangkah membuat dokumen notepad :

1.       Buka notepad di PC,

Start – All programs – Acessories – Notepad

2.       Setelah dibuka, kini tinggal Anda yang menulis tag-tag html misalkan..saya membuat yang sederhana..

3.       Save as..

4.       Di form penyimpanan,Untuk membuat ekstensi *html, ubah .. type dari “Text file” ke “ALL FILES”

5.       Kalau sudah anda bisa tulis nama_file.html

6.       Save..

7.       Bagaimana melihat hasil file kita ?

8.       Buka tempat file itu itu disimpan

9.       Selanjutya, di file.html itu, klik kanan- - open with - - lalu bisa pilih Internet explorer, mozilla atau opera ..

VI. Melihat Halaman Web

Salah satu cara optimalisasi halaman web, yaitu membuat artikel di forum-forum sharing informasi online (misalnya : http:www.infogue.com, http://www.digg.com, dll) , kemudian di forum tersebut anda membuat link ke halaman blog yang akan dioptimasi, setiap klik yang mengarah ke halaman anda akan mendapat point dari google, semakin banyak yang mengklik di link yang anda pasang di forum tersebut semakin besar point anda, semakin besar peluang link halaman blog anda muncul di halaman pertama pencarian google. Jika sudah muncul di halaman pertama google anda bisa mendapatkan pengunjung lebih banyak ke blog anda. Jika halaman utama website/blog anda telah terindex oleg google, belum tentu halaman postingan yang lain juga telah terindex oleh googl. Untuk mengetahui halaman website anda telah terindeks oleh google bisa langsung ke : http://www.google.co.id. Pada kotak teks pencarian masukkan url halaman blog anda :

a.       Cek halaman utama web/blog anda

Contoh : http://artikelkomputerku.blogspot.com

b.       Dalam contoh ini saya menguji halaman blog saya dengan url: http://artikelkomputerku.blogspot.com/2009/03/memperkecil-ukuran-file-wav-untuk-sound.html

Masukkan url di atas ke kontak teks pencarian google, kemudian klik tombol “Telusuri dengan google”

Jika halaman blog anda telah terindeks maka link ke blog anda akan muncul dalam daftar pencarian google. Anda sudah bisa memulai melakukan optimasi halaman blog tersebut.

c.       Selain cara di atas anda juga bisa melakukan pengecekan secara keseluruhan dengan mengetikkan “site:nama blog” di google

Contoh :

Site:nama-blog-anda.blogspot.com

Misalnya :

Site:http://artikelkomputerku.blogspot.com

Atau

Site:artikelkomputerku.blogspot.com

VII. Kelebihan Dan Kelemahan Penggunaan Notepad

Kelemahan membuat halaman web dengan editor teks seperti notepad adalah keharusan untuk mempelajari perintah-perintah HTML dan proses pembuatan kode HTML. Meskipun sederhana pengkodean di notepad memakan banyak waktu. Tetapi ada dua keuntungan membuat kode notepad yaitu kode yang dibuat efisien, dan manajer dapat lebih memahami bagaimana halaman web bekerja.

1.       Notepad sebagai Digital diary

2.       Notepad sebagai HTML Stipper

3.       Notepad sebagai Penghemat biaya mencetak

4.       Notepad sebagai HTML Creator

5.       Notepad sebagai Pembuat Script baik maupun Script jahat

6.       Notepad sebagai Text Replacer

7.       Notepad sebagai Jalan pintas windows Explorer

8.       Notepad sebagai aplikasi yang terlucu

9.       Notepad sebagai alat kreatif designer

KESIMPULAN DAN SARAN

A. Kesimpulan

o   Microsoft FrontPage (MS FrontPage) merupakan sebuah program untuk membuat, mendesain, dan mengedit halaman World Wide Web seperti menambahkan text, images, table, form, dan elemen lain di web.

o   Pada umumnya halaman web mungkin dibuka dalam browser yang digunakan untuk mengunjungi halaman situs web tersebut, tarif tambahan dapat juga dikenakan jika menggunakan browser yang berbeda.

o   Notepad merupakan suatu aplikasi sebuah text editor simple yang sudah ada sejak windows 1.0 di tahun 1985 yang ada disetiap system windows baik xp, vista, seven dan sebagainya.

o   Seperti dokumen pada umumnya yang dapat terdiri dari teks, gambar, animasiatau bahkan video, yang membedakan dokumen HTML dengan dokumen lainnya adalah elemen dan tag-tagnya. Elemen dan tag inilah yang merubah tulisan atau teks biasa menjadi sebuah tampilan yang menarik.

o   Microsoft Frontpage juga mempunyai kelebihan lainnya yaitu untuk membuat halaman web adalah kemudahan penggunanya dan computer dan peranti lunak semakin murah.

o   Salah satu cara optimalisasi halaman web, yaitu membuat artikel di forum-forum sharing.Kemudian di forum tersebut anda membuat link ke halaman blog yang akan asnda optimasi.

o  Kelemahan membuat halaman web dengan editor teks seperti notepad adalah keharusan untuk mempelajari perintah-perintah HTML. Meskipun sederhana pengkodean di notepad memakan banyak waktu.

B. Saran

o   I.Bagi para pemula, pembuatan web/HTML merupakan dasar yang penting sehingga dapat membantu ketika kita memulai sebuah proyek web tanpa menggunakan cara yang praktis.

o   II.Sebaiknya Web/HTML ini digunakan untuk kegiatan yang positif bukan untuk kegiatan yang negatif atau menggunakan .Web/HTML ini untuk kepentingan pribadi saja.

o   III.Dalam membuat dokumen frontpage penting untuk di perhatikan jenis font untuk kata-kata yang akan ketik di halaman web atau times new roman

	ii

 

Daftar Pustaka

·         http://dwiadywijaya.blogspot.co.id/2014/05/multimedia_671.html

·         http://studyhtml8.blogspot.co.id/2012/12/bagian-dokumen-html-seperti-dokumen.html

·         http://aboutnotepad.blogspot.co.id/2013/04/notepad-dan-notepad.html

·         https://sismartamelia.wordpress.com/2013/04/18/makalah-html/

	iii

 

DAFTAR ISI

PROYEK WEB / HTML MENGGUNAKAN MICROSOFT FRONTPAGE

Daftar isi.......…………………………………………………………………………………………..(i)

I. Membuat Dokumen Frontpage.............................................................................................................2

II. Melihat Halaman Web Yang Telah Dikerjakan..................................................................................6

III. Kelebihan Dan Kekurangan Frontpage..............................................................................................6

IV.Bagian-Bagian Dari Dokumen HTML...............................................................................................7

V. Membuat Dokumen Notepage..........................................................................................................11

VI. Melihat Halaman Web.....................................................................................................................11

VII. Kelebihan Dan Kekurangan Penggunaan Notepage......................................................................12

Kesimpulan dan saran

A. Kesimpulan.......................................................................................................................................13

B. Saran..................................................................................................................................................14

Daftar Pustaka.......................................................................................................................................iii

	i