8u|u Ajar Mcdu| 11

Perang|aI |una| Oesain e|

Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 1 dari 93
:e|c|ah 8erIaraf |nIernasicna|
A. TUJUAN PEMBELAJARAN
Iorkombangan sains dan IoknoIogi monunIuI poningkaIan kuaIiIas,
pongoIahuan dan koIorampiIan kiIa daIam borkomunikasi. Sohingga kiIa
momorIukan suaIu IoknoIogi yang dapaI momborikan pongoIahuan yang Iobih
banyak dongan informasi yang muIakhir. DaIam monghadapi porkombangan
IoknoIogi komunikasi, kiIa diIunIuI unIuk boIajar sojak dini agar dapaI
borporan socara opIimaI.
IakoI pomboIajaran moduI 11 ini borIujuan unIuk mongonaIkan kopada
posorIa didik IonIang ponggunaan porangkaI Iunak dosain ne| unIuk
monghasiIkan karya informasi yang sangaI dibuIuhkan daIam kohidupan
sohari-hari. SoIoIah posorIa didik mompoIajari dongan ponuh koIokunan dan
mongikuIi aIur yang ada pada moduI 11, diharapkan momiIiki bokaI
komampuan IonIang ponggunaan porangkaI Iunak dosain ne| sobagai borikuI.
1. MongidonIifikasi monu dan ikon pada porangkaI Iunak dosain ne|.
2. MonjoIaskan fungsi monu dan ikon pada porangkaI Iunak dosain ne|.
3. Monggunakan monu dan ikon pada porangkaI Iunak dosain ne|.
4. MombuaI dokumon dosain ne| sodorhana.
Dongan moduI 11 ini juga diharapkan posorIa didik momiIiki cakrawaIa
pomikiran dan pongoIahuan socara umum maupun socara khusus yang
sokarang ini banyak dibuIuhkan daIam kohidupan sohari-hari.
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 2 dari 93
:e|c|ah 8erIaraf |nIernasicna|
B. STANDAR KOMPETENSI
MombuaI Dosain e|
C. MATERI POKOK
IorangkaI Lunak Dosain e| Iordiri dari :
1. IdonIifikasi monu dan ikon pada porangkaI Iunak dosain ne|
2. Fungsi monu dan ikon pada program dosain ne|
3. Ionggunaan monu dan ikon unIuk dosain ne|
4. MombuaI dosain ne| sodorhana

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 3 dari 93
:e|c|ah 8erIaraf |nIernasicna|
BAB I
MENU DAN IKON
PADA PERANGKAT LUNAK
DESAIN WFB
A. Pengantar
MicrcscfI |rcnIPage adaIah sobuah program yang digunakan unIuk
mombuaI, mondosain, dan mongodiI haIaman ne|, dongan |rcnIPage kiIa
dapaI moIihaI socara Iangsung apa yang akan IampiI di ne| |rcnser sowakIu
kiIa mongodiI haIaman ne| di |rcnIPage, dikaronakan |rcnIPage adaIah
sobuah apIikasi yang borprinsip WYSIWYG (haI Ycu :ee |s haI Ycu GeI)
aIau Apa yang kamu IihaI adaIah apa yang kamu dapaIkan. ApIikasi
|rcnIPage dikoIuarkan oIoh porusahaan piranIi Iunak (scfInare) Iorbosar di
dunia yaiIu MicrcscfI. SoIain mombuaI |rcnIPage, MicrcscfI juga mombuaI
apIikasi Iain soporIi apIikasi pongoIah kaIa MicrcscfI crd, apIikasi pongoIah
angka MicrcscfI |xce|, apIikasi unIuk prosonIasi (MicrcscfI PcnerpcinI), dan
sobagainya. ApIikasi-apIikasi IorsobuI mompunyai susunan, IaIa IoIak dan
formaI yang roIaIif sama unIuk ponggunaan monu dan ikon-ikonnya. MaIori
yang diborikan daIam bab ini momborikan gambaran IonIang IampiIan
porangkaI Iunak dosain ne| khususnya MicrcscfI |rcnIPage, sohingga
nanIinya siswa dapaI mongidonIifikasi monu dan ikon yang IordapaI pada
porangkaI Iunak dosain ne|.
KompoIonsi Dasar : MongidonIifikasi monu dan ikon pada
porangkaI Iunak dosain ne|
IndikaIor : MongidonIifikasi monu dan ikon pada :
Menu 8ar
:Iandard Tcc||ar
|crmaIIing Tcc||ar
Viens 8ar
MonampiIkan monu Icc||ars dari submonu
Vien
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 4 dari 93
:e|c|ah 8erIaraf |nIernasicna|
B. EIemen Dasar Perangkat Lunak Mlcrosoft |rontPage
MicrcscfI |rcnIPage morupakan sobuah program apIikasi bagian dari
MicrcscfI Office yang mompunyai komampuan unIuk moIakukan dosain
wob. MicrcscfI |rcnIPage momborikan banyak fasiIiIas unIuk moIakukan
borbagai macam pongaIuran (fcrmaI) Iorhadap komponon-komponon ne|
yang digunakan. MicrcscfI |rcnIPage momungkinkan bagi para programor
unIuk moIakukan ediIing scurce program dan monyodiakan fasiIiIas unIuk
pretien dosain ne| yang dibangun socara mudah.

