web design

MATERI MATERI MATERI MATERI WEB DESIGNWEB DESIGNWEB DESIGNWEB DESIGN

NAHLE WEB COURSESNAHLE WEB COURSESNAHLE WEB COURSESNAHLE WEB COURSES----NAHLE NAHLE NAHLE NAHLE WEBSITEWEBSITEWEBSITEWEBSITE

Sebelum kita mulai belajar cara membuat website, ada beberapa aplikasi

yang perlu dipersiapkan, seperti Adobe Dreamweaver, Adobe Photoshop dan

Filezilla. Penjelasan dari masing masing aplikasi diatas, kita jelaskan

dibawah ini :

1. PERSIAPAN APLIKASI WEBSITE

a) Adobe Dreamweaver

Aplikasi yang berfungsi untuk menyunting halaman website dengan

banyak sekali tool diantaranya HTML, CSS, PHP dan Javascript.

b) Adobe Photoshop

Aplikasi editor buatan Adobe Systems yang dikhususkan untuk

pengeditan foto/gambar dan pembuatan efek.

c) Filezilla

Aplikasi untuk mengupload file yang akan digunakan untuk website.

Semua aplikasi diatas bisa didownload di Download area.

2. LAYOUT WEBSITE

Setelah aplikasi adobe dreamweaver selesai didownload, kemudian klik

kanan pada icon adobe dreamweaver klik sent to desktop.

Kemudian buka adobe dreamweaver dengan klik 2 kali di desktop

computer anda.

Halaman adobe dreamweaver akan tampil seperti dibawah ini, kemudian

klik HTML satu kali seperti dibawah ini

Ini adalah halaman kerja adebo dreamweaver - HTML

Kode dasar HTML otomatis ada pada halaman adobe dreamweaver ketika

membukanya, untuk lebih jelas saya tulis dibawah ini :

Untitled Document

Dalam pembuatan website kode kode diatas adalah wajib harus ada,

: kode ini adalah sebagai pembuka

: sedangan kode ini adalah sebagai punutup, dan begitu juga

kode kode lainya seperti , dll. Pasti ada penutupnya

yaitu dan .

Namun ada pengecualian kode html yang tanpa penutup yaitu :

: untuk garis baru pada kalimat

: untuk garis seperti : _______ (buka dibawah huruf/underline).

Sebelum take action membuat website, kita harus membuat folder

dulu, untuk tempat penyimpanan file file website nantinya.

Okey kita buat folder di data D:\, dengan nama latihan (tanpa kutip)

kemudian kita masuk di folder latihan dan kita juga buat folder lagi dengan

nama image.

Okey kita mulai membuat website dimulai dari pembuatan title seperti

dibawah ini :

1) Pembuatan title / judul pada webste

Ini adalah halaman kerja website pada dreamweaver, kode dibawah

yang dilingkari itu hanya sebagai pelengkap saja dari developer

dreamweaver. Apabila kita hapus juga tidak ada masalah, tapi sebaiknya

biarkan saja apa adanya.

Untitled Document

Sekarang kita akan membuat judul pada website, seperti contoh

dibawah ini :

Cara membuat tulisan di tab dan Mozilla yaitu dengan cara menuliskan

kalimat pada titlenya :

Latihan Web Design Nahle Corporation

Setelah kita menulis titlenya (di halaman kerja adobe dreamweaver),

kemudian kita klik file save as.. maka akan muncul jendela dibawah ini

Beri nama file tadi dengan nama index.html kemudian klik save.

Untuk melihat hasilnya di browser Mozilla, klik preview preview in firefox

dan hasilnya akan seperti gambar browser diatas.

Sekarang kita akan membuat layout website yang kurang lebih seperti

dibawah ini :

HEADER WEBSITE

MENU WEBSITE

SIDEBAR WEBSITE

CONTENT WEBSITE

FOOTER WEBSITE

Layout website diatas masuknya didalam .layout

website.. lihat dibawah ini :

html atas sebagai pembuka Html bawah sebagai penutup Isi web yang akan tampil lihat perbedaanya begitu Di browser layoutnya disini juga dengan yang lainya

CONTOHNYA

HEADER WEBSITE

MENU WEBSITE

SIDEBAR WEBSITE

CONTENT WEBSITE

FOOTER WEBSITE

2) Layout website

Sebelum kita mendesain website seperti diatas, kita belajar tentang

tag tag html dulu. Dan perlu di ingat semua kalimat dan tag html berada

diantara .

a) Heading

judul otomatis menjadi besar

judul otomatis menjadi agak kecil dari h1





Lihat contoh dibawah ini :

