Chapter 21-Website Authoring
IGCSE ICT 0417 Paper 1 Notes
1. What are the layers of web development?
Content layer
The actual text, table, audio, video and imagery, how it is structured and linked together is called
the content layer. This will generally be created using Hypertext Markup Language (HTML).
Presentation layer
The presentation layer defines the format of a page through styling elements. This helps in
maintaining the consistency in the choices of fonts, colours, sizes and page styling. This is done
in three different ways. Inline, Internal (Embeded) and External Styles.
Behaviour layer
Real time interactive or dynamic content on a site that provides user with something to do is
often generated using JavaScript (JS) and this is the behavior layer. This may include image
galleries, forms, the setting of multimedia element sizes or adding a live clock, video or music
track.
2. What is HTML? Explain.
The HyperText Markup Language or HTML is the standard markup language for designing web
pages. It defines the structure or content of a web page, such as text, image, audio, video, tables
and lists etc.
3. What is CSS? Explain.
Cascading Style Sheet (CSS) is a style sheet language used for defining the presentation of a
document written in a markup language such as HTML. It defines how an element on a web
page will look like by specifying the values of its attributes.
Example;
Element Attribute Value
Text alignment left
Table border solid
4. What are different ways to apply styles to a web page using CSS?
There are 3 different ways of applying styles to a web page using CSS;
a) Inline CSS
When the styles are defined for an element
within the html file/code
inside the starting tag
applicable to the specific element
these are referred to as Inline Styles/CSS.
Example;
<h1 style="color:red;margin-left:20px;">Today’s Update</h1>
b) Internal Styles (Embedded)
When the styles for an element are defined within the head tag of the html file then such
styles are called Internal or Embedded Styles/CSS. This way a single style or set of style
specifications can be applied to multiple elements in the same web page.
Example;
<head>
<style type="text/css">
h1 {color:#fff000; margin-left: 20px;}
p {font-family: Arial, Helvetica, Sans-Serif;}
</style>
</head>
c) External Styles
When the styles for an element are defined in an external .css file then these are called
External Styles/CSS.
<head>
<link href="193style.css" rel="stylesheet" type="text/css">
</head>
Where 193style.css is a standalone .css file linked to the specific page via the above code.
5. Discuss the preferences of CSS style definitions.
The following are the preferences followed by the web browsers to apply styles.
a. Inline, Internal and External
1st Preference ……………………… Inline CSS
2nd Preference……………………… Internal/Embedded CSS
3rd Preference………………………. External CSS
b. Multiple External CSS files
In case there are multiple External CSS files then the file linked later will be given preference
for applying styles.
Example:
<head>
<link href="193style.css" rel="stylesheet" type="text/css">
<link href="SSDstyle1.css" rel="stylesheet" type="text/css">
</head>
In the above example, “SSDstyle1.css” will be given preference over “193style.css”.
6. Explain the following terms with reference to web pages.
a. Bookmark
All web browsers have a feature to save a list of bookmarks and to show/hide the bookmark
bar. A bookmark is a saved shortcut to access a specific webpage. It stores the title, URL
and icon/favicon of the webpage.
How to access/use a bookmark
A bookmark can be used by
clicking on the icon on the bookmark bar OR
accessing the icon from the list of bookmarks which can be accessed from the
Customize and control tab.
How to create a bookmark
Click on the Address Bar
Click Ctrl+D
Click Done/Add to bookmarks
b. Hyperlink
A hyperlink is a text, image, animation or a video on a webpage clicking on which redirects
the website visitor to another webpage or another location on the same page.
c. Anchor
An anchor is a specific type of a hyperlink, which takes the user to another place/location on
the same webpage. It can be a text, image, animation or a video.
7. Difference between relative file path and absolute file path with reference to
webpage authoring using html.
Absolute File Paths
Absolute file path defines the actual location of the resource/file over the Internet.
Relative File Paths
Relative file path takes the current folder as a reference where the html file is existing. Further
subfolders can be referred to but the web browser will not look for the resource outside the folder
where html file is saved.
8. Explain how a website can be tested before publishing.
A website should essentially have specified;
A purpose and
The target audience
based on which it could be tested before publishing.
Testing is important to avoid any unexpected or unwanted impact and to achieve the objectives of
publishing the website.
Testing is performed in two ways.
1. Functional testing
Functional testing is performed in coordination of development and testing teams. The
objectives of functional testing are to check if all the features of the website are functional. If
not, then report the details to the development team.
The test will include the steps to check for each web page:
i. Is the table structure correct?
ii. Do all images, animations and videos appear as planned?
iii. Are all objects that are not supposed to be visible hidden from the user?
iv. Do all internal hyperlinks (anchors) work? For the entire website test:
v. Can each page be accessed using the expected URL?
vi. Do all links between pages work as expected?
vii. Do all external hyperlinks open the correct web pages?
2. User Testing
User testing is performed by a group of intended users of the website.
Steps to perform user testing:
i. List the features to be tested.
ii. Find a suitable test audience of between two and five potential users. If a website is
not designed for a specialist audience, select a variety of different users. Do not use
IT specialists unless they are the intended users.
iii. Inform the users it is the website being tested not them, and that you value their
thoughts and opinions.
iv. Ask the users to speak their thoughts as they work but do not respond to them during
the process of testing.
v. Observe the test so that difficulties can be noted (do not help in any way).
A user test plan includes:
i. tasks to complete using the site
ii. questions to answer
example; navigation to the page to be tested from the home page.
Sample questions for user testing
i. What are your first impressions of the web page?
ii. What is the purpose of the web page?
iii. Was this purpose clear from the beginning?
iv. How easy is it to read and understand?
v. It there too much or little information?
vi. What did you like about the web page?
vii. What did you dislike about the web page?
viii. Did you experience any difficulties on the web page?
ix. What was the overall quality of your experience?
x. What could be done to improve the web page content or presentation?
xi. Do you have any other comments or suggestions?
xii.
9. Write the steps of publishing a website.
i. In order to upload a website the users need to register (create an account) on a website
hosting service provider (online platform) and purchase a domain name. The domain name
is a unique identity of a website for accessing it over the Internet.
The domain name can be seen highlighted below in the structure of a URL
Conventional format:
https://www.domain.typeofsite.countrycode
Example:
https://www.khda.gov.ae
ii. The hosting provider will provide user login details to the user to access the portal, customize
settings, upload content and publish website via their hosting space.
iii. FTP (File Transfer Protocol) client application is required to be installed on user’s system to
upload content/files.
iv. FTP application provides a two-panel interface to facilitate file transfer from user’s system to
web hosting portal.
v. Once the file transfer is complete, the website will go live to be accessed over the Internet.
