Rabu, 30 November 2011

CARA MEMBUAT HALAMAN WEB


A.     PERANGKAT LUNAK UNTUK PEMBUATAN HALAMAN WEB
Situs web adalah lokasi di internet yang menyajikan kumpulan informasi dengan menampilkan profil pemiliknya, baik pribadi maupun institusi sehingga dapat dikunjungi dan di baca oleh pengguna internet.
      Perangkat lunak yang sering di gunakan dalam pembuatan web page, antara lain ;
 - Internet explorer atau Netscape Communicator sebagai Browser.
 - Microsoft frontpage, Coffecup, Evrsoft first page, Macromedia Dreamweaver         
 sebagai HTML editor
 -  macromedia flash, adobe image styler, adobe photoshop sebagai software animasi.
 -  program FTP ( file transper protocol) , misalnya WS_FTP untuk proses upload.
          Untuk membuat homepage sederhana seperti dalam pembahasan buku ini, kita menggunakan microsoft frontpage HTML editor.


B.     MEBUAT HALAMAN WEB KOSONG

  cara pembuatan halaman web sederhana dan strukturnya menggunakan program aplikasi frontpage
  1. buka microsoft frontpage
  2. klik menu file, new, page or web. taskpane new page or web akn di tampilkan
  3. untuk memulai membuat halaman web baru, pilih salah satu cara sebagai berikut.
    1. klik blank page pada task pane new page or web, halaman web baru yang masih kosong akan ditampilkan
    2. klik page templates. Kotak dialog page templates akan ditampilkan. Pada kotak ini, kamu dapat memilih jenis template untuk membuat halaman tertentu, seperti bibliography, feed back form dan guest book. Untuk membuat halaman kosong tanpa format khusus, pilih normal page, kemudian klik tombol OK. Halaman baru yang masih kosong akan ditampilkan.
    3. Pilih one page web. Pilihan ini akan membuat web baru dengan satu halaman web baru. Selain itu, kita dapat memilih web site templates pada task pane. Kotak dialog web site templates akan ditampilkan. Klik one page web dan klik tombol OK. Selanjutnya, proses pembuatan halaman web baru akan berlangsung. Tunggu beberapa saat sampai muncul satu halaman web, yaitu halaman home dengan nama file indeks.HTM.
            
             Cara menyusun web site dengan navigation adalah sebagai berikut:
      1. Buat web site baru dengan nama websiteku.com. klik menu file, new, page or       
           web. Task pane new page or web akan ditampilkan untuk Fronpage 2002, task   
           pane tidak tampil pada versi frontpage lama.
      2. Pada task pane new page or web, klik one page web. Kotak dialog web site
          templates akan ditmpilkan. Pilih one page web. Pada bagian option, isi dengan 
          lokasi yang digunakan untuk menyimpan data web site, misalnya
          http://localhost/websiteku.com.
      3. klik view navigation sehingga area kerja navigation akan ditampilkan.
      4 . tambahkan halaman profile dengan cara klik kanan pada kotak index pilih new
           fage hasilnya akan ditampilkan .
      5 . ubahlah nama new fage satu dengan profile .
      6 . ulangi langkah penambahan halaman baru seperti cara diatas untuk halaman
           layanan .
      7 . halaman layanan , diberi sub halaman , yaitu halaman promosi web
          a . klik kanan pada halaman layanan
          b . pilih new , page maka halaman baru akan ditampilkan dibawah halaman 
               layanan .
          c . beri nama halaman tersebut dengan promosi web
          d . sub halaman desain web dibuat dengan cara yang sama.

C. MEMBUAT NAVIGASI WEB
            Navigasi web adalah sistem yang menghubungkan halaman web ke halaman web lain melalui hyperlink membentuk stuktur situs web hyperlink adalah teks atau gambar yang jika di klik akan mengantarkan pengunjung website ke halaman web lainnya.hyperlink dapat di buat secara manual maupum secara otomatis menggunakan pasilitas napigation.berikut ini akan di jelaskan cara membuat hyperlink,baik dengan manual maupun menggunakan cara otomatis dengan pasilitas napigation.