Lihat hasilnya di browser :

b) Paragraf

Kode paragraph dalam HTML adalah isi kalimat

Contohnya :

contoh rata is simply dummy text of the printing and typesetting

industry. Lorem Ipsum has been the industry's standard dummy text

ever since the 1500s, when an unknown printer took a e centuries, but

also the leap into electronic typesetting,.

contoh rata is simply dummy text of the printing and typesetting

industry. Lorem Ipsum has been the industry's standard dummy text

ever since the 1500s, when an unknown printer took a galley of type

and scrambled it to make a type specimen book. It has including

versions of Lorem Ipsum.

Lihat contoh dibawah ini :


Fungsi .. adalah agar antara paragraph yang satu dengan

paragraph yang lainya tidak menyatu. Apabila kita hilangkan kode ..

maka hasilnya menjadi satu seperti dibawah ini :

c) Garis Baru

Kode fungsinya sebagai garis baru

Contohnya :

Mobil

kapal

motor

becak

Sepeda

Lihat contoh dibawah ini, kita cantumkan contoh yang menggunakan

kode dan tanpa kode :


d) List (Numbering & Bulleting)

1) Bulleting yaitu list berupa gambar

Kode HTML yaitu :

MOBIL

MOTOR

SEPEDA

2) Numbering yaitu list berupa angka

Kode HTML yaitu :

MOBIL

MOTOR

SEPEDA

3) Modifikasi list :

MOBIL

MOTOR

SEPEDA


e) Membuat Tabel

Kode HTML yaitu :

untuk garis garis pada tabel

Hasil di browsernya seperti dibawah ini :

Apabila kita ingin menempatkan table pada tengah tengah browser

maka kita harus menyisipkan kode : align="center" didalam kurung table.

Begitu juga apabila kita ingin menempatkan kata kata No., Nama, dan

Alamat diatas menjadi rata tengah maka kita harus menyisipkan kode :

align="center" didalam kurung Contoh :

No. Nama Alamat

Hasilnya akan seperti ini :

f) Modifikasi Animasi Kata/Kalimat

a. Kalimat berkedip

Agar kalimat bisa berkedip, maka sisipkanlah kalimat tersebut di

antara kode . , Lihat contoh dibawah ini :

Nahle Courporation

b. Kalimat berjalan

Agar kalimat bisa berjalan, maka sisipkanlah kalimat tersebut di

antara kode ., Lihat penjelasan

dibawah ini :

kecepatan berjalanya

Kalimat berjalan yang bisa diatur

Untuk tulisan berjalan Berjalanya dari kiri ke kanan berjalanya bolak balik

Lihat contoh di dreamweaver :

Hasil di browsernya akan seperti ini :

g) Membuat form

Kita ke halaman kerja dreamweaver taroh kursor diantara |

, kemudian klik insert form. Ada banyak macamnya seperti

text field, textarea, checkbox dll.

Kita disini klik text field dulu maka akan muncul jendela dibawah ini

Isi name dengan nama, value dikosongkan saja, size 25 kemudian klik

ok, lihat hasilnya :

Kemudian kita tulis Nama : sebelum kode seperti dibawah ini :

Kemudian klik save dan lihat hasilnya dibrowser :

Sekarang kita buat checkbox dengan cara sama seperti diatas tapi kita kilk

checkbox maka akan muncul jendela :

Kita tulis name dengan jenis_kelamin, lalu klik ok. Kita buat 2 chekbox

untuk laki laki dan perempuan kemudian kita tuls dibeakang kodenya tulisan

laki laki dan kode satunya perempuan dan hasilnya seperti dibawah ini :

Kemudian kita buat lagi textarea dengan cara sama seperti diatas maka

nanti akan keluar jendela

Isi sesuai gambar diatas kemudian klik ok.

Kemudian kita buat lagi sumbit dengan ke insert form - button maka akan

muncul jendela

Ganti type dengan submit, isi name dengan submit, value : daftar kemudian

klik oke. Kemudian save dan lihat hasilnya di browser :

Agar bisa lebih rapih kita bisa menggunakan table seperti yang telah

diajarkan diatas. Lihat dibawah ini :

Dan hasilnya seperti dibawah ini :

h) Grouping Element

Sekarang kita belajar mengenai layout website yang sebelumnya

sebagian telah kita bahas diatas, untuk lebih jelasnya kita bahas lagi disini :

Latihan Web Design - Nahle Corporation

HEADER WEBSITE

MENU WEBSITE

SIDEBAR WEBSITE

CONTENT WEBSITE

FOOTER WEBSITE

