MODUL DESAIN

WEB 2020
JANUARY 2 9

ADMINISTRASI NIAGA-POLINEMA
Authored by: Becik Gati Anjari, S.S.T., MPd
BAB 1.
PENGANTAR WEB

WEB STATIS DAN WEB DINAMIS.

Halaman web dapat digolongkan menjadi web statis dan web dinamis. berdasarkan
kesepakatan maka pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi
bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi yang ada pada
halaman-halaman tersebut. Data dan informasi yang ada pada web statis tidak berubah-
ubah.Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web
server. Sedangkan web dinamis, memiliki data dan informasi yang berbeda-beda tergantung input
apa yang disampaikan client. Dokumen yang sampai di client akan berbeda dengan dokumen
yang ada di web server.

2
PERSIAPAN PEMBUATAN WEB

Pembuatan halaman web membutuhkan persiapan tidak saja pengetahuan tentang

bagaimana disain halaman web, namun juga perlu dukungan persiapan perangkat keras,
perangkat lunak, dan yang lainnya.

a. Perangkat Keras
Perangkat keras yang dibutuhkan untuk server, pengolah gambar untuk disain
pembuatan halaman web tidak berbeda jauh halaman web, HTML editor yang komplet,
dengan kebutuhan komputasi biasa. tentu kita membutuhkan spesifikasi yang
Seperangkat computer lengkap dengan CPU, lebih tinggi.
monitor, keyboard, mouse, printer dan
beberapa perangkat tambahan lain sudah
dapat digunakan untuk membuat halaman
web. spesifikasi tergantung dari perangkat
lunak yang akan diinstal pada perangkat
komputer tersebut. Jika kita menginstal web

b. Perangkat Lunak

Sistem operasi
Sistem operasi memegang peranan penting dalam pembuatan web karena pada sistem operasi
itu akan ditanamkan (diinstal) web server, web editor, sistem manajemen basis data dan bahasa
pemrograman Artinya pilihan pada sistem operasi tertentu akan menentukan pula pilihan web
server,perangkat pengembang dan bahasa pemrograman yang akan digunakan. Hal ini
dikarenakan adanya masalah kompatibilitas antar perangkat lunak.
Sebagai contoh, apabila kita memilih menggunakan sistem operasi Linux maka kita tidak dapat
menginstal IIS sebagai web server.

Web Server
Web server adalah perangkat lunak yang bertindak melayani permintaan permintaan client
terhadap halaman-halaman web tertentu. Ada beberapa nama yang cukup populer dalam dunia
web server.

3
Web / HTML Editor
Web / HTML Editor adalah perangkat lunak yang digunakan untuk membuat halaman-halaman
web, baik yang bersifat statis maupun dinamis. Di pasar perangkat lunak, saat ini tersedia
banyak sekali jenis perangkat pengembang web, mulai dari yang sederhana sampai yang canggih
dan kompleks. Namun sebenarnya untuk membuat halaman web baik statis maupun dinamis
kita dapat menggunakan teks editor biasa seperti :

• Notepad atau Vi
• Dreamweaver (dulu Macromedia
Dreamweaver),
• Microsoft Visual Studio.Net, dan
beberapa yang lainnya,
• kita akan mendapati fasilitas yang

Web Browser
Web browser berfungsi menerjemahkan kode-kode HTML menjadi tampilan yang kita
kehendaki. Ada banyak Web Browser tersedia di internet. Hampir semuanya dapat kita
download secara bebas. Beberapa nama yang cukup terkenal antara lain Microsoft Internet
Explorer, Firefox, Opera atau Safari. Microsoft Internet Explorer adalah default web browser
pada sistem operasi Microsoft adalah default web browser pada sebagian besar sistem operasi
Linux.

MEMBUAT DAN MENGUJI HALAMAN WEB

Ada dua model dalam pembuatan halaman web statis.
▪ Yang pertama adalah membuat halaman-halaman tersebut pada komputer lokal, kemudian
setelah berhasil dipindahkan ke lokasi di web server.
▪ Model kedua adalah langsung membuat halaman-halaman web di lokasi web server.
Lokasi web server dapat berada di satu komputer yang sama dengan tempat pembuatan
halaman web atau di komputer lain yang berperan sebagai server.

4
5
BAB 2.
DASAR WEB STATIS (HTML)

