SlideShare a Scribd company logo
1 of 44
Proyek Web/HTML Menggunakan Microsoft
                Front Page
                   Bab II


Nama Kelompok : Muhammad Weli M. (0211 11 050)
               Yulius Purwanto   (0211 11 051)
                Mochamad Febriandi (0211 11 061 )

               Fakultas Ekonomi
               Universitas Pakuan
TUJUAN BELAJAR

 Memahami kelebihan dan kelemahan
 merancang halaman Web dengan menggunakan
 FrontPage.
 Mampu membuat sebuah halaman Web dasar.
 Mengetahui bagaimana cara mengontrol format
 kata-kata dan gambar-gambar pada saat sebuah
 halaman Web.
 Mengetahui bagaimana cara menciptakan
 tabel-tabel dan daftar-daftar pada sebuah
 halaman Web.
 Mengetahui bagaimana cara menciptakan
 link ke halaman Web lain, e-mail, dan bagian-
 bagian halaman Web yang ada.
Microsoft FrontPage


     FrontPage merupakan suatu aplikasi lunak
  yang mudah digunakan dan dapat digunakan
  untuk membuat halaman Web yang sederhana.
  Penggunaan editor test untuk membuat sebuah
  halaman Web memerlukan waktu yang lebih
  banyak dan sedikit sulit, namun memberikan
  kontrol yang lebih besar terhadap desain
  halaman Web tersebut.
Contoh Halaman Web
     Contoh ini membuat suatu halaman Web
 dasar yang menampilkan infromasi kepada
 pelanggan pontensial. Gambar ini memberikan
 informasi mengenai University Pizza, lokasinya,
 dan jenis-jenis pizza yang ditawarkan. Beberapa
 fitur ini digunakan untuk mengorganisasi
 informasi di halaman Web tersebut untuk
 membuatnya lebih efektif: daftar, sebuah
 gambar, sebuah tabel, dan sederet link.
Contoh halaman Web diatas memiliki
tiga link:

1. Contact Us
    yaitu sebuah link untuk mengirim e-mail.
2. Link to my school
    yaitu sebuah hyperlink untuk halaman Web
    sekolah.
3. Go to Top of Page
    Memberikan navigasi untuk halaman Web
    tersebut.
Halaman Web yang panjang terkadang
sebuah membutuhkan bantuan navigasi ,
sehingga para pengguna dapat melompat
ke bagian halaman yang diminati dan
melewati informasi-informasi yang tidak di
inginkan.
MEMBUAT DOKUMEN FRONTPAGE


    Intruksi-intruksi ini secara umum akan
 mengarahkan        kepada    perintah dan
 subperintah yang akan mendapatkan efek
 yang diinginkan. Microsoft FrontPage
 memiliki banyak ikon yang dapat melakukan
 operasi yang sama dengan satu klik mouse
 saja.
Mulailah membuka program Microsoft Fron Page


 Klik tombol “Start”
 Pilihlah “All Program”
 dan klik dua kali program “Microsoft FrontPage
Layar Awal FrontPage
Catetan beberapa hal mengenai layar pembuka
yang ditampilkan

1.  “Page” di kolom sebelah kiri, yaitu sebuah
   tampilan halaman Web.
2. “Normal (Desain)” di bagian bawah layar, di
   mana ditampilkan tampilan yang sedang
   digunakan normal.
3. “HTML (code)” akan menampilkan kode
   komputer di belakang halaman Web.
4. “Preview” akan menampilkan halaman yang
   akan tampil di browser Internet, misalnya
   Internet Explorer atau Netscape.
Gantilah judul proyek ini dengan memilih
perintah “File” lalu pilih “Save As”. Bisa dilihat
bahwa contoh ini menyimpan file untuk halaman
Web pada desktop komputer dan menggunakan
nama asli file “index.htm.”

    Pastikan anda menyimpan pekerjaaan anda
