The University of the South Pacific
Serving the Cook Islands, Fiji, Kiribati, Marshall Islands, Nauru, Niue, Samoa, Solomon Islands, Tokelau, Tonga, Tuvalu, and Vanuatu.
Faculty of Science, Technology and Environment
School of Computing, Information and Mathematical Sciences
IS221
WEB APPLICATIONS DEVELOPMENT
Semester 1, 2013
FINAL EXAMINATION PAPER
Time Allowed: 3 hours + 10 minutes reading
100 marks (50% of final grade)
INSTRUCTIONS
1.
2.
3.
4.
5.
6.
This examination has 8 questions.
ALL questions are compulsory.
Write all answers in the Answer Booklet provided.
This paper has 11 pages including this page.
You must hand-in the Answer Booklet to your supervisor at the end of the examination.
Please note: To pass IS221; you need to score a minimum mark of 40, which is 40% of 100
(the total final examination raw mark). 40 out of 100 raw marks is equivalent to 20% out of
50% allocated to the final examination.
GOOD LUCK!!!
Question 1: Web Typography
10 Marks
The type choices you make for your site provide the foundation for the clear communication of your
content. Type can flexibly express emotion, tone, and structure.
a)
In strict typography, what is the difference between typeface and font?
b)
As you work with type, it is important that you follow four important principles for creating
an effective design, as discussed in class. List these four principles.
[2 Marks]
c)
When considering fonts for your Web designs, start thinking of font-families.
[i]
Name four generic font families that you know of.
[ii]
d)
Give an advantage of using font families instead of a specific style.
[2 Marks]
[2 Marks]
[1 Mark]
Small capitals add a distinctive look for chapter openings, acronyms, and other special
purposes. Write the appropriate CSS style that applies small capitals to the paragraph
opening as in the Figure 1 below. Write the style as well as part of the paragraph to which
this style is applied to. Do not write <style type=”text/css”>… </style>, as well as
the whole paragraph.
[3 Marks]
Figure 1
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 2 of 11
Question 2: Box Properties
10 Marks
CSS box properties allow you to control the margin, padding, and border characteristics of blocklevel elements.
a)
To understand more about CSS box properties, you need to understand the CSS visual
formatting model and the box model.
[i]
Briefly discuss the CSS visual formatting model.
[1.5 Marks]
[ii]
b)
Briefly discuss the CSS box model.
[1.5 Marks]
Identify the labeled numbers indicated in the Figure 2 below.
[1.5 Marks]
1
3
Figure 2
2
c)
Figure 4 is the result of applying a CSS style to the Penguin image or graphic in Figure 3.
Write the appropriate CSS style that will achieve this transformation.
[Hint: Your style rule declaration should have at least two properties set.]
[1.5 Marks]
Figure 3
IS221 Final Examination – Question Paper
Figure 4
Semester 1, 2013
Page 3 of 11
d)
Use figures 5 and 6 below to answer the questions that follows.
Figure 5
[i]
Figure 6
The CSS style below was applied to the side bar in Figure 5 above. Complete the
given style rule. Label 1 is the selector that needs to be used only once. Labels 2 and
3 are just values for the corresponding properties.
____1____ {
width: 200px; height: 250px; padding: 0px 10px 10px 10px;
margin: 0px 10px 5px 0px; color: blue;
float: ____2____;
border: ____3____;
}
[2 Marks]
[ii]
You must have noticed that there is a problem, as depicted in Figure 5, when
applying the CSS styles in part [i]. Modify the CSS style in part [i] to solve this
problem, as shown in Figure 6. A scroll bar is added to the side bar.
[Hint: CSS style rule declaration has only one property.]
[1 Mark]
[iii]
There is an alternative; instead of adding the style code(s) in part [ii] to part [i], you
can still fix the problem in part [i] by modifying the CSS style in part [i]. This will
result in the whole content of the sidebar fully displayed without a need for a scroll
bar. Write the appropriate style code(s) that will fix this.
[1 Mark]
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 4 of 11
Question 3: Page Layouts
15 Marks
In the past, Web designers used tables to create multiple column layouts and gain more control of
their page designs. Modern Web designs are built using the CSS layout capabilities.
Use the values shown in Figure 7 below as well as the additional information to write the XHTML
codes for this centered fixed three-column layout page.
Additional information:
1.
Omit the root element. You only need to complete the <head> and <body>
sections.
2.
There is a wrapper which has a simple border.
3.
There are a total of 6 sections including the wrapper.
4.
Use internal style rules between the <style type=”text/css”>… </style>
structure in the <head> section.
5.
Do not include styles for text color, background color and so on.
6.
Inside each section, except the wrapper, there is a single word to label that section
such as Header, Left, Middle, Right, and Footer. All these to be formatted as
heading 2 elements.
7.
Use proper id selectors to define the styles for each section.
8.
You must include a proper <body> section, where styles defined will be used to
form the centered fixed three-column layout.
Width: 960 px
Height: 60 px
No margins
Width: 200 px
Height: 400 px
No margins
Width: 200 px
Height: 400 px
No margins
Width: 560 px
Height: 400 px
No margins
Width: 960 px
Height: 40 px
No margins
Figure 7
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 5 of 11
Question 4: Web Forms
10 Marks
This question is about XHTML forms not ASP.NET Web Forms. Forms let you build interactive Web
pages that collect information from a user and then process it on a server.
a)
A XHTML form is created using the <form> element. The <form> element has a number of
attributes. One of them is the method property. This property has two possible values.
Identify these two values and briefly describe the difference between these two methods.
[2 Marks]
b)
Figure 8 below shows a form with some form controls. Use this form to answer the
questions that follow.
Figure 8
[i]
All address information such as House No., Street, City, and Country information
requires two Form controls. Name these Form controls.
[1 Mark]
[ii]
Write the appropriate XHTML codes that render the Street information using the
two controls named in part [i]. Street information must be clickable, not only on the
input control but on the text “Street” as well.
[2 Marks]
[iii]
Figure 8 also shows that all texts: House No., Street, City, and Country are in a
control or field that is 80px wide. Also each text is right-aligned with a space of
10px between the text and input field. Write the appropriate CSS styles that will
render these texts as they are in figure 8.
[Hint: Need a selector with our attributes properties.]
[5 Marks]
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 6 of 11
Question 5: Graphics and Colors
10 Marks
The ability to freely combine graphics, text, and color into page-type layouts is one feature that
makes the Web so attractive and popular, but it also can be the undoing of many Web sites.
a)
You learned of four graphics file formats in this course. They are GIF, JPG, PNG, and SVG.
What does each acronym mean?
[4 Marks]
b)
What are Interlacing and Progressive display?
[2Marks]
c)
What are dithering and banding?
[2Marks]
d)
List two important guidelines when using images or graphics on your Web page.
[2Marks]
Question 6: Site Navigation
14 Marks
a)
Effective navigation includes providing not only links to other pages in the Web site, but also
cues to user’s location. Users should be able to answer four navigational questions. List
these four questions.
[2 Marks]
b)
Many Web sites tend to present too much information at one time. Lengthy files that
require scrolling or have arrays of links and buttons can frustrate and overwhelm the user.
List and briefly describe one way you can limit information overload.
[1 Mark]
c)
In addition to linking to external documents, you can also add internal links for navigating
within the current page. One such example that you learned about is adding a Back to Top
link that let users return to the top of the page when they reach the bottom of the page.
Write the necessary XHTML codes that will achieve this. Do indicate clearly the locations of
your codes.
[3 Marks]
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 7 of 11
d)
Suppose you want to build a horizontal navigation bar for your Web pages. The navigation
bar will be created from the unordered list, Figure 9 below, and looks like Figure 10 on the
browser.
Figure 9
Figure 10
[i]
Now using the selector, ul#navlist { }, add style properties to remove the
default spacing and bullets from the unordered list. You only need to add three
properties.
[3 Marks]
[ii]
Write another rule that will apply to each list item, this will result in the list being
displayed horizontally by the browser instead of the default vertical list. [2 Marks]
[iii]
Write another rule that will remove the underline from the links as well as adding a
space of 20 pixels between the list items.
[3 Marks]
Figure 11
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 8 of 11
Question 7: Data Tables
6 Marks
The 3.2 release of HTML in 1997 included the table elements for the purpose of organizing tabular
data in rows and columns.
a)
The table below shows the top five movies from the American Film Institute (AFI). Write the
appropriate XHTML codes that will render the table in Figure 12 below. Write only the codes
for the first three lines.
The first line, AFI Top 5 Movies, describes the table and the third line is the first movie,
Citizen Kane.
[3 Marks]
Figure 12
b)
Write the appropriate style rule that renders the display in Figure 13 below. The style rule
transforms Figure 12 to Figure 13 by adding the following properties:
 All borders collapse.
 Font family: Arial
 Table border: solid 4px blue
 Table cell border: solid 1px solid
 Table cells padding: 10 pixels
