Mengamankan Router dengan Password

Untuk menyulitkan orang yang tidak berhak mengubah dan mengacau konfigurasi router, maka router tersebut perlu dilindungi dengan kata sandi (password).

Password untuk consoleJika password diaktifkan pada console, maka user tidak bisa begitu saja mendapatkan akses ke router melalui console tanpa menuliskan password console terlebih dahulu. Untuk melakukan hal ini, diperlukan perintah line console 0 diikuti dengan perintah login dan password dalam konfigurasi router.

Contoh : membuat password untuk consoleRouter(config) # line console 0
Router(config-line) # login
Router(config-line) # password coba
Router(config-line) # exit
Router(config) # exit
Router(config) #

Router yang dikonfigurasi seperti contoh akan meminta password ketika user mencoba mendapatkan akses melalui console. Dan passwordnya adalah coba.
 
Password untuk Virtual TerminalVirtual Terminal ini akan digunakan ketika user ingin mendapatkan akses melalui jaringan dengan applikasi telnet. Password Virtual Terminal ini harus dikonfigurasi sebelum user bisa mendapatkan akses melalui jaringan. Tanpa password, koneksi melalui jaringan akan ditolak oleh router dan router akan memberikan pesan berikut: Password required, but none set
 
Contoh : memperlihatkan bagaimana caranya mengkonfigurasi password pada Virtual Terminal.
Router(config) # line vty 0 4
Router(config-line) # password cobain
Router(config-line) # exit
Router(config) # exit
Router(config) #

Pada contoh diatas, router akan meminta password ketika diakses lewat jaringan. Dan password untuk virtual terminal tersebut adalah cobain. Angka 0 pada baris line vty 0 4 menunjukkan nomer awal virtual terminal, dan angka 4 menunjukkan nomer terakhir dari virtual terminal. Oleh karena itu, perintah tersebut memperlihatkan bahwa router tersebut mengizinkan 5 koneksi melalui virtual terminal pada waktu yang bersamaan. 

Password untuk mode priviledgeSetelah user menuliskan password dengan benar untuk mendapatkan akses ke router baik melalui jaringan ataupun console, maka user akan memasuki user mode. Jika password untuk mode priviledge dikonfigurasi, maka user juga harus menuliskan password lagi untuk masuk ke mode itu.

Perintah yang digunakan untuk memberi password pada mode ini adalah enable password, atau enable secret. Perbedaan antara kedua perintah tersebut adalah bahwa perintah enable secret membuat
password-nya terenkrip sedangkan enable password tidak.
 
Kedua perintah tersebut juga bisa dituliskan kedua-duanya dalam mode konfigurasi global, dan keduanya juga bisa mempunyai password yang berbeda. Namun jika keduanya diletakkan pada konfigurasi, maka password pada enable secret yang akan digunakan untuk memasuki privileged mode.
 
Contoh 1.1 : mengkonfigurasi enable passwordRouter(config) # enable password rahasia 
Contoh 1.2: mengkonfigurasi enable secret
Router(config) # enable secret rahasiabanget 
Dalam konfigurasi router, sebuah perintah bisa dihapus dengan menambahkan perintah no pada mode konfigurasi. Dengan demikian, untuk menghapus password pada contoh 1.2 dapat dilakukan dengan perintah seperti yang tampak pada contoh 1.3.

Contoh 1.3: menghapus password enable secretRouter(config) # no enable secret rahasia banget

Read More

Pengantar Cisco Router Part-2

Post ini merupakan lanjutan dari  Pengantar Cisco Router Part-1

Tingkat akses perintahUntuk tujuan keamaan, perintah-perintah yang bisa dijalankan dari CLI dibagi menjadi 2 tingkat akses, yaitu:

• User Mode
• Privileged Mode

User Mode ditujukan untuk melihat status router. Perintah-perintah yang diizinkan pada mode ini tidak bisa mengubah konfigurasi router, sehingga mode ini lebih aman ketika seorang network administrator hanya ingin melihat status router dan tidak ingin mengubah konfigurasi.

Privileged Mode mempunyai tingkat akses yang lebih tinggi. Dengan mode ini, network administrator bisa mengubah configurasi router. Oleh karena itu, mode ini sebaiknya digunakan dengan hati-hati sekali untuk menghindari perubahan yang tidak diinginkan pada router tersebut.