Langkah-Iangkah yang diIakukan unIuk monjaIankan MicrcscfI |rcnIPage :,
porIama kiIa kIik Start > A|| Programs > Mlcrosoft Offlce > Mlcrosoft
Offlce |rontPage 2003 . Socara oIomaIis akan Iorbuka sobuah Iombar korja
baru yang masih kosong dongan nama neu_page_1.htm. UnIuk mongubah
nama dapaI diIakukan koIika kiIa moIakukan ponyimpanan Iombar korja.
Lombar korja dongan nama neu_page_1.htm akan soIaIu muncuI koIika kiIa
mombuka FronIIago, soIanjuInya apabiIa kiIa mombuka Iombar korja baru
somonIara neu_page_1.htm masih Iorbuka maka yang muncuI adaIah
neu_page_2.htm, neu_page_3.htm, dan soIorusnya.

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 5 dari 93
:e|c|ah 8erIaraf |nIernasicna|
Gambar 1. MonjaIankan ApIikasi |rcnIPage
`
1. KIik Start
2. SoIoIah muncuI sojumIah monu, kIik A|| Programs
3. KIik MicrcscfI Office
4. KIik Mlcrosoft Offlce |rontPage 2003
5. Jika pada des|Icp IordapaI shcrIcuI MicrcscfI |rcnIPage 2003 dapaI
Iangsung moIakukan dcu||e kIik pada shcrIcuI IorsobuI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 6 dari 93
:e|c|ah 8erIaraf |nIernasicna|
SoIoIah moIakukan Iangkah di haIaman soboIumnya maka akan Iorbuka Iombar
korja MicrcscfI |rcnIPage soporIi yang Iampak pada gambar di bawah ini.

Gambar 2. LIomon Dasar MicrcscfI |rcnIPage
KoIorangan :
1. TiI|e 8ar monampiIkan nama fi|e dan Iokasi fi|e IorsobuI.
2. Menu 8ar monyodiakan monu |i|e sampai dongan He|p.
3. :Iandard dan |crmaIIing Tcc||ar monyodiakan shorIcuI-shorIcuI ponIing
yang akan sangaI borguna koIika kiIa bokorja dongan |rcnIPage.
4. Page Ta| digunakan unIuk borpindah haIaman koIika kiIa bokorja
dongan banyak haIaman.
5. Viens 8ar digunakan unIuk moIihaI haIaman yang sodang kiIa korjakan
pada Iipo pongIihaIan yang borboda.
TiI|e 8ar
Menu 8ar
:Iandard Tcc||ar
|crmaIIing Tcc||ar
:IaIus
8ar
Viens 8ar
Page
Ta|
|sIimaIed Iime Ic
dcnn|cad
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 7 dari 93
:e|c|ah 8erIaraf |nIernasicna|
6. |sIimaIed Iime Ic dcnn|cad momborikan informasi kopada kiIa IonIang
porkiraan wakIu yang dibuIuhkan unIuk mon-dcnn|cad haIaman ne| kiIa
di |rcnser.
7. :IaIus 8ar momborikan macam-macam informasi sIaIus pokorjaan yang
sodang kiIa korjakan, misaI monampiIkan Iujuan |in| koIika kursor mcuse
kiIa borada di aIas sobuah |in|.
C. Menu dan Ikon
1. Menu Bar
Monu 8ar morupakan baris monu borisi porinIah borupa monu-monu
yang akIif dimuIai dari monu |i|e sampai dongan He|p. Masing-masing
monu mompunyai submonu aIau porinIah, soporIi Iampak pada
Gambar 3 dan IaboI 1. BorikuI ini IampiIan porinIah monu dan ikonnya.

Gambar 3. TampiIan Monu Bar

Menu 8ar daIam |rcnIPage IorIoIak dibawah TiI|e 8ar, sodangkan
:Iandard Tcc||ar dan |crmaIIing Tcc||ar borada dibawah Menu 8ar.
Adapun monu-monu yang IorIampiI dapaI diaIur dongan View >
TooIbar, dongan bogiIu maka monu-monu yang IorIampiI dapaI
dikosIumisasi sosuai dongan kobuIuhan pongguna.
Di daIam Menu 8ar banyak IordapaI submonu-submonu yang
borfungsi unIuk mongoIah haIaman ne| yang kiIa korjakan. Submonu-
submonu IorsobuI adaIah monu uIama dari |rcnIPage, karona IampiIan
ikon-ikon pada :Iandard Tcc||ar morupakan sobagian kociI dari monu
FronIIago yang Iorsodia. Tujuan dibuaInya bonIuk ikon-ikon pada
:Iandard Tcc||ar adaIah karona monu-monu iIuIah yang paIing soring
dipakai, jadi apabiIa kiIa Iidak monomukan sobuah monu daIam
bonIuk ikon di :Iandard Tc|||ar kiIa dapaI moncarinya di Menu 8ar.
BorikuI ini adaIah IampiIan submonu-submonu dari Menu 8ar :
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 8 dari 93
:e|c|ah 8erIaraf |nIernasicna|
TaboI 1. TampiIan Monu, Submonu, dan Ikon pada Menu 8ar
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 9 dari 93
:e|c|ah 8erIaraf |nIernasicna|
2. Standard Too|bar
:Iandars Tcc||ar morupakan kumpuIan dari ikon-ikon yang borfungsi
unIuk pongoIahan Iayar uIama MicrcscfI |rcnIPage, misaInya unIuk
mombuaI dokumon baru, mombuka dokumon yang IoIah disimpan,
monyimpan dokumon dan Iain-Iain. Gambar 4 monunjukkan IampiIan
monu ikon unIuk :Iandard Tcc||ar, dan IaboI 2 ponjoIasan IonIang
porinIah-porinIah unIuk masing-masing ikon.

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 1O dari 93
:e|c|ah 8erIaraf |nIernasicna|
Socara defau|I IampiIan :Iandard Tcc||ar adaIah sobagai borikuI.

Gambar 4. TampiIan :Iandard Tcc||ar
Ikon-ikon yang IorIampiI di :Iandard Tcc||ar dapaI diganIi sosuai
kobuIuhan. Nama porinIah ikon dapaI kiIa koIahui dongan cara
mongarahkan pcinIer mcuse pada ikon yang dipiIih sohingga akan
IampiI nama dari ikon IorsobuI.

Gambar 5. TampiIan hinI IorinIah Ikon

TaboI 2. TampiIan Monu dan Ikon pada :Iandard Tcc||ar
Ikon Nama Perintah
Nen
Open
:ate
|ind
Pu||ish :iIe
Tccg|e Pane
PrinI
Pretien in MicrcscfI |nIerneI |xp|crer 7
:pe||ing
CuI
Ccpq
PasIe
|crmaI PainIer
Undc
Redc
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 11 dari 93
:e|c|ah 8erIaraf |nIernasicna|
e| CcmpcnenI
|nserI Ta||e
|nserI |aqer
|nserI PicIure |rcm |i|e
Oraning
|nserI Hqper|in|
Refresh
:Icp
:hcn A||
:hcn |aqer Anchcrs
MicrcscfI Office |rcnIPage He|p
3. |ormattlng Too|bar
|crmaIIing Tcc||ar adaIah kumpuIan ikon-ikon yang disodiakan oIoh
|rcnIPage unIuk momformaI haIaman ne| yang sodang dibuaI/diodiI
sohingga sosuai dongan apa yang diharapkan. Gambar 6 monunjukkan
IampiIan monu ikon unIuk |crmaIIing Tcc||ar sodangkan koIorangan
masing-masing ikon dapaI diIihaI pada IaboI 3.

Gambar 6. TampiIan |crmaIIing Tcc||ar
TaboI 3. TampiIan Monu dan Ikon pada |crmaIIing Tcc||ar
Ikon Nama Perintah
:Iq|e
|cnI
|cnI :ize
8c|d
|Ia|ic
Under|ine
A|ign |efI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 12 dari 93
:e|c|ah 8erIaraf |nIernasicna|
A|ign CenIer
A|ign RighI
]usIifq
|ncrease
Oecrease
Num|ering
8u||eIs
Oecrease |ndenI
|ncrease |ndenI
OuIside |crder
High|ighI
|cnI cc|cr
4. Vleus Bar
Viens 8ar morupakan kumpuIan IomboI yang borguna unIuk moIihaI
haIaman ne| yang sodang kiIa buaI dari sisi yang borboda, misaI dari
sisi dosain, sisi kodo, aIaupun koduanya. Gambar 7 monunjukkan
IampiIan monu ikon unIuk Viens 8ar sodangkan koIorangan masing-
masing ikon dapaI diIihaI pada IaboI 4.

Gambar 7. TampiIan Viens 8ar
TaboI 4. TampiIan Monu dan Ikon pada Viens 8ar
Ikon Nama Perintah
:hcn Oesign Vien
:hcn :p|iI Vien
:hcn Ccde Vien
:hcn Pretien Vien
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 13 dari 93
:e|c|ah 8erIaraf |nIernasicna|
BAB II
FUNGSI MENU DAN IKON
PADA PERANGKAT LUNAK
DESAIN WFB
A. Pengantar
Iada bab II ini akan dibahas fungsi porinIah monu dan ikon yang IordapaI
pada MicrcscfI |rcnIPage. IorinIah dan fungsi ikon dan monu adaIah sama
moskipun IampiIan moroka sangaI borboda. SoboIumnya kiIa harus
mongoIahui apa iIu monu aIau ikon. Monu adaIah bonIuk porinIah yang
diIampiIkan daIam bonIuk simboI Ioks. Iada MicrcscfI |rcnIPage, monu-
monu Iordiri aIas |l|e, Fdlt, Vleu, lnsert, |ormat, Too|s, Tab|e, Data,
|rames, Wlndou, dan He|p. Di daIam monu-monu IorsobuI IordapaI
submonu-submonu yang porinIahnya sosuai dongan kaIogori monu. Monu
|l|e borisi porinIah yang borhubungan dongan fi|e yang sodang dikorjakan,
monu Fdlt borisi porinIah ponyunIingan, monu Vleu borisi porinIah
pongaIuran Iayar IampiIan, monu lnsert borisi porinIah inIuk monyisipkan,
monu |ormat borisi porinIa unIuk pongaIuran formaI dari haIaman ne|
yang sodang dikorjakan, monu Too|s borisi kumpuIan porinIah yang sangaI
borguna unIuk mongocok kompabiIiIas haIaman ne|, pongocokan kosakaIa,
opIimasi hIm| dan sobagainya. Monu Tab|e borisi porinIah yang
borhubungan dongan IaboI, monu Data borisi porinIah yang borhubungan
dongan daIa ne|, monu |rames borisi porinIah unIuk bokorja dongan frame,
monu Wlndou borisi porinIah unIuk mombuka nindcn baru, monuIup
window dan sobagainya, monu He|p borisi porinIah unIuk banIuan.

KompoIonsi Dasar : MonjoIaskan fungsi monu dan ikon pada
porangkaI Iunak dosain ne|
IndikaIor : MonjoIaskan fungsi monu dan ikon pada :
Menu 8ar
:Iandard Tcc||ar
|crmaIIing Tcc||ar
Viens 8ar
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 14 dari 93
:e|c|ah 8erIaraf |nIernasicna|
Ikon (|ccn) adaIah sobuah gambar kociI daIam bonIuk simboI yang borisi
porinIah IorIonIu. Tujuan dibuaInya ikon adaIah unIuk momudahkan
pongguna daIam moIakukan porinIah aIau pongaIuran karona ikon ini
borfungsi sobagai shcrIcuI dari porinIah-porinIah di Monu 8ar. BonIuk dari
ikon-ikon IorsobuI disosuaikan dongan karakIor porinIahnya, misaInya ikon
unIuk porinIah monyimpan (sate) disimboIkan daIam bonIuk diskoI dan
sobagainya. IonompaIan ikon-ikon di |rcnIPage dapaI diaIur dan
dikosIumisasi sosuai koinginan.

B. Fungsi Menu dan Ikon
1. Menu Bar
Gambar 8. TampiIan Monu 8ar
Monu 8ar adaIah barisan monu yang monampiIkan porinIah yang
digunakan unIuk mongaIur dan mongoIah objok. Masing-masing monu
mompunyai submonu dan porinIah. Iada moduI ini dijoIaskan fungsi
submonu-submonu yang soring digunakan daIam porangkaI Iunak
dosain ne|.
a. Menu |l|e
Monu |l|e borisi submonu dongan boborapa porinIah yang
borhubungan dongan pongoIoIaan fi|e. Monu |l|e Iordiri aIas haI-haI
yang diuraikan pada IaboI 5 borikuI ini.

TaboI 5. Fungsi Monu |i|e
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk
mombuka haIaman ne| baru
IorinIah yang digunakan unIuk
mombuka haIaman ne| yang sudah
disimpan soboIumnya
IorinIah yang digunakan unIuk
monuIup Iombar korja
IorinIah yang digunakan unIuk
mombuka siIe
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 15 dari 93
:e|c|ah 8erIaraf |nIernasicna|
IorinIah yang digunakan unIuk
monuIup siIe
IorinIah yang digunakan unIuk
monyimpan haIaman ne|
IorinIah yang digunakan unIuk
monyimpan haIaman ne| dongan
nama/oksIonsi yang Iain
IorinIah yang digunakan unIuk
monyimpan somua haIaman ne|
yang Iorbuka
IorinIah yang digunakan unIuk
moIakukan poncarian bordasarkan
kaIa kunci (|eqncrd) yang diborikan
IorinIah yang digunakan unIuk
moIakukan pubIikasi siIe ko serter.
IorinIah yang digunakan unIuk
mongimpor suaIu fi|e/fc|der ko
dirokIori siIe
IorinIah yang digunakan unIuk
mongokspor siIe ko suaIu dirokIori
IorinIah yang digunakan unIuk
moncoba haIaman ne| yang sodang
dibuaI pada boborapa |rcnser yang
IoIah Ior-insIa|| di kompuIor.
IorinIah yang digunakan unIuk
mongaIur prcperIq haIaman ne|
koIika mau dicoIak
IorinIah yang digunakan unIuk
moncoIak (prinI) haIaman ne|
IorinIah yang digunakan unIuk
mongirim posan tia e-mai|
IorinIah yang digunakan unIuk
mongaIur prcperIq haIaman ne|
soporIi IiI|e, descripIicn, |eqncrd, dan
sobagainya.
IorinIah yang digunakan unIuk
moIihaI/mombuka dafIar fi|e yang
IoIah dibuka soboIumnya
IorinIah yang digunakan unIuk
moIihaI/mombuka dafIar siIe yang
IoIah dibuka soboIumnya
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 16 dari 93
:e|c|ah 8erIaraf |nIernasicna|
IorinIah yang digunakan unIuk
monuIup apIikasi |rcnIPage
b. Menu Fdlt
Monu ini borisi porinIah yang borhubungan dongan ponyunIingan
haIaman ne|. Monu ini Iordiri aIas :haI-haI yang diuraikan pada IaboI
6 borikuI ini.
TaboI 6. Fungsi Monu |diI
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk undc (Iidak jadi)
moIakukan sosuaIu. Tqping yang IampiI pada
gambar akan borubah sosuai koadaan.
IorinIah yang digunakan unIuk monyaIin suaIu
Ioks aIau gambar namun sokaIigus monghapus
Ioks iIu di IompaI asaInya
IorinIah yang digunakan unIuk monyaIin (ccpq)
suaIu Ioks aIaupun gambar.
IorinIah yang digunakan unIuk monampiIkan
apa saja yang ada daIam c|ip|card (suaIu IompaI
yang digunakan unIuk monampung Ioks aIau
gambar yang kiIa dikopi)
IorinIah yang digunakan unIuk monompoIkan
Ioks aIau gambar yang IoIah dikopi
Borisi porinIah yang sama dongan Paste namun
ada piIihan pasIe Iambahan sohingga kiIa Iobih
bisa momiIih apa saja yang akan di-pasIe-kan
IorinIah yang digunakan unIuk momiIih somua
yang IampiI di Iombar korja
IorinIah yang digunakan unIuk moIakukan
poncarian Ioks di Iombar korja akIif
IorinIah yang digunakan unIuk moIakukan
poncarian suaIu Ioks komudian mongganIi Ioks
yang diIomukan dongan Ioks yang Iain
IorinIah yang digunakan unIuk mongarahkan
fokus Iayar ko IompaI yang IoIah di-|cc|mar|
soboIumnya
IorinIah yang digunakan unIuk mombuka quic|
Iag ediIcr
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 17 dari 93
:e|c|ah 8erIaraf |nIernasicna|
c. Menu Vleu
Monu ini borisi porinIah yang borhubungan dongan pongaIuran
IampiIan di |aqer dan pongaIuran IoIak monu-monu dan ikon-ikon
Iambahan. Monu Vleu Iordiri aIas haI-haI yang diuraikan pada IaboI
7 borikuI ini.

TaboI 7. Fungsi Monu Vien
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk monampiIkan
haIaman ne| akIif di Iombar korja |rcnIPage
IorinIah yang digunakan unIuk monampiIkan
foIdor di Iombar korja |rcnIPage
IorinIah yang digunakan unIuk monampiIkan
dirokIori ne| di serter
IorinIah yang digunakan unIuk monampiIkan
borbagai Iaporan yang borhubungan dongan
ne|siIe yang sodang dibangun
IorinIah yang digunakan unIuk monampiIkan
banIuk dari navigasi ne|siIe yang sodang
dibangun
IorinIah yang digunakan unIuk monampiIkan
bonIuk aIur IauIan (hqper|in|s) dari saIu haIaman
ko haIaman Iain di ne|siIe yang sodang dibangun
IorinIah yang digunakan unIuk monampiIkan
dafIar yang harus dikorjakan (Ias|s) koIika kiIa
mombangun ne|siIe, biasanya monu ini muncuI
koIika kiIa momuIai mombangun ne|siIe dari
sobuah Iemp|aIe |rcnIPage
IorinIah yang digunakan unIuk pongaIuran
IampiIan Ru|er dan Grid di Iombar korja |rcnIPage
IorinIah yang digunakan unIuk monampiIkan
Tracing |mage aIau gambar yang dijadikan
panduan daIam mombuaI haIaman ne|
IorinIah yang digunakan unIuk monampiIkan
dafIar fc|der daIam dirokIori |cca| ne|siIe yang
sodang dibangun
IorinIah yang digunakan unIuk monampiIkan
NatigaIicn Pane di Iombar korja |rcnIPage
IorinIah yang digunakan unIuk monampiIkan
Tas| Pane di Iombar korja |rcnIPage
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 18 dari 93
:e|c|ah 8erIaraf |nIernasicna|
d. Menu lnsert
Monu ini borisi porinIah yang borhubungan dongan ponyisipan objok
ko haIaman ne|. Monu ini Iordiri aIas haI-haI yang diuraikan pada
IaboI 8 borikuI ini.

TaboI 8. Fungsi Monu |nserI
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk monyisipkan |rea|
IorinIah yang digunakan unIuk monyisipkan garis
mondaIar
IorinIah yang digunakan unIuk monyisipkan |aqer
IorinIah yang digunakan unIuk monyisipkan frame
yang borupa |aqer
IorinIah yang digunakan unIuk monyisipkan IanggaI
dan wakIu
IorinIah yang digunakan unIuk monyisipkan simboI
IorinIah yang digunakan unIuk monyisipkan
komonIar
IorinIah yang digunakan unIuk monyisipkan
kompono wob yang IoIah disodiakan, soporIi marquee,
|uIIcn, hiI ccunIer, dan sobagainya
IorinIah yang digunakan unIuk monambahkan basis
daIa
IorinIah yang digunakan unIuk monambahkan
omponon form yang borupa IexI|cx, IexI area, |a|e|,
dan sobagainya
IorinIah yang digunakan unIuk monyisipkan gambar
IorinIah yang digunakan unIuk monambahkan
IomboI inIorakIif
IorinIah yang digunakan unIuk monambahkan fiIo
Iain
IorinIah yang digunakan unIuk momborikan
ponanda (|cc|mar|)
IorinIah yang digunakan unIuk mombuaI Iink yang
Iorhubung ko fiIo Iain
e. Menu |ormat
Monu ini borisi porinIah yang digunakan unIuk moIakukan
pongaIuran aIau fcrmaI objok yang ada di haIaman ne|. Monu |crmaI
Iordiri aIas haI-haI yang diuraikan pada IaboI 9 borikuI ini.

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 19 dari 93
:e|c|ah 8erIaraf |nIernasicna|
TaboI 9. Fungsi Monu |crmaI
Menu dan Ikon Fungsi Perintah
IongaIuran huruf
IongaIuran paragraf
Iomborian nomor aIau |u||eI
IongaIuran bonIuk garis dan modoI
powarnaan
IongaIuran posisi objok Ioks maupun
gambar
IongaIuran |ehaticrs dari haIaman ne|
IongaIuran |aqer yang digunakan
IongaIuran formaI-formaI IampiIan ne|
yang IoIah disodiakan
IongaIuran sIq|e dari Ioks
IongaIuran Iorhadap fiIo sIq|e sheeI (CSS)
yang digunakan
IongaIuran Iransisi dari haIaman ne|
IongaIuran |ac|grcund haIaman ne|
IongaIuran Iorhadap Iemp|aIe ne| yang
dinamik
Mombuang formaI yang sudah ada
IongaIuran prcperIq Iorhadap objok yang
IorpiIih
f. Menu Too|s
Monu ini borisi porangkaI aIau Icc| yang digunakan unIuk
moIakukan pongaIuran aIau fcrmaI pada haIaman ne|. Monu ini
Iordiri aIas haI-haI yang diuraikan pada IaboI 1O borikuI ini.

TaboI 1O. Fungsi Monu Tcc|s
Menu dan Ikon Fungsi Perintah
FasiIiIas pongocokan pongojaan bahasa
FasiIiIas kamus
IongaIuran kodo HTM|
IongaIuran kompabiIiIas |rcnser yang digunakan
IorinIah yang digunakan unIuk mongopIimaIkan
kodo HTM|
Ionambahan, pongubahan maupun ponghapusan
macrc
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 2O dari 93
:e|c|ah 8erIaraf |nIernasicna|
Komungkinan unIuk ponambahan fi|e Iain
IongaIuran Icc||ar dan ikon
Opsi-opsi unIuk pongaIuran IampiIan
Opsi-opsi yang ada unIuk pongaIuran haIaman
ne|
g. Menu Tab|e
Monu ini borisi porinIah yang digunakan unIuk moIakukan
pongaIuran Iorhadap objok IaboI yang ada di haIaman ne|. Monu ini
Iordiri aIas haI-haI yang diuraikan pada IaboI 11 borikuI ini.

TaboI 11. Fungsi Monu Ta||e
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk moIakukan
|aqcuI aIau pongaIuran IaboI dan soI
IorinIah yang digunakan unIuk monggambar
IaboI
IorinIah yang digunakan unIuk monambah IaboI,
koIom, baris, soI, dan juduI
IorinIah yang digunakan unIuk monghapus soI
IorinIah yang digunakan unIuk momiIih IaboI,
koIom, baris dan soI
IorinIah yang digunakan unIuk monggabungkan
boborapa soI monjadi saIu soI
IorinIah yang digunakan unIuk mombagi soI
monjadi boborapa soI
IorinIah yang digunakan unIuk mombagi IaboI
IorinIah yang digunakan unIuk mongaIur IaboI
sosuai dongan formaI yang IoIah disodiakan
IorinIah yang digunakan unIuk mongubah
ukuran baris IaboI pada ukuran yang sama
IorinIah yang digunakan unIuk mongubah
ukuran koIom IaboI pada ukuran yang sama
IorinIah yang digunakan unIuk mongubah
ukuran Iobar IaboI monyosuaikan isi
IorinIah yang digunakan unIuk mongubah
bonIuk IaboI ko formaI Ioks aIau sobaIiknya
IorinIah yang digunakan unIuk mongisi daIa
IorinIah yang digunakan unIuk mongaIur
prcperIq dari IaboI, soporIi cc|umn, rcn,
|ac|grcund, |crder, dan sobagainya
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 21 dari 93
:e|c|ah 8erIaraf |nIernasicna|
h. Menu Data
Monu ini borisi porinIah yang digunakan unIuk moIakukan
pongaIuran aIau fcrmaI objok yang ada di haIaman ne|. Monu ini
Iordiri aIas haI-haI yang diuraikan pada IaboI 12 borikuI ini.

TaboI 12. Fungsi Monu DaIa
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk momasukkan
daIa yang mungkin ada dan digunakan
i. Menu |rames
Monu ini borisi porinIah yang digunakan unIuk moIakukan
pongaIuran objok frame yang ada di haIaman ne|. Monu ini Iordiri
aIas haI-haI yang diuraikan pada IaboI 13 borikuI ini.

TaboI 13. Fungsi Monu |rames
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk mombagi frame
monjadi boborapa frame
IorinIah yang digunakan unIuk monghapus
frame
IorinIah yang digunakan unIuk mombuaI
haIaman baru
IorinIah yang digunakan unIuk monyimpan
frame
IorinIah yang digunakan unIuk monyimpan
frame dongan nama/oksIonsi yang Iain
IorinIah yang digunakan unIuk mongaIur
prcperIq dari frame, soporIi name, IiI|e, size, dan
sobagainya
j. Menu Wlndou
Monu ini borisi porinIah yang digunakan unIuk moIakukan
pongaIuran nindcn yang ada di haIaman ne|. Monu ini Iordiri aIas
haI-haI yang diuraikan pada IaboI 14 borikuI ini.

TaboI 14. Fungsi Monu indcn
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk mombuaI haIaman
ne| baru
IorinIah yang digunakan unIuk mombuka haIaman
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 22 dari 93
:e|c|ah 8erIaraf |nIernasicna|
ne| pada nindcn baru
IorinIah yang digunakan unIuk momiIih haIaman
ne| dongan nama nen_page_1.hIm
IorinIah yang digunakan unIuk monuIup somua
haIaman ne| yang Iorbuka
k. Menu He|p
Monu He|p digunakan sobagai porangkaI banIuan pagi pongguna
apIikasi MicrcscfI |rcnIPage. Monu ini Iordiri aIas haI-haI yang
diuraikan pada IaboI 15 borikuI ini.

TaboI 15. Fungsi Monu He|p
Menu dan Ikon Fungsi Perintah
IorinIah yang digunakan unIuk
monampiIkan banIuan
IorinIah yang digunakan unIuk
monampiIkan asisIon cffice
Sambungan Iangsung (inIerneI) ko
MicrcscfI Office
KumpuIan dari apIikasi-apIikasi
Iambahan dari pombuaI MicrcscfI
|rcnIPage
Cara unIuk monghubungi pombuaI
dari MicrcscfI |rcnIPage
IorinIah yang digunakan unIuk
moIakukan cok Iorhadap haI-haI
yang bisa di-updaIe
IorinIah yang digunakan unIuk
mondoIoksi korusakan dan
momporbaiki MicrcscfI |rcnIPage
IorinIah yang digunakan unIuk
mongakifkan MicrcscfI |rcnIPage
Umpan baIik konsumon pongguna
MicrcscfI |rcnIPage
SogaIa sosuaIu IonIang MicrcscfI
|rcnIPage
B. Standard Too|bar
:Iandard Tcc||ar morupakan kumpuIan ikon yang borfungsi unIuk
pongoIahan Iayar uIama MicrcscfI |rcnIPage, misaInya unIuk mombuaI
dokumon baru, mombuka dokumon yang IoIah disimpan, monyimpan
dokumon dan Iain-Iain.

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 23 dari 93
:e|c|ah 8erIaraf |nIernasicna|
TaboI 16. Fungsi Ikon pada :Iandard Tcc||ar
Ikon Nama Perintah Keterangan
Nen MombuaI dokumon baru
Open Mombuka dokumon
:ate Monyimpan dokumon
|ind Moncari kaIa
Pu||ish :iIe Momasang hasiI dosain ne| di inIerneI
PrinI MoncoIak dokumon
Pretien MoIihaI hasiI dosain ne|
:pe||ing Cok spe||ing kaIa
CuI MomoIong objok
Ccpq MonyaIin objok
PasIe MoIoIakkan daIa hasiI monyaIin
|crmaI PainIer IongaIuran aIaI warna
Undc KombaIi ko kondisi soboIumnya
Redc Monuju kondisi borikuInya
e| CcmpcnenI Komponon dari ne|
|nserI Ta||e Monyisipkan IaboI
|nserI |aqer Monyisipkan |aqer
|nserI PicIure |rcm
|i|e
Monyisipkan gambar dari fi|e yang
Iorsimpan
Oraning Monggambar
|nserI Hqper|in| Monyisipkan hqper|in| (porIauIan
haIaman)
Refresh MonampiIkan uIang
:Icp MonghonIikan prosos
:hcn A|| MonampiIkan somua formaI
:hcn |aqer Anchcrs MonampiIkan poIunjuk |aqer
MicrcscfI Office
|rcnIPage He|p
BanIuan informasi
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 24 dari 93
:e|c|ah 8erIaraf |nIernasicna|
C. |ormattlng Too|bar
|crmaIIing Tcc||ar adaIah kumpuIan ikon yang disodiakan oIoh
|rcnIPage unIuk momformaI haIaman ne| yang sodang dibuaI/diodiI
sohingga sosuai dongan apa yang diharapkan.

TaboI 17. Fungsi Ikon pada |crmaIIing Tcc||ar
Ikon Nama Perintah Keterangan
:Iq|e Jonis sIq|e
|cnI Jonis huruf
|cnI :ize Ukuran huruf
8c|d MonobaIkan Ioks/huruf
|Ia|ic MombonIuk miring
Ioks/huruf
Under|ine Mombori garis bawah
Ioks/huruf
A|ign |efI MoraIakirikan objok
A|ign CenIer MoraIaIongahkan objok
A|ign RighI MoraIakanankan objok
]usIifq MoraIa kanan-kiri objok
|ncrease Momporbosar huruf
Oecrease MomporkociI huruf
Num|ering Mombori ponomoran
8u||eIs Mombori |u||eI
Oecrease |ndenI Mongurangi paragraf
|ncrease |ndenI Monambah paragraf
OuIside |crder MombuaI garis pada IaboI
|cnI cc|cr Morubah warna huruf
D. Vleus Bar
Viens 8ar morupakan kumpuIan IomboI yang borguna unIuk moIihaI
haIaman ne| yang sodang kiIa buaI dari sisi yang borboda, misaI dari
sisi dosain, sisi kodo, aIaupun koduanya.
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 25 dari 93
:e|c|ah 8erIaraf |nIernasicna|
TaboI 18. Fungsi Ikon pada Viens 8ar
Ikon Nama Perintah Keterangan
:hcn Oesign Vien MoIihaI IampiIan dosain
:hcn :p|iI Vien TampiIan dibagi monjadi 2
(dosain dan kodo)
:hcn Ccde Vien MoIihaI IampiIan kodo
program
:hcn Pretien Vien MoIihaI hasiI dosain ne|
daIam |rcnser inIerna|
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 26 dari 93
:e|c|ah 8erIaraf |nIernasicna|
BAB III
PENGGUNAAN MENU DAN IKON
PADA PERANGKAT LUNAK
DESAIN WFB
A. Pengantar
Iada maIori ini akan dijoIaskan bagaimana cara monggunakan monu dan
ikon pada porangkaI Iunak dosain ne|. IorIu dikoIahui bahwa
pongombangan scfInare soIaIu moncipIakan inovasi-inovasi baru daIam
monampiIkan sobuah IampiIan, khususnya IampiIan monu dan ikon. HaI
ini borIujuan unIuk momudahkan si pongguna monjaIankan porinIah yang
dimiIiki oIoh program IorsobuI. OIoh sobab iIu, maIori yang diborikan
borupa cara bagaimana monggunakan monu dan ikon dongan pondokaIan
fungsi aIaI (yaiIu fungsi mcuse dan fungsi |eq|card).

B. Penggunaan Menu dan Ikon
1. Penggunaan Menu Bar
Ionggunaan monu pada Menu 8ar dapaI monggunakan 2 (dua) cara,
yaiIu monggunakan mcuse dan monggunakan fungsi IomboI |eq|card.
a. Monggunakan Mcuse.
1) Arahkan pcinIer mcuse pada saIah saIu Menu 8ar.
Sobagai conIoh arahkan poinIor mcuse pada monu |l|e
2) KIik monu |l|e, maka akan muncuI sub monu |l|e borisi porinIah-
porinIah pongoIoIaan fi|e.
3) KIik saIah saIu porinIah yang diinginkan.
KompoIonsi Dasar : Monggunakan monu dan ikon pokok pada
porangkaI Iunak dosain ne|
IndikaIor : Monggunakan monu dan ikon pada :
Menu 8ar
:Iandard Tcc||ar
|crmaIIing Tcc||ar
Viens 8ar
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 27 dari 93
:e|c|ah 8erIaraf |nIernasicna|
Sobagai conIoh kIik submonu porinIah Neu, maka porinIah yang
diIakukan adaIah mombuaI dokumon baru
4) Lakukan haI yang sama unIuk monu yang Iain.
b. Monggunakan fungsi IomboI |eq|card :
1) Monggunakan fungsi IomboI AIt
Jika kiIa moIihaI Menu 8ar, IorIihaI pada soIiap monu IordapaI
huruf yang borgaris bawah, unIuk moIaksanakan porinIah
IorsobuI dapaI monggunakan fungsi IomboI AIt, sobagai conIoh
monu |l|e, maka huruf F yang borgaris bawah dan unIuk
moIakukan porinIahnya adaIah sobagai borikuI.
a) Tokan IomboI AIt (Iidak diIopas) pada |eq|card dan IomboI
huruf F socara borsamaan.
b) Tokan IomboI huruf yang borgaris bawah pada submonu
porinIah.
c) Sobagai conIoh porinIah Neu maka yang diIokan IomboI huruf
N.
d) Maka porinIah yang diIakukan adaIah mombuaI dokumon
baru.
o) Lakukan haI yang sama unIuk monu yang Iain.
2) Monggunakan fungsi IomboI CtrI
Ionggunaan monu fungsi IomboI CtrI pada dasarnya hampir
sama dongan monggunakan fungsi IomboI AIt, akan IoIapi Iidak
somua monu dapaI monggunakan fungsi IomboI CtrI. BorikuI ini
boborapa conIoh monu porinIah yang dapaI monggunakan fungsi
IomboI CtrI :

TaboI 19. Fungsi TomboI CtrI
Fungsi CtrI Fungsi Perintah
CtrI +N MombuaI Iombar korja baru
CtrI +O Mombuka Iombar korja baru
CtrI +S Monyimpan Iombar korja
CtrI +P MoncoIak Iombar korja
CtrI +Z
KombaIi ko kondisi
soboIumnya
CtrI +Y
Monuju ko kondisi borikuInya
CtrI +X MomoIong objok
CtrI +C
MonyaIin objok
CtrI +V
MoIoIakkan hasiI saIinan objok
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 28 dari 93
:e|c|ah 8erIaraf |nIernasicna|
Fungsi IomboI CtrI dapaI diIihaI pada IampiIan submonu disoIiap
Menu 8ar.
IorhaIikan IampiIan submonu pada monu |l|e borikuI:
Gambar 9. Fungsi TomboI CtrI pada Menu 8ar
3) Ionggunaan IorinIah Ikon
UnIuk dapaI monggunakan porinIah ikon yaiIu dongan
moIakukan cara sobagai borikuI.
a) Arahkan pcinIer mcuse pada ikon porinIah.
b) Sobagai conIoh arahkan poinIor mcuse pada ikon pada
:Iandard Tcc||ar.
c) Lakukan kIik monggunakan IomboI mcuse soboIah kiri.
d) Maka porinIah yang diIakukan adaIah mombuaI dokumon
baru.

2. Penggunaan Ikon pada Standard Too|bar
UnIuk dapaI monggunakan porinIah ikon pada :Iandard Tcc||ar yaiIu
dongan moIakukan cara sobagai borikuI.
IorinIah Monu yang monggunakan
fungsi IomboI CtrI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 29 dari 93
:e|c|ah 8erIaraf |nIernasicna|
a. Arahkan pcinIer mcuse pada ikon :Iandard Tcc||ar.
Sobagai conIoh arahkan pcinIer mcuse pada ikon pada :Iandard
Tcc||ar.
b. Lakukan kIik monggunakan IomboI mcuse soboIah kiri.
c. Maka porinIah yang diIakukan adaIah mombuaI Iombar korja baru.

3. Penggunaan Ikon pada |ormattlng Too|bar
UnIuk dapaI monggunakan porinIah ikon pada |crmaIIing Tcc||ar yaiIu
dongan moIakukan cara sobagai borikuI :
a. BIok IorIobih dahuIu kaIa aIau kaIimaI yang akan diformaI.
b. Arahkan poinIor mcuse pada ikon porinIah.
Sobagai conIoh arahkan poinIor mcuse pada ikon pada |crmaIIing
Tcc||ar
c. Lakukan kIik monggunakan IomboI mcuse soboIah kiri.
d. Maka porinIah yang diIakukan adaIah unIuk monobaIkan kaIa/huruf
yang dibIok Iadi.

4. Penggunaan Ikon pada Vleus Bar
UnIuk dapaI monggunakan porinIah ikon pada Viens 8ar yaiIu dongan
moIakukan cara sobagai borikuI :
a. Arahkan pcinIer mcuse pada ikon Viens 8ar.
Sobagai conIoh arahkan pcinIer mcuse pada ikon pada Viens
8ar.
b. Lakukan kIik monggunakan IomboI mcuse soboIah kiri.
c. Maka porinIah yang diIakukan adaIah monampiIkan hasiI IampiIan
dosain ne| pada |rcnser inIerna| MicrcscfI frcnIPage.
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 3O dari 93
:e|c|ah 8erIaraf |nIernasicna|
BAB IV
MEMBUAT
DESAIN WFB
SEDERHANA

A. Pengantar
Iada bab soboIumnya kiIa boIajar mongonai kogunaan monu-monu dan
ikon-ikon di MicrcscfI |rcnIPage, maka di bab ini akan dijoIaskan bagaimana
mombuaI sobuah ne|siIe sodorhana. IonjoIasan pada bab ini borbasis
gambar sohingga momudahkan bagi yang mompoIajarinya.

KompoIonsi Dasar : MombuaI dosain ne| sodorhana

IndikaIor : MomuIai Mongoporasikan MicrcscfI
|rcnIPage
MombuaI :iIe Baru
MombuaI Hcme Page
MombuaI CSS (Cascading :Iq|e :heeI)
MonginIograsikan :Iq|e :heeI
Monambahkan FormaI
Mongubah Ukuran Huruf
Mongubah KoIobaIan Huruf
IoraIaan Toks (A|ign TexI)
|ndenI TexI
MombuaI |isI (DafIar)
MombuaI |in| ko HaIaman Baru
MombuaI |in| AnIar HaIaman
Momasukkan Gambar
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 31 dari 93
:e|c|ah 8erIaraf |nIernasicna|
B. MemuIai Mengoperasikan Mlcrosoft |rontPage 2003

Gambar 1O. MonjaIankan ApIikasi |rcnIPage
`
1. KIik Start
2. SoIoIah muncuI sojumIah monu, kIik A|| Programs
3. KIik MicrcscfI Office
4. KIik Mlcrosoft Offlce |rontPage 2003
5. Jika pada des|Icp IordapaI shcrIcuI MicrcscfI |rcnIPage 2003 dapaI
Iangsung moIakukan dcu||e kIik pada shcrIcuI IorsobuI

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 32 dari 93
:e|c|ah 8erIaraf |nIernasicna|
C. Membuat Slte Baru
1. SoIoIah |rcnIPage 2OO3 Iorbuka, akan muncuI IampiIan soporIi di bawah
ini.

