Embed Size (px)
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.