1.membuat hyperlink pada halaman web secara manual
a.buka halaman index.htm.caranya ,klik 2 kali pada file index.htm pada tampilan folders.halaman index.htm akan terbuka.halman web ini masih kosong.
b.tambahkan teks pada halaman web dengan cara di ketikkan seperti layaknya kamu berkerja dengan MS. Word. buatlah isi halaman index.htm.
c.sorot atau blok teks home,kemudian klik tombol insert hyperlink pada toolbar,atau klik menu insert hyperlink(CTRL+K). 
d.pilih file index.htm sehingga pada kolom address akan tampil halaman index.htm.
e.lanjutkan dengan cara yang sama,untuk teks profile.sorot teks profile,klik tombol insert hyperlink.
f.pilih profile,kemudian klik ok.
g.ulangi langkah-langkah penambahan hyperilink di atas sehingga semua teks di beri hyperlik sesuai dengan tujuan masing-masing halaman.
h.simpan halaman ini dengan klik menu file,save,(CTRL+S).
i.ulangi langkah ke 1 sampai ke7 untuk menambahkan hyperlink pada halaman-halaman selain index,yaitu profile.htm,layanan .htm,hubungi kami.htm,dan klien.htm.
2.membuat hyperlink halaman web secara otomatis.
    Pembuatan hyperlink secara manual lebih mudah di lakukan dan formatnya dapar di atur lebuh fleksibel. Tetapi,saat kamu membyat proyek web site yang mempunyai jumlah halaman cukup banyak,penambahan link ke halaman baru atau pengurangan halaman web mengharuskan kamu untuk mengatur satu persatu semua link yang ada pada semua halaman web.masalah ini dapat di atasi sengan membuat hyperlink dengan fasilitas otomatis.
a.hyperlink halaman home atau level pertama.
  Cara membuat hyperlink pada level pertama adlah sebagai berikut;
1).kosongkan hyperlink pada masing-masing halamn web (index.htm,profolr.htm,layanan.htm,dan seterusnya)
2.pembuatan hyiperlink otomatis di mulai dari halaman index.bukan halaman index.htm.
3.pastikan kursor telah berada di tepi kiri alaman web.

D. format CSS
  CSS (cascading style sheet) merupakan bahasa scripting yang di gunakan mengatur format dokumen.cara menggunakan scripting CSS ini ada 2 macam,yaitu:script CSS yang di buat pada file terpisah. dengan CSS, lay out web site lebih mudah di ubah dan di update.
1.pengenalan style sheet
   Style sheet merupakan fitur yang sangat penting dalam membuat dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam pembuatan web, akan tetapi penggunaan style sheets merupakan kelebihan. Style sheet digunakan untuk mengontrol dan mengatur style-style yang ada. Style sheet mendeskripsikan bagaimana tampilan dokumen HTML dilayar.
