SIM 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

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 mailtoJohnDoe@company.com.
Segmen mailto: memerintahkan browser
Web untuk mebuat link dengan peranti
lunak komputer dan memasukkan
JohnDoe@company.com 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.

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

1) Keharusan untuk mempelajari perintah-
perintah HTML dan proses pembuatan
kode.
2) 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.

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

SIM Proyek 3

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (6)

Similar to SIM Proyek 3

Similar to SIM Proyek 3 (20)

More from Muhammad Fadli. SE,.

More from Muhammad Fadli. SE,. (20)

SIM Proyek 3