desain halaman webumhskhusus

5/25/2018 DESAIN HALAMAN WEBumhsKHUSUS

1/93

[Desain Web] 1

Teori dan Praktek

1/1/2013

STMIK Cikarang

Kelas Khusus

esainWeb


2/93

[Desain Web] 2

PENGANTAR WEB DESIGN

Desain web adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan dan bis

melibatkan estetika dan selukbeluk mekanis dari suatu operasi situs web walaupun yang utam

memusatkan pada look n feel dari situs web tersebut.

Web adalah fasilitas hypertext yang mampu menampilkan data berupa teks, gambar, suara, animasi, da

multimedia lainnya, di mana di antara data-data tersebut saling terkait dan berhubungan satu denga

yang lainnya. Untuk memudahkan dalam membaca data tersebut diperlukan sebuah web browse

seperti Internet Explorer, Netscape, Opera, maupun Mozilla Firefox

www (Word Wide Web) : merupakan kumpulan web server dari seluruh dunia yang berfung

menyediakan data dan informasi untuk digunakan bersama-sama.

Website (situs web) : merupakan tempat penyimpanan data dan informasi berdasarkan topik tertentu.

Diibaratkan web site ini seperti buku yang berisi topik tertentu.

Web Pages (halaman web) : merupakan sebuah halaman khusus dari situs web tertentu. Diibaratka

halaman web ini seperti halaman khusus dari buku.

Homepage : merupakan sampul halaman yang berisi daftar isi atau menu dari sebuah situs web.

Halaman Web merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML yang dap

dibuka/ dilihat/ diterjemahkan dengan Internet Browser.

URL (Uniform Resource Locator) : penunjuk ke suatu resource di Internet pada lokasi tertentu, misa

http://www.oreilly.com/catalog/javanp3/

Hosting adalah space dalam server komputer yang digunakan sebagai penempatan data dan file yan

ada.

Domain adalah alamat yang di gunakan untuk menuju tempat penempatan data dan file tersebut.

Level Domain adalah deretan kata dibelakang nama domain.

Top Level Domain adalah domain tertinggi setelah . (root)

Global Top Level Domain (gTLD)

.com (dot commercial)

.net (dot network)

.org(dot organization)

.edu(dot education)

.gov(dot goverment)

.mil(dot military)

.info (dot info)

Country Code Top Level Domain (ccTLD) adalah diperuntukkan untuk negara, seperti Indonesia denga

kode ID (co.id, net.id, or.id) atau Singapura dengan kode SG (com.sg, net.sg, dsb).

Second Level Domain (SLD) adalah nama domain yang anda daftarkan.

Third Level Domain adalah nama setelah Second Level Domain .

Misalnya : mail.domainku.com
http://www.oreilly.com/catalog/javanp3/http://www.oreilly.com/catalog/javanp3/


3/93

[Desain Web] 3

Perangkat Lunak Web

Web Server adalah perangkat lunak server yang berfungsi menerima permintaan HTTP dari client (we

browser) dan mengirimkan kembali hasilnya dalam bentuk halaman web.

Yang terkenal diantaranya adalah:

XAMPPLAMPP

Internet Information Service (IIS)

TIPS MEMBUAT WEBSITE PROFESIONAL

1. Homepage (halaman utama) situs Anda harus dapat diakses maksimal 8 detik atau dapat diaksmelalui koneksi jaringan internet minimal 28,8 kbps. Apabila proses koneksi membutuhka

waktu yang sangat lama, hal ini akan berpotensi hilangnya customer (pengunjung) yang tida

betah menunggu terlalu lama. Akhirnya situs kita tidak akan dikunjungi olah para calo

customer.

2. Pastikan menyertakan META Tag pada masing-masing halaman website Anda. META Tag adalakode yang memungkinkan search engine (mesin pencari seperti: Google) untuk menentukakata kunci yang relevan dari website Anda.

3. Pilihlah warna latar belakang (background) yang sesuai, jangan menggunakan warna yanmempengaruhi teks untuk dibaca. Warna situs menjadi sebuah ekspresi hati Anda. Warn

orange melambangkan keceriaan sedangkan warna ungu atau hitam melambangkan kesurama

Untuk itu pilihlah warna yang sesuai untuk situs Anda berdasarkan isi yang terkandung dala

situs tersebut.

4. Gunakan animasi seperlunya, jangan terlalu berlebihan karena dapat mempengarukonsentrasi pengguna ketika sedang membaca informasi. Selain itu, animasi juga dap

menghambat akses ke halaman situs Anda. Sebuah animasi yang bagus bukan menjadi jamina

bahwa situs Anda menarik perhatian pengunjung.

5. Halaman Utama situs harus lebih spesifik agar para pengunjung dapat mengetahui produk yanditawarkan. Sebagai contoh, jika situs Anda merupakan sebuah lembaga konsultasi mak

sebaiknya jasa-jasa konsultasi yang ditawarkan ditampilkan di halaman utama. Jangan samp

pengunjung merasa bingung dengan keberadaan situs Anda yang tidak jelas produk yan

ditawarkan.

6. Hindari pemasangan iklan (banner) di bagian atas website Anda. Batasi jumlah banner yang akaditayangkan, maksimal 2 dan idealnya cukup 1 banner. Semakin banyak jumlah banner, semak

lama proses akses dan akan sangat mengganggukonsentrasi pengguna ketika mengunjungi sit

Anda.

7. Hindari adanya iklan pop up yang akan membuat pengunjung menjadi bosan.8. Jangan menambahkan autoplay suara ketika seseorang mengunjungi situs Anda. Sebaikny

tawarkan, apakah menggunakan intro beserta audio (suara) ataukah langsung ke halamautama.

9. Periksa website Anda dengan beberapa jenis browser karena masing-masing browser memilikemampuan yang berbeda.

SOFTWARE DISAIN GRAFIS