Gambar 11. Lombar Korja MicrcscfI |rcnIPage
2. Iada Menu 8ar, kIik |l|e > Neu
Gambar 12. MomiIih Submou Nen pada Monu |i|e
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 33 dari 93
:e|c|ah 8erIaraf |nIernasicna|
3. Iada Tas|s Pane kIik One page e| siIe.
Gambar 13. MombuaI e| SaIu HaIaman

4. KoIika window e| :iIe Temp|aIes muncuI, soIocI (kIik sokaIi) One Page
e| :iIe soporIi pada gambar di bawah ini.

Gambar 14. MomiIih Temp|aIe
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 34 dari 93
:e|c|ah 8erIaraf |nIernasicna|
5. Komudian kIik 8rcnse.
Gambar 15. MomiIih TompaI Ionyimpanan |i|e e|
6. Akan muncuI window baru soporIi pada gambar borikuI, komudian kIik
Mq OccumenIs.
Gambar 16. MomiIih TompaI Ionyimpanan |i|e e|
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 35 dari 93
:e|c|ah 8erIaraf |nIernasicna|
7. SoIoIah masuk ko Mq OccumenIs, kIik ikon Nen |c|der unIuk mombuaI
foIdor baru di daIam Mq OccumenIs.
Gambar 17. MombuaI |c|der Baru