2. Menggunakan CSS Pada Halaman Web
Sintaks ialah penulisan perintah pada program. Sintaks dasar HTML terdiri atas tag. Tag dibuat dengan menuliskan perintah diantara tanda kurang sudut “<”dan “>”. Sebagian teks merupakan pasangan, yaitu tag pembuka dan tag penutup.
Struktur HTML terdiri atas dua bagian utamayaitu bagian head( <head> ) dan bagiab body ( tag <body> ).
Script CSS yang berisi format teks dapat kamu tuls sebagai berikut.
<style>
a:link { text-decoration:none;color#0000FF }
a:visited { text-decoraion:none;color#0000FF }
a:hover { text-decoration:underline;color# }
h1 { Font-family: arial;color#0000FF }
.garis { border-bottom:2px dotted#FF0000 }
</style>
3. CSS pada file terpisah
Penerapan CSS yang diletakkan pada bagian head setiap halaman web tampaknya kurang praktis. Hal ini9 akan sangat terasa ketika styleyang digunakan cukup banyak. Apabila terjadi perubahan style-style tersebut, kamu harus menggantyi style-style pada setiap halaman web.
Untuk memudahkan penyeragaman format CSS pada setiap halaman web, buatlah satu halaman web yang telah diformat menggunakan CSS lalu klik File, Save as. Pada pilihan save as type, pilih hypertext style sheet (*.css). buka dokumen halaman web lain yang ingin diberi format CSS sama seperti dokumen pertama. Lalu, klik format, style sheet links dan klik add.

E. Membuat Tabel untuk Web

Halaman web pada contoh hanya terdiri atas 5 bagian utama, yaitu bagian logo , alamat perusahaan , menu navigasi , bagian isi,dan bagian copyright.

Untuk memodifikasi websiteku.com.ikuti langkah-langkah berikut.
  1. buatweb site yang akan sibuat tabelnya.
  2. buka halaman index.htm yang akan dibuat tabelnya.
  3. jika telah dibuka , hapus semua teks dan objek yang ada pada halaman index.htm.
  4. buat tabel dengan 2 kolom dan 4 baris pada halaman index.htm dengan menekan ikon insert Table
  5. kemudian , aturlah tabel untuk penempatan gambar dan teksnya.
  6. tempatkan gambar dan teks yang diperlukan .
  7. untuk bagian kolom sekapur sirih, kamu dapat memecah sel dengan cara mengklik mouse kanan pada posisisnya , pilih split cells. Pada kotak dialog dplit cells, pilih split into columnsn dan ketik 2 pada kotal isian numbers of columns ( dipecah menjadi 2 kolom ), lalu klik OK.
  8. masukan teks dengan efek berjalan menggunakan menu insert, web component.pada kotak dialog insert web component, pilih component type: dynamic effect dan choose an effect:marquee.klik finish.lalu , ketikan selamat datang di web siteku.com klik OK.
  9. pengisian tulisan dibawah sekapur sirih dapat diketik langsung atau sisipkan insert, inline frame pilih new page jika ingin menulis teks dengan scroll bar.
  10. klik pada home , kemudian masukan theme untuk tampilan lebih menarik, dengan cara format , theme, selected pages pilih capsules dan hasilnya.
  11. gunakan hyperlink untuk menghubungkan antar halaman web. Buatlah struktur navigasi untuk masing-masing halaman web.kemudian , masukkan hyperlink berdasalkan navigasi menggunakan perintah insert, navigation sebagai berikut.
·        Pilih child level dan home page untuk indexsebagai level pertama dan,
·        Pilih same level dan home page untuk profile sebagai lecel kedua.
  1. tampilkan dengan browser internet explotet untuk melihat hasilnya dengan cara file, preview in browser

F. Grafis atau Gambar untuk web

            Jenis file gambar yang biasa digunakan untuk web adalah GIF, JPEG, dan PNG.
  • GIF ( Grafics interchange format ) merupakan format fike yang biasa digunakan untuk menampilkan gambar dengan model dengan model warna indec-color .
  • JPEG (  Joint photographic ecperts group ) merupakan format file yang biasa digunakan untuk menampilkan gambar foto di dokumen HTML.
  • PNG ( Portable Nerwork Grafics ) merupakan format file yang tepat digunakan untuk menampilkan ganbar pada halaman we

G . Membuat Nama Domain dan Hosting

            Nama domain atau Domain Name System ( DNS ) adalah sebuah alamat di internet.
Alamat IP adalah serangkaian nomor unik, sebagai contoh 66.218.71.198. alamat IP adalah sesuatu yang sulit di ingat. Oleh karena itu , sistem DNS diciptakan .
            Jika dianalogikan , DNS adalah nama alias dari sebuh alamat IP. Jadi , selain mengetikkan 66.218.17.198, kita dapat juga mengetikkan www.yahoo.com agar lebih mudah di ingatm akhiran untuk sebuah nama domain misalnya . com, net . oeg. Tv, lain-lain.
            Perusahaan yang menyediakan hasa pengurusan nama domain dikenal dengan sebutan Registar.pengecekan pendaftaran nama domain dapat dilakukan menggunakan fasilitas Whois, misalnya melalui http://www.internic./whois .html

I . Melakukan Upload

Proses transfer data dari data komputer atau komputer kita ( komputer lokal ) ke web server( web hosting/komputer remote) dikenal denganistilah upload.Untuk melakukan proses tersebut, kita menggunakan software FTP( File Transper Protokol).

Langkah berikut ini akan menjelaskan cara upload menggunakan software -WS_FTP.
  1. Pastikan komputerb kamu terhubung dengan internet. Aktifkan aplikasi WS_FTP yang ada pada komputermu .Tampilan pertama software WS_FTP akan terlihat.
  2. Langkah pertama yang kamu lakukan adalah mengklik tombol New
  3. Masukkan nama yang kamu inginkan pada bagian Profile Name sebagai pengenal dari web milikmu
  4. Bagian pada Host Name/Address,melakukan alamat dari FTP Server.
  5. Bagian selanjutnya adalah Host Type
  6. Kamu akan diminta mengisi User ID yang sesuai dengan nama yang tercantum pada e-mail konfirmasi.
  7. Setelah itu,masukkan password yang kamu peroleh berdasar e-mail konfirmasi di bagian  Password.
  8. Setelah selesai klik tombol OK
  9. Cari lokasi tempat file yang ingin kam7u upload dalam direktori komputermu.
  10. Direktori akan pindah ke C:\My Dokuments\My Web dan tampilkan isi folder akan tampak pada layar .
  11. Pada jendela bagian kiri ,klik direktori tempat kamu menyimpan file-file Web kamu.
  12. Jika proses transfer yang dilakukan berhasil,pada kotak keterangan WS_FTP ,kamu akan melakukan keterangan transfer succeeded .
  13. Proseas transfer/ upload telah selesai dilakukan .Bukalah Internet Explorer,kemudian coba masuk ke alamat “smutik.web1000.com”,dan lihat hasilnya.

0 komentar:

Poskan Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites