INSTALASI MIKROTIK ROUTER OS DAN BLOKING SITUS MENGGUNAKAN WEB PROXY

A. Teori singkat Mikrotik RouterOS:

MikroTik RouterOS™ merupakan sistem operasi Linux base yang diperuntukkan sebagai network router. Didesain untuk memberikan kemudahan bagi penggunanya. Administrasinya bisa dilakukan melalui Windows Application (WinBox). Selain itu instalasi dapat dilakukan pada Standard komputer PC (Personal Computer). PC yang akan dijadikan router mikrotik pun tidak memerlukan resource yang cukup besar untuk penggunaan standard, misalnya hanya sebagai gateway. Untuk keperluan beban yang besar (network yang kompleks, routing yang rumit) disarankan untuk mempertimbangkan pemilihan resource PC yang memadai.

B. Sejarah MikroTik RouterOS

MikroTik adalah sebuah perusahaan kecil berkantor pusat di Latvia, bersebelahan dengan Rusia. Pembentukannya diprakarsai oleh John Trully dan Arnis Riekstins. John Trully adalah seorang berkewarganegaraan Amerika yang berimigrasi ke Latvia. Di Latvia ia bejumpa dengan Arnis, Seorang darjana Fisika dan Mekanik sekitar tahun 1995.

John dan Arnis mulai me-routing dunia pada tahun 1996 ( misi MikroTik adalah me- routing seluruh dunia). Mulai dengan sistem Linux dan MS-DOS yang dikombinasikan dengan teknologi Wireless-LAN (WLAN) Aeronet berkecepatan 2 Mbps di Moldova, negara tetangga Latvia, baru kemudian melayani lima pelanggannya di Latvia.

Prinsip dasar mereka bukan membuat Wireless ISP (W-ISP), tetapi membuat program router yang handal dan dapat dijalankan diseluruh dunia. Latvia hanya merupakan tempat eksperimen John dan Arnis, karena saat ini mereka sudah membantu negara-negara lain termasuk Srilanka yang melayani sekitar 400 pengguna.


Linux yang pertama kali digunakan adalah Kernel 2.2 yang dikembangkan secara bersama-sama denag bantuan 5-15 orang staff Research and Development (R&D) MikroTik yang sekarang menguasai dunia routing di negara-negara berkembang. Menurut Arnis, selain staf di lingkungan MikroTik, mereka juga merekrut tenega-tenaga lepas dan pihak ketiga yang dengan intensif mengembangkan MikroTik secara marathon.


C. Jenis-Jenis Mikrotik

1. MikroTik RouterOS yang berbentuk software yang dapat di-download di www.mikrotik.com. Dapat diinstal pada kompuetr rumahan (PC).

2. MikroTik RouterBoard yaitu BUILT-IN Hardware Mikrotik dalam bentuk perangkat keras yang khusus dikemas dalam board router yang didalamnya sudah terinstal MikroTik RouterOS.

D. Alat dan bahan

• Laptop
• Iso MikroTik RouterOS 2.9.6
• Client Xp yang siap di gunakan
• VirtualBox

E. Langakah-langkah instalasi Mikrotik RouterOS 2.9.6

1. Buka Oracle VM VirtualBox, Klik New untuk melakukan instalasi mikrotik. Isi nama, Type dan Version sesuai dengan gambar di atas, kemudian klik Next







2. Isi size memori (RAM) 192 MB, Kemudian seterusnya pilih Next. Di Bagian location and size isikan 1,00 GB (1 GB) untuk ukuran drive nya.

3. Klik Start untuk menjalankan dan selanjunya klik icon browser dan cari iso mikrotik routerOS kemudian klik start

4. Perhatikan petunjuk pada gambar di atas. Kita pilih atau ketik “a” untuk select all dan” i” untuk install locally lalu enter dan ketikan huruf “y”

5. Setelah proses installed, jangan tekan Enter dulu. Pastika CD ISO ikrotik telah di non aktifkan. Cara menonaktifkanya yaitu pilih Device – hilangkan ceklist pada mikrotik

6. Ketikkan admin pada user dan klik Enter 2x tanpa mengisi password. Kemudian keluar dari mikrotik, matikan pilih poweroff

7. Klik setting - Network pada mikrotik yang akan di setting tadi. Pada kotak adapter 1, attached to: NAT. pada adapter 2 kita pilih attached to: Internal Network

 


8. Jalankan kembali mikrotik tadi di virtual box. Kemudian login dan ikutin seperti langkah di atas (a & I, ketik Y ) dan Enter setelah muncul perintah di bawah ini.

9. Ketikan perintah interface print untuk melihat berapa banyak network yang terpasang. Tadi kita telah memasang 2 network adapter 1: NAT dan adapter2: Internal Network.

10. Kemudian langkah selanjutnya mengganti nama interface-nya:

Ketikan perintah interface ethernet set ether1 name=WAN untuk mengganti nama R ether1. Dan interface ethernet set ether2 name=LAN untuk mengganti nama R ether2

11. Ketikan perintah ip address print untuk melihat berapa ip address pada network

12. Langkah selanjutnya masukan ip address untuk WAN dan LAN. Ketikan perintah berikut ini: ip address add address=192.168.1.10./30 interface=WAN kemudian enter dan masukan perintah untuk LAN sebagai berikut: ip address add address=192.168.501./29 interface=LAN kemudian enter. ketikan perintah ip address print untuk melihat hasil ip yang sudah di masukan.

13. Masuk di bagian route gateway. Keikan perintah ip route add gateway=192.168.50.10. kemudian enter. dan ketikkan kembali perintah ip route print untuk melihat hasilnya

14. Selanjutnya, memasukan ip dns. Ketikan perintah: ip dns set primary-dns=203.130.208.18 allow-remote-requsets=yes. Dan ip dns set secondary-dns=203.130.196.155 allow-remote-requsets=yes. Kemudian enter. ketikan perintah ip dns print untuk melihat alamat dns yang sudah di berikan.

15. Masuk ke Client Windows XP. Buka control panel > network and internet connection > network connection > Local area network - properties > internet protocol (TCP/IP) - properties > ceklist use the following ip address, dan isi colom tersebut denga nip yang tertera di bawah ini

 

16. Klik Start > Run > Comand Promt. Lalu ketikan peintah ping 192.168.50.10 untuk melihat sudah saling terkoneksi atau belum.

17. Buka internet Explore di Cilent (winows xp) kemudian ketikkan ip address s192.168.50.10 pada kolom search dan silahkan download software mikrotik disana

18. Kembali ke Mikrotik sekarang kita masuk di bagian setting NAT. Ketikkan perintah: ip firewall nat add chain=srcat action=masquerade out-interface=WAN. Kemudian cek dengan perintah ip firewall nat print

19. Selanjutnya koneksikan laptop ke jaringan wifi. klik kanan wifi dan buka status wifi tersebut. Dan lihat detail di sana. Catat ip yang di butuhkan seperti ipv4 address, ipv4 default gateway, dan ipv4 dns server

20. Ganti ip dns primary dan route geteway tadi dengan ip yang kita dapatkan dari wifi yang tersambung. Ketikan perintah: ip dns set primary-dns=192.168.43.1 allow-remote-request=yes. Kemudian cek dengan perintah ip dns print di bagian ip route gateway, hapus terlebih dahulu ip route lama dengan perintah ip route remove 2 dan masukan ip route baru: ip route add gateway=192.168.43.1

 


21. Ganti juga ip address lama dengan yang baru. Hapus ip address lama dengan perintah ip address remove 0. Dan masukan ip address baru: ip address add address=192.168.43.88/24.

