proyek 3 web/html menggunakan notepad

SISTEM INFORMASI MANAJEMEN
PROYEK 3 WEB/HTML
MENGGUNAKAN NOTEPAD
 NAMA KELOMPOK
 Iie Kurniasih
 Siti Nuraini
 Yulanda
(021110044 )
( 021110002 )
(021110042)
 Tujuan belajar
 Memahami Kelebihan Dan Kelemahan
Penyusunan Halaman Web Menggunakan
Editor Text Notepad.
 Mampu Membuat Halaman Web Dasar
 Mengetahui Bagaimana Mengontrol Format
Kata-kata Dan Halaman Web.
 Mengetahui
Bagaimana Cara Membuat
Gambar,table, Pada Sebuah Halaman Web
PENDAHULUAN
 Proyek ini akan menunjukan bagaimana cara
menggunakan
editor
notepad
untuk
membuat suatu halaman web. Dan juga
dapat membuat halaman web yang sama,
tujuannya untuk membandingkan dua
pendekatan yang berbeda. Dan proyek ini
dapat
memahami
perbedaan
antara
menggunakan font page dengan notepad
untuk membuat halaman web. Dan
memberikan tekhnik serta konsep yang
dibutuhkan untuk membuat halaman web di
notepad.
Mengenal HTML (hyper text mark
up language)
 HTML merupakan singkatan dari hyper text
mark up language yang berfungsi untuk
menampilkan informasi yang akan kita tampilkan
ke dalam website atau halaman web kita. HTML
dapat menampilkan informasi dalam bentuk
hyper text.
Sejarah dan Dasar-dasar HTML
(Hypertext Markup Language)
menurut kevin claudio
 HTML (Hypertext Markup Language) merupakan
bahasa yang digunakan untuk membuat website.
Menggunakan tag untuk mendeklarasikan sesuatu
dan tag tersebut tidak ditampilkan tetapi tag
tersebut memberi tahu browser bagaimana cara
menampilkan dokumen website. Serta dapat saling
berhubungan dengan dokumen HTML lain yang
dikenal dengan istilah link, dan diantaranya yaitu :
 Contoh halaman web disini adalah penjelasan
tentang produk untuk sebuah restoran pizza
sehingga seseorang yang melihat internet dapat
melihat apa yang ditawarkan oleh restoran
tersebut. Contoh ini berisikan standar fitur web
yang tampil pada hampir semua halaman
web,yaitu daftar,gambar,link, dan tabel.
Contohnya dengan nama perusahaan
“University Pizza” yang ditampilkan secara jelas
di bagian tengah atas halaman web dengan
huruf merah besar.yang diikuti penandaan
sebelum masing-masing lokasi.
Bagian-Bagian Dari Dokumen
HTML
 Dokumen Html terdiri atas 2 bagian. Bagian
“kepala” memberikan informasi mengenal
peranti lunak browser (penjelajah)web.
 Bagian “tubuh” memberitahukan apa yang
akan dilihat oleh pengguna di layar. Informasi
pada bagian kepala mencangkup judul
halaman web. Judul ini ditampilkan paling
atas pada baris biru di browser web. Kata
kunci yang akan berguna dalam pencarian
web.
 Dan bagian “tubuh” berisikan bagian yang
sebagian besar orang kira merupakan halaman
web, gambar,tabel,daftar,dan link. Pada bagian
tubuh tertulis perintah-perintah Html. (yang
diwakili kata-kata dalam kurung). Serta teks dan
gambar yang akan ditampilkan dalam web. Dan
tersedia Html yang berguna.2k Comunications
memberikan serangkaian tutorial dan intruksi
Html.(www.2kweb.net/html tutorial),
w3Schools(www.w3SCHOOLS.COM/HTML)
Membuat Dokumen Notepad
 Mulailah mem dan buka notepad dan
membuat dokumen notepad.
 Klik perintah “start” dan pilihlah sub perintah
“Programs”, maka program notepad akan
muncul dalam daftar.
 Atau mengklik subperintah “Accessories”
sebelum pilihan notepad muncul.
 Dalam membuat tabel di Html memang
sederhana,
tapi
membutuhkan
banyak
ketelitian. Bukan saja menentukan awal dan
akhir pada tabel, tetapi juga masing-masing
baris dan masing” data data. Jika perintah
bertuliskan “<table border =10>” akan
menghasilkan garis tebal di sekeliling masingmasing sel.
Dokumen notepad untuk
membuat contoh halaman web
Hyperlink yang kedua adalah situs web
fiktif.Frase”Link To My School” yang
ditampilkan kepada pengguna.
Link yang terakhir adalah referensi
hyperlink ke suatu tempat halaman web.
Langkah –Langkah Cara Menyimpan
Doc.HTML
 a. Klik Start-Program-Accessoris-Notepad
 b. Setelah berada pada editor notepad lengkapi
struktur umum HTML yang ada di jawaban soal
no 3
 c. simpan file tersebut dengan cara, klik menu
File-Save as (pada kolom file name beri nama
file, sedangkan pada kolom save as type cari dan
klik all file)-save
 d. untuk membukanya, aktifkan internet explorer
lalu tekan tombol F5 pada keyboard
Melihat halaman web
 Setelah halaman web disimpan, anda dapat
melihatnya
untuk
memeriksa
apakah
halaman tersebut bekerja dengan baik. Dan
tidak perlu menutup program notepad.
Bukalah
browser
web
dan
pilihlah
subperintah
“file”
diikuti
subperintah
“open”ketikan nama “file” untuk menemukan
klik OK.maka halaman web anda akan
muncul pada browser lain.
Figur 3.4 jenis dan
pengkodean “save as”
Kelebihan dan kelemahan
pengguna notepad
 Kelemahan membuat halaman web dengan
