Minggu, 23 September 2012

Membuat program akademik sederhana menggunakan javascript

Lanjutan dari tulisan yang ini dan yang ini yang membahas tentang program sederhana menggunakan program java script saya sekarang akan membahas bagaimana cara membuat program akademik sederhana menggunakan javascript juga. Dan pada script yang saya buat ini juga membahas masalah prosedur dan IF. bagi anda yang sedang belajar javascript (sama dengan saya). mungkin tutorial ini bisa bermanfaat
—————code dimulai dari sini—————————-
<html>
<title>program akademik menggunakan javascipt</title>
<SCRIPT LANGUAGE=”JavaScript”>
function kosong()
{
form.nim.focus()
form.jurusan.disabled=”true”
form.nakhir.disabled=”true”
form.ket.disabled=”true”
form.nim.value=”"
form.nama.value=”"
form.jurusan.value=”"
form.nuts.value=”"
form.nuas.value=”"
form.nakhir.value=”"
form.ket.value=”"
window.defaultStatus=”Support by www.hadi.web.id
}
function jurdarinim()
{
nim=form.nim.value
nimjur=nim.substring(3,5)
if(nimjur==”31″)
{form.jurusan.value=”MI”
}
else
if(nimjur==”51″)
{form.jurusan.value=”SI”}
else
if(nimjur==”52″)
{form.jurusan.value=”TI”}
else
if(nimjur==”53″)
{form.jurusan.value=”SK”}
else
{document.write(“Nim yang anda masukkan salah silahkan tekan tombol back untuk mengulang :::contoh yang benar 08.52.1007:::”)}
}
function nilai()
{
nuts=form.nuts.value
nuas=form.nuas.value
nakhir=(eval(nuts)*0.4)+(eval(nuas)*0.6)
form.nakhir.value=nakhir
if (nakhir>55)
form.ket.value=”LULUS”
else
form.ket.value=”GAGAL”
}
</SCRIPT>
<body onload=kosong()>
<font size=6 color=”blue”>Program Akademik</font>
<hr>
Jika sudah mengisi textbox Silahkan tekan tombol TAB yang ada di keyboard
<pre>
<FORM name=”form”>
Nim         <input type=”text” name=”nim” size=”10″ onBlur=”jurdarinim()”>
Nama        <input type=”text” name=”nama” size=”23″>
Jurusan     <input type=”text” name=”jurusan” size=”3″>
Nilai UTS   <input type=”text” name=”nuts” size=”3″>
Nilai UAS   <input type=”text” name=”nuas” size=”3″ onBlur=”nilai()” >
Nilai Akhir <input type=”text” name=”nakhir” size=”4″>
Keterangan  <input type=”text” name=”ket”>
<input type=”button” value=”                 Kosong lagi              ” onclick=”kosong()”>
Oleh: M. Hadi Lustori
</pre>
</FORM>
</body>
</html>
——————–akhir script—————————
copy code diatas kemudian buka program notepad.exe kemudian paste di program notepad tersebut. Simpan file dalam format html, caranya dibagian save as type diganti ke allfiles kemudian tambahkan .html pada nama file contohnya namafile.html kemudian buka file tersebut melalui browser

Buat WEB Sederhana Dreamweaver

