ppt proyek sim bab 5
TRANSCRIPT
![Page 1: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/1.jpg)
PROYEK 5FORMULIR PEMBELIAN BUKU WEB/HTML
KELOMPOK 41. Irnawati : 0211 12 126
2. Pavita Veda Hapsari Putri : 0211 12 156
3. Novi Puspita : 0211 12 164
4. Roby Gunawan : 0211 12 165
Dr. Wonny Ahmad Ridwan, SE, MM
FAKULTAS EKONOMI
UNIVERSITAS PAKUAN
![Page 2: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/2.jpg)
“Formulir Pembelian Buku WEB/HTML”
![Page 3: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/3.jpg)
Tujuan pembelajaran
Mengetahui bagaimana formulir menyimpan informasi dari para pengguna web
Memahami penggunaan kotak teks dan area teks untuk mendapatkan input ketikan dari pengguna
Mengetahui bagaimana membuat tombol radio dan kotak cek untuk mendapatkan input pengguna melalui klik mouse
Mengetahui bagaimana membuat sederet pilihan dari menu drop down
![Page 4: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/4.jpg)
Membuat Formulir
Field text dimana pengguna mengetikan sebaris data (misalnya untuk field “Name”)
Menu drop-down digunakan untuk mengombinasikan jawaban yang akan ditanyakan dalam tempat kecil dihalaman web, contohnya (“what course are you taking?”)
Tombol radio menampilkan semua pilihan kepada pengguna dalam satu tampilan, contohnya (“what type of book do you prefer?”)
Checkbox serupa dengan tombol radio, tetapi pengguna dapat memilih satu pilihan atau lebih (“what else would you like?”)
Kotak teks digunakan untuk mengisi komentar
![Page 5: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/5.jpg)
Tag-tag dalam membuat web
<html> : hypertext markup language adalah salah satu syarat untuk membuat web, dan untuk mendefinisikan root dari suatu dokumen HTML
<head> : digunakan untuk memberikan informasi tentang dokumen tersebut
<body> : digunakan untuk menentukan bagaimana isi suatu dokumen ditampilkan di website. Isi dokumen tersebut dapat berupa teks, gambar, animasi, link dan sebagainya
![Page 6: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/6.jpg)
<tr> : digunakan untuk memisahkan jarak atas-bawah
<td> : pembuat kolom pada tabel <b> : untuk menebalkan huruf (bold) <i> : untuk memiringkan huruf (italic) <u> : menggaris bawahi huruf (underline) <table> : pembuat tabel pada halaman web <p> : paragraf <input> : berfungsi untuk mendefinisikan bentuk
pemasukan pada form
![Page 7: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/7.jpg)
<font> : mendefinisikan jenis font, warna dan ukuran teks
<form> : mendefinisikan sebuah form HTML untuk input form
<select> : untuk menampilkan beberapa option pilihan dalam menu drop down
<option> : untuk menandai masing-masing pilihan yang akan ditampilkan dalam menu drop down
<hyperlink> : untuk membuka link ke halaman selanjutnya
![Page 8: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/8.jpg)
BERIKUT LANGKAH-LANGKAH UNTUK MEMBUAT FORMULIR PEMBELIAN BUKU
WEB/HTML
![Page 9: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/9.jpg)
Langkah 1
Klik start
![Page 10: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/10.jpg)
Lankah 2
Pilih notepad
![Page 11: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/11.jpg)
MAKA AKAN KELUAR TAMPILAN SEPERTI INI
Setelah muncul tampilan seperti di atas, maka langkah selanjutnya adalah memasukan kode html sebagai salah satu syarat dalam membuat web dan untuk mendefinisikan root dari suatu
dokumen html
![Page 12: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/12.jpg)
Langkah selanjutnya adalah membuat judul formulir dengan memasukan kode HTML
Kode html untuk membuat
judul html
![Page 13: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/13.jpg)
Maka akan keluar tampilan seperti ini
Judul html/web
![Page 14: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/14.jpg)
Langkah selanjutnya adalah membuat kolom nama dan alamat e-mail
Kode html untuk membuat kolom nama dan
alamat e-mail
![Page 15: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/15.jpg)
Tampilannya akan seperti ini
Kolom nama dan alamat e-mail
![Page 16: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/16.jpg)
Langkah membuat menu drop-down
Kode html untuk membuat menu drop-
down
![Page 17: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/17.jpg)
Berikut tampilannya
Menu drop-down
![Page 18: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/18.jpg)
Langkah membuat tombol radio
Kode html untuk membuat tombol
radio
![Page 19: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/19.jpg)
Berikut tampilannya
Tombol radio
![Page 20: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/20.jpg)
Langkah membuat checkbox
Kode html untuk membuat checkbox
![Page 21: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/21.jpg)
Berikut adalah hasilnya
checkbox
![Page 22: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/22.jpg)
Berikutnya adalah membuat text area
kode html untuk membuat text area
![Page 23: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/23.jpg)
Berikut ini adalah hasilnya
Text area
![Page 24: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/24.jpg)
Langkah menginput submit dan reset
Kode html untuk menginput submit
dan reset
![Page 25: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/25.jpg)
Berikut adalah hasilnya
Submit dan reset
![Page 26: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/26.jpg)
Dari langkah-langkah yang kita kerjakan, maka akan menghasilkan tampilan berikut ini, tampilan dalam notepad
![Page 27: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/27.jpg)
Tampilan dalam web/html
![Page 28: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/28.jpg)
Cara menyimpan dokumen sebagai file HTML
• Masukan nama file seperti “Book.htm” untuk proyek yang anda kerjakan, tetapi tanpa tanda kutip. Jenis file yang dipilih yaitu “save as type” haruslah “all files” sebagai jenis files, maka halaman web bisa jadi tidak akan bekerja, dan lebih buruk lagi, ekstensi “.txt” akan ditambahkan pada akhir nama file anda. Berikut adalah langkah-langkah menyimpan file notepad menjadi HTML Document :
![Page 29: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/29.jpg)
Langkah 1
Klik file
![Page 30: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/30.jpg)
Langkah 2
Pilih save as
![Page 31: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/31.jpg)
Langkah 3
Ketik “book.htm”
tanpa kutip di file name
![Page 32: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/32.jpg)
Langkah 4pilih all file pada save as type
Pilih all files pada save as type
![Page 33: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/33.jpg)
Lankah 5
Pilih save
Setelah file disimpan maka bentuk file tersebut akan menjadi sebuah bentuk file html
![Page 34: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/34.jpg)
Langkah 6
Contoh file html/web
![Page 35: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/35.jpg)
Setelah halaman web disimpan, langkah selanjutnya adalah kita harus memeriksa apakah halaman tersebut bekerja dengan baik, berikut adalah langkah-langkah
untuk melihat halaman web
Bukalah browser Web
Bukalah browser Web
![Page 36: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/36.jpg)
Langkah 2
Pilih file
![Page 37: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/37.jpg)
Langkah 3
Kemudian pilih open file
![Page 38: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/38.jpg)
Langkah 4
Ketik nama file pada file name
![Page 39: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/39.jpg)
Langkah 5
Pilih open
![Page 40: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/40.jpg)
Maka akan keluar tampilan seperti ini, ini menunjukan bahwa file yang tadi disimpan dapat bekerja dengan baik
![Page 41: Ppt Proyek Sim Bab 5](https://reader033.vdocuments.pub/reader033/viewer/2022061522/55cf9a43550346d033a10a4e/html5/thumbnails/41.jpg)
Terima kasih kami ucapkan pada teman-teman yang telah mendengarkan presentasi dari
kelompok kami