Web Statis adalah web yang content atau isinya tidak berubah-ubah. Maksudnya adalah isi dari
dokumen yang ada di web tersebut tidak dapat diubah secara mudah. Ini dikarenakan karena
script yang digunakan untuk membut web statis tidak mendukung untuk mengubah isi dokumen.
Karena script yang digunakan untuk membuat pengertian web statis ini seperti HTML, Cascading
Style Sheet atau biasa disebut dengan CSS. Maka dari itu untuk perubahan isi dokumen pada web
statis harus mengubah isi file HTML atau CSS tersebut. Berikut penulisan pemograman statis
sederhana menggunakan kode HTML.

2.1. STRUKTUR DASAR PENULISAN HTML

<HTML>
<HEAD>
<TITTLE>......................</TITTLE>
</HEAD>
<BODY>...................... </BODY>
</HTML>

Tag-tag di atas wajib ada dalam penulisan html

Contoh :

<html>
<head>
<tittle>Judul halaman web saya </tittle>
</head>
<body> di sini saya akan mengetikan isi tentang web saya</body>
</html>

6
 LATIHAN

1. Jelaskan fungsi-fungsi masing – masing Tag utama di atas

2. Tulikan pula cara menjalankan script HTML

2.2. WARNA DAN BACKGROUND PADA HALAMAN

Pada semua halaman web ,kalian dapat membuat pendeklarasian warna latar belakang
atau background halaman .Pendeklarasian tersebut dapat disisipkan dalam tag body
<BODY>,sehingga Atribut tersebut akan mempengaruhi terhadap Halaman web yang telah di
buat

<body atribut=”value”>...isi..</body>

Contoh :
Beberapa atribut yang di gunakan dalam tag body adalah :

ATRIBUT VALUE KETERANGAN

bgcolor Red,blue / #000000 Untuk menentukan warna background
background File gambar Membuat background gambar
text Red,blue / #000000 Warna pada text pada seluruh halaman
link Red,blue / #000000 Warna Hyperlink
vlink Red,blue / #000000 Warna link yang telah di kunjungi
alink Red,blue / #000000 Warna link yang aktif
Dll.

Struktur penulisan :
ATRIBUT CONTOH PENULISAN
bgcolor <body bgcolor=”green”>Halaman ini akan berubah jadi hijau</body>

background <body background= “gambar/logo.gif”> disini terdapat background logo

</body>
text <body text=”green”>hal web dgn text yg berwarna hijau</body>
link
vlink <body link=”green” vlink=”blue” alink=”red”>
alink

7
2.3. MEMFORMAT TEXT

Tag-tag yang di gunakan untuk melakukan pengaturan text :

TAG KETERANGAN TAG LAIN YANG FUNGSINYA
SAMA
<B> Membuat huruf tebal (Bold) <EM>...</EM>
<I> Membuat huruf miring(italic) <STRONG>...</STRONG>
<U> Membuat huruf garis bawah (underline) <DEL>...</DEL>
<S> Membuat huruf di coret (strike) <INS>.....</INS>

<html>
<head>
<title>Format halaman text</title>
</head>
<body >
<B> Ini Huruf Tebal</B> <br>
<I>Ini Huruf Miring</I><br>
<U>Ini Huruf Bergaris Bawah</U><br>
<S>Ini Huruf Di Coret</S>
</body>
</html>

2.4 MENENTUKAN UKURAN HURUF DAN WARNA

Ukuran huruf sangat penting fungsinya dalam sebuah web ,karena kita tidak mungkin
membuat sebuah halaman yang memiliki ukuran sama antara isi dengan judul halaman.HTML
menyediakan Tag <font..> yang di dalamnya kita dapat mendeklarasikan warna huruf dan
ukuran dengan menggunakan metode ini .
Atribut yang di gunakan di dalam Tag <FONT> :

ATRIBUT VALUE KETERANGAN

SIZE 5 Menentukan besar ukuran karakter/huruf
COLOR RED Menentukan warna ukuran karakter/huruf
FACE ARIAL Menentukan jenis font

Contoh :
<HTML>
<TITLE> Format Bentuk Text dan warna </TITLE>
</HEAD>
<BODY >

8
 <FONT size="+5" face="Arial" color="RED">Bentuk Text arial berwarna merah</FONT>
</BODY>
</HTML>

2.5 MENEMPATKAN KALIMAT DI TENGAH

Untuk menengahkan sebuah karakter atau kalimat pada html kalian dapat menggunakan tag<CENTER> di
ikuti dengan kalimat atau karakter dan di ikuti penutup </CENTER>
Penulisan :

<center> kalimat/karakter </center>

Contoh :
<HTML>
<HEAD>
<TITLE> Format Text di tengah </TITLE>
</HEAD>
<BODY >
<center><h1>Text ini di tengah halaman</h1></center>
</BODY>
</HTML>
Hasil :