8. SoIanjuInya muncuI window Nen |c|der, IaIu masukkan nama unIuk
foIdor baru, misaInya SokoIahku (jika ne|siIe yang akan dibuaI
borIomakan sokoIah). Komudian kIik IomboI OK unIuk moIanjuIkan.

Gambar 18. Mombori Nama FoIdor Baru

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 36 dari 93
:e|c|ah 8erIaraf |nIernasicna|
9. SoIoIah fc|der SokoIahku Iorbuka kIik Open.
Gambar 19. Mombuka |c|der SokoIahku

1O. Komudian kIik OK di window e| :iIeTemp|aIes.
Gambar 2O. Monokan TomboI OK unIuk MoIanjuIkan
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 37 dari 93
:e|c|ah 8erIaraf |nIernasicna|
11. SoIoIah iIu dcu||e kIik pada index.hIm soporIi pada gambar borikuI ini.
Gambar 21. Ocu||e KIik pada indox.hIm

12. Akan muncuI Iab index.hIm.
Gambar 22. HaIaman index.hIm Sudah Tobuka
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 38 dari 93
:e|c|ah 8erIaraf |nIernasicna|
13. UnIuk Iobih momudahkan, pada Menu 8ar kIik Vleu > |o|der |lst
Gambar 23. Submonu |c|der |isI pada Monu |i|e
D. Membuat Home Page
1. Iada haIaman yang kosong soporIi pada gambar koIik Hcme page
SokoIahku.

