Proyek 3 web html menggunakan notepad

1,248
-1

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,248
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Proyek 3 web html menggunakan notepad

  1. 1. Proyek Web/HTML Menggunakan NotepadNama : 1. Hesti Hariani 0211 11 018 2. Eva Nurfitriyana 0211 11 021 3. Neng Rachmawaty LS 0211 11 023Kelas : 3A Manajemen Universitas Pakuan
  2. 2. Proyek Web/HTML Menggunakan NotepadTujuan 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
  3. 3. 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.
  4. 4. Proyek Web/HTML Menggunakan NotepadPendahuluan• Pada proyek ini, akan ditunjukkan bagaimanacara menggunakan editor teks Notepad untukmembuat sebuah halaman Web.• Proyek ini menampilkan contoh tahap demitahap yang menggambarkan berbagai teknikdan konsep yang dibutuhkan untuk membuathalaman Web di Notepad.
  5. 5. CONTOH• Pada contoh ini, kita akan membuat dokumenNotepad yang akan disimpan dalam bentukHypertext Markup Language (HTML) sehingga dapatdigunakan sebagai halaman Web.• Contoh halaman Web di sini adalah penjelasanpelayanan jasa yang ditawarkan sebuah salonkhusus wanita, sehingga seseorang yang melihat-lihat internet dapat melihat apa yang ditawarkansalon tersebut.
  6. 6. • Contoh ini berisikan seperangkat standar fitur Webyang tampil pada hampir semua halamanWeb, yaitu daftar, gambar, link, dan tabel.• Perlu dicatat bahwa presentasi dan pengaturaninformasi pada halaman Web amatlah penting.• Nama perusahaan tersebut adalah “Maheva Salon”ditampilkan secara jelas di bagian tengah atashalaman Web dengan huruf biru besar.• Ini diikuti dengan sebuah daftar penanda sebelum
  7. 7. masing-masing lokasi.• Tampilan seperti ini adalah tampilan daftar tidakberurutan yang umum yang tidak mendahulukansalah satu informasi.• Lalu, lihatlah daftar alasan yang mengikuti “WhyDo You Choose Our Salon?”, ini adalah daftar yangberurutan yang artinya informasi yang lebih pentingdituliskan terlebih dahulu.• Urutan yang biasanya digunakan menggunakan
  8. 8. angka, tetapi angka romawi dan huruf alfabet dapatjuga digunakan. Demikian juga halnya dengancakram (lingkaran kecil), penanda ini biasadigunakan pada daftar yang tidak berurutan, tetapibentuk lain juga bisa digunakan.• Setelah lokasi tempat pelayanan jasasalon, sebuah tabel ditampilkan di mana sejumlahtreatment beserta harga-harganya tertulis. Tabeltersebut memiliki dua kolom dan tujuh baris.
  9. 9. • Gambar salon merupakan gambar yang diambildari aplikasi lain. Gambar ini terletak di tengahhalaman Web.• Halaman Web ini memiliki tiga link. Yangpertama, “Contact Us”, adalah link untukmengirimkan e-mail. “Link To Our Salon” adalahhyperlink ke halaman Web Salon tersebut. Link yangterakhir, “Go to Top of Page”, adalah alat navigasiuntuk halaman Web.
  10. 10. Bagian-bagian dari Dokumen HTML• Dokumen HTML terdiri atas dua bagian.• Bagian “kepala” memberikan informasi mengenaiperanti lunak browser (penjelajah) Web, yangmencakup judul halaman Web.• Bagian “tubuh” memberitahu apa yang akandilihat oleh pengguna di layar, berisikan bagian yangsebagian besar orang kira merupakan halamanWeb.
  11. 11. Membuat Dokumen Notepad• Mulailah dengan membuka Notepad dan membuatdokumen baru. Klik perintah “start” (di bagianbawah kiri layar) dan pilihlah subperintah“programs”. Tergantung pada versi Windows yangAnda miliki, program Notepad akan muncul di dalamdaftar atau Anda mungkin harus mengkliksubperintah “Accessories” sebelum pilihan programNotepad muncul.
  12. 12. • ketik baris 1 hingga 5 seperti pada figur ke dalamdokumen Notepad.• HTML mengharuskan perintah awal dan akhirmisalnya “<html>” dan “</html>. Jika anda hanyamengetikan sebagian dari contoh dan mencobamelihatnya sebagai halaman Web, browser tersebuttidak akan menemukan perintah akhir, misalnya</html>. Browser tersebut akan mencoba untuk“memperbaiki” kesalahan ini, yang akanmenghasilkan halaman Web yang amat berbeda.
  13. 13. • Baris 1 s/d 5 menentukan judul halaman Webyaitu “Maheva Salon” dan memulai bagian tubuhkode HTML.• Baris 6 adalah penentu tempat, yaitu tempat dihalaman Web di mana kursor akan ditempatkan.Baris “<a name= “top-of-page”></a> adalahjangkar. Kita mengetahui hal ini karena terdapatkurung awal diikuti oleh perintah “a”, yang berarti“anchor” (jangkar), yaitu tempat di dalam dokumen
  14. 14. atau pada dokumen HTML lain di mana penggunaakan diarahkan melalui sebuah hyperlink .• Bagian pertama contoh kita adalah untukmenempatkan “Maheva Salon” di bagian tengahatas halaman Web dengan huruf biru besar.• Baris 7 berisikan HTML untuk memulai paragraf(yang dimulai dengan perintah “p”) yang akandisejajarkan di bagian tengah halaman Web.
  15. 15. • Pada baris 8, ukuran huruf diperbesar melalui tigatahapan, seperti memilih tiga opsi menurun padamenu drop-down. Anda dapat melihat bahwaperintah font juga mengubah warna “Maheva Salon”menjadi biru. Perubahan-perubahan ini tidak haruske semua teks pada halaman tersebut, oleh karenaitu kita harus mengembalikan perubahan inimenjadi bentuk huruf awal (baris 10) dan keperataan paragraf awal (baris 11).
  16. 16. • Selanjutnya kita ingin memberikan daftar lokasi dimana Salon Maheva tersebut berada. Sebuah bariskosong disisakan setelah satu paragraf, tetapi padabaris 12 kita menggunakan perintah “line break”(“<br>”) untuk memasukan satu baris kosongtambahan.• Kita membuat daftar yang tidak beraturan padabaris 13 dan memberinya judul “Locations”.Kemudian kita membuat daftar berisikan 3 halBogor Tread Mall, SuperMall Cianjur dan Lodaya
  17. 17. dengan menggunakan perintah “<li>”. Anda dapatmelihat bahwa perintah “unordered list” dimatikanpada baris 17.• Sekarang kita siap untuk membuat tabel berisikanharga-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 letakkanditengah.
  18. 18. • Sel tabel data ditandai dengan “td” seperti yangditunjukan pada baris 20• Baris 18 membuat tabel; perlu dicatat bahwaperintah tersebut juga dapat membuat garis disekitar sel tabel. Jika perintah bertuliskan “<tableborder=1>” maka sebuah pembatas tipis akandihasilkan; “<table border=10>” akanmenghasilkan garis tebal di sekeliling masing-masing sel.
  19. 19. • Lihatlah baris 19 pada figur. Ini adalah perintahuntuk memulai baris baru di dalam tabel. Baris 18memulai tabel, tetapi baris 19 memberitahu HTMLuntuk memulai sebuah baris.• Baris 20 s/d 21 membuat 2 sel data yang masing-masing mewakili judul kolom. Bisa dilihat dari figurbahwa judul-judul ini berformat huruf miring.Perintah “<i>” dan “</i>” di sekeliling kata-katamembuat kata tersebut ditampilkan dalam hurufmiring. Isi sel tabel berada di tengah.
  20. 20. • Gambar bukanlah bagian dari kode HTML, tetapidipanggil dengan perintah “image”.• Pada figur, file sumber yang berisikan gambarseorang pegawai salon yang sedang melayanipelanggannya adalah “hair_salon_image.gif”, danbertempat pada direktori yang sama dengan fileHTML. “Img” adalah singkatan untuk image, dan“src” adalah singkatan untuk source file (filesumber) yang berisikan gambar tersebut.
  21. 21. • Baris 52 membuat paragraf terletak di tengahhalaman Web.• Baris 53 memberitahu HTML untuk menggunakanfile “hair_salon_image.gif” tanpa pembatas disekeliling gambar; dengan kata lain, “border=0”.Baris 54 menonaktifkan perataan paragraf sehinggaperataan akan kembali seperti semula, yaitu ratakiri.
  22. 22. • Daftar berurutan “Why Do You Choose OurSalon?” ditunjukkan pada baris 55 s/d 59.• Baris ini dimulai dengan “<ol>Why Do You ChooseOur Salon?” sebagai judul daftar. Daftar yangberurutan (yang dikodekan “ol”) menggunakanangka untuk menandakan urutan poin.• 3 hal terakhir yang ada pada figur adalah link. 2link yang pertama sejajar dengan bagian tengahkanan halaman Web.
  23. 23. • Baris 60 dan 62 adalah perintah awal dan akhiryang menyebabkan paragraf tersebut sejajar kebagian kanan.• Sekarang kita akan membahas tiga jenis link padasitus ini : satu ke halaman Web lain, satu keprogram e-mail, dan satu ke bagian lain halamanWeb yang sedang dilihat.• Hyperlink yang pertama (baris 61) adalah“mailto:maheva.salon@yahoo.com.”
  24. 24. • Segmen “mailto :” memerintahkan browser Webuntuk membuat link dengan peranti lunakkomputer dan memasukkan“maheva.salon@yahoo.com sebagai alamatpenerima e-mail.• Frase “Contact Us” adalah satu-satunya hal yangakan dilihat pengguna pada halaman Web; perintah“anchor” tetap tidak akan terlihat. Akhiri perintahanchor dengan “</a>,” atau sisa halaman Webakan terhubung dengan program e-mail.
  25. 25. • Hyperlink yang kedua adalah situs Web fiktif. Frase“Link To Our Salon” ditampilkan kepada penggunadan Anda harus menggunakan alamat Web salon disini.• Link yang terakhir adalah referensi hyperlink kesuatu tempat di halaman Web.• Lihatlah baris 6 pada figure, perlu dicatat bahwabaris ini adalah titik referensi yang bernama dalamhalaman Web tersebut; namanya adalah“top_of_page”.
  26. 26. • Baris 67 membuah hyperlink dengan pointreferensi yang bernama tadi. Karakter “#” padareferensi hyperlink “# top_of_page” memberitahubrowser Web bahwa titik hyperlink berada di dalamhalaman Web.• Dua baris terakhir pada figur berisikan perintah“</body>” dan “</html>”. Penting bagi anda untukmengakhiri dengan dua perintah HTML tersebutsehingga browser Web dapat menerjemahkanhalaman Web dengan benar.
  27. 27. Menyimpan Contoh• Simpanlah dokumen ini sebagai file HTML.• Default dokumen ini di Notepad adalah dokumenteks dan ekstensi file.txt akan ditambahkan secaraotomatis pada nama file, jika file di simpan dalambentuk “teks” browser Web tidak akanmenerjemahkan dokumen teks.• Pilihlah “File” diikuti “Save As”
  28. 28. • Masukan nama file seperti “Maheva Salon.htm”tetapi tanpa tanda kutip. Figur menunjukan bahwajenis file yang dipilih (dengan kata lain”Save AsType”) haruslah “All File” dengan pengodean “ANSI”.• Jika Anda tidak memilih “ All Files” sebagai jenisfile , halaman Web tersebut tidak akan bekerja, danlebih parah lagi, ekstensi “.txt” akan ditambahkandiakhir nama file Anda.
  29. 29. Melihat Halaman Web• Jika Anda ingin melihat halaman Web tidak perlumenutup program Web, karena program ini dapattetap terbuka ketika Anda melihat file denganbrowser Web.• Bukalah browser Web dan pilihlah perintah “File”diikuti subperintah “Open”• Ketikkan nama file atau “Browse” untukmenemukannya dan klik tombol “Ok”, makahalaman Web Anda akan muncul pada browser lain.
  30. 30. • Jika perlu melakukan perbaikan, pilihlah editorNotepad lagi.• Editlah kode HTML dan simpanlah dokumentersebut kembali dengan jenis file yaitu “All Files” .• Buka kembali browser Web dan pilihlah perintah“View” diikuti subperintah “Refresh” .• Ulangi proses ini hingga Anda merasa puasdengan halaman Web Anda.
  31. 31. KELEBIHAN DAN KELEMAHAN PENGGUNAANNOTEPAD• Apa yang Anda lihat pada tampilan halaman Webbukanlah yang digunakan oleh browser Web untukmembuat halaman tersebut.• HTML cukup mudah dipelajari, tetapi pembuatankodenya bisa jadi amat kesalahan pengetikan dapatmenghasilkan efek yang salah.• Selain itu, kekuatan manajer terletak pada bakatbisnisnya, dan bukan pada keahlian membuat kode
  32. 32. HTML.• Kelemahan membuat halaman Web dengan editorteks seperti Notepad adalah keharusan untukmempelajari perintah-perintah HTML dan prosespembuatan kode.• Meskipun sederhana, pengodean di Notepadmemakan banyak waktu.• Tetapi, ada dua keuntuangan membuat kodeHTML di Notepad: kode yang dibuat efisien danmanajer dapat lebih memahami bagaimana
  33. 33. Halaman Web bekerja.• Manajer dapat membeli halaman Web sebagaiproduk jadi dari vendor atau memberi upah kepadakaryawan yang mengerjakan halaman Web.• Penting bagi para manajer untuk menjadikonsumen yang tahu selama proses penyusunanhalaman Web.• Setelah membuat halaman Web, Anda beradapada posisi yang lebih baik untuk mengekspresikanapa yang Anda butuhkan dari halaman Web
  34. 34. dan mengetahui apakah permintaan Andasederhana atau kompleks.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×