22. Keluar dari mikrotik (poweroff) setting > network > adapter 1 > attached to: Bridged adapter. Kemudian jalankan kembali mikrotik dan ping yahoo.com. bila berhasil akan muncul notifikasi data yang berjalan

 

23. Buka PC client windows XP kembali. control panel > network and internet connection > network connection > Local area network - properties > internet protocol (TCP/IP) - properties > ceklist use the following DNS server address, dan isi colom tersebut dengan ip yang telah kita catat dari detail wifi yang terkoneksi

24. Selanjutnya langkah konfigurasi proxy. ketikan perintah berikut ini:

· ip web-proxy set enable=yes

· ip web-proxy set src-address=0.0.0.0

· ip web-proxy set port=3128

· ip web-proxy set transparent-proxy=yes

· ip web-proxy set parent-proxy=0.0.0.0:0

· ip web-proxy set hostname=www.namadomain.sch.id

· ip web-proxy set cache-administrator=namadomain.sch.id

· ip web-proxy set max-object-size=4096KiB

· ip web-proxy set cache-drive=system

· ip web-proxy set max-cache-size=unlimited

· ip web-proxy set max-ram-cache-size=unlimited

Cek konfigurasi proxy dengan perintah ip web-proxy print

25. Selanjutnya konfigurasi port Acess. Ketikan perintah: ip firewall nat add chain=dstnat protocol=tcp dst-port=80 action-redirect to-port=3128

F. Blocking website menggunakan Mikrotik

Untuk memblokir suatu website agar tidaj bias di akses oleh PC Client. Ketikan perintah: ip web-proxy access add url=www.youtube.com method=any action=deny untuk memblokir youtube dan ip web-proxy access add url=www.yahoo.com method=any action=deny untuk memblokir yahoo

Cek pada PC Client untuk mengetes apakah situs website tadi yang di blokir bias di akses atau tidak. Bila terdapat oesan Error berarti website tersebut berhasil di blokir.

Read more ...

BAB VIII PENDAHULUAN WEB HOSTING

Web Hosting adalah salah satu bentuk layanan jasa penyewaan tempat di Internet yang memungkinkan perorangan ataupun organisasi menampilkan layanan jasa atau produknya di web/situs Internet.Tempat dapat juga diartikan sebagai tempat penyimpanan data berupa megabytes (mb) hingga terabytes (tb) yang memiliki koneksi ke internet sehingga data tersebut dapat direquest atau di akses oleh user dari semua tempat secara simultan. Inilah yang menyebabkan sebuah website dapat diakses bersamaan dalam satu waktu olehm ulti user.

Pada dasarnya sebuah server webhosting menggunakan sebuah computer biasa namun menggunakan beberapa komponen dan program dasarsebuah server serta di sarankan harus mampu untuk online 24 jam setiap hari dan tanpa harus dimatikan dalam jangka waktu lebih lama dari padakomputer biasa.

Setiap orang ataupun perusahaan dapat menyewa tempat atau memanfaatkan jasa web hosting ini, didukung dengan kemajuan teknologi informasi yang ada saat ini maka pemanfaatan jasa web hosting merupakan sarana alternatif yang handal untuk Promosi, MenyebarkanInformasi, Berjualan, Layanan Publik sampai dengan sekedar tempat untuk menumpahkan isihati yang kelabu kedalam buku harian berbasis web (blog: web-blog) akibat ditinggal kekasih.

Salah satu teknologi yang digunakan untuk web hosting adalah fail over hosting, teknologi ini memungkinkan layananan tetap online 24 jam karena dudukung oleh beberapa server komputer yang secara otomatis akan menggantikan tugas server komputer yang mengalami kerusakan.

Di dunia internet, webhosting sangat penting sekali karena disinilah tempat untuk menaruh data-data atau file-file yang digunakan dalam web. Web hosting ini ada yang gratis namun ada juga yang harus bayar. Setiap provider webhosting biasanya memberikan penawaran yang berbeda mulai dari kapasitas, bandwith, feature2 dan lain2. 

Tidak bisa dipungkiri bahwa mendapatkan sesuatu yang gratis adalah salah satu pengalaman yang paling menyenangkan dalam hidup, tetapi tentu saja hal itu tidak dapat memberikan hasil yang maksimal untuk jangka waktu lama. 

Dengan menggunakan web hosting gratisan akan memungkinkan anda untuk menyimpan data pada server tanpa harus mengeluarkan uang sepeser pun. Jenis layanan ini dianggap ideal bagi pemula yang tertarik untuk belajar cara kerja web hosting. Salah satu layanan web hosting gratisan terbaik yang dapat anda gunakan adalah 000webhost. Pada web hosting ini juga terdapat hosting berbayar atau tidak gratis, anda harus mengeluarkan duit lagi untuk menyewa hosting tersebut, tentu saja layanan dan fitur-fitur dari hosting ini lebih unggul di bandingkan dengan hosting gratisan.

Sebelum memilih web hosting gratisan perlu diingat bahwa situs web Anda dapat dipenuhi berbagai jendela pop-up dan banner iklan yang dapat mengganggu pengunjung website Anda. Penyedia web hosting gratisan tidak mendapatkan uang dari jasa mereka, melainkan mereka mendapatkan uang dari iklan. Berdasarkan referensi dari bacaan-bacaan di internet, contoh layanan webhosting gratis tanpa iklanhttp://www.000webhost.com/

Layanan web hosting gratisan memiliki sangat banyak keterbatasan. Oleh karena itu jika, disarankan untuk memilih web hosting yang berbayar. Dengan memilih layanan hosting berbayar, ada banyak keuntungan yang tidak dimiliki oleh layanan web hosting gratisan seperti stabilitas serta kontrol secara keseluruhan atas file dan data-data Anda. Dengan berbagai macam keuntungan, banyak layanan web hosting berbayar tersedia dengan harga yang sangat murah dan terjangkau. Perlu diingat juga bahwa dengan menggunakan hosting gratisan, tidak ada jaminan jika suatu saat data-data atau file-file Anda hilang. 000webhost merupakan salah satu penyedia layanan web hosting gratisan terbaik, namun saya pernah membaca pengalaman para blogger yang menggunakan jasa mereka dikecewakan karena data-data mereka dalam hosting hilang dalam sekejap. Oleh karena itu, jika Anda ingin benar-benar serius berbisnis di dunia internet, sangat disarankan agar Anda memilih web hosting berbayar (sekalipun paket yang termurah), paling tidak data-data Anda aman

Layanan web hosting berbayar juga menyediakan layanan tambahan seperti control panel pengguna, account email, statistik situs, site builder dan banyak lagi. Fitur-fitur ini membantu Anda dalam membangun website Anda dengan mudah dan tanpa repot. Dengan kata lain, anda perlu mengeluarkan sedikit uang untuk memilih layanan web domain hosting berbayar. Jumlah uang yang dikeluarkan untuk layanan ini tergantung pada perusahaan yang dipilih serta jenis paket hosting yang Anda butuhkan.

Layanan web hosting berbayar memungkinkan situs kita medapatkan banyak pengunjung dan meng-upload file lebih banyak ke server dibandingkan dengan layanan yang ditawarkan oleh penyedia web hosting gratisan. sebagai kesimpulan, jika Anda benar-benar ingin serius memulai bisnis online dan ingin mendapatkan banyak pengunjung dari website anda, sangat disarankan untuk memilih layanan web hosting berbayar.

Dalam tugas mandiri ini saya mencoba untuk membuat tutorial singkat, bagai mana cara mendapatkan hosting gratis di 00webhost.com sampai dengan mengupload file *.html yang telah di desain menggunakan Macromedia Dreamweaver.

