Dokumen tersebut memberikan penjelasan tentang cara membuat halaman web sederhana menggunakan notepad, meliputi langkah-langkah pembuatan kode HTML dasar, penyimpanan file, dan pengelolaan elemen-elemennya.

1. PROYEK WEB/HTML
MENGGUNAKAN NOTEPAD

2.  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.

3. 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.

4. 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 :

5.  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.

6. 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.

7.  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)

8. 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.

9.  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 masing-
masing sel.

10. Dokumen notepad untuk membuat
contoh halaman web

11. 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.

12. 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

13. 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.

14. Figur 3.4 jenis dan pengkodean
“save as”

15. 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.

16. Jenis kelebihan dan kelemahan
notepad

17. Langkah-Langkah pembuatannya
adalah sebagai berikut :
1. Dalam pembuatan file
HTML, kita harus
mengawalinya dengan tag
<HTML> dan diakhiri
dengan tag </HTML>.

18.  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>.

19.  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>.

20. 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.

21.  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.

22.  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>.

23.  Hasil dari langkah 5 dan 6 akan terlihat sebagai
berikut :

24.  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.

25. 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 :

26.  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.

27. 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.