Home Exercise
Help Contact
Exercise Unit 1 Exercise Unit 2
Exercise Unit 3 Preparation
Exercise Unit 4 Vocabulary Focus
Exercise Unit 5 Learning from Input and Output
Exercise Unit 6 Reflection
Exercise Unit 7 Exercise Unit 8
Figure 4.1: Flowchart of the Website
from Voice of America VOA and Randall ESL-Lab. The recordings then being adjusted using Jet Audio. The writer had tried different source of recordings but it
turned out to be very hard for the first grade students since the pronunciation wasn’t clear enough.
Animations in the website made the website livelier. The present of animations in the website made the website look more interesting and gain more
68 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
attention from the users. The animations in the website were used to create the menu buttons and to beautify the web page. The animations were taken from
Animated Gifs CD by Arc Media Inc and Clip Art Library 2008 by Riverdeep Interactive Learning
3. Making User Interface
User interface is the appearance or the web page which is seen by the users when they enter the website. There are four main pages in the website; they are
index.htm, exercise.htm, help.htm, and contact.htm. Besides the four main pages, there are also eight 8 units under the exercise menu. The eight 8 units will be
the main page for vocabulary learning. To create the page the writer made use of
Hot Potatoes version 6.2 Release 2 Build 2.
a. Index Page Index page or index.htm is the main page of the website. This page
consists of 3 parts; they are page title, menu buttons, and introduction. The title of the page was Vocabulary exercise it was made inside a 958 x 148 pixels table, font
type Century Gothic and color 0099FF. Below the page title were 4 main menu buttons which were divided into 4 cells. These main buttons were part of the page
title and will remain under the page title. The second part is the Choose one table. This part provides users with the
website’s main menu buttons. They were Home, Exercise, Help, and Contact. On each of the button the writer put animations with the size 39 x 52 pixels. Those
animations were home.gif, exercise.gif, help.gif, and contact.gif. The initial letters of the animations were made in small letters in order to ease the system to locate
69 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
the file in the website. Below the Choose one is the Other sources table. This part provides users with the other sources of vocabulary learning so users can learn
vocabulary through different website. The third part is the introduction part. This part was divided into Welcome
and Site overview. Welcome provided users with the reason for creating the website and also explanation on supplementary materials, this part also elaborated
the objective of the website. On the right side of the Welcome table, there was an image named woman and books with the size 173 x 140 pixels. Below Welcome
table the writer put an image named learnprocess.jpg with the size 680 x 161 pixels. Next was the Site overview table. This table elaborated the main buttons of
the website. It gave description on the function of each of the main buttons. Besides each of the button, the writer put an image which represented the function
of each button. Each image had the size 50 x 69 pixels. The page then is closed with a navigation bar which consisted of four main
buttons to ease users if they wanted to go to other page without having to scroll up the page. There was also the information about the website production.
b. Exercise Page Exercise page or exercise.htm provides users with the exercise activities in
the website. The page title was put in the right side of the page with the size 169 x 42 pixels, typed in Century Gothic font and the color was 808000. Main menu
buttons were still being shown in the page to ease users whenever they wanted to move to other page. There were eight 8 units in this page which were divided
into 2 tables. Each table consisted of 4 cells. Besides the exercise unit table, the
70 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