KEMBALI BAB VI ===>>> KLIK DISINI <<<===

Read more ...

BAB VI MEMBUAT FRAME

6.1 Membuat Frame dan Frameset

Frame adalah bagian atau lokasi bebas di dalam jendela browser yang menampilkan halaman web berbeda dengan bagian yang lain.

Frameset adalah file HTML yang mengammbarkan layout dan properties , termasuk jumlah frame , ukuran serta penempatan frame dan URL dari masing masing halaman yang pertama kali ditampilkan pada masing masing frame.

Dengan menggunakan Frame sebagai pembagi halaman akan mengurangi beban server dalam enjalankan proses, karena server hanya bekerja sekali saja untuk menampilakan halaman yang permanen. 

6.2 Menambahkan Frameset dari Sample

Cara menampilkan border frame :

Menu View – Visual Aids – Frame Border

Menambah Frame di halaman aktif:

Cara1 : Menu Insert – HTML – Frames – Pilih Frame

Cara2 : Klik Panel Insert di kategory Layout – Klik 

tombol Frames – Pilih salah satu 

Menambah Frame saat pertama kali membuat file baru caranya:

--> File – New – Kategory Framesets – Pilih Framesetnya dan Create

6.3 Membuat Frameset Sendiri

Aktifkan jendela dokumen atau di dalam frame yang akan dipecah.

1. Menu Modify – Frameset.

2. Pilih item:

- Spilt Frame Left, menambah frame baru di sebelah kiri frame yang aktif atau memecah halaman aktif menjadi 2 frame (kanan kiri)

- Split Frame Right, menambah frame baru di sebelah kanan frame yang aktif atau memecah halaman aktif menjadi 2 frame (kanan kiri)

- Split Frame Up, menambah frame baru di atas frame yang aktif atau memecah halaman aktif menjadi 2 frame (atas dan bawah)

- Split Frame Down, menambah frame baru di bawah frame yang aktif atau memecah halaman aktif menjadi 2 frame (atas dan bawah) 

6.4 Memecah,Menghapus dan Mengubah Ukuran Frame

Memecah Frame:

Cara1 : Klik tahan dan geser border di tepi halaman ke tengah halaman di tampilan Design.

Cara2 : Untuk memecah frame menggunakan border frame yang tidak di tepi, gunakan kobinasi Alt dan klik tahan dan geser.

Menghapus Frame :

Klik tahan dan geser border frame ke luar halaman.

Mengubah ukuran frame:

Cara1 : Klik tahan dan geser border frame.

Cara2 : Untuk ukuran yang pasti ketik di properti.

6.5 Menyeleksi Frame dan Frameset

Seleksi frame dapat menggunakan Panel Frames.

Bila terseleksi maka akan ada garis putus putus.

Untuk menampilkan panel frame: 

Menu Windows – Frames atau Shift + F2.

Cara menyeleksi :

- Untuk memilih frame, klik langsung pada kotak frame.

- Untuk memilih frameset, klik border/bingkai di sekeliling frameset.

Cara lain memilih frame tekan Shift + Alt dan klik frame di dalam frame pada tampilan jendela Design.

6.6 Membuka dokumen di dalam Frame

Kita dapat menentukan isi frame dengan menambahkan isi baru ke dalam dokumen atau membuka dokumen yang telah ada ke dalam frame:

1. Tempatkan pointer ke dalam frame.

2. Menu File – Open in Frame.

3. Pilih dokumen.

4. Ok.

6.7 Menyimpan Frame atau Frameset

Sebelum menampilkan di jendela browser , kita harus menyimpannya dahulu:

1. Seleksi Frameset mengunakan Panel Frames

2. Menu File – Save Frameset.

3. Pastikan lokasi penyimpanan.

4. Ketik nama file.

5. Save.

6.8 Menampilkan dan Mengatur Properti Frame

Langkah mengatur properti frame :

1. Seleksi Frame:

Cara1 : Tekan Alt dan klik pada frame di jendela dokumen 

Cara2 : Tampilkan Panel Frames, Klik frame yg diinginkan.

6.9 Menampilkan dan Mengatur Properti Frame

Keterangan properti frame :

