G51WPS-E1

The University of Nottingham

SCHOOL OF COMPUTER SCIENCE AND INFORMATION TECHNOLOGY

A LEVEL 1 MODULE, SPRING SEMESTER 2006-2007

Web Programming and Scripting

Time allowed TWO Hours

Solutions

G51WPS-E1 Turn over

 2 G51WPS-E1

1. Web enabling infrastructure

(a) Define what an Ethernet network is. (2)

Ethernet is a Local Area Network (LAN) architecture with bus logical topology
Today it is the most widely used LAN network technology

(b) Describe how shared computer access to an Ethernet network is coordinated

with the CSMA/CD protocol. (6)

The computers can detect when a signal is on the Ether without disrupting the
ongoing transmission - carrier sense
They can only transmit when the Ether is free - carrier sense with multiple access
(CSMA)
This mechanism prevents a computer interrupting an on-going transmission,
however, collisions can still occur if computers decide to transmit at the same time
So, each computer also senses for garbled transmission - a collision
Computers must wait after a collision before retransmission by choosing a random
delay up to a specified maximum
Computers double the max. delay (i.e. range from which delay is chosen) for each
subsequent collision - binary exponential backoff

(c) Explain how routers and the TCP/IP protocol stack are used to create the
Internet, a virtual network of networks. (5)

Routers are used to connect different networks

They translate between different frame formats and addressing schemes

Internet protocols (TCP/IP) provide universal service, giving applications the illusion
there is only one network
A uniform addressing scheme is provided
Universal virtual packet (IP datagram) is defined

(d) Explain what the purpose is of Multipurpose Internet Mail Extensions (MIME). (2)

Originally developed to allow different kinds of documents to be sent (text, images,

video, sound) using Internet email
Because the Web has similar needs MIME is also used to specify document types
transmitted over the Web

(e) Identify and describe the different component parts of the following URL:
http://www.cs.nott.ac.uk:8799/~bnk/WPS/details.html?name=mark&x=25 (5)
First part identifies the protocol - http:
Second part begins with // and consists of
o fully qualified domain - //www.cs.nott.ac.uk
o port number (optional) - :8799
o pathname - /~bnk/WPS/details.html
Third part (optional) includes query string - ?name=mark&x=25

G51WPS-E1
 3 G51WPS-E1

(f) Describe the process of retrieving a web document with the HTTP protocol (i.e.
the exchange between a web browser and a server). (5)

HTTP uses a Request/Response paradigm

Client (web browser) establishes a connection to the server, and sends it a request
HTTP message
o This contains a request line (with the method to be applied to the data
resource, the identifier of the resource and the protocol version in use) followed
by header fields and an optional message body (which contains user supplied
form data if the POST method was used)
Server responds to the request by generating a response HTTP message
o This contains a status line (with the protocol version, a status code, and a
“reason phrase”) followed by header fields and an optional response body
(which contains the data, often an XHTML document)

2. Mark-up languages

(a) Define what XHTML and XML are. (4)

XHTML is a markup language

It describes the general form and layout of documents to be displayed by web
browses

XML is meta-markup language

It is used to create new markup languages for particular purposes or areas
o XHTML was defined with XML

(b) What XHTML tag and attribute are used to define a hypertext link? (2)
Links are specified with the anchor tag <a>
href is an attributed of <a> and is required to specify the target of the link (filename
or full URL)

(c) Describe (or draw) what a web browser will display after processing the
following fragment of an XHTML document. (4)
<table border = "border">
<tr>
<th colspan = "2"> Fruit Juice Drinks </th>
</tr>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>£1.20</td>
</tr>
<tr>
<td>Orange</td>
<td>£1.50</td>
</tr>
</table>

The browser will display the following table:

G51WPS-E1 Turn over

 4 G51WPS-E1

(d) Write a fragment of XHTML code to create two nested lists as shown below: (4)

<ol>
<li> Guided transmission media
<ul>
<li> Copper wire </li>
<li> Optical fibre </li>
</ul> <br />
</li>
<li> Unguided transmission media
<ul>
<li> Infrared </li>
<li> Microwave </li>
</ol>
</li>
</ol>

