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 :
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.
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.
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 >
< 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
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
|
|||
 |
|||
Daftar
Pustaka
·
http://dwiadywijaya.blogspot.co.id/2014/05/multimedia_671.html
·
http://aboutnotepad.blogspot.co.id/2013/04/notepad-dan-notepad.html
·
https://sismartamelia.wordpress.com/2013/04/18/makalah-html/
 |
|||
|
|||
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
|
|||
 |
|||