Cara pembuatan Website sederhana
Pada contoh ini kita menggunakan prog dreamweaver untuk pembuatan web sederhana ini
1. Buka prog Dreamwever
2. Pilih menu create new HTML
3. Untuk membuat halaman berada tepat ditengah layar pili Align Center pada toolbar yang ada di bawah
4. Klik Icon Table pada Toolbox untuk pembuatan table
5. Isikan angka 3 untuk Row text area dan 3 pada columns text area
6. isiskan nilai 750 pada table Width atau lebar table
7. jika sudah klik Ok
8. Untuk memberi Warna pada Backgraound belakang klik tombol Page Properties pada Bar Properties
9. Lalu beri warna dengan kode #999999 kemudian klik ok
10. pilih kolom pertama baris pertama lalu pilih icon image pada tool box untuk memasukan gambar
11. pilih lokasi gambar jika gambar sudah ditemukan klik ok untuk memuat gambar.
12. Atur besar gambar dengan cara mendrag gambar.
13. setelah itu letakan pointer pada kolom 1 baris 2 lalu drag sampai kolo 1 baris 3 kemudian klik kanan dan pilih Marge Cell
14. setelah itu klik icon Flash yang ada pada toolbox, kemudian untuk memuat banner dengan animasi yang kita buat dengan format Swf caranya sama seperti kita memasukan image yaitu cari lokasi file tempat dimana kita menyimpan animasi tersebut kemudian jika sudah klik ok.
15. setela itu untuk melihat tampilannya tekan tombol f12 beri nama file halaman depan kemudian klik Yes.
16. Kemudian letakan Pointer pada kolom 2 baris pertama lalu drag sampai kolom 2 baris ketiga lalu klik kanan pilih Marge Cell (Alt+Shift+M)
17. lalu ketikan text sbb: Home|Gallery|Fasilitas|Halaman Guru|Halaman|Siswa|Profil
18. Lalu pilih kolom 3 baris pertama kemudian isikan kata pengantar.
19. kemudian untuk membuat form komentar pilih menu-Insert-Form-Text Area.
20. kemudian untuk mengatur form tersebut klik Form tersebut isikan nilai 30 untuk : Char Width dan 6 untuk Num Lines.
21. untuk menyambungkan (Link) halaman depan dengan halaman selanjutnya blok kata profi lalu pilih tombol link pada bar properties lalu pilih lokasi penyimpanan file jika sudah pilih file lalu klik ok.
Contoh lain :
Langkah membuat web design :
1. Buka Program Photoshop untuk membuat bennernya
2. Save pada satu folder
3. Lalu buat templatenya dulu dengan cara-cara berikut
4. Setelah benner selesai dibuat buka program dreamweaver
5. Buat tabel Row : 1 Cells : 1
6. W : 950 H : 248
7. Masukan benner yang telah dibuat tersebut dengan cara Common -> image -> pilih benner -> ok
8. Buat tabel Row : 2 Cells : 3 lalu hilangkan garis rownya
9. Kolom 1 berjarak 215 Kolom 2 berjarak 571 Kolom 3 berjarak 150
10. Lalu buat Tabel di kolom paling kiri dengan ketentuan Row : 3 Cells : 1
11. Dari masing-masing tabel itu tulis Home, Profil, Link terkait lalu save terlebih dahulu dengan nama templete
12. Profil di blok lalu di bagian properties->link isi dengan Profil.html lalu pilih Windows->behaviors->tekan tanda + ->Show Pop-Up menu->Continue->textnya tulis sejarah lalu tekan tanda + lagi lalu tulis bidang keahlian->ok
13. Setelah itu masukan gambar jam dengan cara insert -> media -> flash (ctrl+alt+f)
14. Lalu buat buku tamu dengan cara buat tabel Row : 4 Cells : 2
15. Pada Row 1 tulis Nama Cells 1 isi dengan text Field dengan cara Forms->text field
16. Pada Row 2 tulis Email Cells 2 isi dengan text Field dengan cara Forms->text field
17. Pada Row 3 tulis Komentar Cells isi dengan text Field dengan cara Forms->text field
18. Pada Row 4 tidak usah ditulis Cells isi dengan text Forms -> Button -> ok
19. Lalu klik button tersebut Valuenya diganti dengan nama Kirim
20. Kolom yang ditengah biarkan kosong terlebih dahulu
21. Lalu untuk kolom yang di paling kanan kita beri jajak pendapat untuk memilih pilihan yang ada dengan cara pilih Forms->Radio button
22. Setelah itu masukan kalender flash dengan cara inset->media->flash (ctrl+alt+f)
23. Lalu Save dengan nama template
24. Setelah itu baru membuat home
25. Isi di kolom tengah yang dikosongkan tadi
26. Masukan gambar foto sekolah lalu ukuranya di perkecil
27. Setelah itu ketik sambutan dari kepala sekolah
28. Lalu tittlenya diganti dengan Home-SMK Negeri 7 Jakarta
29. Lalu pilih File->Save As->File namenya di beri nama home
30. Setelah selesai membuat home buat isi profil dengan cara hapus semua isi home ganti dengan isi profil lalu tittlenya dig anti menjadi profil-SMK Negeri 7 Jakarta
31. Lalu Save As dengan nama profil
32. Setelah itu buat isi profil Sejarah lalu ganti tittlenya dengan nama Sejarah-SMK Negeri 7 Jakarta
33. Lalu Save As dengan nama Sejarah
34. Setelah itu Hapus kolom tengahnya untuk membuat isi Bidang keahlian lalu ganti tittlenya dengan nama bidang keahlian SMK Negeri 7 Jakarta
35. Lalu Save As dengan nama Bidang keahlian
36. Lalu hapus lagi kolom tengahnya untuk membuat link terkait lalu ganti tittlenya dengan nama link terkait-SMK Negeri 7 Jakarta
37. Lalu Save As dengan nama Link terkait
38. Setelah semuanya sudah di save baru mengelink dari halaman pertama ke halaman berikutnya dengan cara
39. Buka home yang tadi sudah di save lalu blok profil lalu link ke profil.html, setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di sejarah klik icon folder lalu pilih sejarah lalu ok setelah itu di bidang keahlian klik icon folder bidang keahlian lalu ok dan ok lagi lalu blok link terkait lalu link ke link terkait.html lalu di save
40. Buka profil yang tadi sudah di save lalu blok home lalu link ke home.html, setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di sejarah klik icon folder lalu pilih sejarah lalu ok setelah itu di bidang keahlian klik icon folder bidang keahlian lalu ok dan ok lagi lalu blok link terkait lalu link ke link terkait.html lalu di save
41. Buka Sejarah yang tadi sudah di save lalu blok home lalu link ke home.html, lalu blok profil lalu di link ke profil.html setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di bidang keahlian klik icon folder bidang keahlian lalu ok dan ok lagi lalu blok link terkait lalu link ke link terkait.html lalu di save
42. Buka bidang keahlian yang tadi sudah di save lalu blok home lalu link ke home.html, lalu blok profil lalu di link ke profil.html setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di sejarah klik icon folder sejarah lalu ok dan ok lagi lalu blok link terkait lalu link ke link terkait.html lalu di save
43. Buka link terkait yang tadi sudah di save lalu blok home lalu link ke home.html, setelah itu blok profil link ke profil.html setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di sejarah klik icon folder lalu pilih sejarah lalu ok setelah itu di bidang keahlian klik icon folder bidang keahlian lalu ok dan ok lagi lalu di save.
LANGKAH – LANGKAH MEMBUAT WEB YANG LAIN
DARI PROGRAM DREAMWEAVER
1. buka program dreamweaver ( START – ALL PROGRAM – MACROMEDIA – DREAMWEAVER ) pilih HTML .
( HOME PAGE )
2. klik icon TABLE pada panel ROWS masukan 1, COUMN 1 , WIDTH 600.
3. perbesar table kebawah, lalu masukan gambar homepage dengan cara INSERT – IMAGE – pilih gambar yang akan di masukan – OK , DRAG AND DROP gambar yang akan dimasukan.
4. lalu untuk isi website buat table dengan baris 5 kolom 1.
5. pada baris pertama masukan kata HOME untuk link ke home page website.
6. pada baris ke 2 masukan GALLERY untuk melihat gambar – gambar yang disimpan di website tersebut.
7. pada baris ke 3 masukan ABOUT ME untuk tempat halaman tentang anda sendiri.
8. pada baris ke 4 masukan COMMENT untuk memasukan comment dari orang lain kepada anda .
9. pada baris ke 5 buat lah search engine dengan cara di sudut atas toolbar ada pilihan COMMON ganti pilihan tersebut dengan FORMS lalu pilih TEXT FIELD – ok.
10. untuk tombol search pilih BUTTON, klik tombol tersebut lalu pilih properties pada panel button name dan value ganti menjadi search.
11. klik pada kolom tersebut pada panel properties ganti panel method dengan GET dan pada panel action masukan http://www.google.com/.
12. buat table baru 1 baris 1 kolom.
13. perbesar dan masukan apa yang anda inginkan untuk halaman utama contoh gambar , tentang anda , jam, dll.
14. setelah itu buat table kembali untuk menempatkan link ke url besar contoh yahoo, google, youtube, dll. Dengan cara masukan gambar icon perusahaan ternama tersebut deangan cara insert – image – (pilih gambar) – ok , klik pada gambar tersebut lalu buka panel properties – pada panel link masukan url website tersebut.
15. setelah semuanya telah diatur sesuai keinginan simpan halaman tersebut dengan cara klik FILE – SAVE – homepage.html – ok .
( GALLERY )
1. buat 1 halaman html gallery .
2. copy halaman homepage ke gallery, lalu hilangkan halaman utama tentang anda yang anda masukan dan ganti dengan gambar – gambar yang anda inginkan.
3. lalu save dengan nama gallery .
( ABOUT ME )
1. buat 1 halaman html .
2. copy halaman home page dan paste, hilangkan halaman utama tentang anda yang anda masukan dan ganti dengan informasi atau biodata anda
3. buat table baru dengan baris 7 kolom 2 .
4. pada baris ke 1 masukan kata nama, ke 2 alamat , ke 3 tanggal lahir , ke 4 pekerjaan , ke 5 hobi , ke 6 no telp, ke 7 e-mail. Dan isi table tersebut dengan identitas anda.
5. bila anda ingin meyimpan foto anda, buat table baru 1 baris 1 kolom . lalau masukan foto anda di table tersebut dan taruh di sebelah kanan biodata anda.
6. simpan file tersebut dengan nama about me.html.
Nama …………..
Alamat ……………
Ttl …………..
Pekerjaan …………..
Hobi …………..
No tlp ………….
e-mail. ……………
7. contoh table :
( COMMENT )
1. buat halaman baru html .
2. copy halaman home page dan paste, hilangkan halaman utama tentang anda yang anda masukan dan ganti dengan informasi atau biodata anda
3. buat 1 tabel dengan 1 baris 1 kolom .
4. buat text area di dalamnya deangan cara di sudut atas toolbar ada pilihan COMMON ganti pilihan tersebut dengan FORMS lalu pilih TEXT AREA . dan tempatkan di dalam table.
5. lalu buat button dengan cara pilih BUTTON. Dan tempat kan di dalam table.
6. simpan file tersebut dngan nama comment .html.
( LINK SEMUA HALAMAN )
1. buka semua file yang anda buat .
2. pada file comment , blok kata comment pada panel link clik icon folder lalu pilih file homepage.
3. buka file gallery , blok kata gallery pada panel link clik icon folder lalu pilih file homepage.
4. buka file comment , blok kata comment pada panel link clik icon folder lalu pilih file homepage.
5. lalu save as semua file dengan nama yang sama dengan nama sebelumnya.
6. setelah itu buka kembali semua halaman yang anda buat, buka halaman home page anda .
7. blok kata home anda pada panel link clik icon folder lalu pilih file homepage.
8. blok kata gallery anda pada panel link clik icon folder lalu pilih file gallery
9. blok kata about me anda pada panel link clik icon folder lalu pilih file about me
10. blok kata comment anda pada panel link clik icon folder lalu pilih file comment.
11. setelah itu save as kembali semua file anda .
12. sekarang buat sebuah folder dengan nama website ku
13. masukan semua file anda dan gambar atau animasi dan lagu yang anda masukan dalam website anda tersebut agar saat ditampilkan website anda bias menampilkan gambar dan animasi atau lagu anda tersebut .
14. sekarang website anda siap di jalankan .
CONTOH : Langkah – langkah membuat website sekolah
” buat background semua halaman dengan warna gray 25% (menu properties ->page properties lalu buat background dengan gray 25% -> Ok)”
1. Bukalah program dream waver –> lalu pilih HTML pada tampilan awal / pembuka ( bila terdapat tampilan pilihan
2. Lalu pilih table pada menu common ( pada menu table masukan 1 pada row 1 pada Columns lalu pada table widths masukan 600 lalu pilih OK )
3. Setelah itu klik isi table -> pada menu properties –> pilih bg (Back Ground) klik tampilan foder pada colom bg – setelah itu masukan gambar yang di inginkan sebagai banner (masukan Gambar haseo tampilannya hanya kepalanya saja taruh di sebelah kiri)
4. Masukan kata WELCOME TO MY WORLD pada table banner letaknya di center dan middle
5. Lalu tekan enter –> lalu ketik kata Home –> Gallery –> Info –> Faq (tuliskan berikut enter) “ untuk pilihan menu ”
Contoh:
- Home
- Gallery
- Info
- Faq
6. Lalu pada kolom samping kanan buat draw layer pada menu layout lalu atur dengan cara pilih pada menu properties ubah W menjadi 660px dan H 170px -> lalu masukan animasi (tampilanya kata SMK Negeri 7 Jakarta Timur Dikelilingi oleh gambar Tutwuri Handayani) Dengan ukuran 660 , 170( dengan cara pilih media pada menu common -> plugins masukan animasi yang telah di buat)
7. lalu di bawah tampilan web buat table dengan 2 Columns dan 1 Row dengan ukuran H 200 dan W disamakan dengan ukuran tampilan di atas
8. Lalu pada kolom sebelah kiri buat tulisan dengan kata –> kata
Assalamu ‘alaikum ……………………………( salam dari kepala sekolah SMK Negeri 7)
9. kolom sebelah kiri taruh foto kepala sekolah SMKN 7
10. tampilan untuk penutup web atau paling bawah taruh sponsor –> sponsor ( logo-logo) yang kamu punya contoh tutwuri handayani (wajib), vista , e-dukasi.net dll dengan cara sama seperti cara menaruh gambar ( Pilih image pada menu common lalu pilih tempat gambar yang kamu taruh).
11. dibawah tampilan sponsor tulis dengan kata created by …….. (namamu) lalu Save dengan nama Home jangan lupa untuk merubah title dengan nama Home.) (sebelumnya buat folder khusus untuk menaruh website ini)
12. Lalu buat hal baru di menu file –> new -> lalu di hal Home copy banner lalu di paste pada hal lalu untuk pilihan menu -> buat table dengan row 1 dan columns 4 -> Ok, buat ukuran H seminim mungkin dan W sejajar dengan banner.
13. lalu tulis kata Home dll dengan cara
Contih : Home || Gallery || Info || Faq
14. buat Tabel dengan rows 4 dan 2 columns ->Ok -> pada masing – masing kolom masukan gambar dengan ukuran W 300 H 120 lalu buat lah linknya dengan cara klik gambar lalu pada menu properties di pilihan link klik foldernya lalu pilih tempat gambar sempurnanya dan seterusnya.
15. lalu pada tampilan bawahnya copy paste tampilan semua sponsor dan created di hal Home lalu ubah title dengan nama Gallery dan Save dengan nama Gallery di folder Website
Home
Gallery
Info
Faq
16. buatlah hal baru lalu copy paste banner sebelumnya dan buat lah draw layer pada menu layout di bawah dengan ukuran seminim mungkin dengan tulisan Home (enter) Gallery (enter) Info (enter) Faq Contoh:
17. lalu klik draw layer lalu pada menu properties ubah overflow menjadi scroll lalu tampilan di samping kanan buat draw layer sejajarkan dengan tampilan banner lalu isi dengan animasi yang ada di hal Home setelah itu buat table dengan row 2 dan columns 2 dan ukuran H 400 dan W sama dengan ukuran di atas.
18. lalu isi dengan tulisan di bawah ini
Folder Pribadi
Cara membuat Folder Pribadi
Klik
Membantai autorun
Hancurkan Virus Autorun
Klik
Tune Computer
Proses2 Membuat Cepatkan Komputer
Klik
Hardware
Informasi Tentang Hardware
Klik
19. lalu copy paste sponsor dan created pada halaman2 sebelumnya – ubah title menjadi Info lalu save dengan nama Info di foder website
20. buat hal baru lalu copy paste banner sebelumnya lalu copy paste juga pilihan menu pada hal Gallery
21. lalu buatlah table dengan row dan columns 1 dan ukuranya sama seperti banner dengan H 200
22. buat tulisan yaitu Contoh
1. Google.com
2. Yahoo.com
3. e-dukasi.net
4. download.com
5. adobe.com
6. free-av.com
7. grisoft.com
8. baba.com
9. mail.google.com
10. mail.yahoo.com
23. link dengan nama sama seperti di atas ( pilih Form link lalu tuliskan nama link sesuai dengan yang tertulis)
24. ubah title menjadi Faq lalu save dengan nama Faq lalu modif masing – masing pilihan menu pada masing – masing halaman link dengan sesuai namaya Contoh:
Home ( Home.html )
Gallery ( Gallery.html)
Info ( Info.html )
Faq ( Faq.html )