2.6 MEMBUAT JUDUL /HEADING

Heading adalah salah satu metode yang ada pada HTML yang di gunakan untuk membuat judul dalam
paragraph .Dalam penggunaanya Heading dapat di bagi menjadi 6 <H1>-<H6>

<BODY >
<H1> Heading 1</H1>
<H2> Heading 2</H2>
<H3> Heading 3</H3>
<H4> Heading 4</H4>
<H5> Heading 5</H5>
<H6> Heading 6</H6>
</BODY>
Hasilnya :

9
2.6 MEMBUAT ANIMASI MARQUEE
Maquee adalah sebuah bentuk animasi text sederhana yang dapat di ciptakan oleh
HTML,Dengan menggunakan Marque kalian dapat menciptakan gerakan – gerakan text maupun
paragraph di dalam halaman web .
Penulisanya :

<marquee atribut=” ”>....teks....</maequee>

ATRIBUT VALUE KETERANGAN

behavior alternate Text bergerak ke kanan/ke kiri
scroll Text bergerak terus menerus
slide Text Bergerak sekali
direction left Kiri
top Atas
down Bawah
right kanan
loop n Perulangan yang bernilai n
bgcolor color Untuk warna latar belakang

Contoh :
<HTML>
<HEAD>
<TITLE>Membuat Animasi Marquee</TITLE>
</HEAD>
<BODY>
<MARQUEE behavior="alternate" bgcolor="#0099FF" >ANIMASI
MARQUEE(ALTERNATE)</MARQUEE><br><br>
<MARQUEE behavior="scroll" bgcolor="#0099FF" direction="left">ANIMASI
MARQUEE(SCROLL)</MARQUEE><br><br>
<MARQUEE behavior="slide" bgcolor="#0099FF" >ANIMASI
MARQUEE(SLIDE)</MARQUEE><br><br>
</BODY>
</HTML>

Latihan 1
Buatlah kalimat pembuka dalam website dengan ketentuan :
• Judul menggunakan huruf besar di tengah
• Harus ada animasi tulisan bergerak
• Warna background menarik
• Kaliamat pembukaan diskripsi web apa yang kalian buat berikut keteranganya (2 paragraf)
• Tata letak yang rapi Jika sudah tunjukan dan jelaskan hasil kerja kalian pada guru pendampin

10
BAB 3.
PENGENALAN DREAMWEAVER
Macromedia Dreamweaver adalah program untuk membuat dan mengedit dokumen HTML
secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak
perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP,
ColdFusion, dan XML.

3.1. AREA KERJA DREAMWEAVER

11
Berikut ini adalah keterangan untuk bagian-bagian dari ruang kerja Adobe Macromedia
Dreamweaver CS8:

• Title Bar merupakan baris yang menampilkan nama program dan nama dokumen
yang sedang berjalan.
• Menu Bar merupakan perintah-perintah untuk merancang dan mengolah dokumen
website.
• Insert Bar merupakan tombol-tombol untuk memasukan berbagai objek ke dalam
dokumen website yang sedang kita buat agar lebih cepat dan praktis.
• Document Toolbar merupakan tool-tool untuk menentukan model tampilan dan judul
halaman website.
• Document Windows merupakan ruang kerja Dreamweaver sebagai tempat untuk
merancang sebuag website.
• Panel Groups merupakan panel-panel dari berbagai fungsi Dreamweaver seperti:
Design, Code, Application, Tag Inspector, Files, Frames, dan History.
• Tag Selector merupakan tampilan informasi tag-tag yang sedang aktif seperti: <title>,
<head>, <body> dan lain-lain.
• Property Inspector merupakan perngaturan-pengaturan yang diterapkan pada suatu
objek, sehingga isi dari property inspector ini akan selalu berubah sesuai dengan objek
yang sedang aktif.
• Files Panel merupakan direktori untuk membuka, maupun menyimpan file-file
website.

3.2. MEMBUAT TEXT, GAMBAR DAN HYPERLINK

TEXT
Format teks dalam Dreamweaver pada dasarnya memiliki banyak kesamaan dengan format-
format teks pada program lain. Sebagai contoh format jenis huruf, warna, ukuran, tebal, miring,
garis bawah, dan sebagainya.

12
 LATIHAN

• Buka dreamweaver lalu ketikan sebuah kalimat. Dibagian kiri bawah terdapat
menu Properties -> HTML kemudian klik Page Properties

• Cobalah menguubah warna tulisan, background, jenis tulisan dan ukuran dengan
menekan tombol page properties.