Frame Name ,pemberian nama frame sangat penting sbg referensi script dan target link( tidak boleh tanda spasi, titik,minus,harus diawali dengan huruf.

Src, menentukan sumber dokumen frame.

Scroll,menampilkan scroll/batang penggulung frame

No Resize,Menonaktifkan perubahan ukuran frame.

Borders, Mengatur border frame.

Border Color, Mengatur warna border.

Margin Width, Mengatur batas kanan dan kiri.

Margin Height, mengatur jarak margin atas dan bawah 

6.10 Menampilkan dan Mengatur Properti Frameset

Seleksi frameset.

1. Tampilan:

Keterangan:

- Border, mengatur tampilan border frameset.

- Border width, mengatur semua lebar border frameset.

- Border color, mengatur warna border frameset 

- Row, mengatur tinggi baris atau lebar kolom yang dipilih 

- Unit, mengatur lebar/tinggi frameset(satuan)

- RowCol Selection, memilih bagian kolom atau baris dengan klik tabulasinya.

6.11 Membuat Link pada Frame

Seleksi teks atau objek link pada jendela Design.

1. Dengan mengunakan kotak Link pada properti HTML:

Cara1 : Klik Browse to File, pilih file di dia;og Select File.

Cara2 : Klik Point to File, klik tahan dan geser ikon tersebut ke file tujuan link yang terdapat di panel File.

2. Di kotak Target , pilih frae /jendela yangb akan dihubungkan dengan dokumen yang harus ditampilkan.

6.12 Membuat Link pada Frame

Keterangan pilihan dalam kotak target:

- _blank , membuka dokumen yang dihubungkan dala jendale browser , serta membiarkan jendela sebelumnya tetap terbuka.

- _parent , membuka dokumen yang dihubungkan dalam fremeset induk link yang ditampilkan, kemudian mengganti seluruh frame.

- _self , mebuka dokumen yang dihubungkan dengan frame yang sedang dipilih atau aktif yang menjadi lokasi teks link, lalu mengganti isi frame tersebut.

- _top , membuka dokumen yang dihubungkan dalam jendela browser , lalu mengganti seluruh frame.

- Nama nama frame juga ditampilkan pada bagian ini, kita dapat memilihnya untuk membuka dokumen dalam frame tersebut

BAB VII

BEKERJA DENGAN GAMBAR

7.1 Menyisipkan Gambar
Tipe file Gambar :
1. GIF (Graphic Interchange Format). Maks 256 warna.
2. JPEG (Joint Photographic Experts Group).jutaan warna.
3. PNG (Portable Network Group)

Cara Menyisipkan Gambar :
Cara 1 : Panel Insert, klik ikon tombol Image.
Cara 2 : Panel Insert , Klik tahan geser ikon Image ke jendela dokumen.

Cara 3 : Menu Insert – Image.
Cara 4 : Panel Asset – klik tahan dan geser gambar ke dokumen.
Cara 5 : Panel File , klik tahan dan geser gambar.
Cara 6 : Ctrl + Alt + I
Catatan : “Setiap gambar di simpan di Root Site”


7.2 Mengatur Properti Gambar
Panel properties digunakan untuk mengatur seluruh properti gamabar seperti :
- ID, memberi id atau nama objek gambar.
- W dan H, mengisi ukuran lebar dan tinggi gambar.
- Src, tampilkan lokasi penyimpanan file, tentukan gambar
- Link, mengisi link gambar.
- Align, menetukan perataan gambar.
- Alt, menampilkan teks alternatif saat gambar ditampilkan di browser.
- Class, menentukan nama class CSS yang digunakan untuk memformat gambar.
- Map Name, megisi nama area hotspot
- Vspace dan Hspace, menentukan jarak spasi di sekitar gambar

7.3 Mengatur Properti Gambar
- Hotspot tools, membuat area hotspot.
- Target, memilih frame atau dokumen yang harus ditampilkan.
- Border, memasang ukuran border gambar (pixel).
- Edit, mengedit gambar dengan program editor lain.(photoshop)
- Edit Image Setting, mengubah aturan gambar (ukuran tipe gambar)
- Crop, memotong gambar.
- Resample, menampilkan hasil perubahan ukuran gambar dan peningkatan kualitas foto pada ukuran dan jenis.
- Brightness and Contrass, mengatur pencahayaan dan kontras gambar.
- Sharpen, mengatur ketajaman gambar.
- Reset Size, mengembalikan ukuran lebar dan tinggi gambar ke ukuran semula.


7.4 Mengatur Ukuran Gambar
Cara 1 :
- Pilih gambar.
- Pada panel Properties masukan nilai W dan H.

Cara 2 :
- Seleksi gambar.
- Arahkan pointer pada kotak handle.
Tekan Reset Size untuk mengembalikan ukuran semula.

7.4 Memberi Border pada Gambar
Cara membuat border :
1. Pilih gambar.
2. Pada properties beri nilai di kotak Border.
3. Enter.


7.5 Memotong Gambar
Cara cropping :
1. Pilih gambar.
2. Modify – Image – Crop.
3. Atur area cropping.
4. Tekan Enter atau klik ikon Crop lagi.

7.6 Mengatur Ketajaman Gambar
Cara mengatur ketajaman :
1. Pilih gambar.
2. Modify – Image – Sharpen atau klik ikon Sharpen
3. Masukan nilai atau geser slider.
4. Ok.


7.8 Mengatur Brightness dan Contrast
Cara mengatur gelap terang dan kontras:
Pilih gambar.
Modify – Image - Brightness dan Contrast.
Geser slider atau beri nilai. Ok.


7.9 Memberi Link pada Gambar
Cara memberi link pada gambar:
1. Pilih gambar.
2. Isi kotak Link atau mengunakan Point to File.


7.10 Membuat Link dengan Image Map
Image Map adalah suatu gambar yang memiliki daerah tertentu yang dapat diberi link.
1. Pilih gambar.
2. Pada properties klik ikon Hotspot Tool.
3. Seleksi daerah yang ingin di beri link.
4. Masukan file link tujuan.
5. Simpan.

7.11 Menggunakan Rollover Image
Rollover Image digunakan untuk menganti tampilan awal gambar dengan tampilan gambar lain ketika pointer diarahkan pada gambar awal.

1. Aktifkan pointer di dokumen.
2. Klik di panel Insert pilih drop down di Image.
3. Pilih Rollover Image.
4. Isi Original dan Rollover Image.
5. Ok.


7.12 Membuat Swap Image

Behavior Swap Image mempunyai fungsi yang sama seperti Rollover Image, yaitu menganti gambar dengan gambar lain, swap image tidak ditentukan link ke alamat URL sebagai link tujuan.

1. Pilih gambar.
2. Beri ID gambar.
3. Aktifkan panel behavior klik tombol +
4. Pilih gambar penganti di Browse.
5. Ok.



KEMBALI BAB V ===>>> KLIK DISINI <<<===
NEXT PAGE ====>>> KLIK DISINI <<<====

Read more ...

BAB V LAYOUT HALAMAN DENGAN HTML

5.1 Membuat table

Cara membuat tabel:

1. Menu Insert , Tabel.
2. Dialog pembuatan tabel:

- Rows, menentukan jumlah baris tabel.
- Columns, menentuka jumlah kolom tabel.
- Width, menentukan ukuran lebar tabel (pixel,persen)
- Border, ketebalan border atau batas tabel.
- Cell Padding, jarak antar isi sel dgn batas tepi sel
- Cell Spacing, menentukan jarak antar sel dlm tabel.
- Header , memberi keterangan teks .


5.2 8.1 Membuat table
Urutan prioritas format pada tabel :
1. Sel
2. Baris
3. Tabel
Bila kita merubah bgcolor pada sel dengan warna merah kemudian merubah bgcolor di tabel maka sel tadi tetap tetap merah.


5.3 Mengatur properti table
Menampilkan properties:
Cara 1 : Windows – Properties
Cara 2 :Ctrl + F3
Menyeleksi atau memilih tabel agar tampil di properti:
Cara 1 : Klik sudut kiri atas tabel
Cara 2 : Pilih tabel, menu Modify, Tabel, Select Tabel
Cara 3 : Gunakan tag <table> pada tag selector.

5.4 Mengatur properti table
Keterangan properties table :
Table Name, memberi nama tabel.
Number of Rows, menentukan jumlah baris dalam tabel.
Number of Columns, menentukan jml kolom di tabel.
Width, menentukan lebar tabel dengan satuan persen / pixel.
Heght, menentuka tinggi tabel .(persen/pixel)
CellSpace, menatur jarak antar sel tabel
CellPad, mengatur jarak antara isi sel dengan batas tepi sel
Alignment, mengatur perataan tabel dala jendela dokumen.


5.5 Mengatur properti table
Keterangan properties table :

Border Width, menentukan ketebalan garis bingkai. Clear Column Width, menghapus lebar kolom tabel. Convert Tabel to Pixels, merubah satuan lebar persen ke pixel. Convert Tabel to Percent, mrubah satuan lebar pixel ke persen. Clear Row Height, menghapus nilai tinggi baris tabel. Class, mengatus class CSS yg akan digunakan. 

5.6 Memilih elemen table
Memilih Satu Sel, letakan atau aktifkan pointer pada salah satu sel. Memilih beberapa sel,
Cara 1 : Klik pada sel , geser mouse ke sel lain .
Cara 2 : Pilih salah satu, tekan Shift, Klik sel yg lain(berurutan).
Cara 3 : Pilih salah satu, tekan Ctrl, Klik sel yg lain(acak).
Memilih baris. Memilih satu kolom

5.7 Mengubah ukuran tabel,baris,kolom
Mengubah lebar dan tinggi tabel, seleksi tabel, geser kotak pengatur ukuran tabel.
Mengubah lebar kolom, geser garis pebatas kolom.
Mengubah lebar seluruh kolom scr bersamaan, tekan Shift dan geser garis pebatas kolom.
Pengaturan lebar / tinggi baris dengan properti, isi pada kotak input W untuk lebar dan H untuk tinggi. (pixel/persen)


5.8 Menambah dan menghapus baris,kolom
Menambah baris atau kolom tunggal :
- Klik salah satu sel.
- Modify-Table-Insert Row untuk menambah baris baru.
- Modify-Table-Insert Columns untuk menambah kolom baru.

Menambah beberapa baris / kolom sekaligus.
- Klik salah satu sel.
- Modify-Table-Insert Row or Column.
- Insert : pilih baris atau kolomyg di tambah
- Number of : Jumlah baris/kolom yg akan ditambah Where : letak satelah/sebelum, atas/bawah


5.9 Menambah dan menghapus baris,kolom
Menghapus baris atau kolom:
- Aktifkan sel yang ingin dihapus.
- Modify – Table – Delete Row, untuk menghapus baris.
- Modify – Table – Delete Column, untuk menghapus kolom.
atau
- Pilih / seleksi satu kolom / satu baris penuh, Delete.

5.10 Mengubah properti sel table
Pastikan kursor berada berada di sel. Keterangan properti:
- Merges selected cells using spans, mengabungkan dua atau lebih sel.
- Splits cell into roes or columns, memecahkan sel menjadi beberapa baris atau kolom.
- Horz/ Horizontal Alignment of the sell contents, mengatur tata letak teks (kanan, kiri, tengah).
- Vert/Vertical Alignment of the cell contens, mengatur perataan vertikal isi sel, baris, atau kolom.
- Width of cell in pixels or percent, mengatur lebar sel (pixel/%)
- Height of cell in pixels or percent, mengatur tinggi sel (pixel/%)
- No wrap, mencegah agar teks yg dimasukan tidak melipat/pindah baris.
- Header, mengubah sel yg dipilih sebagai judul tabel.
- Background Color, memberi warna latar belakang.


5.11 Membuat tabel isi
Tabel isi adalah tabel yang diletakan di dalam sebuah sel.
Ukuran tabel isi terbatas atau tidak boleh melebihi ukuran sel . Cara membuat :
- Letakan kursor di sel lokasi tabel yang akan disisipkan.
- Menu Insert, Tabel, isikan dialog tabel.

Untuk mendapatkan desain yang rapi, khusus tabel ini gunakan ukuran 100 % agar ukuran tabel isi dapat menyesuaikan dengan ukuran sel lokasinya.
Ok.


5.12 Mengurutkan data table
Bisa mengurutkan tabel berdasarkan isi dari 2 kolom.
Tidak bisa mengurutkan baris yang tabelnya berisi kolom yang digabung. Cara :
- Pilih table .
- Menu Commands – Sort Table

Keterangan dialog Sort Tabel:
- Sort by, sebagai sel kunci untuk mengurutkan isi kolom tabel
- Order, untuk menentukan sistem pengurutan (alfabet/numerik) dan pola pengurutan (Ascending/Descending)
- Then by, menentukan sel kunci pengurutan kedua.


5.13 Mengunakan expanded mode

Adalah fasilitas sementara yg digunakan untuk menambahkan nilai CellPad dan CellSpace semua tabel di dalam dokumen, termasuk enambah border agar tabel mudah di edit. Kita akan dimudahkan dalam memilih item di dalam tabel dan menempatkan kursor dengan tepat.

Caranya :
- Posisikan di jendela Design
- Menu View – Table Mode – Expanded Table

Untuk keluar :
- Klik exit di bagian atas jendela atau
- Menu View – Table Mode – Standar Mode.

KEMBALI BAB IV ===>>> KLIK DISINI <<<===

NEXT PAGE ====>>> KLIK DISINI <<<====

Read more ...

BAB IV MEMBANGUN HALAMAN WEB DENGAN CSS

1.1 Pendahuluan
Adalah sekumpulan kode yang digunakan untuk mengformat, mengendalikan tampilan isi dalam suatu halaman web.

Ada 2 jenis :
1. Bersifat eksternal, tersimpan berupa file css. Memudahkan dalam pengeditan karena biasanya dihubungkan dengan link.
2. Bersifat internal, tersimpan di halaman web. Bila terjadi perubahan format, akan harus melakukan banyak pengeditan pada semua file.

1.2 Memahami CSS
Diberikan dalam bentuk kode kode yg dikumpulkan dan merupakan pernyataan yg diciptakan oleh HTML (selector). Kemudian dinyatakan dalam bentuk properti dan nilai.
Contoh :
h1 {color: #F00;}
body {color: red ; background:black;}
h2 {font-size : 16px ; font:-weight: bold;}

Properti CSS dan kesatuan yg saling mendukung disebut deklarasi.


1.3 Mengelompokkan Properti
Kadang kita harus mengubah properti sekaligus atau dengan cara mengelompokkan deklarasi dibatasi dengan tanda titik koma (;) .

h1 { color:#F00;
font-family : :Arial Black”, Gadget,sans-serif;
text-align : center;}

Pengelompokan selector:
H2, p, em {color : red}

1.4 Turunan property
Contoh :
ol {color:#F00;}
ul { color:#0F0;}

===========================
<ol><li>test</li><li>css</li> </ol> <ul><li>test</li><li>css</li></ul>


1.5 Membuat class baru dan id inspector
Class diawali dengan tanda titik (.)
Contoh class:
.testhijau {
color: #55DF00;}

Cara memangilnya:

<p><span class="testhijau">

1.6 Membuat class baru dan id inspector
Id inspector
Diawali dengan tanda ostotrop (#)
Contoh Id Inspector:
#footer { padding: 0 10px;
background:#55DF00;}

Cara memangilnya:

<div id="footer">

1.7 Cara menulis CSS

1. External Style Sheet

File berisi kode CSS yang menghubungkan satu atau lebih halaman web. Bila ingin merubah beberapa halaman web cukup 1 file saja yang di ubah.

Ada 2 metode:
- Metode Link:
<link href=“formatjudul.css” rel =style sheet type=“text/css”>
- Metode Impor:
<style type=“text/css”>
<!- -@import url(“formatbaru.css”); -></style>

1.8 Cara menulis CSS
Embedes Style

Metode penulisan CSS dengan meletakan di dalam sepasang tag <style>…</style>
Biasanya diletakan pada tag <head>, meskipun sebenarnya bisa diletakan di bagian manapun dari halaman web.
- Inline Style

Metode penulisan CSS yang ditulis di dalam tag HTML.
Contoh:
<div id=“apDiv1”
style= “position:absolute; visibility:inherent ; left:314px;
top:62px></div>


1.9 Bekerja dengan Panel css style
Cara membuka Panel CSS:
Cara1 : Menu Window – CSS Style
Cara2 : Klik panel CSS Style pada group panel sisi kanan jendela
Cara3 : Shif + F11


4.10 Memahami tampilam mode all
Ada 3 jenis tampilan:

1. Category Vew, menampilkan properti berdasarkan kategory masing masing. Font,Background, Block dll
2. List View, untuk menampilkan properti dala urutan abjad A-Z.

1.10 Memahami tampilan mode current
Mode Current memiliki 3 bagian:

Summary for selection, menampilkan properti CSS yang sedang dipilih di dalam jendela dokumen.Rules, menampilkan bagian bagian dalam jendela dokumen yang enggunakan CSS yang sedang aktif.Properti for “Nama Rule”, menampilkan properti dari CSS yang terpilih kita dapat merubahnya disini.Show Only Set Properties, untuk menampilkan properti yang terpasang atau yan digunakan pada CSS yang terpilih di bagian All Rules.

1.11 Membuat style css
Cara menampilkan dialog New CSS Rule:
Cara 1: Pilih menu Format – CSS Style – New
Cara 2: Di panel CSS Style, klik tombol New CSS Rules
Cara 3 :Klik tombol CSS pada panel properties – Klik Edit Rule.


1.12 Membuat style css
Selector Type:
- Class, untuk membuat style yg dapat diterapkan pada beberapa elemen HTML sbg atribut class.
- ID, untuk enggambarkan suatu format tag yang berisi ID spesifik.
- Tag, menggambarkan sebuah format tag HTML yang spesifik.
- Compound, kode campuran bisa 2 atau lebih class, tag, dan ID scr bersama sama.

1.13 Membuat style css
Choose where your rule will be defined :

1. This Document Only, untuk menempelkan style CSS pada dokumen yg aktif, biasanya diletakan pada bagian head.
2. New Style Sheet File, untuk membuat style CSS sbg file tersendiri (external file)
3. The Style Sheet, untuk menempatkan kode di dalam lembar style yang siap di tempatkan pada jendela dokumen .

1.14 Memodif Style CSS
Cara menampilkan dialog CSS RuleDefinition:

1. Buka panel CSS Style.
2. Double klik nama CSS yang akan diatur.

1.15 Mengatur properti css
Keterangan properti pada kategori Type:
Font-family, untuk mengatur kelarga huruf.
Font-size, untuk mengatur ukuran huruf.
Font-style, untk mengatur huruf menjadi tampilan normal.
Line-height, mengatur tinggi baris di atas teks.
Text-decoration, digunakan untuk menagtur efek garis bawah, efek coret atau efek blink.
Font-weight, untuk mengatur ketebalan huruf.
Font-variant, untuk menangatur huruf menjadi huruf kapital berukuran kecil.
Text-transform, mengatur bentuk penulisan atau besar kecilnya huruf.
Color, untuk mengatur warna text

4.16 Mengatur properti css
Keterangan properti pada kategori Background:
Backgroud-color, mengatur warna background
Background-image , mengatur gambar sebagai background
Background-repeat , menentukan pengulangan background:
- no-repeat, gambar tidak digandakan
- repeat , gambar diulang
- repeat-X, gambar diulang secara horisontal
- repeat-y, gambar diulang secara vertikal

Background attachment, menagtur tampilan pasti atau menggulung
Background-position x dan y, menentukan posisi awal penempatan gambar

1.16 Mengatur properti css

Keterangan properti pada kategori Block : Word spacing, mengatur jarak spasi antar kata Letter spacing, mengatur jarak spasi antar huruf.Vertical Align, perataan secara vertikal Text Align, mengatur perataan teks. Text Indent, mengatur jarak identasi teks baris pertama. White Space, mengatur white space yg sedang dikerjakan Display, menetapkan unsur unsur yg ingin ditampilkan.

1.17 Mengatur properti css

Keterangan properti pada kategori BOX: Width dan Height, mengatur tinggi dan lebar elemen.Float, mengatur segala sesuatu yg berada di sekitar elemen.Clear, menetapkan bagian yg tidak dpt disispi dgn elemen.Padding, mengatur nilai jarak isi dgn border objek.Margin, mengatur nilai jarak dgn objek lain.

4.18 Mengatur properti css
Keterangan properti pada kategori Border: Style, memilih bentuk border. Width, memilih ketebalan borderColor, memilih warna border.

4.18 Mengatur properti css
Keterangan properti pada kategori List:

List-style-type, memilih bentuk penomoran atau bullet. List-style-image, memilih bentuk bullet lain. Browse untuk mencari gambar untu bullet. List-style-option, mengatur apakah teks dari daftar (list) melipat dan agak masuk (outside), atau melipat ke margin sebelah kiri (inside)

4.19 Mengatur properti css
Keterangan properti pada kategori Positioning:

Positioning, menentukan posisi objek pada jendela browser. Visibility, menentukan kondisi awal tapilan objek. Z-index, mengatur posisi penumpukan objek. Overflow, menentukan akibat apabila isi objek melibihi ukuran. Placement, menentukan ukuran dan lokasi blok isi. Clip, mengabarkan bagian isi yg ditampilkan.

KEMBALI BAB III ===>>> KLIK DISINI <<<===

NEXT PAGE ===>>> KLIK DISINI <<<===

Read more ...

BAB III BEKERJA DENGAN FILE DAN DESAIN WEB

3.1 Beberapa type file
- CSS, (Cascading Style Sheet) ekstensi .css . Untuk format isi HTML dan mengendalikan posisi berbagai unsur unsur halaman.
- GIF (Graphics Interchange Format) ekstensi .gif .Untuk kartun, logo, grafis, area trasparan, dan animasi. Memiliki maksimum 256 jenis warna.
- JPEG (Joint Photographic Experts Group) ekstensi .jpg . Untuk foto dan gambar dengan kualitas warna tinggi, mengatasi untuk 256 jenis warna.
- XML (Extensibel Markup Language) ekstensi .xml . File ini berisi data di dalam suatu form mentah yang dapat diformat dengan menggunakan XSL.
- XLS (Extensibel Stylesheet Language) ekstensi .xsl atau .xslt . Untuk tipe data XML yang akan ditapilkan di halaman web
- CFML (ColdFusion Markup Language) ektensinya .cfm . Untuk halaman dinamis
- PHP (Hypertext Preprocessor) ektensinya .php . Untuk halaman dinamis


3.2 Layout css menyediakan kolom
- Fixed, lebar kolom telah ditetapkan dala satuan pixel. User tidak bisa merubah di browser.
- Elastic, Lebar kolom ditetapkan berdasarkan suatu unit pengukuran (ems) yang sesuai dengan ukuran teks. Desain akan menyesuaikan jika pengunjung merubah setting teks tanpa merubah ukuran dasar jendela browser.
- Liquid, Lebar kolom ditetapkan berdasarkan persentasi dari lebar browser pengunjung site. Desain akan menyesuaikan mengubah browser menjadi panjang pendek tanpa mengubah setting teks.
- Hybrid, Kolo kombinasi dari tiga pilihan sebelumnya.


3.3 Page properties
Cara 1: Cara 2:
- Menu Modify - Ctrl + J
- Page Properties

Ada 6 Kategory:

Apperance(CSS), mengatur properties halaman menggunakan bahasa css. Apperance(HTML), mengatur properties halaman dalam bentuk kode html. Links (CSS), menentukan font,ukuran,warna links. Heading (CSS), menentukan style untuk teks naskah. Title/Encoding, untuk mengisi judul. Tracing Image, menampilkan gambar sementara pada latarbelakang 

3.4 Memberi judul
Cara1:
- Di page properties , masuk ke Title/Encoding
- Ketik judul di Title.

Cara2 :
- Menu View, Head Co

nten, klik ikon title.
- Ketik judul di Title.

Cara3 :
- Bagian bar Document langsung ketik judulnya di Title.

3.5 Background gambar
Cara :
- Masuk ke Page Properties.
- Pilih Tab Appearance(HTML) atau (CSS).
- Browse bagian Backgroung Image.
- Pilih, OK.
- Apply.

3.6 Background warna
Cara :
- Masuk ke Page Properties.
- Pilih Tab Appearance.
- Klik menu drop-down pada bagian Backgroud Color.
- Pilih warna.

3.7 Mengatur warna teks

Cara :
- Masuk ke Page Properties.
- Pilih Tab Appearance.
- Klik menu drop-down pada bagian Text Color.
- Pilih warna.

3.8 Mengatur warna link
Cara :
- Masuk ke Page Properties.
- Pilih Tab Links.
Ada pilihan:
- Links Color, warna semua teks yang ada link.
- Visited Links, warna pada link yang sudah pernah dikunjungi
- Active Links, warna pada saat link saat di masih tekan.
- Rollover Links, warna yang digunakan saat pointer melewati link tersebut.

3.8 Ukuran margin halaman
Cara :
- Masuk ke Page Properties.
- Pilih Tab Appearance.
- Isi kotak Margin:

1. Left margin,
2. Top Margin
3. Right Margin
4. Bottom Margin.

3.9 Menyisipkan karakter khusus

Cara1 :
- Menu Insert – HTML - Special Character.
- Pilih karakter khusus.

Cara2 :
- Klik Insert di panel group, ganti kategory menjadi Teks.
- Pilih karakter khususnya.

3.10 Menambah tanggal
Cara:
- Taruh Pointer di objek.
- Menu Insert – Date.
- Pilih Format.
- Centang “Update Automatically on Save”
- Ok

3.11 Menyisipkan garis horizontal
Cara :
- Taruh Pointer di objek.
- Pilih menu Insert.
- HTML
- Horizontal Rule

3.12 Mengatur format/font huruf
Cara :
- Seleksi teks.
- Menu Format – Font.
- Plih Font.
- Ok.


3.13 Mengatur warna
Cara :
- Selesi teks yang akan dirubah.
- Menu Format – Color.
- Pilih warna, Ok.

3.14 Mengubah ukuran
Cara :
- Seleksi teks.
- Klik CSS pada panel Properties
- Size
- Pilih ukuran.

3.15 Mengatur perataan teks
Cara1:
- Seleksi text.
- Menu Format – Align.
- Pilih jenis perataan.

Cara2 :
- Seleksi text.
- Klik tombol CSS pada panel Properties
- Pilih jenis Ratanya.


3.16 Mengatur style teks
Cara :
- Menu Format – Style .
- Pilih format :
1. Bold
2. Italic
3. Underline
4. Striketrhough, memberi efek coret pada teks.
5. Teletype, meberi efek seperti pada teks telegram
6. Emphasis, efek penekanan/penegasan.
7. Strong, memberi efek tebal.

3.17 Memilih bentuk paragraph
Cara :
- Seleksi teks.
- Menu Format – Paragraph Format.
- Pilih salah satu format.

Cara lain:
- Klik tombol HTML pada panel Properties
- Pilih format.
Keterangan:
1. Paragraph, untuk mengatur jarak antar paragrap teks ataupun objek.
2. Heading, memiliki tatanan tabel dengan ukuran tertentu sesuai dengan heading yang dipilih.
3. Preformatted, menampilkan teks tanpa mengabaikan white space/ spasi dan menggunakan font default monospace.

3.18 Mengatur identasi teks
Merupakan jarak teks / paragraf dari tepi halaman.
Cara :
- Seleksi paragraf.
- Menu Format - Indent
Untuk menghapus / menghilangkan :
- Menu Format - Outdent

3.19 Membuat list
Cara :
- Tempatkan kursor di area kerja
- Menu Format – List
- Pilih :
1. Ordered List , List atau daftar yang memiliki urutan, bisa berupa angka, huruf atau romawi.
2. Unordered List, List yang tidak memiliki urutan, dapat berupa linkaran hitam/putih, kotak.
- Untuk mengakhiri list enter dua kali

3.20 Mengatur properties list
Cara :
- Menu – Format - List – properties
- Pilih type dan style.
- Ok.

KEMBALI BAB II ===>>> KLIK DISINI <<<===

NEXT PAGE ====>>> KLIK DISINI <<<====

Read more ...

BAB II MENDEFENISIKAN SITUS

2.1 Pendahuluan
Situs web adalah suatu kesatuan dari dokumen dokumen yang terhubung dengan atribut yang sama.

Situs web memiliki banyak dokumen / halaman web dan dilengkapi koponen lainnya seperti image, media, dan objek yang saling berhubungan

2.2. Membuat situs local
Situs lokal memiliki pengertian kesuluruhan file yang digunakan untuk membangun situs web yang berada dalam komputer yang berdiri sendiri.

2.3 Langkah 2 membuat membuat situs lokal:
- Menu Site-New site
- Akan muncul dialog berikut:
- Isi nama site dan alamat.
- Next

2.4 Membuat situs local
Langkah 2 :
- Pilih No , untuk memilih situs statis
- Pilih Yes , untuk memilih dokumen dinamis.
-> Kita coba NO.
- Pilih Lokal/Network
- Pilih Folder untuk menyimpan seluruh file.
- Next
- Berikut pilihan apakah site yang kita edit juga bisa diedit user lain dalam waktu bersamaan.
- Pilih No.
- Next
- Berikut ini merupakan ringkasan dari setting yang kita buat.
- Done

2.5 Membuat folder dalam situs
Untuk mengelompokkan file file site, kita gunakan folder.
Cara buat folder : Klik kanan di Panelsite KampusUnggu – New Folder – Beri nama – Enter
Cara delete folder : Edit – Delete - Yes.

2.6 Membuat dokumen baru
Langkah 2:
- File – New
- Blank Page
- Untuk contoh pilih 2 column hybrid, left sideber, header, and footer.
- Create
- Save simpan di Site Root.

2.7 Mengelola situs
Langkah 2:
Site – Manage Sites
Akan muncul dialog Manage Sites :
Fungsi Tombol:
New : Untuk buat Site yang baru lagi
Edit : Memodif lagi konfigurasi Kampus Unggu lagi.
Duplicate : Untuk menyalin Site.
Remove : Untuk menghapus.
Export : Mengexport sebagai file XML. Berformat .ste
Import : mengembalikan lagi dari hasil Export

2.8 Bekerja dengan panel files
Menu pop up Site: Menampilkan nama nama situs yang telah didefinisikan
Menu pop up View: Menampilkan tempat situs
Conect/Disconect : Melakukan koneksi ke situs remote.
Refresh : Refresh manual daftar file dari situs lokal dan remote.
Get File : Memilih file dari situs remote, atau testing ke situs lokal
Put File : Menyalin file dari situs lokal ke situs remote
Check Out File: Transfer copy dari file situs lokal dan memberi centang pada file di server
Check In File : Transfer copy file lokal ke remote server dan membuat file dapat diedit oleh yang lain. File lokal menjadi read-only.

KEMBALI BAB I ===>>> KLIK DISINI <<<===

NEXT PAGE ====>>> KLIK DISINI <<<====

Read more ...

BAB I PERANCANGAN WEB

1.1 Teknologi Pembangun Aplikasi berbasis Web

•Web client (web browser)
•Web server
•URL : Uniform Resource Locator
•HTTP : HyperText Transfer Protocol
•HTML : HyperText Markup Language
•CSS : Cascading Style Sheet.

1.2 Pemrograman Web
1.2.1 CGI, eksekusi program di sisi server(perl, C)
Web server menjalankan file program dan mengambil keluarannya untuk dijadikan HTTP response
1.2.2 Server side scripting (PHP, ASP, JSP, Phyton)
Web server mengidentifikasi dan menjalankan skrip program yang disisipkan dalam dokumen web dan menempatkan keluarannya sebagai bagian dari dokumen web
1.2.3 Client side scripting (JavaScript, JScript, VBScript)
Web browser mengidentifikasi dan menjalankan skrip program yang disisipkan dalam dokumen web (yang diterima dari server), dan dapat meng-update tampilan dokumen web di komputer user tanpa mengirimkan request baru kepada web server
1.2.4 P lug-in, eksekusi program di sisi client (applet, ActiveX, Flash)

Web browser menjalankan file program dengan bantuan plug-in viewer/player dan menyediakan suatu area di dalam dokumen web sebagai tempat menampilkan antarmuka program tersebut.

1.3 Web client (web browser)
1.3.1 Web browser
–merupakan suatu software
–dijalankan pada komputer user
–sebuah perangkat navigasi di dalam web
–menampilkan dokumen web

1.3.2 Perangkat lunak web browser yang populer saat ini :
–MS Internet Explorer (Windows)
–Mozilla Firefox (Windows & Linux)
–Netscape Navigator/Communicator (Windows & Linux)
–Opera (Windows & Linux)
–Konqueror (Linux)
–lynx, berbasis teks (Linux)

1.4 Web server
1.4.1 Web server
–merupakan suatu software
–dijalankan pada komputer server
–berfungsi agar dokumen web yang disimpan di server dapat diakses oleh user di internet

1.4.2 Perangkat lunak web server yang populer saat ini :
–Apache (Linux & Windows)
–MS Internet Information Server / IIS (Windows)
–Tomcat, untuk Java (Windows & Linux)

KEMBALI COVER ====>>> KLIK DISINI <<<====

NEXT BAB II ====>>> KLIK DISINI <<<====

Read more ...

TUGAS MANDIRI PEMBUATAN WEBSITE PRIBADI PERANCANGAN WEB

TUGAS MANDIRI

Pembuatan Website Pribadi : http://indralesmana.comuv.com

Mata Kuliah: Perancangan Web

Nama Mahasiswa : Indralesmana

NPM : 09XXXXXX

(NAMA KAMPUS)

2012

KATA PENGANTAR

Puji syukur kami panjatkan kepada Allah SWT sehingga penyusunan makalah ini dapat terselesaikan tepat pada waktunya. Selain itu penulis ingin mengucapkan terimakasih yang sebesar-besarnya kepada dosen pengampu mata kuliah Perancangan Web atas bimbingan dan motivasinya. 

Penulis menyadari banyak kekurangan dalam penysunan makalah ini. Karena itu Penulis sangat mengharapkan kritik dan saran yang bersifat membangun dari semua pihak demi kesempurnaan makalah ini. 

Batam, Januari 2012
Penyusun

Indralesmana



DAFTAR ISI
COVER
KATA PENGANTAR
DAFTAR ISI 

BAB I PERANCANGAN WEB....1
1.1 Teknologi Pembangun Aplikasi berbasis Web....1
1.2 Pemrograman Web....1
1.2.1 CGI, eksekusi program di sisi server(perl, C)....1
1.2.2 Server side scripting (PHP, ASP, JSP, Phyton)....1
1.2.3 Client side scripting (JavaScript, JScript, VBScript).... 1
1.2.4 P lug-in, eksekusi program di sisi client (applet, ActiveX, Flash)....1
1.3 Web client (web browser) ....2
1.3.1 Web browser ....2
1.3.2 Perangkat lunak web browser yang populer saat ini....2
1.4 Web server ....2
1.4.1 Web server .... 2
1.4.2 Perangkat lunak web server yang populer saat ini....3

BAB II MENDEFENISIKAN SITUS.... 4
2.1 Pendahuluan....4
2.2. Membuat situs local....4
2.3 Langkah 2 membuat membuat situs local ....4
2.4 Membuat situs local ....4
2.5 Membuat folder dalam situs.... 5
2.6 Membuat dokumen baru....5
2.7 Mengelola situs....6
2.8 Bekerja dengan panel files....6

BAB III BEKERJA DENGAN FILE DAN DESAIN WEB
3.1 Beberapa type file....7
3.2 Layout css menyediakan kolom....7
3.3 Page properties....8
3.4 Memberi judul....8
3.5 Background gambar ....9
3.6 Background warna....9
3.7 Mengatur warna teks ....9
3.8 Mengatur warna link....10
3.8 Ukuran margin halaman .... 10
3.9 Menyisipkan karakter khusus .... 11
3.10 Menambah tanggal ....11
3.11 Menyisipkan garis horizontal ....11
3.12 Mengatur format/font huruf....12
3.13 Mengatur warna.....12
3.14 Mengubah ukuran....12
3.15 Mengatur perataan teks ....12
3.16 Mengatur style teks....13
3.17 Memilih bentuk paragraph....13
3.18 Mengatur identasi teks....14
3.19 Membuat list .... 14
3.20 Mengatur properties list.... 15

BAB IV MEMBANGUN HALAMAN WEB DENGAN CSS....16
4.1 Pendahuluan....16
4.2 Memahami CSS.... 16
4.3 Mengelompokkan Properti ....16
4.4 Turunan property....17
4.5 Membuat class baru dan id inspector ....17
4.6 Membuat class baru dan id inspector....17
4.7 Cara menulis CSS....18
4.8 Cara menulis CSS....18
4.9 Bekerja dengan Panel css style ....19
4.10 Memahami tampilam mode all ....19
4.11 Memahami tampilan mode current....19
4.12 Membuat style css ....20
4.13 Membuat style css....20
4.14 Membuat style css....20
4.15 Memodif Style CSS....20
4.16 Mengatur properti css....21
4.17 Mengatur properti css ....22
4.18 Mengatur properti css....22
4.19 Mengatur properti css....22

BAB V LAYOUT HALAMAN DENGAN HTML
5.1 Membuat table ....23
5.2 Membuat table....23
5.3 Mengatur properti table....24
5.4 Mengatur properti table....24
5.5 Mengatur properti table .... 25
5.6 Memilih elemen table....25
5.7 Mengubah ukuran tabel,baris,kolom....25
5.8 Menambah dan menghapus baris,kolom....25
5.9 Menambah dan menghapus baris,kolom .... 26
5.10 Mengubah properti sel table .... 26
5.11 Membuat tabel isi .... 27
5.12 Mengurutkan data table....27
5.13 Mengunakan expanded mode.... 27

BAB VI MEMBUAT FRAME....29
6.1 Membuat Frame dan Frameset....29
6.2 Menambahkan Frameset dari Sample....29
6.3 Membuat Frameset Sendiri.... 29
6.4 Memecah,Menghapus dan Mengubah Ukuran Frame....30
6.5 Menyeleksi Frame dan Frameset....31
6.6 Membuka dokumen di dalam Frame.... 31
6.7 Menyimpan Frame atau Frameset.... 31
6.8 Menampilkan dan Mengatur Properti Frame.... 32
6.9 Menampilkan dan Mengatur Properti Frame ....32
6.10 Menampilkan dan Mengatur Properti Frameset ....33
6.11 Membuat Link pada Frame....33
6.12 Membuat Link pada Frame....33

BAB VII BEKERJA DENGAN GAMBAR....35
7.1 Menyisipkan Gambar.... 35
7.2 Mengatur Properti Gambar .... 35
7.3 Mengatur Properti Gambar .... 36
7.4 Mengatur Ukuran Gambar.... 37
7.5 Memberi Border pada Gambar ....37
7.6 Memotong Gambar ....37
7.7 Mengatur Ketajaman Gambar....37
7.8 Mengatur Brightness dan Contrast ....38
7.9 Memberi Link pada Gambar ....38
7.10 Membuat Link dengan Image Map .... 39
7.11 Menggunakan Rollover Image.... 39
7.12 Membuat Swap Image .... 39

BAB VIII PENDAHULUAN WEB HOSTING .... 40
BAB IX PEMBAHASAN WEB HOSTING .... 43
PENUTUP
DAFTAR PUSTAKA



PENUTUP

Demikian yang dapat saya paparkan mengenai materi yang menjadi pokok bahasan dalam makalah ini, tentunya masih banyak kekurangan dan kelemahannya, kerena terbatasnya pengetahuan dan kurangnya referensi yang ada hubungannya dengan judul makalah ini. Semoga makalah ini berguna bagi penulis sendiri pada khususnya juga para pembaca yang budiman pada umumnya.

Akhir kata , sekian makalah ini saya susun, semoga bisa bermanfaat bagi siapa saja yang membacanya. Dan semoga bisa menjadi nilai tambah bagi proses pembelajaran tentang dunia IT.

Dan saya sadar masih banyak kekurangan dalam penyusunan makalah ini,untuk itu kritik dan saran yang sifatnya membangun akan saya terima dengan lapang dada. dan atas perhatiannya , saya ucapkan terima kasih.

NEXT BAB 1 ====>>> KLIK DISINI <<<=====

Read more ...