Program Toko Buku Online Sederhana

Program Toko Buku Online Sederhana

Program ini adalah program aplikasi toko buku online yang saya buat dengan menggunakan PHP Programming, MySQL, Javascript dan CSS di sisi tampilan. Saya buat didasarkan atas tugas matakuliah Entrepreneurship yang saya jalani pada semester 6 di Universitas Komputer Indonesia. Program ini masih sangat sederhana, namun mungkin sangat bermanfaat buat pemula yang sedang belajar pemrograman web.
Toko Buku ini memiliki fasilitas sebagai berikut :
  • Halaman Pengelola Toko Buku (Admin) yang mengelola baik data buku, transaksi, dan lain sebagainya. Berikut adalah screenshoot yang saya buat.
  • Seperti layaknya toko online pada umunya, terdapat fasilitas Keranjang yang berguna untuk menyimpan item barang / buku yang hendak dibeli.
Inti dari program toko buku ini adalah setiap pengunjung yang ingin membeli buku pada toko ini mesti melakukan proses pendaftaran member. Setelah melakukan pendaftaran menjadi member, pengunjung situs ini dapat melakukan proses transaksi, seperti memasukan item buku pada keranjang buku dan sebagainya.
Untuk pengunjung yang telah terdaftar, dapat melakukan proses login untuk melakukan transaksi. Pada program ini, sementara member tidak dapat melakukan perubahan data dirinya. Namun Admin dapat melakukan perubahan data member, data buku, dan lain sebagainya.
Kurang lebih aturannya seperti keterangan diatas,,berikut adalah screenshoot toko buku ini.