editor teks seperti notepad adalah keharusan
untuk mempelajari perintah-perintah HTML
dan proses pembuatan kode HTML.
Meskipun sederhana pengkodean di notepad
memakan banyak waktu. Tetapi ada dua
keuntungan membuat kode notepad yaitu
kode yang dibuat efesien, dan manajer dapat
lebih memahami bagaimana halaman web
bekerja.
Jenis kelebihan dan
kelemahan notepad
Langkah-Langkah pembuatannya
adalah sebagai berikut :
1. Dalam pembuatan file
HTML,
kita
harus
mengawalinya dengan tag
<HTML> dan diakhiri dengan
tag </HTML>.
 2. Setelah diawali dengan tag <HTML>, lalu kita
tuliskan tag <HEAD> yang mana tag ini
menandakan bahwa teks beserta tag-tag
pengaturannya yang berada didalam tag
<HEAD> ini akan menjadi bagian “kepala” dari
file HTML yang akan kita buat. Dan jangan lupa
tag <HEAD> ini diakhiri dengan tag </HEAD>.
 3. Dalam pemecahan masalah yang saya buat disini,
didalam tag <HEAD> letakkan tag <TITLE> yang
berguna menampilkan nama homepage atau
apapun teks yang kita letakkan didalam tag
<TITLE> ini sehingga akan terlihat di bagian Titlebar
browser sebagai berikut :
 Dan jangan lupa mengakhiri tag ini dengan tag
</TITLE>.
4.
Berikutnya
adalah
membuat bagian “tubuh” file
HTML yang akan kita buat.
Dalam membuat bagian ini
menggunakan tag <BODY>
sebagai tag pembukanya dan
diakhiri dengan tag </BODY>
sebagai penutupnya.
 5. Dalam pemecahan masalah yang saya buat
disini, didalam tag <BODY> saya gunakan tag
<P> yang berguna untuk pembuatan paragraph.
Dalam container tag <P> ini saya letakkan
komentar untuk pengaturan perataan paragraph
yaitu tag ALIGN dan diikuti dengan “CENTER”
sebagai pengaturannya untuk perataan tengah.
 6. Kemudian di dalam tag <P> juga menambahkan
tag <FONT> untuk pengaturan font dan saya
menambahkan komentar yang berupa tag FACE
untuk mengatur bentuk font yang diinginkan dan
diikuti dengan “TAHOMA” sebagai bentuk huruf
yang sesuai dengan masalah. Lalu ketik teks yang
akan kita tampilkan dalam homepage kita setelah
tag <FONT> dan diakhiri dengan tag </FONT> dan
saya tambah tag <B> sebelum dan sesudah teks tadi
saya tambah tag </B> agar teks tersebut tertampil
dengan berhuruf tebal (bold). Tag <P> yang saya
tulis diawal tadi harus juga diakhiri dengan tag </P>.
 Hasil dari langkah 5 dan 6 akan terlihat sebagai
berikut :
 Catatan Penting :
 Dalam mengetikan nama file HTML anda, harus
menggunakan huruf kecil dan jangan menggunakan
spasi.
 Jika ada kata terpisah dalam memberi nama file,
sebaiknya menggunakan tanda strip ,atau strip
bawah
 Setiap membuat halaman Web pertama kali,
simpanlah file tersebut dengan nama “index.html”
selanjutnya bisa memakai nama lain sesuai
keinginan anda seperti “about-me.html” atau
“contact_us.html”.
 Sebaiknya gunakan Notpad, karena akan
memudahkan anda meng Edit lebih cepat tag-tag
HTML daripada Notepad biasa.
Elemen HTML
 Dokumen HTML disusun oleh elemen-elemen
atau komponen dasar HTML. Untuk menandai
berbagai elemen dalam suatu dokumen HTML,
digunakan tag. Tag adalah kode yang digunakan
untuk me-mark-up (memoles) teks ASCII. Setiap
tag memiliki fungsi sendiri dan selalu diawali
dengan tanda '<' diakhiri dengan tanda '>'. Pada
umumnya sebuah tag mempunyai pasangan
penutup, gunanya agar teks ASCII yang dipoles
dapat diketahui batas-batasnya. Tag penutup
selalu diawali dengan tanda ''. Format
penulisannya adalah sebagai berikut :
 HTML dan hal-hal yang berkaitan dengan
website distandarisasi oleh sebuah badan yang
disebut World Wide Web Consortium (W3C).
Standard terbaru, konsep dan proposal
mengenai starndarisasi web dapat dilihat di
http://www.w3.org. Standar untuk HTML terbaru
adalah HTML 4.0 yang telah didukung oleh
bermacam-macam browser seperti Microsoft
Internet Explorer, NetsHTML dibuat oleh Tim
Berners-Lee ketika masih bekerja untuk CERN
dan dipopulerkan pertama kali oleh browser
Mosaic.
Mendesain HTML dapat dilakukan
dengan dua cara:
 1. Menggunakan HTML Editor, seperti Microsoft
FrontPage, Adobe Dreamweaver, dan lain-lain.
Kalian juga dapat menggunakan Editor NotePad
yang telah tersedia di windows komputer kalian.
 2. Dengan cara menuliskan sendiri secara
manual satu persatu tag-tag HTML ke dalam
dokumen HTML.
Daftar Pustaka
McLeod,Jr,Raymond ; Schell George P. 2008.sistem informasi
manajemen edisi sepuluh.jakarta:salemba empat
Sekian presentasi dari
proyek 3
Terima kasih