Saat log on ke router pertama kali, anda akan masuk pada user mode, dengan prompt
berupa tanda (>). Untuk berpindah dari user mode ke priviledge mode, anda harus mengeksekusi perintah
enable pada prompt. Prompt akan berubah menjadi tanda (#) ketika anda berada pada Privilged mode. Untuk kembali ke user mode dari priviledge mode, anda harus mengeksekusi perintah disable pada command prompt.

Contoh

router con0 is now available
Press RETURN to get started
router >
router > enable
router # disable
router >
router > logout

Mengubah Konfigurasi Router
Seperti telah disinggung di bab 4.4, Setup Dialog tidak dirancang untuk memodifikasi Konfigurasi Router ataupun membuat Konfigurasi Router yang komplex. Oleh karena itu, untuk keperluan ini, harus dilakukan secara manual dengan memasuki Mode Konfigurasi. Pengubahan konfigurasi ini bisa dilakukan langsung melalui console atau secara remote melalui jaringan seperti telah diulas pada Bab 4.1 dan 4.2. Setelah PC
terhubung ke router, maka network administrator harus memasuki Privileged Mode dulu. 

Akhirnya, konfigurasi dapat diubah dengan perintah configure terminal untuk memasuki global configuration mode yang kemudian diikuti dengan baris-baris konfigurasi. Setelah baris-baris configurasi dituliskan, perintah exit akan diperlukan untuk keluar dari global configuration mode.

Contoh

mengubah konfigurasi router
router con0 is now available
Press RETURN to get started
router >
router > enable
router # configure terminal
router (config) # interface ethernet 0
router (config-if) # description IT Department LAN
router (config-if) # exit
router (config) # exit
router #

Read More

Pengantar Cisco Router Part-1

Router adalah sebuah device yang berfungsi untuk meneruskan paket-paket dari sebuah network ke network yang lainnya (baik LAN ke LAN atau LAN ke WAN) sehingga host-host yang ada pada sebuah network bisa berkomunikasi dengan host-host yang ada pada network yang lain. Router menghubungkan network-network tersebut pada network layer dari model OSI, sehingga secara  teknis Router adalah Layer 3 Gateway.

Router bisa berupa sebuah device yang dirancang khusus untuk berfungsi sebagai router (dedicated router), atau bisa juga berupa sebuah PC yang difungsikan sebagai router. Dalam tulisan ini, saya hanya akan menulis tentang Cisco Router, yaitu sebuah dedicated router yang dibuat oleh Vendor bernama Cisco (http://www.cisco.com). Oleh
karena itu, setiap kata Router dalam tulisan berikutnya akan diartikan sebagai Cisco Router.

Mengkonfigurasi Router
Router tidak mempunyai layar monitor untuk berinteraksi dengan network administrator, oleh karena itu, kita membutuhkan sebuah PC untuk men-setup sebuah router.

PC tersebut harus disambungkan ke router tersebut dengan salah satu dari cara berikut:
• melalui console port
• melalui Network
 
Men-konfigurasi Router melalui Port Console
Console port adalah sebuah port pada router yang disediakan untuk menghubungkan router tersebut pada “dunia luar”. Sebuah kabel Roll Over dibutuhkan untuk menghubungkan serial interface pada PC dan Console port pada router tersebut. Setelah Router terhubung dengan PC, Router dapat dikonfigurasi dengan menjalankan applikasi HyperTerminal dari PC. 2

Men-konfigurasi Router melalui NetworkDengan cara ini, Router dapat dikonfigurasi dengan PC yang terhubung dengan Router melalui network. Cara ini hanya bisa digunakan untuk melihat konfigurasi dan memodifikasi konfigurasi pada router. Mengapa ? Karena sebuah router hanya akan terhubung ke network jika Network Interface-nya sudah terkonfigurasi dengan benar. Di sisi lain, cara ini juga mempunyai kelebihan. Dengan cara ini, network administrator
lebih leluasa menempatkan PC-nya untuk memodifikasi konfigurasi router. Network administrator bisa menempatkan PC-nya di mana saja, asalkan PC tersebut bisa terhubung ke Router melalui jaringan. Dengan cara ini, Network administrator membutuhkan applikasi telnet untuk mengkonfigurasi Router tersebut.
 
Berikut adalah langkah-langkah menggunakan telnet pada PC dengan Sistem Operasi Windows:

• Jalankan command prompt (atau MS DOS prompt pada Windows 9x)
• Ketik perintah berikut pada command prompt:
  C:\> telnet IP-address-Router
  Contoh:
  C:\> telnet 172.16.148.1

Inisialisasi Konfigurasi RouterKonfigurasi Router disimpan pada sebuah memory spesial pada router yang disebut nonvolatile random-access memory (NVRAM). Jika tidak ada konfigurasi yang tersimpan pada NVRAM, maka system operasi pada Router akan menjalankan sebuah routine yang akan memberikan pertanyaan-pertanyaan yang jawabannya akan digunakan untuk mengkonfigurasi router tersebut. Routine ini dalam kosakata Windows
dikenal dengan nama Wizard. Namun pada Router Cisco, routine ini disebut dengan
nama system configuration dialog atau setup dialog.

Setup Dialog ini hanya dirancang untuk membuat konfigurasi minimal, karena tujuan utama dari mode setup ini hanyalah untuk membuat konfigurasi secara cepat dan mudah. Untuk konfigurasi yang komplex, network administrator harus melakukannya secara manual.

Setup Dialog bisa juga dipanggil walaupun NVRAM sudah berisi konfigurasi. Administrator cukup mengetik command setup pada CLI (Command Line Interface) dan Setup Dialog akan dieksekusi.

Berikut adalah contoh pemanggilan Setup Dialog dari CLI.

Lanjutkan Ke Pengantar Cisco Router Part-2

Read More

Apa itu CSS?

CSS ialah teks ASCII yang mengandungi arahan-arahan untuk memformat dokumen web. Ia memudahkan anda untuk membuat reka letak dan persembahan web seperti penggunaan font, size font, warna latar dan lain-lain.

Cara mudah untuk menerangkan CSS ialah dengan memberikan contoh berikut. Lihatkan kod di bawah ini sebagai contoh, ia dimasukkan di bahagian HEAD halaman web anda kerana setiap pelayar web anda akan memahami style sheets.

KOD

Kod di atas akan menyebabkan halaman anda mempunyai latar belakang putih dan teks berwarna hitam. Teks pada BODY akan menggunakan sama ada typeface Arial, Helvetica, ataupun jika tidak terdapat kedua-duanya, ia akan menggunakan typeface Sans-Serif.

Kelebihan CSS
Mengapa tidak terus menggunakan sahaja HTML untuk memformat dokumen?

Sebenarnya salah satu alasan mengapa perlunya pengetahuan tentang Cascading Style Sheets ialah ia membolehkan anda memformat elemen dengan mudah dan cepat.

Saya beri satu contoh berikut:

KOD

Tag H1 diatas digunakan untuk teks header. Apabila anda menutup teks di dalam tag ini, teks tersebut akan dinampakkan sebagai header. Bagaimanapun, ramai orang baru (newbie) dalam HTML yang kadang kala terkeliru dan sering meletakkan header di dalam tag FONT seperti berikut:

KOD

Teks

Hasilnya, dokumen anda akan menjadi semak dengan kod berformat, malah jika anda ingin menyeragamkan semua header-header, terpaksalah anda mengubah semua header-header pada keseluruhan dokumen.

Dengan CSS, jika anda inginkan header H1 untuk menggunakan typeface Sans-Serif bersize 24-point, secara yang mudah letakkan baris berikut diantara tag CSS anda:

KOD

H1 {
font-face: san-serif ;
font-size: 24pt ;
}

Kerana setiap kali anda menggunakan H1, ia akan terus memformat kepada font Sans-Serif bersize 24.

Read More

Dasar HTML

Praktikum_WEB

Read More

Tutorial IPTABLES

IPTABLES

Apa itu iptables?
iptables adalah suatu tools dalam sistem operasi linux yang berfungsi sebagai alat untuk melakukan filter (penyaringan) terhadap (trafic) lalulintas data. Secara sederhana digambarkan sebagai pengatur lalulintas data. Dengan iptables inilah kita akan mengatur semua lalulintas dalam komputer kita, baik yang masuk ke komputer, keluar dari komputer, ataupun traffic yang sekedar melewati komputer kita.

Gimana perintahnya?

iptables [–t tables] [option] [rule] [target]

Contohnya:

iptables –P FORWARD ACCEPT

Apa saja yang bisa dilakukan dengan iptables?
Dengan kemampuan tools iptables ini, kita bisa melakukan banyak hal dengan iptables. Yang paling penting adalah bahwa dengan iptables ini kita bisa membuat aturan (rule), untuk arus lalulintas data. Aturan aturan itu dapat mencakup banyak hal, seperti besar data yang boleh lewat, jenis paket/datagram yang dapat diterima, mengatur trafic berdasar asal dan tujuan data, forwarding, nat, redirecting, pengelolaan port, dan firewall.

- Bagaimana gambaran lalulintas dalam sistem jaringan.

Lalu lintas dalam sistem jaringan digambarkan sebagai berikut

Gambar 1. Lalu lintas data dalam sistem

Keterangan:
1. Data masuk ke dalam sistem komputer bisa melalui banyak jalan, biasanya melalui network interface. Bisa berupa card dan dapat pula berupa wifi lan atau yang lain. Setelah masuk sistem, maka data tersebut akan segera masuk ke dalam decission maker, yang menentukan bahwa data itu akan di proses ke dalam komputer (input) atau akan di lewatkan (forward).
2. Setelah data masuk jika data tersebut mendapatkan rantai FORWARD maka akan segera masuk dalam aturan dalam rule FORWARD tersebut.
3. Jika data masuk ke dalam rantai input, maka data akan mengalami rule

Perlakuan apa saja yang dialami data oleh iptables?
Perlakuan yang dialami oleh data/paket data oleh iptables digambarkan melalui tabel. Macam tabelnya adalah:
1. Filter : tabel default yang ada dalam penggunaan iptables
2. NAT : tabel ini digunakan untuk fungsi NAT, redirect, redirect port
3. Mangle : tabel ini berfungsi sebagai penghalus proses pengaturan paket

Bagaimana kita bisa peroleh informasi tentang iptables tersebut di dalam sistem operasi linux?
Kita bisa peroleh info tentang iptables, dengan cara mengetikkan:

man iptables
atau
iptables –help

Perintah man adalah untuk mendapatkan manual penggunaaan dari iptables ini. Sedangkan help adalah untuk mendapatkan informasi help dari iptables tersebut.

OPTION
Option terdiri dari command, dan parameter serta opsi tambahan

COMMAND
Command dan rule yang dipasang pada iptables (firewall) memiliki ketentuan. Pada dasarnya iptables pada komputer dianggap sebagai TABEL IP sesuai dengan namanya. System hanya akan menjalan rule yang ada pada tabel. Sedangkan rule yang sudah ada pada iptables juga dapat di hapus atau di replace dengan rule lain. Berikut beberapa command untuk penambahan, penghapusan dan operasi sejenisnya yang akan diperlakukan terhadap rule.

Daftar  Perintah berikut keterangan
-A atau –append Melakukan penambahan rule
-D atau –delete Melakukan penghapusan rule
-R atau –replace Melakukan replacing rule
-L atau –list Menampilkan ke display, daftar iptables
-F atau –flush Menghapus daftar iptables/pengosongan
-I atau –insert Melakukan penyisipan rule
-N atau –new-chain Melakukan penambahan chain baru
-X atau –delete-chain Melakukan penghapusan chain
-P atau –policy Memberikan rule standard
-E atau –rename Memberikan penggantian nama
-h atau –help Menampilkan fasilitas help

Parameter
Parameter iptables digunakan sebagai pelengkap yang diperlukan untuk tujuan spesifikasi rule tersebut

Parameter berikut Keterangan
-p, –protocol (proto) Parameter ini untuk menentukan perlakuan terhadap protokol
-s, –source (address) –-src Parameter untuk menentukan asal paket
-d, –destination (address) –-dst Parameter untuk menentukan tujuan paket
-j, –jump (target)
-g, –goto (chain)
-i, –in-interface Masuk melalui interface (eth0, eth1 dst)
-o, –out-interface
[!] -f, –fragment
-c, –set-counters

Parameter berikut Keterangan
–sport
–source-port Menentukan port asal
–dport
–destination-port Menentukan port tujuan
–tcp-flags Menentukan perlakuan datagram
–syn

Selanjutnya apa itu yang disebut dengan chain?
Chain/rantai digambarkan sebagai jalur aliran data. Chains yang diperlukan untuk iptables ini antara lain:

Chain berikut Keterangan
-FORWARD Route packet akan di FORWARD tanpa di proses lanjut di local
-INPUT Route packet masuk ke dalam proses lokal sistem
-OUTPUT Route packet keluar dari local sistem
-PREROUTING Chain yang digunakan untuk keperluan perlakuan sebelum packet masuk route. Biasanya dipakai untuk proses NAT
-POSTROUTING Chain yang digunakan untuk keperluan perlakuan sesudah packet masuk route. Biasanya dipakai untuk proses NAT
-Chain PREROUTING dan POSTROUTING dimaksudkan sebagai jalur data sebelum dan sesudah data tersebut masuk ke dalam route.
-PREROUTING: data sebelum masuk jalur route, akan di kenakan rule
-POSTROUTING: data sebelum masuk akan dikenakan route

Apakah target itu?
Target adalah tujuan perlakuan terhadap rule. Pada target ini terletak keputusan, paket data mau diapakan, apakah mau di tolak, atau diteruskan atau diolah terlebih dahulu. Berikut daftar table target iptables

Target berikut Keterangan
ACCEPT Rantai paket tersebut diterima dalam rule
DROP Rantai paket tersebut “dijatuhkan”
REJECT Rantai paket tersebut ditolak seperti DROP
DNAT Rantai paket di “destination nat” kan ke address lain
SNAT Rantai paket di arahkan ke source nat tertentu
REDIRECT Rantai paket di redirect ke suatu addres dan port tertentu
MASQUERADE Bekerja seperti SNAT tapi tidak memerlukan source
REJECT Bekerja seperti DROP

Contoh beberapa kasus untuk iptables
Misalkan terdapat sebuah jaringan komputer menggunakan koneksi internet dengan IP ADDRESS publik
222.124.132.91 (eth0)

Server gateway memiliki 3 anak jaringan (jaringan lokal) dengan dibedakan subnet
192.168.0.0/24 (eth1)
192.168.1.0/24 (eth2)
192.168.10.0/24 (eth3)

Kondisi dalam jaringan, eth3 tidak diperbolehkan melakukan akses ke internet tetapi diperbolehkan masuk ke jaringan lokal lainnya melalui protokol http. Sedangkan eth1 dan eth2 diperbolehkan melakukan akses ke internet. Pada IP ADDRESS 192.168.1.10 terdapat webserver, dan pada IP Address 192.168.1.12 terdapat koleksi intranet yang akan dipublish ke internet. Disamping itu, koneksi internet 1 mega tersebut akan di share, untuk semua komputer di eth2 akan dibatasi pemakaiannya maksimal 10kbps. Berikut contoh sederhana routin firewallnya

#/bin/bash

#blok semua address (default), pada dasarnya semua akses di blok
iptables –P INPUT –j DROP
#bersihkan table
iptables –F
iptables –t nat –F
iptables –t mangle -F
#perkecualian dengan syarat tertentu
iptables -A INPUT -d 192.168.1.0/24 -m limit –limit 10/s –limit-burst 20 -j ACCEPT
iptables -A INPUT -s 192.168.1.0/24 -m limit –limit 10/s –limit-burst 20 -j ACCEPT
iptables –t nat –A POSTROUTING –s 192.168.0.0/24 –j MASQUERADE
iptables –t nat –A POSTROUTING –s 192.168.1.0/24 –j MASQUERADE
#forward webserver dan intranet
iptables -t nat -A PREROUTING -i eth0 -p tcp –dport 80 -j DNAT –to 192.168.0.10:80
iptables -t nat -A PREROUTING -i eth0 -p tcp –dport 88 -j DNAT –to 192.168.0.12:80
#redirect ke squid
iptables –t nat –A PREROUTING –s 192.168.10.0/24 -p tcp –dport 80 -j REDIRECT –to-port 3128
iptables –t nat –A PREROUTING –s 192.168.10.1/24 -p tcp –dport 80 -j REDIRECT –to-port 3128
=========================================================================================
untuk lebih lengkapnya, silakan kesini dan disini
Semoga bermanfaat

Read More

Pengertian dan Fungsi Firewall dalam Jaringan

Pengertian  / Arti Firewall , Firewall adalah sebuah sistem atau perangkat yang mengizinkan lalu lintas jaringan yang dianggap aman untuk melaluinya dan mencegah lalu lintas jaringan yang tidak aman. Umumnya, sebuah firewall diimplementasikan dalam sebuah mesin terdedikasi, yang berjalan pada pintu gerbang (gateway) antara jaringan lokal dan jaringan lainnya. Firewall umumnya juga digunakan untuk mengontrol akses terhadap siapa saja yang memiliki akses terhadap jaringan pribadi dari pihak luar. Saat ini, istilah firewall menjadi istilah generik yang merujuk pada sistem yang mengatur komunikasi antar dua jaringan yang berbeda. 

 

Mengingat saat ini banyak perusahaan yang memiliki akses ke Internet dan juga tentu saja jaringan korporat di dalamnya, maka perlindungan terhadap aset digital perusahaan tersebut dari serangan para hacker, pelaku spionase, ataupun pencuri data lainnya, menjadi esensial." Jadi firewall adalah suatu mekanisme untuk melindungi keamanan jaringan komputer dengan menyaring paket data yang keluar dan masuk di jaringan. Paket data yang “baik” diperbolehkan untuk melewati jaringan dan paket dapa yang dianggap “jahat” tidak diperbolehkan melewati jaringan. 

Kunci ruangan tersebut hanya dipegang oleh staf IT dan diperbolehkan menggunakan ruang tersebut atas seizin staf IT. Ini berfungsi selain menjaga kehilangan alat komputer dan jaringan secara fisik oleh pencuri atau perampokan, namun juga berfungsi menjaga kehilangan data yang tersimpan pada alat komputer tersebut. Bisa saja seseorang mencuri dan menghapus data penting perusahaan. Tentunya ini sangat merugikan perusahaan tersebut.

 

Berikut ini ilustrasi mengenai firewall ;

2. Fungsi Firewall

A. Mengontrol dan mengawasi paket data yang mengalir di jaringan Firewall harus dapat mengatur, memfilter dan mengontrol lalu lintas data yang diizin untuk mengakses jaringan privat yang dilindungi firewall. Firewall harus dapat melakukan pemeriksaan terhadap paket data yang akan melawati jaringan privat. Beberapa kriteria yang dilakukan firewall apakah memperbolehkan paket data lewati atau tidak, antara lain :

1. Alamat IP dari komputer sumber

2. Port TCP/UDP sumber dari sumber.

3. Alamat IP dari komputer tujuan.

4. Port TCP/UDP tujuan data pada komputer tujuan

5. Informasi dari header yang disimpan dalam paket data.

B. Melakukan autentifikasi terhadap akses.

C. Applikasi proxy Firewall mampu memeriksa lebih dari sekedar header dari paket data, kemampuan ini menuntut firewall untuk mampu mendeteksi protokol aplikasi tertentu yang spesifikasi.

D. Mencatat setiap transaksi kejadian yang terjadi di firewall. Ini Memungkinkan membantu sebagai pendeteksian dini akan penjebolan jaringan.

Read More

Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)

Sebelumnya saya telah menulis artikel tentang pengenalan CSS (Cascading Style Sheet) dan bagaimana cara penerapan CSS pada dokumen HTML. Namun artikel yang berjudul Pengertian CSS dan Cara Penerapan CSS pada HTML itu bukan benar-benar untuk para pemula (newbie) yang benar-benar awam dengan dokumen HTML dan CSS. Oleh karena itu disini saya akan melakukan pembahasan lagi khusus untuk para newbie yang baru memulai niatnya untuk bersama-sama belajar mengembangkan website.
CSS (Cascading Style Sheet) dibuat oleh World Wide Web Consortium (W3C) untuk menyelesaikan masalah yang timbul pada saat dokumen HTML masih versi 3.2. HTML versi 3.2 ini merupakan mimpi buruk untuk para Pengembang Web karena untuk memberi style pada document HTML para pengembang harus membuat tag-tag tersendiri misalkan tag , tag atribut warna dan lain sebagainya pada setiap dokumen HTML yang akhirnya membuat pengembangan web dengan skala besar menjadi lebih kompleks, rumit dan mahal. Dokumen HTML pada awal dibuat memang tidak di maksudkan untuk memformat dokumen sedemikian rupa, HTML di maksudkan untuk mendefinisikan suatu isi dari dokumen. CSS mulai dikembangkan pada HTML versi 4, semua format tag-tag tadi mulai di hilangkan, di ganti, dan di simpan pada file yang diberi nama CSS secara terpisah dan sekarang semua jenis browser sudah mendukung CSS.
CSS memudahkan pembuatan website dalam mendefinisikan bagaimana element-element yang ada di dokumen HTML di tampilkan. Style dokumen HTML nanti disimpan dalam file berekstensi .css. Dengan penerapan style secara external pada satu file css kita dapat merubah penampilan dan layout semua halaman website tanpa harus membuka setiap file HTML dan meng-editnya.
Contoh coding CSS adalah sebagai berikut :

h1 { color :blue; font-size:18px; }

• h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.
• Color merupakan properti CSS
• blue adalah nilai dari properti CSS
• Setiap deklarasi atau statement CSS di buat didalam tanda kurawa {   }
• Setiap properti diakhiri dengan tanda titik koma ;

Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */

/* comment : membuat heading */ h1 { color :blue; font-size:18px; }

Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus yang disebut class dan id.

selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya misalkan kita memiliki sebuah tag HTML sebagai berikut :

<p id="parameter">ini paragraph</p>

 
definisi id diatas pada CSS akan ditulis sebagai berikut :

#parameter {

    text-align:center;

    color:red;

    font-size:12px;

    font-weight:bold;

}