Gambar 24. Iongisian TuIisan pada HaIaman e|
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 39 dari 93
:e|c|ah 8erIaraf |nIernasicna|
IngaIIah nama haIaman ini yaiIu index.hIm, ini adaIah hcme page dari
ne|siIe SokoIahku.

2. KIik kanan pada bagian kosong di haIaman ne| yang sodang kiIa buaI,
komudian kIik Page PrcperIies.
Gambar 25. MoIakukan IongaIuran HaIaman
Hcme page dari soIiap ne|siIe bornama index.hIm
aIau index.hIm|
HaI ini dikaronakan index.hIm aIau index.hIm|
IorsobuI muncuI socara oIomaIis soIiap kaIi sobuah
aIamaI ne|siIe dibuka di |rcnser.
Jika kiIa mombuka www.sokoIahku.com yang
muncuI adaIah haIaman hcme page karona fiIo hcme
page bornama index.hIm
Jika fiIo Hcme page bornama soIain index.hIm
misaInya hcmepage.hIm maka unIuk mombuka
haIaman hcme page kiIa harus mongoIikkan aIamaI
www.sokoIahku.com/homopago.hIm
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 4O dari 93
:e|c|ah 8erIaraf |nIernasicna|
3. Sosudah nindcn Page PrcperIies muncuI, pada Iab Genera| > Tlt|e, koIik
Homo pago SokoIahku soporIi pada gambar di bawah ini. KIik IomboI
OK unIuk moIanjuIkan.