Dalam membuat layout website, kode yang kita pakai yaitu :

............... Utk Layout Besar seperti head, content,

sidebar,footer dll.

............... Utk Layout kecil seperti layout dalam

content.

Kode div diatas tidak akan bisa dibuat untuk layout tanpa adanya kode

pendamping yaitu kita disini menggunakan kode CSS (Cascade Style Sheet).

Banyak keuntungan apabila kita menggunakan kode css dalam

mendesain website yaitu apabila kita mengedit website cukup kode css nya

saja yang diedit maka semuanya akan berubah. Bayangkan apabia kita tidak

menggunakan kode css kita harus mengedit semua halaman website satu

persatu, maka akan membutuhkan waktu yang sangat lama sekali. Selain

itu keuntungan dalam menampilkan di browser akan lebih ringan karena

kode yang ada di halaman hanya sedikit karena sebagian dikendalikan oleh

kode css. Bayangkan pula apabila halaman website terlalu penuh dengan

kode kode html maka misalnya dalam menampilkan halaman index.html

akan sedikit berat dan lama tampilnya. Dan pada akhirnya pengunjung akan

meninggalkan website sebelum halaman tampil sempurna karena terlalu

lama menunggu.

Okey kita langsung belajar melayout website dengan penggabungan

kode div dan kode css seperti dibawah ini :

Pertama kita masuk ke halaman kerja dreamweaver klik file new

seperti dibawah ini :

Kemudian akan tampil jendelan seperti dibawah ini, maka kita pilih css lalu

klik Create seperti gambar dibawah ini :

Dan halaman kerja css seperti dibawah ini :

Sekarang sebelum kita membuat kodenya kita save terlebih dahulu.

Dalam men save sama seperti kita men save index.html yaitu masuk file

save as.. maka akan tampil jendela seperti dibawah ini :

Ganti File name diatas dengan nama style.css kemudian klik save di

folder latihan seperti jendelan diatas.

Okey kita mulai membuat kode css nya untuk membuat header, menu,

sidebar, content dan footer.

Dalam penulisan kode css, kode standarnya di awali dengan kode

dibawah ini :

# ini dsebut Id fungsinya untuk layout dan digunakan hanya

satu kali panggil pada div yang sebelumnya telah kita singgung

sedikit.

. ini disebut Class fungsinya untuk style text dan bisa dipagil

beberapa kali pada div yang sebelumnya telah kita singgung sedikit

pula.

Okey deh dari pada bingung kita langsung saja ke halaman kerja css,

kita langsung belajar kodenya yaitu kita copy kode css dibawah ini lalu paste

di halaman kerja css.

#wrapper { width:800px; margin:0 auto; } #header { width:800px; height:150px; background-color: #00CC00; } #menu { width:800px; height:50px; background-color:#0066FF; } #sidebar_kiri { width:240px; height:500px; margin:0px 3px 0px 0px; background-color:#00FF33; float:left; } #content { width:545px; height:500px; background-color:#00FF33; float:left; margin:0px 0px 0px 3px ; padding:4px 2px 0px 4px; text-align:justify; } #footer { width:800px; height:70px; background-color:#333333; clear:both;

} Lihat hasilnya di halaman kerja css dibaah ini :

Agar posisi halaman

website berada di tengah

Untuk layout

header website,

begitu juga yang

lainya

Keterangan kode css :

No Kode CSS Fungsi

1 width:800px; Untuk mengatur lebar, disitu terlihat lebar

halaman 800 px. Untuk standar lebar halaman

website itu antara 800-1000 px.

2 height:70px; Mengatur tingginya berapa, disitu saya kasih

contoh 70px, anda tinggal tambahkan berapa saja

terserah anda.

3 font-

family:Arial,

Helvetica,

sans-serif;

Mengatur jenis huruf website, disitu ada 3 jenis

huruf, maksudnya apabila di computer orang yang

mengakses website kita tidak ada huruf arial maka

akan diganti dengan huruf keduanya dan begitu

juga seterusnya

4 font-size:14px; Mengatur ukuran huruf website,

5 float:left; Mengatur agar antara sidebar dan content saling

berdampingan. Contohnya pada layout di grouping

element yaitu antara sidebar dengan content bisa

berdampingan

6 background-

color:#333333;

Mengatur warna background pada website

7 margin:5px

5px 5px 5px ;

Mengatur jarak dari div ke arah luar, supaya walaupun sidebar berdampingan tapi ada jarak antara keduanya. Disitu ada empat 5px fungsinya untuk mngatur jarak :

5px 5px 5px 5px Top Right Buttom Left