• Jika anda ingin mengganti background dengan gambar, pilih background image ->
browse -> pilih gambar -> OK .Secara otomatis folder yang terbuka adalah folder BG
yang tadi sudah anda buat.
13
 • Jika anda hanya ingin mengganti background dengan warna saja, pilih Background dan
pilih warna yang anda inginkan.
• Jika anda juga ingin mengubah warna text, pilih text -> pilih warna yang anda inginkan.
• Setelah selesai, di bagian kanan bawah klik apply untuk melihat terlebih dahulu
background atau warna tulisan yang sudah anda pilih tadi ketika diterapkan di website
anda. Jika sudah sesuai klik OK

MEMASUKAN GAMBAR
Sekarang kita akan masukan file gambar. Caranya hampir sama dengan memasukan tabel.
Klik insert >> Image >> look in (folder gambar yang di tuju) >> OK

14
 JIka file gambar anda ternyata terlalu besar, anda dapat merubah ukurannya dengan
cara klik gambar >> properties >> W (Lebar) / H (Tinggi)

HYPERLINK
Link dibagi menjadi dua:

1. Internal Link: adalah link yang menuju ke domain web itu sendiri;
2. External Link: adalah link yang menuju domain lain.

Contoh internal link:

15
Contoh eksternal link:

• Pada dreamweaver membuat link bisa melalui 2 cara sorot object yang akan di link
kan lalu klik kanan “make link” atau dengan cara mengisi kolom link pada property.

Atau

16
 LATIHAN

1. Buat tiga paragraf dengan format dan perataan pragraf yang berbeda simpan
dengan nama file praktikum1.html: (contoh)

17
BAB 4.
MEMBUAT TABEL

Tabel merupakan bagian dasar dari pembuatan web. Penggunaan tabel sangat diperlukan agar tata letak
halaman web menjadi teratur, terorganisir dan lebih menarik. Pada subbab ini, Anda akan mempelajari
bagaimana cara membuat dan mengedit table dengan benar.

LATIHAN

1. Buka aplikasi dreamweaver

2. Buat lembar kerja baru
3. Buatlah tabel sederhana dengan menekan ikon tabel atau menekan tombol keyboard alt+ctrl+t

4. Maka akan muncul tampilan berkut :

18
 \
* gambar diatas telah diatur untuk rows atau baris yaitu 3 dan columns juga 3
* tabel widht atau lebar table di isi 500
* untuk border thickness saya isi 1 yaitu untuk ketebalan
* cell padding 3 yaitu untuk jarak antara garis cell dengan text didalamnya
* Untuk cell spacing di kosongkan ini untuk jarak antar tiap cell
* Header juga saya memilih none yaitu untuk letak headernya
* caption saya kosongkan yaitu untuk judul tablenya
* align caption dikosongkan juga untuk letak judulnya yang di inginkan
* summary dikosongkan ini untuk keterangan dari si table

5. code html untuk membuat table seperti ini :

19
 1 <p>&nbsp;</p>
2 <table width="500" border="1" cellspacing="0" cellpadding="3">
3 <tr>
4 <td>&nbsp;</td>
5 <td>&nbsp;</td>
6 <td>&nbsp;</td>
7 </tr>
8 <tr>
9 <td>&nbsp;</td>
10 <td>&nbsp;</td>
11 <td>&nbsp;</td>
12 </tr>
13 <tr>
14 <td>&nbsp;</td>
15 <td>&nbsp;</td>
16 <td>&nbsp;</td>
17 </tr>
18 </table>

6. jika ingin menambahkan sebuah tabel rows atau column bisa di block tabelnya lalu klik kanan
pilih Table lalu pilih insert rows or columns

7. Jika ingin mengatur table lebih lanjut munculkan table properti :

20
 8.
9.
Keterangan :
1. Untuk menhilangkan dan menimbulkan baris kolom
2. Untuk menentukan jenis tulisan
3. Untuk menentukan ukuran tulisan
4. Untuk menentukan panjang dan lebar kolom
5. Untuk memberi warna tulisan
6. Untuk memberi warna kolom
7. Untuk memberi warna garis
8. Untuk menentukan dan mengatur format-format yang telah di buat.

LATIHAN

1. Buatlah tabel di bawah ini , sesuai biodata masing-masing, dengan ketentuan sebagai
berikut:

21
 • Posisi tabel pada
tengah browser
• Beri nama tabel
• Bagian header
berwarna
• Insertkan image
• Insertkan list pada
hobi

2. Buatlah layoutweb sederhana menggunakan tabel dengan ketentuan sebagai berikut:

22
BAB 5.
MEMBUAT DESAIN WEB LAYER/DIV DAN
SPRY MENU