Selebihnya teman-teman dapat langsung menggunakan program ini pada computer localnya, dengan mendownload program ini di akhir artikel ini.
Program ini tidak bermaksud untuk menyombongkan diri, tapi sekedar sharing aja, mungkin teman-teman yang baru belajar pemrograman web akan sangat membutuhkan contoh-contoh program nyatanya. Dulu waktu saya belajar pemrograman juga sering baca logika dari code-code program orang lain. Semoga bermanfaat ya. Oh iya,,sample program sudah saya upload via web di alamat ini http://www.tokobukubekas.co.tv {maaf hosting ‘n domain sudah tidak aktif}.
Masih banyak bug sebenarnya,,tapi lumayan bisa untuk jadi pembelajaran. Saran kritik saya terima terbuka dari teman-teman.
Download di sini :
[ program ]
[ database ]
Sebelumnya import dahulu databasenya pada computer local kamu, lalu kalau masuk ke halaman admin, masuk dengan username ‘admin’ password ‘admin’.
MAAF SAMPLE PROGRAM INI HANYA UNTUK PERCOBAAN TOKO ONLINE SEDERHANA, DISARANKAN UNTUK MELENGKAPI KEAMANAN SISTEM DAN HAL LAINNYA MENGENAI TOKO ONLINE APABILA TEMAN-TEMAN INGIN MENGIMPLEMENTASI NYATA PADA TOKO TEMAN-TEMAN.

PEMROGRAMAN WEBSITE SEDERHANA MENGGUNAKAN HTML (HYPER TEXT MARKUP LANGUAGE)

1.1. Latar Belakang
Internet merupakan salah satu wujud dari perkembangan teknologi informasi yang memberikan kemudahan bagi manusia untuk mendapatkan informasi dari berbagai belahan dunia. Informasi melalui internet ini disajikan dalam bentuk website. Sehingga penyajian informasi melalui internet berupa website tentu bukan suatu hal yang asing lagi bagi masyarakat dewasa ini.
Website cukup dikenal oleh masyarakat khususnya bagi para pengguna internet yang membutuhkan informasi secara praktis dan dinamis dimanapun dan kapanpun dibutuhkan. Oleh karena itu, banyak pengguna internet yang tidak hanya sebagai pengguna saja melainkan juga ingin menciptakan sebuah website pribadi yang dapat diakses oleh pengguna internet lain. Dan tentu dalam hal ini mereka harus mengetahui bagaimana cara menciptakan sebuah website yang layak untuk dipublikasikan dikalangan masyarakat luas.
Untuk menyajikan suatu informasi melalui internet berupa website, dibutuhkan suatu keahlian khusus, dimana informasi yang akandisampaikan harus ditata sedemikian rupa sehingga publik tertarik dan memiliki motivasi untuk menyimak informasi yang disampaikan. Media utama yang dipakai sebagai jendela informasi adalah layar komputer yang  dkontrol atau dikendalikan oleh berbagai merek dan jenis komputer yang berbeda Operating System-nya. Tetapi Webmaster mengharapkan agar informasi yang disajikan dapat dilihat sesuai dengan hasil rancangannya, dimana saja dan dengan komputer jenis apapun. Sehingga, untuk mencapai tujuan tersebut, maka dirancang salah satu bahasa pengantar pemrograman untuk internet yang diberi nama Hyper Text Markup Language yang disingkat dengan HTML.
Untuk menjadi seorang Webmaster, maka diharuskan bagi para pengguna internet untuk memahami pemrograman dengan HTML agar dikemudian hari dapat mengendalikan dan mengatur Website yang dibuat. Website yang baik
adalah Website yang dinamis yakni yang dapat berinteraksi dengan pengunjungnya (User/Quest). Membuat Website dinamis makaharus berurusan dengan HTML.
Hyper Text Markup Language (HTML) didefinisikan sebagai sebuah bahasa markup yang digunakan untuk membuat sebuah halaman website dan menampilkan berbagai informasi di dalam sebuah browser internet. Definisi HTML tersebut mengisyaratkan bahwa bahasa Hyper Text Markup Language (HTML) merupakan unsur pokok dalam pembuatan sebuah website agar dapat menampilkan informasi yang sesuai dengan maksud webmaster.
Dengan menggunakan bahasa HTML ini, maka koneksi antar komputer dapat terwujud karena bahasa HTML didukung oleh fasilitas dan perangkat komunikasi. Sarana komunikasi yang dimaksud ini menggunakan standar komunikasi yang dinamakan Hyper Text Transfer Protocol (HTTP). Dengan menggunakan HTTP, maka semua komputer dalam Website akan dapat berkomunikasi antara yang satu dengan yang lainnya, sehingga jarak dan waktu tidak lagi menjadi hambatan untuk memperoleh informasi yang telah tersedia pada komputer server (pelayanan).
Oleh karena itu, dalam karya ilmiah ini akan dijelaskan kelebihan-kelebihan bahasa HTML daripada bahasa-bahasa program Website Designer yang lain. Sekaligus akan dipaparkan bagaimana proses implementasi program datanya hingga menjadi sebuah website yang baik dan juga akan dibahas mengenai langkah-lang untuk membuat website sederhana.
1.2. Rumusan Masalah
Makalah ini merumuskan beberapa permasalahan sebagai berikut:
  1. Apa pengertian program dan pemrograman?
  2. Apa yang dimaksud dengan websaite?
  3. Apa yang di maksud dengan HTML?
  4. Bagaimana langkah-langkah membuat website sederhana?
1.3. Ruang Lingkup
Dalam makalah ini, penulis membatasi masalah yang akan dibahas pada    materi kuliah Pemrograman Terstruktur. Pembahasan lebih dikhususkan pada Pemrograman Website Sederhana Menggunakan HTML. Hal tersebut dimaksudkan untuk mempertegas pembahasan sehingga dapat terfokus pada masalah yang akan di bahas serta dapat memberikan gambaran umum tentang isi makalah sehingga pembaca lebih mudah mempelajarinya.
1.4. Maksud dan Tujuan
Maksud dari penyusunan tugas ini adalah untuk memenuhi dan melengkapi salah satu tugas mata kuliah Pemrograman Terstruktur di Bina Sarana Informatika. Sedangkan tujuan dari penulisan tugas ini adalah:
  1. Menerapkan teori yang didapat selama belajar di Bina Sarana Informatika.
  2. Mengembangkan kreativitas dan wawasan penulis.
  3. Memberikan uraian tentang Pemrograman Website Sederhana menggunakan HTML.
