proyek web

1. PROYEK WEB / HTML MENGGUNAKAN
MICROSOFT FRONTPAGE

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

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

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

5.  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 memasukan “101 North Main street.” Hanya tekan kunci
“Enter” lagi dan bulatan ini akan hilang dan dapat mengetikan kembali
informasi untuk halaman Web tersebut.

6.  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

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

8.  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

9.  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

10. 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).

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

12. 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,

13. • <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

14.  <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 Lin
 <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