Layer cocok digunakan untuk membuat tata letak halaman yang kompleks. Anda dapat dengan
mudah merubah posisi elemen-elemen halaman dengan men-drag layer–layer tersebut.).
• Menambah layer (macromedia dremweaver )
1. Pilih Window | Layer untuk membuka Layer palette.
2. Yakinkan bahwa kotak Prevent Overlaps tercentang.
3. Klik jendela dokumen my_scall_home untuk membuat dokumen tersebut menjadi aktif.
4. Pilih Insert | Layer.
5. Pada panel Object palette’s Common, klik tombol Draw Layer.

23
• Menambah layer (adobe dremweaver)
1. Insert → Layer Objects→AP Div

Draw AP Div merupakan fasilitas di Adobe Dreamweaver yang berfungsi untuk

menggambar layout menggunakan tag div. Penggunaan tag div di sebuah dokumen HTML
adalah untuk membagi-bagi divisi atau bagian-bagian layout web berdasarkan class/id css
tertentu. Ketika membuat sebuah layout website lebih baik menggunakan tag div ini
daripada menggunakan tabel sebagai layoutnya. Hal ini dikarenakan tag div lebih mudah
di costumize css nya daripada tabel.

2. Selain dari menu insert, icon Draw AP Diva da pada menu common di group layout
seperti gambar di bawah:

24
3. Drag Mouse pada stage di bagian bawah, untuk menggambar layer dengan ukuran
sesuai keinginan Urut mulai dari:
a. Layer 1: Membuat main layout:

L:0 PX
T:0PX
W:800PX
H: 600PX

b. Layer 2: Header meggunakan layer dengan setting sebagai berikut:

L:0 PX
T:0PX
W:800PX
H: 90PX

25
c. Layer 3: Footer

L:12 PX
T:139PX
W:722PX
H: 415PX

d. Layer 4: content

e. Layer 5: Navigasi

26
 SPRY MENU
Selanjutnya kita akan membuat spry menu pada layer header dengan cara sebagai berikut :
Pilih menu Insert > Layout Objects > Spry Menu Bar.

Kemudian kotak dialog akan terbuka dengan dua pilihan, Horizontal dan Vertikal. Pilih
opsi yang anda inginkan dan tekan Ok. Pilih Horizontal menu bar.

27
Setelah mengklik OK, Horizontal menu bar muncul seperti di bawah ini dengan nama
standar seperti angka 1, angka 2, angka 3, dll

Untuk mengedit nama item, klik dua kali pada tab menu atau menggunakan Properties
inspector.
Anda dapat menambahkan menu atau submenu item dengan memilih item apapun, tercantum
dalam Properties inspector dan kemudian dengan mengklik tanda plus (+) di bagian
atas bidang menu yang sesuai. Untuk menghapus item menu, pilih item dan klik tanda minus (-)

Sekarang saya akan mengubah nama item menu utama dengan nama menu saya sendiri.

Di sisi kanan jendela properties, Anda dapat menemukan field bernama "Text", di sana
Anda dapat mengetik nama item menu seperti Home, About Us, dll ... Perubahan akan langsung
muncul.

setelah mengubah nama item menu utama, Menu bar akan seperti di bawah ini

28
Sekarang kita perlu mengedit item submenu. Submenu sudah memiliki beberapa nama
standar seperti Item 1.1, Item 1.2 dst.

Anda dapat menambahkan atau menghapus menu dan submenu dengan

mengklik simbol"+" "-" yang muncul di atas kolom submenu atau kolom kedua. Kita
bisa membuat "n" sejumlah menu & submenu.

Properties inspector, pilih nama item menu utama yang Andaingin

menambahkan submenu. Kemudian klik tombol plus di atas kolom kedua untukmembuat
item submenu baru.

Hingga pendapatkan hasil seperti dibawah ini:

Ini menu Spry Bar memiliki pilihan warna rollover default. Anda juga dapat menyesuaikan
atau restyle dengan mengubah teks, warna, font, dan pilihan lainnya menggunakan
SpryAssets.

29
30
BAB 6.
DASAR MEMBUAT FORM

Form adalah sebuah metode yang di gunakan dalam website yang mengizinkan seorang
pengunjung untuk berinteraksi dengan server ataupun dengan pengelolaan website
tersebut.Secara standart untuk dapat membuat form kita hanya menggunakan start tag
<FORM> dan di akhiri end tag </FORM>

<Form action = “ ....” method=”.....” name=”....”>

<input>
<input>
...................
</form>