Gambar 26. Iongisian PrcperIq TiI|e
Gambar 27. TuIisan TiI|e pada 8rcnser
TiI|e dari sobuah haIaman ne| adaIah apa yang
IorIampiI di soboIah pojok kiri aIas dari |rcnser
Title
Title
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 41 dari 93
:e|c|ah 8erIaraf |nIernasicna|
4. Simpan haIaman ne| dongan cara mongkIik ikon :ate.
Gambar 28. MoIakukan Ionyimpanan

KiIa IoIah mombuaI sobuah hcme page dari ne|siIe SokoIahku
Nama fiIo hcme page adaIah index.hIm
TorIoIak di fc|der SekoIahku di Mq OccumenIs

E. Membuat CSS (Cascadlng St|e Sheet)
Cascading :Iq|e :heeI morupakan suaIu bonIuk fasiIiIas yang Iorsodia dia
MicrcscfI |rcnIPage yang borguna unIuk moIakukan formaI borbagai objok
yang digunakan daIam dosain ne|. Langkah yang diIakukan dijoIaskan
sobagai borikuI.

1. Iada Menu 8ar kIik |i|e > Nen
Gambar 29. MomiIih Submou Nen pada Monu |i|e
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 42 dari 93
:e|c|ah 8erIaraf |nIernasicna|
2. Komudian kIik Mcre page Iemp|aIes.
Gambar 3O. MomiIih Temp|aIe HaIaman

3. SoIoIah window Page Temp|aIes muncuI, kIik Iab :Iq|e :heeIs.
Gambar 31. MomiIih :Iq|e :heeI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 43 dari 93
:e|c|ah 8erIaraf |nIernasicna|
4. Ocu||e kIik pada ikon Ncrma| :Iq|e :heeI.
Gambar 32. MomiIih Ncrma| :Iq|e :heeI
Sobuah :Iq|e :heeI kosong akan Iorbuka.

Gambar 33. :Iq|e :heeI Baru IoIah Torbuka

5. Iada Menu 8ar, kIik |ormat > SIyIo.
Gambar 34. MomiIih Submonu :Iq|e pada Monu |crmaI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 44 dari 93
:e|c|ah 8erIaraf |nIernasicna|
6. SoIoIah window :Iq|e muncuI, kIik h1.
Gambar 35. MomiIih :Iq|e h1

7. KIik Mcdifq unIuk moIanjuIkan.
Gambar 36. KIik TomboI Mcdifq unIuk MoIanjuIkan
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 45 dari 93
:e|c|ah 8erIaraf |nIernasicna|
8. Iada window Mcdifq :Iq|e kIik |crmaI > |cnI.
Gambar 37. MoIakukan |crmaI |cnI
9. Iada window |cnI, kIik Verdana pada dafIar |cnI.
Gambar 38. MomiIih Huruf dongan Jonis Vordana
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 46 dari 93
:e|c|ah 8erIaraf |nIernasicna|
1O. Dibawah |cnI :Iq|e, kIik BoId, komudian kIik IomboI OK unIuk
moIanjuIkan.
Gambar 39. MomiIih 8c|d unIuk MonobaIkan Huruf

11. KIik OK pada window Mcdifq :Iq|e.
Gambar 4O. KIik TomboI OK unIuk MoIanjuIkan
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 47 dari 93
:e|c|ah 8erIaraf |nIernasicna|
12. KIik OK pada window :Iq|e.
Gambar 41. KIik IomboI OK unIuk MoIanjuIkan

13. KIik ikon :ate pada :Iandard Tcc||ar.
Gambar 42. KIik Ikon :ate unIuk Monyimpan

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 48 dari 93
:e|c|ah 8erIaraf |nIernasicna|
14. SoIanjuInya kan muncuI window :ate As, masukkan nama format.css
komudian kIik :ate.
Gambar 43. KIik TomboI :ate unIuk Monyimpan

15. TampiIan akan monjadi soporIi gambar borikuI.

Gambar 44. TampiIan HasiI formaI.css

F. Mengintegrasikan St|e Sheet
1. KIik Iab index.hIm
Gambar 45. TampiIan Iab index.hIm
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 49 dari 93
:e|c|ah 8erIaraf |nIernasicna|
2. Iada Menu 8ar kIik |ormat > St|e Sheet Llnks.
Gambar 46. IomiIihan :Iq|e :heeI |in|s
3. Iada window |in| :Iq|e :heeI piIih A|| pages komudian kIik Add.
Gambar 47. IomiIihan A|| pages
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 5O dari 93
:e|c|ah 8erIaraf |nIernasicna|
4. Iada window :e|ecI :Iq|e :heeI piIih fcrmaI.css. KIik IomboI OK unIuk
moIanjuIkan.

Gambar 48. MomiIih fcrmaI.css yang sudah dibuaI

5. Iada window |in| :Iq|e :heeI kIik OK.
Gambar 49. KIik TomboI OK unIuk MoIanjuIkan

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 51 dari 93
:e|c|ah 8erIaraf |nIernasicna|
6. KoIika ada posan konfirmasi piIih CcnIinue.
Gambar 5O. KIik TomboI CcnIinue unIuk MoIanjuIkan

G. Menambahkan Format
1. KIik pada kaIimaI Homo pago SokoIahku unIuk monompaIkan curscr
di baris yang sama dongan kaIimaI.

Gambar 51. MonompaIkan curscr pada KaIimaI

KIik drcpdcnn |isI soporIi pada gambar borikuI ini.

Gambar 52. MonampiIkan drcpdcnn |isI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 52 dari 93
:e|c|ah 8erIaraf |nIernasicna|
2. Iada monu piIih Heading 1.
Gambar 53. MomiIih heading 1 pada drcpdcnn |isI
3. SoIoIah iIu IampiIan akan soporIi pada gambar borikuI ini.

Gambar 54. TampiIan HasiI FormaI

4. Iada Icc||ar kIik ikon :ate.
Gambar 55. KIik Ikon :ate pada :Iandard Tcc||ar
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 53 dari 93
:e|c|ah 8erIaraf |nIernasicna|
H. Mengubah Ukuran Huruf
1. KIik pada Iab format.css.
Gambar 56. MomiIih Iab fcrmaI.css
2. Iada Menu Bar kIik |ormat > St|e
Gambar 57. MombuaI :Iq|e Baru
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 54 dari 93
:e|c|ah 8erIaraf |nIernasicna|
3. Iada window :Iq|e kIik Mcdifq.
Gambar 58. KIik TomboI Mcdifq unIuk MoIanjuIkan

4. Iada window Mcdifq :Iq|e kIik |crmaI > |cnI
Gambar 59. MoIakukan FormaI FonI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 55 dari 93
:e|c|ah 8erIaraf |nIernasicna|
5. Iada window |cnI koIikkan 16pt. KIik IomboI OK unIuk moIanjuIkan.

Gambar 6O. MomiIih Ukuran Huruf 16pI

6. KIik OK
Gambar 61. KIik TomboI OK unIuk MoIanjuIkan
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 56 dari 93
:e|c|ah 8erIaraf |nIernasicna|
7. KIik OK di window :Iq|e
Gambar 62. KIik TomboI OK unIuk MoIanjuIkan

8. format.css akan IorIihaI soporIi pada gambar borikuI ini.
Gambar 62. TampiIan HasiI fcrmaI.css
9. KIik ikon :ate.
Gambar 63. KIik Ikon :ate pada :Iandard Tcc||ar
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 57 dari 93
:e|c|ah 8erIaraf |nIernasicna|
1O. KIik Iab index.hIm, maka sokarang akan koIihaIan soporIi gambar di
bawah ini.

Gambar 64. TampiIan HasiI fcrmaI.css di 8rcnser

I. Mengubah KetebaIan Huruf
1. IasIikan cursor borada di bagian akhir kaIimaI Home page
SekoIahku. Komudian Iokan IomboI Enter unIuk mombuaI poragraf
baru.

Gambar 65. IonompaIan curscr di Akhir KaIimaI
2. SoIoIah mombuaI paragraf baru, koIik kaIimaI :

"Berikut ini adaIah nama teman-temanku :"

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 58 dari 93
:e|c|ah 8erIaraf |nIernasicna|
Gambar 66. TampiIan HasiI soIoIah Ada Ionambahan KaIimaI
3. :ate haIaman iIu dongan mongokIik ikon :ate soporIi yang dijoIaskan
pada bab soboIumnya.

