Proyek 3

KELOMPOK III : Endah Suharti (021109014) Rika Darmawati (021109016) Ernawati (021109030) Rositi (021109037) III-A MANAJEMEN

Memahami kelebihan dan kelemahan penyusun halaman Web menggunakan editor teks Notepad. Mampu membuat sebuah halaman Web dasar. Mengetahui bagaimana mengontrol format kata-kata dan gambar pada halaman Web. Mengetahui bagaimana membuat tabel dan gambar pada sebuah halaman Web. Mengetahui bagaimana cara membuat link ke halaman Web, email, bagian-bagian lain halaman Web.

Dokumen HTML terdiri atas 2 bagian yaitu bagian kepala dan bagian tubuh. 1. BAGIAN KEPALA Memberikan informasi mengenai piranti lunak browser (penjelajah) Web. Informasinya mencakup: - Judul halaman Web ( ditampilkan paling atas pada baris biru di browser Web diatas informasi halaman Web itu sendiri). - Catatan mengenai penulis halaman tersebut. - Kata kunci yang akan berguna dalam pencarian web

Memberi tahu apa yang akan dilihat oleh pengguna di layar, berisikan bagian yang sebagian besar orang kira merupakan halaman Web. Mencakup gambar, tabel, daftar dan link. Pada bagian tubuh juga terdapat perintah-perintah HTML serta teks dan gambar sebenarnya yang akan ditampilkan pada halaman Web.

Dokumen Notepad dapat digunakan untuk membuat halaman Web . Hal-hal yang perlu diperhatikan dalam membuat dokumen Notepad, diantaranya : Dalam membuat dokumen Notepad maka Anda perlu membuat instruksi-instruksi yang akan selalu mengarahkan Anda kepada perintah dan subperintah yang mencapai efek yang diinginkan. Tetapi perlu dicatat bahwa terdapat ikon yang dapat melakukan aktivitas yang sama dengan satu klik mouse.

Jangan mencoba untuk melihat dokumen tersebut menggunakan browser Web hingga Anda telah menyelesaikan keseluruhan instruksi-instruksi. HTML mengharuskan perintah awal dan akhir, misalnya “<html>“ dan “</html>”. Dalam HTML, perintah dapat berbentuk huruf besar ataupun huruf kecil sehingga tidak masalah jika Anda memasukkan kode HTML dalam huruf besar ataupun huruf kecil.

Membuat tabel di HTML memang sederhana, tetapi membutuhkan banyak ketelitian. Anda bukan saja harus menentukan awal dan akhir tabel, tetapi juga masing-masing baris dan masing-masing sel data. Anda harus ingat untuk memulai dan mengakhiri masing-masing sel data, baris dan tabel itu sendiri. Melupakan salah satu akhiran saja dapat menyebabkan browser Web mencoba membetulkan kesalahan Anda, dan hasilnya dapat sulit untuk ditebak. Jadi berhati-hatilah ketika anda memasukkan kode HTML ke dalam dokumen Notepad.

Mulailah dengan membuka Notepad dan membuat dokumen baru. Klik Start dan pilih Programs . Kemudian klik Accessories , kemudian pilihan program Notepad akan muncul. (Disini kita akan membuat seperti contoh di buku paket MIS (McLeod &P.Schell)) Ketik baris 1 hingga 5 pada Figur P3.2 dalam dokumen Notepad. Jangan mengetikkan nomor baris, nomor itu hanya untuk referensi. Baris 1 hingga 5 menentukan judul halaman Web dan memulai bagian tubuh kode HTML.

Baris 6 adalah penentu tempat, yaitu tempat di halaman Web di mana kursor akan ditempatkan. Baris 7 berisikan HTML untuk memulai paragraf yang akan disejajarkan di bagian tengah halaman Web. Baris 8, ukuran huruf diperbesar melalui 3 tahapan seperti memilih 3 opsi menurun pada menu drop down . Pada baris 12, kita menggunakan perintah line break (“< br>”) untuk memasukkan satu baris kosong tambahan.

Baris 18 memulai tabel; perlu dicata bahwa perintah tersebut juga dapat membuat garis di sekitar sel tabel. Baris 19 memberitahu HTML untuk memulai sebuah baris. Baris 20 hingga 23 membuat empat sel data yang masing-masing mewakili judul kolom. Gambar bukanlah bagian dari kode HTML, tetapi dipanggil dengan perintah “ image” . “Img” adalah singkatan untuk image , dan “src” adalah singkatan untuk source file (file sumber) yang berisikan gambar tersebut.