terlebih dahulu sehingga pekerjaan anda tidak
hilang.
Mengubah Judul Proyek
Langkah Awal membuat halaman


 Ketik judul “Univesity Pizza”
 Tekan tombol “Enter” pada papan
 Tandai kata-kata “Univesity Pizza” (Seperti yang
  ditunjukan oleh gambar)
 Kemudian pilihlah poin 18 untuk ukuran font dari
  menu drop-down
 Pilihlah perintah “Format” diikuti dengan
  perintah subperintah “Paragraph”
 Pilihlah pilihan “Center”. (Seperti yang
  ditunjukan oleh gambar)
Perbesar ukuran Teks   Membuat Teks ke tengah
Membuat Daftar Lokasi
 Ketik “Location”
 Tandailah “Location”
 Dan kemudian perintah “Format”
 Dengan sub perintah “Paragraph” dan
  “Alignment” dari pilihan drop-down
 Buatlah agar paragraph terjajar ke kiri (“Left”)
 Kemudian klik icon daftar bertanda seperti yang
  ditampilkan pada gambar
 Lalu masukan tiga frase “Commuter Parking
  Lot,” ”Recreation Center,”dan”101 North Main
  Street,”.
 Dan tekan kunci “Enter” setelah ketik frase.
Membuat Sebuah Daftar yang Tidak
Berurutan
Cara Membuat Table

 Pilihlah perintah “Table”, subperintah “Insert”
 Kemudian pilihlah perintah “Table” (Seperti yang
  ditunjukan pada gambar)
 Pada layar yang tampil, pilihlah table dengan
  empat kolom dan empat baris
