Modul Ajar Disain Web

Bab 1
World Wide Web
1.1 Pendahuluan
WWW (World Wide Web) merupakan kumpulan informasi pada beberapa
server komputer yang terhubung satu sama lain dalam jaringan Internet. Informasi
dalam Web mempunyai link yang menghubungkan informasi yang satu dengan
informasi yang lain dalam jaringan Internet. Link ini berupa tanda khusus yang
biasanya dinyatakan dengan teks berarna biru dan bertanda garis baah!dalam
bentuk i"on maupun gambar yang dikelilingi kotak.
#ntuk mengetahui apakah suatu teks!obyek merupakan suatu link$ lihatlah
perubahan pada petunjuk mouse. %ika petunjuk mouse berubah dari bentuk tanda
panah menjadi gambar tangan yang sedang menunjuk$ berarti teks!obyek tersebut
merupakan suatu link yang menghubungkan Anda ke informasi lain dalam WWW.
&istem yang dapat mengubungkan informasi melalui link disebut 'yperte(t.
Dengan semakin berkembangnya WWW$ istilah 'yperte(t kemudian berubah
menjadi 'ypermedia$ di mana link penghubung antar informasi bukan lagi berupa
suatu teks$ tetapi bisa berupa suatu file multimedia$ seperti gambar$ suara!video.
)ekerja dengan Web men"akup bekerja dengan softare Web )roser
dan softare Web &erver. *eduanya bekerja seperti sistem "lient server dengan
tugas sebagai berikut+Web browser sebagai client untuk menginterpretasikan dan
melihat informasi Web.
a. Web server sebagai server untuk menerima informasi yang diminta oleh
broser. #ntuk mengakses Web$ Anda memerlukan suatu program yang disebut
Web )roser.
1.2 Browser
)roser adalah suatu program yang diran"ang untuk mengambil informasi
dari suatu server komputer pada jaringan Internet. Informasi ini dikemas dalam
page yang masing,masing memiliki beberapa link yang menghubungkan Web page
ke sumber informasi lain. %ika suatu link diklik$ broser akan melihat alamat dari
tujuan link tersebut$ kemudian men"ari di Web server. %ika menemukan alamat dari
tujuan link$ broser akan menampilkan informasi yang ada. %ika tak menemukan
alamat dari tujuan link$ broser akan memberikan suatu pesan yang menyatakan
baha alamat dari tujuan link tidak dapat ditemukan.
*etika belum banyak komputer yang menggunakan program Windos$
broser dibuat dengan berbasiskan teks$ sedangkan untuk menyatakan link dapat
dibuat barisan nomor yang mirip dengan suatu menu. &oftare ini dibuat untuk
komputer yang menggunakan #ni(. &etelah itu mun"ul broser Mosai" dari -.&A
(-ational .enter &uper"omputing Appli"ations) yang berbasiskan grafik dan mudah
digunakan. )roser ini dipakai untuk komputer #-I/$ -e/0$ Windos dan
Ma"intosh.
&ekitar tahun 1223$ mun"ullah -ets"ape versi pertama menggantikan
kepopuleran Mosai" sebagai Web broser. &ampai saat ini -ets"ape masih
merupakan broser yang paling banyak digunakan untuk melakukan navigasi di
Web. *emudian salah satu perguruan tinggi terkenal di A&$ yaitu MI0$ membangun
1
Modul Ajar Disain Web
standar bagi teknologi Web yang disebut World Wide Web .onsortium (W4.).
0eknologi terakhir yang dikembangkan oleh Mi"rosoft adalah Internet 5(plorer 4.6
yang mendukung '0ML 4.7.
1.3 HTTP (Hypertext Transfer Protocol
'008 merupakan protokol yang menentukan Web broser dalam
meminta!mengambil suatu dokumen$ dan menentukan Web server dalam
menyediakan dokumen yang diminta oleh Web broser. Ini adalah protokol standar
yang dipakai untuk mengakses dokumen '0ML. '008 digunakan untuk
menjelajahi Web yang berhubungan dengan banyak protokol lain.
1.! "#$
#9L (Uniform Resource Locator) adalah suatu alamat yang dipakai untuk
menentukan lokasi informasi pada Web server$ karena alamat ini mengambil
informasi yang diminta oleh broser. :ormat umum dari suatu #9L adalah+
protokol;transfer+!!nama;host!path!nama;file
.ontoh+ http+!!.ma"romedia."om!sho"k<one!info!se"urity.html
=aitu berisi +protokol yang digunakan$ nama server dari komputer yang di"ari$ jalur
dari informasi yang di"ari$ nama file dari informasi yang di"ari.
D-& (Domain -ame &ystem) #ntuk mempermudah pengelolaan Web
server dan Web broser pada komputer di Internet$ komputer di Internet
menggunakan suatu format penamaan yang disebut Domain -ame &ystem (D-&).
D-& membagi domain menjadi beberapa tingkat yang merupakan kelompok
komputer yang terhubung ke Internet. -ama domain beserta jenis organisasinya$
antara lain+
"om ,,,> untuk komersial
edu ,,,> untuk pendidikan
net ,,,> untuk provider Internet
id ,,,> untuk negara Indonesia
gov ,,,> untuk Lembaga 8emerintahan
int ,,,> untuk ?rganisasi International
mil ,,,> untuk ?rganisasi Militer
org ,,,> untuk ?rganisasi #mum
Web broser inilah yang disebut,sebut sebagai gerbang internet dengan
kemampuan untuk menangani WWW (Web Wide World) dengan protokol '008
('yper0e(t 0ransfer 8rotokol) yang merupakan protokol internet yang favorit saat
ini selain :08 (:ile 0ransfer 8rotokol) dan 8?87 sebuah protokol untuk email.
7
Modul Ajar Disain Web
@ambar 1.1. .ontoh tampilan Internet 5(plorer
@ambar 1.7. .ontoh tampilan ?pera
@ambar 1.4. .ontoh tampilan -ets"ape
1.% Web &erver
Web server adalah suatu perangkat komputer berupa softare yang
digunakan untuk menjadi sebuah komputer menjadi server yang dapat menangani
semua kegiatan yang berhubungan dengan protokol '008. *omputer yang
4
Modul Ajar Disain Web
dilengkapi oleh softare ini akan dapat diakses oleh komputer lain menggunakan
eb broser dengan "ara menuliskan nama server (host name) atau dengan
menuliskan nomor I8 dari komputer tersebut.
&etiap pembuatan aplikasi berbasis eb akan membutuhkan eb server
untuk meletakkan aplikasi tersebut sehingga bisa diakses menggunakan protokol
'008. )eberapa eb,server yang saat ini banyak digunakan adalah+
Apa"he$ eb server gratis yang sangat mudah diperoleh. Aalnya apa"he ini
berbasis #-I/$ tetapi saat ini apa"he sudah tersedia untuk sistem operasi
Windos.
II& (Internet Information &ystem)$ eb server keluar Mi"rosoft yang banyak
digunakan sebagai eb server untuk aplikasi eb dengan sistem operasi
indos$ dan bahasa pemrograman eb A&8 atau A&8.-50
Dalam modul ini akan digunakan eb server Apa"he$ salah satu eb server gratis
yang mudah diperoleh dan mendukung pemrograman 8'8. #ntuk melihat apakah
eb server Apa"he sudah ada atau belum di komputer yang akan digunakan adalah
dengan membuka eb broser dan menuliskan lo"alhost atau no I8 dari komputer.
)ila di komputer ada sudah ada eb server maka hasilnya adalah seperti gambar
1.3. berikut+
@ambar 1.3. Di dalam komputer ada eb server Apa"he7 dari 09IAD
)ila tidak ada eb server di komputer$ maka hasilnya adalah sebagai berikut+
3
Modul Ajar Disain Web
@ambar 1.A. *omputer tidak mempunyai eb server.
)ila di komputer sudah ada eb server$ maka selanjutnya tinggal membuat aplikasi
eb. Dalam pembuat aplikasi eb pertama kali$ letakkan program aplikasi yang
dibuat di dalam folder+ "+Bapa"he7triadBhtdo"s$ dan bila menggunakan folder khusus
letakkan folder tersebut dalam folder di atas. 8enguabhan folder eb dapat
dilakukan dengan mengubah Cdo"ument9ootD pada file
"+Bapa"he7triadB"onfBhttpd."onf dengan "ara sebagai berikut+
@ambar 1.E. Letak dokumen root
1.' HT($ (HyperText (ar)up $an*ua*e
'0ML yang akan dibahas meliputi beberapa tahap$ yaitu level '0ML$
'0ML 5(tension dan program 5ditor '0ML. '0ML adalah format data yang
dipakai untuk membuat dokumen 'yper0e(t. Dokumen '0ML disebut Mark
A
#bah dengan folder dimana
aplikasi eb dibuat
Modul Ajar Disain Web
Language$ karena berisi tanda tanda tertentu yang digunakan untuk menentukan
tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu
dokumen. 8ada sistem 'yper0e(t pada dokumen '0ML$ Anda tidak harus
memba"a dokumen se"ara urut dari atas ke baah$ melainkan "ukup menuju pada
topik tertentu se"ara langsung dalam dokumen. Ini dikarenakan dokumen tersebut
menggunakan teks penghubung ke suatu topik! dokumen lain se"ara langsung.
&ejak perkembangannya sampai sekarang ini telah tersedia berma"am,
ma"am level '0ML$ antara lain '0ML 1.6F '0ML 7.6F '0ML 4.6F '0ML 4.7F
dan '0ML 5(tension.
+ HT($ 1.,
'0ML level 1.6 adalah level pertama untuk 'yper0e(t Markup Language.
Desainnya sederhana sekali$ di antaranya heading$ paragraph$ hyperte(t$ list dan
format teks untuk tebal! miring. *elemahan '0ML 1.6 adalah tidak ada fasilitas
gambar$ sehingga teks tak dapat diletakkan di sekeliling suatu image.
+ HT($ 2.,
'0ML level 7.6 men"akup semua fasilitas level 1.6 ditambah dengan fasilitas untuk
membuat form. :orm ini dipakai dalam Web page untuk meminta saran dari
pemba"a$ dan kotak penyuntingan (edit bo(). Dengan '0ML 7.6$ WWW dapat
menjadi suatu media informasi dua,arah antara pemilik Web dengan pemakai Web$
bukan hanya sekedar sistem penampil informasi.
+ HT($ 3.,
'0ML level 4.6 sangat kompatibel dengan '0ML level 7.6$ tetapi disertai dengan
beberapa fasilitas baru. :asilitas baru tersebut antara lain penambahan fasilitas
pembuatan tabel dan gambar dengan perintah :I@#95. 8erintah :I@#95 sendiri
merupakan perkembangan dari perintah IMA@5 .
+ HT($ 3.2
'0ML 4.7 merupakan pengganti dari '0ML 4.6 dengan beberapa tambahan$
seperti applet %ava (teks yang dapat diletakkan di sekeliling gambar)$ supers"ript$
subs"ript$ perataan pada tabel$ ba"kground gambar dan arna$ fasilitas frame dan
sytle sheet ( pemisah layout halaman dengan isinya).
+ HT($ -xtension
&alah satu tambahan pada '0ML ini adalah tag G )LI-*> yang membuat teks
dalam tag tersebut tampil berkedip,kedip dalam -ets"ape )roser. 8ada '0ML ini
terdapat berma"am,ma"am daya kreatif untuk mengembangkan '0ML yang sangat
diperlukan selama tidak mengganggu penampilan dokumen '0ML pada broser.
1.. Pro*ra/ -ditor HT($
#ntuk membuat dokumen '0ML$ sebaiknya Anda menggunakan program
editor teks seperti -otepad$ &ideki"k$ dan W& dalam format -on Do"ument untuk
aplikasi D?&. 8rogram W=&IW=@$ seperti Mi"rosoft Word dan Word 8erfe"t for
Win$ tidak dapat dipakai untuk membuat dokumen '0ML$ karena program ini
dianggap sebagai dokumen biasa dan tidak dapat diterjemahkan oleh )roser.
8rogram tambahan yang dipakai untuk menyunting '0ML adalah Word Internet
Assistant dan Word8erfe"t Internet 8ublisher.
&elain program editor teks$ Anda bisa menggunakan program editor khusus
untuk membuat '0ML$ antara lain program editor '0ML berbasis teks dan
W=&IW=@ yang tidak memerlukan broser lagi.
E
Modul Ajar Disain Web
1.0 Ba*ai/ana WWW Be)er1a
(1) Informasi eb disimpan dalam dokumen yang disebut dengan halaman,
halaman eb (eb pages)
(7) eb page adalah file,file yang disimpan dalam komputer yang disebut dengan
server,server eb (eb server)
(4) *omputer,komputer memba"a eb page disebut sebagai eb "lient
(3) Web "lient menampilkan page dengan menggunakan program yang disebut
dengan broser eb (eb broser)
H
Modul Ajar Disain Web
Bab 2
Pen*enalan HT($
2.1 2o)u/en HT($
'0ML kependekan dari 'yper 0e(t Markup Language. Dokumen '0ML
adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal
sebagai eb page. Dokumen '0ML merupakan dokumen yang disajikan dalam
eb broser. Ada dua "ara untuk membuat eb page$ denghan '0ML editor atau
editor te(t biasa (misal + notepad). #ntuk latihan buku ini kita menggunakan
Ma"romedia Dreameaver.
2.2 Pena/aan 2o)u/en
Dokumen '0ML diberi nama sembarang kemudian diberi tambahan
ekstensi I.htmI atau I.htmlI
2.3 2efinisi -le/en
Dokumen '0ML disusun elemen,elemen atau komponen dasar pembentu
'0ML. .ontoh dari elemen dokumen '0ML adalah + head $ body$ table$ paragraf$
list.
2.! 2efinisi Ta*
0ag digunakan untuk menandai elemen dalam suatu dokumen '0ML. 0ag
'0ML terdiri atas sebuah sudut kiri (G$ tanda lebih ke"il)$ nama sebuah tag$ dan
sebuah tanda kurung sudut kanan (>$ tanda lebih besar. 0ag umumnya berpasangan$
sebagai "ontoh G'1> Dengan G!'1>. &e"ara umum suatu elemen dalam dokumen
'0ML yang dinyatakan dengan tagnya$ dituliskan + Gnamatag> , G!namatag>
2.% -le/en HT($ yan* diperlu)an
5lemen yang dibutuhkan untuk membuat suatu dokumen '0ML
dinyatakan dengan tag Ghtml>$Ghead>$ dan Gbody>.&etiap dokumen terdiri atas tag
head dan body. 5lemn 'ead berisi informasi tentang dokumen tersebut$ dan elemen
body berisi teks yang akan ditampilkan di broser.
&e"ara umum dokumen eb dibagi menjadi dua se"tion$ yaitu se"tion head
dan se"tion body. &ehingga setiap dokumen '0ML harus mempunyai pola sebagai
berikut +
<html>
<head>
-- Informasi tentang dokumen HTML
</head>
<body>
-- Informasi yang akan ditampilkan dalam web browser
</body>
J
Modul Ajar Disain Web
</html>
&etiap dokumen html harus diali dengan menuliskan tag Ghtml> dan tag
G!html> di akhir dokumen. 0ag ini menandai dokumen '0ML yang berarti adalah
dokumen '0ML dalam satu dokumen hanya ada satu elemen html.
&e"tion atau elemen head ditandai dengan tag Ghead> diaal dan tag
G!head> diakhir. &e"tion ini beiris informasi tentang dokumen '0ML$ mislnya
informasi judul html yang ditandai dengan tag Gtitle> dan diakhiri dengan tag
G!title>. &e"tion body ditandai dengan tag Gbody> dan diakhiri dengan tag G!body>
diakhir. &e"tion body merupakan isi dokumen yang akan ditampilakn pada broser.
3ontoh 4 $istin* 2.1 5 "ontoh1.html
<html>
<head>
<title>Belaar !eb "esign</title>
</head>
ini adalah halaman HTML
<body>
</body>
</html>
@ambar 7.1. .ontoh hasil di broser
Pen1elasan 3ontoh
0ag pertama pada dokumen html anda adalah Ghtml>$. 0ag ini memberi
tahu baha ini adalah aal dari dokumen '0ML. 0ag terakhir pada dokumen anda
adalah G!html>. 0ag ini memberi tahu broser baha ini adalah akhir dari
dokuemn '0ML. 0eks antara Ghead> dan G!head> adalah informasi header.
Informasi header tidak ditampilkan pada indo broser. 'anya teks yang berada
diantara Gbody> dan G!body> yang akan ditampilakan pada broser. 0eks diantara
Gtitle> dan G!title> adalah judul dokumen yang akan ditampilakn pada indo
"aption.
2.' Pen**unaan Ta*
0ag '0ML diapit dengan dua karakter kurung bersudut$ G dan >.
0ag '0ML se"ara normal selalu berpasangan seperti G'K> dengan G!'1>
0ag '0ML tidak L"ase sensitiveM$ berarti G'1> dama dengan Gh1>
2
Modul Ajar Disain Web
2.. 6tribut Ta*
0ag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag
tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan
tag yang bersangkutan.
0ag berikut tidak mempunyai atribut + Gbody>. 0ag Gbody> ini tidak
menggunakan atribut$ sehingga dokumen '0ML ditampilkan dengan arna
ba"kground sesuai dengan definisi arna ba"kground pada broser ebnya.
#mumnya berarna putih.
0ag berikut mempunyai atribut + Gbody bg"olorNIredI>. 0ag Gbody> ini
mempunyai atribut bg"olor dengan nilai OredM. &ehingga ba"kground akan
menampilkan arna merah.
2...1 Ta* HT($
Merupakan tag dasar yang mendefinisikan baha dokumen ini adalah
dokumen '0ML. 0ag ini merupakan keharusan untuk membuat dokumen
'0ML.0ag Ghtml> sebagai pembuka dokumen '0ML dan tag G!html> sebagai
penutup dokumen '0ML.
3ontoh 4 $istin* 2.25
<html>
########################
</html>
2...1 Ta* Head
Merupakan tag setelah Ghtml> untuk menuliskan keterangan tentang
dokumen '0ML. Isi teks diantara Ghead> dengan G!head> tidak akan ditampilkan
di dalam broser.
3ontoh 4 $istin* 2.35
<head>
<title>Belaar !eb "esign</title>
</head>
2...2 Title
Merupakan tag yang digunakan untuk menuliskan judul dokumen '0ML.
'asil tag ini akan ditampilkan dalam indo "aption broser.
3ontoh 4 $istin* 2.!5
<title>Belaar !eb "esign HTML</title>
2...3 Body
Merupakan se"tion dalam dokumen '0ML yang akan ditampilkan dalam
broser.
3ontoh 4 $istin* 2.%5
<html>
<head>
<title>Belaar !eb "esign</title>
</head>
<body>
ini adalah se$tion HTML yang ditampilkan di browser
</body>
16
Modul Ajar Disain Web
</html>
2...! Para*raf
&etiap paragraf harus dimulai dengan memberi tag Gp>. Diakhir paragraf
tidak diharuskan menuliskan G!p> sebagai akhir paragraf$ karena tag Gp> tidak
didefinisikan mempunyai tag akhir. &etiap paragraf harus dimulai dengan Gp>
kembali. &etiap pergantian paragraf ditandai dengan tag Gp>
3ontoh 4 $istin* 2.'5
<html>
<head>
<title>Tag %aragraf</title>
</head>
<body>
<p>berikut ini adalah paragraf &</p>
<p>berikut ini adalah paragraf '</p>
<p>berikut ini adalah paragraf (</p>
</body>
</html>
3ontoh 7 $istin* 3.. 5 paragraf7.html
<html>
<head>
<title>%aragraf</title>
</head>
<body>
<p>%ada tahun &)*+-an ,olonel -anders .pendiri ,/01 mulai
mengendarai mobilnya dari kota ke kota untuk memulai bisnis
,/0-nya2 dengan $ara menawarkan resep rahasianya dari satu
restoran ke restoran yang lainnya# ,adang beliau tidur di
dalam mobilnya dan memakan ayam buatannya sendiri untuk bisa
bertahan# "ia baru dapat men$apai tuuannya setelah bertemu
dengan orang yang ke-&+&+# 3rang tersebut berpikir ayam
,olonel tersebut $ukup bagus untuk di ual ke publik
</p>
<p>0ontoh lainnya Thomas 4lfa 5dison yang mengalami kegagalan
sebanyak )+++ kali sebelum akhirnya ia menemukan bola lampu#
"ia tidak menyesal dengan kegagalan-kegagalannya2 bahkan ia
berkata beruntung menemukan 6))) $ara yang salah dalam
membuat bola lampu# ,emudian ia dapat membuat &+)( paten2
orang yang paling banyak memegang paten dalam searah
4merika</p>
</body>
</html>
11
Modul Ajar Disain Web
@ambar 7.7. .ontoh hasil paragraf7.html
2...% $ine Brea)
*ita dapat memaksa ganti baris pada dokumen eb dengan tag Gbr>. @anti
baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak
berganti paragraf.
3ontoh 4 $istin* 2..5
<html>
<head>
<title>7anti Baris</title>
<head>
<body>
ini adalah baris ke &<br>
ini adalah baris ke '<br>
ini adalah baris ke (<br>
ini adalah baris ke 8<br>
ini adalah baris ke *<br>
</body>
</html>
2...' Headin*
0ag heading aklan membuat tulisan ditampilkan dengan huruf yang lebih
besar atau ditebalkan. 'eading dimanfaatkan untuk menandai judul topi" atau untuk
menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada E tingkat
heading dalam '0ML$ dinomori dari satu sampai dengan E. -omor 1 merupakan
heading yang terbesar.
3ontoh 4 $istin* 2.05
<html>
<head><title>Heading</title></head>
<body>
<h&>Heading &</h&>
<h'>Heading '</h'>
<h(>Heading (</h(>
<h8>Heading 8</h8>
17
Modul Ajar Disain Web
<h*>Heading *</h*>
<h9>Heading 9</h9>
</body>
</html>

@ambar 7.4. .ontoh heading
2.... 8aris Pe/batas
&ebuah garis pembatas dapat disisipkan dalam dokumen eb dengan
menggunakan tag Ghr>
Atribut *eterangan
Align Menentukan letak garis + "enter$left$right
.olor Menentukan arna garis
&i<e Menentukan ukuran garis
Width Menentukan tebal garis
3ontoh 4 $istin* 2.95
<html>
<head>
<title>Hori:ontal ;ule</title>
</head>
<body>
<p align<=$enter=>%aragraf pertama</p>
<hr align<=$enter= $olor<=>++++//= si:e<=(= width<=)+?=>
<p align<=$enter=>%aragraf keduapertama</p>
</body>
</html>
14
Modul Ajar Disain Web
@ambar 7.3. @aris 8embatas
2...0 :o/entar
Dalam sebuah dokumen '0ML ada informasi yang berfungsi sebagai
"atatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan
dalam broser. #ntuk membuat komentar dengan menggunakan tag+
GK,, sebagai aal dan tag ,,> sebagai akhir komentar.
3ontoh 4 $istin* 2.95
<html>
<head>
<title>Hori:ontal ;ule</title>
</head>
<body>
<@-- komentar ni tidak akan ditampilkan di browser -->
<p>Tulisan ini akan ditampilkan di browser</p>
</body>
</html>
2.0 Toolbar 2rea/weaver untu) dasar HT($
Ma"romedia Dreameaver sebagai salah satu aplikasi untuk membuat dan
mengembangkan eb menyediakan toolbar untuk semua tag dasar '0ML.
8erhatikan gambar 7.A dan gambar 7.E yang menunjukkan toolbar untuk dasar
'0ML.
@ambar 7.A. 0oolbar tab 0e(t
:eteran*an 7 tab Text 5
h1 + heading 1
13
Modul Ajar Disain Web
h7 + heading 7
h4 + heading 4
br + Line )reak
p (dibalik) + 8aragraf
@ambar 7.A. 0oolbar tab .omment
:eteran*an 4 tab co//on 5 terdapat toolbar untuk tag komentar
1A
Modul Ajar Disain Web
Bab 3
Pe/for/atan Te)s HT($
0eks dalam dokumen eb dapat diformat se"ara khusus untuk
menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut.
8erbedaan ditampilkan dalam bentuk huruf tebal$ miring$ digarisbaahi$dll.
3.1 Pe/for/atan Te)s
Menebalkan huruf (bold)
Memiringkan huruf (itali")
Digarisbaahi
Menge"ilkan huruf
&upers"ript
&ubs"ript
3ontoh 4 $istin* 3.15 formatteks.html
<html>
<head>
<title>/ormat Teks</title>
</head>
<body>
<p><b>Tulisan ini ditebalkan .bold1</b></p>
<p><strong>Tulisan ini ditebalkan .strong1</strong> </p>
<p><em>Tulisan ini miring .emphasi:e1 </em></p>
<p><big>Tulisan ini besar .big1</big></p>
<p><i>Tulisan ini miring .itali$1 </i></p>
<p>Tulisan ini _subs$ript </p>
<p>Tulisan ini ^supers$ript</p>
</body>
</html>
@ambar 4.1. .ontoh formatteks.html
1E
Modul Ajar Disain Web
3.2 Te)s Prefor/at
0ag Gpre> dan G!pre>dapat kita gunakan untuk menampilkan sesuai
dengan dokumen eb tersebut dalam editor teks.
3ontoh 4 $istin* 3.2 5 pre.html
<html>
<head>
<title>Tag %reformatted</title>
</head>
<body>
<pre>
This se$tion proAides a brief oAerAiew of the menus in "reamweaAer#
The /ile menu and 5dit menu $ontain the standard menu items
for
/ile and 5dit#
menus2 su$h as Bew2 3pen2 -aAe2 -aAe 4ll2 0ut2 0opy2 %aste2 Cndo2
and ;edo
</pre>
<pre>
Ini adalah
preformatted teDt#
Menampilkan spasi
"an line break apa adanya#
</pre>
<p>Tag %;5 $o$ok digunakan untuk menampilkan kode bahasa
pemrograman komputer E</p>
<pre>
for i < & to &+
print i
neDt i
</pre>
</body>
</html>
@ambar 4.7. .ontoh pre
1H
Modul Ajar Disain Web
3.3 ;uotation
0ag Gblo"kPuote> digunakan untuk membuat sebagian teks yang dikutip
sebagai suatu blok sendiri. *ebanyakan broser umumnya menggunakan margin
untuk kutipan teks tadi untuk memisahkan dari teks yang mengelilinginya.
3ontoh 4 $istin* 3.3 5 Puotation.html
<html>
<head>
<title>Fuotation</title>
</head>
<body>
tulisan ini BC,4B Fuotation
<blo$kFuote>
tulisan ini adalah Fuotation <br>
tulisan ini adalah Fuotation <br>
tulisan ini adalah Fuotation <br>
</blo$kFuote>
</body>
</html>
@ambar 4.4. .ontoh Poutation
3.! Ta*7ta* Pe/for/atan
Ta* 6wal :eteran*an
Gb> Mendefinisikan teks yang ditebalkan
Gbig> Mendefinisikan teks yang besar ukurannya
Gem> Mendefinisikan teks yang ditekankan
Gi> Mendefinisikan teks yang dimiringkan Q itali"
Gsmall> Mendefinisikan teks yang dike"ilkan ukurannya
Gstrong> Mendefinisikan teks yang ditebalkan
Gsub> Mendefinisikan teks yang dijaikan subs"ript
Gsup> Mendefinisikan teks yang supers"ript
Gpre> Mendefinisikan teks preformatted
Gblo"kPuote> Mendefinisikan Puotation yang panjang.
1J
Modul Ajar Disain Web
3.% Toolbar 2rea/weaver untu) pe/for/atan te)s
@ambar 4.3. 0oolbar format teks
:eteran*an 5
) + )old
I + Itali"
& + &trong
Em + 5mphasi<e
COID + )lo"kPuote
895 + 8re
12
Modul Ajar Disain Web
Bab !
(e/buat $in)
Dokumen '0ML mempunyai kemampuan untuk memberikan link dari
satu teks dan ! atau gambar menuju ke dokumen atau bagian lain dalam suatu
dokumen. )roser eb akan menyorot teks atau ganbar yang diidentifikasikan
sebagai link dengan arna dan ! atau garis baah untuk menunjukkan baha itu
adalah hyperteks link.
!.1 Ta* 6nchor
'0ML menggunakan tag Ga> yang disebut sebagai tag an"hor untuk
membuat suatu link kepada dokumen lain.
3ontoh 4 $istin* !.1 5
<a href<GhttpE//www#eepis-its#eduG>Link ke www#eepis-its#edu</a>
merupakan link ke alamat ebsite .eepis,its.edu
!.2. $in) #elatif
Membuat link dari satu page ke page lainnya pada "omputer yang sama
dapat dilakukan dengan menuliskan langsung nama filenya.
3ontoh 4 $istin* !.25 linkrelatif.html
<html>
<head>
<title>Link ;elatif</title>
</head>
<body>
<a href<Gbiodata#htmlG>Biodata</a></body>
</html>
%ika tulisan biodata.html kita pilih Q klik$ akan mun"ul dokumen biodata.html
!.3 $in) 6bsolut
Membuat link ke page eb lain yang berada pada eb site lain di internet
dilakukan dengan menuliskan nama #9L dan nama filenya.
3ontoh 4 $istin* !.35 linkabsolut.html
<html>
<head>
<title>link</title>
</head>
<body>
<a href<GhttpE//www#eepis-its#eduG >Link ke www#eepis-
its#edu</a>
</body>
</html>
76
Modul Ajar Disain Web
%ika teks OLink ke .eepis,its.eduI dipilih$ maka akan membuka ebsite
.eepis,its.edu
!.! $in) )e ba*ian lain dala/ do)u/en yan* sa/a
Link jenis ini dipakai jika dokumennya terlalu panjang$ sehingga apabila
ditampiklkan di broser akan mengharuskan kita melakukan s"roll layer berulang,
ulang. #ntuk memudahkannya$ maka dibuat link antar bagian di dalam dokumen
'0ML.
3ontoh 4 $istin* !.!5 linkbagian.html
<html>
<head>
<title>Link dalam satu dokumen</title>
</head>
<body>
<p>Isi Bab E</p>
<p><a href<G>isibab&G>&# Bab &</a><br>
<a href<G>isibab'G>'# Bab '</a><br>
<a href<G>isibab(G>(# Bab (</a></p>
<p>HnbspI</p>
<h'><a name<Gisibab&G>Bab&</a></h'>
<p>isi penelasan bab &2isi penelasan bab &2isi penelasan bab
&2isi penelasan bab &2isi penelasan bab &2isi penelasan bab
&2isi penelasan bab &2isi penelasan bab &2isi penelasan bab
&2isi penelasan bab &2isi penelasan bab &2isi penelasan bab </p>
<h'><a name<Gisibab'G>Bab '</a> </h'>
<p>isi penelasan bab '2 isi penelasan bab '2isi penelasan bab
'2isi penelasan bab '2isi penelasan bab '2isi penelasan bab '2
isi penelasan bab '2isi penelasan bab '2isi penelasan bab '2isi
penelasan bab '2isi penelasan bab '2isi penelasan bab '</p>
<h'><a name<Gisibab(G>Bab ( </a></h'>
<p>isi penelasan bab (2 isi penelasan bab (2 isi penelasan bab
(2 isi penelasan bab (2isi penelasan bab (2isi penelasan bab
(2isi penelasan bab (2isi penelasan bab (2isi penelasan bab
(2isi penelasan bab (2isi penelasan bab (2isi penelasan bab
(#</p>
</body>
</html>
:eteran*an 5
<a na/e=>isibab1>?Bab1<@a? 5
Memberi nama bagian dalam dokumen '0ML.
<a href=>Aisibab1>?1. Bab 1<@a? 5
mendefinisikan link isibab1$ jika teks O1. )ab 1I diklik$ maka halaman eb
akan menampilkan bagian Oisibab1I.
71
Modul Ajar Disain Web
@ambar 3.1. .ontoh hasil link
!.% (e/buat $in) untu) window baru
#ntuk membuat link supaya membuka indo baru dapat ditambahkan
atribut + targetNI;blankI.
3ontoh 4 $istin* !.% + linkneindo.html
<html>
<head>
<title>link new window</title>
</head>
<body>
membuka alamat website eepis dengan membuka window baru E <a
href<GhttpE//www#eepis-its#eduG target<GJblankG>www#eepis-
its#edu</a>
</body>
</html>
@ambar 3.7. .ontoh hasil link dengan indo baru
77
Modul Ajar Disain Web
!.' (ailto
)erikut ini adalah "ontoh link untuk menghubungkan ke sebuah alamat
email.
3ontoh 4 $istin* %.' + mailto.html
<html>
<head>
<title>Mailto</title>
</head>
<body>
kirim email ke humas %5B- E <a href<GmailtoEinfoKeepis-
its#eduG>infoKeepis-its#edu </a>
</body>
</html>
%ika teks infoReepis,its.edu diklik maka akan mun"ul mail "lient yang sudah
dipasang untuk mengirim email ke infoReepis,its.edu
!.. Properties 2rea/weaver untu) /e/buat lin) HT($
@ambar 3.4. 0oolbar link pada Dreameaver
:eteran*an 5
contoh 5 untuk membuat link ke ebsite lain$ pada field link diisikan
http+!!.eepis,its.edu
@ambar 3.3. 0oolbar mailto
:eteran*an 5
3ontoh 5 untuk membuat link ke email$ pada field link diisikan
mailto+infoReepis,its.edu
74
Modul Ajar Disain Web
Bab %
$ist 2an Pilihan
List item di gunakan untuk mengelompokkan data baik berurutan (ordered
list) maupun yang tidak berurutan (unordered list).
.ontoh+ *ita mau mengelompokkan data,data berikut + 8isang$ %ambu$ Apel$
Anggur dapat kita kelompokkan ke dalam kelompok+ )uah,buahan.
%.1 Brdered $ist
#ntuk membuat list terurut nomor (ordered list)$ kita gunakan tag
pembuka Gol> dan penutup G!ol>$ sedangkan untuk mendata setiap itemnya
menggunakan tag Gli> sebagai pembuka dan G!li> sebagai penutup.ol kependekan
dari ?rdered List$ li kependekan dari List Item.
3ontoh 4 $istin* %.15 orderedlist1.html
<html>
<head>
<title>3rdered List</title>
</head>
<body>
<p>"aftar Hari E </p>
<ol>
<li>-enin</li>
<li>-elasa</li>
<li>;abu</li>
<li>,amis</li>
<li>LumMat</li>
<li>-abtu</li>
<li>Minggu</li>
</ol>
<p>"aftar ,uliah E </p>
<ol>
<li>!eb "esign</li>
<li>%emrograman web</li>
<li>"atabase </li>
</ol>
</body>
</html>
-omor item ordered list se"ara default menggunakan angka 1$7$4$S.dst.
#ntuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut
type pada tag Gol>.
73
Modul Ajar Disain Web
@ambar A.1. .ontoh hasil list
6tribut type pada ta* <ol? 5
Type 6rti
I Angka ditampilkan dengan angka romai huruf besar
i Angka ditampilkan dengan angka romai huruf ke"il
A Angka ditampilkan dengan abjad huruf besar
a Angka ditampilkan dengan abjad huruf ke"il
3ontoh 7 $istin* %.2 5 orderedlist7.html
<html>
<head>
<title>3rdered List</title>
</head>
<body>
<p>"aftar Hari E </p>
<ol type<G4G>
<li>-enin</li>
<li>-elasa</li>
<li>;abu</li>
<li>,amis</li>
<li>LumMat</li>
<li>-abtu</li>
<li>Minggu</li>
</ol>
<p>"aftar ,uliah E </p>
<ol type<GiG>
7A
Modul Ajar Disain Web
<li>!eb "esign</li>
<li>%emrograman web</li>
<li>"atabase </li>
</ol>
</body>
</html>
@ambar A.7. .ontoh hasil list
%.2 "nordered $ist
#ntuk membuat list tidak terurut nomor (#nordered List)$ kita gunakan
tag pembuka Gul> dan penutup G!ul>$ sedangkan untuk mendata setiap itemnya
menggunakan tag Gli> sebagai pembuka dan G!li> sebagai penutup.ul kependekan
dari #nordered List$ li kependekan dari List Item
3ontoh 4 $istin* %.3 5 unorderedlist1.html
<html>
<head>
<title>Cnordered List</title>
</head>
<body>
<p>"aftar Hari E </p>
<ul>
<li>-enin</li>
<li>-elasa</li>
<li>;abu</li>
<li>,amis</li>
<li>LumMat</li>
7E
Modul Ajar Disain Web
<li>-abtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
@ambar A.4. .ontoh hasil unordered list
Item unordered list se"ara default mengunakan noktah.#ntuk keperluan tampilan
tertentu kita dapat mengubah dengan mengubah atribut type pada tag Gul>.
6tribut type pada ta* <ul? 5
Type 6rti
.ir"le )ullet Lingkaran
Dis" )ullet 0itik
&Puare )ullet *otak
3ontoh 4 $istin* %.!5 unorderedlist7.html
<html>
<head>
<title>Cnordered List</title>
</head>
<body>
<p>"aftar Hari E </p>
<ul type<G$ir$leG>
<li>-enin</li>
<li>-elasa</li>
<li>;abu</li>
<li>,amis</li>
<li>LumMat</li>
<li>-abtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
7H
Modul Ajar Disain Web
*eterangan + unordered list dengan type N "ir"le.
@ambar A.3. .ontoh hasil pengaturan bullet
%.3 Cested $ist
List item dapat digunakan se"ara bersarang$ maksudnya di dalam list ada
list item lagi.
3ontoh 4 $istin* %.% 5 nestedlist.html
<html>
<head>
<title>Bested List</title>
</head>
<body>
<ol>
<li>Buah</li>
<ul type<G$ir$leG>
<li>-emangka</li>
<li>Lambu</li>
</ul>
<li>Bunga</li>
<ul type<Gdis$G>
<li>Melati</li>
<li>4nggrek</li>
</ul>
<li>,endaraan</li>
<ul type<GsFuareG>
<li>Mobil</li>
<li>-epeda Motor </li>
</ul>
</ol>
</body>
</html>
7J
Modul Ajar Disain Web
@ambar A.A. .ontoh hasil nested list
%.! 2efinition $ist
Definition List terdiri diapit oleh tag GDL> S G!DL> dan GD0> tag
menentukan definition term serta GDD> tag menentukan definition itu sendiri
3ontoh 7 $istin* %.' 5 definitionlist.html
<html>
<head>
<meta http-eFuiA<G0ontent-TypeG $ontent<GteDt/htmlI
$harset<iso-66*)-&G>
<title>"efinition List</title>
</head>
<body>
<h(>0ontoh "efinition List</h(>
<dl>
<dt>!eb "esign</dt>
<dd>Belaar HTML - Ma$romedia "reamweaAer</dd>
<dt>%emrograman !eb</dt>
<dd>Belaar %H% My-NL</dd>
</dl>
</body>
</html>
72
Modul Ajar Disain Web
@ambar A.E. .ontoh hasil definition list
%.% Ta*7ta* $ist HT($
Ta* 6wal :eteran*an
Gol> Mendefinisikan ?rdered List
Gul Mendefinisikan #nored List
Gli> Mendefinisikan List Item
Gdl> Mendefinisikan Definition List
Gdt> Mendefinisikan Definition 0erm
Gdd> Mendefinisikan Definition Des"ription
%.' Toolbar 2rea/weaver untu) ta*7ta* list HT($
@ambar A.E. 0oolbar untuk tag list
:eteran*an 4 tab Text
ul + #nordered List
ol + ?rdered List
li + List Item
dl + Definition List
dt + Definition 0erm
dd + Definition Des"ription
46
Modul Ajar Disain Web
Bab '
(anipulasi 8a/bar Pada Web
@ambar di dalam suatu eb page merupakan daya penarik bagi
pengunjung suatu eb site. #mumnya eb site dilengkapi dengan gambar,gambar
untuk membuat orang tertarik untuk melihat dan memba"a isi yang ada di suatu
eb site. etiap gambar akan butuh aktu tambahan untuk dodonload dan
memperlambat aal penampilan suatu dokumen dalam broser. *arena perlu hati,
hati untuk menyertakan gambar dalam dokumen eb site.#ntuk menyertakan
sebuah image dalam dokumen eb adalah + Gimg sr"NInama;imageI>.
*ita harus menambahkan 7 atribut tambahan untuk memberi tahu broser
eb ukuran image yang harus ditampilkan dalam broser. Atribut tersebut adalah
height dan width.ukuran dalam pixel. 'eight untuk menyatakan tinggi gambar$
idth untuk mendefinisikan ukuran lebar.
'.1 3ara /e/asu))an *a/bar dari /acro/edia dreaweaver 5
#ntuk memasukkan gambar pada eb yang akan dibuat menggunakan
Dreameaver dapat dilakukan dengan+
1. )uat halaman baru
7. Masukkan image + klik insert image
4. 8ilih image yang akan dimasukkan
@ambar E.1. .ara memasukkan gambar
41
Modul Ajar Disain Web
3. #ntuk pengaturan properties
@ambar E.7. 8engaturan property
:eteran*an 6tribut5
W + lebar image
' + tinggi image
&r" + sumber ! letak image
Alt + alternate Q tulisan yang akan mun"ul jika kursor berada diatasnya
.lass + pilih .lass jika menggunakan definisi .&&.
Map + jika image digunakan sebagai link
T &pa"e + jarak image dari tulisan atasnya
' &pa"e + jarak image dari tulisan disampingnya.
)order + tebal bingkai image
Align + letak posisi image Q 9ight U Left U .enter
3ontoh 4 $istin* '.15 image1.html
<html>
<head>
<title>Image HTML</title>
</head>
<body>
<p>7ambar ,omputer dalam folder yang sama dengan letak file
HTML-nya E</p>
<p><img sr$<G$omputer&#pgG width<G&+'G height<G&+'G></p>
<p>7ambar ,omputer dari folder yang berbeda dengan letak file
HTML-nya E </p>
<p><img
sr$<GfileE///0O/udinharun/bukuwebdesign$$/pg/$omputer'#pgG
width<G&8&G height<G&'*G></p>
<p>7ambar dari www#eepis-its#edu</p>
<p><img sr$<GhttpE//www#eepis-
its#edu/images/stories/stories/'++*/bungalahir#pgG
width<G(6'G height<G*8G> </p>
</body>
</html>
47
Modul Ajar Disain Web
@ambar E.4. .ontoh gambar pada eb
'.2 6li*n/ent D/a*e
.ontoh berikut ini mengatur image dengan align.Atribut align diisi dengan +
top$ bottom. middle
3ontoh 4 $istin* '.2 + imagealign.html
<html>
<head>
<title>image align</title></head>
<body>
<p>-ebuah gambar<img sr$<Gpg/bunga&#pgG width<G&+(G
height<GPPG align<GtopG> di tengah teks dengan atribut
align < top <br>
<p>-ebuah gambar<img sr$<Gpg/bunga&#pgG width<G&+(G
height<GPPG align<GmiddleG> di tengah teks dengan atribut
align < top <br>
44
Modul Ajar Disain Web
<p>-ebuah gambar<img sr$<Gpg/bunga&#pgG width<G&+(G
height<GPPG align<GbottomG> di tengah teks dengan atribut
align < top <br>
</p>
</body>
</html>
'.3. Eloatin* D/a*e
)erikut ini "ontoh membiarkan suatu image mengambang di kiri atau di
kanan paragraf.
3ontoh 4 $istin* '.3 5 floatingimage.html
<html>
<head>
<title>/loating Image</title>
</head>
<body>
<p><img sr$<Gpg/house&#pgG width<G&&8G height<G9'G
hspa$e<G&+G Aspa$e<G*G align<GleftG>-ebuah paragraf yang
berisi image# atribut align image diisi dengan
HFuotIleftHFuotI# -ebuah paragraf yang berisi image#
atribut align image diisi dengan HFuotIleftHFuotI# -ebuah
paragraf yang berisi image# atribut align image diisi
dengan HFuotIleftHFuotI# -ebuah paragraf yang berisi
image# atribut align image diisi dengan HFuotIleftHFuotI#
</p>
<p><img sr$<Gpg/house&#pgG width<G&&8G height<G9'G
hspa$e<G&+G Aspa$e<G*G align<GrightG>-ebuah paragraf yang
berisi image# atribut align image diisi dengan
HFuotIrightHFuotI# -ebuah paragraf yang berisi image#
atribut align image diisi dengan HFuotIrightHFuotI#-ebuah
paragraf yang berisi image# atribut align image diisi
dengan HFuotIrightHFuotI# -ebuah paragraf yang berisi
image# atribut align image diisi dengan HFuotIrightHFuotI#
-ebuah paragraf yang berisi image# atribut align image
diisi dengan HFuotIrightHFuotI#</p>
</body>
</html>
43
Modul Ajar Disain Web
@ambar E.3. Image floating
'.! D/a*e 6d1ust/ent
.ontoh berikut ini adalah menampilkan image sesuai dengan ukuran yang
berbeda,beda. #ntuk mengubah ukuran image dengan mengubah nilai idth dan
height.
3ontoh 4 $istin* ..! + adjusmentimage.html
<html>
<head>
<title>4dustment Image</title>
</head>
<body>
<p>Image dengan ukuran P& D *( </p>
<p><img sr$<Gpg/house&#pgG width<GP&G height<G*(G></p>
<p>Image dengan ukuran &'' D P) </p>
<p><img sr$<Gpg/house&#pgG width<G&''G height<GP)G></p>
<p>Image dengan ukuran &9( D )( </p>
<p><img sr$<Gpg/house&#pgG width<G&9(G height<G)(G>
</p>
</body>
</html>
4A
Modul Ajar Disain Web
@ambar E.A. .ontoh hasil image adjustment
'.% Te)s alternatif untu) i/a*e
Atribut alt pada tag Gimg> menyediakan tempat untuk menampilkan teks
pengganti gambar. *eterangan alternatif akan mun"ul jika kita menaruh mouse
pointer di atas gambar agak lama.
3ontoh 4 $istin* '.% 5 alternatifimage.html
<html>
<head>
<title>4lternatif Image</title>
</head>
<body>
<img sr$<Gpg/ba$k#pgG alt<Gklik to neDtG width<G&&&G
height<G9*G>
<br>
Browser akan menampilkan tulisan <strong>klik to
neDt</strong> ika mouse kita letakkan diatas gambar anak
panah
</body>
</html>
4E
Modul Ajar Disain Web
'.' D/a*e seba*ai lin)
Image dapat kita buat sebagai sebuah link. &ehingga kita dapat membuat
menu,menu eb site dengan sebuah image sebagai link ke halaman lain atau alamat
eb site lain.
3ontoh 4 $istin* '.' 5 imagelink.html
<html>
<head>
<title>image link</title>
</head>
<body>
<p><a href<GhttpE//www#eepis-its#eduG target<GJblankG><img
sr$<Gpg/ba$k#pgG width<G&&&G height<G6PG border<G+G></a>
</p>
<p>Membuat image menu dengan menambahkan tag HltIa hrefHgtI#
ika i$on anak panah kita klik2 maka akan mun$ul alamat
website www#eepis-its#edu# </p>
</body>
</html>
'.. D/a*e (ap
&ebuah image dapat dijadikan sebuah link dengan mendefinisikan daerah
tertentu mengandung sebuah link ke halaman lain atau alamat internet lain. Definisi
daerah di dalam image yang dijadikan link dinyatakan dalam bentuk objek +
0itik
8oligon
8ersegi panjang
Lingkaran!elips
Metode imap map mengharuskan mendefinisikan daerah,daerah dalam suatu
gambar yang mempunyai link atau yang akan diberi link. Daerah yang didefinisikan
berupa bentuk daerah dan kordinat pembatasnya +
8?I-0 + daerah berupa satu titik$ dengan kordinat ($y
95.0 + daerah berupa persegi panjang$ dengan kordinat pojok kiri atas
dan pojok kanan baah.
8?L= + daerah berupa polygon$ dengan kordinat ($ y untuk setiap titik
dari setiap garis.
.I9.L5 + daerah berupa lingkaran$ dengan kordinat titip pusat lingkaran
(($y) dan jari,jari.
3ontoh 4 $istin* '.. 5 imagemap.html
<html>
<head>
<title>image map</title>
</head>
<body>
4H
Modul Ajar Disain Web
<diA align<G$enterG><img sr$<Gpg/house&#pgG width<G'+'G
height<G)+G border<G+G usemap<G>MaprumahG>
<map name<GMaprumahG id<GMaprumahG>
<area shape<Gre$tG $oords<G9'2&P2&+(28)G
href<Gatap#htmG alt<Gatap rumahG>
<area shape<G$ir$leG$oords<G8*29*2&*G
href<Gdinding#htmG alt<Gdinding rumahG>
</map>
</diA>
</body>
</html>
:eteran*an 5 Mendefinisikan imap map persegi panjang dan lingkaran.

@ambar E.H. Image Map
%ika daerah persegi panjang diklik$ maka akan mun"ul halaman atap.htm$ dan
jika daerah lingkaran diklik maka akan mun"ul halaman dinding.htm
4J
Modul Ajar Disain Web
&ource 3ode 4 $istin* '.0 5 atap.htm
<html>
<head>
<title>atap rumah</title>
</head>
<body>
4nda menekan daerah atap rumah
</body>
</html>
&ource 3ode 7 $istin* '.9 5 dinding.htm
<html>
<head>
<title>"inding ;umah</title>
</head>
<body>
anda menekan daerah dinding rumah
</body>
</html>
42
Modul Ajar Disain Web
Bab .
(e/buat Tabel
0abel digunakan untuk menyajikan data dalam bentuk kolom dan baris.
0abel didefinisikan dengan tag Gtable>. &ebuah tabel dibagi menjadi beberapa baris
(dengan tag Gtr>)$ dan setiap baris dibagi menjadi beberapa kolom (dengan tag
Gtd>). 0d kependekan dari Itable dataI yang berarti tempat menyimpan data (data
"ell). &ebuah "ell data dapat berupa teks$ image$ list$ paragraf$ form$ tabel$dll.
Ta* 4ta* tabel HT($
Ta* :eteran*an
Gtable> Mendefinisikan tabel
Gth> Mendefinisikan header tabel
Gtr> Mendefinisikan baris tabel
Gtd> Mendefinisikan "ell tabel
G"aption> Mendefinisikan "aption tabel
G"olgroup> Mendefinisikan group kolom tabel
G"ol> Mendefinisikan atribut nilai jumlah kolom tabel
Gthead> Mendefinisikan head tabel
Gtbody> Mendefinisikan body tabel
Gtfoot> Mendefinisikan footer tabel
3ontoh 4 $istin* ..1 5 tabel1.html
<html>
<body>
<p><strong>
-atu ,olomE</strong></p>
<table border<G&G>
<tr>
<td>*++</td>
</tr>
</table>
<h8>-atu baris dan lima kolomE</h8>
<table border<G&G>
<tr>
<td>&+++</td>
<td>'+++</td>
<td>(+++</td>
<td>8+++</td>
<td>*+++</td>
</tr>
</table>
<h8>"ua baris dan lima kolom E</h8>
<table border<G&G>
<tr>
<td>&+++</td>
36
Modul Ajar Disain Web
<td>'+++</td>
<td>(+++</td>
<td>*+++</td>
<td>9+++</td>
</tr>
<tr>
<td>P+++</td>
<td>6+++</td>
<td>)+++</td>
<td>&++++</td>
<td>&&+++</td>
</tr>
</table>
</body>
</html>
@ambar H.1. .ontoh pemakaian tabel
..1 3ara /e/buat tabel den*an drea/weaver
)uka halaman eb baru
*lik menu Dnsert 4Tabel
31
Modul Ajar Disain Web
@ambar H.7. 8embuatan tabel pada Dreameaver
Masukkan atribut tabel
*eterangan +
1. ros + jumlah baris
7. "olumn + jumlah kolom
4. table idth + lebar tabel
3. border thi"kness + tebal border
A. "ell padding + lebar "ell padding
E. "ell spa"ing + lebar "ell spa"ing
..2 BorderF 6li*n dan Bac)*round tabel
0ebal border tabel didefinisikan dengan tag border$ letak posisi tabel
didefinisikan dengan tag align$ arna ba"kground tabel didefinisikan dengan tag
bg"olor.
3ontoh 4 $istin* .2 5 tabelborder.html
<html><title>Border Tabel</title>
<body>
<h8>border normal2 letak di tengahE</h8>
<table border<G&G align<G$enterG>
<tr>
<td>Baris %ertama - ,olom %ertama </td>
<td>Baris %ertama - ,olom ,edua </td>
</tr>
<tr>
<td>Baris ,edua - ,olom %ertama </td>
<td>Baris ,edua - ,olom ,edua </td>
</tr>
</table>
37
Modul Ajar Disain Web
<h8>border lebih tebal2 letah di tengah2 lebar tabel )+?E</h8>
<table border<G6G align<G$enterG width<G)+?G>
<tr>
<td>Baris %ertama - ,olom %ertama </td>
<td>Baris %ertama - ,olom ,edua</td>
</tr>
<tr>
<td>Baris ,edua - ,olom %ertama</td>
<td>Baris ,edua - ,olom ,edua </td>
</tr>
</table>
<h8>border sangat tebal2 letak di tengah2 lebar tabel )+?2 warna
ba$kground < >//"/44E </h8>
<table width<G)+?G border<G&*G align<G$enterG bg$olor<G>//"/44G>
<tr>
<td>Baris %ertama - ,olom %ertama </td>
<td>Baris %ertama - ,olom ,edua</td>
</tr>
<tr>
<td>Baris ,edua - ,olom %ertama</td>
<td>Baris ,edua - ,olom ,edua </td>
</tr>
</table>
</body>
</html>
@ambar H.4. 8engaturan tabel
..3 Tabel Tanpa Brder
0erkadang dalam pembuatn tabel tidak diharapkan adanya border (garis,
garis). )erikut ini adalah "ontoh tabel tanpa border.
3ontoh 4 $istin* ..3 5 tabelnoborder.html
<html><title>Tabel tanpa border</title>
<body>
34
Modul Ajar Disain Web
<h8>Tabel tanda border E</h8>
<table>
<tr>
<td>4B0</td>
<td>"5/</td>
<td>7HI</td>
</tr>
<tr>
<td>L,L</td>
<td>MB3</td>
<td>%N;</td>
</tr>
</table>
</body>
</html>
@ambar H.3. 0abel tanpa border
..! Tabel Header
)erikut ini adalah "ontoh tabel header dengan tag Gth>.
3ontoh 4 $istin* ..! 5 tabelheader.html
<html><title>Tabel Header</title>
<body>
<h8>Table headerE</h8>
<table border<G&G>
<tr>
<th>Bame</th>
<th>Lurusan</th>
<th>Institusi</th>
</tr>
<tr>
<td>Hasan 4bdul ,arim </td>
<td>Teknologi Informasi </td>
<td>%5B- IT- </td>
</tr>
</table>
<h8>Qerti$al headerE</h8>
<table border<G&G>
<tr>
<th>Bama E</th>
33
Modul Ajar Disain Web
<td>Hasan 4bdul ,arim </td>
</tr>
<tr>
<th>Lurusan</th>
<td>Teknologi Informasi </td>
</tr>
<tr>
<th>Institusi</th>
<td>%5B- IT- </td>
</tr>
</table>
</body>
</html>

@ambar H.A. 0abel header
..% -/pty 3ell
)erikut ini adalah "ontoh empty "ell tabel.
3ontoh 4 $istin* ..% 5 empty"ell.html
<html><title>5mpty 0ell</title>
<body>
<table border<G&G>
<tr>
<td>Tulisan Teks </td>
<td>Tulisan Teks</td>
</tr>
<tr>
<td></td>
<td>Tulisan Teks</td>
</tr>
<tr>
3A
Modul Ajar Disain Web
<td>HnbspI</td>
<td>Tulisan Teks</td>
</tr>
</table>
<p>Lika suatu tabel tidak ada data2 maka akan dianggap
tidak ada border seperti terlihat pada baris kedua - kolom
pertama# Cntuk mengatasinya bisa dengan trik memberikan
spasi2 yaitu dengan teks di kode HFuotIHampInbspIHFuotI#
</p>
</body>
</html>
@ambar H.E. .ell kosong
..' 3olspan dan #owspan
)erikut ini adalah "ontoh mendefinisikan "ell tabel yang dilebarkan lebih
dari satu baris atau satu kolom dengan atribut "olspan dan rospan.
3ontoh 4 $istin* ..' 5 "olspan.html
<html><title>0olsapn dan ;owspan</title>
<body>
<h8>0olspan ( kolomE</h8>
<table border<G&G>
<tr>
<th>Hari</th>
<th $olspan<G(G>,uliah</th>
</tr>
<tr>
<td>-enin</td>
<td>!eb "esign</td>
<td>4plikasi !eb </td>
<td>"atabase </td>
</tr>
</table>
<h8>;owspan ( rowE</h8>
<table border<G&G>
<tr>
<th>HariE</th>
<td>-enin</td>
</tr>
<tr>
<th rowspan<G(G>,uliah</th>
3E
Modul Ajar Disain Web
<td>!eb "esign</td>
</tr>
<tr>
<td>4plikasi !eb</td>
</tr>
<tr>
<td>"atabase</td>
</tr>
</table>
</body>
</html>
@ambar H.E. .ontoh "olspan dan rospan
... Ta* di dala/ suatu tabel
)erikut ini adalah "ontoh menampilkan elemen di dalam elemen lain.
3ontoh 4 $istin* ... 5 tagintabel.html
<html><title>Tag di dalam tabel</title>
<body>
<table border<G&G>
<tr>
<td><p>-ebuah paragraf </p>
<p>%aragraf lain </p></td>
<td>0ell berisi tabel
<table border<G&G>
<tr>
<td>4</td>
<td>B</td>
</tr>
<tr><td>0</td>
<td>"</td></tr>
</table>
</td>
</tr>
<tr>
<td>0ell berisi list
<ul>
<li>-enin</li>
3H
Modul Ajar Disain Web
<li>-elasa</li>
<li>;abu</li>
<li>,amis</li>
</ul>
</td>
<td>%5B- IT- </td>
</tr>
</table>
</body>
</html>
@ambar H.H. .ontoh tabel dalam tabel
..0 3ellpaddin*
.ellpadding digunakan untuk memberikan jarak antara teks dengan tepi
border tabel. .ellpadding menggunakan atribut "ellpadding
3ontoh 4 $istin* ..0 5 "ellpadding.html
<html><title>$ellpadding</title>
<body>
<h8>Tanpa $ellpaddingE</h8>
<table border<G&G>
<tr>
<td>4B0</td>
<td>"5/</td>
</tr>
<tr>
<td>7HI</td>
<td>L,L</td>
</tr>
</table>
<h8>"engan $ellpaddingE</h8>
<table border<G&G
$ellpadding<G&+G>
<tr>
<td>4B0</td>
<td>"5/</td>
</tr>
<tr>
<td>7HI</td>
3J
Modul Ajar Disain Web
<td>L,L</td>
</tr>
</table>
</body>
</html>
@ambar H.J. .ontoh "ellpadding
..9 3ellspacin*
.ellspa"ing digunakan untuk memberikan jarak antara border dalam tabel
dengan border luar tabel. .ellspa"ing menggunakan atribut "ellspa"ing.
3ontoh 4 $istin* ..9 5 "ellspa"ing.html
<html><title>$ellspa$ing</title>
<body>
<h8>Tanpa $ellspa$ingE</h8>
<table border<G&G>
<tr>
<td>4B0</td>
<td>"5/</td>
</tr>
<tr>
<td>7HI</td>
<td>L,L</td>
</tr>
</table>
<h8>"engan $ellspa$ingE</h8>
<table border<G&G
$ellspa$ing<G&+G>
<tr>
<td>4B0</td>
<td>"5/</td>
</tr>
<tr>
<td>7HI</td>
<td>L,L</td>
</tr>
</table>
</body></html>
32
Modul Ajar Disain Web
@ambar H.2. .ellspa"ing
..1, Bac)*round Pada Tabel
)a"kground pada tabel dapat didefinisikan dengan menggunakan arna
atau dengan image. )erikut ini adalah "ontoh ba"kground tabel dengan arna dan
image. #ntuk memberikan ba"kground arna menggunakan atribut Lbg"olorM.
#ntuk memberikan ba"kground image menggunakan atribut ba"kground.
3ontoh 4 $istin* ..1, 5 ba"kgroundtabel.html
<html><title>Ba$kground Tabel</title>
<body>
<h8>"engan ba$kground warnaE</h8>
<table border<G&G
bg$olor<GgreenG>
<tr>
<td>4B0</td>
<td>"5/</td>
</tr>
<tr>
<td>7HI</td>
<td>L,L</td>
</tr>
</table>
<h8>"engan ba$kground imageE</h8>
<table border<G&G ba$kground<Gpg/bgdesert#pgG>
<tr>
<td>4B0</td>
<td>"5/</td>
</tr>
<tr>
<td>7HI</td>
<td>L,L</td>
</tr>
</table>
</body>
</html>
A6
Modul Ajar Disain Web
@ambar H.16. )a"kground pada tabel
..11 Bac)*round 3ell
)a"kground .ell digunakan untuk memberikan ba"kground pada "ell
tertentu tabel sehingga dimungkinkan banyak arna pada sutau tabel.
3ontoh 4 $istin* ..11 5 "ellba"kground.html
<html><title>$ell ba$kground</title>
<body>
<h8>0ell ba$kgroundE</h8>
<table border<G&G>
<tr>
<td bg$olor<G>//)/**G>4B0</td>
<td>"5/</td>
</tr>
<tr>
<td
ba$kground<Gpg/bgdesert#pgG>
7HI</td>
<td>L,L</td>
</tr>
</table>
</body>
</html>
A1
Modul Ajar Disain Web
@ambar H.11. )a"kground .ell
..12 (en*atur posisi te)s dala/ tabel
)erikut ini adalah "ontoh mengatur posisi teks dalam tabel dengan atribut
align$ sehingga diperoleh layout yang lebih baik.
3ontoh 4 $istin* ..12 5 aligntabel.html
<html><title>4lign Tabel</title>
<body>
<p>Mengatur posisi teks dalam tabel </p>
<table width<G8++G border<G&G>
<tr>
<th align<GleftG>Hari</th>
<th align<GrightG>,uliah-&</th>
<th align<GrightG>,uliah-'</th>
</tr>
<tr>
<td align<GleftG>-enin</td>
<td align<GrightG>!eb "esign </td>
<td align<GrightG>4plikasi !eb </td>
</tr>
<tr>
<td align<GleftG>-elasa</td>
<td align<GrightG>"atabase</td>
<td align<GrightG>Matematika</td>
</tr>
<tr>
<td align<GleftG>;abu</td>
<td align<GrightG>Bahasa 5nggris </td>
<td align<GrightG>;%L</td>
</tr>
</table>
</body>
</html>
A7
Modul Ajar Disain Web
@ambar H.17. 8engaturan teks pada tabel
A4
Modul Ajar Disain Web
Bab 0
(e/buat Era/e
:rame '0ML dapat digunakan untuk menampilkan beberapa eb page
yang ditampilkan dalam satu indo broser. Model ini sering dipakai untuk
memperjelas penyajian informasi dengan menu,menu yang ada selalu ditampilkan.
:e)uran*an pen**unaan fra/e 5
Developer eb harus menjaga dokumen '0ML lebih banyak
&ulit untuk men"etak (print) semua halaman eb.
Ta* Era/eset 5
0ag Gframeset> mendefinisikan bagaimana membagi indo ke dalam
fram,frame.
&etiap frameset mendefinisikan sebuah set baris (ro) atau kolom ("olom)
&etiap nilai ros!"olumn menunjukkan jumlah tampilan area setiap
ro!"olomn.
Ta* Era/e
0ag Gframe> tag mendefinisikan nama dokumen '0ML yang dimasukkan
dalam frame.
&ebagai "ontoh dibaah ini adalah frameset dengan dua kolom. *olom
pertama dengan lebar 7AV dari broser indo. *olom kedua dengan lebar HAV
dari broser indo. Dokumen '0ML Iframe1.htmlI diletakkan pada kolom
pertama dan dokumen '0ML Iframe7.htmlI diletakkan di kolom kedua.
<frameset $ols<G'*?2P*?G>
<frame sr$<GframeJa#htmG>
<frame sr$<GframeJb#htmG>
</frameset>
Ta* 4 ta* Era/e
Ta* :eteran*an
Gframeset> Mendefinisikan kumpulan frame
Gframe> Mendefinisikan bagian dari indos (sebuah frame)
Gnoframes>
Mendefinisikan bagian noframe untuk broser yang tidak dapat
menangani frame
Giframe> Mendefinisikan suatu frame inline
0.1 3ara /e/buat fra/e HT($ den*an drea/weaver 5
)uka halaman eb baru
*lik Insert Q '0ML Q :rame
A3
Modul Ajar Disain Web
8ilih model frame$"ontoh + top nested left

&ehingga akan mun"ul design frame sebagai berikut +

@ambar J.1. Design frame
0ampilan di atas terdiri dari tiga frame$ yaitu frame top$ frame left dan
frame main. &ehinnga untuk menyimpannya perlu disimpan dengan empat
nama file. =aitu file untuk frame top (frametop.html)$ frame left
(frameleft.html)$ frame main (framemain.html) dan frame gabungannya$
misalkan disebut frame utama (frameutama.html).
&ource 3ode 4 $istin* 0.15 frameutama.html
<html>
<head>
<title>/rame Ctama</title>
</head>
<frameset rows<G6+2RG $ols<GRG frameborder<GyesG border<G'G
framespa$ing<G'G>
<frame sr$<Gframetop#htmlG name<Gtop/rameG s$rolling<GB3G
noresi:e>
<frameset rows<GRG $ols<G&8'2RG framespa$ing<G'G
frameborder<GyesG border<G'G>
<frame sr$<Gframeleft#htmlG name<Gleft/rameG
s$rolling<GB3G noresi:e>
<frame sr$<Gframemain#htmlG name<Gmain/rameG>
</frameset>
</frameset>
<noframes><body>
</body></noframes>
AA
Modul Ajar Disain Web
</html>
&ource 3ode 4 $istin* 0.2 5 frametop.html
<html>
<head>
<title>/rame Top</title>
</head>
<body>
/rame Top
</body>
</html>
&ource 3ode 7 $istin* 0.3 5 frameleft.html
<html>
<head>
<title>/rame Left</title>
</head>
<body>
/rame Left
</body>
</html>
&ource 3ode 7 $istin* 0.! 5 framemain.html
<html>
<head>
<title>/rame Main</title>
</head>
<body>
/rame Main
</body>
</html>
Hasil di Browser 5
@ambar J.7. .ontoh hasil frame
0.2 Era/e :olo/
)erikut ini adalah "ontoh frameset vertikal untuk tiga dokumen yang
berbeda.
3ontoh 5
&ource 3ode 7 $istin* 0.% 5 frameab".html
<html><title>/rame tiga kolom</title>
AE
Modul Ajar Disain Web
<frameset $ols<G'*?2*+?2'*?G>
<frame sr$<Gframea#htmlG>
<frame sr$<Gframeb#htmlG>
<frame sr$<Gframe$#htmlG>
</frameset>
</html>
&ource 3ode 7 $istin* 0.' 5 framea.html
<html>
<head>
<title>/rame 4</title>
</head>
<body bg$olor<G>//B/**G>
<strong>/rame 4
</strong>
</body>
</html>
&ource 3ode 7 $istin* 0.. 5 frameb.html
<html>
<head>
<title>/rame B</title>
</head>
<body bg$olor<G>//B///G>
<strong>/rame B </strong>
</body>
</html>
&ource 3ode 7 $istin* 0.05 frame".html
<html>
<head>
<title>/rame 0</title>
</head>
<body bg$olor<G>))////G>
<strong>/rame 0 </strong>
</body>
</html>
AH
Modul Ajar Disain Web
@ambar J.4. :rame kolom
0.3 Era/e Baris
)erikut ini adalah "ontoh frameset hori<ontal untuk tiga dokumen yang
berbeda.
3ontoh 7 $istin* 0.9 5 frame4baris.html
<html><title>/rame tiga baris</title>
<frameset rows<G(+?2(+?28+?G>
<frame sr$<Gframea#htmlG>
<frame sr$<Gframeb#htmlG>
<frame sr$<Gframe$#htmlG>
</frameset><noframes></noframes>
</html>
@ambar J.3. :rame baris
0.! Era/e Cavi*asi
)erikut ini adalah "ontoh membuat frame navigasi. -avigasi berisi sebuah
dartar link dengan frame kedua sebagai target. :rame kedua menampilkan dokumen
yang di,link.frame target disebelah kanan dinamakan IshoframeI
3ontoh 5 &ource 3ode 7 $istin* 0.1,5 framenavigasi.html
<html><title>frame naAigasi</title>
<frameset $ols<G&'+2RG>
<frame sr$<GframenaAmenu#htmlG>
<frame sr$<GframenaAisi#htmlG
name<GshowframeG>
</frameset>
</html>
&ource 3ode 7 $istin* 0.115 framenavmenu.html
<html>
<head>
<title>menu</title>
</head>
AJ
Modul Ajar Disain Web
<body>
<p><a href<Gframea#htmlG target<GshowframeG>frame
4</a></p>
<p><a href<Gframeb#htmlG target<GshowframeG>frame
B</a></p>
<p><a href<Gframe$#htmlG target<GshowframeG>frame
0</a></p>
</body>
</html>
&ource 3ode 7 $istin* 0.125 framenavisi.html
<html>
<head>
<title>isi</title>
</head>
<body>
<p>-elamat "atang</p>
<p>%er$obaan /rame BaAigasi </p>
</body>
</html>
@ambar J.A. .ontoh navigasi
%ika di,klik menu frame A$ maka akan mun"ul +
A2
Modul Ajar Disain Web
@ambar J.E. .ontoh navigasi
0.% Era/e Dnline
)erikut ini adalah "ontoh membuat frame inline (frame di dalam sebuah
dokumen '0ML).
3ontoh 5 &ource 3ode 7 $istin* 0.13 5 frameinline.html
<html>
<body>
<iframe sr$<Ghome#htmlG></iframe>
<p>-ome older browsers donMt support iframes#</p>
<p>If they donMt2 the iframe will not be Aisible#</p>
</body></html>
&ource 3ode 7 $istin* 0.1!5 home.html
<html>
<head>
<title>Home</title>
</head>
<body>
<h&>Belaar !eb "esign </h&>
<h'>Belaar !eb "esign </h'>
<h(>Belaar !eb "esign </h(>
<h8>Belaar !eb "esign </h8>
<h*>Belaar !eb "esign </h*>
<h9>Belaar !eb "esign </h9>
</body>
</html>
E6
Modul Ajar Disain Web
@ambar J.H. :rame inline
E1
Modul Ajar Disain Web
Bab 9
(e/buat Eor/ Dsian
:orm '0ML adalah sebuah area yang mengandung elemen Q elemen form.
5lemen form adalah sebuah elemen yang memungkinkan user untuk memasukkan
informasi seperti te(t$ teksarea$ menu drop,don$ radio button$ "he"kbo($dll.
&ebuah form didefinisikan dengan tag Gform>.
<form>
S
</form>

Ta* 4 ta* Eor/
Ta* :eteran*an
Gform> Mendefinisikan form untuk masukan user
Ginput> Mendefinisikan masukan field
Gte(tarea> Mendefinisikan te(tarea
Glabel> Mendefinisikan label "ontrol
Gfieldset> Mendefinisikan sebuah fieldset
Glegend> Mendefinisikan "aption sebuah fieldset
Gsele"t> Mendefinisikan list (drop,don bo()
Goptgroup> Mendefinisikan option group
Goption> Mendefinisikan option pada drop,don bo(
Gbutton> Mendefinisikan button
9.1 Genis /asu)an dala/ for/
%enis masukan merupakan suatu obyek!komponen yang digunakan untuk
memasukkan suatu nilai!data!informasi ke dalam eb. %enis masukan dalam form
dibedakan menjadi +
0e(t + digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada
server. -ilai yang dimasukkan dapat berupa angka ataupun teks.
9adio + menyediakan beberapa pilihan$ hanya satu pilihan yang dapat dipilih.
.he"k bo( + menyediakan beberapa pilihan$ pilihan bisa lebih dari satu yang
dipilih.
)utton + digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan
form.
1. &#)MI0 + button yang digunakan untuk mengirim data.
7. 95&50 + button yang digunakan untuk menginisialisasi (mengosongkan)
form.
List + menyediakan pilihan dalam bentuk list pilihan$ pilihan yang dipilih dapat
lebih dari satu.
E7
Modul Ajar Disain Web
0e(t Area + digunakan untuk memasukkan data dalam bentuk teks berupa
memo.
9.2 Ta* 4 ta* dan atribut ele/en for/
Eor/
<form name<Gform&G method<GpostG a$tion<GG></form>
:eteran*an 5
:orm + tag yang menandakan sebuah elemen form
-ame + nama form
Methode + metode pengiriman data. )isa berupa OpostI atau OgetI
A"tion + nama file dokumen yang memproses pengiriman data. Lebih lanjut
akan dibahas di aplikasi eb php mysPl.
Text Eield
<input type<GteDtG name<GteDtfieldG>
:eteran*an 5
Input + tag yang menandakan sebuah masukan
0ype + type sebuah masukan$ yaitu Ite(tI
-ame + nama te(t field
Text 6rea
<teDtarea name<GteDtareaG $ols<G&++G rows<G*G></teDtarea>
:eteran*an 5
0e(tarea + tag yang menandakan sebuah masukan te(tarea
-ame + nama te(tarea
.ols + jumlah kolom te(tarea
9os + jumlah baris te(tarea
3hec) box
<input name<G$he$kboDG type<G$he$kboDG Aalue<G$he$kboDG
$he$ked>
:eteran*an 5
-ame + nama "he"kbo(
0ype + type masukan
Taluae + nilai yang dikirimkan ke server
.he"ked + menunjukkan baha otomatis pilihan tersebut dipilih. &e"ara
default atribut tersebut un"he"ked (tidak dipilih).
#adio Button
Ginput nameNWradiobuttonW typeNWradioW valueNWradiobuttonW>
:eteran*an 5
-ame + nama radiobutton
0ype + type masukan
Talue + nilai yang akan dikirim ke server
$ist Box
<sele$t name<Gsele$tG>
<option Aalue<GTIG>Teknologi Informasi</option>
</sele$t>
:eteran*an 5
&ele"t + tag yang menandakan sebuah list!menu
-ame + nama list!menu
?ption + tag yang menandakan sebuah pilihan list
E4
Modul Ajar Disain Web
Talue + nilai pilihan yang akan dikirim ke server
Button 4 &ub/it
<input type<GsubmitG name<G-ubmitG Aalue<G-ubmitG>
Button 4 #eset
<input type<GresetG name<G;esetG Aalue<G;esetG>
9.3 3ara pe/buatan for/ den*an drea/weaver
)uka halaman eb baru
*lik menu Insert Q :orm
8ilih model form
.ontoh memilih te(tarea$ sehinnga mun"ul design vie sebagai berikut +
@ambar 2.1. Memilih te(tarea
Atur propertiesnya$ bisa melalui "ode design atau design propertiesnya +
@ambar 2.7. 8engaturan property
:eteran*an 5
0e(t:ield + nama te(tarea
.har idth + lebar kolom
-um Lines + jumlah baris
Wrap + model pengaturan teks dalam te(tarea
0ype + pilih singgle line$ multiline atau passord
Init val + nilai default
E3
Modul Ajar Disain Web
.lass + nama "lass jika menggunakan file .&&
9.! Eield Text
)erikut ini adalah "ontoh penggunakan field te(t dalam dokumen '0ML.
3ontoh 4 $istin* 9.1 5 te(tfield.html
<html><title>teDt field</title>
<body>
<form>
Bama "epan E
<input name<GBamaBelakangG type<GteDtG id<GBamaBelakangG>
<br>
Bama Belakang E
<input name<GBamaBelakangG type<GteDtG id<GBamaBelakangG>
</form>
</body>
</html>
@ambar 2.4. .ontoh field te(t
9.% Eield Text 4 Password
)erikut ini adalah "ontoh :ield 0e(t dengan masukan berupa passord.
3ontoh 7 $istin* 9.25 passord.html
<html><title>%assword</title>
<body>
<form>
CsernameE
<input type<GteDtG name<GuserG><br>
%asswordE
<input type<GpasswordG name<GpasswordG>
</form>
<p>,eterangan E ketika memasukan data di field password2
browser akan menampilkan tanda bintang sebagai pengganti
karakter# </p>
</body>
</html>
EA
Modul Ajar Disain Web
@ambar 2.3. .ontoh passord
9.' 3hec)box
)erikut ini adalah "ontoh penggunaan "he"kbo( dalam dokumen '0ML.
3ontoh 7 $istin* 9.3 5 "he"kbo(.html
<html><title>0he$k BoD</title>
<body>
<p> Hobi E</p>
<form>
<p>Ba$a Maalah E
<input name<GmaalahG type<G$he$kboDG id<GmaalahG
Aalue<GmaalahG $he$ked>
<br>
3lah ;aga E
<input name<GolahragaG type<G$he$kboDG id<GolahragaG
Aalue<GolahragaG>
<br>
Meman$ing E
<input name<Gman$ingG type<G$he$kboDG id<Gman$ingG
Aalue<Gmeman$ingG>
</p>
</form></body>
</html>
EE
Modul Ajar Disain Web
@ambar 2.A. .ontoh "he"kbo(
9.. #adio Button
)erikut ini adalah "ontoh penggunaan radion button dalam dokumen
'0ML.
3ontoh 7 $istin* 9.! 5 radiobutton.html
<html><title>;adio Button</title>
<body>
<p>4gama E </p>
<form>
<p>Islam E
<input type<GradioG $he$ked<G$he$kedG
name<GagamaG Aalue<GislamG> <br>
,risten E
<input type<GradioG
name<GagamaG Aalue<GkristenG><br>
%rotestan E
<input name<GagamaG type<GradioG Aalue<GprotestanG><br>
Hindu E
<input name<GagamaG type<GradioG Aalue<GHinduG><br>
Budha E
<input name<GagamaG type<GradioG Aalue<GBudhaG></p>
</form></p>
</body>
</html>
EH
Modul Ajar Disain Web
@ambar 2.E. .ontoh radiobutton
9.0 $ist Box 4 2rop 2own (enu
)erikut ini adalah "ontoh penggunaan list bo( Q drop don menu.
3ontoh 7 $istin* 9.% 5 listbo(.html
<html>
<head>
<title>List BoD</title>
</head>
<body>
<p>Tahun ,elahiran</p>
<form name<Gform&G method<GpostG a$tion<GG>
<sele$t name<Gsele$tG>
<option Aalue<G&)6+G sele$ted>&)6+</option>
<option Aalue<G&)6&G>&)6&</option>
<option Aalue<G&)6'G>&)6'</option>
<option Aalue<G&)6(G>&)6(</option>
<option Aalue<G&)68G>&)68</option>
<option Aalue<G&)6*G>&)6*</option>
</sele$t>
</form>
</body>
</html>
EJ
Modul Ajar Disain Web
@ambar 2.H. .?ntoh listbo( dropdon
9.9 Textarea
)erikut ini adalah "ontoh penggunaan te(tarea dalam dokumen '0ML.
3ontoh 7 $istin* 9.' 5 te(tarea.html
<html>
<head><title>teDtarea</title></head>
<body>
<p>,omentar E</p>
<form name<Gform&G method<GpostG a$tion<GG>
<teDtarea name<GteDtareaG $ols<G*+G rows<G*G>isikan
komentar anda disini</teDtarea>
</form>
</body></html>
@ambar 2.J. .ontoh te(tarea
9.1, Button 4 &ub/it dan #eset
)erikut ini adalah "ontoh penggunaan &ubmit )utton dan 9eset )utton.
3ontoh 7 $istin* 9.. 5 button.html
E2
Modul Ajar Disain Web
<html>
<head>
<title>Button</title>
</head>
<body>
<form name<Gform&G method<GpostG a$tion<GG>
<input type<GsubmitG name<G-ubmitG Aalue<G-endG>
<input type<GresetG name<G;esetG Aalue<G;esetG>
</form>
</body>
</html>
@ambar 2.2. .ontoh button
9.11 3ontoh for/ biodata
&ource 3ode 7 $istin* 9.0 5 biodata.html
<html>
<head>
<title>Biodata</title>
</head>
<body>
<p align<G$enterG>/ormulir Biodata </p>
<form name<Gform&G method<GpostG a$tion<GG>
<table width<G)+?G border<G+G align<G$enterG>
<tr>
<td width<G'*?G>Bama</td>
<td width<G'?G>E</td>
<td width<GP(?G><input name<GtDtnamaG type<GteDtG
id<GtDtnamaG si:e<G*+G></td>
</tr>
<tr>
<td>Tempat Tanggal Lahir </td>
<td>E</td>
<td><input name<GtempatG type<GteDtG id<GtempatG si:e<G'+G>
/
<input name<GteDtfieldG type<GteDtG si:e<G*G>
-
<sele$t name<GsBulanG id<GsBulanG>
<option Aalue<GanuariG sele$ted>Lanuari</option>
<option Aalue<GpebruariG>%ebruari</option>
<option Aalue<GmaretG>Maret</option>
<option Aalue<GaprilG>4pril</option>
<option Aalue<GmeiG>Mei</option>
H6
Modul Ajar Disain Web
<option Aalue<GuniG>Luni</option>
<option Aalue<GuliG>Luli</option>
<option Aalue<GagustusG>4gustus</option>
<option Aalue<GseptemberG>-eptember</option>
<option Aalue<GoktoberG>3ktober</option>
<option Aalue<GnopemberG>Bopember</option>
<option Aalue<GdesemberG>"esember</option>
</sele$t>
-
<sele$t name<GsTahunG id<GsTahunG>
<option Aalue<G&)6+G sele$ted>&)6+</option>
<option Aalue<G&)6&G>&)6&</option>
<option Aalue<G&)6'G>&)6'</option>
<option Aalue<G&)6(G>&)6(</option>
<option Aalue<G&)68G>&)68</option>
<option Aalue<G&)6*G>&)6*</option>
<option Aalue<G&)69G>&)69</option>
<option Aalue<G&)6PG>&)6P</option>
<option Aalue<G&)66G>&)66</option>
<option Aalue<G&)6)G>&)6)</option>
<option Aalue<G&))+G>&))+</option>
</sele$t></td>
</tr>
<tr>
<td Aalign<GtopG>4gama</td>
<td Aalign<GtopG>E</td>
<td Aalign<GtopG><input name<GagamaG type<GradioG
Aalue<GislamG $he$ked>
Islam<br>
<input name<GagamaG type<GradioG Aalue<GkristenG>
,risten <br>
<input name<GagamaG type<GradioG Aalue<GprotestanG>
%rotestan<br>
<input name<GagamaG type<GradioG Aalue<GhinduG>
Hindu <br>
<input name<GagamaG type<GradioG Aalue<GbudhaG>
Budha <br> </td>
</tr>
<tr Aalign<GtopG>
<td>Hobi</td>
<td>E</td>
<td><input name<G$HobiG type<G$he$kboDG id<G$HobiG
Aalue<G3lah ;agaG $he$ked>
3lah ;aga <br>
<input name<G$HobiG type<G$he$kboDG id<G$HobiG Aalue<GBa$a
MaalahG>
Ba$a Maalah<br>
<input name<G$HobiG type<G$he$kboDG id<G$HobiG
Aalue<GMeman$ingG>
Meman$ing<br></td>
</tr>
<tr>
<td>,omentar</td>
<td>E</td>
<td><teDtarea name<Garea,omentarG $ols<G*+G rows<G(G
id<Garea,omentarG></teDtarea></td>
</tr>
<tr>
<td>HnbspI</td>
<td>HnbspI</td>
<td><input type<GsubmitG name<G-ubmitG Aalue<G-endG>
H1
Modul Ajar Disain Web
<input type<GresetG name<G;esetG Aalue<G;esetG></td>
</tr>
</table>
</form>
</body>
</html>
@ambar 2.16. .ontoh pengisian biodata
H7
Modul Ajar Disain Web
Bab 1,
&tudi :asus
8ada proyek akhir ini$ kita membuat .ontoh sebuah eb site #M8-
dengan design layout eb menggunakan ma"romedia dreameaver.
1,.1 (ana*e &ite
Manage site digunakan untuk menentukan server tempat menyimpan file Q
file dokumen '0ML.
Langkah Q Langkah menentukan manage site +
1. )uka aplikasi dreameaver
7. klik menu &ite 4 (ana*e &ites
@ambar 16.1. Manage site
4. klik Cew 4 &iteF seperti pada gambar 16.7.
3. Masukkan nama site dan klik Cext
A. Menentukan teknologi server$ apakah menggunakan teknologi server atau
tidak seperti terlihat pada gambar 16.4. &ebagai "ontoh kita tidak
menggunakan teknologi server. *lik Cext
H4
Modul Ajar Disain Web
@ambar 16.7. &ite Definition
@ambar 16.4. 8emilihan teknologi server
H3
Modul Ajar Disain Web
E. Menentukan letak direktori penyimpanan dokumen '0ML. *lik Cext
@ambar 16.3. Letak direktori
H. Menentukan metode menghubungkan ke server. 8ilih -one jika server kita
menggunakan komputer lokal. 8ilih :08 jika server menggunakan komputer
server lain.
@ambar 16.A. Metode hubungan dengan server
HA
Modul Ajar Disain Web
J. 'asil definisi manage site. *lik 2one
@ambar 16.E 'asil dari manage site
1,.2. (e/buat Te/plate Web
1. )uat halaman eb baru. Dan simpan dengan nama 0emplateWeb.html
7. )uat sebuah tabel dengan atribut sebagai berikut +
9os + 4
.olumn + 1
0able idth + 26V
)order + 1
Align + "enter
&ehingga menghasilkan design sebagai berikut +
:eteran*an 5
)aris pertama dari tabel akan digunakan sebagai tempat header image. )aris
kedua akan digunakan sebagai tempat menu dan isi berita$ sehingga harus
dibagi menjadi 7 kolom lagi. Dan baris ketiga digunakan sebagai tempat
footer.
HE
Modul Ajar Disain Web
@ambar 16.H. 8engaturan tabel
4. Membagi baris kedua menjadi dua kolom.
Letakkan "ursor di baris kedua
*lik menu (odify 4 Table 4 &plit 3ell.
&plit "ell into 5 "olomn
-umber of "olumn + 7
@ambar 16.J. 8embagian kolom
Atur ukuran kolom + kolom pertama dengan idth N 7AV$ kolom
kedua dengan idth N HAV.
&ehingga mun"ul hasil sebagai berikut +
:eteran*an 5 )aris kedua Q kolom pertama akan digunakan sebagai
menu Q manu navigasi. )aris kedua Q kolom kedua akan digunakan
sebagai tempat informasi.
3. Memasukkan image header.
Letakkan "ursor di tabel baris pertama.
HH
Modul Ajar Disain Web
*lik Dnsert 4 D/a*e (masukkan image header yang sudah disiapkan
yang digunakan sebagai header)
@ambar 16.2. 8enambahan gambar
&ehingga mun"ul hasil sebagai berikut +
@ambar 16.16. .ontoh hasil 1
A. Membuat menu navigasi
0ambahkan tabel di baris kedua Q kolom pertama dengan atribut
sebagai berikut +
1. 9os + A
7. .olumn + 1
4. Width + 166 V
3. )order + 6
HJ
Modul Ajar Disain Web
@ambar 16.11. pembuatan tabel navigasi
&ehingga mun"ul hasil sebagai berikut +
@ambar 16.17. .ontoh hasil 7
Menambahkan teks menu dengan posisi teks di tengah tabel (align N
I"enterI) dan link ke halaman target.
-ama Menu 0arget Link
'ome *e halaman inde(.html
Mekanisme #M8- *e halaman mekanisme.html
%adal #jian *e halaman jadal.html
Materi #jian *e halaman materi.html
85-& *e halaman informasi pens.html
E. Memberikan keterangan footer dan arna ba"kground footer
Letakkan "ursor di baris ketika
0ambahkan teks O#M8- , 766EI $ dengan atribut align N O"enterI
dan pemformatan teks tag Gstrong> untuk menebalkan tulisan.
0ambahkan arna ba"kground
&ehingga mun"ul sebagai berikut +
H2
Modul Ajar Disain Web
@ambar 16.14. .ontoh hasil 4
H. Memasukkan O5ditable 9egionI di baris kedua Q kolom kedua. =aitu area
yang dapat ditambahkan teks informasi pada saat posisinya sebagai
template.
Langkah Q langkah +
*lik Dnsert 4 Te/plate Bb1ects 4 -ditable #e*ion.
Masukkan nama edit regionnya
&ehingga mun"ul sebagai berikut +
@ambar 16.3. .ontoh hasil template
:eteran*an 5
Daerah edit region adalah daerah yang akan kita isi dengan informasi
sesuai dengan dokumen eb.
J. &impan sebagai template
J6
Modul Ajar Disain Web
*lik :ile Q &ave as 0emplate. &impan dengan nama
0emplateWebpada &ite ebdesign yang sudah kita tentukan.
@ambar 16.13. 8enyimpanan template
&ehingga di panel direktori file mun"ul direktori L0emplateM dan
didalamnya ada file L0emplateWeb.dtM sebagai file template. :ile
template hanya bisa kita rubah dengan membuka file template
tersebut.
X
@ambar 16.1A. 'asil penyimpanan
2. Membuat :ile inde(.html dari file 0emplateWeb.dt
*lik menu :ile Q -e. 8ilih tab 0emplates$ pilih template yang
sudah dibuat. 8astikan "he"kbo( O#pdate page hen template
J1
Modul Ajar Disain Web
"hangesI terpilih. *lik 3reate
@ambar 16.1E. Membuat file inde(.html
&impan dengan nama inde(.html
16. Menambahkan informasi pada daerah 5dit9egion1 file inde(.html. 'anya
daerah 5dit9egion1 yang bisa kita rubah$ untuk merubah daerah lain$ kita
harus merubah melalui file O0emplateWeb.dtI dan file file dokumen eb
yang dibuat melalui file template akan ikut berubah. &ehingga jika ada
perubahan menu$ kita hanya mengubah file templatenya$ tidak perlu
merubah sebuah file. 'al ini akan memudahkan kita mengelola dokumen
file yang jumlahnya sangat banyak.
0ambahkan informasi inde(.html pada "ode daerah 5dit9egion1 sebagai berikut
&our"e .ode +
<diA align<G$enterG>
<h&><strong>-elamat "atang di website
CM%B</strong></h&>
<p align<GleftG>%ersyaratan %eserta E</p>
<diA align<GleftG>
<ol>
<li d<GG>Tamatan -MT4 .-M42 M42 -M,1 tahun lulus
'++9 atau sebelumnya#</li>
<li>Cmur Maksimal '8 tahun terhitung bulan
agustus '++9</li>
<li>Mempunyai kesehatan fisik yang tidak
mengganggu kelan$aran belaar di program studi pilihannya
.sebagai $ontoh untuk program studi yang dalam belaarnya
diperlukan kemampuan membedakan warna2 tidak boleh butawarna1
</li>
<li> %ersyaratan lainnya diatur oleh %oliteknik
masing-masing</li>
</ol>
</diA>
<p align<GleftG>HnbspI </p>
</diA>
J7
Modul Ajar Disain Web
Hasil di Browser 5 inde(.html
@ambar 16.1H. .ontoh hasil eb site inde(.html
11. Membuat file mekanisme.html seperti langkah sebelumnya. Dan tambahkan
informasi pada "ode daerah 5dit9egion1 sebagai berikut +
&our"e .ode +
%eserta dapat memilih program studi di %oliteknik tempat
mendaftar dan program studi pada %oliteknik peserta CM%B
lainnya2 dengan ketentuan sebagai berikut E
<ol>
<li>%eserta diwaibkan memilih %rogram studi pada
%oliteknik tempat mendaftar2 dengan umlah pilihan sesuai
dengan ketentuan yang berlaku di %oliteknik setempat# </li>
<li>%ilihan pada %oliteknik lainnya maksimal '
.dua1 program studi dari %oliteknik yang berbeda2 boleh
dengan program studi yang sama atau berbeda2 dengan prioritas
sesuai dengan nomor urut pilihan# </li>
</ol>
J4
Modul Ajar Disain Web
@ambar 16.1J. 'asil dari mekanisme.html
17. Membuat file jadal.html seperti langkah sebelumnya. Dan tambahkan
informasi pada "ode daerah 5dit9egion1 sebagai berikut +
&our"e .ode +
Cian diselenggarakan serentak pada E<br>
Hari / Tanggal E -abtu &' 4gustus '++9
<ol type<GaG>
<li> %ukul +6#++ - &+#(+ !IB .Bidang ;ekayasa dan
%ertanian1</li>
<li>%ukul &'#++ - &8#(+ !IB .Bidang Tata Biaga1 </li>
</ol>
@ambar 16.12. 'asil dari ujian.html
14. Membuat file materi.html seperti langkah sebelumnya. Dan tambahkan
informasi pada "ode daerah 5dit9egion1 sebagai berikut +
&our"e .ode +
<strong>Bidang ;ekayasa dan %ertanian E </strong>
<ol>
<li>Matematika</li>
<li>/isika</li>
<li>Bahasa Indonesia</li>
<li>Bahasa Inggris</li>
<li>,imia dan Biologi .pada %oliteknik
Tertentu1</li>
J3
Modul Ajar Disain Web
</ol>
<strong>Bidang Tataniaga E</strong>
<ol>
<li>Matematika</li>
<li>akuntansi</li>
<li>5konomi</li>
<li>Bahasa Indonesia</li>
<li>Bahasa Inggris </li>
</ol>
@ambar 16.12. 'asil dari.materi.html
13. Membuat file pens.html seperti langkah sebelumnya. Dan tambahkan
informasi pada "ode daerah 5dit9egion1 sebagai berikut +
&our"e .ode +
<p align<G$enterG><strong> %3LIT5,BI, 5L5,T;3BI,4 B575;I
-C;4B4T4 - IT- <br>
</strong>LL# ;4T4 IT-2 ,5%CTIH -C,3LIL3 -C;4B4T4
-9+&&&<br>
Telepon +(&-*)8P'6+2 /aD +(&-*)89&&8<br>
Homepage E <strong><a href<GhttpE//www#eepis-its#eduG
target<GJblankG>www#eepis-its#edu</a></strong> 2 5mail
E<strong><a href<GmailtoEhumasKeepis-its#eduG> humasKeepis-
its#edu</a></strong> </p>
<br>
<strong> Lurusan / %rogram -tudi E</strong>
<ol>
<li> Teknik 5lektronika ."(/ "81 <br>
Membekali mahasiswa dengan teknologi otomasi dan robotika
dalam aplikasi di industri</li>
<li>Teknik Telekomunikasi ."(/ "81 <br>
Membekali mahasiswa dengan pengetahuan telekomunikasi
sehingga mampu selalu beradaptasi dengan kemauan teknologi
telekomunikasi dan informasi </li>
<li> Teknik 5lektro Industri ."(/ "81 <br>
JA
Modul Ajar Disain Web
Membekali mahasiswa dengan teknologi kontrol daya di
sektor manufaktur dan industri</li>
<li>Teknologi Informasi ."(/ "81 <br>
Membekali mahasiswa dengan kemampuan mengembangkan dan
memelihara sistem informasi berbasis komputer pada lingkungan
bisnis dan manufaktur </li>
</ol>
<p><strong>%ersyaratan</strong> </p>
<ol>
<li> !arga Begara Indonesia</li>
<li>Tamatan -MT4 .-M42 M42 -M,1 tahun lulus '++9 atau
sebelumnya </li>
<li> Cmur maksimal '8 tahun terhitung bulan 4gustus
'++9</li>
<li>Mempunyai kesehatan fisik yang tidak mengganggu
kelan$aran belaar di program studi pilihannya .sebagai
$ontoh untuk program studi yang dalam belaarnya diperlukan
kemampuan membedakan warna2 tidak boleh buta warna1</li>
<li>Lulus Cian -eleksi2 meliputiE Cian Masuk HampI
Tes ,esehatan </li>
</ol>
@ambar 16.76. 'asil dari pens.html
JE
Modul Ajar Disain Web
Bab 11
Pe/ro*ra/an PHP
11.1 (en*enal PHP
8ertama kali 8'8 dibuat dan diperkenalkan oleh 9asmus Lerdorf pada
tahun 122A menggunakan nama 8'8!:I yang merupakan singkatan dari 8ersonal
'ome8age!:orm Interpreter. )erkembangnya kebutuhan akan 8'8 sebagai
peromgraman eb akhirnya dilun"urkan 8'8 4.6 oleh Andi @utmans dan Yeev
&uraski pada tahun 122H. &aat ini 8'8 sudah sampai versi A.6.
8'8 adalah suatu bahasa pemrograman eb yang digunakan untuk
keperluan .@I (Common @ateay Interface)$ artinya mempunyai kemampuan
untuk memba"a variabel dari "lient dan mengirimkan ke server untuk kemudian di
server diolah dan hasilnya dikembalikan ke "lient.
8'8 adalah pemrograman yang bersifat &erver &ide$ artinya baha
program hanya bisa diakses melalui server$ sedangkan "lient tidak bisa mengakses
program 8'8. &ebagai "ontoh buatlah program dalam '0ML dan 8'8 yang
disimpan dalan "ontoh76a.html dan "ontoh76b.php sebagai berikut+
8erhatikan hasilnya akan sama yaitu teks O'ello WorldI$ sekarang buka sour"e
melalui menu CTieD >> Z&our"eD$ hasilnya adalah+
8rogram '0ML akan terlihat utuh di komputer "lient$ sedangkan program 8'8
tidak akan kelihatan utuh hanya tampilan akhir saja yang bisa ditampilkan di
komputer "lient. 'al ini terjadi karena 8'8 prosesnya dilakukan di server dan
hasilnya diberkan pada "lient berupa informasi akhir tanpa program.
#ntuk mengetahui lebih lanjut tentang perbedaan proses '0ML dan 8'8 dapat
dijelaskan dengan blok diagram proses '0ML dan 8'8 pada gambar 7.1 dan 7.7
berikut$ :irmanC4D.
JH
<html>
<body>
Hello world
</body>
</html>
"ontoh76a.html
<U
e$ho VHello world=I
U>
"ontoh76b.php
<html>
<body>
Hello world
</body>
</html>
Hello world
Modul Ajar Disain Web
@ambar 11.1. &kema dari '0ML
@ambar 11.7. &kema dari 8'8
8emrograman 8'8 mempunyai struktur dasar seperti '0ML$ hanya saja perintah,
perintah 8'8 selalu dimulai dan diakhiri oleh tag+
<U ######## perintah %H% ########### U>
.ontoh 1+
Menggabungkan antara 8'8 dan '0ML+
<html>
<head>
<title>Menggabungkan %H% dan HTML</title>
</head>
<body>
Ini adalah perintah HTML<br>
<U
e$ho GIni adalah perintah %H%<br>GI
U>
</body>
</html>
JJ
Web &erver
'0ML .ode
'008 9ePuest
(file [.html)
'008
9ea"tion
Browser Client
Web &erver
'0ML .ode
'008 9ePuest
(file [.html)
'008
9ea"tion
Browser Client
8'8 &"ript
8'8 Ma"hine
Modul Ajar Disain Web
8erintah e"ho adalah perintah untuk menampilkan teks. 'asilnya adalah sebagai
berikut+
@ambar 11.4. 0ampilan "ontoh 1
11.2 Hariabel
Di dalam pemrograman 8'8 salah satu yang penting adalah pemakaian
variabel yang dapat melakukan manipulasi data. Tariabel di dalam 8'8 dapat
dinyatakan dengan menambahkan tanda \ di aal nama variabel seperti variabel
nama dituliskan dengan \nama$ variabel nilai dituliskan dengan \nilai dan
seterusnya. 0ipe data dari suatu variabel pada pemrograman 8'8 sangat tergantung
pada definisi aal.
.ontoh 7+8rogram dengan variable string dan tanggal
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<U
Wnama<GBasukiGI
Wtanggal<date.Gd / yG1I
e$ho GWnama2 selamat datang tanggal Wtanggal<br>GI
U>
</body>
</html>
8erintah date(Id : yI) menghasilkan tanggal sesuai dengan tanggal pada sistem
komputer dan formnya adalah dd,MM,yyyy. 'asilnya adalah sebagai berikut+
J2
Modul Ajar Disain Web
@ambar 11.3. 0ampilan "ontoh 7
.ontoh 4+
8rogram dengan variabel numerik untuk penjumlahan dan pengurangan+
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<U
Wa<&*I
Wb<&+I
W$<WaXWbI
Wd<Wa-WbI
e$ho GWa X Wb < W$<br>GI
e$ho GWa - Wb < Wd<br>GI
U>
</body>
</html>
'asilnya adalah sebagai berikut+
@ambar 11.3. 0ampilan "ontoh 4.
11.3 :ondisi
*ondisi ini diberikan bila ada pilihan ya atau tidak. &ebagai "ontoh apakah
passord yang diberikan sudah benar$ atau apakah bilangan adalah bilangan genap$
26
Modul Ajar Disain Web
atau apakah masukan yang diberikan sudah lengkap$ dan lain,lain. #ntuk
menyatakan kondisi dan memberikan aksi dapat dilakukan dengan perintah+
if(kondisi)
Z ...... aksi untuk kondisi benar ...... ]
5lse
Z ...... aksi untuk kondisi salah ...... ]
.ontoh 3+
8rogram untuk menentukan bilangan ganjil atau genap
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<U
Wbilangan<'(I
Whasilbagi<.int1.Wbilangan/'1I
Wsisa<Wbilangan-'RWhasilbagiI
if.Wsisa<<+1
e$ho GWbilangan adalah bilangan genap<br>GI
else
e$ho GWbilangan adalah bilangan ganil<br>GI
U>
</body>
</html>
.oba bilangan diganti,ganti dan perhatikan hasilnya. )ilangan dikatakan genap bila
sisa baginya dengan 7 sama dengan nol$ bila tidak maka bilangan itu dikatakan
ganjil.
.ontoh A+8rogram untuk menentukan lebih besar$sama atau lebih ke"il dari 16
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<U
Wbilangan<'(I
if.Wbilangan<&+1
e$ho GWbilangan lebih ke$il dari &+<br>GI
else
if.Wbilangan>&+1
e$ho GWbilangan lebih besar dari &+<br>GI
else
e$ho GWbilangan sama dengan &+<br>GI
U>
</body>
</html>
'asilnya adalah sebagai berikut+
21
Modul Ajar Disain Web
@ambar 11.A. 0ampilan "ontoh A
11.! Pen*ulan*an
8engulangan adalah suatu bentuk untuk melakukan proses yang sama
berkali,kali hingga men"apai suatu kondisi akhir pengulangan yang ditentukan. Ada
dua jenis pengulangan yang dapat digunakan di dalam pemrograman 8'8 yaitu+
(1) 8engulangan dengan :?9$ dimana pengulangan ini menggunakan variabel
indeks untuk melakukan pengulangan dengan nilai aal$ nilai akhir dan
penambahan (step) yang ditentukan. 8erintah untuk melakukan pengulangan ini
adalah+
/or.Aariable<nilaiJawalIAariabel<nilaiJakhirIAariabelX<ste
p1Y
SS proses pengulangan SS
Z
(7) 8engulangan dengan W'IL5$ dimana pengulangan ini dilakukan selama
kondisi yang diberikan masih bernilai 09#5. 8erintah untuk melakukan
pengulangan ini adalah+
while.kondisi1 Y
###### proses pengulangan ######
Z
.ontoh E+
.ontoh pengulangan dengan :?9$ dengan mengulang sebanyak 16 kali$ yang
artinya nilai variabel a akan bertambah terus dari 1 sampai dengan 16.
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<U
for.Wa<&IWa<<&+IWaXX1Y
e$ho GIni pengulangan ke Wa<br>GI
Z
U>
</body>
</html>
27
Modul Ajar Disain Web
'asilnya adalah sebagai berikut+
@ambar 11.E. 0ampilan "ontoh E
.ontoh H+
.ontoh pengulangan dengan W'IL5$ untuk mengulangan penjumlahan sampai
nilainya lebih dari AE
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<U
Wa<&I
Wumlah<+I
while.Wumlah<*91Y
Wumlah<WumlahXWaI
e$ho GIni pengulangan ke Wa GI
e$ho Ghasil umlahnya adalah Wumlah<br>GI
Wa<WaX&I
Z
U>
</body>
</html>
'asilnya adalah+
24
Modul Ajar Disain Web
@ambar 7.H. 0ampilan "ontoh 7.H
11.% Eor/ dan Parsin* Hariabel
8embuatan form telah dijelaskan pada bab 1$ menggunakan '0ML. 'anya
saja setelah form itu dibuat bagaimana hasil form dapat diproses lebih lanjut akan
dijelaskan disini$ dengan apa yang dinamakan sebagai parsing variabel yang artinya
meleatkan variabel melalui form dari "lient ke server untuk diolah di server dan
hasilnya dikembalikan ke "lient.
8ada perintah form terdapat a"tion dan method$ sperti telah dijelaskan pada
bab 1$ penulisan form adalah sebagai berikut+
<form a$tion<=halamanJproses= method<=75T/%3-T=>
SSS# layout form SSS#
</form>
8erintah a"tion digunakan untuk menunjukkan file program 8'8 yang akan
digunakan untuk mengolah variabel yang dileatkan dari form ini. &ebagai "ontoh
bilai dituliskan a"tionNI"ontoh7J.phpI maka form ini akan memanggil file
"ontoh7J.php untuk mengolah variabel yang dimasukkan. &ehingga untuk
menggunakan aplikasi ini se"ara default digunakan 7 buah file$ yang pertama adalh
file untuk form (dapat dibuat dengan '0ML) dan kedua file untuk mengolah data
yang didefinisikan se"bagai a"tion(berupa file 8'8).
&edangkan method digunakan untuk menyatakan metode pengiriman apa yang
digunakan @50 atau 8?&0.
Metode @50 merupakan metode pengiriman sederhana yang meleatkan
variabel melalui nama #9L dari aplikasi eb$ sehingga nilai yang dikirim akan
terlihat oleh "lient. 'al ini untuk memudahkan "lient tahu apakah nilai yang
dimasukkan sudah dikirim dengan benar. 0etapi metode ini sangat riskan untuk
data,data yang bersifat rahasia$ ke"uali menggunakan metode enskripi tertentu
untuk menyatakan data yang bersifat rahasia$ hal ini banyak digunakan dalam
aplikasi eb saat ini.
Metode 8?&0 merupakan metode pengiriman variabel se"ara langsung tanpa
menggunakan nama #9L$ sehingga "lient tidak dapat melihat variabel apa yang
dikirimkan. &e"ara default metode ini lebih aman$ tetapi keamanan ini masih
mempunyai "elah yang tidah terhindari yaitu terbukanya protokol '008 yang
dapat digunakan oleh para pengganggu untuk mengganggu aplikasi eb yang
dibuat.
23
Modul Ajar Disain Web
.ontoh 7.J+
8enggunaan metode @50. #ntuk itu menggunakan file "ontoh7J.html sebagai form
dan "ontoh7J.php sebagai a"tion.
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,:ile "ontoh7J.html ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<$enter>
0yber ;oom<br><br><br>
</$enter>
Masukkan nama dan umur andaE<br><br>
<form a$tion<G$ontoh'6#phpG method<G75TG>
Bama E <input type<teDt name<nama><br>
Cmur E <input type<teDt name<umur><br><br>
<input type<submit name<submit Aalue<GMasukG>
<input type<reset name<reset>
</form>
</body>
</html>
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,:ile "ontoh7J.php ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<$enter>
<U
e$ho G-elamat datang Wnama<br>GI
if.WCmur<&P1
e$ho GMaaf anda belum berumur &P<br>GI
else
e$ho G-elamat bergabung dengan 0yber ;oom<br>G
U>
</body>
</html>
'asilnya adalah sebagai berikut
2A
Modul Ajar Disain Web
@ambar 11.J. 0ampilan "ontoh J
8ada gambar 11.J. terlihat pada nama #9L (tanda merah) baha yang dimasukkan
adalah namaNbasuki$ umurN74 dan submitNsubmit. 'al ini terjadi karena
pemakaian method @50. )ila method pada file "ontoh7J.html diganti dengan
8?&0 sebagai berikut+
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<$enter>
0yber ;oom<br><br><br>
</$enter>
Masukkan nama dan umur andaE<br><br>
<form a$tion<G$ontoh'6#phpG method<G%3-TG>
Bama E <input type<teDt name<nama><br>
Cmur E <input type<teDt name<umur><br><br>
<input type<submit name<submit Aalue<GMasukG>
<input type<reset name<reset>
</form>
</body>
</html>
2E
Modul Ajar Disain Web
perhatikan hasilnya adalah sebagai berikut+
@ambar 11.2. .ontoh dengan method 8?&0
8ada hasil parsing variabel$ tidak terlihat nilai dari setiap variabel pada nama #9L$
sehingga "lient tidak dapat melihat nilai apa yang dikirimkan. 'al ini akibat dari
pemakaian method 8?&0.
.ontoh 2+
Membuat kalkulator sederhana$ dengan form ditulis dalam file "ontoh72.html dan
a"tion pada "ontoh72.php sebagai berikut+
--------------------------------File contoh29.html ------------------------------------------
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
<$enter>
0yber ;oom<br><br><br>
</$enter>
Masukkan nama dan umur andaE<br><br>
<form a$tion<G$ontoh')#phpG method<G75TG>
bilangan & < <input type<teDt name<bil&><br>
bilangan ' < <input type<teDt name<bil'><br><br>
<input type<submit name<tambah Aalue<GtambahG>
<input type<submit name<kurang Aalue<GkurangG>
<input type<submit name<kurang Aalue<GkaliG>
<input type<reset name<reset>
</form>
</body>
</html>
--------------------------------File contoh29.php ------------------------------------------
<html>
<head>
<title>Qariabel "alam %H%</title>
</head>
<body>
2H
Modul Ajar Disain Web
<$enter>
<U
if.Wtambah<<GtambahG1 Y
Whasil<Wbil&XWbil'I
e$ho GWbil& X Wbil' < Whasil<br>GI
Z
if.Wkurang<<GkurangG1 Y
Whasil<Wbil&-Wbil'I
e$ho GWbil& - Wbil' < Whasil<br>GI
Z
if.Wkali<<GkaliG1 Y
Whasil<Wbil&RWbil'I
e$ho GWbil& R Wbil' < Whasil<br>GI
Z
U>
</body>
</html>
'asilnya adalah sebagai berikut+
@ambar 11.16. 0ampilan "ontoh 2
2J
Modul Ajar Disain Web
Bab 12
(anipulasi 8a/bar 2en*an Photoshop
Di dalam bab ini$ akan dibahas mengenai penggunaan aplikasi Adobe
8hotoshop untuk manipulasi image. Materi yang dibahas dikelompokkan menjadi H
bagian sebagai berikut+
(1) Area *erja 8hotoshop (0ool)o()+ mengenai user interfa"e Adobe 8hotoshop
se"ara umum dan fungsi,fungsi tools pada toolbo( 8hotoshop$ area kerja
8hotoshop$ vieing image$ penggunaan history palette$ rulers$ guides$ measure
tool.
(7) Manipulasi Warna mengenai pengaturan arna image (brightness!"ontrast$
level$ saturation$ dsb)$ penggunaan eyedropper$ "olor sampler tool$ dan tools
terkait lainnya.
(4) &ele"tion mengenai "ara melakukan sele"tion image$ penggunaan marPuee$
lasoo tool$ dan tools terkait lainnya.
(3) Menggambar dan Manipulasi 8ath mengenai "ara penggunaan pen tools dan
tools sejenis untuk menggambar dan manipulasi path
(A) 0ransformation dan 9etou"hing mengenai pengubahan ukuran image dan
"anvas$ transformasi bentuk image$ "loning$ memperbaiki image$ dan
penggunaan tools yang terkait.
(E) Layer dan Masking mengenai penggunaan layer dan masking
(H) :ilter dan Membuat &pe"ial 5ffe"t mengenai penggunaan filter dan membuat
spe"ial effe"t pada image.
12.1. 6rea :er1a
@ambar 17.1. 0ampilan dan Area *erja 8hotoshop
*eterangan+
A. 0oolbo(
22
Modul Ajar Disain Web
). 0ool ?ption )ar
.. Menu
D. &tatus )ar
5. )erbagai jenis palette$ yang aktif dari atas ke baah+ navigation palette$
"olor palette$ history
:. palette$ dan layer palette
@. 8alette Well (hanya tampak apabila resolusi layar di atas J66 ( E66)
12.1.6. Toolbox
0oolbo( berisi berbagai ma"am tools yang digunakan untuk melakukan
manipulasi image.
12.1.B. Tool Bption Bar
'ampir semua tool pada 0oolbo( memiliki options yang ditampilkan pada
0ool ?ption )ar. ?ptions tersebut digunakan untuk mengatur nilai parameter dari
tool yang sedang aktif!dipilih. @ambar 17.7 adalah "ontoh tampilan tool option bar
jika tool Magi" Wand pada toolbo( (short"ut keyboard+ W) diaktifkan+
@ambar 17.7. 0ool ?ption )ar
&etelah nilai parameter pada tool option bar diubah,ubah (misalnya nilai
0oleran"e)$ kita dapat mengembalikannya lagi menjadi nilai default (nilai semula).
=aitu dengan klik i"on yang ada di bagian paling kiri tool option bar$ kemudian klik
tombol . 8ada "onte(t menu yang mun"ul$ pilih #eset Tool untuk mengembalikan
nilai default dari tool yang sedang dipilih. Apabila ingin mengembalikan nilai
default semua tools di toolbo($ pilih #eset 6ll Tools. #ntuk jelasnya bisa dilihat
pada gambar 17.4.
@ambar 17.4. 9eset All 0ool
Apabila ingin menyembunyikan!menampilkan 0ool ?ption )ar$ 8ilih
Menu Window$ kemudian klik pada item menu Bptions untuk menghilangkan atau
mengaktifkan tanda "he"k,nya.
166
Modul Ajar Disain Web
@ambar 17.3. .he"k ?ption untuk mengaktifkan Windo ?ption
12.1.3. (enu
)erikut adalah menu,menu yang terdapat pada Adobe 8hotoshop J.6+
:ile untuk manipulasi file seperti menyimpan$ membuka$ e(port$ import$
dan "etak.
5dit untuk proses editing se"ara umum seperti "ut$ "opy$ paste$ transform
image$ serta untuk mengatur preferen"es Adobe 8hotoshop.
Image berisi editing image untuk mengatur arna$ hue!saturation$
brightness!"ontrast$ ukuran$ dsb.
Layer untuk manajemen layer pada image$ seperti menambah layer$
menghapus$ menambah efek pada layer$ serta masking.
&ele"t untuk pemilihan obyek gambar (sele"tion image).
:ilter untuk menggunakan filter,filter yang terinstall pada 8hotoshop yang
dapat digunakan untuk memberi efek tertentu pada gambar.
Tie digunakan untuk pengaturan vie seperti <ooming image$
menampilkan skala$ dan sebagainya.
Windo digunakan untuk pengaturan indo
'elp digunakan untuk menampilkan help Adobe 8hotoshop.
12.1.2. &tatus Bar
&tatus bar berisikan keterangan mengenai tool di toolbo( yang sedang
aktif$ serta keterangan image yang sedang aktif. &tatus bar pada 8hotoshop dapat
ditampilkan!disembunyikan dengan memilih menu Window ? &tatus Bar. #ntuk
lebih memahami kegunaan status bar$ bisa praktekkan sbb+
1) )uat dokumen baru$ dengan memilih menu Eile ? Cew... (shor"ut keyboard+
3trlXC). Akan keluar dialog seperti gambar 17.A$ isikan nilai7nya seperti pada
gambar 1.A dan kemudian klik tombol ?k.
7) 0ahan tombol Alt$ kemudian klik kiri pada status bar$ akan terlihat keterangan
dokumen image yang sedang aktif.
4) Apabila kita perhatikan gambar 17.E.)$ 8aint )u"ket 0ool kebetulan sedang
aktif$ dan pada status bar nya terdapat juga keterangan dari tool tersebut. #ntuk
jelasnya silakan ba"a pada keterangan gambar yang ada di baah gambar 17.E.
161
Modul Ajar Disain Web
@ambar 17.A. 8embuatan dokumen baru
@ambar 17.E. 8embukaan dokumen baru
*eterangan+
A. &kala tampilan pada kanvas (vie area image) (gambar 1.E.@)$ pada gambar
menunjukkan skala ampilan adalah 166V
). 8aint )u"ket 0ool pada toolbo( sedang aktif
.. Informasi!*eterangan tentang dokumen yang sedang aktif di kanvas (vie
area image).
167
Modul Ajar Disain Web
D. Informasi!*eterangan tentang dokumen yang sedang aktif di kanvas (vie
area image). #ntuk enampilkan$ tekan 6ltX:li) atau 3trlX:li) pada
(gambar 1.E..) .
5. Digunakan untuk mengubah informasi!keterangan pada (gambar 1.E..)
:. 8enjelasan singkat mengenai tool yang sedang aktif (pada "ontoh ini 8aint
)u"ket 0ool)
@. Tie area image atau kanvas$ merupakan area dokumen image yang sedang
kita edit.
12.1.-. Palette
8alette 8hotoshop berguna untuk memudahkan dalam navigasi maupun
editing image. #ntuk menyembunyikan!menampilkan palette$ digunakan menu
Window$ kemudian pilih palette yang ingin disembunyikan!ditampilkan.
12.1.E. Palette Well
8alette ell digunakan untuk memudahkan dalam pengaturan palette.
-amun palette ell hanya tersedia jika resolusi layar lebih besar dari J66 ( E66
(resolusi minimal yang disarankan adalah 1673 ( HEJ). Apabila suatu palette
diletakkan di palette ell$ maka palette akan bersifat tersembunyi. *etika title dari
palette diklik$ barulah palette akan ditampilkan. %ika area di luar palette di klik$
maka palette tersebut akan tersembunyi kembali.
#ntuk menyimpan palette ke dalam palette ell$ seret (drag) tab palette ke
dalam palette ell hingga palette ell ter,highlight.(@ambar 17.H$ memperlihatkan
palette tab navigator di,drag ke palette ell)
@ambar 17.H 8alette Well
12.2. Toolbox
)erikut ini akan dijelaskan mengenai fungsi dari masing,masing tools yang
terdapat pada toolbo( Adobe 8hotoshop J.6. #ntuk "ara penggunaan lebih detil
masing,masing tools akan dijelaskan se"ara terpisah pada bagian selanjutnya.
164
Modul Ajar Disain Web
@ambar 17.J. 0oolbo(
*eterangan+
A. MarPuee tool
). Move tool
.. Lasso tool
D. Magi" Wand tool
5. .rop tool
:. &li"e tool
@. 8at"h tool
'. )rush tool
I. &tamp tool
%. 'istory )rush tool
*. 5raser tool
L. 8aint )u"ket tool
M. &harpen tool
-. )urn tool
?. 8ath &ele"tion tool
8. 0ype tool
^. 8en tool
9. .ustom &hape tool
&. -otes tool
0. 5yedropper tool
#. 'and tool
T. Yoom tool
12.2.6. (arIuee Tool
9e"tangular MarPuee (&hort"ut keyboard+ ($ atau &hift X () untuk
membuat area sele"tion berbentuk segi empat.pada gambar.
5llipti"al MarPuee (&hort"ut keyboard+ ($ atau &hift X () untuk
membuat area sele"tion berbentuk elips atau lingkaran pada gambar.
&ingle 9o MarPuee untuk membuat area sele"tion satu baris pada
gambar (ukuran tinggi sele"tion adalah 1 pi(el)
&ingle .olumn MarPuee untuk membuat area sele"tion satu kolom pada
gambar (ukuran lebar sele"tionadalah 1 pi(el).
163
Modul Ajar Disain Web
12.2.B. (ove Tool
(&hort"ut keyboard+ H Digunakan untuk menggeser!memindah sele"tion$
layers$ dan guides.
12.2.3. $asoo Tool
(&hort"ut keyboard+ L$ atau &hift X L untuk mengubah jenis Lasoo)
Lasoo digunakan untuk membuat area sele"tion dengan bentuk bebas
8olygonal Lasoo digunakan untuk membuat area sele"tion berbentuk
poligon
Magneti" Lasoo digunakan untuk membuat area sele"tion dengan "ara
menempelkan tepi sele"tion pada area tertentu pada image.
12.2.2. (a*ic Wand Tool
(&hort"ut keyboard+ W Digunakan untuk membuat area sele"tion yang
memiliki arna serupa. 8erbedaan toleransi arna dapat diatur pada tool
option bar.
12.2.-. 3rop Tool
(&hort"ut keyboard+ 3 Digunakan untuk memangkas image (memotong
dan membuang area tertentu dari image)
12.2.E. &lice Tool
(&hort"ut keyboard+ :$ atau &hift X : untuk mengubah jenis sli"e)
&li"e 0ool digunakan untuk membuat potongan,potongan gambar dari
suatu gambar
&li"e &ele"t 0ool digunakan untuk memilih potongan pada suatu gambar
12.2.8. Healin* BrushF PatchF 3olor #eplace/ent Tool
(&hort"ut keyboard+ G$ atau &hift X G mengubah tool)
8at"h 0ool digunakan untuk menge"at!melukis pada area tertentu gambar
dengan pola (pattern) atau sample tertentu. .o"ok untuk memberbaiki
gambar yang rusak.
'ealing )rush 0ool digunakan untuk menge"at!melukis gambar dengan
pola atau sample tertentu. .o"ok untuk memperbaiki gambar yang agak
rusak.
.olor 9epla"ement 0ool digunakan untuk menge"at!mearnai gambar
dengan pola arna tertentu.
12.2.H. BrushF Pencil Tool
(&hort"ut keyboard+ B$ atau &hift X B untuk mengubah tool)
)rush 0ool digunakan untuk melukis gambar dengan goresan kuas
8en"il 0ool digunakan untuk melukis gambar dengan goresan pen"il
12.2.D. &ta/p Tool (&hort"ut keyboard+ &$ atau &hift X & untuk mengubah jenis
stamp)
.lone &tamp 0ool digunakan untuk melukis gambar dengan sample
image tertentu
8attern &tamp 0ool digunakan untuk melukis gambar dengan
menggunakan pola tertentu
16A
Modul Ajar Disain Web
12.2.G. History Brush Tool
(&hort"ut keyboard+ J$ atau &hift X J untuk mengubah jenis)
'istory )rush 0ool digunakan untuk melukis gambar menggunakan
snapshot atau state history dari gambar 7.
Art 'istory 0ool digunakan untuk melukis gambar menggunakan
snapshot atau state history dari gambar$ dengan model artistik tertentu.
12.2.:. -raser Tool
(&hort"ut keyboard+ -$ atau &hift X - untuk mengubah jenis eraser)
5raser digunakan untuk menghapus pi(el gambar dan mengembalikannya
ke state tertentu.
)a"kground 5raser digunakan untuk menghapus area tertentu gambar
menjadi transparan.
Magi" 5raser digunakan untuk menghapus area tertentu gambar yang
memiliki arna yang serupa menjadi transparan dengan satu kali klik.
12.2.$. Paint Buc)etF 8radient Tool
(&hort"ut keyboard+ 8$ atau &hift X 8)
8aint )u"ket 0ool digunakan untuk menge"at area yang dipilih dengan
arna foreground atau pola tertentu.
@radient 0ool digunakan untuk menge"at area yang dipilih (sele"ted area)
dengan perpaduan banyak arna.
12.2.(. BlurF &harpenF &harpen Tool
(&hort"ut keyboard+ #$ atau &hift X #)
)lur 0ool digunakan untuk menghaluskan!mengaburkan area tertentu
pada gambar.
&harpen 0ool digunakan untuk menajamkan area tertentu pada gambar.
&mudge 0ool digunakan untuk menggosok!men"oreng area tertentu pada
gambar
12.2.C. 2od*eF BurnF &pon*e Tool
(&hort"ut keyboard+ B$ atau &hift X B)
Dodge 0ool digunakan untuk menerangkan arna di area tertentu pada
gambar
)urn 0ool digunakan untuk menggelapkan arna di area tertentu pada
gambar
&ponge 0ool digunakan untuk mengubah saturation di area tertentu pada
gambar
12.2.B. Path &election Tool
(&hort"ut keyboard+ 6$ atau &hift X 6 untuk mengubah jenis)
8ath &ele"tion 0ool digunakan untuk melakukan sele"tion path
Dire"t &ele"tion 0ool digunakan untuk mengubah an"hor dan dire"tion
point dari path.
12.2.P. Type tool
(&hort"ut keyboard+ T$ atau &hift X T untuk mengubah jenis)
'ori<ontal 0ype 0ool digunakan untuk membuat tulisan se"ara hori<ontal
16E
Modul Ajar Disain Web
Terti"al 0ype 0ool digunakan untuk membuat tulisan se"ara vertikal
'ori<ontal 0ype Mask 0ool digunakan untuk membuat sele"tion
berbentuk tulisan se"ara hori<ontal
Terti"al 0ype Mask 0ool digunakan untuk membuat sele"tion berbentuk
tulisan se"ara vertikal
12.2.;. Pen Tool
8en 0ool (&hort"ut keyboard+ P$ atau &hift X P) digunakan untuk
membuat path dengan lengkung,lengkung yang halus
:reeform 8en 0ool (&hort"ut keyboard+ P$ atau &hift X P) digunakan
untuk membuat path berbentuk bebas
Add An"hor 8oint 0ool digunakan untuk menambah an"hor point pada
path
Delete An"hor 8oint 0ool digunakan untuk menghapus an"hor point
tertentu pada path
.onvert 8oint 0ool digunakan untuk mengubah an"hor dan dire"tion
point tertentu pada path
12.2.#. &hape Tool
(&hort"ut keyboard+ "$ atau &hift X " untuk mengubah jenis)
9e"tangle 0ool digunakan untuk menggambar bentuk segi empat
9ounded 9e"tangle 0ool digunakan untuk menggambar segi empat
melengkung
5llipse 0ool digunakan untuk menggambar ellipse
8olygon 0ool digunakan untuk menggambar polygon
Line 0ool digunakan untuk menggambar garis lurus
.ustom &hape 0ool digunakan untuk menggambar bentuk tertentu dari
daftar bentuk yang dapat dipilih pada option bar
12.2.&. Cotes Tool
(&hort"ut keyboard+ C$ atau &hift X C untuk mengubah jenis)
-otes 0ool digunakan untuk membuat "atatan pada gambar
Audio Annotation0ool digunakan untuk membuat suara!audio pada
gambar
12.2.T. -yedropperF (easure Tool
(&hort"ut keyboard+ D$ atau &hift X D untuk mengubah jenis)
5yedropper 0ool digunakan untuk mengambil sample arna pada gambar
untuk arna foreground
.olor &ampler 0ool digunakan untuk mengambil berbagai sample arna
pada gambar
Measure 0ool digunakan untuk mengukur jarak atau sudut pada gambar
12.2.". Hand Tool
(&hort"ut keyboard+ H Digunakan untuk menggeser!memindah bidang
pandang gambar di dalam kanvas.
16H
Modul Ajar Disain Web
12.2.H. Koo/ Tool
(&hort"ut keyboard+ K Digunakan untuk memperbesar atau memperke"il
tampilan gambar.
12.3. $atihan (ela)u)an #esa/ple 8a/bar
)uka gambar$ pilih sebuah file gambar
@ambar 17.2 .ontoh gambar
8ilih D/a*e ? D/a*e siLe untuk menampilkan kotak dialog.
8ilih kotak "ek 9esample Image untuk mengubah nilai resolution dan nilai
Width dan Height.
#bah nilai Width dan Height.
*lik ?*.
12.! (en*ubah ")uran 3eta)
%ika ingin mengubah tampilan pada halaman$ dan tidak ingin mengubah
jumlah pi(el pada halaman$ ubah resolusi agar dapat men"etak gambar lebih besar
atau lebih ke"il tanpa menambah atau mengurangi satu pi(elpun.
)uka gambar
8ilih D/a*e ? &iLe.
Matikan resample image agar tidak ada pi(el yang dipengaruhi pada saat
mengubah ukuran gambar.
#bahlah setting ukuran output dengan memilih resolusi ideal pada table berikut
ini.
*lik ?*.
0abel 17.1. )eberapa ukuran "etak standar
8rinter 9esolusi Ideal )atas Minimal )atas Maksimal
8rint Laser 466 ppi 176 ppi 26 ppi 1A6 ppi
8rint Laser E66 ppi 1J6 ppi 14A ppi 77A ppi
-esprint 1J6 ppi 14A ppi 77A ppi
.oated Maga<ine &to"k 7EH ppi 766 ppi 446 ppi
8rinter Ink%et Warna 466 ppi 736 ppi 366 ppi
&uper,fine "oated sto"k 4A6 ppi 7E6 ppi 336 ppi
12.% (e/utar 3anvas.
Digunakan untuk menampilkan submenu yang berisikan pilihan untuk
memutar atau membalik gambar. )erikut ini submenu dari 9otate "anvas +
16J
Modul Ajar Disain Web
, 10,
o
+ memutar gambar yang terbalik agar kembali pada kakinya$ Alt X I$ 5$ 1.
, 9,
o
3W + memutar gambar 26 derajat searah jarum jam$ Alt X I$ 5F 9.
, 9,
o
33W 5 memutar gambar 26 derajat berlaanan jarum jam$ Alt X I$ 5$ 6)
, 6rbiritary 5 meluruskan gambar.
, Elip horiLontal 5 memperbaiki teks yang terbalik (alt X I X 5 X ').
, Elip verti)al 5 membalik bagian atas dan baah gambar (alt X I$ 5$ T)

@ambar 17.16 Memutar gambar 1J6
o
$ 26
o
.W dan 26
o
..W
12.' (e/oton* 2etail 8a/bar Jan* Tida) Perlu
0ool .rop berfungsi untuk memotong sisa gambar atau elemen latar
belakang yang tidak perlu.
*lik I"on tool "rop (tekan .)
@ambar batas "rop$ geser di dalam jendela gambar untuk membuat sebuah segi
empat di sekitar bagian gambar yang ingin dipertahankan
@eser dalam batasan "rop untuk memindahkannya.
@eser tangkai untuk mengubah ukuran batasan gambar$ tekan shift dan geser
untuk mengubah ukurannya se"ara profesional.
@eser di luar batas "rop untuk menegakkan dan memotong gambar dalam satu
operasi.
0itik pemotongan akan menjadi titik pusat perputaran jika menggeser tangkai
dengan alt atau option.
*lik tanda "ek pada baris pilihan$ pilih D/a*e73rop7:li) *anda dalam batas
"rop tekan enter.
162
Modul Ajar Disain Web
@ambar 2.11 Memotong detail gambar
12.. (ena/bah)an copyri*ht M "#$.
.ara lain menambahkan "ap pribadi ke dalam gambar adalah dengan
pernyataan hak "ipta atau "opyright.
8ilih file info$ pada 8. tekan AltX: lalu I.
*etikkan "aption$ pada field .aption ketikkan apa saja mulai dari satu kalimat
hingga beberapa paragraf mengenai gambar anda.
Masukkan pernyataan hak "ipta$ bentuk standar adalah
simbol!tanggal!pemegang hak "ipta$ seperti misalnya O_ 7661 0ype `
@raphi"s$ In".I
*etikkan #9L$ jika anda memiliki situs internet$ ketikan alamatnya (dikenal
dengan istilah #niversal 9esour"e Lo"ator) pada kotak image #9L. *etikkan
alamat lengkapnya$ seperti + http+!!.press.eeepis,its.edu.
*lik ?*$ simpan gambar anda dalam format apa saja.
12.0. (e/buat &pesial -fe) den*an Photoshop
8ada bagian ini kita akan mengaplikasikan photoshop pada pembuatan efek
khusus. 5fek ini berguna untuk memper"antik gambar yang kita olah. )ukan itu
saja$ kita bisa men"iptakan berma"am gambar digital yang unik. *reativitas adalah
kun"inya.
12.0.1. (e/buat -fe) $u)isan
5fek lukisan sangat populer dan sering digunakan$ karena merupakan trik
yang ampuh sekaligus dapat membuat foto menjadi lebih artistik.
Adapun langkah,langkahnya adalah +
116
Modul Ajar Disain Web
)uka @ambar
#bah layer ba"kground menjadi mode normal dengan klik ganda
*lik + :ilter > Artistik > Dry )ush
8ada palet layer klik tombol + Add layer mask. Akan mun"ul ikon layer
mask berarna putih di samping kanan layer tumbnail pada palet layer.
*lik layer mask$ kemudian pilih menu + Image > Adjustment Invert atau
tekan .rtllXI untuk menjadikan layer mask tersebut menjadi berarna
hitam.
8astikan arna foreground putih pada Toolbox dan klik Brush toolF pilih
bentuk sapuan kuas yang diinginkan pada palet Brushes$ agar lebih artistik
pilih bentuk kuas dekokratif.
&apukan 0ool dan hasil image akan mun"ul se"ara otomatis sesuai bentuk
sapuan kuas.
0ambahkan :ilter > 0e(ture > 0e(turi<e untuk memberi kesan kasar pada
permukaannya.
12.0.2. (e/buat -fe) #inti) Hu1an
5fek rintik hujan sering digunakan untuk membuat efek pemandangan dan
dapat membuat foto menjadi lebih artistik. Adapun langkah,langkahnya adalah +
)uka @ambar
111
Modul Ajar Disain Web
*lik + :ilter > -oise > Add -oise. Dalam kotak dialog Add -oise masukkan
nilai Amount sesuai kebutuhan$ antara 166 hingga 366V tergantung
seberapa banyak efek hujan yang akan diterapkan.
8ada menu distribution pilih @aussian$ aktifkan kotak "ek Mono"hrome.
*lik ?*
0ambahkan + :ilter > )lur > Motion )lur$ masukkan angle antara A6 hingga
EA derajat$ Distan"e antara 76 hingga E6p(.
*lik ?*
12.0.3. (en**una)an (as)in*
Mask berguna untuk menyembunyikan sementara sebagian area pada layer.
0eknik ini berguna saat kita menggabungkan beberapa elemen image dalam
komposisi disain. *ita dapat menghapus sebagian area image yang tidak diinginkan
tanpa kehilangan image aslinya$ dengan layer ini kita juga bisa membuat efek
gradasi. Adapun langkah,langkahnya adalah +
*lik + &ele"t > Desele"t atau tekan .rtlXD untuk menghilangkan seleksi area
pada image
8ada palet layer$ pilih layer yang akan kita tambahkan mask
#ntuk membuat mask dengan menampilkan keseluruhan bagian layer$ klik
tombol -e Layer Mask pada palet layer atau pilih Layer > Add Layer
Mask > 9eveal All
#ntuk membuat mask dengan menyembunyikan keseluruhan bagian layer$
AltX*lik tombol -e Layer Mask atau pilih Layer > Add Layer Mask >
'ide All
#ntuk membuat mask dengan menampilkan bentuk seleksi setelah membuat
seleksi$ klik tombol -e Layer Mask
#ntuk mengedit Layer Mask$ pilih )rush 0ool$ gunakan arna foreground
putih untuk mengurangi area mask$ hitam untuk menambah area mask$ dan
abu,abu untuk membuat mask transparan
12.0.2. (e/buat -fe) Te)s Ber*era)
5fek teks bergerak sering digunakan untuk membuat penampilan teks
menjadi lebih menarik dan artistik. Adapun langkah,langkahnya adalah +
117
Modul Ajar Disain Web
)uat dokumen berarna hitam $ Width + J66 p( $ 'eight + E66 p($ .olor
Modenya + 9@). 'ori<ontal 0ype 0ool$ buat teks + .58A0
*lik + Layer > 9asteri<e > 0ype$ Duplikasi layer tersebut $ beri nama angin
#rutannya dari atas ke baah + layer .58A0$ A-@I-$ dan )a"kground
&embunyikan layer L.58A0M $ aktifkan layer LA-@I-M
*lik + :ilter > &tyli<e > Wind$ metode yang dipakai + Wind$ Dire"tion di isi +
:rom 0he 9ight. Lakukan dua sampai tiga kali
Aktifkan layer L.58A0M$ klik + Layer > Layer &tyle > @radient ?verlay
8ilih kombinasi arna gradient yang diinginkan
0ambahkan &troke dengan arna hitam. 0erapkan Wind dua kali
#ntuk menggabungkan ke dua layer gunakan + .trlX5
*lik + 5dit > 0ransform > &ke$ akan mun"ul bo( dengan J handle$ geser
handle ke tengah atas kanan$ hal ini akan membuat teks miring. 0ekan
5nter.
Bab 13
(e/buat 8a/bar 32
Menggambar 4 dimensi adalah sesuatu yang menarik untuk dibahas$
karena hasilnya bisa dikatakan lebih menggambarkan keadaan nyata dari ruang
dimensi manusia. 8erkembangan teknologi kemputer saat ini sudah sangat
men"ukupi untuk keperluan menggambar 4D bahkan sampai pada animasi 4D atau
video 4D. 8emakaian grafik 4D ini dirasakan mempunyai nilai sendiri hal ini bisa
ditarik dari banyaknya video,video dan aplikasi,aplikasi yang menaarkan fasilitas
4D. &ebut saja film yang "ukup banyak menggunakan efek 4D seperti &py *ids 4D$
)arbie bahkan anime 4D yang banyak beredar di pasar video. &oftare game
114
Modul Ajar Disain Web
adalah yang pertama kali memanfaatkan 4D$ saat ini bisa dikatakan gamae yang
bukan 4D sudah tidak laku di pasar game$ mulai dari game A"tion seperti &trike
:ighter$ 4D 8oli"e dan 0aken$ &trategi seperti Age of 5mpire dan Age of Mitology
sampai simulasi seperti &IM$ semuanya menggunakan fitur 4D.
#ntuk menggambar 4D di komputer$ saat ini sudah tersedia banyak
softare yang mempunyai fasilitas 4D. Di antara softare,softare tersebut$ yang
banyak digunakan antara lain 4D &tudio Ma($ Auto.AD dan Maya. *etiga
softare ini memiliki fitur dasar yang bisa dikatakan sama$ dengan fitur,fitur
tambahan yang berbeda. Masing,masing mempunyai penggemar yang tidak bisa
dibandingkan. Dalam modul ini softare yang digunakan adalah 4D &tudio Ma(
dengan sistem operasi Windos /8.
4D &tudio Ma( merupakan softare yang poerfull di dalam menggambar
model 4D dengan fasilitas yang lengkap dan mudah digunakan. 'asilnya "ukup
memuaskan. )ahkan ada fitur animasi dalam softare ini yang memungkinkan
pembuatan animasi 4D se"ara langsung.
13.1 (en*enal 32 &tudio (ax
4D &tudio Ma( adalah softare grafis yang dibuat oleh AutoDesk untuk
memadukan grafik vektor dan gambar raster dalam menghasilkan gambar,gambar
4D yang kelihatan realistik. 'asil 4D studio Ma( ini bisa berupa model gambar 4D
atau animasi 4D yang tersimpan dalam bentuk file dengan nama ekstensi .avi
maupun .mov. )eberapa kelebihan dari 4D &tudio Ma( ini antara lain+
?byek gambar 4D yang realistik
*emudahan antar muka dalam membuat model gambar 4D
*elengkapan antar muka
*ompatibilitas hasil gambar dengan program grafis dan animasi yang lain. Ini
terlihat baha hasil 4D studio ma( ini dapat dijalankan di Ma"romedia :lash$
Adobe 8remeire dan #lead Tideo &tudio.
4D studio ma( merupakan softare standard di dalam 4D modeling dalam
dunia desain grafis$ animasi dan video editing. 'al ini disebabkan karena 4D studio
ma( dapat menghasilkan format grafik vektor dan animasi vektor yang dapat
113
Modul Ajar Disain Web
dikenali oleh banyak softare grafik lainnya. &ehingga 4D studio ma( mempunyai
segmen yang berbeda di dunia desain grafis yaitu 32 /odelin*.
*ebutuhan spesifikasi sistem komputer untuk menjalankan 4D &tudio Ma( A.1
memang "ukup tinggi mengingat baha 4D studio ma( adalah softare graphis 4D$
yaitu+
8ro"essor minimal 84 A66M'<$ disarankan yang lebih tinggi.
9AM minimum 7AE M)$ disarankan A17 M) untuk dapat digabungkan dengan
program aplikasi video editing seperti adobe premeire
Tideo @raphi"s minimal E3M)$ disarankan 17J M)
&istem operasi Windos 2J$ -0$ 7666$ atau /8
*ebutuhan sistem di atas$ sebaiknya tidak menggunakan spesifikasi minimum
karena berakibat tidak jalannya beberapa fasilitas 4D studio ma(.
13.2 Dnterface 32 studio (ax
Interfa"e antra muka 4D studio ma( sebenarnya merupakan interfa"e
yang sangat baik dan lengkap$ hanya saja bagi pemula mungkin "ukup menakutkan
karena banyaknya item toolbar dan komponen yang ditampilkan. 0etapi jangan
khaatir karena ini nantinya akan sangat membantu dalam membangun model
grafik 4D.
11A
Modul Ajar Disain Web
@ambar 14.1. Interfa"e antar muka 4d studio ma(
Dari gambar 14.1. terlihat se"ara langsung ditampilkan grafik dalam bentuk
perspektif dan proyeksi (0op,atas$ :ront,depan dan Left,samping kiri). 'al ini
sangat membantu dalam membangun obyek grafik 4D$ karena memungkinkan
editing grafik dari berbagai sisi gambar. Disamping itu terdapat+
(1) Menu$ yang letaknya di bagian paling atas.
(7) 0oolbar$ yang letaknya di atas tepatnya dibaah menu.
(4) Tieport$ tampilan perspektif dan proyeksi dari grafik 4D
(3) .ommand 8anel$ yang letaknya di sebelah kanan.
(A) Tieport$ yang letaknya di sebelah kanan baah.
(E) Animation .ontrol$ yang letaknya di baah tepatnya sebelah kiri vieport.
13.3 (enu
Menu yang digunakan 4D studio ma( adalah menu pulldon yang
merupakan menu utama dari program 4d studio ma($ yang memuat perintah,
perintah pokok aplikasi seperti operasi file$ editing$ render dan lain,lain.
@ambar 1.7. 0ampilan menu 4d studio ma(
11E
Modul Ajar Disain Web
13.! ToolBar
0oolbar ini merupakan menu yang ditampilkan dalam bentuk tombol atau
ikon untuk memudahkan penggunaan program karena menggunakan bahasa gambar
yang lebih informatif dan lebih mudah dipahami oleh pengguna.
@ambar 14.4. 0ampilan toolbar 4d studio ma(
13.% Hiewport
Tieport merupakan tampilan interaktif dari grafik 4D dengan model
perspektif dan proyeksi. Ada 3 bagian utama dalam vieport yaitu+
(1) 0?8 yang artinya obyek gambar terlihat dari atas
(7) :9?-0 yang artinya obyek gambar terlihat dari depan
(4) L5:0 yag artinya obyek gambar terlihat dari kiri
(3) 859&85.0IT5 yang artinya gambar terlihat utuh 4D dalam bentuk "amera,
vie.
13.' 3o//and Panel
.ommand panel ini fungsinya hampir sama dengan menu dan toolbar$
bedanya adalah adanya parameter,parameter yang memungkinkan editing grafik 4D
dapat dilakukan dengan ukuran yang pasti. .ommand panel ini mempunyai enam
buat tab yaitu+
(1) .reate+ digunakan untuk pembuatan obyek grafik 7D dan 4D
(7) Modify+ digunakan untuk memodifikasi obyek grafik dengan mengubah
parameter,parameter yang ada dalam setiap modifikasi obyek grafik.
(4) 'ierar"hy+ digunakan untuk mengatur jenis,jenis titik orientasi
(3) Motion+ digunakan untuk mengatur animasi obyek
(A) Display+ digunakan untuk mengatur obyek yang ditampilkan (visible) dan yang
disembunyikan (invisible).
(E) #tility+ digunakan untuk fasilitas tambahan seperti CAsset ManagerD untuk
mengorganisasi obyek$ CMotion .aptureD untuk menangkap gambar bergerak
dalam bentuk frame,frame gambar dan sebagainya.
11H
Modul Ajar Disain Web
@ambar 14.3. 0ampilan vieport
@ambar 14.A. .ommand 8anel
13.. 6ni/ation 3ontrol
Animation "ontrol ini merupakan fasitias untuk mengatur animasi obyek
4D yang banyak digunakan dalam video editing.
@ambar 14.E. Animaton .ontrol
11J
Modul Ajar Disain Web
13.0 Hiewport 3ontrol
Tieport "ontrol merupakan navigasi untuk memperbesar tampilan
gambar di vieport$ memutar dan menggeser vieport (koordinat) sehingga
tampilan dapat dilihat lebih baik.
@ambar 14.H. Tieport .ontrol
Di dalam vieport "ontrol ini ada J buah "ontrol yaitu+
(1) Yoom$ mengubah ukuran se"ara manual pada satu vieport
(7) Yoom All$ mengubah ukuran se"ara manual pada semua vieport
(4) Yoom 5(tend$ mengubah ukuran se"ara otomatis pada satu vieport
(3) Yoom 5(tend All$ mengubah ukuran se"ara otomatis pada semua vieport
(A) :ield on Tie$ mengubah "amera vie pada satu vieport
(E) 8an$ menggeser vieport atau sumbu koordinat yang akan berakibat menggeser
semua tampilan obyek grafik
(H) Ar" 9otate$ memutar veport atau sumbu koordinat yang akan berakibat
memutar semua tampilan obyek grafik
(J) Min,Ma( 0oggle$ untuk menampilkan satu vieport se"ara besar atau semua
vieport.
13.9 (e/buat Bbye)
?byek dasar dalam grafik 4D dimulai dari obyek &hape dan obyek
8eo/etri. )ab ini akan menjelaskan bagaimana membangun obyek,obyek grafik
dasar ini. #ntuk membangun obyek grafik dasar ini$ anatar muka yang banyak
digunakan adalah Cco//and panelD yang letaknya pada keadaan standard ada di
sebelah kanan dari tampilan 4d studio ma(.
112
Modul Ajar Disain Web
@ambar 14.J. .ommand 8anel
13.1,. Bbye) &hape
?byek shape digunakan untuk membangun obyek grafik 7D di dalam
ruang 4D seperti garis$ lingkaran$ ellips$ -gon$ kotak$ te(t$ se"tion$ bintang$
donutdan heli(. 8embuatan obyek grafik ini bisa menggunakan mouse (drag) dan
keyboard ( menuliskan setiap parameter grafis).
@ambar 14.2. .ommand 8anel untuk .reate &hape (&plines)
13.1,.1. (e/buat 8aris
8ilih C"reateD >> C&hapeD pada C"ommand panelD$ lalu pilih Line.
)erikutnya tentukan posisi aal dan posisi akhir dengan mousedrag. 8osisi akhir
dilakukan dengan "li"k kanan pada mouse. :ungsi line ini juga bisa digunakan
untuk membuat polyLine$ dengan "li"k pada setiap posisi titik penghubung dari
garis,grais yang dibentuk.
176
.reate
&hape
@eometry
Modul Ajar Disain Web
@ambar 14.16. .ara membuat garis
13.1,.2. (e/buat $in*)aran
8ilih C"reateD >> C&hapeD pada C"ommand panelD$ lalu pilih .ir"le.
0entukan posisi aal ("li"k pertama kali) adalah posisi pusat lingkaran kemudian
drag sampai besarnya lingkaran sudah "o"ok. Atau bisa meggunakan parameter
yang ada di bagian baah dari "ommand panel yaitu dengan memasukkan radius
(jari,jari) dari lingkaran.
@ambar 14.11. .ara drag membuat lingkaran
13.1,.3. (e/buat 6rc
Ar" (busur) adalah bentuk lingkaran terpotong. 8ilih C"reateD >> C&hapeD
pada C"ommand panelD$ lalu pilih Ar". 0entukan ttitik aal$ tarik sampai besar ar"
sesuai dan gerakkan mouse sampai ar"nya terbentuk. Atau bisa menggunakan
keyboard dengan memasukkan parameter 9adius$ :rom (sudut aal) dan 0o ( sudut
akhir) pada "ommand panel. Misalkan membuat ar" dengan jari,jari A6$ dari 6
o
sampai dengan A6
o
. @ambar 14.17 menjelaskan teknik pembuatan ar" dengan
mouse atau dengan keyboard.
171
1
7
4
3
.li"k
.li"k lalu "li"k kanan
Modul Ajar Disain Web
@ambar 14.17. 8embuatan ar" dengan mouse
13.1,.!. (e/buat C8on
-gon adalah gambar segi enam. 8ilih C"reateD >> C&hapeD pada C"ommand
panelD$ lalu pilih -gon. 0entukan titik aal dari traik untuk mendapatkan besar dari
-gon.
@ambar 14.14. 8embuatan -gon
13.1,.%. (e/buat Text
0e(t dalam grafis digunakan untuk memperjelas informasi gambar atau
memang kandungan obyeknya sendiri.. 8ilih C"reateD >> C&hapeD pada C"ommand
panelD$ lalu pilih 0e(t. *etikkan te(t yang akan dibuat pada property te(t di
"ommand panel. 8astikan letaknya dengan "li"k satu kali di mana te(t tersebut akan
diletakkan.
177
Modul Ajar Disain Web
@ambar 14.13. 8embuatan 0e(t
13.1,.'. (e/buat &ection
8ilih C"reateD >> C&hapeD pada C"ommand panelD$ lalu pilih &e"tion.
0entukan posisi aal dan tarik seberapa besar se"tion yang akan dibuat.
@ambar 14.1A. 8embuatan &e"tion
174
0empat menuliskan te(t
8osisi "li"k (tengah te(t)
Modul Ajar Disain Web
13.1,... (e/buat #ectan*le (:ota)
)entuk kotak ini bentuk yang sangat sederhana dan banyak digunakan
dalam pengembangan grafis. 8ilih C"reateD >> C&hapeD pada C"ommand panelD$ lalu
pilih 9e"tangle. 0entukan posisi aal dan posisi akhir dari kotak.
@ambar 14.1E. 8embuatan kotak
13.1,.0. (e/buat -llipse
8ilih C"reateD >> C&hapeD pada C"ommand panelD$ lalu pilih 5llipse.
0entukan posisi aal ellipse dan gerakkan mouse sampai terbentuk model ellipse
yang diharapkan. Atau dengan "ara mengubah nilai $en*th dan Width pada
"ommand panel.
@ambar 14.1H. 8embuatan 5llipse
173
Modul Ajar Disain Web
13.1,.9. (e/buat 2onut
8ilih C"reateD >> C&hapeD pada C"ommand panelD$ lalu pilih Donut.
0entukan titik pusat donut dengan "li"k$ kemudian drag sampai besarnya ok$
kemudian drag kembali untuk menentukan lingkaran dalam donut.
@ambar 14.1J. 8embuatan Donut
13.1,.1,. (e/buat &tar (Bintan*
8ilih C"reateD >> C&hapeD pada C"ommand panelD$ lalu pilih &tar. 0entukan
posisi aal dengan "li"k$ drag sampai membentuk besarnya bintang$ kemudian drag
untuk menentukan besarnya ttik,titik dalam dari bintang.
@ambar 14.12. 8embuatan &tar
13.1,.11. (e/buat Helix
'eli( identik dengan bentuk tangga berputar. #ntuk membuat heli($ pilih
C"reateD >> C&hapeD pada C"ommand panelD$ lalu pilih 'eli(. 0entukan titik pusat
heli( dengan "li"k$ drag untuk membentuk jari,jari heli( dan kemudian drag untuk
menentukan tinggi heli(.
17A
Modul Ajar Disain Web
@ambar 14.76. 8embuatan 'eli(
13.11 Bbye) 8eo/etry
?byek geometry digunakan untuk membangun obyek grafik 4D yang
berupa+
(1) ?byak dasar 4D (&tandard 8rimitive) seperti+ bo($ sphere$ "ylinder$ torus$
teapot$ .one$ @oeshpere$ 0ube$ 8iramid dan 8lane
(7) ?byek 4D lebih lanjut (5(tended 8rimitive) seperti 'edra$ .hamperbo($
?iltank$ &pindle$ @engon$ 9ingWave$ 8rism$ 0orus *not$ .hamper.yl$
.apsule$ L,e(t$ .,e(t dan 'ose.
17E
Modul Ajar Disain Web
13.11.1. (e/buat Box
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button )o(. 0entukan panjang$ lebar dan tinggi dari bo(.
@ambar 14.71. Membuat )o(
13.11.2. (e/buat &phere (Bola
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button &phere. 0entukan titik pusat dan jari,jari bola.
@ambar 14.77. Membuat bola
17H
Modul Ajar Disain Web
13.11.3. (e/buat 3ylinder
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button .ylinder. 0entukan titik pusat dan jari,jari lingkaran$
kemudian tentukan tinggi dari "ylinder.
@ambar14.74. Membuat "ylinder
13.11.!. (e/buat Torus
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button 0orus. 0entukan titik pusat$ jari,jari lingkaran luar dan jari,
jari lingkaran dalam dari torus.
@ambar 14.73. Membuat 0orus
17J
Modul Ajar Disain Web
13.11.%. (e/buat Teapot
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button 0eapot. 0entukan titik pusat dan besar dari teapot.
@ambar 14.7A. Membuat 0eapot
13.11.'. (e/buat 3one
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button .one. 0entukan titik pusat$ jari,jaring lingkaran$ tinggi dan
jari,jari lingkaran atas (ke"il) dari "one.
@ambar 14.7E. Membuat .one
172
Modul Ajar Disain Web
13.11... (e/buat Tube
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button 0ube. 0entukan titik pusat$ lingkaran luar $ lingkaran dalam
dan tinggi dari tube.
@ambar 14.7H. Membuat 0ube
13.11.0. (e/buat Pira/id
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button 8yramid. 0entukan titik aal alas$ titik akhir alas dan tinggi
dari piramid.
@ambar 14.7J. Membuat 8iramid
146
Modul Ajar Disain Web
13.11.9 (e/buat Plane
8ilih C"reateD >> C@eometryD >> C&tandard 8rimitiveD pada C"ommand
panelD$ lalu pilih button 8lane. 0entukan titik pusat dan besar dari plane.
@ambar 14.72. Membuat 8lane
13.11.1, (e/buat Hedra
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button 'edra.
@ambar 14.46. Membuat 'edra
141
Modul Ajar Disain Web
13.11.11 (e/buat 3a/ferBox
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button .amfer)o(.
@ambar 14.41. Membuat .amfer)o(
13.11.12 (e/buat BilTan)
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button ?il0ank.
@ambar 14.47. Membuat ?il0ank
147
Modul Ajar Disain Web
13.11.13 (e/buat &pindle
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button &pindle.
@ambar 14.44. Membuat &pindle
13.11.1! (e/buat 8en*on
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button @engon.
@ambar 14.43. Membuat @engon
144
Modul Ajar Disain Web
13.11.1% (e/buat #in*Wave
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button 9ingWave.
@ambar 14.4A. Membuat 9ingWave
13.11.1' (e/buat Pris/a
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button 8rism.
@ambar 14.4E. Membuat 8risma
143
Modul Ajar Disain Web
13.11.1. (e/buat Torus:not
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button 0orus *not.
@ambar 14.4H. Membuat 0orus *not
13.11.10 (e/buat 3ha/fer3yl
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button .hamfer.yl.
@ambar 14.4J. Membuat .hamfer.yl
14A
Modul Ajar Disain Web
13.11.19 (e/buat 3apsule
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button .apsule.
@ambar 14.42. Membuat .apsule
13.11.2, (e/buat $7-xt
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button L,5(t.
@ambar 14.36. Membuat L,5(t
14E
Modul Ajar Disain Web
13.11.21 (e/buat "7-xt
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button #,5(t.
@ambar 14.31. Membuat #,5(t
13.11.22 (e/buat Hose
8ilih C"reateD >> C@eometryD >> C5(tended 8rimitiveD pada C"ommand
panelD$ lalu pilih button 'ose.
@ambar 14.37. Membuat 'ose
14H
Modul Ajar Disain Web
Pusta)a
1. 8ohan$ I.'usni$8emrograman Web dengan '0ML$ Informatika )andung$
7661
7. .infokomputer."om
4. .4s"hools."om
3. A"hmad )asuki$ OWeb Appli"ation 8roje"t+ e,.ommer"eI$ Modul
International 0raining .enter$ 8oliteknik 5lektronika -egeri &urabaya$
766A.
A. .hristoper %ones$ Alisaon 'olloay$ O0he #nderground 8'8 and ?ra"ela
ManualI$ e,)ook 9elease 1.7$ ?ra"le$ 766E.
E. :irman Arifin$ Linda$ O8'8 8rogrammingI$ Modul 0hird .ountry 0raining$
8oliteknik 5lekronika -egeri &urabaya$ 766A.
H. :irman Arifin$ ODesain 'omepage+ '0ML (-otepad 5ditor)I$ Modul
0raining &A.$ 8oliteknik 5lektronika -egeri &urabaya$ 766A.
J. M. &yafii$ O8anduan Membuat Aplikasi Database Dengan 8'8 A$ My&^L$
8ostgre&^L$ ?ra"leI$ 8enerbit Andi =ogyakarta$ 766A
2. A"hmad )asuki$ Modul 0raining Design @arfik 4D Menggunakan 4d &tudio
Ma($ )agian *erjasama .. 85-&,I0&
14J