Apabila selector id ditujukan untuk elemen yang unik, maka selector class digunakan untuk mendefiniskan sebuah grup elemen HTML. Selector class seringkali digunakan untuk memberi gaya pada beberapa elemen HTML. Attribut class dari elemen HTML di definisikan CSS dengan tanda titik .. Contoh penggunaan misalkan kita memiliki beberapa elemen HTML sebagai berikut:

<h1 class="center">ini paragraph</h1>

<p class="center">ini paragraph</p>

<a href="http://www.w3function.com/" class="center">ini link</a>

 

Dengan penerapan CSS berikut maka semua text didalam elemen HTML yang memiliki class="center" akan berada di tengah-tengah

.center {text-align:center;} 

 

Sebuah elemen HTML diperbolehkan memiliki lebih dari satu selector class namun penamaan class tidak boleh di awali angka, cara penerapan class lebih dari satu adalah dipisahkan dengan spasi misalnya

<h1 class="center blue largefont">ini paragraph</h1>

 

Semua definisi css di bawah akan diterapkan pada tag HTML diatas

.center {text-align:center;}

.blue {color:blue;}

.largefont{ font-size:18px; }

 

Cara penulisan selector id dan class selain dengan cara yang saya jelaskan di atas juga bisa ditempatkan didepan nama elemen HTML. berikut merupakan contoh penulisannya