Keterangan :
• <Form> : digunakan mendeklarasikan awalan/start tag sebuah form
• <input> : di gunakan untuk memasukan komponen-komponen formulir
• </form> : adalah tag yang menandakan bahwa form telah beakhir/end tag
• Action : atribut action di gunakan untuk menentukan alamat dimana data dari
komponen form akan di kirimkan.
• Method : atribut ini di gunakan untuk membedakan metode pengiriman data

Atribut Method Keterangan

GET akan ditampilkan pada url,pengiriman data ke dalam halaman lain
yang tidak berhubungan dengan halaman selanjutnya

POST variabel yang dikirimkan tidak akan ditampilkan ke url,melakukan

pengiriman data pada halaman lain yang selanjutnya dapat dip
roses menuju halaman berikutnya ataupun melakukan
pengiriman ke dalam database.

31
 • Name : Digunakan untuk member nama variable pada formulir yang kita buat
•

Cara pebuatanya :
1. Buatlah tag form
2. Buat tag table (posisi center )
3. Judul (FORM PENDAFTARAN PELATIAHN WEB PROGRAMMING)
4. Membuat komponen –komponen formnya seperti berikut

32
 LATIHAN

Coba lengkapi script berikut :

<tr>
<html> <td>NPM</td>
<head></head> <td><input type="text" name="var_npm"
<title>form</title> size="22"/></td>
<body> </tr>
<center><font face="verdana" color="blue" <tr>
size="4"><b>Form Pendaftaran Pelatihan Web <td>Nama</td>
Programming</b></font></center> <td><input type="text" name="var_nama"
size="22"/></td>
<center> </tr>
<form method="post" action="insert.php"> <tr>
<table border="0" width="75%"> <td>Password</td>
<td><input type=”……………………….”
name="var_password" size="22"/></td>
</tr>
<tr>

33
 <td>Jenis Kelamin</td>
<td><input type=”……………………”
name="var_jk" value="Laki-laki" checked/>Laki-
laki
<input type="radio" name="var_jk"
value="Perempuan"/>Perempuan
</td>
</tr>
<tr>
<td>Agama</td>
<td><………………….
name="var_agama">
<option value="">[P i l i h]</option>
<option value="Islam">Islam</option>
………………………………………………………
<option value="Protestan">Protestan</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Lainnya">Lainnya</option>
…………………………
</td>
</tr>
<tr>
<td>Hobi</td>
<td><input type="…………………….."
name="var_musik" value="Musik" />Musik
<input type="checkbox" name="var_baca"
value="Membaca"/>Membaca
<input type="checkbox" name="var_komputer"
value="Komputer"/>Komputer
</tr>
<tr>
<td valign="top">Kritik dan Saran</td>
<td><…………………………… wrap="OFF" rows="5"
cols="20" name="var_saran"></textarea></td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input type="………………….." name="submit"
value="Submit"/>
<input type="……………………." name="reset"
value="reset"/>
</td>
</tr>
</table></…………………> </body> </html>
34
BAB 7.
MEMBUAT FORM DENGAN DREAMWEAVER

Objek-objek yang digunakan dalam membuat form sudah disediakan oleh tool dreamweaver. Tool
tersebut dapat diakses pada tab insert –> form. Objek tersebut adalah : text, radio button,
checkbox, button, list/menu, file field dll. Lihat pada sub menu seperti gambar berikut :

Jika anda lihat diatas (kotak merah) itu adalah objek form yang bisa kita sisipkan dalam halaman
web (html).
Kita akan coba membuat form data mahasiswa dengan menyisipkan objek2 tersebut dalam
sebuah halaman dengan langkah-langkah berikut :

35
1. Buat sebuah halaman baru (ctrl+n), boleh html atau jenis yang lainya (php, asp, jsp sesuai
keperluan)
2. Kemudian pilih menu insert – form
Langkah ini akan digunakan untuk membuat definisi paket data yang akan dikirimkan. Setiap
form wajib membuat ini. Secara visual akan menghasilkan garis titik-titik merah.
Nanti semua objek form harus berada dalam kotak tersebut.

3. Kemudian klik pada garis merah tersebut, dan lihat pada bagian properties (dibawah), lihat
gambar :

Silahkan anda sesuaikan isian seperti diatas. Form name adalah nama form (opsional),
action adalah tujuan form diproses, target adalah tujuan halaman/frame diproses, method
terdiri post dan get. Pilih post untuk form dengan fungsi mengirim dan pilih get untuk model
mengambil data.
4. Langkah berikutnya adalah mulai mendesain form dan memasukkan objek2 form yang kita
perlukan. Kita akan buat desain form yang sederhana dengan membuat judul form terlebih
dahulu :
Anda bisa ketikkan judul misal : Data Mahasiswa. Kemudian format tulisan diubah menjadi
h1.