(e) The following is a DTD defining the vocabulary for an XML application:

<!ELEMENT email (to+, from, (fulldate|shortdate), priority, subject?, emailbody)>

<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT fulldate (#PCDATA)>
<!ELEMENT shortdate (#PCDATA)>
<!ELEMENT prority EMPTY>
<!ELEMENT subject (#PCDATA)>
<!ELEMENT emailbody (emailpara+)>
<!ELEMENT emailpara (#PCDATA)>
<!ATTLIST priority rating (high|medium|low) "medium">
<!ATTLIST emailbody font CDATA #REQUIRED>

Describe exactly what this DTD specifies, including what it allows and does not
allow. (7)

- Each email element must have

o one or more to elements (0.5 mark)
o followed by one from element (0.5 mark)
o followed by either fulldate or shortdate element (0.5 mark)
o followed by one priority element (0.5 mark)
o optionally followed by a subject element (0.5 mark)
G51WPS-E1
 5 G51WPS-E1

o followed by one emailbody element (0.5 mark)

o in that order
- Each to, from, fulldate, shortdate, subject and emailpara element contains
parsed character data (text) and may not contain child elements. (1 marks)
- Each emailbody element must have one or more emailpara elements. (0.5 mark)
- Each emailbody element has a font attribute, which must contain some
(unspecified) value, composed of any combination of characters (1 marks)
- Each priority element has no content , i.e. empty (0.5 mark)
- Each priority element has a rating attribute the value of which must be one of the
options „high‟, „medium‟ or „low‟. If no attribute is specified in the XML doc, rating is
set to „medium‟. (1 marks)

(f) Explain why the display of XML markup in a web browser usually requires a
stylesheet whereas the display of HTML markup does not. (4)

The display of HTML markup does not require a stylesheet because HTML provides a
fixed set of tags (authors of HTML docs use tags that have already been defined for
them).
And browsers can interpret these tags and display them according to predefined
styles
XML allows authors to create their own set of tags and these are therefore not
standard. These tags are used to markup content but provide no styling information.
The author therefore has to specify how each marked up piece of information should
be displayed by using a stylesheet which contains style rules for each element.

3. Web document presentation (CSS and web design guidelines)

(a) Explain what the benefits are of using Cascading Style Sheets (CSS) to specify
the presentation of web documents versus using XHTML tags only. (3)

- XHTML necessarily mixes style and content, but stylesheets help the separation
- CSS allows you to impose a standard style on a whole document, or even a whole
collection of documents -> making web development and maintenance easier
- Many XHTML style tags and attributes are now depreciated

(b) What are the three levels at which CSS can be defined to specify the style of an
XHTML document? What XHTML tags and attributes are used to accomplish this? (6)

- Inline – style specified for a specific occurrence of a tag and applies only to that tag,
inline style sheets appear in the tag itself as the value of the style attribute

- Document-level style sheets - apply to the whole document in which they appear,
appear in the head of the document as a list of rules that are the content of a
<style> tag

- External style sheets - can be applied to any number of documents, stored as

separate files (potentially on any server on the Internet), a <link> tag is used to
specify that the browser is to fetch and use an external style sheet file

G51WPS-E1 Turn over

 6 G51WPS-E1

(c) Describe the basic structure of a CSS rule; to illustrate your description write a
CSS rule, which specifies that level one headings must appear in red colour and
centred on the page. (5)

- Each CSS rule starts with a selector and is followed by a declaration bound by
braces.
- Each property within the declaration is separated from its value by a colon.
- A rule can contain several properties (individual property:value pairs are separated
with semicolons).

h1 {color:red; text-align:center}

Value
Selector Declaration
Property

(d) What is the purpose of a style class selector? Write an example of a CSS rule
that uses this type of selector and explain what its effect will be. (3)

- The class selector is used to allow different occurrences of the same tag to have
different style specifications
- E.g. p.red {color: red}
- Only paragraph elements whose class has been set to red (<p class = “red”>)
will have the specified presentation (i.e. appear in red)

(e) Explain what the Web palette is. (2)

- The Web pallet includes 216 colours (called Web-safe colours), which are displayable
by Windows and Macintosh-based browsers
- These colours are all combinations of all increments of 20% of each of the three
basic colours, red, green and blue

(f) List and discuss three of Jakob Nielsen‟s “Top 10 Worst Mistakes of Web Design”. (6)

Can include any three of the following:

1. Bad Search - overly literal search engines reduce usability in that they're unable to
handle typos, plurals, hyphens, and other variants of the query terms. A related
problem is when search engines prioritize results purely on the basis of how many
query terms they contain, rather than on each document's importance.
2. PDF Files for Online Reading - users hate coming across a PDF file while
browsing, because it breaks their flow. Layouts are often optimized for a sheet of
paper, which rarely matches the size of the user's browser window.
3. Not Changing the Color of Visited Links - a good grasp of past navigation helps
you understand your current location, since it's the culmination of your journey.
Knowing your past and present locations in turn makes it easier to decide where to
go next.
4. Non-Scannable Text - a wall of text is deadly for an interactive experience.
Intimidating. Boring. Painful to read.
5. Fixed Font Size - CSS style sheets unfortunately give websites the power to
disable a Web browser's "change font size" button and specify a fixed font size.

G51WPS-E1
 7 G51WPS-E1

Respect the user's preferences and let them resize text as needed. Also, specify
font sizes in relative terms -- not as an absolute number of pixels.
6. Page Titles With Low Search Engine Visibility - search is the most important
way users discover websites. Search is also one of the most important ways users
find their way around individual websites. The humble page title is your main tool to
attract new visitors from search listings and to help your existing users to locate the
specific pages that they need.
7. Anything That Looks Like an Advertisement - selective attention is very
powerful, and Web users have learned to stop paying attention to any ads that get
in the way of their goal-driven navigation. Unfortunately, users also ignore
legitimate design elements that look like prevalent forms of advertising. After all,
when you ignore something, you don't study it in detail to find out what it is.
8. Violating Design Conventions - consistency is one of the most powerful usability
principles: when things always behave the same, users don't have to worry about
what will happen. Instead, they know what will happen based on earlier experience.
9. Opening New Browser Windows - designers open new browser windows on the
theory that it keeps users on their site. But even disregarding the user-hostile
message implied in taking over the user's machine, the strategy is self-defeating
since it disables the Back button which is the normal way users return to previous
sites. Users often don't notice that a new window has opened, especially if they are
using a small monitor where the windows are maximized to fill up the screen. So a
user who tries to return to the origin will be confused by a grayed out Back button.
10. Not Answering Users' Questions - users are highly goal-driven on the Web.
They visit sites because there's something they want to accomplish -- maybe even
buy your product. The ultimate failure of a website is to fail to provide the
information users are looking for.

4. Client and server side scripting

(a) Describe three major differences between Java and JavaScript. (6)

- JavaScript is dynamically typed – variables in a JavaScript script can be used to store

anything (their type is not defined by the programmer). The type of a particular
appearance of a variable in the script is determined by the interpreter. On the other
hand, all variables types in Java must be known at compile time and operand types
are checked for compatibility

- JavaScript‟s support for objects is very different – it is not a fully object-oriented

language. JavaScript does not have classes (its objects serve both as objects and as
models of objects) and hence it does not support class-based inheritance and
polymorphism like Java does.

- JavaScript is interpreted - source code is embedded inside an XHTML document,

there is no compilation. With java there is a two stage process where the source
code is first compiled to platform independent java byte code (.class file) and then it
this is interpreted by the JVM on the particular machine where the program is run.

(b) Write the definition (i.e. header) of the JavaScript function with name “sum”
and 2 parameters named “a” and “b”. (2)

function sum(a, b) {
}
G51WPS-E1 Turn over
 8 G51WPS-E1

(c) How can a function access actual parameter values for those actual parameters
that do not correspond to any formal parameters? (2)

- All parameters are sent through a property array, arguments, which has the length
property
- By accessing arguments.length a function can determine the number of actual
parameters that were passed and directly access through the array any parameters
that do not correspond to formal parameters

(d) Given the fragment of XHTML below, which defines a form with one button,
write the script to make the button display an alert message with the words
“Stop download?” when it is clicked. (3)

<form action = “”>

<input type “button” name = “Cancel” />
</form>

<form action = “”>

<input type “button” name = “Cancel”
onclick = “alert('Stop download?');” />
</form>

(e) There are three main types of Java programs – Java applications, Java applets
and Java servlets. Explain what they are, highlighting the main differences
between them. (6)

- Java applications are standalone programs, whose execution is triggered by the

user

- Java applets are relatively small Java programs, which are delivered over the web
to the browser (a .class file) and whose execution is under the control of the browser

- Java servelts are the server-side equivalent of applets. They are called through
XHTML and are executed on the server system under the control of the Web server.
The output is returned to the browser in the form of an XHTML document.

(f) How can the value of a form element be accessed by a PHP script? (2)

- PHP builds an array of the form values - $_GET for the GET method and $_POST for
the POST method
- subscripts are the widget names (e.g. $POST[“phone”] to access the value of a
textbox named phone when the post method is used)

(g) What is a cookie? How can it be created in a PHP script? (4)

- Cookies provide a general approach to storing information about sessions on the

client machine
- A cookie is a small object of information consisting of a name and a textual value. It
is created by some software system on the server (such as a CGI program or PHP
script)

G51WPS-E1
 9 G51WPS-E1

- A cookie is set in PHP with the setcookie function, which takes one or more
parameters
- the first parameter is the cookie‟s name (a string), the second is the new value for
the cookie (a string) and the third is the expiration time in seconds (an integer)

5. Development of an e-commerce website

You have been hired by an estate agent to set up an e-commerce website to
advertise properties for sale and to allow customers to register and submit their
requirements over the Internet. Write a report on how you propose to build this
website – describe the functionality that you think is needed and the technologies
that you think are appropriate, outlining their benefits and drawbacks. (25)

- For this kind of B2C e-commerce website it will be useful to provide features such as:
o Maintain an easily updatable list of properties
o Allow customers to browse and search for specific types of properties
o Allow customers to submit their details and store these on the server
o Notify customers of suitable propertie

- To achieve this functionality a three-tier distributed application must be implemented

o User Interface / Client Tier
Client side technologies
o Business Logic / Middle Tier
Server side technologies
o Database access / Information Tier
Data source for dynamically generating web pages

- Markup of static information – choice between XHTML or XML

o XHTML is suitable for a website of this complexity
o But limitations of HTML for large and sophisticated e-commerce websites
Style and content are intrinsically linked
Large scale maintenance is difficult
Information may be lost because only its appearance is described, not its
semantics
Poor at representing specialised data
Linking protocols are crude
o Alternatively XML can be used to structure documents
Addresses problems mentioned above
Need a method of displaying XML – CSS or transforming to XHTML using XSLT

- Use of CSS
o Consistent look and feel for the website
o Easier website development and maintenance
o More sophisticated layout can be created

- Client side scripting may be useful

o Discussion of whether client side scripting should be used for the website
o Mention of benefits and drawback of any suggested technologies
Plugins (e.g. Director and Flash) – specialist presentation of data (e.g. models of
the interior of properties) but plugin software must be installed
Java applets, JavaScript – data validation , interactivity (e.g. clicking on buttons,
interactive animations), reducing number of requests to server but browser
dependency and source code is viewable by the user, security restrictions
G51WPS-E1 Turn over
 10 G51WPS-E1

- Database is needed to contain inventory details (available properties) and possibly

customer information/profiles

- Server side scripting is necessary to access the database (and any other server
resources)
o Choice will be one of the currently available major sever-side technologies – Perl
CGI, Java Servlets, ASP.NET or server-side embedded script such as PHP
o Discussion of the benefits and drawbacks of the chosen technology compared to
alternatives

- Other issues that could be addressed

o Usability Design
o Use of SSL for the secure transmission of customer details
o Possible use of asynchronous (e.g. email) and synchronous (e.g. MSN)
communication technologies to enable consultation with staff at the agency and
improve customer service
o Use of open source s/w

G51WPS-E1 End