p.center {text-align:center;}

h1.blue {color:blue;}

a#largefont{ font-size:18px; }

 

Setelah anda mengetahui dasar CSS berikutnya adalah bagaimana Cara penerapan CSS pada dokumen HTML. Ada tiga cara yang bisa dilakukan yaitu dengan cara External style sheet, Internal style sheet dan Inline style. Lebih lanjut lagi dengan cara penerapan CSS silahkan baca artikel saya yang saya ceritakan di awal : Pengertian CSS dan Cara Penerapan CSS pada HTML. di artikel ini juga ada tutorialnya jadi jangan di lewatkan ya :)

thanks to w3function

Read More

Belajar Membuat Website dengan Photoshop dan Dreamweaver

Ada banyak alasan mengapa orang ingin membuat websitenya sendiri. Antara lain, mereka ingin agar tulisan-tulisan, gambar, serta suasana hati mereka dapat dibaca oleh banyak orang atau iseng saja belajar dan siapa tau kalau sudah menjadi webmaster bisa mendapatkan penghasilan tambahan dengan membuat suatu jasa pembuatan website. Pada proyek pertama ini, kita akan menciptakan salah satu bentuk website personal. Website ini didesain dengan nuansa full color sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang proyek pertama ini sangat sederhana sekali, hehehe. Walaupun demikian anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai.

Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com. Mari kita memulai project pembuatan website sederhana apabila anda sudah memiliki kedua aplikasi tersebut. Berikut merupakan hasil dari proyek Websiteku