1.5. Metode Pengumpulan Data
Untuk memperoleh data yang diperlukan dalam penyusunan tugas ini, penulis menggunakan metode sebagai berikut :
1. Metode Studi Pustaka
Metode yang dilakukan dengan membaca buku-buku serta referensi-referensi yang berkaitan dengan masalah yang dibahas dalam tugas ini. Penulis membaca modul Web Programing yang berkaitan dengan HTML.
2. Metode Browsing Internet
Metode yang dilakukan dengan browsing atau membaca atau mencari referensi-referensi yang berkaitan dengan masalah yang dibahas dalam tugas ini di internet.
1.6. Sistematika Penulisan
Untuk memudahkan pembaca dalam mempelajari dan mengetahui isi makalah ini, penulis memberikan uraian singkat mengenai gambaran pada masing-masing bab melalui sistematika penulisan yaitu :
BAB I    PENDAHULUAN
Dalam bab ini, penulis menguraikan tentang latar belakang penulisan, maksud dan tujuan serta metode-metode yang digunakan dalam pengumpulan data untuk menyusun tugas ini. Selain itu, penulis juga menguraikan mengenai ruang lingkup permasalahannya yang dibahas dan sistematika penulisan.
BAB II PEMBAHASAN
Pada bab ini, penulis menguraikan tentang materi-materi yang akan dibahas karena bab ini merupakan bab utama dari makalah ini. Dalam bab ini penulis menguraikan tentang program dan pemrograman, pengertian website, perkembangan website, kriteria web dan keamanan web, cara kerja website, pengertian HTML, struktur HTML, tag HTML, kelebihan HTML, dan implementasi pada HTML, sekaligus akan dibahas mengenai langkah-langkah membuat website sederhana.
BAB III PENUTUP
Dalam bab ini, penulis menguraikan tentang kesimpulan-kesimpulan dari masalah yang dibahas serta saran-saran yang penulis ajukan guna perbaikan selanjutnya.
BAB II
PEMBAHASAN
2.1.      Program dan Pemrograman
Program adalah kata, ekspresi, pernyataan atau kombinasi yang disusun dan dirangkai menjadi satu kesatuan prosedur yang berupa urutan langkah untuk menyelesaikan masalah dan diimplementasikan dengan menggunakan bahasa pemrograman sehingga dapat dieksekusi oleh komputer.
Pemrograman yaitu rangkaian instruksi – instruksi dalam bahasa komputer yang disusun secara logis dan sistematis. Proses pemrograman komputer bertujuan untuk memecahkan suatu masalah dan membuat mudah pekerjaan dari user (pengguna komputer).
2.2.      Pengertian Website
Website dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk mempublikasikan informasi berupa teks, gambar dan program multimedia lainnya berupa animasi (gambar gerak, tulisan gerak), suara, dan atau gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait antara satu page dengan page yang lain yang sering disebut sebagai hyperlink.
2.2.1. Perkembangan Websit
Perkembangan teknologi informasi yang kian pesat memacu munculnya situs baru yang dapat diakses melalui jaringan internet. Data dari survey yang dilakkukan oleh Netcraft (http://news.netcraft.com/archives/web_server_survey.html) menunjukkan bahwa sampai pada bulan Maret 2008 ini jumlah website telah mencapai angka 162.662.052 situs dengan 4,5 juta situs baru pada bulan ini. Hal ini memungkinkan jumlah situs baru pada tahun 2008 ini mencapai 60 juta situs atau meningkat 20% dari perkembangan tahun 2007 yang mencapai 50 juta situs baru. Perkembangan jumlah situs ini tidaklah mengherankan karena semakin banyaknya orang yang melakukan blogging baik melalui Google, blogspot.com, ataupun MySpace.Namun demikian, situs yang benarbenar aktif pada bulan Maret 2008 hanyalah 65,6 juta atau 40,33% dari jumlah total situs. Dengan perkembangan jumlah situs yang luar biasa besar ini menuntut para pemrogram web (web programmer) untuk selalu berkreasi menciptakan ideide baru baik dalam desain layout, penggunaan aplikasi server web, maupun operating system yang dipakai, agar situs yang dibangunnya tidak kandas dalam persaingan. Perkembangan ini juga membuka peluang kerja yang sangat signifikan dalam bidang web programming tidak hanya bagi lulusan IT namun juga bagi mereka yang mau bekerja keras untuk selalu ‘mengoprek’.
2.2.2. Kriteria Web dan Aspek Keamanan Web
Website yang baik harus memenuhi kriteria dalam aspek fungsionalitas, desain, konten, orisinalitas, profesionalisme dan keefektivan. Sesuai dengan kriteria dalam penghargaan website terbaik tingkat dunia (World Best Website Awards), aspek fungsionalitas yang dinilai meliputi: keteraksesan, kecepatan dan bandwidth, kualitas HTML, navigasi dan link, dan legalitas. Sedangkan dalam aspek desain, sub aspek yang dinilai adalah desain grafis, user friendliness, beauty, layout, dan integritas. Dari segi konten, termasuk aspek yang dinilai adalah tujuan, interaktivitas manusia, proses informasi, ekspresi verbal, ketersediaan konten secara detail. Dalam aspek orisinalitas, sub aspek yang dinilai adalah inovasi, kreativitas, teknologi, dan visi. Untuk aspek profesionalisme dan keefektivan meliputi customer service dan respon client, nilai, focus, komponen tambahan, dan keefektifan situs secara keseluruhan. Kriteriakriteria tersebut dinilai untuk penilaian level 1. Untuk penilaian level berikutnya asek yang paling penting adalah sekuritas server dan rangking search engine. Dengan demikian aspek-aspek tersebut di atas dapat dijadikan acuan dalam pembangunan sebuah website yang baik, sehingga peran programer web dalam hal ini sangat penting.
2.2.3. Cara Kerja Website
Pada saat kita mengetikkan sesuatu alamat pada browser maka data akan dilewatkan oleh suatu protokol HTTP melewati port 80 pada server. Alamat ini adalah URL dari suatu situs yang mempunyai alamat yang unik di internet. Web Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnya, aturan ini biasa disebut protokol, standar protokol menggunkan TCP / IP, proses ini dimulai dengan melakukan 3 way handshake antara sumber dan tujuan.
Web browser, suatu aplikasi client yang akan menampilkan halaman web sites dari internet. Web browser di install disisi user ( OS ) menampilkan informasi ke komputer dengan interpreting bahasa pengkodean HTML, dimana homepage berisi gambar, suara, multimedia, dan resources lainnya yang dapat diakses. File coding pada HTML memberikan datanya ke browser apa yang akan ditampilkan ke sisi client. Isi HTML yang akan ditampilkan bukan dari browsernya tetapi dari web servernya dan browser akan menginterpret tag HTML untuk link ke halaman berikutnya.
2.3. HTML
HTML (Hyper Text Markup Language) adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu Platform tertentu (Platform independent). Dokumn HTML adalah suatu teks biasa, dan disebut sebagai Markup Language karena mengandung tanda-tanda (tag) tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Pada dokumen HTML yang termasuk system hypertext, kita tidak harus membaca dokumen tersebut secara urut dari atas kebawah atau sebaliknya, tetapi kita dapat menuju pada topic tertentu secara langsung dengan menggunakan teks penghubung yang akan membawa anda kesuatu topik atau dokumen lain secara langsung.
HTML (Hyper Text Markup Language) adalah bahasa yang digunakan untuk menulis halaman web, ciri utama dokumen HTML adalah adanya tag dan elemen, Elemen dalam dokumen HTML dikatagorikan menjadi dua yaitu elemen <HEAD> yang berfungsi memberikan informasi tentang dokumen tersebut dan elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan di dalam browser. Sedangkan tag dinyatakan dengan tanda lebih kecil ”<” (tag awal) dan lebih besar ”>” (tag akhir). Dalam penggunaannya sebagian kode HTML tersebut harus terletak diantara tag kontainer, yaitu diawali dengan <nametag> dan diakhiri dengan </nametag> (tersapat tanda ”/”). Untuk membuat dokumen diperlukan program penyutingan teks (Noteped, Eordpad, Ms Word,dll), dan suatu program browser (Notscape, Internet Explorer).
Dokumen HTML terbagi 3 tag utama yang membentuk struktur dokumen HTML, HEAD dan BODY. HTML berfungsi untuk menyatakan suatu dokumen HTML, tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan tag BODY berfungsi untuk menyimpan informasi data yang akan ditampilakan dalam dokumen HTML.
2.3.1. Struktur HTML
<html> sebagai tanda awal dokumen HTML
<head>
****** Bagian HEAD ******,
Sebagai informasi page header untuk tag informasi: title, base, isindex, link, script, style & meta.
************************
</head>
<body>
****** Bagian Body ******
Berisi page atribut seperti backgroun, warna teks, warna link, warna visited link, warna active link dan lain-lain.
</body>
</html>
2.3.2. HTML Tag
Tag Keterangan
<a>…</a> Menyisipkan hyperlink
<b>…</big> Membesarkan teks
<blink>…</blink> Teks berkedip
<blockquote>…</bloqkquote> Menandai sebagai kutipan
<body>…</body> Pasangan tag untuk bagian badan dokumen
<be>…</br> Menyisipkan pemenggal baris
<center>…</center> Mentengahkan teks
<cite>…</cite> Memformat teks
<em>…</em> Menampilkan teks dengan penekanan
<font>…</font> Menentukan atribut font
<head>…</head> Pasangan tag untuk bagian kepala
<html>…</html> Pasangan untuk seluruh dokumen
<i>…</i> Teks miring
<small>…</small> Teks kecil
<strike>…</strike> Membuat garis mendatar
<strong>…</strong> Menampilkan teks dengan penekanan yang kuat
<sub>…</sub> Teks subscript
<sup>…</sup> Text supscript
<tiitle>…</title> Judul dokumen
<h1>…</h1> Headine
<hr>…</hr> Garis horisontal
<p>…</p> Paragraf
<form>…<form> Form input
<input> Menyisipkan Field input
<option>…</option> Mendefinisikan item untuk object SELECT
<select>…<?select> Menu pop up
<textarea>…</textarea> Menyisipkan field input
<img>…</img> Menyisipkan gambar
<dd>…</dd> Menyisipkan keterangan deskripsi dalam daftar definisi
<d1>…</d1> Menyisipkan definisi dari dokumen
<dt>…</dt> Judul definisi
<li>…</li> Item daftar
<ol>…</ol> Daftar terurut
<ul>…</ul> Daftar tidak terurut
<caption>…</caption> Judul untuk tabel
<table>…</table> Memuat tabel
<td>…</td> Menyisipkan data sel tabel
<th>…</th> Menyisipkan sel judul tabel
<tr>…</tr> Mendefinisikan baris tabel
2.3.3. Kelebihan Hyper Text Markup Language (HTML)
HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. Adapun kelebihan-kelebihan HTML antara lain:
1. Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.
2.   Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web yang bersangkutan.
3. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave.
4.  Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
5.   Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.
2.3.4.   Proses implementasi HTML pada Website
Berikut contoh proses implementasi program data HTML pada website:
1.         Heading
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5> Heading Level 5</H5>
<H6>Heading Level 6</H6>
</BODY>
</HTML>
2.         Paragraf
Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN=”right”>
Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris.
<P ALIGN=”center”>
Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari.
<P ALIGN=”left”> Surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah
</P>
</BODY>
</HTML>
3.         Blockquote
Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng identasi teks) atau menampilkan teks dalam bentuk huruf miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu yang tidak perlu dicoba</H3>
<BLOCKQUOTE>
Sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah pada remaja adalah narkoba, seks, alkohol dan merokok. Jangan sekali kali mencoba jika tidak ingin membuat masalah baru
</BLOCKQUOTE>
</BODY>
</HTML>
4.         Preformatted Text
Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY>
<PRE>
Edisi yang lalu dibahas tentang membuat billing system untuk warnet yang dapat langsung mencetak tagihan. Kali ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa diperoleh beberapa laporan secara periodik.
</PRE>
</BODY>
</HTML>
5.         Begin Row (BR)
Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru tanpa memberi baris kosong di bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang paling sering dilakukan ,yaitu:
<BR>Instalasi melalui FTP
<BR>Instalasi melalui CDROM
<BR>Instalasi melalui partisi DOS
</BODY>
</HTML>
6.         Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font 1</FONT>
<FONT SIZE=2>Ukuran font 2</FONT>
<FONT SIZE=3>Ukuran font 3</FONT>
<FONT SIZE=4>Ukuran font 4</FONT>
<FONT SIZE=5>Ukuran font 5</FONT>
<FONT SIZE=6>Ukuran font 6</FONT>
<FONT SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
7.         Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE = “Arial”>Arial, contoh AC Milan <P>
<FONT FACE = “Verdana”>Verdana , contoh Persebaya <P>
<FONT FACE = “Times New Roman”>Times New Roman, contoh Indonesia
<P>
</BODY>
</HTML>
8.         Warna Font
Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dan sebagainya. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR = “red”>PSM Makassar<P>
<FONT COLOR = “#FF0000″>tetap PSM Makassar kan?<P>
<FONT COLOR = “#00FF00″>Ini baru Persebaya<P>
</BODY>
</HTML>
9.         Link
Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada browser</A>. Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya <A NAME = “Bugs”</ A>. Cara melakukan link ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.
2.4. Langkah-langkah Membuat Website Sederhana
Berikut ini adalah langkah-langkah untuk membuat website sederhana
1.         Membuka Program Noteped
Klik Start > All Program > Accessories > Notepad untuk membuka program Notepad.
2.         Tampilan Program Notepad
Tampilan program Notepad seperti gambar di bawah ini. Di Notepad ini nanti kita akan mengetik tag HTML untuk membuat sebuah halaman web.
3.         Membuat Bagian Kepala dan Badan Website
Sebuah halaman web terdiri dari dua bagian, yaitu bagian kepala dan badan. Bagian kepala memberi nama website kita, sedangkan bagian badan berisi halaman inti sebuah web. Bagian kepala dan bagian badan ini nantinya akan membentuk sebuah kesatuan halaman website yang akan kita buat. Tuliskan tag tag berikut dalam Notepad untuk membuat bagian kepala dan badan web.
<html>
<head>
<title>
Website Saya
</title>
</head>
<body>
Selamat datang di website saya
</body>
</html>
<html>, <head>, <title>, <body>, </html>, </head>, </title>, </body>
adalah beberapa contoh tag yang dipakai untuk membangun sebuah halaman website. Pada contoh di atas terlihat bahwa setiap tag mempunyai pasangan yang ditambahi dengan tanda slash (/). Perlu diingat bahwa tidak semua tag mempunyai pasangan seperti contoh di atas, dan tag-tag yang tidak mempunyai pasangan akan kita bahas di nomer selanjutnya. Kalimat atau kata yang kita tuliskan di antara tag <title> </title> merupakan judul atau deskripsi dari website kita. Sedangkan kalimat di antara <body> </body> merupakan isi dari website kita. Kalau sudah anda ketik klik File > Save / Save As , dan simpan dengan nama file index.html. File ini akan mempunyai icon Internet Explorer atau icon web browser lain yang anda gunakan dalam komputeranda. Klik icon ini untuk melihat tampilan halaman web yang telah anda buat.
Terlihat bahwa di bagian atas halam website terdapat kata kata yang anda tuliskan di antara tag <title> </title>, sedangkan dalam badan website terdapat tulisan yang anda tuliskan di antara tag <body> </body>.
4.         Menambah Warna Background website
Warna background website anda dapat anda ubah dengan menambahkan vkata “bgcolor = warna” setelah tag body. Misalnya anda ingin memberi warna hitam website anda maka anda tinggal tambahkan kode berikut :
<body bgcolor = black>
Bila sudah anda tambahkan ke ketikan anda dalam Notepad kemudian disave, dan selanjutnya tekan tombol refresh dalam web browser anda. Tampilan website anda akan berubah menjadi seperti di bawah ini. Bila anda ingin mengubahnya menjadi warna lainnya anda tinggal ubah warna yang diketik setelah bgcolor, misalnya : red, green, blue, atau warna lainnya.
5.         Menjadikan Gambar Sebagi Background Website
Anda bisa juga menjadikan sebuah gambar sebagai background website anda dengan menambahkan kode : “background = file gambar” setelah tag body. Misalnya anda ingin menjadikan file gambar pemandangan.jpg sebagai background halaman website anda maka anda tinggal tambahkan kode berikut :
<body background = pemandangan.jpg>
Save dan klik refresh. Tampilan website anda akan seperti gambar di bawah ini.
Perlu diingat bahwa menggunakan gambar sebagai background halaman website anda akan memperlambat loading halaman website anda, terutama bila ukuran file gambar ini terlalu besar. Karena itu usahakan sebisa mungkin agar background website anda tidak menggunakan file gambar
6.         Merubah Tulisan dalam Website
Seperti halnya background website, tulisan dalam website pun bisa juga diubah ubah warnanya. Selain itu jenis dan ukuran tulisan bisa juga kita ubah ubah. Untuk itu kita perlu menyisipkan tag <font> </font> dalam tag <body> </body>. Untuk mengubah warna tulisan kita tambahkan kode “color” setelah font, untuk mengubah jenis tulisan kita tambahkan kode “face”, dan untuk mengubah ukuran tulisan kita tambahkan kode “size”. Khusus untuk size kita bisa mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar maka semakin besar pula huruf yang akan ditampilkan dalam halaman web. Kita bisa mengubah satu, dua, atau tiga pengaruh tag tag di atas secara bersamaan dengan dipisahkan spasi. Misal kode yang kita tuliskan dalam Notepad :
<html>
<head>
<title>
Website Saya
</title>
</head>
<body bgcolor = black>
<font color = white face = verdana size = +3 align = center>
Selamat datang di website saya
</font>
</body>
</html>
Kode di atas berarti memberi pengaruh tulisan warna putih berjenis Verdana dan berukuran +3. Save dan refresh browser untuk melihat pengaruhnya. Anda bia juga menambahkan efek tulisan bergerak dengan menyisipkan tag <marquee> </marquee> sebelum kode <font> </font>
Untuk mengatur posisi tulisan bisa kita sisipkan tag <posisi> </posisi> di antara tulisan yang kita tuliskan. Posisi kita isi dengan “left”, “center”, atau “right”. Misalkan kita ingin membuat posisi tulisan ke tengah, maka kita ketikkan:
<center> Selamat datang di website saya </center>
7.         Menyisipkan Gambar atau Foto Dalam Website
Anda bisa menyisipkan foto atau gambar anda dalam website anda dengan mengetikkan tag <img src = file foto anda>. Misalkan file yang ingin anda masukkan bernama bajaj.jpg, maka tag yang perlu anda tuliskan adalah :
<img src = bajaj.jpg>
Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka perlu anda tambahkan tag <br>.
<font color = white face = verdana size = +3 align = center> Selamat datang di website saya <br> <img src = bajaj.jpg> </font>
Tampilan website anda akan seperti ini. Ukuran gambar bisa anda atur dengan menambahkan kode “height = ukuran”, dan/atau “width = ukuran”. Misalkan anda ingin gambar anda mempunyai tinggi 100 pixel maka anda tinggal tambahkan “height = 100” setelah kode nama file gambar yang anda sisipkan.
8.         Menambahkan Menu dalam Website
Selanjutnya tinggal anda tambahkan menu-menu dalam website anda. Menu standar yang ada dalam web sederhana biasanya adalah profil, galeri foto, dan link. Untuk itu kita perlu menambah halaman baru yang mempunyai nama file profil.html, galeri.html, dan link.html. Untuk membuat halaman halaman ini anda bisa mengulangi langkah langkah yang telah dijelaskan sebelumnya. Untuk menghubungkan halaman utama website dengan halaman halaman tambahan ini kita perlu ketikkan tag <a href = profil.html> dan ditutup dengan </a> bila kita ingin menghubungkan dengan halaman profil, demikian pula untuk halaman web lainnya. Kode berikut akan menampilkan hubungan antar halaman website yang berjejer.
<a href = profil.html> Profil </a> <a href = galeri.html> Galeri </a> <a href = link.html> Link </a>
Klik Save dan refresh sehingga ditampilkan halaman website seperti berikut. Bila link yang anda buat benar maka kursor mouse akan berubah menjadi tangan bila anda dekatkan ke link yang anda buat.
9.         Link untuk Halaman profil, galeri
Untuk halaman profil, galeri, dan link bisa anda tambahkan sesuka anda seperti langkah langkah sebelumnya. Khusus untuk halaman link, anda bisa mengisinya dengan link ke Friendster, Yahoomail, Google, dan sebagainya. Link yang telah dijelaskan di atas bila kita klik maka halaman baru akan dibuka dalam satu jendela browser yang sama. Bila kita ingin tetap menikmati halaman website kita sedangkan kita juga ingin membuka Friendster misalnya, maka kita perlu menambahkan tag “target = “_blank” setelah alamat Friendster. Misal :
<a href = http://www.friendster.com target = “_blank”> Friendster </a>
Bila anda ingin Friendster ini dibuka di halaman web yang sama maka anda
tinggal hilangkan saja “target = “_blank” nya.
10.       Link ke Halaman Profil Berupa Gambar
Bila anda ingin link ke halaman profil anda berupa gambar profil.jpg misalnya, maka anda perlu menyisipkan file gambar di dalam tag <a href = profil.html> </a>. Sehingga dapat kita tuliskan sebagai berikut :
<a href = profil.html> <img src = profil.jpg> </a>
Bila benar maka kursor mouse akan berubah menjadi tangan bila didekatkan ke gambar profil.jpg. Demikian pula bila link ke Friendster atau Yahoomail juga dalam bentuk gambar, maka anda tinggal menambahkan tag <img src = gambar> di antara tag <a href = link > </a>.
BAB III
PENUTUP
3.1. Kesimpulan
Perkembangan jumlah website semakin memberikan peluang kerja bagi para programmer web. Namun demikian banyak hal yang perlu disiapkan oleh seorang programmer web agar web yang dibangun dapat memenuhi standar. Banyak celah yang akan muncul, sehingga pemrogram web harus lebih cermat.
Website adalah kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video, atau gabungan dari semuanya, baik yang bersifat statis atau dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink) yang diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). Sedangkan Hyper Text Markup Language (HTML) adalah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet yang berbasiskan standar World Wide Web Consortium (W3C).
HTML berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun dan terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>.
3.2. Saran
1.   Untuk membuat program HTML sebaiknya mengenal struktur dasarnya, dan juga memperhatikan tampilannya supaya menarik.
2.   Bahasa HTML ini masih jauh lebih mudah dari bahasa PHP. Karena itu, sering     seringlah berlatih dan jangan cepat merasa puas bila anda sudah mempunyai website pribadi. Selamat berkarya!
DAFTAR PUSTAKA
http://www.balinter.net/news_108_Pengertian_Website.html
diakses, tanggal 30 Oktober 2009, pukul 20.40.
diakses, tanggal 10 November 2009, pukul 12.50.
http://www.informatika.org/~rinaldi/…/MakalahIF5054-2007-A-003.pdf
diakses, tanggal 30 Oktober 2009, pukul 20.00.
http://www.maswahyu.com/…/Pembuatan%20Website%20Sederhana%20Menggunakan%20HTML… diakses, tanggal 30 Oktober 2009, pukul 20.10.
http://www.njouba.com/makalah-pemrograman-web