5. Untuk mempermudah penyusunan layout form, kita gunakan tabel. Pilih

menu insert – table, silahkan isikan nilai-nilai seperti pada gambar. (anda bisa sesuaikan
dengan bentuk lain)

36
 rows diisi sejumlah objek form yang akan dibuat misal 6. Kolom diberi nilai 3, dengan asumsi
kolom 1 untuk judul input, kolom 2 untuk tanda titik 2, kolom 3 untuk objek form. Lebar
asumsi 500px, cellpadding adalah jarak antara kotak cell dengan objek. Kemudian tekan ok.
Maka akan menghasilkan tabel, kemudian aturlah dan isi tabel agar tampilanya seperti
berikut :

6. Kemudian pindah posisi kursor ke baris nim kolom ke 3, kemudian pilih

menu insert – form – textfield
Kemudian akan muncul window seperti gambar berikut. TEKAN CANCEL untuk

37
mengabaikan.

Kenapa diabaikan, karena option ini digunakan jika anda menyusunya dengan css. Setelah
anda cancel maka akan muncul sebuah text seperti gambar :

38
 Klik pada text, dan lihat pada properties yang ada dibawah dreamweaver :

7. Isikan pada isian textfield berupa nama objek (tidak boleh ada spasi) misal : nim. Char width
diisikan nilai panjang kotak isian senilai karakter misal 20, Max char diisi nilai maksimal isian
(boleh sama, boleh juga berbeda jika diperlukan) misal 20. Kemudian ada pilihan single line
yang artinya hanya untuk satu baris, multi line untuk banyak baris (sama dengan text area),
password jika isian berbentuk bintang.
8. Lakukan hal yang sama untuk baris berikutnya (Isian Nama), Untuk isian alamat, kita bisa
pilih insert – form -textarea.

9. Untuk Jenis Kelamin pilih radio button, untuk agama pilih list/menu.

39
40
10. Untuk mengisi pilihan list/menu, klik objek list kemudian tekan list values yang ada di
properti bar, silahkan isi seperti gambar :

41
 Kemudian tekan oke.
11. Terakhir tambahkan tombol, pilih menu insert – form – button. tambahkan 2 tombol, 1
difungsikan untuk submit, yang ke dua difungsikan untuk reset form.

12. Hasil akhir form bisa anda lihat berikut :

42
BAB 8.
MEMBUAT FORM MENGGUNAKAN
CSS

CSS adalah bahasa kedua setelah HTML yang harus dipelajari seorang web developer.
Pengetahuan tentang CSS sangatlah penting bagi seorang web developer, karena dengan CSS
kita bisa:

• Halaman landing page yang menarik;

• Template atau tema blog;
• Mengubah PSD (Desain web) menjadi HTML;
• dan sebagainya.
Contohnya, bagaimana tampilan facebook tanpa CSS?
Mungkin bisa seperti ini:

43
BAGIAN-BAGIAN CSS
Mari kita lihat CSS di atas dengan sedikit lebih detil:

Struktur di atas merupakan sebuah rule set (atau sering disebut "rule" supaya lebih singkat).
Perhatikan nama dari masing-masing bagian di atas:

Selector
Nama elemen HTML di awal rule set. Selector menandai satu atau lebih elemen yang
akan diberikan gaya (contoh di sini menggunakan elemen p). Untuk memberikan gaya
pada elemen lain, kamu bisa mengubah selector sesuai elemen yang kamu inginkan.
Declaration
Suatu peraturan seperti color: red; yang menentukan properti mana dari elemen yang
ingin kamu beri gaya.
Properties
Cara kamu memberikan gaya terhadap elemen HTML (contoh di sini, color adalah
properti dari {elemen {htmlelement("p")}}.) Di dalam CSS, kamu memilih properti mana
saja yang ingin kamu berikan gaya di peraturan kamu.
Property value
Sebelah sisi kanan properti setelah tanda titik dua, kita memiliki nilai properti, yang
memilih satu dari banyak kemungkinan penampilan untuk properti yang diberikan (ada
banyak sekali nilai-nilai color selain red).

Perhatikan juga bagian-bagian lain dari sintaks di atas:

• Masing-masing rule set (selain selector) harus dibungkus dengan sepasang kurung kurawal
({}).
• Dalam masing-masing deklarasi, kamu harus menggunakan tanda titik dua (:) untuk
memisahkan properti dari nilai-nilainya.
• Dalam masing-masing rule set, kamu harus menggunakan tanda titik-koma (;) untuk
memisahkan satu deklarasi dengan deklarasi berikutnya.