Membuat Disain Awal dengan Photoshop

jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height : 875 pixel Resolution : 72 pixel/inch Background Content : Transparent

Pilih rounded retangle tool pada tool panel



dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah

 

Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih

Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :

buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini

buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 25⁰ dengan move tool



kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:

Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel



Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yang sesuai dengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut

Gunakan Slicetool



kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.

Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web



dan akan muncul wizard seperti berikut

pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.

 

apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satu folder yang anda beri nama Websiteku

Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.

Mark-Up Tag HTML dengan Dreamweaver

Setelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. dreamweaver yang saya gunakan adalah dreamweaver versi 8 padahal sekarang sudah ada lho yang versi CS 4, hihi. Langsung saja jalankan aplikasi buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar dibawah ini:

 

buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.

 

Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi

 

Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :

 

Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), caranya tambahkan tag yang berwarna merah pada tag berikut kedalam tag HTML anda.

<html>

<head>

<title>Untitled-1</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 

<style type="text/css">

.content {

    background:url(images/index_06.png) bottom;

    padding:20px 20px 40px 20px;

}

</style>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" align="center" width="700" height="377" border="0" cellpadding="0" cellspacing="0">

<tr>

<td height="94">

<img src="images/index_01.gif" width="281" height="94" alt=""></td>