Membuat Web Sederhana Dengan Macromedia Dreamweaver


Yaa kali ini penulis akan mencoba membuat sebuah artikel mengenai pembuatan website dengan tema :  MEMBUAT WEB SEDERHANA DENGAN MACROMEDIA DREAMWEAVER. Artikel ini penulis peruntukan buat tingkat pemula atau yang masih newbie dan ingin belajar mengenai pembuatan sebuah website  dengan Dreamweaver.disini penulis akan membahas step by step pembuatan web sederhana dengan full image, supaya pembaca bisa lebih memahami penjelasan yang akan penulis terangkan. Ok kalo begitu kita langsung ke TKP.

Sebelum memulai proyek, kalian sebaiknya mempersiapkan terlebih dahulu foldernya agar file-file project bisa terorganisir secara rapih.coba kalian buat folder seperni ini.

Penjelasan :  Buat folder utama dengan nama websederhana  folder ini nantinya berfungsi untuk menyimpan file project yang akan kita buat, sedangkan folder image nantinya berfungsi untuk menyimpan gambar – gambar yang akan dipakai dalam menunjang pembuatan web, jadi kalian harus mempersiapkan image yang akan di pakai dalam project kali ini. apabila kalian sudah siap langsung saja buka Macromedia Dreamweaver_nya. disini Penulis menggunakan Macromedia Dreamweaver 8. Karna menurut saya untuk tingkat pemula lebih baik menggunakan Macromedia ketimbang Adobe. Untuk caranya pertama pilih File -> New -> Html.
Oya..karna dalam pembuatan web sederhana ini  Full Design ( Tanpa Coding ) maka  kalian pilih menu Design seperti contoh dibawah ini :