- Adobe Photoshop (http://www.adobe.com) : software ini sangat populer dan dapat diandalkauntuk membuat dan mengedit grafik maupun gambar fotografi.


4/93

[Desain Web] 4

- Adobe/Macromedia Fireworks (http://www.macromedia.com) : software ini sangat mirdengan Adobe Photoshop, namun tool ini berbasis vektor. Software ini mengijinkan semu

elemen dapat diedit kembali dan dapat berintegrasi dengan Macromedia Dreamweaver.

- Adobe/Macromedia Flash (http://www.macromedia.com) : software ini dapat digunakan untumembuat animasi dan berbasis vektor untuk website.

- -Adobe/Macromedia Dreamweaver : software untuk web editor -> Menyatukan keseluruhangambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa

script.

FORMAT GRAFIS

Grafik/gambar dalam sebuah website dapat memberikan efek visual yang luar biasa terhadap websit

tersebut, namun bisa menambah waktu koneksi akibat banyaknya gambar yang ditampilkan. Graf

dalam website dapat berupa statik, animasi, dan fotografi.

Agar koneksi ke website kita lebih cepat, perlu memahami beberapa format file yang sering digunaka

pada sebuah website, diantaranya:

- GIF : memiliki warna 8-bit, mendukung dalam bentuk transparan, mengkompresi area warnsecara solid, mereduksi jumlah warna dan menjalin untuk proses download secara cepat, jugdapat digunakan untuk membuat animasi dalam bentuk grafik (animated graphic).

- JPG : memiliki warna 24-bit,menjaga kualitas brightness dan hue yang ditemukan dalam sebuafoto, dapat disimpan dalam format berkualits tinggi maupun rendan (high or low resolution

sebuah file jpg dapat pula digunakan versi resolusi rendah (low resolution) dari gambar yan

nampak ketika gambar sedang didownload, tidak mendukung transparansi.

- PNG : PNG-8 mendukung warna 8 bit, mengkompres area warna yang pekat, menjaga detaketajaman, mendukung transparansi, kompresi lebih canggih dibandingkan gif karena dap

mengkompresi sekitar 10-30% lebih kecil dari format GIF.

DESAIN HALAMAN WE

Sebuah aplikasi web dibangun menggunakan tag HTML. Pada praktikum pertama ini akan dipelaja

bagaimana membuat dokumen HTML sederhana, memformat tampilan pada dokumen HTML da

membuat list yang yang biasa kita gunakan untuk menampilkan daftar dengan urutan tertent

Praktikum ini akan menggunakan notepad sebagai HTML editornya.

Pengenalan HTML

o Format Penulisan Dokumen HTML

... informasi tentang dokumen HTML

... informasi yang akan ditampilkan di web browser


5/93

[Desain Web] 5

o Memulai Membuat Dokumen dengan Format HTMLLangkahlangkah untuk memulai membuat dokumen HTML sebagai berikut :

1. Buka notepad sebagai editor dokumen HTML.2. Buat kode sederhana seperti di bawah ini :

Halaman Web Pertamaku

Ini adalah halaman web pertamaku

3. Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .htm atau .html4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen tersebut

menggunakan web browser.

TagTag Dasar HTML

Heading

Menggunakan Heading

Dokumen HTML berikut ini menggunakan heading

Heading 1Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Informasi

yang

dituliskanpada

tag

Judul

Dokumen

HTML


6/93

[Desain Web] 6

KomentarPenulisan komentar pada tag HTML sangat berfungsi bagi para programer untuk lebih mudah dala

meghafal programnya .

penulisan tag komentar pada HTML tidak berpengaruh apa-apa .

This is a regular paragraph

Paragraf

Memformat Paragraf

Paragraf Pertama

Paragraf pertama ini menggunakan rataan kiri.

Paragraf Kedua

Paragraf kedua ini menggunakan rataan tengah

Paragraf Ketiga

Paragraf ketiga ini menggunakan rataan kanan

Line Break

Menggunakan Line Break

Menggunakan Line Break

Dengan menggunakan line break, kita dapat memindahkan kalimat

setelah elemen tersebut satu baris di bawahnya.
seperti halnya menggunakan ENTER pada word

processing.

Preformatted Text

Menggunakan Preformatted Text


7/93

[Desain Web] 7

Dokumen HTML ini menggunakan Preformatted Text

Dimana informasi yang ditampilkan pada web browser Sesuai dengan apa yang dituliskan pada editor

Apakah tag ini mempermudah penyampaian informasiMelalui dokumen HTML ?

Memformat Bentuk Tulisan

Memformat Tulisan

Tulisan ini akan tercetak tebal

Tulisan ini akan tercetak miring

Pada tulisan ini terdapat garis bawah

Dalam matematika, x pangkat 2 ditulis dengan X 2

Rumus kimia untuk oxygen adalah O 2

Tag Font

Mengolah Font dengan Properties Font

Tulisan ini dengan font size adalah 1, face Verdan

dan berwarna merah

Tulisan ini dengan font size adalah 4,
face arial da

berwarna hijau


8/93

[Desain Web] 8

Horizontal Rules

Horizontal Rules

Menambahkan garis horisontal pada dokumen HTML

MarqueeUntukmembuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana suda

akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal denga

perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

Tulisan disini akan berjalan

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untu

mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kod

marquee adalah :bgcolor="warna" Untuk mengatur warna background (latar belakang) teks

direction="left/right/up/down" Mengatur arah gerakan teks

behavior="scroll/slide/alternate"Untuk mengatur perilaku gerakan

- Scroll teks bergerak berputar

- Slide teks bergerak sekali lalu berhenti

- Alternate teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

title="pesan" Pesan akan muncul saat mouse berada di atas teks

scrollmount="angka"mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.

scrolldelay="angka"Untuk mengatur waktu tunda gerakan dalam mili detik

loop="angka|-1|infinite"Mengatur jumlah loop

width="lebar"Mengatur lebar blok teks dalam pixel atau persen

Contohnya :

marquee dari

kanan ke kiri

Ganti "left" dengan keinginan anda yaitu bisa : right, up, down .
http://www.krtutorplus.com/2007/04/membuat-marquee.htmlhttp://www.krtutorplus.com/2007/04/membuat-marquee.html


9/93

[Desain Web] 9

ListList merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar dengan urutan

tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list, unordered list dan definition list.

1. List Tanpa Urutan (Unordered Lists)

Menggunakan List

Menggunakan Unordered List

Ordered List dengan Type Default

Manchester United

Chelsea

Arsenal

Unordered List dengan Type Circle

Juventus

AC Milan

AS Roma

Unordered List dengan Type Disc

Real Madrid

Barcelona

Malaga

Unordered List dengan Type Square

PSV

Ajax Amsterdam

Feyenord


10/93

[Desain Web] 10

2. List Berurut (Ordered Lists)

Menggunakan List

Menggunakan Ordered List

Ordered List dengan Type Default

Nasi Goreng

Nasi Rames

Pecel Lele

Ordered List dengan Type a

Nasi Goreng

Nasi Rames

Pecel Lele

Ordered List dengan Type I

Nasi Goreng

Nasi Rames

Pecel Lele

Ordered List dengan Menambahkan Atribut Start

Nasi Goreng

Nasi Rames

Pecel Lele

3. Definition Lists

Belajar membuat HTML yuk

Membuat Definition Lists

HTTP

HyperText Transfer Protocol

FTP


11/93

[Desain Web] 11

File Transfer Protocol

LINK DAN GAMBARDalam aplikasi berbasis web salah satunya adalah bisa menghubungkan satu dokumen dengan

dokumen lainnya, baik dalam satu server aplikasi web maupun dengan server aplikasi web yang

berbeda di seluruh dunia maya.

HTML menyediakan hypertext link yang merupakan daerah teks (ataupun gambar) yang bisa link

(menyambungkan) ke dokumen HTML yang lain. Seiring berkembangnya teknologi internet, bukan

hanya teks dan gambar yang bisa link ke dokumen tertentu, file multimedia pun sudah dapat dibuat

link ke dokumen yang diinginkan.

1. LinkKekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat la

disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau langsung menuju k

bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pad

sebuah image, bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi da

warnanya menjadi berbeda. Sintaksis penulisan :

nama_link

Beberapa atribut yang dapat ditambahkan dalam tag diantaranya :

2. Membuat Link antar Dokumen HTMLContoh membuat link ini, dapat dilihat dari script di bawah ini, sebelumnya siapkan halaman htm

dengan nama jur_MI.htm, jur_KA.htm, jur_TI.htm (disimpan dalam satu direktori) dan simpan scridibawah ini dengan nama file Link.htm :

Situs STMIK


12/93

[Desain Web] 12

STMIK CIkarang

Jl. Kapt. Sumantri No. 16 Cikarang-Bekasi

[ Manajemen Informatika ]

[ Komputer Akuntansi ]

[ Teknik Informatika ]

[ BAA ]

[ Dikti ]

3. Membuat Link ke Bagian Tertentu dalam DokumenSeringkali halaman web adalah halaman yang panjang dan selalu membukanya dari posisi awal aka

sangat melelahkan bagi pengguna. Untuk itu akan lebih memudahkan bila kita langsung merujuk pad

bagian tertentu sebuah halaman web. Caranya dengan menyisipkan Tag Anchor dengan atribu

"name" di bagian dokumen yang akan dituju.

Berikut ini sintaksisnya :

Untuk menggunakan link yang akan merujuk ke bagian dokumen itu, ditambahkan '#nama_section"

menjadi :

langsung ke nama section

Membuat Link Ke Bagian dalam Dokumen

Membuat Link ke Bagian dalam Dokumen

Bab 1

Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.
Mulai dari membuat dokumen HTML yang sederhana sampai membuat sebuah web.

Sebagai pendahuluan, coba klik link ini untuk

menuju ke bagian lain pada dokumen ini..


13/93

[Desain Web] 13

1.1 Sekilas Sejarah Internet

Bab ini adalah bagian lain pada dokumen yang dituju ketika link

pada Bab 1 diklik.

Untuk kembali ke Bab 1, klik disini

4. GambarUntuk menyisipkan gambar kita dapat memanfaatkan tag . Format file gambar yang bi

ditampilkan bisa bermacam-macam, misalnya jpg, png, gif dan sebagainya.

Sintaksis:

Contoh :

Menambahkan Image

Menambahkan image ke dalam dokumen HTML

Mengatur border pada image

5. Gambar sebagai Hyperlink

Halaman Awal

Selamat Datang di Situs Pribadi Saya

Untuk bisa menjelajahi situs ini, silahkan klik pada gambar berikut :


14/93

[Desain Web] 14

Selamat menikmati penjelajahan di situs ini.

FORM

... elemenelemen yang ditambahkan dalan form ...

Jenis Inputan dalam Form1. Text

Menambahkan Elemen Text

nama :

npm :

2. Password

Menyembunyikan Password

Password Anda :

3. Radio

Menambahkan Pilihan pada Dokumen HTML


15/93

[Desain Web] 15

Jenis kelamin :

Laki- laki

Perempuan

4. Checkbox

Pilihan Ganda pada Dokumen HTML

Hobi Anda :

Baca

Belanja

Coding

Nonton

5. ButtonAda 4 (empat) jenis varian pada elemen ini :

- Submit

Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action.

- Reset

Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan nilai semu

elemen yang ada pada form)

- Button

Tombol ini berfungsi untuk membuat form lebih interaktif dengan memanggil script lain.

- Image

Menggunakan gambar sebagai pengganti tombol.

Menambahkan Tombol di Dokumen HTML


16/93

[Desain Web] 16

6. Textarea

Menerima Masukan yang Panjang

Deskripsi diri :

Tuliskan deskripsi diri Anda disini

7. Select

Pilihan Menggunakan Dropdown

Peminatan pilih salah satu:

Web Master

Database ManagementComputer Network Management

Kemampuan :

asp

php

mysql

oracle

hardware

jaringan


17/93

[Desain Web] 17

LAYOUT HALAMAN WEB

Untuk membuat desain halaman web, salah satunya dapat dibuat menggunakan tabel.

Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom da

baris. Hampir semua web site yang berkualitas dan profesional, dirancang dengan menggunakan tabeLayaknya sebuah spreadsheet yang memiliki sel dan berisi angka-angka, tabel dalam web jug

mempunyai sel yang berisi link, gambar dan text.

o Membuat Tabel dan Judul TabelTerdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: ,


18/93

[Desain Web] 18

Rp. 22500

2

Nutrisari Jus JerukRp. 2450

3

Rp. 7350

3

Kacang Kulit Garuda

Makanan

Rp. 9800

2

Rp. 19600

4

Tango Coklat

Rp. 2750

1

Rp. 2750

5

Snack Ringan

Rp. 64502

Rp. 12900

TOTAL

Rp. 65100

o Lebih Lanjut dengan Tabel

Menyisipkan Gambar pada Tabel


19/93

[Desain Web] 19

Dokumentasi Fotograpi

1.

2.

3.

Jenis Komputer

Jenis Jam

Lampu

MEMBUAT WEBSITE SEDERHANA DENGAN HTM

1. Mengatur LayoutUntuk memudahkan kita dalam membuat suatu layout yang diinginkan, maka gambarlah terleb

dahulu di kertas bentuk layout, misalnya kita akan menggambar layout dengan bentuk seperti

bawah ini.

HEADER

NAVIGASI

CONTENT

FOOTER


20/93

[Desain Web] 20

2. Menerapkan Layout Dalam Bentuk tabelSetelah menggambar layout di kertas, sekaranglah saatnya membuat layout yang telah kita rancan

tersebut ke dalam halaman web. Dalam halaman web, layout dapat dibuat dengan bantuan tabel

baris 2 kolom). Berikut script HTML untuk membuat layout table beserta assesorisnya.

Situs Akademik STMIK Cikarang

..

..

..

..

..

Simpan dengan nama index.htmldan jalankan script anda serta lihat hasilnya di bawah ini :


21/93

[Desain Web] 21

3. Menghias HeaderPada layout tabel, bagian header terletak pada baris pertama dan kedua. Pertama-tama kita akamengisi header pada baris pertama, pada header baris pertama tersebut akan diisi dengan gamba

Siapkan gambar dengan ukuran 800 x 150, desain gambar anda tersebut dengan potoshop ata

software edit gambar yang anda sukai. Buatkan folder dengan nama / images dan masukkan gamba

gambar yang akan dipakai ke folder tersebut.

Kita asumsikan bahwa nama gambar adalah header.gifdisimpan pada folder images.

Berikut script HTML yang kita buat :

Pada baris kedua kita akan mengisikan teks yang berjalan (marquee).

Berikut script HTML yang kita buat :


22/93

[Desain Web] 22

.. Sekolah Tinggi pertama di Kabupaten Bekasi

..

Silahkan simpan kembali file anda dan lihat hasilnya seperti di bawah ini :

4. Mengisi KontentBaris ketiga mempunyai dua kolom, pada kolom 1 akan ditempati link-link atau tombol yan

berfungsi untuk navigasi dalam situs tersebut.

Berikut script HTML yang perlu anda ketikkan :

.:: M E N U ::.

H o m e

P r o f i l

A k a d e m i k

Kemahasiswaan

Fasilitas

Pendaftaran

K o n t a k

Silahkan simpan kembali file anda dan lihat hasilnya.

Pada bagian content yang terletak pada baris ketiga kolom kedua berisi informasi utama dari situs

kita.


23/93

[Desain Web] 23

Berikut script HTML yang perlu anda ketikkan :

Selamat Datang di Website STMIK

Cikarang

Sekolah Tinggi Manajemen Informatika dan Komputer (STMIK) Cikarang

merupakan Sekolah tinggi pertama di kabupaten Bekasi, lokasi terletak di jantung kota cikarang

tepatnya di Jl. Kapten Sumantri No. 16 Cikarang Utara, Bekasi.

STMIK Cikarang berawal dari

Institut Bina Bangsa Indonesia (IBBI) yang berdiri pada tahun 1993. Seiring dengan perjalanan

waktu, perkembangan zaman dan kemajuan teknologi serta tumbuhnya sentra- sentra industri d

daerah Cikarang, maka IBBI pada tahun 1995 berubah status menjadi Politeknik Bina Bangsa

Indonesia(PBBI). PBBI menyelenggarakan pendidikan informatika setara Diploma Satu (D-I).

Politeknik yang dibentuk berada di bawah naungan Yayasan Pengembangan Pendidikan

Dinamika (YPPD) Cikarang. Pada tahun 1997 terbentuklah sebuah perguruan tinggi yang bernam

"Akademi Manajemen Informatika dan Komputer (AMIK) Cikarang" berdasarkan Surat Keputusa

dari Menteri Pendidikan dan Kebudayaan Republik Indonesia nomor : 067/D/0/1997.

Dengan terbitnya SK Menteri tersebut maka AMIK Cikarang dapat menyelenggarakan pendidika

program Diploma Tiga(D-III) untuk Jurusan Manajemen Informatika dan Komputerisasi

Akuntansi. Akademi Manajemen Informatika dan Komputer (AMIK) Cikarang berubah status

menjadi "Sekolah Tinggi Manajemen Informatika dan Komputer (STMIK)" Cikarang.

STMIK Cikarang membuka Program Sarjana (S1) dan Diploma Tiga

(D3),dengan jurusan masing-masing sebagai berikut :

Sarjana (S1)

Teknik Informatika (TI)

Sistem Informasi (SI)

Diploma Tiga (D3)

Manajemen Informatika (MI)

Komputerisasi Akuntansi (KA)

Silahkan simpan kembali file anda dan lihat hasilnya seperti di bawah ini :


24/93

[Desain Web] 24

5. Bagian FooterPada layout table, bagian footer terletak pada baris keempat. Baris keempat hanya mempuny

satu kolom saja. Berikut script HTML yang perlu anda ketikkan :

2013 Team lab STMIK Cikarang

Simpan kembali file anda dan lihat hasilnya seperti di bawah ini :

6. File-file pendukungSilahkan lihat gambar folder di bawah ini :


25/93

[Desain Web] 25

Berdasarkan gambar di atas, terdapat file-file pendukung yaitu :

profil.html Halaman profil

akademik.html Halaman Akademik

mahasiswa.html Halaman Kemahasiswaan

fasilitas.html Halaman Fasilitas

pendaftaran.html Halaman Pendaftaran Online

kontak.html Halaman Kontak

Cara membuat file tersebut adalah save as file index.html anda dengan profil.html, ganti conte

utama anda (baris ketiga kolom kedua) dengan konten/isi sesuai dengan profil.

Untuk file-file lainnya gunakan cara yang sama seperti profil.html di atas. Sehingga halaman we

anda berjalan sesuai dengan yang diharapkan.

CASCADING STYLE SHEET (CSS

Style Sheet adalah text sederhana dengan eksitensi (.css) yang ditulis menurut aturan bahas

pemrograman yang merujuk rekomendasi dari CSS 1 atau CSS 2 dari W3C/ World Wide Web Consortiu

(w3.org) yang merupakan badan gabungan dari pemilik web, universitas, perusahaan ( seperti

Microsoft, Netscape, Apple, Opera, Mozilla dan Macromedia) tak luput juga para ahli dalam bidang web

W3C dapat dikatakan sebagai acuan atau pedoman dalam menentukan teknologi paling mutakhir padweb, tujuannya adalah untuk mengurangi kekacauan Kode pada sebuah web serta mempermudah akse

web oleh user dari berbagai macam Browser.

Rekomendasi yang dikeluarkan W3C merupakan standardisasi dari pengembang Web, Web Design da

Programming web.

Jika sebuah web menggunakan kode yang sudah sesuai dengan standarisasi W3C, maka web terseb

akan mudah diakses oleh berbagai macam browser.


26/93

[Desain Web] 26

Keuntungan Menggunakan CSS

Salah satu keuntungan dari menggunakan CSS adalah anda bisa membuat ratusan bahkan ribua

halaman website hanya dengan satu kali penulisan bahasa CSS.

Keuntungan lainnya dalam menggunakan CSS adalah karena CSS sudah menjadi elemen penting dala

pembuatan web yang sesuai dengan teknologi Web 2.0 atau web modern yang sudah menjadi tren sa

ini dan beberapa tahun yang akan datang.

Memang dengan CSS adalah solusi cepat dalam membuat suatu website.

Fungsi HTML dan CSS pada halaman Web

Menurut rekomendasi dari W3C, untuk pembuatan suatu website, untuk menjadikan kerangka dari we

anda perlu menggunakan HTML dan untuk design dari website anda dituntut untuk menguasai CSS.

Aturan penulisan CSS

Pada CSS ada komponen utama dalam penulisannya yaitu Selektor dan Deklarator.

Selektor { Deklarator};

Selektor merupakan Tag dari penulisan HTML semisal H1,H2,p,b dan lain-lain.

Deklarator adalah yang memerintahkan browser untuk membuat tampilan pada selector sesuai denga

perintah yang ada pada deklarator.

Sedangkan deklarator terdiri dari Property dan Value

Contoh

Biasanya pada penulisan artikel banyak digunakan Tag

atau paragraph, jika anda ingin meruba

penulisan font dari artikel anda pada paragraph, pada CSS penulisannya adalah sebagai berikut :

p {font-family: verdana};

Merupakan selektor dari paragraph dan yang berada dalam kurung kurawal adalah deklaratornya yan

memerintahkan browser untuk menampilkan artikel paragraph dengan font verdana. Sedangkan fon

family adalah Property dan verdana adalah Value.

Detail rumusnya sebagai berikut ini :


27/93

[Desain Web] 27

Selector ID dan Selector Class

Selain selector yang bisa ditulis secara langsung dengan menghilangkan tanda semisal

cuku

anda tulis p saja, ada selektor lain yang tidak kalah pentingnya yaitu selector ID dan selektor Class.

Selektor ID

Fungsi dari selektor Id adalah untuk memberi tanda supaya pada tag HTML yang sudah diberi ID bisa d

beri format lain.

Sebagai contoh :

Penulisan pada Tag HTML

disini anda menulis artikel

Tulisan artikel anda yang lain

Disini anda memberi Selektor ID dengan nama toc, dan pada CSS anda bisa memberi code sebag

berikut ini :

P (font-family:verdana}

#toc{ font-family:arial}

Pada selector ID penulisan ID ditandai menggunakan tanda # Yang berarti artikel pada p yang suda

diberi ID akan dibaca font menjadi arial sedangkan sedangkan p yang lain dibaca menggunakan fon

verdana.

Selektor Class

Untuk selektor Class fungsinya sama dengan selektor ID namun pada selektor Class anda bisa membe

lebih dari satu selector class tetapi pada selektor ID anda tidak bisa memberi nama ID yang sam

Contoh penulisan Selektor Class :

Pada Tag HTML

artikel anda disini

Pada CSS :

.media {font-family:calibri}

Pada selektor Class penulisan Class ditandai menggunakan tanda .

Cara Menggabungkan HTML dengan CSS

Ada tiga cara untuk menggabungkan antara file HTML dengan file CSS., yaitu sebagai berikut :

1. Inline StyleInline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML, berikut ini conto

penulisan Inline Style:


28/93

[Desain Web] 28

2. Embedded StyleEmbedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page ) da

penulisan file CSS sebelum .. Berikut ini contoh penulisannya :

3. Link StyleUntuk penulisan Link Style merupakan penulisan secara terpisah antara file HTML dan file CSS da

kita tinggal memasang link saja, dan pemasangan Link anda bisa taruh di antara


29/93

[Desain Web] 29

Untuk cara Link Style ini yang banyak dipakai oleh para Web Design atau programmer karena cara Lin

Style cukup satu kali penulisan file CSS yang nantinya dipakai oleh seluruh halaman Website.

Biasanya para Web Design menamai file Link Style CSS dengan nama style.css.

Berikut ini contoh filenya:

File CSS biasanya disimpan dengan ekstitensi .css atau dengan nama style.css

Catatan :

Untuk menyisipkan Link ke file style.css penempatannya harus diantara .. Anda bisa membuat lebih file css lebih dari satu sesuai dengan kebutuhan.Komponen Property yang Digunakan

Property Text Style

Property Text Style bisa anda gunakan untuk membuat gaya tulisan anda pada web. Adapun kompone

Text Style atau yang berhubungan dengan model atau gaya tulisan/font dari CSS adalah sebagai berik

ini:

1. ColorProperty ini mengontrol warna dari text penulisannya

Selektor {color:#000000}

Value bisa warna Hexadesimal bisa hanya tulisan misalnya untuk kuning menggunakan Yellow.


30/93

[Desain Web] 30

2. Font-weightProperty ini mengontrol tebal dari text penulisannya

Selektor { font-weight:100}

Value bisa anda tulis dengan angka mulai dari seratus dan dilanjutkan dengan kelipatannya atabisa anda tulis dengan kata Bold atau yang lain.

3. Font-familyProperty ini untuk mengatur font yang anda pakai

Selektor{font-family:Arial, Helvetica, sans-serif}

Untuk jenis font sebaiknya menggunakan standard bawaan Windows,jika ingin terbaca ole

seluruh user.

4. Font-sizeProperty ini untuk mengatur ukuran font yang akan dipakai

Selektor{ font-size:12px}

Untuk ukuran font anda bisa menggunakan ukuran px,em atau small,medium,large dan lai

lain.

5. Font-variantProperty ini untuk mengatur font yang akan muncul apakah menggunakan huruf kecil atau sma

caps

Selektor{ font-variant:small-caps} atau anda bisa menggunakan normal.

6. Font-styleProperty ini untuk mengatur style font yang akan digunakan pada text

Selektor{ font-style:italic} pilihan value lain normal, oblique

7. Text-decorationProperty ini untuk mengatur style font lanjutan dari font style.

Selektor{text-decoration:underline} atau value lain : line through, none, blink, overline

8. Text-transformProperty ini untuk mengatur capital font

Selektor{ text-transform:lowercase} value lain: uppercase, capitalize

Property Text Layout

Property Text Layout ini berfungsi untuk mengatur bagaimana efek dari suatu layout suatu tulisan pad

halaman website. Property ini lebih berfokus pada penempatan dan tampilan yang ditempatkan pad

halaman web anda.


31/93

[Desain Web] 31

Anda bisa mengkombinasikan antara tampilan page layout dan text layout supaya tampilan websi

anda lebih elegant dan sesuai dengan keinginan anda dan itu yang jelas tidak bisa anda dapatkan pad

HTML.

1. Letter-spacingProperty ini untuk mengontrol jarak space antar karakter

Selektor{letter-spacing:normal}

untuk value normal maka akan diatur oleh browser sebagai justify text.

2. Word-spacingProperty ini untuk mengontrol jarak space antar text atau kata

Selektor{ word-spacing:normal}

3. Line-heightProperty ini untuk mengatur jarak line atau garis

Selektor{ line-height:normal}

value lain : em, px atau persentase %

4. Text-indentProperty ini untuk mengatur dari baris pertama yang masuk biasanya untuk awal paragraph.

Selektor{ text-indent:50px}

5. Text-alignProperty ini untuk mengatur posisi dari text

Selektor{ text-align:justify}

Value lain : left, right, center

6. Vertical-alignProperty ini untuk mengontrol jarak space antar text atau kata

Selektor{ vertical-align:top}

value lain: text-top,text-bottom, bottom, middle, baseline, sub, super.

7. DirectionProperty ini untuk mengatur dan menentukan arah dari suatu tulisan pada website

Selektor{ direction:ltr}

Value lain : rtl

Keterangan : ltr =Tulisan yang terbaca dari kiri ke kanan rtl =Tulisan yang terbaca dari kanan k

kiri

8. Unicode-bidiProperty ini untuk mengontrol dan mengarahkan pada tulisan unicode


32/93

[Desain Web] 32

Selektor{ unicode-bidi:bidi-override}

Value lain : normal, embed

Property Border

Property ini adalah untuk mengatur elemen yang mempunyai garis dengan berbagai variasi lebar, warn

serta gaya suatu tampilan. Anda bisa membuat suatu garis antara kiri-kanan-atas-bawah denga

berbeda style.

1. BorderProperty ini untuk mengatur border secara keseluruhan

Selektor{border:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

2. Border-widthProperty ini untuk mengatur lebar border secara keseluruhan

Selektor{ border-width:thin}

Value lain : thick, medium

3. Border-top-widthProperty ini untuk mengatur lebar border top

Selektor{ border-top-width:thin}


4. Border-right-widthProperty ini untuk mengatur lebar border right

Selektor{ border-right-width:thin}


5. Border-bottom-widthProperty ini untuk mengatur lebar border bottom

Selektor{ border-bottom-width:thin}


6. Border-left-widthProperty ini untuk mengatur lebar border left

Selektor{ border-left-width:normal}


7. Border-colorProperty ini untuk mengatur warna dari border

Selektor{ border-color:#333333}

Value lain : anda bisa gunakan warna hexadecimal yang awalnya dimulai dengan tanda #

8. Border-styleProperty ini untuk mengatur style dari border

Selektor{ border-style:normal}



33/93

[Desain Web] 33

9. Border-topProperty ini untuk mengatur border top

Selektor{ border-top:normal}


10.Border-rightProperty ini untuk mengatur border right

Selektor{ border-right:normal}


11.Border-bottomProperty ini untuk mengatur border bottom

Selektor{ border-bottom:normal}


12.Border-leftProperty ini untuk mengatur border left

Selektor{ border-left:normal}


Property Margin

Property Margin ini untuk mengatur ruang atau jarak batasan antar elemen, misalnya antara eleme

atas dan bawah, atau antara kiri dan bawah dan lain-lain.

1. MarginProperty ini untuk mengatur jarak meliputi secara keseluruhan antar elemen

Selektor{ margin:auto}

Value lain bisa ukuran px,em atau persentase misalnya 25%2. Margin-top

Property ini untuk mengatur jarak top dengan elemen

Selektor{ margin-top:auto}

Value lain bisa ukuran px,em atau persentase misalnya 25%

3. Margin-leftProperty ini untuk mengatur jarak left dengan elemen

Selektor{ margin-left:auto}


4. Margin-rightProperty ini untuk mengatur jarak right dengan elemen

Selektor{ margin-right:auto}


5. Margin-bottomProperty ini untuk mengatur jarak bottom dengan elemen

Selektor{ margin-bottom:auto}



34/93

[Desain Web] 34

Property Padding

Property padding adalah untuk mengatur ruang antara elemen dan konten.

1. PaddingProperty ini untuk mengatur ruang elemen dengan konten secara global

Selektor{ padding:7px}


2. Padding-topProperty ini untuk mengatur ruang elemen top dengan konten

Selektor{ padding-top:7px}


3. Padding-leftProperty ini untuk mengatur ruang elemen left dengan konten

Selektor{ padding-left:7px}


4. Padding-rightProperty ini untuk mengatur ruang elemen right dengan konten

Selektor{ padding-right:7px}


5. Padding-bottomProperty ini untuk mengatur ruang elemen bottom dengan konten

Selektor{ padding-bottom:7px}


Property Page Layout

Property Page Layout adalah untuk mendesign suatu layout pada halaman web, ini property pentin

yang harus anda kuasai karena dengan menguasai property ini maka anda bisa membuat suatu halama

web yang bagus dan tentunya harus didukung dengan kreatifitas.

Pada HTML tidak mendukung akan tampilan layout sebaik CSS, dengan menguasai Property ini anda jug

bisa merubah pada themes atau template melalui script CMS yang ada sekarang ini.

1. PositionProperty ini untuk menentukan di mana elemen akan ditempatkan juga untuk menempatkan

elemen induk.

Selektor{ position:absolute}

Value lain : fixed,relative, static, top, bottom, left, right

2. TopProperty ini untuk menentukan bagian atas dari suatu elemen ditempatkan.

Selektor{ top:absolute}

Value lain : fixed,relative, static,auto


35/93

[Desain Web] 35

3. LeftProperty ini untuk menentukan bagian kiri dari suatu elemen ditempatkan.

Selektor{ left:absolute}


4. BottomProperty ini untuk menentukan bagian bawah dari suatu elemen ditempatkan.

Selektor{ bottom:absolute}


5. RightProperty ini untuk menentukan bagian kanan dari suatu elemen ditempatkan.

Selektor{ right:absolute}


6. WidthProperty ini untuk menentukan lebar dari suatu elemen

Selektor{width:50%}

Value lain: px,em,auto

7. Min-widthProperty ini untuk menentukan lebar minimal dari suatu elemen

Selektor{ min-width:50%}

Value lain: px,em,auto,none

8. Max-widthProperty ini untuk menentukan lebar maximal dari suatu elemen

Selektor{ max-width:50%}


9. HeightProperty ini untuk menentukan tinggi dari suatu elemen

Selektor{ height:50%}


10.Min-heightProperty ini untuk menentukan tinggi minimal dari suatu elemen

Selektor{ min-height:50%}


11.Max-heightProperty ini untuk menentukan tinggi maximal dari suatu elemen

Selektor{ max-height:50%}


12. z-indexProperty ini untuk mengatur beberpa elemen yang terjadi overlap

Selektor{z-index:auto}

Value lain mengunakan bilangan bulat ( integer)


36/93

[Desain Web] 36

13.VisibilityProperty ini untuk mengatur elemen apakah ditampilkan pada browser atau tidak.

Selektor{ visibility:hidden}

Value lain : visible, collapse

14.OverflowProperty ini untuk mengatur menampilkan konten yang tidak bisa ditampung oleh elemen

Selektor{ overflow:auto}

Value Lain : hidden, scroll, visible

15.FloatProperty ini membuat efek elemen yang keluar dari flow dan ditempatkan disisi kiri atau kanan

suatu elemen

Selektor(float:left}

Value lain : None, right

16.ClearProperty ini digunakan bersama dengan float dan disini ditentukan apakah elemen bisa

menerima suatu float atau tidak.

Selektor{ clear:both}

Value lain : left, right, none

17.ClipProperty ini untuk mengatur cupilkan kecil suatu elemen untuk ditampilkan.

Selektor{ clip:rect('top', 'right', 'bottom', 'left')}

Value lain : both

Property Background

Property ini berguna untuk mengatur tampilan background atau halaman belakang suatu web ser

pengaturan suatu background yang lainnya misalnya background dari font.

1. BackgroundProperty ini untuk mengatur background secara luas

Selektor{ background:bottom}

Untuk value lain bisa : url, none, center, left, right, top, no-reapet, reapet, reapet-x, reapet-y,

fixed, scroll Untuk contoh penggunaaan value url :

Selektor(background:url(http://www.stmik.com/background.png) fixed no-reapet top left}

2. Background-colorProperty ini untuk mengatur warna dari background

Selektor {background-color:#000033}

Value lain anda bisa gunakan pewarnaan hexadecimal.

3. Background-imageProperty ini untuk mengatur background gambar dari suatu table , halaman atau elemen yang

lain


37/93

[Desain Web] 37

Selektor(background:url(https://reader003.{domain}/reader003/html5/0303/5a9aaf692356e/5atau value none untuk tidak

menampilkan gambar.

4. Background-attachmentProperty ini untuk mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau

tetap

Selektor{ background-attachment:scroll}

Value lain : fixed

5. Background-repeatProperty ini untuk membuat perintah pada image yang ada pada background untuk perulangan

karena disebabkan gambar yang ukuran kecil

Selektor{ background-repeat:repeat}

Value lain: no repeat, reapet-x, reapeat-y

6. Background-positionProperty ini untuk mengatur posisi dari gambar background pada halaman.

Selektor{ background-position:top}

Value lain : left, right, bottom, center

Property Type Elemen

Property ini untuk mengatur suatu elemen dalam web.

1. DisplayProperty ini untuk mengatur sebagaimana elemen akan terpasang pada halaman website

Selektor{ display:block}

Value lain : compact, inline, inline-table, list-item, marker, none, run-in, table, table-caption,

table-cell, table-column, table-column-group, table-footer-group, table-header-group,table-row

table-row-group

2. White-spaceProperty ini dapat digunakan jika anda menggunakan elemen block dan untuk menentukan apa

yang akan browser lakukan kepada white-space ( spasi )

Selektor{ white-space:normal}

Value lain : normal, nowrap, pre

3. List-style-typeProperty ini digunakan untuk menentukan suatu Style List Item ( Bullet )

Selektor{ list-style-type:armenian}

Value lain : cirle, cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew,

hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, square,

upper-alpha, upper-latin, upper-roman

4. List-style-imageProperty ini untuk membuat bullet dari gambar

Selektor{ list-style-image:url(http://www.stmik.com/bullet.gif)}


38/93

[Desain Web] 38

5. List-style-positionProperty ini untuk mengatur posisi bullet

Selektor{ list-style-position:inside}

Value lain : outside

6. List-styleProperty ini untuk mengatur style dari list ( bullet ) secara global

Selektor{ list-style-type:armenian}

Value lain : url, inside, outside, cirle, cjk-ideographic, decimal, decimal-leading-zero, dis

georgian, hebrew, hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lower-roma

none, square, upper-alpha, upper-latin, upper-roman

7. Border-collapseProperty ini untuk mengatur border table

Selektor{border-collapse:collapse}

Value lain : separate

8. Border-spacingProperty ini untuk mengatur space pada border

Selektor{border-spacing:0}

9. Caption-sideProperty ini untuk mengatur posisi dari caption

Selektor{caption-side:bottom}

Value lain : top, left, center, right

10.Empty-cellsProperty ini untuk menampilkan atau menyembunyikan cell pada table

Selektor{empty-cells:hide}

Value lain : show

11.Table-layoutProperty ini untuk mengatur layout suatu table apakah menyesuaikan atau tetap .

Selektor{table-layout:auto}

Value lain : fixed

Property Interface

Property ini untuk mengatur tampilan pada web untuk membuat tampilan yang ditujukan untu

pengguna.

1. CursorProperty ini untuk mengatur tampilan cursor yang kan dipakai user pada browser

Selektor{cursor:auto}

Value lain : url , crosshair, default, e-resize, help, move, ne-resize, n-resize, nw-resize, pointe

se-resize, sw-resize, text, wait, w-resize


39/93

[Desain Web] 39

2. OutlineProperty ini mengatur garis tepi dari elemen secara global

Selektor{outline:#333333}

Untuk warna bisa menggunakan warna hexadecimal lain atau value lain : dashed, dotte

double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thick

3. Outline-colorProperti ini mengatur warna dari garis tepi suatu elemen

Selektor{outline:#333333}

Untuk warna bisa menggunakan warna hexadecimal lain

4. Outline-styleProperty ini untuk mengatur style dari garis tepi suatu elemen

Selektor{outline:dashed}

Value lain : dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thic

5. Outline-widthProperty ini untuk mengatur sebeapa lebar garis tepi suatu elemen

Selektor{ outline-width:medium}

Value lain : thick, thin

DESAIN WEB MENGGUNAKAN CS

Desain Layout Website

Terlebih dahulu anda buat folder untuk menyimpan hasil pekerjaan.

Kemudian anda buka folder tersebut dan buat lagi folder images yang digunakan untuk menampun

images/gambar.

Buat gambar dengan nama header.jpg dan footer.gif seperti di bawah ini dan simpan pada folde

images anda.


40/93

[Desain Web] 40

Footer.gif header.jpg

Membuat File HTML untuk Layout

Ketikkan kode HTML di bawah ini menggunakan editor yang anda inginkan, silahkan anda gunaka

Notepad atau Dreamweaver.

Layout Web

Keterangan dari kode diatas:

Kode diatas murni kode HTML dan anda telah membuat tag DIV dengan masing-masindiberikan selector ID, anda masih ingat tentunya dengan selector ID yang dipisahkan da

header,menu navigasi,content, menu kanan,footer

Kode yang saya tebalkan merupakan link untuk menggabungkan dari File HTML dengan File CSS

1 X 128 Pixel (1000 X 160 Pixel)


41/93

[Desain Web] 41

Lalu simpan dalam folder web cssyang sudah anda buat, beri nama dengan index.html .

Kemudian anda berikan konten halaman web yang diketikkan antara . Berikut

adalah konten yang bisa anda ketikkan :

Pentingnya Membaca Buku

Buku adalah gudang ilmu, apa saja yang anda inginkan ada dalam

sebuah buku. Jadi biasakan anda membaca buku walaupun Cuma satu menit saja.

Dengan membaca buku, maka anda akan mendapatkan informasi dari isi buku yang anda baca.

Informasi yang anda dapatkan bisa berupa ilmu computer, kemajuan tekhnologi atau apapun yang

anda sukai.

Sebaiknya kebiasaan membaca buku dimulai sejak dini. Ajarkan anak-anak anda

untuk gemar membaca buku. Yang kelak dari kebisaan itu akan mendapatkan hasil yang

menggembirakan dimasa yang akan datang .

Kekuatan dari buku terletak dari judul cover yang ada pada sampul buku. Dari situlah asal mulaorang akan tumbuh kemauan untuk membaca sebuah buku apabila judul yang diberikan menarik

baginya, serta bisa berguna bagi yang membaca.

Buku sering dugunakan sebagai saran untuk memberikan informasi yang membuat orang senang

apalagi jika dalam buku tersebut disajikan dengan bahasa yang mudah dimengerti dan disertakan

dengan gambar-gambar yang sesuai dan menarik.

Kedepan diharapkan kebiasaan membaca buku harus tetap dijaga sampa

anda dapatkan informasi yang anda harapkan tercapai adanya.

Untuk penutup mungkin dengan adanya buku, maka dapat menambah perbendaharaan informas

terutama informasi-informasi yang bermanfaat dan bermutu. Sehingga dengan adanya buku,

masyarakat Indonesia akan semakin cerdas, sesuai harapan kita semua.

Buku adalah gudang ilmu, dari sanalah kita akan mendapatkan segalanya. Tetaplah Kebiasaanmembaca digalakan. Semoga sukses.

Hasil dari kode HTML setelah diberikan konten setelah dijalankan melalui browser adalah :

Membuat File CSS Layout

Berikut kode dari file CSS :


42/93

[Desain Web] 42

* {

margin: 0;

padding: 0;

}

body {font-family: Arial, Helvetica, sans-serif;

}

#container{

width:1000px;

margin:0 auto;

}

#header{

background-image:url(images/header.jpg);

background-repeat:no-repeat;

background-position:center;

background-color:#FFFF99;

width:1000px;

height:160px;

}

#menu{

background-color:#993300;

width:1000px;

height:35px;

}

#content{

background-color:#EBEBEB;

width:700px;

float:left;}

#right {

width:300px;


float:left;

}

#footer{

background-image:url(images/footer.gif);

width:1000px;

height:128px;

float:left;}

Penjelasan dari kode CSS di atas adalah :

Kode * {margin: 0;padding: 0;} adalah memberikan perintah secara general bahwa margin dapadding dengan nilai 0.


43/93

[Desain Web] 43

Kode body {} memberikan perintah untuk membuat font dari seluruh body dengan font AriaHelvetica, sans-serif .

Kode #container {} untuk membuat kerangka dari halaman web dengan ukuran lebar 1.000 pdengan posisi di tengah karena margin-nya 0 dan dibuat Auto.

Kode #header {} untuk membentuk sebuah header dengan background gambar header.jptanpa perulangan gambar (no-repeat) posisi gambar di tengah dan diberi background warn

kuning , dengan ukuran lebar 1.000px dan tinggi 160 px.

Kode #menu {} untuk membuat menu navigasi dengan warna background #993300 dengalebar 1.000 px dan tinggi 35 px.

Kode #content {} untuk membuat kerangka lebar 700 px untuk artikel dengan backgrouncolor dengan warna abu-abu (#EBEBEB) lalu penempatan posisi Float left ( nempel/menga

kekiri ).

Kode #right {} berarti kolom right dengan kerangka lebar 300 px dengan background colabu-abu dengan penempatanfloat Left.

Kode #footer {} membuat footer dengan background imagefooter.gif , lebar 1.000 px , ting128 px, penempatan Float left.

Lalu setelah itu anda simpan pada folder anda dan beri nama style.css.

Hasil dari kode HTML dan CSS apabila file index dijalankan adalah sebagai berikut :


44/93

[Desain Web] 44

Menu Navigasi

Membuat File HTML untuk Menu Navigasi

Ketikkan kode HTML untuk membuat menu navigasi diantara .. , seperti terlihat d

bawah ini :

HOME

PRODUK

ARTIKEL

MEMBER

TESTIMONIAL

KONTAK

ABOUT US

Simpan kembali (save) kode HTML anda.

Membuat File CSS dari Menu Navigasi

Untuk kode CSS pada #menu, perbaiki dan tambahkan kode berikut ini :

#menu{

background-color:#993300;

width:1000px;

height:35px;

text-align:center;

padding-top:10px;

}

a:link{

background-color:#FFFF00;

color:#000099;

text-decoration:none;

font-size:14px;

}

a:hover{

background-color:#0000CC;

color:#FFFFFF;

font-weight:bold;

text-decoration:underline;

font-size:16px;}

a:active{

color:#000000;

background-color:#FFFFFF;

font-weight:100;

}


45/93

[Desain Web] 45

Penjelasan dari CSS rule diatas sebagai berikut ini :

#menu {} untuk membuat background menu dengan warna #993300, lebar 1.000 ppenempatan text di tengah dengan menghilangkan ukuran tinggi dan mengatur denga

memberi nilai padding atas 10 px.

a:link {} ini merupakan presudo class yang mana untuk mengatur dari keberadaan dari conteatau image yang telah diberi link. Text menu telah diberi link dan pengaturannya di sini denga

pengaturan yaitu background color dari text tesebut dengan warna kuning (#FFFF00 ) dan tex

dengan tulisan warna biru tua ( #000099 ) lalu untuk menghilangkan under line ketika suatu te

diberi link maka perlu ditambahkan text decoration dengan nilai none dengan font size 14 px.

a:hover {} adalah ketika keberadaan text ketika mouse berada diatas tulisan tersebuBackground warna pada tulisan akan berganti warna menjadi biru ( #0000CC ) dengan warn

tulisan menjadi putih ( #FFFFFF ), huruf menjadi tebal serta diberi under line serta font si

berubah menjadi 16 px.

a:active {} dimana keberadaan text ketika mouse diklik, disini diberikan nilai background colberubah menjadi putih ( #FFFFFF ), tulisannya nanti berwarna hitam ( #000000 ) lalu ketebala

dikembalikan lagi seperti asal.

Simpan kembali file CSS anda. Kemudian jalankan terlihat seperti gambar berikut :

Silahkan anda membuat kreasi sendiri dengan merubah nilai dari CSS rule ini dan anda juga bis

mengganti tulisan dengan gambar.


46/93

[Desain Web] 46

Mengedit Content

Sekarang kita akan mengenal lebih jauh peran dari CSS dalam pengaturan dan design dari suatu websit

Kode HTML pada content telah kita berikan selector id maupun class. Tapi kita belum memberika

pengaturan pada selector tersebut menggunakan kode CSS.

Membuat file CSS untuk Content

Untuk kode CSS pada #content, perbaiki dan tambahkan kode berikut ini :

#content{


width:675px;

float:left;

padding:15px 10px 15px 15px;

letter-spacing:1px;

word-spacing:1px;

text-align:justify;}

h1 {


text-transform:uppercase;

font-family:Arial;

font-size:30px;

}

.indent:first-letter {

font-size:70px;

color:#0000CC;

font-weight:bold;float:left;

}

.rtk {

text-decoration:blink;

font-weight:bold;

color:#FF0000;

background-color:#CCCC00;

}

.preset{

font-style:italic;

font-weight:bold;

}

Penjelasan dari CSS di atas seperti berikut ini :

#content {} pengaturan area content dengan diberikan background color abu-abu ( #EBEBElebar dari area content 675 px , pengaturan float kiri, padding 15 px, padding kanan 10 p

padding bawah 15 px, padding kiri 15 px ( contoh penulisan ringkas dari css ) anda bi

menggunakan padding-top, padding-right, padding-bottom, padding-left) dimulainya dari to


47/93

[Desain Web] 47

dan berjalan searah jarum jam dengan nilai masing-masing, untuk setting jarak antar huruf and

bisa menggunakan letter-spacing dengan jarak 1px, dan untuk jarak antar kata anda bis

menggunakan word-spacing dengan jarak 1px juga, dengan pengaturan tulisan rata kiri maupu

kanan ( text-align:justify).

H1 {} untuk pengaturan dari Heading 1 dengan diberikan underline dengan menggunakatext-decoration, lalu seluruh tulisan menggunakan huruf besar semua dengan pengaturan tex

transform dengan nilai uppercase, lalu font dengan mengunakan arial dengan ukuran 30 px.

.indent:first-letter{} adalah untuk pengaturan huruf pertama menjadi besar atau biasa disebDrop Caps dengan ukuran 70 px warna biru ( #0000CC ),dengan huruf tebal (font-weight: bold

.rtk {} Untuk selector class ini mempunyai settingan yang membuat tulisan menjadi berkedikedip ( text-decoration:blink ) lalu tulisan dibuat tebal ( bold ) dengan warna font merah

#FF0000 ) dengan background tulisan kuning ( #CCCC00 ) untuk jenis font memang tidak

sebutkan dan itu nanti akan mengacu pada ( #container ) untuk sebuah selector class , and

bisa menaruh beberapa selector dalam halaman web, berbeda dari selector ID yang man

diizikan hanya satu saja.

.preset {} untuk selector ini anda bisa menaruh settingan untuk pengaturan font dengatulisan miring ( italic ) dan tebal ( bold ).

Simpan kembali file CSS dan refresh browser anda, lihat hasilnya di bawah ini :


48/93

[Desain Web] 48

Mengedit Colom Right

Sebelumnya anda buat 7 file gambar seperti di bawah (perhatikan nama file, ukuran/dimensions da

tipe file). Desain terserah anda.

File HTML Colom Right

Member Login

Register here

Categories

Web Design

Multimedia

Belajar CSS

Belajar PHP

Belajar Wordpress

Trik Wordpress Membuat Themes

Download

Testimonial

Berita


49/93

[Desain Web] 49

Kali ini agak rumit sedikit, karena pengaturan CSS ini lebih komplek, dan keterangan untuk kode htm

diatas adalah sebagai berikut ini :

Untuk colom right kita berencana membuat form login di bagian atas dengan mengambgambar yang sudah ada, karena kalau hanya mengandalkan warna tampak kurang menarik da

ini akan membuat anda akan bertambah wawasan. Dan di bawah form login akan dibuat untuk menaruh Categories dengan beberapa Categori da

jarak antar kata Categori akan buat titik-titik.

Membuat tulisan H1 Member Login lalu form untuk input dengan 2 field text dan 1 tombsubmit tanpa value.

Di bawah form login dibuat text Categories dengan menggunakan H2 dengan 10 text Categoriemasing-masing dengan link #.

Masing-masing sudah diberi selector, baik ID maupun class.Simpan kembali file HTML (Save) dan coba jalankan dan hasilnya adalah seperti berikut ini.

File CSS untuk colom right

Untuk CSS #right, perbaiki dan tambahkan yang perlu di bawah ini.

#right{

width:300px;


float:left;

}


50/93

[Desain Web] 50

.member{

width:264px;

height:67px;

background:url(images/member_login.gif) 0 10px no-repeat;

margin: 0 auto;font-size:20px;

color:#FFCC00;

text-indent:50px;

line-height:50px;

}

form{

background:url(images/memberlogin_bg.gif) repeat-y;

width:228px;

padding:0 18px 0 18px;

margin:0 auto;

}

form input.txtBox{

width:206px;

height:25px;

border-left:#808080 solid 1px;

border-top:#808080 solid 1px;

border-right:#D4D0C8 solid 1px;

border-bottom:#D4D0C8 solid 1px;

color:#000000;

background-color:#FFFFCC;

margin:5 0 17px 0;

padding:0 0 0 20px;

}form a{

font-size:12px;

font-weight:bold;

color:#FF6600;


padding:0 0 0 14px;

float:left;

background:url(images/register_here_bg.gif) 0 5px no-repeat;

}

form a:hover{

text-decoration:none;}

form input.login{

background:url(images/btn_login.gif) no-repeat;

width:53px;

height:13px;

border:none;

cursor:pointer;


51/93

[Desain Web] 51

float:right;

}

.bottom{

background:url(images/memberlogin_bot.gif) no-repeat;

width:264px;height:25px;

margin:0 0 5px 0;

margin:auto;

}

.categories{

font:bold; line-height:40px;

font-size:24px;

color:#FFFFCC;

background-color:#FF9900;

width:265;

padding:0 0 0 17px;

margin-top:30px; margin-left:17px;

}

ul{

width:238px;

padding:0 0 0 17px;

}

ul li{

display:block;

background:url(images/dot.gif) bottom repeat-x;

height:25px;

width:238px;

}

ul li a{

background:url(images/arrow.gif) 0 7px no-repeat;

font-size:14px;

color:#000000;



margin:0;

padding:3 0 3 14px;

display:block;

}#right ul li a:hover{

color:#FFFFFF;

background-color:#FF9900;

}

Memang agak banyak pengaturan dari colom right ini, dan langsung saja penjelasannya:

#right {} pengaturan dari kolom right itu sendiri dengan nilai lebar 300 px, background colabu-abu ( #EBEBEB ) danfloat:left.


52/93

[Desain Web] 52

.member {} adalah selector class dariH2 text Member Login dengan pengaturannya lebar 26px dan tinggi 67 px dan anda mengambil background gambar dari member_login.gif jarak da

kiri 0 dari atas 10px tanpa perulangan gambar (background:url(images/member_login.gif 0 10p

no-repeat) dan margin 0 penempatan center ( auto ) lalu untuk ukuran font sebasar 20 p

dengan warna kuning (#FFCC00) dengan jarak tulisan dari member login dari tepi sebesar 50 px

text-indent: 50px ) dan jarak antar tulisan atas 50 px ( line-height:50px).

#form {} untuk form dibuat background dengan menggunakan images yaitu memberlogin_bg.gif dengan perulangan hanya dari atas kebawa

(background:url(images/memberlogin_bg.gif) repeat-y) lebar 228 px , padding atas 0 , paddin

kanan 18 px padding bawah 0 padding kiri 18 px, lalu margin 0 auto.

form input.txtBox {} ini untuk mengatur form input username dan password, anda buat lebdari ukuran text field lebar : 206 px dan tinggi 25 px, anda buat border supaya lebih cant

dengan border kiri dan atas berwarna (#808080), border kanan dan bawah warna (#D4D0C

type border solid lebar border 1 px lalu warna tulisan berwarna hitam ( #000000), warna tex

input kuning muda ( #FFFFCC ) dengan margin 5 0 17px 0 dan padding 0 0 0 20 px.

form a {} untuk mengatur tulisan Register Here dengan pengaturan sebagai berikut ukuratulisan 12 px, dengan tulisan tebal ( bold ) warna tulisan orange ( #FF6600 ) menggunaka

underline, float left, padding 0 0 0 14 px dan disebelah kiri tulisan akan kita letakkan gamb

centang tepat disebelah kiri tulisan (background:url(images/register_here_bg.gif) 0 5px n

repeat ).

form a:hover {} untuk memberikan efek pada tulisan Register Here ketika mouse diarahkan ktulisan dengan menghilangkan underline (text-decoration: none ).

form input.login {}selector ini untuk mengatur dan memberi gambar pada submit login yanmana pada kode HTML kita tidak memberikan tulisan login pengaturannya sebagai berikuAnda beri background image btn_login.gif tanpa perulangan gamb

(background:url(images/btn_login.gif) no-repeat ), lebar 53 px, tinggi 13 px, tanpa border,flo

right, lalu tampilan cursor kita buat symbol tangan (cursor:pointer ).

.bottom {} ini untuk menampilkan gambar bagian bawah form,yaitu dengan membebackground gambar memberlogin_bot.gif tanpa perulangan (background:u

(images/memberlogin_bot.gif) no-repeat) lebar 264 px , tinggi 25 px, dan kita memberi marg

bawah 5 px yang lain margin 0 (margin:0 0 5px 0) dan untuk menampilkan ditengah margin jug

kita beri nilai auto ( margin : auto ). Untuk pengaturan form login sudah selesai dan ini mulai ki

mengatur bagian Categories

.categories {} bagian ini untuk mengatur tulisan Categories dengan pengaturan font teb(bold), jarak tulisan atas-bawah 40 px (line-height:40px), ukuran besar font 24 px, warna tulisa

kuning muda (#FFFFCC) background warna orange (#FF9900) padding anda beri nilai 0 0 0 17p

lalu kita beri jarak dari atas 30px.

ul {} ini untuk mengatur tempat untuk membuat tulisan bullet yaitu lebar 238 px dengapadding anda beri nilai 0 0 0 17px.


53/93

[Desain Web] 53

ul li {} untuk mengatur tulisan dari categories dengan arah atas kebawah dengan melakukapengaturan (display:block), lalu anda perlu membuat titik-titik diantara tulisan yaitu denga

memberikan gambar dot.gif posisi hanya di bawah dengan pengulangan gambar horizont

(background:url(images/dot.gif) bottom repeat-x),dengan tinggi 25 px dan lebar 238 px.

ul li a {} selanjutnya anda melakukan pengaturan dari text dan kita perlu menaruh logo panadi depan text dengan images arrow.gif (background:url(images/arrow.gif) 0 7px no-repea

ukuran font 14 px, warna font hitam (#000000),background color abu-abu (#EBEBEB)disamaka

dengan yang lain,lalu kita hilangkan dulu underline (text-decoration:none), margin 0, padding

0 3 14px, lalu anda buat display:block (arah tulisan menurun).

#right ul li a:hover {} ini untuk memberi efek ketika mouse diarahkan kepada tulisan dengamemberikan warna background orange (#FF9900)dan warna tulisan berubah menjadi put

(#FFFFFF).

Setelah anda perbaiki dan tambahkan koding CSS, simpan kembali file CSS. Jalankan file index.html da

lihat hasilnya.

Mengedit Footer

Membuat File HTML Footer


54/93

[Desain Web] 54

HOME

PRODUK

ARTIKEL

MEMBER

TESTIMONIALABOUT US

Copyright 2013

Anugerah Ilmu Team (Developer Web)

Simpan kembali file HTML dan coba jalankan.

Membuat file CSS Footer

#footer{

background-image:url(images/footer.gif);

width:1000px;

height:128px;

float:left;}

#bottom{

text-align:center;

font-family:Geneva;

font-size:12px;

margin:25px 0 0 0;

font-weight:bold;

letter-spacing:1px;

word-spacing:8px;

}

#bottom a{

color:#FF00FF;}

#bottom a:link{


}

#bottom a:hover{


color:#FFFF00;


55/93

[Desain Web] 55

}

#copy{

margin:25px 0 0 0;

font-family:verdana;

color:#FFFFCC;font-size:10px;

text-align:center;

}

#copy a {

color:#FF00FF;

}

#footer #copy a:link{


}

#footer #copy a:hover{


}

Penjelasan dari kode CSS yang sudah anda buat :

#container {} membuat page dengan lebar 100 px margin 0 dengan penempatan ditenga(auto).

#footer{} ini untuk mengatur footer dengan lebar 1000px dan tinggi 128 penempatan float:lef #bottom{} untuk pengaturan test menu bottom penempatan tulisan ditengan ( tex

align:center), font menggunakan Geneva,besar font 12 px, kita beri margin dari atas 25 px da

selebihnya 0, font dibuat tebal (bold) dengan jarak antar huruf 1 px, dan jarak antar kata 8 px.

#bottom a {} untuk mengatur tulisan yang diberi link berwarna putih (#FFFFFF). #bottom a:link{} untuk pengaturan efek dari text menu bottom tanpa underline (tex

decoration:none) .

#bottom a:hover{} untuk memberi efek jika mouse diletakkan diatas tulisan dengamenambahkan underline (text-decoration:underline) dan warna text berganti warna kunin

(#FFFF00).

#copy {} untuk pengaturan tulisan copyright, kita beri margin 25 0 0 0 , font menggunakaverdana, kuning muda(#FFFFCC), ukuran font 10 px, penempatan font ditengah.

#copy a {} memberi pengaturan warna font yang diberi link dengan warna yang sama dengatulisan copyright yaitu kuning muda (#FFFFCC)

#footer #copy a:link{} memberi efek pada link tanpa underline dengan memberi nilai non(text-decoration:none)

#footer #copy a:hover{} memberi efek pada link jika mouse diarahkan pada tulisan dengamemberi efek underline (text-decoration:underline)

Simpan kembali file CSS dan coba jalankan file index.html dan lihat hasil akhirnya di bawah ini.


56/93

[Desain Web] 56

Membuat halaman yang lain

Anda perlu membuat halaman yang lain yaitu :

Produk (produk.html) Artikel (artikel.html) Member (member.html) Kontak (kontak.html) Testimonial (testimoni.html) About Us (about-us.html)

Dan halaman-halaman pada kolom right juga.

Untuk membuat halaman Produk, sangat mudah sekali karena anda sudah mempunyai index.html.

Sebelumnya coba anda beri Link untuk menu Home-Produk-Member-Testimonial-Kontak-About U

terlebih dahulu padafile index.html

Pada file HTML sudah beri link pada menu, sebagai cuplikan silahkan lihat ini :

HOME

PRODUKARTIKEL

MEMBER

TESTIMONIAL

KONTAK

ABOUT US

Begitu pula untuk footer anda beri link yang sama dengan Menu Navigasi atas.


57/93

[Desain Web] 57

Copy file index.html dan rename dengan nama produk.html, begitu juga copy lagi dan rename denga

nama sesuai dengan Nama Menu. Atau seperti dibawah ini :

Produk(produk.html)

Artikel (artikel.html)

Member (member.html)Kontak(kontak.html)

Testimonial(testimoni.html)

About Us(about-us.html)

Kemudian anda bisa rubah halaman Konten pada halaman Home dengan Konten sesuai denga

kebutuhan .

Sekarang anda coba dengan klik 2 kalipada index.html

JQUER

Semenjak dirilis pertama kali pada tahun 2006 oleh John Resig, jquery telah mencuri perhatian pa

developer web. Buktinya, pada tahun-tahun berikutnya jquery telah banyak digunakan oleh websit

website terkemuka di dunia, seperti Google, Microsoft, Intel, Nokia, Mozilla. Bahkan website lokalpu

tidak mau ketinggalan, lihat saja Detik, Studio 21 (21cineplex.com), Indosiar, Kompas, dan lain- lai

Untuk lebih lengkapnya lihat http://docs.jquery.com/Sites_Using_jQuery.

Apa itu jQuery?

jQuery adalah Javascript Library kumpulan kode/fungsi Javascript siap pakai, sehinggmempermudah dan mempercepat kita dalam membuat kode javascript. JQuery menyederhanakan kod

Javascript, hal ini sesuai dengan slogannya Write Less, do more.

Mengapa Memilih jQuery?

Mengapa kita lebih memilih jQuery dibandingkan Javascript Library pendahulunya seperti Prototyp

Mootools, YUI (Yahoo User Interface), dan Dojo? Berikut beberapa alasan yang membuktikan jQue

sangat Powerfull dan layak dijadikan pilihan, yaitu :

jQuery telah banyak digunakan oleh website-website terkemuka di dunia. Kompatble/cocok dengan semua browser. Compatible dengan semua versi CSS. Dokumentasi, tutorial dan contoh-contohnya lengkap, silhkan kunjungihttp://jquery.com. Didukung oleh komunitas yang besar dan aktif. Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yan

nisa disertakan pada jQuery.

Filenya hanya satu dan ukurannya kecil, sehingga cepat aksesnya.
http://docs.jquery.com/Sites_Using_jQueryhttp://jquery.com/http://2.bp.blogspot.com/-xlmCLiti2QU/UTE9OJlLpuI/AAAAAAAAAow/kUMReyAAtk4/s1600/jquery_logo.pnghttp://jquery.com/http://docs.jquery.com/Sites_Using_jQuery


58/93

[Desain Web] 58

Open Source/free (gratis). jQuery lebih banyak digunakan oleh para developer web dibandingkan Javascript Library lainnya.

Apa Kemampuan yang Dimiliki jQuery?

Mempermudah akses dan manipulasi elemen tertentu pada dokumen.jQuery mempunya selector yang sangat efisien untuk mengakses suatu elemen tertentu pad

dokumen yang selanjutnya bisa dimodifikasi sesuai dengan keinginan kita.

Mempermudah modifikasi/perubahan tampilan halaman webjQuery dapat menyesuaikan style CSS pada semua browser, sehingga permasalahan yang dialam

suatu browser dalam menampilkan halaman web dapat dihindari.

Mempersingkat AJAX (Asynchronous Javascript and XML).Kemampuan AJAX adalah mampu mengambil informasi dari server tanpa melakukan refresh pad

halaman web, artinya halaman web terlihat berganti secara otomatis. Perbandingan 25 baris kod

Ajax dapat disingkat dengan 5 baris kode jQuery. Memiliki API (Application Programming Interface).

Dengan API, jQuery dapat memanipulasi content pada suatu halaman web, seperti pengubaha

teks, manipulasi gambar, pengurutan list, dan lain-lain.

Mampu merespon interaksi antara user dengan halaman web dengan cepat. Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

Bagaimana Menggunakan jQuery?

Langkah-langkah menggunakan jQuery adalah sebagai berikut :

1. Download library jQuery dihttp://jquery.com.2. Simpan file jquery-x.x.x.js pada folder latihan anda.3. Panggil library jQuery diantara tag .4. Untuk contoh, kita buat dua buah tombol yang akan mengontrol sebuah foto.

Sembunyikan

Tampilkan

5. Buat skrip jQuery dan sesuaikan dengan id atau class yang telah didefinisikan pada langkah 4.
http://jquery.com/http://jquery.com/


59/93

[Desain Web] 59

$(document).ready(function()

{

$(.sembunyi).click(function()

{

$(#foto).hide(slow);

});

$(.tampil).click(function()

{

$(#foto).show(slow);});

});

Sembunyikan

Tampilkan

6. Simpan filenya, misal dengan nama jquery1.html. dan jalankan file tersebut. Untuk mencobanysilahkan klik tombol Sembunyikan dan Tampilkan.

Sebenarnya kalau kita ringkas, ada tiga langkah pokok dalam menggunakan jQuery, yaitu :

1. Panggil/load library jQuery.2. Buat objek dan elemennya berupa id atau class di bagian body.3. Buat skrip jQuery di bagian head untuk mengontrol objek berdasarkan elemennya.

Bagaimana Cara Kerja jQuery?

Melihat pada contoh di atas, cara kerja jQuery dapat dijabarkan sebagai berikut :

1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkasemua di halaman web. Fungsi yang digunakan adalah :

$(document).ready(function(){

//baris kode jquery akan dijalankan

//apabila semua elemen sudah ditampilkan semua

}

1

3

2


60/93

[Desain Web] 60

2. Setelah semua elemen ditampilkan, tahap berikutnya memilih elemen berdasarkan class atau yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi selector.

$(#foto)

$(.sembunyi)

$(.tampil)

3. Tahap berikutnya, memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya operaklik dan hide, dimana apabila tombol diklik, maka akan menyembunyikan elemen foto.

$(.sembunyi).click(function()

{

$(#foto).hide(slow);

});

TRIK DASAR MEMAHAMI JQUER

Filosofi dasar dari jQueryfungsi jQuery akan mencari suatu elemen tertentu yang telah didefinisika

di bagian body,kemudian melakukan sesuatu terhadap elemen tersebut.

Memahami Selector

Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan opera

terhadap elemen tersebut atau manipulasi terhadap elemen-elemen tersebut.

Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :

1. tag2. id3. class

Selector tag

Cara menggunakan selector tag adalah dengan langsung menyebut nama tag/elemennya$(div).


{

$(div).addClass(merah);

});
http://2.bp.blogspot.com/-xlmCLiti2QU/UTE9OJlLpuI/AAAAAAAAAow/kUMReyAAtk4/s1600/jquery_logo.png


61/93

[Desain Web] 61

.merah {

color: red;

font-weight: bold;}

Paragraf pertama.

Item 1

Item 2

Item 3

Penjelasan :

Semua tag dengan nama div akan terpilih oleh Selector, kemudian diberikan operasi merah terhada

elemen terpilih tersebut (operasi merah mengacu pada style yang telah kita definisikan di bagia

head, yaitu .merah), sehingga semua teks akan berwarna merah dan tebal.

Selector id

Cara menggunakan selector id adalah dengan menyertakan tanda kres (#) sebelum elemennya

$(#nama_elemen_id).


{

$(#daftar).addClass(merahkuning);

});


62/93

[Desain Web] 62

.merahkuning {

color: red;

font-weight: bold;

background-color: yellow;

padding : 3px;}

Paragraf pertama.

Item 1

Item 2

Item 3

Selector class

Cara menggunakan Selector class adalah dengan menyertakan tanda titik (.) sebelum nama elemenny

$(.nama_elemen_class).


{

$(#daftar).addClass(merahkuning);

$(.subdaftar).addClass(kuninghitam);

});

.merahkuning {

color: red;

font-weight: bold;

background-color: yellow;

padding : 3px;

}


63/93

[Desain Web] 63

.kuninghitam{

color : yellow;

background-color: black;

}

Paragraf pertama.

Item 1

Item 2

Item 3

Memahami Events

Events memutuskan kapan dilakukan operasi pada elemen, misalnya elemen yang telah dipilih (selecto

akan dilakukan operasi terhadapnya setelah diklik (click) atau setelah klik 2x (dblclick), setelah mous

berada diatas objek (hover), dan sebagainya.

Events click()


{

//apabila link < a href>.. diklik

$(a).click(function() {

alert(Selamat datang di WebQ);});

});

Klik disini untuk menuju WebQ


64/93

[Desain Web] 64

Events dblclick()

$(function()

{

//apabila objek kotak yang berada di area .. diklik 2x

$(div).dblclick(function() {

$(this).css({ background: red});

});

});

div {

background: yellow;

width: 60px;

height: 60px;

float: left;

margin: 10px;

cursor: pointer;

}

Klik 2x pada setiap kotak untuk mengubah warnanya

Memahami Effects

Effects fade()

Efek ini digunakan untuk menghilangkan atau menampilkan elemen secara perlahan-lahan, biasany

digunakan untuk transisi/pergantian suatu objek dengan objek yang lain, sehingga transisinya terliha

lebih halus. Ada tiga jenis efek fade, yaitu fadeIn, fadeOut, dan fadeTo.


65/93

[Desain Web] 65


{

$(".fadeout").click(function() {

$("#kotak").fadeOut("slow");});

$(".fadein").click(function() {

$("#kotak").fadeIn("slow");

});

$(".fadeto3").click(function() {

$("#kotak").fadeTo("slow", 0.3);

});

setTimeout(function(){

$(".tulis").fadeOut("slow", function(){

$(".tulis").remove();

});

} ,3000); //3000=3 detik

});

#kotak {

background: yellow;

width: 250px;

height: 180px;

border: 2px solid black;

}

.tulis{

background: blue;width: 300px;

height: 80px;

border: 1px solid black;

padding: 5px;

}

Fade Out

Fade InFade To 0.3

Perhatikan baik-baik tek ini,karena akan menghilang dalam hitungan 3 detik


66/93

[Desain Web] 66

Effect slide()

Efek ini digunakan untuk menghilangkan atau menampilkan elemen seperti membuka/menutu

sesuatu. Ada tiga jenis efek slide, yaitu slideUp, slideDown, dan slideToggle.


{

$(".flip").click(function() {

$(".pesan").slideToggle("slow");

});

});

div.pesan {

height: 120px;

display: none;

}

div.pesan, p.flip {

background: lightyellow;

margin: 0px;

padding: 5px;

border: 1px solid black;text-align: center;

cursor: pointer;

}

Sukses bukanlah kunci kebahagiaan

Kebahagiaan kunci kesuksesan.

Kegagalan adalah kesuksesan yang tertunda,

jangan pernah menyerah,
karena suatu saat pasti akan sukses.

Tampilkan/Sembunyikan Pesan


67/93

[Desain Web] 67

Pada skrip di atas, kita hanya menggunakan fungsi slide Toggle yang berfungsi member efek slide apabi

pada elemen belum ada efek slidenya, sedangkan menghilang efek slide apabila pada elemen sudah ad

efek slidenya.

Effect animate()

Efek ini digunakan untuk menggerakkan/menganimasikan suatu elemen.

$(selector).animate({params}, [duration], [easing], [callback])

Keterangan :

Paramsmendefinisikan property dari elemen yang akan dianimasikan dan banyak properyang bisa dianimasikan dalam waktu yang sama.

Duration mendefiniskan berapa waktu yang digunakan untuk menjalankan animacontohnya fast, slow, normal, atau bisa juga dalam bentuk millisecond, contohnya 5000=5 deti


{

$(".mulai").click(function() {

$("#kotak").animate({left: 400}, "slow").animate({ top: -160, height: 200, width: 200}, slow)

.animate({ left: 0, height: 100, width: 100}, slow)

.animate({ top: 0}, slow)

.slideUp()

.slideDown(slow)

});

});

#kotak {

background: red;width: 100px;

height: 100px;

position: relative;

}


68/93

[Desain Web] 68

Jalankan

MENGGUNAKAN PLUGIN JQUER

Plugin merupakan salah satu factor utama yang membuat jQuery begitu cepat naik daun (popular

karena kesederhanaan jQuery API memudahkan para programmer untuk menambahkan fungsi-fung

tambahan yang sangat berguna ke dalam jQuery.

Intinya, plugin adalah fitur tambahan atau fungsi siap pakai yang bisa digabungkan ke dalam jQue

untuk memudahkan pengguna membuat website berbasis jQuery dengan cepat.

jQueryUI : Ciptakan Efek yang Canggih

jQuery UI (User Interface) adalah plugin yang paling popular dikalangan programmer jQuery, karen

sampai-sampai dijadikan satu manual dengan manual jQuery di website resminya. jQuery UI dibuat ole

Paul Bakaus yang bekerjasama dengan Stefan Petre untuk menciptakan efek-efek yang canggih da

komponen library pelengkap jQuery.

Installasi jQuery UI

1. Download jQuery UI di http://jqueryui.com/download/2. Ekstrak file yang telah kita download sehingga menghasilkan file jquery-ui yang dapat ditemuka

pada folder jquery-ui-.x.x.x.

Menggunakan jQuery UI

Perhatikan pada gambar di atas, terutama folder ui yang menyimpan file-file library jQuery dan fold

themes yang menyimpan file-file css.
http://jqueryui.com/download/http://2.bp.blogspot.com/-xlmCLiti2QU/UTE9OJlLpuI/AAAAAAAAAow/kUMReyAAtk4/s1600/jquery_logo.pnghttp://jqueryui.com/download/


69/93

[Desain Web] 69

Langkah-langkah menerapkan jQuery UI pada website kita, sebagai berikut :

1. Copykan folder Jquery UI ke folder utama website kita.2. Panggil file CSS utama jQuery UI, yaitu jquery.ui.all.css yang terdapat pada folder jquery-u

1.9.2/themes/base/ , sehingga skrip yang dipakai :

3. Panggil library jQuery, yaitu jquery-x.x.x.js yang terdapat pada folder jquery-ui-1.9.2/ , sehinggskrip yang dipakai :

4. Panggil library utama jQuery UI, yaitu jquery-ui.core.js yang terdapat pada folder jquery-u1.9.2/ui/ , sehingga skrip yang dipakai :

5. Dan terakhir, panggil library komponen jQuery UI yang ingin digunakan, contoh datepicker, yaijquery.ui.datepicker.js yang terdapat pada folderjquery-ui-1.9.2/ui/, sehingga skrip yang dipakai :

< /script>

Menggunakan jQuery UI pada Tiap Komponen

Datepicker

Datepicker berfungsi untuk mengambil tanggl dari sistem kelender yang ada di komputer, sehingg

memudahkan kita dalam memilih tanggal, karena ditampilkan secara keseluruhan dan menarik.


{

$("#tanggal").datepicker({

dateFormat: "dd MM yy",

showOn: "button",

buttonImage: "jquery-ui-1.9.2/demos/datepicker/images/calendar.gif",


70/93

[Desain Web] 70

buttonImageOnly: true});

});

Masukkan Tanggal :

Menu Accordion

Accordion berfungsi untuk mengelompokkan konten dalam panel-panel yang terpisah, dima

pengunjung dapat membuka/menutup panel-panel yang diinginkan.


{

$("#isi").accordion({

fillSpace: "true",

event: "mouseover",

active: 2

});

});

#panel { height: 300px; width: 400px;}

Wed Designer

desain halaman webumhskhusus

Documents