8 padding: 2px

2px 2px 2px, ;

Mengatur jarak dari div ke arah dalam, maksudnya

supaya huruf yang akan kita tulis tidak terlalu

meped ke garis pembatas. Disitu ada empat 2px,

fungsinya seperti margin diatas

9 border:1px; Mengatur garis pinggir pada div, misalnya supaya

dipinggir content ada garis garisnya

10 text-

align:justify;

Mengatur rata pada text website, disitu sebagai

contoh kita menggunakan rata justify

11 clear:both; Mengatur agar footer posisinya berada dibawah

content dan sidebar dan menyatu dengan

keduanya. Lihat contoh pada layout di grouping

element

Ingat dalam akhir penulisan kode misalkan text-align:justify; harus

diakhiri dengan tanda ; (titik koma).

Di samping itu dalam penulisan width sidebar_kiri dan content jumlahnya

harus sama dengan jumlah wrapper karena kalau lebih akan pindah ke

bawah tapi kalau kurang dilihat di browsernya kurang bagus.

Apabila di content ada kode margin/padding maka width tinggal

dikurang sesuai nilai margin/paddingnya.

Okey sekarang kita akan memanggil kode css tadi ke halaman

index.html yang sebelumnya telah kita buat.

Sekarang kita buka index.html tadi lalu kita tulis kode diantara

tulisnya disini. Susunan website yaitu pertama adalah

header, menu, sidebar, content dan footer. Maka yang kita panggil adalah

header dulu lalu dilanjutkan seterusnya sampai footer. Tapi sebelumnya

agar posisi website berada di tengah tengah browser seperti dibawah ini :

Maka dalam memanggil kita dahulukan kode wrapper dulu yaitu ketik

Disitu terlihat ada tulisan No CSS Style maka kita klik attach Style Sheet

maka akan muncul jendela :

Kita pilih file style yang dulu pernah kita buat seperti diatas lalu kita klik

Ok, maka akan muncul seperti dibawah ini :

Kita pilih dan klik wrapper kemudian wrapper berada diantara tanda kutip

lalu kita tutup dengan tanda > seperti dibawah dan setelah itu seperti biasa

kita tutup div tadi dengan seperti dibawah ini :

Untuk membuat header,menu, sidebar, content dan footer yaitu

diantara diantara agar semuanya berada di

tengah tengah browser ketika ditampilkan di browser.

Sekarang kita panggil juga header, menu, sidebar, content dan footer

dengan cara sama seperti cara kita memanggil wrapper. Hasilnya seperti

dibawah ini :

