proyek 3 proyek web html menggunakan notepad
DESCRIPTION
kelompok hestiTRANSCRIPT
![Page 1: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/1.jpg)
Proyek Web/HTML Menggunakan Notepad
Nama : 1. Hesti Hariani 0211 11
018
2. Eva Nurfitriyana 0211 11
021
3. Neng Rachmawaty LS 0211 11
023
Kelas : 3A Manajemen
Universitas Pakuan
![Page 2: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/2.jpg)
Proyek Web/HTML Menggunakan Notepad
Tujuan Pembelajaran :
Memahami kelebihan dan kelemahan
penyusunan halaman Web menggunakan
editor teks Notepad
Mampu membuat sebuah halaman Web
dasar
Mengetahui bagaimana mengontrol format
kata-kata dan gambar pada halaman Web
![Page 3: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/3.jpg)
Proyek Web/HTML Menggunakan Notepad
Mengetahui bagaimana membuat tabel dan
gambar pada sebuah halaman Web
Mengetahui bagaimana cara membuat link
ke
halaman Web, e-mail, bagian-bagian lain
halaman Web.
![Page 4: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/4.jpg)
Proyek Web/HTML Menggunakan Notepad
Pendahuluan
• Pada proyek ini, akan ditunjukkan
bagaimana cara menggunakan editor teks
Notepad untuk membuat sebuah halaman
Web.
• Proyek ini menampilkan contoh tahap
demi tahap yang menggambarkan
berbagai teknik dan konsep yang
dibutuhkan untuk membuat halaman Web
di Notepad.
![Page 5: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/5.jpg)
CONTOH
• Pada contoh ini, kita akan membuat
dokumen Notepad yang akan disimpan dalam
bentuk Hypertext Markup Language (HTML)
sehingga dapat digunakan sebagai halaman
Web.
• Contoh halaman Web di sini adalah
penjelasan pelayanan jasa yang ditawarkan
sebuah salon khusus wanita, sehingga
seseorang yang melihat-lihat internet dapat
melihat apa yang ditawarkan salon tersebut.
![Page 6: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/6.jpg)
• Contoh ini berisikan seperangkat standar
fitur Web yang tampil pada hampir semua
halaman Web, yaitu daftar, gambar, link, dan
tabel.
• Perlu dicatat bahwa presentasi dan
pengaturan informasi pada halaman Web
amatlah penting.
• Nama perusahaan tersebut adalah “Maheva
Salon” ditampilkan secara jelas di bagian
tengah atas halaman Web dengan huruf biru
besar.
• Ini diikuti dengan sebuah daftar penanda
sebelum
![Page 7: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/7.jpg)
masing-masing lokasi.
• Tampilan seperti ini adalah tampilan daftar
tidak berurutan yang umum yang tidak
mendahulukan salah satu informasi.
• Lalu, lihatlah daftar alasan yang mengikuti
“Why Do You Choose Our Salon?”, ini adalah
daftar yang berurutan yang artinya informasi
yang lebih penting dituliskan terlebih dahulu.
• Urutan yang biasanya digunakan
menggunakan
![Page 8: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/8.jpg)
angka, tetapi angka romawi dan huruf alfabet
dapat juga digunakan. Demikian juga halnya
dengan cakram (lingkaran kecil), penanda ini
biasa digunakan pada daftar yang tidak
berurutan, tetapi bentuk lain juga bisa
digunakan.
• Setelah lokasi tempat pelayanan jasa salon,
sebuah tabel ditampilkan di mana sejumlah
treatment beserta harga-harganya tertulis.
Tabel tersebut memiliki dua kolom dan tujuh
baris.
![Page 9: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/9.jpg)
• Gambar salon merupakan gambar yang
diambil dari aplikasi lain. Gambar ini terletak
di tengah halaman Web.
• Halaman Web ini memiliki tiga link. Yang
pertama, “Contact Us”, adalah link untuk
mengirimkan e-mail. “Link To Our Salon”
adalah hyperlink ke halaman Web Salon
tersebut. Link yang terakhir, “Go to Top of
Page”, adalah alat navigasi untuk halaman
Web.
![Page 10: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/10.jpg)
![Page 11: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/11.jpg)
![Page 12: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/12.jpg)
![Page 13: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/13.jpg)
Bagian-bagian dari Dokumen HTML
• Dokumen HTML terdiri atas dua bagian.
• Bagian “kepala” memberikan informasi
mengenai peranti lunak browser (penjelajah)
Web, yang mencakup judul halaman Web.
• Bagian “tubuh” memberitahu apa yang akan
dilihat oleh pengguna di layar, berisikan
bagian yang sebagian besar orang kira
merupakan halaman Web.
![Page 14: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/14.jpg)
Membuat Dokumen Notepad
• Mulailah dengan membuka Notepad dan
membuat dokumen baru. Klik perintah “start”
(di bagian bawah kiri layar) dan pilihlah
subperintah “programs”. Tergantung pada
versi Windows yang Anda miliki, program
Notepad akan muncul di dalam daftar atau
Anda mungkin harus mengklik subperintah
“Accessories” sebelum pilihan program
Notepad muncul.
![Page 15: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/15.jpg)
• ketik baris 1 hingga 5 seperti pada figur ke
dalam dokumen Notepad.
• HTML mengharuskan perintah awal dan
akhir misalnya “<html>” dan “</html>. Jika
anda hanya mengetikan sebagian dari contoh
dan mencoba melihatnya sebagai halaman
Web, browser tersebut tidak akan
menemukan perintah akhir, misalnya
</html>. Browser tersebut akan mencoba
untuk “memperbaiki” kesalahan ini, yang
akan menghasilkan halaman Web yang amat
berbeda.
![Page 16: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/16.jpg)
• Baris 1 s/d 5 menentukan judul halaman
Web yaitu “Maheva Salon” dan memulai
bagian tubuh kode HTML.
• Baris 6 adalah penentu tempat, yaitu
tempat di halaman Web di mana kursor akan
ditempatkan. Baris “<a name= “top-of-
page”></a> adalah jangkar. Kita mengetahui
hal ini karena terdapat kurung awal diikuti
oleh perintah “a”, yang berarti “anchor”
(jangkar), yaitu tempat di dalam dokumen
![Page 17: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/17.jpg)
atau pada dokumen HTML lain di mana
pengguna akan diarahkan melalui sebuah
hyperlink .
• Bagian pertama contoh kita adalah untuk
menempatkan “Maheva Salon” di bagian
tengah atas halaman Web dengan huruf biru
besar.
• Baris 7 berisikan HTML untuk memulai
paragraf (yang dimulai dengan perintah “p”)
yang akan disejajarkan di bagian tengah
halaman Web.
![Page 18: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/18.jpg)
• Pada baris 8, ukuran huruf diperbesar
melalui tiga tahapan, seperti memilih tiga
opsi menurun pada menu drop-down. Anda
dapat melihat bahwa perintah font juga
mengubah warna “Maheva Salon” menjadi
biru. Perubahan-perubahan ini tidak harus ke
semua teks pada halaman tersebut, oleh
karena itu kita harus mengembalikan
perubahan ini menjadi bentuk huruf awal
(baris 10) dan ke perataan paragraf awal
(baris 11).
![Page 19: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/19.jpg)
• Selanjutnya kita ingin memberikan daftar
lokasi di mana Salon Maheva tersebut
berada. Sebuah baris kosong disisakan
setelah satu paragraf, tetapi pada baris 12
kita menggunakan perintah “line break”
(“<br>”) untuk memasukan satu baris
kosong tambahan.
• Kita membuat daftar yang tidak beraturan
pada baris 13 dan memberinya judul
“Locations”. Kemudian kita membuat daftar
berisikan 3 hal Bogor Tread Mall, SuperMall
Cianjur dan Lodaya
![Page 20: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/20.jpg)
dengan menggunakan perintah “<li>”. Anda
dapat melihat bahwa perintah “unordered
list” dimatikan pada baris 17.
• Sekarang kita siap untuk membuat tabel
berisikan harga-harga pelayanan salon.
• Tabel Salon Maheva memiliki 6 baris dan 2
kolom. Baris yang pertama berisikan kata-
kata “treatment” dan “price” dalam huruf
miring.
• Teks pada masing-masing data ditabel di
letakkan ditengah.
![Page 21: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/21.jpg)
• Sel tabel data ditandai dengan “td” seperti
yang ditunjukan pada baris 20
• Baris 18 membuat tabel; perlu dicatat
bahwa perintah tersebut juga dapat membuat
garis di sekitar sel tabel. Jika perintah
bertuliskan “<table border=1>” maka
sebuah pembatas tipis akan dihasilkan;
“<table border=10>” akan menghasilkan
garis tebal di sekeliling masing-masing sel.
![Page 22: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/22.jpg)
• Lihatlah baris 19 pada figur. Ini adalah
perintah untuk memulai baris baru di dalam
tabel. Baris 18 memulai tabel, tetapi baris 19
memberitahu HTML untuk memulai sebuah
baris.
• Baris 20 s/d 21 membuat 2 sel data yang
masing-masing mewakili judul kolom. Bisa
dilihat dari figur bahwa judul-judul ini
berformat huruf miring. Perintah “<i>” dan
“</i>” di sekeliling kata-kata membuat kata
tersebut ditampilkan dalam huruf miring. Isi
sel tabel berada di tengah.
![Page 23: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/23.jpg)
• Gambar bukanlah bagian dari kode HTML,
tetapi dipanggil dengan perintah “image”.
• Pada figur, file sumber yang berisikan
gambar seorang pegawai salon yang sedang
melayani pelanggannya adalah
“hair_salon_image.gif”, dan bertempat pada
direktori yang sama dengan file HTML. “Img”
adalah singkatan untuk image, dan “src”
adalah singkatan untuk source file (file
sumber) yang berisikan gambar tersebut.
![Page 24: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/24.jpg)
• Baris 52 membuat paragraf terletak di
tengah halaman Web.
• Baris 53 memberitahu HTML untuk
menggunakan file “hair_salon_image.gif”
tanpa pembatas di sekeliling gambar; dengan
kata lain, “border=0”. Baris 54
menonaktifkan perataan paragraf sehingga
perataan akan kembali seperti semula, yaitu
rata kiri.
![Page 25: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/25.jpg)
• Daftar berurutan “Why Do You Choose Our
Salon?” ditunjukkan pada baris 55 s/d 59.
• Baris ini dimulai dengan “<ol>Why Do You
Choose Our Salon?” sebagai judul daftar.
Daftar yang berurutan (yang dikodekan “ol”)
menggunakan angka untuk menandakan
urutan poin.
• 3 hal terakhir yang ada pada figur adalah
link. 2 link yang pertama sejajar dengan
bagian tengah kanan halaman Web.
![Page 26: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/26.jpg)
• Baris 60 dan 62 adalah perintah awal dan
akhir yang menyebabkan paragraf tersebut
sejajar ke bagian kanan.
• Sekarang kita akan membahas tiga jenis link
pada situs ini : satu ke halaman Web lain,
satu ke program e-mail, dan satu ke bagian
lain halaman Web yang sedang dilihat.
• Hyperlink yang pertama (baris 61) adalah
“mailto:[email protected].”
![Page 27: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/27.jpg)
• Segmen “mailto :” memerintahkan browser
Web untuk membuat link dengan peranti
lunak komputer dan memasukkan
“[email protected] sebagai alamat
penerima e-mail.
• Frase “Contact Us” adalah satu-satunya hal
yang akan dilihat pengguna pada halaman
Web; perintah “anchor” tetap tidak akan
terlihat. Akhiri perintah anchor dengan
“</a>,” atau sisa halaman Web akan
terhubung dengan program e-mail.
![Page 28: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/28.jpg)
• Hyperlink yang kedua adalah situs Web
fiktif. Frase “Link To Our Salon” ditampilkan
kepada pengguna dan Anda harus
menggunakan alamat Web salon di sini.
• Link yang terakhir adalah referensi hyperlink
ke suatu tempat di halaman Web.
• Lihatlah baris 6 pada figure, perlu dicatat
bahwa baris ini adalah titik referensi yang
bernama dalam halaman Web tersebut;
namanya adalah “top_of_page”.
![Page 29: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/29.jpg)
• Baris 67 membuah hyperlink dengan point
referensi yang bernama tadi. Karakter “#”
pada referensi hyperlink “# top_of_page”
memberitahu browser Web bahwa titik
hyperlink berada di dalam halaman Web.
• Dua baris terakhir pada figur berisikan
perintah “</body>” dan “</html>”. Penting
bagi anda untuk mengakhiri dengan dua
perintah HTML tersebut sehingga browser
Web dapat menerjemahkan halaman Web
dengan benar.
![Page 30: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/30.jpg)
Menyimpan Contoh
• Simpanlah dokumen ini sebagai file HTML.
• Default dokumen ini di Notepad adalah
dokumen teks dan ekstensi file.txt akan
ditambahkan secara otomatis pada nama file,
jika file di simpan dalam bentuk “teks”
browser Web tidak akan menerjemahkan
dokumen teks.
• Pilihlah “File” diikuti “Save As”
![Page 31: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/31.jpg)
• Masukan nama file seperti “Maheva
Salon.htm” tetapi tanpa tanda kutip. Figur
menunjukan bahwa jenis file yang dipilih
(dengan kata lain”Save As Type”) haruslah
“All File” dengan pengodean “ANSI”.
• Jika Anda tidak memilih “ All Files” sebagai
jenis file , halaman Web tersebut tidak akan
bekerja, dan lebih parah lagi, ekstensi “.txt”
akan ditambahkan diakhir nama file Anda.
![Page 32: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/32.jpg)
Melihat Halaman Web
• Jika Anda ingin melihat halaman Web tidak
perlu menutup program Web, karena program
ini dapat tetap terbuka ketika Anda melihat
file dengan browser Web.
• Bukalah browser Web dan pilihlah perintah
“File” diikuti subperintah “Open”
• Ketikkan nama file atau “Browse” untuk
menemukannya dan klik tombol “Ok”, maka
halaman Web Anda akan muncul pada
browser lain.
![Page 33: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/33.jpg)
• Jika perlu melakukan perbaikan, pilihlah
editor Notepad lagi.
• Editlah kode HTML dan simpanlah dokumen
tersebut kembali dengan jenis file yaitu “All
Files” .
• Buka kembali browser Web dan pilihlah
perintah “View” diikuti subperintah
“Refresh” .
• Ulangi proses ini hingga Anda merasa puas
dengan halaman Web Anda.
![Page 34: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/34.jpg)
KELEBIHAN DAN KELEMAHAN PENGGUNAAN
NOTEPAD
• Apa yang Anda lihat pada tampilan halaman
Web bukanlah yang digunakan oleh browser
Web untuk membuat halaman tersebut.
• HTML cukup mudah dipelajari, tetapi
pembuatan kodenya bisa jadi amat
kesalahan pengetikan dapat menghasilkan
efek yang salah.
• Selain itu, kekuatan manajer terletak pada
bakat bisnisnya, dan bukan pada keahlian
membuat kode
![Page 35: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/35.jpg)
HTML.
• Kelemahan membuat halaman Web dengan
editor teks seperti Notepad adalah keharusan
untuk mempelajari perintah-perintah HTML
dan proses pembuatan kode.
• Meskipun sederhana, pengodean di Notepad
memakan banyak waktu.
• Tetapi, ada dua keuntuangan membuat kode
HTML di Notepad: kode yang dibuat efisien
dan manajer dapat lebih memahami
bagaimana
![Page 36: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/36.jpg)
Halaman Web bekerja.
• Manajer dapat membeli halaman Web
sebagai produk jadi dari vendor atau
memberi upah kepada karyawan yang
mengerjakan halaman Web.
• Penting bagi para manajer untuk menjadi
konsumen yang tahu selama proses
penyusunan halaman Web.
• Setelah membuat halaman Web, Anda
berada pada posisi yang lebih baik untuk
mengekspresikan apa yang Anda butuhkan
dari halaman Web
![Page 37: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/37.jpg)
dan mengetahui apakah permintaan Anda
sederhana atau kompleks.
![Page 38: Proyek 3 proyek web html menggunakan notepad](https://reader035.vdocuments.site/reader035/viewer/2022062319/55863122d8b42ac54a8b5027/html5/thumbnails/38.jpg)
TERIMA KASIH