Do not include <style type="text/css"> … </style>.
[3 Marks]
Figure 13
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 9 of 11
Question 8: ASP.NET
25 Marks
This section is dedicated to ASP.NET.
a)
In creating Web applications in ASP.NET, there are three ways in which you can integrate
programming codes with your XHTML codes. List these three methods.
[1.5 Marks]
b)
Figures 14, 15 and 16 below shows the result in running a simple Web application called
Check Box. This application was discussed in class. This Web application has three server
controls: a check box, a label and a button. User click to check or uncheck the check box and
then click the submit button. By clicking the submit button, a message will be displayed in
the Label as in Figures 15 (checkbox being checked) and 16 (checkbox being unchecked).
Use these figures and later information to answer the questions that follow.
Figure 14
Figure 15
Figure 16
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 10 of 11
[i]
Figure 17 is the source view of the Web form for the Check Box application with the
body section being hidden. Write the codes that appear in a new Web form body
section, before you even add any content.
[4 Marks]
Figure 17
[ii]
The general syntax of a Web server control is given below as well as an example of
Text Box server control. Every time you add a new server control, it comes with two
important properties or attributes: ID and Runat. Other attributes can be added as
required.
General Syntax:
<asp:TypeOfControl ID="ControlName" Runat="Server" />
Example:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Write the ASP.NET/XHTML codes to complete the body section of the Web form for
the Checkbox application.
[Hints: Study Figures 14 to 16 in order to identify additional properties or attributes
you need to add to each control. In each server control case you only need to
add one more property or attribute. For the Label server controls, the color of
the text displayed is red. You set the color by adding and setting the property
or attribute called ForeColor. Also consider adding space and line break.]
[14.5 Marks]
[iii]
Figure 18 below shows the content of Checkbox.aspx.vb, the code behind the file
for the Check Box application. Write the appropriate VB codes that will complete the
button click event handler, Button1_Click. Remember that clicking on the button, a
message will be displayed in the Label depending if the check box is checked or not.
[5 Marks]
Figure 18
– – – THE END – – –
IS221 Final Examination – Question Paper
Semester 1, 2013
Page 11 of 11