` Silahkan anda isi diantara diantara diatas tersebut dengan beberapa

paragraph. Untuk standar paragraph sementara biasanya web master

mengambil paragraph di www.lipsum.com silahkan anda buka website

tersebut lalu copy paragrafnya dan pastekan di masing masing antara div

sidebar dan div content begitu juga dengan yang lainya.

header, menu, sidebar, content

dan footer yaitu diantara .

Tulis diantara sini untuk mengisi header

Tulis diantara sini untuk mengisi menu

Tulis diantara sini untuk mengisi sidebar

Tulis diantara sini untuk mengisi content

Tulis diantara sini untuk mengisi footer

Halaman kerja index.html yang sudah di paste paragraph lorem ipsum :

Ini hasil di browsernya :

Sebagai contoh kita hanya memberikan tulisan di sidebar dan content

saja, apabila peserta ingin mengisi tulisan di footer, menu atau header kami

sangat menganjurkan karena sebagai pembelajaran agar dalam pembuatan

website bisa lancar tanpa melihat tutorial lagi.

Sampai disini kita sudah belajar cara membuat website dengan

komponen header, menu, sidebar kiri content dan footer. Namun apabila

kita menginginkan komponen lain seperti sidebar kanan anda tinggal

membuatnya dengan memanggil kode css nya setelah komponen content

dengan pengaturan width/lebar nya dengan mengurangi width content dan

sidebar kiiri. Artinya dari contoh diatas width website 800 px, maka kita bisa

dibagi tiga dengan ketentuan width masing masing terserah kita.

Setelah kita belajar dan mengulang ulang dalam pembuatan website

index.html atau halaman home seperti diatas, maka kita melanjutkan ke

pelajaran yang lainya yaitu membuat halaman product, gallery, contact,

daftar, about dan lainya seperti pada video website statis di

http://www.nahlewebsite.com :

Untuk melihat hasil yang bagus biasanya background halaman content

dan sidebar berwarna putih seperti diatas. Maka langkah pertama kita

menghilangkan dulu warna background hijau pada halaman index.html yang

dulu kita buat :

Cara mengganti background hijau diatas menjadi warna putih adalah dengan

menghilangkan kode css background-color:#00FF33; pada sidebar_kiri dan

content pada style.css seperti dibawah ini :

Hasilnya seperti ini :

Hasil di browsernya seperti ini :

MENDESAIN HEADER WEBSITE

Okey sekarang kita akan mendesain header website yang tadinya

hanya sekedar warna hijau polos saja akan menjadi seperti ini :

Pertama kita buka adobe photoshop kemudian pilih menu file - klik new

maka akan muncul jendela dibawah ini :

Ganti namenya dengan header kemudian Kita atur lebar dan tinggi header

yang akan kita buat disesuaikan dengan lebar dan tinggi header websitenya.

Kemudian klik ok maka akan muncul halaman seperti di bawah ini :

kemudian atur desain sesuai selera (kalau ingin seperti gambar diatas lihat

video tutorial buat header), setelah selesai klik file save as.. maka hasilnya

akan seperti dibawah ini :

MEMBUAT MENU WEBSITE

Untuk membuat menu website kita tinggal copy kode dibawah ini

HOME PRODUCT DAFTAR GALERY CONTACT ABOUT

Kemudian buka halaman kerja dreamweaver index.html, pastekan kode

diatas diantara pastekan disini , seperti dibawah ini

:

Kemudian klik ctrl + S lalu buka browser index.html, untuk melihat hasilnya

klik F5 maka akan muncul hasilnya seperti dibawah ini :

Untuk memposisikan menu ditengah tengah maka berilah kode

align="center" seperti dibawah ini :

Maka hasilnya seperti dibawah ini :

Okey sekarang kita copy file index.html dan pastekan sebanyak lima buah

kemudian ganti kelima hasil copyan tadi dengan nama masing masing yaitu

daftar, product, gallery, contact dan about. Seperti dibawah ini :

Sekarang kita buka seluruh file diatas ke halaman kerja dreamweaver,

kemudian ganti paragraph pada content di masing masing halaman dengan

kata kata diawah ini sesuai halamanya :

INI ADALAH HALAMAN HOME

INI ADALAH HALAMAN PRODUCT

INI ADALAH HALAMAN DAFTAR

INI ADALAH HALAMAN GALERY

INI ADALAH HALAMAN CONTACT

INI ADALAH HALAMAN ABOUT

Setelah di save semua sekarang kita lihat hasilnya dibawah ini :

Sekarang kita klik masing masing menu untuk mengecek hasilnya.

Kita lihat hasil diatas tampak kurang bagus pada sidebar dan content

karena tidak ada garis garis sampingnya, sekarang kita akan membuat garis

garis samping itu, kemudian buka style.css dan masukan kode ini

border:1px solid ; di bagian sidebar_kiri dan content seperti dibawah ini :

Ingat kurangi juga angka widthnya, baik di sidebar maupun contentnya, dan

lihat hasilnya di browser :

Bisa juga kita buang heightnya agar otomatis mengikuti isi

paragrafnya, semakin banyak paragraph maka garis garisnya juga akan

ikutan secara otomatis.

MEMBUAT BACKGROUND WEBSITE

Dalam membuat background website bisa menggunakan gambar atau warna

sesuai keinginan kita.

Cara menggunakan gambar yaitu kita tinggal masuk ke halaman Index

kemudian cari , kemudian tulis didalam body seperti ini : maka akan muncul hasilnya seperti

dibawah ini :

Sedangkan apabila kita ingin menggunakan gambar sebagai backgroundnya

maka kita harus persiapkan dulu gambarnya dengan meletakan gambar

pada folder image/gambar kemudian seperti dibawah ini :

Disini sebagai contoh backgroundnya kita gunakan gambar batik. Setelah itu

kita kembali ke dreamweaver di file Index tadi kemudian cari lalu

kita tulis didalam body kodenya seperti ini :

Dan hasilnya seperti dibawah ini :

Tanda panah diatas menunjukan nama folder letak gambar backgroundnya

sedangkan tulisan batik.jpg ini adalah nama dari background gambarnya.

Mempercantik Website Dengan Aplikasi Dari Luar

Untuk mempercantik website, kita tinggal praktekan materi pdf

web_pendamping yang ada di cd ini.

Setelah website berhasil dimodif, sekarang kita akan belajar

mengupload file file website kedalam server internet. Silahlan lihat di file pdf

Upload_website yang yang ada di cd ini.

SALAM SUKSES

Best regards,

Abdul Chantiago CEO Nahle Website Indonesia

web design

Documents