Baris 44 membuat paragraf yang terletak di tengah halaman Web. Baris 46 menonaktifkan perataan paragraf sehingga perataan akan kembali seperti semula, yaitu rata kiri. Daftar berurutan Why Order From Us ditujukan pada baris 47 hingga 51. Baris ini dimulai dengan “<ol> Why Order From Us?” sebagai judul daftar.

Tiga hal terakhir yang ada pada Figur P3.1 adalah link . Dua link yang pertama sejajar dengan bagian kanan halaman Web. Baris 52 dan 54 adalah perintah awal dan akhir yang menyebabkan paragraf tersebut sejajar ke bagian kanan. Hyperlink yang pertama (baris 53) adalah [email_address] . Segmen mailto: memerintahkan browser Web untuk mebuat link dengan peranti lunak komputer dan memasukkan [email_address] sebagai alamat penerima email.

Hyperlink kedua adalah situs Web fiktif. Frase “Link To My School” ditampilkan kepad pengguna, dan Anda harus menggunakan alamat Web sekolah Anda di sini. Sebagai contoh, situs Web untuk University of North Carolina Wilmington adalah HTTP://WWW.UNCW.EDU . Jangan lupa untuk menggunakan seluruh alamat Web, termasuk http://. Jika Anda meninggalkan http://, maka link tesebut tidak akan bekerja. Anda dapat juga melihat bahwa link ini juga bertempat di sebelah kanan halaman Web.

Link yang terakhir adalah referensi hyperlink ke suatu tempat di halaman Web. Lihatlah baris 6 pada Figur P3.2. Perlu dicatat bahwa baris ini adalah titik referensi yang bernama dalam halaman Web tersebut; namanya dalah “top_of_page”. Baris 59 membuat hyperlink dengan poin referensi yang bernama tadi. Karakter “#” pada referensi hyperlink ”#top_of-page” memberitahu browser Web bahwa titik hyperlink berada dalam halaman Web.

Dua baris terakhir pada Figur P3.2 berisikan perintah “</body>” dan </html>.” Penting bagi Anda untuk mengakhiri dengan dua perintah HTML tersebut sehingga browser Web dapat menerjemahkan halaman Web dengan benar.

Figur P3.2 Dokumen Notepad untuk membuat contoh halaman Web

Anda harus menyimpan 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 tersebut disimpan dalam bentuk “teks“. Browser Web tidak akan menerjemahkan dokumen teks. Pilihlah “File” diikuti “Save As” dan Figur P3.3 akan muncul.

Figur P3.3 Menyimpan File HTML

Masukan nama file seperti “University Pizza.htm,” tapi tanpa tanda kutip. Figur P3.4 menunjukan bahwa jenis file yang dipilih (dengan kata lain “ Save As Type” ) haruslah “All Files“ 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 di akhir nama file Anda.

Figur P3.4 Jenis dan Pengodean “Save As”

Setelah halaman Web disimpan, Anda dapat melihatnya untuk memeriksa apakah halaman tersebut bekerja dengan baik. Anda tidak perlu menutup program Notepad; 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”. Halaman Web anda akan muncul pada browser lain.

Jika Anda perlu membuat beberapa perbaikan, pilihlah editor Notepad lagi. Editlah kode HTML dan simpanlah dokumen tersebut. Setiap kali Anda menyimpan file HTML menggunakan Notepad amat penting bagi Anda untuk memastikan bahwa jenis file adalah “All Files” . Buka lagi browser Web dan pilihlah perintah “View” diikuti subperintah “ Refresh”. Ulangi proses ini hingga Anda merasa puas dengan halaman Web Anda.

Figur P3.1 Contoh yang sudah jadi

HTML cukup mudah dipelajari, tetapi pembuatan kodenya bisa jadi amat menyulitkan dan kesalahan pengetikan dapat menghasilkan efek yang salah. Selain itu, kekuatan manajer terletak pada bakat bisnisnya, dan bukan pada keahlian membuat kode HTML.

Kode yang dibuat efisien. Manajer dapat lebih memahami bagaimana halaman Web bekerja.

Keharusan untuk mempelajari perintah-perintah HTML dan proses pembuatan kode. Pengodean di Notepad memakan banyak waktu.

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.

Sebutkan dan jelaskan bagian-bagian dari dokumen HTML ! Sebutkan kelebihan dan kelemahan dari penggunaan Notepad ?

Proyek 3

More Related Content

What's hot

Viewers also liked

Similar to Proyek 3

More from melindasutrisnawati

Proyek 3