<td rowspan="4">

<img src="images/index_02.gif" width="419" height="328" alt=""></td>

</tr>

<tr>

<td height="76">

<img src="images/index_03.gif" width="281" height="76" alt=""></td>

</tr>

<tr>

<td height="64">

<img src="images/index_04.gif" width="281" height="64" alt=""></td>

</tr>

<tr>

<td height="94">

<img src="images/index_05.gif" width="281" height="94" alt=""></td>

</tr>

<tr>

<td colspan="2" class="content" ></td>

</tr>

</table>

</body>

</html>

Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show Design View" kemudian isi bagian kolom content dengan hal-hal yang ingin anda publikasikan pada website anda. setelah selesai save index.html, lalu save as dengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhir link.html. Sehingga kini anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama).

Isi kolom content pada masing-masing file yang sudah anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, tentang kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama

 

Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. click setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah :

pilih file yang ingin di hubungkan

 

Lakukan hal yang sama dan hubungkan semua file... selesailah project anda, kini anda mempunyai website yang anda rancang sendiri...

Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakan table sebetulnya ada cara lain yaitu dengan menggunakan Divatau campuran keduanya Div+Table. kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.

thanks to w3function

Read More

Pengertian CSS dan Penerapan CSS dengan HTML

Pada artikel saya kali ini saya akan menjelaskan sedikit tentang pertanyaan rekan pixar ataupun yang lainnya tentang CSS. Apa yang dimaksud dengan CSS?! CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk mengatur style atau tampilan dari dokumen HTML. Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web.