44
CARA MENULIS KODE CSS DALAM HTML

Penulisan kode CSS di HTML dapat dilakukan di dalam tag <style>. Tag tersebut dapat ditulis di
dalam tag <head> atau <body>.

Kebanyakan orang menulisnya di dalam tag <head>. Perhatiakn contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penulisan kode CSS</title>

<style type="text/css">
p { color: red }
</style>

</head>

<body>
<p>Sebuah contoh paragraf yang sudah diberikan oleh kode CSS</p>
</body>
</html>
Hasilnya, elemen <p> akan berwarna merah:

45
MEMBUAT FORM MENGGUNAKAN CSS

langkah pertama seperti biasa teman-teman siapkan text editornya. Dan copy script HTML nya
di bawah ini:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Menarik</title>
</head>
<body>
<div class="form-style-3">
<form>
<fieldset><legend>Personal</legend>
<label for="field1"><span>Name <span
class="required">*</span></span><input type="text" class="input-field"
name="field1" value="" /></label>
<label for="field2"><span>Email <span
class="required">*</span></span><input type="email" class="input-
field" name="field2" value="" /></label>
<label for="field3"><span>Phone <span
class="required">*</span></span><input type="text" class="input-field"
name="field3" value="" /></label>
<label for="field4"><span>Subject</span><select name="field4"
class="select-field">
<option value="Appointment">Appointment</option>
<option value="Interview">Interview</option>
<option value="Regarding a post">Regarding a post</option>
</select></label>
</fieldset>
<fieldset><legend>Message</legend>
<label for="field6"><span>Message <span
class="required">*</span></span><textarea name="field6"
class="textarea-field"></textarea></label>
<label><span>&nbsp;</span><input type="submit" value="Sign
In"/></label>
</fieldset>
</form>
</div>

</body>
</html>

46
Lalu save dengan nama index.html, kemudian run pada browsernya. Maka hasil sementara akan
menghasilkan output seperti gambar di bawah ini

Membuat Form Menarik Menggunakan HTML dan CSS

Langkah berikutnya kita tambahkan css untuk membuat formnya mirip seperti demo gambar di
atas

<style type="text/css">
.form-style-3{
max-width: 450px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-3 label{
display:block;
margin-bottom: 10px;
}
.form-style-3 label > span{
float: left;
width: 100px;
color: #F072A9;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
}
.form-style-3 fieldset{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 0px 0px 10px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background: #FFF4F4;
box-shadow: inset 0px 0px 15px #FFE5E5;
-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}

47
 .form-style-3 fieldset legend{
color: #FFA0C9;
border-top: 1px solid #FFD2D2;
border-left: 1px solid #FFD2D2;
border-right: 1px solid #FFD2D2;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
-moz-box-shadow:-0px -1px 2px #F1F1F1;
-webkit-box-shadow:-0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 12px;
}
.form-style-3 textarea{
width:250px;
height:100px;
}
.form-style-3 input[type=text],
.form-style-3 input[type=date],
.form-style-3 input[type=datetime],
.form-style-3 input[type=number],
.form-style-3 input[type=search],
.form-style-3 input[type=time],
.form-style-3 input[type=url],
.form-style-3 input[type=email],
.form-style-3 select,
.form-style-3 textarea{
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #FFC2DC;
outline: none;
color: #F072A9;
padding: 5px 8px 5px 8px;
box-shadow: inset 1px 1px 4px #FFD5E7;
-moz-box-shadow: inset 1px 1px 4px #FFD5E7;
-webkit-box-shadow: inset 1px 1px 4px #FFD5E7;
background: #FFEFF6;
width:50%;

}
.form-style-3 input[type=submit],
.form-style-3 input[type=button]{
background: #EB3B88;
border: 1px solid #C94A81;
padding: 5px 15px 5px 15px;
color: #FFCBE2;
box-shadow: inset -1px -1px 3px #FF62A7;
-moz-box-shadow: inset -1px -1px 3px #FF62A7;
-webkit-box-shadow: inset -1px -1px 3px #FF62A7;
border-radius: 3px;
border-radius: 3px;

48
 -webkit-border-radius: 3px;

-moz-border-radius: 3px;
font-weight: bold;
}
.form-style-3 .required{
color:red;
font-weight:normal;
}
</style>

Pastekan script css di atas ini di dalam tag <head> kemudian save dan refresh pada browsernya

Membuat Form Menarik Menggunakan HTML dan CSS

49