I. KONSEP DASAR WEB Lisensi Dokumen: Copyright win.web.id Seluruh dokumen di win.web.id dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari win.web.id. Best regard Winarno.S.Si Sebelum membuat web kita harus memahami konsep dasar web yang akan sedikit dijelaskan terutama mengenai fungsi, konsep kerja web dan manajemen web. Yaitu : (a). Fungsi Fungsi dari web sendiri pada umumnya adalah sebagai sarana informasi yang dapat diakses 24 jam sehari dan dapat diakses dimana saja. Namun pada perkembangannya, internet atau pada khususnya web berkembang menjadi sarana promosi dan bisnis atau yang biasa disebut e-commerce. Untuk dapat menuju ke arah tersebut tentu saja diperlukan keahlian untuk membuatnya khususnya sebagai webmaster sehingga web yang dibuat dapat menarik, interaktif dan segi keamanannya terjamin. (b). Konsep Kerja Web Konsep kerja dari web adalah webmaster membuat halaman-halaman web yang terangkai menjadi suatu web dan halaman-halaman tersebut diupload/dimasukkan ke web server. Setelah halaman-halaman tersebut dimasukkan kedalam web server maka web yang telah kita buat tersebut sudah dapat diakses dimana saja dan kapan saja. Mungkin dari konsep yang dijelaskan tersebut cukup mudah, namun dalam prakteknya perlu dilakukan beberapa langkah/ cara yang nanti akan diterangkan. (c). Manajemen Web Manajemen dalam hal ini adalah perawatan website yang telah dibuat, baik itu dari segi tampilan, isi maupun ke-update-annya. Maksud dari Update adalah menjaga agar web kita berisi informasi yang terbaru atau yang masih relevan pada hari ini. Untuk mengupdate / merawat dapat dilakukan dalam 2 cara, yaitu secara langsung di server atau mengedit data file yang dulu di pakai dan diupload lagi. Untuk yang langsung di server bisa dipergunakan fasilitas WS FTP yang dipergunakan untuk mengupload atau kalau pada server mipa/uns dapat juga melalui telnet. copyright@2007 by win.web.id 1
II. HTML FUNDAMENTAL ( DASAR HTML ) Sebelum mempelajari pembuatan web melalui web editor ( FrontPage 2000 ) perlu dipelajari dahulu dasar dari HTML ( Hyper Text Markup Language ) dengan menggunakan notepad. Adapun yang perlu diketahui/dipelajari antara lain sebagai berikut : Halaman Utama Setiap halaman web diawali dengan <html> dan diakhiri dengan </html>, dan untuk menampilkan Title/Judul dari website diawali dengan <title> dan diakhiri </title>. Sebagai contoh seperti dibawah ini : <html> <head> <title>testing</title> </head> <body>testing</body> </html> Akan menghasilkan halaman web yang bertitel Testing dan berisi tulisan Testing. Font ( Jenis huruf ), Ukuran dan Align ( rata kanan/kiri atau tengah ) Untuk mengawali tulisan dalam halaman web dipergunakan <p> dan diakhiri </p>, untuk font diawali <font face= Jenis huruf > dan diakhiri </font>, untuk align seperti mengawali kata dengan menambahkan tulisan align diawal penulisan yaitu <p align= Jenis align > dan diakhiri </p> sedangkan untuk ukuran dengan menambahkan size pada font face yaitu dengan menambahkan <font face= Jenis huruf size= ukuran > dan diakhiri </font>. Untuk tulisan tebal (bold) diawali <b> diakhiri </b>, untuk tulisan miring (italic) diawali <i> diakhiri </i> dan untuk tulisan yang digaris bawahi (under line) diawali dengan <u> diakhiri </u>. Contoh 1 : <p align= center ><font face= arial size= 3 >testing</font></p> akan menghasilkan tulisan testing yang berukuran 12 ( 1 untuk ukuran 8, 2 untuk 10, 3 untuk 12 dst ) dan rata tengah. Contoh 2 : <p><b><i><u>testing</u></i></b></p> akan menghasilkan tulisan yang tebal, miring (italic) dan bergaris bawah (under line). Contoh 3 : copyright@2007 by win.web.id 2
<p align= center ><font face= arial size= 3 ><b><i><u>testing</u></i> akan menghasilkan tulisan dengan jenis huruf arial, rata tengah, tebal, miring (italic), dan bergaris bawah (under line). Images Untuk memberikan gambar/image pada web dipergunakan <img src= nama file > nama file diisikan beserta letaknya. Tabel Untuk membuat tabel diawali dengan <table> dan diakhiri dengan </table>. Contoh 1 : <table border= ukuran border width= persen lebar > <tr> <td width= persen lebar ></td> </tr> </table> keterangan : ukuran border yaitu 0,1,2,3, dan lain sebagainya sebagai besar ketebalan tabel, sedangkan persen lebar maksudnya seberapa lebar tabel nantinya. Contoh 2 : <table border= ukuran border width= persen lebar > <tr> <td width= persen lebar ></td> <td width= persen lebar ></td> </tr> </table> Keterangan : untuk contoh tersebut adalah tabel dengan jumlah kolom 2. untuk menambahkan kolom lagi dengan meletakkannya diantara <tr> dan </tr> dengan awalan <td width= persen lebar > diakhiri </td> seperti pada contoh. Contoh 3 : <table border= ukuran border width= persen lebar > <tr> <td width= persen lebar ></td> </tr> <tr> <td width= persen lebar ></td> </tr> copyright@2007 by win.web.id 3
</table> Keterangan : Contoh 3 merupakan tabel dengan 1 kolom dan 2 baris. Untuk menambahkan baris dengan mengawali <tr> dan diakhiri </tr> diantara <table> dan </table> seperti pada contoh. Link Untuk memberikan link pada tulisan atau gambar bisa disimak pada contoh-contoh berikut : Contoh 1 : <p><a href= alamat link >Test</a></p> Keterangan : contoh tersebut untuk memberikan link pada kalimat Test. Contoh 2 : <p><a href= alamat link ><img src= nama gambar ></a></p> Keterangan : contoh diatas untuk memberikan link pada gambar. Contoh 3 : <p><a href= alamat link target= _blank >kalimat</a></p> Keterangan : contoh tersebut memberikan link dimana jika link tersebut dibuka akan terbuka pada window baru (new window). Untuk fungsi-fungsi yang lain akan dibahas dalam bab selanjutnya di Web Editor terutama pada menajemen Frame. III. WEB EDITOR Dalam hal ini web editor yang dipergunakan adalah FrontPage 2000 yang ada dalam Microsoft Office 2000. beberapa hal yang perlu dipelajari mengenai tool/kegunaan dari fasilitas yang ada dalam FrontPage. Adapun tool/kegunaan antara lain : 1. Mambuat/mengedit halaman web. Untuk membuat halaman web baru yang pertama harus dilakukan adalah membuka Frontpage kemudian klik File New Page, atau tekan Ctrl-N. Untuk mengedit halaman web yang sudah ada dengan mengklik File Open dan menuju ke folder tempat file yang dikehendaki ( halaman yang akan diedit ). Atau tekan Ctrl-O. 2. Beberapa Fungsi Dalam Web Editor Gambar tampilan FrontPage 2000 : copyright@2007 by win.web.id 4
(5) (3) (4) (1) (2) Pada dasarnya fungsi-fungsi yang ada pada Frontpage hampir sama dengan MS Word yang antara lain untuk tulisan tebal, miring, bergaris bawah, ukuran, aligment dan lain sebagainya sudah ada dalam bentuk gambar-gambar dalam programnya, namun ada beberapa fungsi yang lain dari Frontpage. Untuk yang ditunjukkan pada No.1 adalah untuk melihat tampilan web yang kita buat dalam bentuk teks HTML, dan No.2 adalah untuk melihat tampilan web yang dibuat dalam bentuk halaman web sesungguhnya. Untuk cara-cara/ hal-hal yang dipergunakan untuk membuat web didalam FrontPage 2000 antara lain : Menyisipkan Gambar, Seperti yang kita ketahui bahwa website atau homepage akan kelihatan kurang menarik jika tidak ada image atau gambarnya. Untuk menyisipkan gambar pada web dapat dilakukan dengan cara selain dengan HTML yang telah kita pelajari diatas. Cara pertama dengan menggunakan pilihan insert Picture from file, dan akan meminta letak dari file gambar tersebut. Cara kedua dengan mengklik gambar seperti yang ditunjukkan pada Gambar No.3 dan mengarahkan pada file yang diinginkan. Hyperlink, copyright@2007 by win.web.id 5
Hyperlink maksudnya adalah kita menghubungkan beberapa halaman web dengan kalimat-kalimat dalam halaman web. Atau dengan arti lain adalah pada suatu halaman web ( kalimat/gambar ) diberikan hyperlink sehingga apabila kalimat/gambar tersebut di klik akan membuka halaman web lain sesuai dengan hyperlink yang diberikan. Cara memberikan link : cara pertama yaitu dengan mengklik insert Hyperlink dan akan diminta URL dari link yang dikehendaki. Cara kedua yaitu dengan mengklik gambar yang ditunjukkan pada No.4 dan mengisikan alamat URL yang dikehendaki. Bookmark, Bookmark pada prinsipnya hampir sama dengan hyperlink, namun pada bookmark yang dituju masih pada halaman tersebut, yang dimaksudkan supaya apabila halaman tersebut terlalu panjang kebawah, maka untuk lebih cepat mengakses pada kalimat yang dibawah dipergunakan bookmark. Untuk membuat bookmark langkah yang pertama adalah memblok kalimat/sebagian kalimat atau mengklik gambar klik insert bookmark dan memberikan label pada bookmark tersebut. Langkah kedua yaitu untuk memanggil bookmark yang harus kita lakukan adalah memberikan link pada kalimat yang lain yang langkahnya sama dengan memberikan hyperlink hanya yang dipilih adalah pilihan pada bookmark. Menyisipkan Hover Button, Hover Button pada dasarnya adalah suatu gambar yang berbentuk tombol yang dapat dipakai sebagai hyperlink dengan bentuk dan warna yang dapat dimodifikasi dan dapat berinteraksi dengan mouse (contohnya : apabila mouse mengarah pada hover button akan berubah warna ). Untuk menyisipkan Hover Button dengan mengklik insert component Hover Button. Setelah itu akan muncul isian isi/ teks yang akan diisikan pada hover button, Alamat URL yang merupakan link dari hover button tersebut, warna, warna dasar, efek, warna efek, panjang dan lebar. Juga dapat dibuat dapat bersuara dengan menggunakan custom. Membuat Tulisan Bergerak ( Marquee ), Tulisan bergerak atau Marquee adalah tulisan pada halaman web yang dibuat bergerak secara otomatis dan terus menerus dengan arah gerakan yang telah ditentukan ( pilihan yang ada dalam FrontPage ). copyright@2007 by win.web.id 6
Untuk membuatnya adalah dengan memblok kalimat/kata yang akan dibuat bergerak dan mengklik insert Component Marquee, setelah itu akan muncul beberapa pilihan antara lain : keceparan gerakan, format tulisan, arah gerakan, panjang dan lebar. Theme, Theme yang dimaksud adalah memberikan tema/model dari halaman web dimana dalam FrontPage sudah terdapat beberapa pilihan theme, namun kita dapat mengeditnya sesuai dengan keinginan kita. Cara memberikan theme pada halaman web adalah dengan mengklik format theme, dan kita dapat memilih dari beberapa theme yang ada, untuk mengedit terutama warna, teks dan grafik dapat kita lakukan dengan mengklik tombol Modify dan akan muncul beberapa pilihan. Background, Background artinya memberikan latar belakang warna atau gambar pada halaman web yang kita buat supaya web yang kita buat tidak terkesan sederhana. Untuk memberikan background dengan mengklik format Background dan letak file gambar yang akan dipergunakan sebagai background. Catatan : apabila sudah mempergunakan theme tidak perlu memberikan background. Membuat Tabel, Untuk membuat tabel pada halaman web dengan mengklik table insert table table, dan memberikan berapa jumlah baris dan kolom. Cara yang lain adalah dengan mengklik pada gambar seperti yang ditunjukkan pada Gb No.5 dan memblok jumlah baris dan kolom sesuai dengan keinginan. Border Border adalah ukuran ketebalan tabel/garis dan warnanya. Untuk memberikan border pada tabel yang telah kita buat adalah dengan memblok tabel yang akan dibuat bordernya dan mengklik format border and Shading atau dengan mengklik kanan table properties Style Format Border dan akan muncul seperti Gambar : copyright@2007 by win.web.id 7
(1) (2) (5) (3) (4) Untuk No.1 adalah untuk memberikan shading pada tabel, yaitu memberikan warna pada border tabel dan memberikan latar belakang pada tabel baik latar belakang warna atau gambar. Untuk No.2 adalah untuk memberi style pada tabel. Untuk No. 3 adalah untuk memberikan warna pada border. No.4 untuk memberikan ukuran pada border. Supaya border pada tabel tidak kelihatan dipergunakan ukuran 0. No.5 adalah untuk memberikan border pada garis atas/bawah/kanan/kiri pada tabel. 3. Frame Untuk lebih menarik website dapat dibuat dengan frame. Maksud dari frame adalah menggabungkan beberapa halaman pada suatu halaman yang berkaitan satu dengan yang lain. Untuk itu disini akan dijelaskan cara membuat frame dan manajemen frame ( membuat frame semenarik mungkin ) : Cara membuat, Untuk dapat membuat frame pada halaman web kita bisa mempergunakan halaman yang sudah jadi atau juga dapat membuat halaman baru. copyright@2007 by win.web.id 8
Cara membuat frame adalah dengan membuat halaman web baru dengan mengklik file New Page dan klik frame pages. Seperti yang ditunjukkan pada Gambar berikut : (1) (2) Untuk yang ditunjukkan pada No.1 adalah jenis-jenis frame, dan No.2 adalah tampilan dari frame ( preview ). Manajemen Frame. Manajemen dalam hal ini adalah bagaimana membuat link yang benar sehingga halaman-halaman yang dilinkkan nantinya tidak bertumpuk. Misalkan frame yang anda pilih seperti pada gambar : copyright@2007 by win.web.id 9
Teks yang akan di-link-kan Untuk memberi link pada teks diatas dengan cara seperti memberikan Hyperlink yang telah dibahas diatas dan akan ditunjukkan bagaimana meletakkan halaman link pada frame yang berbeda. (3) (2) (1) copyright@2007 by win.web.id 10
Pada No.1 adalah untuk memberikan target link pada frame yang kita inginkan yaitu pada atas/kanan/kiri tergantung dari pilihan yang ada. No.2 adalah target dari link yang dapat kita letakkan pada bagian bagian frame yang ada, namun frame juga dapat dibuat banyak ( tidak tergantung dari pilihan yang dapat kita buat sebanyak kita mau dan tentu saja cara meletakkan linknya sedikit berbeda.. Untuk memilih hanya dengan mengklik bagian yang dikehendaki dan klik OK. Untuk No. 3 adalah beberapa pilihan dari terget link yaitu : 1). Same Page yaitu link yang kita buat akan memunculkan halaman yang akan muncul pada frame yang sama dimana terdapat link tersebut, 2). Whole Page yaitu link yang muncul akan menggantikan keseluruhan halaman telpat link tersebut berada, 3). New Window yaitu link yang muncul akan membuka windows baru sehingga halaman yang dilinkkan tadi tidak hilang. Untuk menghilangkan garis pada frame adalah dengan mengklik kanan salah satu frame pilih frame properties Frames Pages Frames Hilangkan tanda check pada Show Border. IV. PENGETAHUAN WEB SERVER & PUBLIKASI (a). Fungsi Web Server Fungsi dari web server adalah untuk menempatkan halaman-halaman web yang telah kita buat supaya orang bisa melihat dimanapun berada di seluruh dunia dan selama 24 jam. Karena server tidak akan dimatikan kecuali rusak. Pada modul ini yang akan dipergunakan adalah server mipa ( mipa.uns.ac.id / 202.158.48.245 ) atau server mail uns ( mail.uns.ac.id / 202.158.48.243 ) yang sekaligus sebagai e-mail. Sehingga fungsinya sebagai e-mail sekaligus server bagi web kita, yang nantinya web tersebut diakses dengan alamat URL http://mipa.uns.ac.id/~username atau http://mail.uns.ac.id/~username. (b) Publikasi Publikasi atau proses memasukkan halaman-halaman web yang telah dibuat ke web server ( di Upload ) dapat dipakai 2 macam cara yang biasa dipergunakan yaitu : dengan FTP (File Transfer Protokol ) DOS dan dengan software untuk mengupload ( sebagai contoh WS FTP, atau Cute FTP ), adapun 2 macam tersebut akan dijelaskan sebagai berikut : copyright@2007 by win.web.id 11
1. FTP DOS Untuk memulainya dengan membuka program MS-DOS pada komputer, kemudian ketikkan ftp 202.158.48.245 kemudian di enter. Setelah itu akan diminta username dan password. Untuk dapat membuat halaman web kita dapat muncul, halaman-halaman tersebut harus diletakkan pada folder public_html yang dapat kita buat dengan perintah mkd public_html. Untuk memulai mengupload kita harus memindahkan direktori/folder ke folder kita menyimpan halaman-halam web tersebut dengan perintah lcd A:\ kalau berada pada disket. Setelah itu kita harus menentukan transfer file tersebut secara Binnary atau ASCII, dengan cara mengetikkan BIN ( untuk binnary ) atau ASCII ( untuk ASCII ). Untuk mengupload file dengan perintah put <nama file>, untuk menghapus file dengan perintah del <nama file>, dan untuk mengambil file dengan perintah get <nama file>. Ingat untuk penulisan nama file harus sama ( Huruf besar/kecil berbeda ) dan kelemahannya adalah transfer yang dilakukan harus satu-persatu file ( tidak sekaligus ). 2. FTP Software Pada modul ini yang dipergunakan adalah Cute FTP, namun tidak menutup kemungkinan dipergunakan software FTP yang lain karena pada dasarnya sama. Untuk memulainya dengan membuka program Cute FTP dengan tampilan seperti pada (2) Gambar: (1) copyright@2007 by win.web.id 12
Untuk mengganti direktori/folder tempat kita menyimpan halaman web dengan menggantinya seperti yang ditunjukkan pada No.1. Untuk masuk ke server klik Connect seperti yang ditunjukkan pada gambar No.2. dan akan muncul seperti gambar berikut : (1) (2) (3) (4) No.1 Host atau server yang digunakan, mipa ( mipa.uns.ac.id / 202.158.48.245 ) atau uns ( mail.uns.ac.id / 202.158.48.243 ). No.2 Username yang akan dipergunakan. No.3 Password. No.4 Tombol untuk masuk ke server. Setelah itu akan muncul seperti pada gambar berikut : copyright@2007 by win.web.id 13
(3) (1) (2) Seperti pada DOS kita juga harus membuat folder public_html ( kecuali kalau sudah membuat tidak perlu ) dengan mengklik daerah yang ditunjukkan pada No.2 dan klik pada gambar No.3 dan ketikkan folder public_html. Untuk memulai memasukkan blok/klik pada file yang berada pada daerah yang ditunjukkan pada No.1 dan klik kanan Upload. Untuk mengambil file dari e-mail/ web kita dengan mengklik daerah yang ditunjukkan No.2 blok/klik dan klik kanan Download. Kemudian langkah penting terakhir adalah dengan CHMOD file supaya dapat diakses orang lain dengan cara memblok file pada daerah No.2 dan klik kanan CHMOD dan kita pilih untuk owner/group/outher itu hanya boleh membaca/menulis/mengeksekusi atau semuanya dengan mengklik kolom-kolom pilihan atau secara manual dengan memberikan angka-angka ( contoh 777 ) pada kolom manual. Hal tersebut sangat penting untuk menjaga keamanan web yang kita buat. Mungkin dari modul ini ada kekurangan kami sebagai penyusun mohon maaf, semoga bermanfaat dan dapat menambah wawasan kita mengenai cara pembuatan website. SELAMAT MENCOBA copyright@2007 by win.web.id 14