4. SoIanjuInya kIik Iab fcrmaI.css.
Gambar 67. Iosisi Iab fcrmaI.css

5. Iada fcrmaI.css kIik baris di bawah h1 unIuk monompaIkan curscr mcuse.
Gambar 68. Iosisi curscr di bawah h1
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 59 dari 93
:e|c|ah 8erIaraf |nIernasicna|
6. Iada Menu 8ar kIik |ormat > St|e
Gambar 69. MomiIih Submonu :Iq|e

7. Iada window :Iq|e, kIik HTML tags soporIi pada gambar borikuI.

Gambar 7O. MomiIih HTM| Iags pada drcpdcnn |isI

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 6O dari 93
:e|c|ah 8erIaraf |nIernasicna|
8. SoIoIah HTML tags dipiIih, kIik p.
Gambar 71. IiIih :Iq|es p

9. KIik IomboI Mcdifq unIuk moIanjuIkan.
Gambar 72. KIik TomboI Mcdifq unIuk MoIanjuIkan
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 61 dari 93
:e|c|ah 8erIaraf |nIernasicna|
1O. Iada window Mcdifq :Iq|e kIik |crmaI, komudian piIih |cnI.
Gambar 73. MoIakukan |crmaI |cnI

11. SoIoIah window |cnI muncuI, piIih fonI AriaI dan ukuran 10pt soporIi
gambar di bawah ini.
Gambar 74. MomiIih fcnI AriaI dongan ukuran 1OpI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 62 dari 93
:e|c|ah 8erIaraf |nIernasicna|
12. Komudian kIik OK pada window |cnI, kIik OK pada window Mcdifq
:Iq|e, kIik OK pada window :Iq|e.
13. SoIanjuInya akan IorIihaI soporIi gambar di bawah ini.

Gambar 75. TampiIan HasiI fcrmaI.css

14. KIik ikon :ate unIuk monyimpan :Iq|e :heeI.
Gambar 76. KIik ikon :ate pada :Iandard Tcc||ar

15. kIik Iab index.hIm IaIu akan IorIihaI soporIi gambar di bawah ini.

Gambar 77. TampiIan HasiI di 8rcnser

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 63 dari 93
:e|c|ah 8erIaraf |nIernasicna|
16. High|ighI kaIa nama teman-temanku
Gambar 78. High|ighI kaIa nama teman-temanku
17. Iada |crmaIIing Tcc||ar kIik ikon 8c|d.
Gambar 79. KIik ikon 8c|d pada |crmaIIing Tcc||ar
18. Komudian kIik pada bagian yang kosong di Iombar korja unIuk
monghiIangkan high|ighI, maka IampiIan akan monjadi soporIi pada
gambar borikuI.

Gambar 8O. TampiIan HasiI di 8rcnser
19. Simpan haIaman ne| dongan mongkIik ikon :ate
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 64 dari 93
:e|c|ah 8erIaraf |nIernasicna|
J. Perataan Teks (A|lgn Text)
1. TompaIkan curscr pada kaIimaI dongan cara mongokIik pada kaIimaI
yang akan diraIakan.

2. Iada |crmaIIing Tcc||ar kIik ikon A|ign RighI.
Gambar 81. KIik Ikon A|ign RighI unIuk MoraIa Kanankan KaIimaI

3. HaIaman ne| akan borbonIuk soporIi di bawah ini.

Gambar 82. TampiIan HasiI di 8rcnser
4. KIik ikon A|ign CenIer
Gambar 83. KIik Ikon CenIer unIuk MombuaI Tongah KaIimaI

5. HaIaman ne| akan IorIihaI soporIi di bawah ini.

Gambar 84. TampiIan HasiI di 8rcnser
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 65 dari 93
:e|c|ah 8erIaraf |nIernasicna|
6. KIik ikon A|ign RighI.
Gambar 85. KIik Ikon A|ign |efI unIuk MoraIa Kirikan KaIimaI

7. HaIaman ne| akan IorIihaI soporIi di bawah ini.

Gambar 86. TampiIan HasiI di Browsor

8. Simpan haIaman ne| dongan mongkIik ikon :ate
K. lndent Text
1. BuaIIah 3 baris IuIisan nama soporIi di bawah ini.

Andi Supandi

Ani Widiawati

Tono Sutono

Gambar 87. Ionambahan 3 Baris TuIisan
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 66 dari 93
:e|c|ah 8erIaraf |nIernasicna|
2. High|ighI koIiga baris nama yang baru dibuaI.

Gambar 88. TampiIan HasiI soIoIah Irosos High|ighI
3. Komudian kIik ikon |ncrease |ndenI.
Gambar 89. KIik Ikon |ncrease |ndenI
4. TampiIan haIaman akan soporIi ini :

Gambar 9O. TampiIan HasiI di 8rcnser
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 67 dari 93
:e|c|ah 8erIaraf |nIernasicna|
5. Simpan haIaman dongan mongokIik ikon :ate
L. Membuat Llst (Daftar)
1. High|ighI koIiga baris IuIisan nama komudian kIik ikon 8u||eIs.
Gambar 91. KIik Ikon 8u||eIs pada |crmaIIing Tcc||ar
2. TampiIan haIaman ne| akan monjadi soporIi dibawah ini.

Gambar 92. TampiIan HasiI di 8rcnser
3. Simpan haIaman dongan mongkIik ikon :ate
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 68 dari 93
:e|c|ah 8erIaraf |nIernasicna|
M. Membuat Llnk ke HaIaman Baru
1. BuaIIah sobuah haIaman ne| baru, IaIu pada :Iandard Tcc||ar kIik ikon
Nen.
Gambar 93. KIik Ikon Nen pada :Iandard Tcc||ar
2. TuIup (c|cse) |aqcuI Ta||es and Ce||s pano jika Iorbuka.

Gambar 94. KIik TomboI C|cse unIuk MonuIup

3. KIik kanan di IompaI kosong pada haIaman ne| baru, komudian kIik
Page PrcperIies.
Gambar 95. MomiIih Submonu Page PrcperIies
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 69 dari 93
:e|c|ah 8erIaraf |nIernasicna|
4. Iada TiI|e masukkan HaIaman Andi.
Gambar 96. Mongisi TiI|e
5. Komudian kIik OK
6. Simpan haIaman ne| baru dongan mongokIik ikon :ate.
7. KoIika window :ate As muncuI, pada |i|e name koIik andi.htm
Gambar 97. Mongisi |i|e Name
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 7O dari 93
:e|c|ah 8erIaraf |nIernasicna|
8. KIik :ate.
Gambar 98. KIik TomboI :ate unIuk Monyimpan

9. KoIik kaIimaI borikuI.
"Ini adaIah haIaman Andi Supandi

Gambar 99. MongoIik KaIimaI

Nama sobuah fiIo daIam ne|siIe yang baik adaIah
nama fi|e Ianpa spasi dan somua hurufnya |cnercase
(huruf kociI)
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 71 dari 93
:e|c|ah 8erIaraf |nIernasicna|
1O. Iada Menu 8ar kIik |ormat > St|e Sheet Llnks
Gambar 1OO. MomiIih Submonu :Iq|e :heeI |in|s
11. Iada window |in| :Iq|e :heeI kIik Add.
Gambar 1O1. KIik TomboI Add unIuk Monambah

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 72 dari 93
:e|c|ah 8erIaraf |nIernasicna|
12. Iada window :e|ecI :Iq|e :heeI kIik fcrmaI.css.
Gambar 1O2. KIik fcrmaI.css
13. Komudian kIik OK, haIaman ne| yang baru dibuaI IoIah Iorsambung
dongan :Iq|e :heeI ne|siIe, fcrmaI.css.
14. Simpan haIaman andi.htm dongan mongokIik ikon :ate.
15. KIik Iab fcrmaI.css. Komudian kIik pada soboIah bawah p unIuk
monompaIkan curscr.
Gambar 1O3. KIik Iab fcrmaI.css
Gambar 1O4. Iosisi curscr pada Iab fcrmaI.css
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 73 dari 93
:e|c|ah 8erIaraf |nIernasicna|
16. Iada Menu 8ar kIik |ormat, komudian St|e.
Gambar 1O5. MomiIih Submonu :Iq|e
17. Iada window :Iq|e, kIik bagian |isI, piIih HTML tags, komudian piIih
sIq|e h2.
Gambar 1O6. MomiIih :Iq|e h2
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 74 dari 93
:e|c|ah 8erIaraf |nIernasicna|
18. KIik Mcdifq.
Gambar 1O7. KIik TomboI Mcdifq unIuk MoIanjuIkan

19. Iada window Mcdifq :Iq|e kIik |crmaI, komudian |cnI.
Gambar 1O8. MoIakukan |crmaI |cnI
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 75 dari 93
:e|c|ah 8erIaraf |nIernasicna|
2O. Iada window |cnI, kIik Verdana, komudian piIih 14pt.
Gambar 1O9. MomiIih |cnI Verdana dongan Ukuran 14pI

21. KIik OK pada window |cnI, window Mcdifq :Iq|e, window :Iq|e
fcrmaI.css akan IorIihaI soporIi gambar di bawah ini.

Gambar 11O. TampiIan HasiI fcrmaI.css
22. Simpan fcrmaI.css dongan mongokIik ikon sate
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 76 dari 93
:e|c|ah 8erIaraf |nIernasicna|
23. KIik Iab andi.hIm.
Gambar 111. MomiIih Iab andi.hIm
24. TompaIkan curscr di baris porIama, komudian kIik Heading 2 pada :Iq|e
|isI.
Gambar 112. MomiIih Hoading 2 pada :Iq|e |isI
25. HaIaman ne| akan IorIihaI soporIi dibawah ini.
Gambar 113. TampiIan HasiI di 8rcnser
26. Simpan haIaman ne| dongan mongkIik ikon :ate
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 77 dari 93
:e|c|ah 8erIaraf |nIernasicna|
N. Membuat Llnk Antar HaIaman
1. KIik Iab index.hIm.
2. High|ighI pada IuIisan Andi Supandi.
Gambar 114. High|ighI TuIisan