Membuat Sebuah Tabel
Mengisi Sel-sel table

 Isilah sel-sel table dengan informasi ( Yang
  ditampilkan pada gambar)
 Tandailah judul-judul kolom (“Topping,” “
  Small,” “Medium,” “Large”, satu demi satu
  atau seluruh barisan.
 Lalu pilihlah “format” diikuti dengan
  subperintah “Font.”
 Dari jendela yang muncul, pada pilihan “Font
  Style” pilihlah “Italic”
Tabel dengan Sel-Sel yang Sudah Terisi
Menambahkan Gambar


 Klik perintah “Insert” di ikuti dengan
  subperintah “Picture”.
 Pilihlah “Clip art” (Seperti yang di tunjukan
  pada gambar )
Menuju Clip Art
Mencari gambar di Clip Art


 Ketika layar selanjutnya muncul, ketika kata
  “Pizza”
 Pilihlah sebuah gambar untuk digunakan
 Setelah memasukan gambar tersebut,
  tekanlah kunci “ENTER” dua kali untuk
  membuat halaman web bergerak turun
Mencari gambar di Clip Art
Menyimpan Gambar yang sudah dipilih
sebagai file GIF

      Gambar yang sudah diambil dari clip art
  Micosoft berbentuk Windows Media Format
  (WMF) tapi harus menyimpannya dalam
  bentuk yang dikenali oleh halaman WEB.
 Klik tombol “Picture Option”
 Pilihlah format file “GIF”
 Kemudian klik “OK” menyimpan file tersebut
  dengan nama file yang baru,simpanlah file
  frontpage anda sekala berkala.
Menambahkan sebuah daftar
bernomor
 Anda harus memasukan kalimat “why order
  from us?” pada halaman Web tersebut.
 Kemudian tekan kunci “Enter” untuk
  mendapatkan garis baru.
 Lalu pilihlah ikon daftar bernomor (seperti di
  dalam gambar)
 Dan masukan tiga alasan (“pengiriman
  cepat”) dan menekan kunci “Enter”
Membuat daftar yang bernomor dan berangka
Link Halaman Web


      Bagian akhir dari contoh ini adalah untuk
  menciptakan tiga jenis link: sebuah link untuk
  alamat e-mail, sebuah link untuk halaman
  Web yang lain, dan sebuah link untuk bagian
  lain halaman Web tersebut. Membuat link
  bisa berguna untuk pergi ketempat halaman
  Web lain agar bisa dibaca dan mengirimkan
  e-mail kepada orang yang menciptakannya.
Memasukan Hyperlink
*Klik “Insert”
*Di ikuti dengan subperintah “Hyperlink”
Pemilihan Penggunaan Link E-Mail
 Pada bagian “Text to display” masukan kalimat
  “Contact Us”.
 Pada bagian “E-mail address,” masukan alamat
  e-mail anda. Ketika anda mengetik FrontPage
  secara otomatis memasukan mailto: ke alamat
  e-mail anda agar link e-mail bekerja dengan
  browser internet
 Pada bagian terakhir anda perlu isi adalah
  “Subject” Masukan frase “Pizza Delivery.”
 ketika seseorang mengklik frase”contact Us”
  pada halaman Web anda akan dikirimin sebuah
  pesan dengan judul “Pizza Delivery.”
Pemilihan penggunaan Link E-mail
Membuat sebuah link untuk halaman Web
 Klik perntah “Insert” di ikuti dengan
  subperintah “Hyperlink”
 Pastikan anda memilih kotak “Exisiting File or
  Web Page” di bawah kolom link to pada
  bagian “text to display” ketikan “Link to my
  school” pada bagian “address” ketikan
  HTTP://WWW.YOURSCHOOL.EDU.
Membuat sebuah link untuk halaman Web
Membuat Link dengn Bookmark
Melihat Web yang telah di kerjakan
      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 Pizza” jika
tulisan-tulisan ini tidak muncul maka
kemungkinan komputer anda tidak diizinkan
untuk mengirimkan e-mail atau anda belum
membuat link dengan benar.
Tandai link “Link to My School” dan “Go to
Top Of Page”. Jika ada link yang tidak berkerja
dengan baik, kembali dan pilih tab “normal” (dan
keluar dari tampilan “Preview”), anda dapat
menandai link yang tidak berkerja dan
menghapusnya. Lalu kerjakan kembali contoh
tersebut untuk memperbaiki link tersebut.
Kelebihan dan Kekurangan FrontPage


     Kebanyakan     orang     merasa     mudah
  menggunakan FrontPage untuk membuat
  halaman Web. Tetapi, FrontPage harus membuat
  berbagai asumsi dan default untuk membuat
  sebuah halaman Web. Ini akan menghasilkan file
  komputer yang panjang sekedar untuk
  melakukan tugas yang sederhana.
 Kelebihan FrontPage
    Menggunakan FrontPage untuk membuat
 halaman Web adalah kemudahan penggunanya.
 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.
 Kerkurangan FrontPage
    Kekurangan Frontpage adalah kode HTML
 (kode yang diperoses oleh browser internet)
 yang dihasilkan tidak effisien.
SEKIAN
TERIMA KASIH

More Related Content

What's hot

SIM, Putri Sarining Katrisna, Prof. Dr. Hapzi Ali, MM, CMA, Opsi Membuat Blog...
SIM, Putri Sarining Katrisna, Prof. Dr. Hapzi Ali, MM, CMA, Opsi Membuat Blog...SIM, Putri Sarining Katrisna, Prof. Dr. Hapzi Ali, MM, CMA, Opsi Membuat Blog...
SIM, Putri Sarining Katrisna, Prof. Dr. Hapzi Ali, MM, CMA, Opsi Membuat Blog...PutriSari0697
 
Laporan praktikum modul 5
Laporan praktikum modul 5 Laporan praktikum modul 5
Laporan praktikum modul 5 Hardini_HD
 
Bahan ajar presentasi
Bahan ajar presentasiBahan ajar presentasi
Bahan ajar presentasiAris Saputro
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaDoni Andriansyah
 
laporan praktikum 5 Internet
laporan praktikum 5 Internetlaporan praktikum 5 Internet
laporan praktikum 5 InternetMuhammad Salihin
 
Cara mengupload file pdf dalam blog
Cara mengupload file pdf dalam blogCara mengupload file pdf dalam blog
Cara mengupload file pdf dalam blogismadi-eltibiz
 
Cara Mudah Dan Elegan Menyisipkan Power Point Ke Dalam Blog
Cara Mudah Dan Elegan Menyisipkan Power Point Ke Dalam BlogCara Mudah Dan Elegan Menyisipkan Power Point Ke Dalam Blog
Cara Mudah Dan Elegan Menyisipkan Power Point Ke Dalam BlogErik Prabowo
 
Java Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSPJava Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSPDoni Andriansyah
 
Cara Membuat menu Bar
Cara Membuat menu BarCara Membuat menu Bar
Cara Membuat menu Barshoimah
 

What's hot (14)

SIM, Putri Sarining Katrisna, Prof. Dr. Hapzi Ali, MM, CMA, Opsi Membuat Blog...
SIM, Putri Sarining Katrisna, Prof. Dr. Hapzi Ali, MM, CMA, Opsi Membuat Blog...SIM, Putri Sarining Katrisna, Prof. Dr. Hapzi Ali, MM, CMA, Opsi Membuat Blog...
SIM, Putri Sarining Katrisna, Prof. Dr. Hapzi Ali, MM, CMA, Opsi Membuat Blog...
 
Power point 2007
Power point 2007Power point 2007
Power point 2007
 
Laporan praktikum modul 5
Laporan praktikum modul 5 Laporan praktikum modul 5
Laporan praktikum modul 5
 
Bahan ajar presentasi
Bahan ajar presentasiBahan ajar presentasi
Bahan ajar presentasi
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal berita
 
Mengoperasikan e mail
Mengoperasikan e mailMengoperasikan e mail
Mengoperasikan e mail
 
Teknik presentasi
Teknik presentasiTeknik presentasi
Teknik presentasi
 
laporan praktikum 5 Internet
laporan praktikum 5 Internetlaporan praktikum 5 Internet
laporan praktikum 5 Internet
 
Apakah itu blog
Apakah itu blogApakah itu blog
Apakah itu blog
 
Cara mengupload file pdf dalam blog
Cara mengupload file pdf dalam blogCara mengupload file pdf dalam blog
Cara mengupload file pdf dalam blog
 
Jun stepbystep1
Jun stepbystep1Jun stepbystep1
Jun stepbystep1
 
Cara Mudah Dan Elegan Menyisipkan Power Point Ke Dalam Blog
Cara Mudah Dan Elegan Menyisipkan Power Point Ke Dalam BlogCara Mudah Dan Elegan Menyisipkan Power Point Ke Dalam Blog
Cara Mudah Dan Elegan Menyisipkan Power Point Ke Dalam Blog
 
Java Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSPJava Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSP
 
Cara Membuat menu Bar
Cara Membuat menu BarCara Membuat menu Bar
Cara Membuat menu Bar
 

Similar to Proyek 2 sistem informasi manajemen

Similar to Proyek 2 sistem informasi manajemen (20)

Proyek 3
Proyek 3Proyek 3
Proyek 3
 
Proyek 3
Proyek 3Proyek 3
Proyek 3
 
Proyek 3
Proyek 3Proyek 3
Proyek 3
 
Proyek 3
Proyek 3Proyek 3
Proyek 3
 
Proyek 3
Proyek 3Proyek 3
Proyek 3
 
Proyek 2
Proyek 2Proyek 2
Proyek 2
 
Frontpage
FrontpageFrontpage
Frontpage
 
Tugas KD 3 cara menggunakan hiperlink
Tugas KD 3 cara menggunakan hiperlinkTugas KD 3 cara menggunakan hiperlink
Tugas KD 3 cara menggunakan hiperlink
 
SIM Proyek 3
SIM Proyek 3SIM Proyek 3
SIM Proyek 3
 
Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepad
 
Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepad
 
Proyek 3 web html menggunakan notepad
Proyek 3 web html menggunakan notepadProyek 3 web html menggunakan notepad
Proyek 3 web html menggunakan notepad
 
PROYEK 2 SISTEM INFORMASI MANAJEMEN
PROYEK 2 SISTEM INFORMASI MANAJEMENPROYEK 2 SISTEM INFORMASI MANAJEMEN
PROYEK 2 SISTEM INFORMASI MANAJEMEN
 
Ig2s
Ig2sIg2s
Ig2s
 
Ig2s
Ig2sIg2s
Ig2s
 
Ig2s
Ig2sIg2s
Ig2s
 
Proyek 5
Proyek 5Proyek 5
Proyek 5
 
Ig2s
Ig2sIg2s
Ig2s
 
9 e = 6 tuti hartati sussi ok
9 e = 6 tuti hartati   sussi ok9 e = 6 tuti hartati   sussi ok
9 e = 6 tuti hartati sussi ok
 
9 e = 6 tuti hartati sussi ok
9 e = 6 tuti hartati   sussi ok9 e = 6 tuti hartati   sussi ok
9 e = 6 tuti hartati sussi ok
 

More from Yuliani_muharromah

Teori bab 11 sistem informasi manajemen
Teori bab 11 sistem informasi manajemenTeori bab 11 sistem informasi manajemen
Teori bab 11 sistem informasi manajemenYuliani_muharromah
 
Teori bab 5 sistem informasi manajemen
Teori bab 5 sistem informasi manajemenTeori bab 5 sistem informasi manajemen
Teori bab 5 sistem informasi manajemenYuliani_muharromah
 
Teori bab 4 sistem informasi manajemen
Teori bab 4 sistem informasi manajemenTeori bab 4 sistem informasi manajemen
Teori bab 4 sistem informasi manajemenYuliani_muharromah
 
Teori bab 3 sistem informasi manajemen
Teori bab 3 sistem informasi manajemenTeori bab 3 sistem informasi manajemen
Teori bab 3 sistem informasi manajemenYuliani_muharromah
 
Teori bab 1 sistem informasi manajemen
Teori bab 1 sistem informasi manajemenTeori bab 1 sistem informasi manajemen
Teori bab 1 sistem informasi manajemenYuliani_muharromah
 
Teori 2 sistem informasi manajemen
Teori 2 sistem informasi manajemenTeori 2 sistem informasi manajemen
Teori 2 sistem informasi manajemenYuliani_muharromah
 

More from Yuliani_muharromah (7)

Pengembangan sistem
Pengembangan sistemPengembangan sistem
Pengembangan sistem
 
Teori bab 11 sistem informasi manajemen
Teori bab 11 sistem informasi manajemenTeori bab 11 sistem informasi manajemen
Teori bab 11 sistem informasi manajemen
 
Teori bab 5 sistem informasi manajemen
Teori bab 5 sistem informasi manajemenTeori bab 5 sistem informasi manajemen
Teori bab 5 sistem informasi manajemen
 
Teori bab 4 sistem informasi manajemen
Teori bab 4 sistem informasi manajemenTeori bab 4 sistem informasi manajemen
Teori bab 4 sistem informasi manajemen
 
Teori bab 3 sistem informasi manajemen
Teori bab 3 sistem informasi manajemenTeori bab 3 sistem informasi manajemen
Teori bab 3 sistem informasi manajemen
 
Teori bab 1 sistem informasi manajemen
Teori bab 1 sistem informasi manajemenTeori bab 1 sistem informasi manajemen
Teori bab 1 sistem informasi manajemen
 
Teori 2 sistem informasi manajemen
Teori 2 sistem informasi manajemenTeori 2 sistem informasi manajemen
Teori 2 sistem informasi manajemen
 

Recently uploaded

MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAAndiCoc
 
Lembar Catatan Percakapan Pasca observasidocx
Lembar Catatan Percakapan Pasca observasidocxLembar Catatan Percakapan Pasca observasidocx
Lembar Catatan Percakapan Pasca observasidocxbkandrisaputra
 
Lembar Observasi Pembelajaran di Kelas.docx
Lembar Observasi Pembelajaran di  Kelas.docxLembar Observasi Pembelajaran di  Kelas.docx
Lembar Observasi Pembelajaran di Kelas.docxbkandrisaputra
 
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMmulyadia43
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxawaldarmawan3
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5ssuserd52993
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...Kanaidi ken
 
soal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxsoal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxazhari524
 
Materi Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxMateri Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxRezaWahyuni6
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdftsaniasalftn18
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfElaAditya
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxJamhuriIshak
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfCloverash1
 
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxtugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxmawan5982
 
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfirwanabidin08
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASKurniawan Dirham
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxsdn3jatiblora
 
Modul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BModul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BAbdiera
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxIrfanAudah1
 
421783639-ppt-overdosis-dan-keracunan-pptx.pptx
421783639-ppt-overdosis-dan-keracunan-pptx.pptx421783639-ppt-overdosis-dan-keracunan-pptx.pptx
421783639-ppt-overdosis-dan-keracunan-pptx.pptxGiftaJewela
 

Recently uploaded (20)

MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
 
Lembar Catatan Percakapan Pasca observasidocx
Lembar Catatan Percakapan Pasca observasidocxLembar Catatan Percakapan Pasca observasidocx
Lembar Catatan Percakapan Pasca observasidocx
 
Lembar Observasi Pembelajaran di Kelas.docx
Lembar Observasi Pembelajaran di  Kelas.docxLembar Observasi Pembelajaran di  Kelas.docx
Lembar Observasi Pembelajaran di Kelas.docx
 
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
 
soal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxsoal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptx
 
Materi Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxMateri Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptx
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdf
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdf
 
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxtugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
 
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptx
 
Modul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BModul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase B
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
 
421783639-ppt-overdosis-dan-keracunan-pptx.pptx
421783639-ppt-overdosis-dan-keracunan-pptx.pptx421783639-ppt-overdosis-dan-keracunan-pptx.pptx
421783639-ppt-overdosis-dan-keracunan-pptx.pptx
 

Proyek 2 sistem informasi manajemen

  • 1. Proyek Web/HTML Menggunakan Microsoft Front Page Bab II Nama Kelompok : Muhammad Weli M. (0211 11 050) Yulius Purwanto (0211 11 051) Mochamad Febriandi (0211 11 061 ) Fakultas Ekonomi Universitas Pakuan
  • 2. TUJUAN BELAJAR  Memahami kelebihan dan kelemahan merancang halaman Web dengan menggunakan FrontPage.  Mampu membuat sebuah halaman Web dasar.  Mengetahui bagaimana cara mengontrol format kata-kata dan gambar-gambar pada saat sebuah halaman Web.  Mengetahui bagaimana cara menciptakan tabel-tabel dan daftar-daftar pada sebuah halaman Web.
  • 3.  Mengetahui bagaimana cara menciptakan link ke halaman Web lain, e-mail, dan bagian- bagian halaman Web yang ada.
  • 4. Microsoft FrontPage FrontPage merupakan suatu aplikasi lunak yang mudah digunakan dan dapat digunakan untuk membuat halaman Web yang sederhana. Penggunaan editor test untuk membuat sebuah halaman Web memerlukan waktu yang lebih banyak dan sedikit sulit, namun memberikan kontrol yang lebih besar terhadap desain halaman Web tersebut.
  • 5. Contoh Halaman Web Contoh ini membuat suatu halaman Web dasar yang menampilkan infromasi kepada pelanggan pontensial. Gambar ini memberikan informasi mengenai University Pizza, lokasinya, dan jenis-jenis pizza yang ditawarkan. Beberapa fitur ini digunakan untuk mengorganisasi informasi di halaman Web tersebut untuk membuatnya lebih efektif: daftar, sebuah gambar, sebuah tabel, dan sederet link.
  • 6.
  • 7. Contoh halaman Web diatas memiliki tiga link: 1. Contact Us yaitu sebuah link untuk mengirim e-mail. 2. Link to my school yaitu sebuah hyperlink untuk halaman Web sekolah. 3. Go to Top of Page Memberikan navigasi untuk halaman Web tersebut.
  • 8. Halaman Web yang panjang terkadang sebuah membutuhkan bantuan navigasi , sehingga para pengguna dapat melompat ke bagian halaman yang diminati dan melewati informasi-informasi yang tidak di inginkan.
  • 9. MEMBUAT DOKUMEN FRONTPAGE Intruksi-intruksi ini secara umum akan mengarahkan kepada perintah dan subperintah yang akan mendapatkan efek yang diinginkan. Microsoft FrontPage memiliki banyak ikon yang dapat melakukan operasi yang sama dengan satu klik mouse saja.
  • 10. Mulailah membuka program Microsoft Fron Page  Klik tombol “Start”  Pilihlah “All Program”  dan klik dua kali program “Microsoft FrontPage
  • 11.
  • 13. Catetan beberapa hal mengenai layar pembuka yang ditampilkan 1. “Page” di kolom sebelah kiri, yaitu sebuah tampilan halaman Web. 2. “Normal (Desain)” di bagian bawah layar, di mana ditampilkan tampilan yang sedang digunakan normal. 3. “HTML (code)” akan menampilkan kode komputer di belakang halaman Web. 4. “Preview” akan menampilkan halaman yang akan tampil di browser Internet, misalnya Internet Explorer atau Netscape.
  • 14. Gantilah judul proyek ini dengan memilih perintah “File” lalu pilih “Save As”. Bisa dilihat bahwa contoh ini menyimpan file untuk halaman Web pada desktop komputer dan menggunakan nama asli file “index.htm.” Pastikan anda menyimpan pekerjaaan anda terlebih dahulu sehingga pekerjaan anda tidak hilang.
  • 16. Langkah Awal membuat halaman  Ketik judul “Univesity Pizza”  Tekan tombol “Enter” pada papan  Tandai kata-kata “Univesity Pizza” (Seperti yang ditunjukan oleh gambar)  Kemudian pilihlah poin 18 untuk ukuran font dari menu drop-down  Pilihlah perintah “Format” diikuti dengan perintah subperintah “Paragraph”  Pilihlah pilihan “Center”. (Seperti yang ditunjukan oleh gambar)
  • 17. Perbesar ukuran Teks Membuat Teks ke tengah
  • 18. Membuat Daftar Lokasi  Ketik “Location”  Tandailah “Location”  Dan kemudian perintah “Format”  Dengan sub perintah “Paragraph” dan “Alignment” dari pilihan drop-down  Buatlah agar paragraph terjajar ke kiri (“Left”)  Kemudian klik icon daftar bertanda seperti yang ditampilkan pada gambar  Lalu masukan tiga frase “Commuter Parking Lot,” ”Recreation Center,”dan”101 North Main Street,”.  Dan tekan kunci “Enter” setelah ketik frase.
  • 19. Membuat Sebuah Daftar yang Tidak Berurutan
  • 20. Cara Membuat Table  Pilihlah perintah “Table”, subperintah “Insert”  Kemudian pilihlah perintah “Table” (Seperti yang ditunjukan pada gambar)  Pada layar yang tampil, pilihlah table dengan empat kolom dan empat baris
  • 22. Mengisi Sel-sel table  Isilah sel-sel table dengan informasi ( Yang ditampilkan pada gambar)  Tandailah judul-judul kolom (“Topping,” “ Small,” “Medium,” “Large”, satu demi satu atau seluruh barisan.  Lalu pilihlah “format” diikuti dengan subperintah “Font.”  Dari jendela yang muncul, pada pilihan “Font Style” pilihlah “Italic”
  • 23. Tabel dengan Sel-Sel yang Sudah Terisi
  • 24. Menambahkan Gambar  Klik perintah “Insert” di ikuti dengan subperintah “Picture”.  Pilihlah “Clip art” (Seperti yang di tunjukan pada gambar )
  • 26. Mencari gambar di Clip Art  Ketika layar selanjutnya muncul, ketika kata “Pizza”  Pilihlah sebuah gambar untuk digunakan  Setelah memasukan gambar tersebut, tekanlah kunci “ENTER” dua kali untuk membuat halaman web bergerak turun
  • 27. Mencari gambar di Clip Art
  • 28. Menyimpan Gambar yang sudah dipilih sebagai file GIF Gambar yang sudah diambil dari clip art Micosoft berbentuk Windows Media Format (WMF) tapi harus menyimpannya dalam bentuk yang dikenali oleh halaman WEB.  Klik tombol “Picture Option”  Pilihlah format file “GIF”  Kemudian klik “OK” menyimpan file tersebut dengan nama file yang baru,simpanlah file frontpage anda sekala berkala.
  • 29.
  • 30. Menambahkan sebuah daftar bernomor  Anda harus memasukan kalimat “why order from us?” pada halaman Web tersebut.  Kemudian tekan kunci “Enter” untuk mendapatkan garis baru.  Lalu pilihlah ikon daftar bernomor (seperti di dalam gambar)  Dan masukan tiga alasan (“pengiriman cepat”) dan menekan kunci “Enter”
  • 31. Membuat daftar yang bernomor dan berangka
  • 32. Link Halaman Web Bagian akhir dari contoh ini adalah untuk menciptakan tiga jenis link: sebuah link untuk alamat e-mail, sebuah link untuk halaman Web yang lain, dan sebuah link untuk bagian lain halaman Web tersebut. Membuat link bisa berguna untuk pergi ketempat halaman Web lain agar bisa dibaca dan mengirimkan e-mail kepada orang yang menciptakannya.
  • 33. Memasukan Hyperlink *Klik “Insert” *Di ikuti dengan subperintah “Hyperlink”
  • 34. Pemilihan Penggunaan Link E-Mail  Pada bagian “Text to display” masukan kalimat “Contact Us”.  Pada bagian “E-mail address,” masukan alamat e-mail anda. Ketika anda mengetik FrontPage secara otomatis memasukan mailto: ke alamat e-mail anda agar link e-mail bekerja dengan browser internet  Pada bagian terakhir anda perlu isi adalah “Subject” Masukan frase “Pizza Delivery.”  ketika seseorang mengklik frase”contact Us” pada halaman Web anda akan dikirimin sebuah pesan dengan judul “Pizza Delivery.”
  • 36. Membuat sebuah link untuk halaman Web  Klik perntah “Insert” di ikuti dengan subperintah “Hyperlink”  Pastikan anda memilih kotak “Exisiting File or Web Page” di bawah kolom link to pada bagian “text to display” ketikan “Link to my school” pada bagian “address” ketikan HTTP://WWW.YOURSCHOOL.EDU.
  • 37. Membuat sebuah link untuk halaman Web
  • 38. Membuat Link dengn Bookmark
  • 39. Melihat Web yang telah di kerjakan 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)
  • 40. 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 Pizza” jika tulisan-tulisan ini tidak muncul maka kemungkinan komputer anda tidak diizinkan untuk mengirimkan e-mail atau anda belum membuat link dengan benar.
  • 41. Tandai link “Link to My School” dan “Go to Top Of Page”. Jika ada link yang tidak berkerja dengan baik, kembali dan pilih tab “normal” (dan keluar dari tampilan “Preview”), anda dapat menandai link yang tidak berkerja dan menghapusnya. Lalu kerjakan kembali contoh tersebut untuk memperbaiki link tersebut.
  • 42. Kelebihan dan Kekurangan FrontPage Kebanyakan orang merasa mudah menggunakan FrontPage untuk membuat halaman Web. Tetapi, FrontPage harus membuat berbagai asumsi dan default untuk membuat sebuah halaman Web. Ini akan menghasilkan file komputer yang panjang sekedar untuk melakukan tugas yang sederhana.
  • 43.  Kelebihan FrontPage Menggunakan FrontPage untuk membuat halaman Web adalah kemudahan penggunanya. 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.  Kerkurangan FrontPage Kekurangan Frontpage adalah kode HTML (kode yang diperoses oleh browser internet) yang dihasilkan tidak effisien.