Nah kalau  sudah dipilih menu design_nya, pertama tama untuk mendesign web kita memerlukan sebuah tabel.untuk itu ikuti langkah langkah dibawah ini :
  1. Insert -> Table
  2. Ubah settinganya menjadi seperti ini :

Apabila sudah selanjutnya akan tampil gambar seperti berikut :

Sekarang coba kalian letakan kursornya di rows yang pertama, kali ini kita akan membuat sebuah header, oyah  jangan lupa height_nya ubah dengan ukuran 200 px.  lihat contoh dibawah ini :

Untuk header kita akan menggunakan gambar yang telah kita buat dan telah kita simpan sebelumnya di folder image, untuk header bisa dibuat dengan Photoshop, CorelDraw, atau dengan Flash. Tinggal pilih mana yang kalian kuasai. adapun cara untuk memasukan sebuah gambar header adalah sebagai berikut :
  1. Insert -> Image

Apabila sudah memilih Insert -> Image nanti kalian akan disuruh memilih image mana yang akan digunakan sebagai header, tinggal pilih image_nya lalu pilih Ok

Nanti hasilnya akan seperti gambar dibawah, ingat untuk image header. Lebar dan tinggi imagenya harus sesuai dengan table yang sudah dibuat waktu pertama kali kita memasukan table. dalam gambar ditunjukan bahwa No 1 adalah header yang dibuat dengan Photoshop. Nah apabila pembuatan header sudah dirasa cukup. selanjutnya kita akan membagi sebuah tabel menjadi dua kolom,silahkan kalian ikuti langkah – langkah dibawah ini .