3. Iada :Iandard Tcc||ar kIik ikon |nserI Hqper|in|.
Gambar 115. KIik Ikon |nserI Hqper|in| pada :Iandard Tcc||ar
4. Iada window |nserI Hqper|in|, kIik andi.
Gambar 116. MomiIih |i|e dongan nama andi

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 78 dari 93
:e|c|ah 8erIaraf |nIernasicna|
5. Komudian kIik OK.
6. KIik pada haIaman ne| unIuk monghiIangkan high|ighI, dan IampiIan
haIaman ne| akan IorIihaI soporIi dibawah dan Andi Supandi IoIah
monjadi sobuah |in| diIandai dongan adanya garis bawah dan
porubahan curscr mcuse saaI moIowaIi IuIisan Andi Supandi.

Gambar 117. HasiI Ionambahan FasiIiIas Hqper|in|
7. Simpan haIaman ne| dongan mongkIik ikon :ate.
8. Iada :Iandard Tcc||ar kIik ikon Pretien.
Gambar 118. KIik Ikon Pretien unIuk MoIihaI HasiI

8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 79 dari 93
:e|c|ah 8erIaraf |nIernasicna|
9. 8rcnser akan Iorbuka dan dapaI diIihaI IampiIan haIaman ne| yang kiIa
buaI di |rcnser.
Gambar 119. TampiIan HasiI di 8rcnser |nIerneI |xp|crer
1O. KIik Andi Supandi yang IoIah monjadi |in|.
Gambar 12O. Iosisi curscr mcuse saaI moIowaIi |in|
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 8O dari 93
:e|c|ah 8erIaraf |nIernasicna|
11. Maka haIaman ne| andi.htm akan Iorbuka.
Gambar 121. TampiIan HasiI di 8rcnser
12. UnIuk monuIup |rcnser, kIik IomboI x pada nindcn.
Gambar 122. MonuIup 8rcnser
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 81 dari 93
:e|c|ah 8erIaraf |nIernasicna|
13. BuaIIah haIaman ne| unIuk Ani Widiawati dan Tono Sutono, unIuk
Iobih mudahnya bukaIah haIaman ne| Andi Supandi komudian :ate As
sobagai haIaman Iain.

14. Komudian kIik Iab andi.hIm.
Gambar 123. MomiIih Iab andi.hIm
15. Iada Menu 8ar, kIik |l|e > Sate As
Gambar 124. MomiIih Submonu :ate As
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 82 dari 93
:e|c|ah 8erIaraf |nIernasicna|
16. Iada window :ate As masukkan nama fi|e ani.htm, komudian kIik
Change TiI|e.
Gambar 125. MongganIi Nama |i|e
17. Masukkan HaIaman Ani pada window :eI Page TiI|e, komudian Iokan
OK.
Gambar 126. MongganIi TiI|e HaIaman
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 83 dari 93
:e|c|ah 8erIaraf |nIernasicna|
18. Tokan :ate.
Gambar 127. KIik TomboI :ate unIuk Monyimpan

19. SoIoIah :ate dikIik, socara oIomaIis haIaman ne| andi.htm yang Iadi
Iorbuka di |rcnIPage IorIuIup dan diganIikan oIoh ani.htm.
Gambar 128. TampiIan pada Iab ani.hIm
2O. Karona isi haIaman ne| andi.htm dan ani.htm masih sama, odiIIah
haIaman ne| ani.htm.
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 84 dari 93
:e|c|ah 8erIaraf |nIernasicna|
21. GanIi IuIisan monjadi Ini adaIah haIaman Ani Widiawati.
Gambar 129. TampiIan SoIoIah IongganIian TuIisan

22. Simpan haIaman ani.htm dongan monokan ikon :ate.
23. KIik Iab index.hIm dan buaIIah |in| dari haIaman index.htm monuju
haIaman ani.htm pada nama Ani Widiawati.
Gambar 13O. MombuaI |in| pada TuIisan Ani WidiawaIi

24. Lakukan Iangkah-Iangkah yang sama unIuk mombuaI haIaman unIuk
Tono Sutono. Lakukan :ate As haIaman ani.htm dan borikan nama
tono.htm, ganIi TiI|e monjadi HaIaman Tono, komudian odiI IuIisan
daIam haIaman tono.htm monjadi Ini adaIah haIaman Tono Sutono.
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 85 dari 93
:e|c|ah 8erIaraf |nIernasicna|
Gambar 131. TampiIan SoIoIah Irosos IombuaIan HaIaman Baru

25. Simpan haIaman ne| dongan mongkIik ikon :ate.
26. BuaIIah |in| dari index.htm monuju haIaman tono.htm pada Tono
Sutono, sohingga IampiIan haIaman index.htm monjadi soporIi di
bawah ini.

Gambar 132. TampiIan SoIoIah Irosos IombuaIan Link

27. Simpan haIaman dongan mongokIik ikon :ate.
28. KIik ikon Pretien unIuk moncoba moIihaI IampiIan haIaman ne| di
|rcnser.
Gambar 133. KIik Ikon Pretien unIuk MoIihaI HasiI d 8rcnser
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 86 dari 93
:e|c|ah 8erIaraf |nIernasicna|
29. TampiIan di |rcnser adaIah soporIi gambar di bawah ini. CobaIah kIik
|in|-|in| yang ada di haIaman ne|.
Gambar 134. |in|-|in| yang Mompunyai IorIauIan HaIaman

3O. SoIoIah |in| dikIik akan muncuI haIaman ne| yang baru, Iokan ikon 8ac|
unIuk kombaIi ko hcme page.
Gambar 135. KIik Ikon 8ac| unIuk KombaIi
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 87 dari 93
:e|c|ah 8erIaraf |nIernasicna|
O. Memasukkan Gambar
1. LoIakkan curscr mcuse soporIi pada gambar borikuI.
Gambar 136. Iosisi curscr mcuse
2. KIik ikon |nserI PicIure |rcm |i|e.
Gambar 137. KIik Ikon |nserI PicIure |rcm |i|e
3. CariIah gambar di kompuIor, komudian kIik sokaIi pada gambar dan
Iokan |nserI.
Gambar 138. KIik TomboI |nserI unIuk Monyisipkan Gambar
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 88 dari 93
:e|c|ah 8erIaraf |nIernasicna|
4. TampiIan index.htm akan monjadi soporIi di bawah ini.

Gambar 139. TampiIan HasiI di 8rcnser
5. Simpan haIaman ne| dongan mongkIik ikon :ate.
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 89 dari 93
:e|c|ah 8erIaraf |nIernasicna|
6. Sohingga akan muncuI window :ate |m|edded |i|es, kIik Change |c|der.
Gambar 14O. KIik TomboI Change |c|der
7. Lakukan dcu||e kIik pada fc|der lmages.
Gambar 141. Ocu||e KIik pada |c|der |mages
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 9O dari 93
:e|c|ah 8erIaraf |nIernasicna|
8. SoIoIah fc|der lmages Iorbuka, kIik OK.
Gambar 142. KIik TomboI OK unIuk MoIanjuIkan

9. Komudian pada window :ate |m|edded |i|es kIik OK.
Gambar 143. KIik TomboI OK unIuk MoIanjuIkan
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 91 dari 93
:e|c|ah 8erIaraf |nIernasicna|
2O. Maka gambar Iadi socara oIomaIis akan disaIin ko foIdor/dirokIori
ne|siIe.
1O. KIik pada Ianda + fc|der lmages unIuk moIihaI apakah gambar sudah
disaIin (ccpq) aIau boIum.

Gambar 144. KIik Tanda + unIuk MoIihaI Isi |c|der
11. SoIoIah Ianda + dikIik IorIihaI gambar sudah disaIin.

Gambar 145. Isi dari |c|der |mages
12. Simpan haIaman dongan mongkIik ikon :ate.
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 92 dari 93
:e|c|ah 8erIaraf |nIernasicna|
13. KIik ikon Pretien unIuk mongoIahui IampiIan haIaman ne| di |rcnser.
14. TampiIan haIaman ne| di |rcnser akan Iampak soporIi gambar di bawah
ini.

Gambar 146. TampiIan HasiI HaIaman e| di 8rcnser
8u|u Ajar Mcdu| 11
Perang|aI |una| Oesain e|
Te|nc|cgi |nfcrmasi dan Kcmuni|asi (T|K) :MP 93 dari 93
:e|c|ah 8erIaraf |nIernasicna|
DAFTAR PUSTAKA

DirokIoraI Iombinaan SMI, 2OO7, Panduan Pem|e|ajaran dan Peni|aian T|K :MP
:8|, DoparIomon Iondidikan NasionaI.
DirokIoraI Iombinaan SMI, 2OO7, :Iandar KcmpeIensi dan KcmpeIensi Oasar T|K
:MP :8|, DoparIomon Iondidikan NasionaI.
Dr. Lrhans A., 2OO3, MicrcscfI Office XP, Cirobon: IT. LrconIara RajawaIi.
Firdaus, 2OO6, 7 ]am 8e|ajar |nIera|Iif |rcnIPage 2003 unIu| Orang Anam,
IaIombang: Maxicom.
Grogorius Agung, 2OOO, MicrcscfI |rcnIPage 2000 e||cI, JakarIa: IT. LIox
Modia KompuIindo.
Mico Iardosi, 2OO1, Pengena|an |nIerneI, Surabaya: Indah.