Mengapa harus memakai CSS?!
Penggunaan CSS merupakan standar untuk web-web modern (Web 2.0). Sebagian pembaca mungkin sudah tau bahwa implementasi CSS, Table Less dan Semantik tapi tidak Divitis (maniak div) merupakan standarisasi web yang baik. Saya sendiri sebetulnya tidak peduli apakah CSS adalah Standar Web ataupun Bukan, menurut saya kita memang harus melakukan implementasi CSS untuk setiap perancangan website kita karena dengan CSS kita tidak akan melakukan hal-hal yang terus diulangi dalam menerapkan suatu gaya pada tag HTML yang kita buat, cukup satu kode untuk semua mark up yang sama.
Lalu bagaimana teknik implementasi CSS pada tag HTML yang kita buat?!
Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara yang pertama adalah dengan membuat CSS langsung didalam satu file HTML kita (internal / inline style sheet). Cara yang kedua adalah dengan cara memanggil CSS tersebut dari file CSS tersendiri (external style sheet). selanjutnya mari kita langsung praktek silahkan buka dreamweaver anda atau text editor, dsb :

1. Internal Style Sheet

Cara membuat internal Style Sheet adalah dengan menambahkan tag sehingga kode HTML menjadi sebagai berikut

<html> <head> <title>Belajar CSS</title> <style type="text/css"> </style> </head> <body> </body> </html>

Ok, sekarang anda paham kan dimana kita harus menerapkan CSS dengan cara internal Style Sheet.. Tapi saya tau anda tidak puas kalau saya hanya menerangkan dimana saya harus meletakan CSS nya. kurang seru tanpa praktek membuat web CSS, betul tidak?! Ha... karena itu mari kita mulai membuat website dengan teknik CSS. berikut gambar proyek web table less dengan penerapan CSS kita kali ini

Bagaimana cara membuatnya ?!
Pertama-tama kita buat tag html sebagai berikut :

<html>

<head>

<title>CSS Pertamaku</title>

<style type="text/css">

  

</style>

</head>

<body>

  

<ul class="navbar">

    <li><a href="index.html">Home</a>

    </li><li><a href="about.html">About</a>

    </li><li><a href="gallery.html">Gallery</a>

    </li><li><a href="links.html">Links</a>

</li></ul>

   

<h1>CSS Pertamaku</h1>

<p>Selamat datang di Web CSS ku</p>

<p>Halo ini website CSS ku, mungkin tidak ada gambar

  disini tapi setidaknya ini punya gaya</p>

<p>Harusnya ada lebih gaya markup disini tapi saya tidak

  tahu bagaimana membuatnya,

  apakah ada yang bisa memberitahu?!</p>

   

<p>hubungi saya kalo ada yang bisa karena

saya sedang mati gaya</p>

<address>Made 12 Juni 2009<br> by myself.</address>

</body>

</html>

Tag HTML tersebut akan menghasilkan document website yang dapat dilihat pada gambar sebagai berikut

Uek, jelek bukan hasilnya, maka dari itu sekarang mari kita tambahkan gaya untuk tag HTML tersebut dan menambahkan mark up CSS pada tag HTML, ganti tulisan dengan markup sebagai berikut

body {

    padding-left: 11em;

    font-family: Georgia, "Times New Roman", Times, serif;

    color: white;

    background-color: #555555

}

Kegunaan dari tag diatas adalah untuk memberi jarak lapisan (padding), warna dan jenis font yang kita gunakan serta warna latar dari web ( body HTML ). Untuk Warna anda bisa dengan langsung menambahkan jenis warna seperti black, white, purple, yellow, red, dsb, atau jika warnanya unik anda bisa menambahkan kode warna seperti #8c1f1f ( untuk merah tua ). Kode warna ini bisa anda dapatkan dari photoshop. Ok sebelum melanjutkan bila belum mengetahui kegunaan masing-masing properti CSS seperti padding, color, background dsb, silahkan baca postingan saya mengenai dasar CSS di link ini Pengertian dan Tutorial Dasar CSS untuk Pemula dan link ini Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

