Embed Size (px)
DESCRIPTION
Citation preview
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
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
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.
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.
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.
• 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
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
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.
• 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.
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.
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.
• 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.
• 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
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.
• 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).
• 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
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.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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].”
• 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.
• 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”.
• 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.
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”
• 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.
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.
• 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.
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
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
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
dan mengetahui apakah permintaan Anda
sederhana atau kompleks.
TERIMA KASIH