Apabila kalian sudah meletakan kursor di rows yang ke-2. Lihat gambar di atas. selanjutnya kalian focus ke properties, kalian ubah vertikalnya menjadi Top supaya posisinya selalu ada di atas. lalu pilih Split Cell, Iconya ditunjukan pada no 2, ketika kalian memilih Split Cell kalian akan diminta untuk memilih berapa kolom atau rows yang akan di tambahkan. karena kita akan menambahkan kolom maka kalian pilih kolom lalu numbernya ubah ke Nomor 2.

Selanjutnya kita akan membuat sebuah menu untuk Navigasi nantinya, hal yang harus kalian lakukan yaitu menyimpan kursor di row ke-2 dan kolom ke-1. Seperti biasa kita memerlukan sebuah table untuk membuat menu tersebut caranya sama seperti gambar diatas. yaitu dengan cara :
  1.  Insert – Table
  2. lalu ubah setiinganya seperti gambar dibawah ini lalu tekan
  3. Ok.

Apabila sudah. kita lanjutkan dengan membuat menunya itu sendiri, disini saya buat lima contoh menu, silahkan kalian tulis seperti contoh gambar dibawah
ini :
  1. Simpan kursor di coloms yang pertama lalu kalian tulis menu Home
  2. Lakukan hal yang sama seperti tadi sampai Menu Contact- Us
  3. Kali ini kita akan mengubah warna tulisan, warna background, lalu membuat copyright caranya :
3.1  simpan kursor di menu home lalu blok sampai menu contact seperti   gambar no satu.
3.2    Di propertis pilih Icon Bg ( untuk Background ), lalu pilih warna yang kalian suka.
3.3  Untuk Warna Text kalian pilih Text color, iconya ada berada tepat dibawah Button CSS
3.4      Pembuatan menu sudah beres, selanjutnya kalian isi conten( halaman ) yang ada di sebelah kanan menu, lihat gambar
3.4   Digambar selanjutnya di perlihatkan kalian harus menyimpan kursor di rows yang paling bawah,lalu kalian tulis CopyRight © by Administrator 2011.


Untuk membuat icon CopyRight langkah – langkahnya adalah seperti ini :

coba kalian Save terlebih dahulu Caranya :
  1.  Save As -> lalu cari Folder yang sudah dibuat Sebelumnya
 Simpan dengan nama file  index.html


Sekarang coba lihat di Browsernya dengan menekan tombol F+12.  dan hasilnya jreng… jreng…. Jreng……

sangat sederhana !! hehehehe…………..
Ya……itulah project web kalian dengan project sederhana ini kalian bisa mengembangkannya lagi. Karna setiap orang berbeda kreatifitas, penulis hanya memberikan contoh yang sangat sederhana supaya kalian bisa memahami penjelasan yang penulis buat.hehehe………….jangan lupa kunjungi terus http://satyainform.wordpress.com dan jangan lupa comment_nya ya….
Lihat juga kelanjutan dari artikel ini  :
1. Membuat Design Form Contact-Us Tanpa Database
2. Cara mudah membuat Link di Dreamweaver