Sekarang kita mark up CSS untuk tag HTML ul. bila anda perhatikan tag UL mengandung class :

,

class merupakan atribut tag html yang bisa kita didefinisikan nama-namanya untuk dihubungkan dengan mark up CSS, selain class ada juga atribut yang bernama id tapi tentang class dan id ini sebaiknya kita bahas lebih lanjut lagi di bagian artikel CSS saya yang kedua, supaya kali ini kita lebih fokus ke dasar CSS nya duou. Ok Selanjutnya tambahkan saja kode berikut : 

ul.navbar {

    list-style-type: none;

    padding: 0;

    margin: 0;

    position: absolute;

    top: 2em;

    left: 1em;

    width: 9em

}

ul.navbar li {

    background: white;

    margin: 0.5em 0;

    padding: 0.3em;

    border-right: 1em solid #FF6600

}

ul.navbar a {

    text-decoration: none

}

ul.navbar a:hover {

    color: #FF0000

}

Selanjutnya mark up juga tag h1 (heading ), p (paragraph), addres (alamat), a (text yang mengandung link ), a:hover (text yang mengandung link dan sedang ditunjuk mouse), a:visited (text yang mengandung link dan linknya telah dikunjungi ). tambahkan kode dibawah : 




h1 {

    font-family: Helvetica, Geneva, Arial,

    Sans-Regular, sans-serif;

}

a:link {

    color: #00CC66

}

a:visited {

    color: purple;

}

address {

    margin-top: 1em;

    padding-top: 1em;

    border-top: thin dotted;

}

Dengan demikian markup CSS dengan cara inline style sheet untuk semua Tag HTML telah selesai, Hasil akhir tag adalah sebagai berikut

<html>

<head>

<title>CSS Pertamaku</title>

<style type="text/css">

   body {

        padding-left: 11em;

        font-family: Georgia, "Times New Roman", Times, serif;

        color: white;

        background-color: #555555

    }

   ul.navbar {

        list-style-type: none;

        padding: 0;

        margin: 0;

        position: absolute;

        top: 2em;

        left: 1em;

        width: 9em;

    }

   ul.navbar li {

        background: white;

        margin: 0.5em 0;

        padding: 0.3em;

        border-right: 1em solid #FF6600;

    }

   ul.navbar a {

        text-decoration: none;

    }

   h1 {

        font-family: Helvetica, Geneva, Arial,

        Sans-Regular, sans-serif

    }

   a:link {

        color: #00CC66

    }

   a:visited {

        color: purple

    }

   address {

        margin-top: 1em;

        padding-top: 1em;

        border-top: thin dotted

    }

</style>

</head>

<body>

<ul class="navbar">

    <li><a href="index.html">Home</a>

    </li><li><a href="about.html">About</a>

    </li><li><a href="gallery.html">Gallery</a>

    </li><li><a href="links.html">Links</a>

</li></ul>

<h1>CSS Pertamaku</h1>

<p>Selamat datang di Web CSS ku</p>

<p>Halo ini website CSS ku, mungkin tidak ada gambar

disini tapi setidaknya ini punya gaya</p>

<p>Harusnya ada lebih gaya markup disini tapi saya

tidak tahu bagaimana membuatnya,

  apakah ada yang bisa memberitahu?!</p>

<p>hubungi saya kalo ada yang bisa karena saya

sedang mati gaya</p>

<address>Made 12 Juni 2009<br>  by myself.</address>

</body>

</html>

2. External Style Sheet

Menuliskan Mark up CSS untuk external Style Sheet sama saja dengan cara diatas, bedanya penulisan Markup tidak ditempatkan didalam HTML melainkan dibuat file sendiri dengan ekstensi .css, Silahkan buat file text baru kemudian save as style.css dan simpan di direktori yang sama.

Langkah selanjutnya buat markup sebagai berikut pada file style.css yang baru kita buat

body {

    padding-left: 11em;

    font-family: Georgia, "Times New Roman", Times, serif;

    color: white;

    background-color: #555555 }

ul.navbar {

    list-style-type: none;

    padding: 0;

    margin: 0;

    position: absolute;

    top: 2em;

    left: 1em;

    width: 9em }

ul.navbar li {

    background: white;

    margin: 0.5em 0;

    padding: 0.3em;

    border-right: 1em solid #FF6600 }

ul.navbar a {

    text-decoration: none }

h1 {

    font-family: Helvetica, Geneva, Arial,

    Sans-Regular, sans-serif }

a:link {

    color: #00CC66 }

a:visited {

    color: purple }

address {

    margin-top: 1em;

    padding-top: 1em;

    border-top: thin dotted }

Untuk menghubungkan file HTML dengan CSS maka pada tag header HTML diganti menjadi sebagai berikut :

<html>

<head>

<title>CSS Pertamaku</title>

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />

</head>

penerapan external maupun internal CSS yang saya jelaskan diatas akan menghasilkan dokumen web dengan gaya yang sama 

Sampai Jumpa Lagi di Mark Up CSS bagian Selanjutnya
Selamat mencoba 

thanks, to w3function

Read More