INTERNET PROGRAMMING DICT MOD 3

TOPIC ONE (1) INTRODUCTION TO INTERNET BASED PROGRAMMING.

-Discuss factors to consider when designing a web site. [4 marks]

Identify Your Audience

You need to know who you are trying to reach before you design your web pages. Knowing your
audience will help you present information in a suitable manner to interest that audience. There
is no point, for example, in writing your content in a manner which people wouldnot understand.

Navigation

One of the biggest frustrations for visitors to a website is not being able to find what they are
looking for. Most visitors want to be able to find content fairly easily. To that end, you should
think about how users will navigate around your site. Well there be an overall sitemap, will you
provide a main navigation on ever page, will you provide search boxes or quick visit drop down
menus? If people can’t easily get around your site, you may find the leave and don’t return.
Clean navigation is also important for search engines as it allows them to easily crawl your
website to rate your content.

Page Response Time and Speed

Loading speeds are becoming important, particularly given the social media items that can be
pulled onto a page. It’s no longer difficult to pull videos and photo albums directly from the likes
of Flickr or YouTube. If your page has to many images, to much text, to many feeds or videos
then you may find it doesn’t load fast enough. If this is the case on your broadband, think how it
will be for those on dial-up internet or slower broadband connections!

Graphics: When adding graphics to your site, make sure to save them in a suitable format
(JPEG and GIF are the most popular). When inserting shapes, lines, backgrounds, buttons or any
graphics that only have a few colours, a GIF file is best. JPEG files are best suited for pictures.
Also be aware of the size of the file you save. The larger the file size, the slower your web pages
will load. Also make sure to use “Alt” (alternative) text on your web pages.

- Outline two advantages of using a shared web server as used in web hosting option. Give two
examples of web hosting companies. [2 marks]
1) Shared Web Hosting means that one physical server and its available resources hosted are shared
among many users. Each customer has his own limit on particular services like disk space,
monthly traffic, email accounts, FTP accounts, databases.
2) The lower price which is the decisive factor for most buyers. whether this service will fit your
needs depends on the size of the hosted web sites. The greatest advantage is Ipage

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 1 of 31

 Two examples of web hosting companies.
Ehost.com
Bluehost
-Using suitable examples distinguish between a web page and a web site. [2marks]
The difference between a website and a web page is that a website is a collection of web pages with
information on a subject, and a web page is a smaller part of a larger website usually containing more
specific information.

-State the meaning of the term domain name and explain two benefits of registering the
company’s domain name. [4 marks]

The domain name system (DNS) is the way that internet domain names are located and
translated into internet protocol (IP) addresses. The domain name system maps the name people
use to locate a website to the IP address that a computer uses to locate a website. For example, if
someone types TechTarget.com into a web browser, a server behind the scenes will map that
name to the IP address 206.19.49.149.

Benefits

i. Web browsing and most other internet activity rely on DNS to quickly provide the
information necessary to connect users to remote hosts. DNS mapping is distributed
throughout the internet in a hierarchy of authority.
ii. Access providers and enterprises, as well as governments, universities and other
organizations, typically have their own assigned ranges of IP addresses and an assigned
domain name; they also typically run DNS servers to manage the mapping of those names to
those addresses.

-Outline three factors that should be considered during website maintenance. [3 marks]

Define Your Requirements

What information are you trying to provide? What must be on the page? Are there videos?
Links? Documents? Is it text heavy or graphical? All of these things have to be thought
about before building the page to make sure they fit and work correctly. It’s often beneficial
to use simple pen and paper to work out how all of the elements needed on your page can

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 2 of 31

best fit together. Once you have a clearer idea of exactly what the page should be doing, it
is far easier to go ahead and create it.

Identify Your Audience

You need to know who you are trying to reach before you design your web pages. Knowing
your audience will help you present information in a suitable manner to interest that
audience. There is no point, for example, in writing your content in a manner which people
wouldn’t understand.

Navigation
One of the biggest frustrations for visitors to a website is not being able to find what they
are looking for. Most visitors want to be able to find content fairly easily. To that end, you
should think about how users will navigate around your site. Well there be an overall
sitemap, will you provide a main navigation on ever page, will you provide search boxes or
quick visit drop down menus? If people can’t easily get around your site, you may find the
leave and don’t return. Clean navigation is also important for search engines as it allows
them to easily crawl your website to rate your content.

Page Response Time and Speed

Loading speeds are becoming important, particularly given the social media items that can
be pulled onto a page. It’s no longer difficult to pull videos and photo albums directly from
the likes of Flickr or YouTube. If your page has to many images, to much text, to many
feeds or videos then you may find it doesn’t load fast enough. If this is the case on your
broadband, think how it will be for those on dial-up internet or slower broadband
connections!

Graphics
When adding graphics to your site, make sure to save them in a suitable format (JPEG and
GIF are the most popular). When inserting shapes, lines, backgrounds, buttons or any

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 3 of 31

graphics that only have a few colours, a GIF file is best. JPEG files are best suited for
pictures. Also be aware of the size of the file you save. The larger the file size, the slower
your web pages will load. Also make sure to use “Alt” (alternative) text on your web pages.

Fonts and Colours

These should be based on how best you believe they can help present your message to
your intended audience. Small fonts aren’t suitable for those with reading difficulties and
certain coloured text on specific back ground colours are difficult to read (e.g. orange text
on a red background or white text on a yellow background). Fonts don’t always load
correctly on different browsers either, so make sure to test before confirming which fonts
you are going to use.

Headlines
An important factor when choosing a layout is a headline. This is most likely the first thing
your visitors will see and is predominantly what they will use to establish what content is
on the page. Make sure it grabs attention and is relevant. For instance you wouldn’t write
“information on product X” if the page was actually about product Y.

Web design can be a simple or complex process depending on your own personal creative
and development ability, and the tips above are intended to give you a helping hand. If
you’re still not sure of the process or would like some assistance, then contact the web
design team at Easyspace today for a free web design consultation.

TOPIC TWO (2) WEB PROGRAMMING

-Differentiate between common client and common gateway interfaces using a diagram.
[4 marks]
CGI programs are the most common way for Web servers to interact dynamically with users. Many
HTML pages that contain forms, for example, use a CGI program to process the form's data once it's
submitted. Another increasingly common way to provide dynamic feedback for Web users is to
include scripts or programs that run on the user's machine rather than the Web server. These programs
can be Java applets, Java scripts, or ActiveX controls. These technologies are known collectively as

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 4 of 31

 client-side solutions, while the use of CGI is a server-side solution because the processing occurs on
the Web server.
-State four examples of web programming languages. [2 marks]
 JavaScript. JavaScript is one of the most popular and dynamic programming languages used
for creating and developing websites. ...
 Java. ...
 Python. ...
 CSS. ...
 PHP. ...
 Ruby. ...

-State four requirements to be considered when acquiring a web programming language and
outline two benefits that a small business organization would gain by having a website.
[4 marks]
 Popularity. This is a very important one. A good place to start is the Tiobe index. You are
more likely to find people to collaborate with if you use a popular language. You are also more
likely to find reference material and other help. Unfortunately, the most popular language
globally may not be a good match for your problem domain.

 Language-domain match. Choose one that matches your problem domain. You can do this
by looking at what other people in your field are using (after adjusting for popularity, so don't
think the match with Java is good simply because a lot of people are using Java) or by looking at
some code that solves problems you are likely to have and seeing how natural the mapping is.

 Availability of libraries. Some would argue that this is the same as the point above, but I
don't think so. If there's a library that solves your problem well, you'll put up with some ugly
calling conventions or hassle in the language.

 Efficiency. Languages aren't fast - compilers are efficient. Look at the efficiency of compilers
or interpreters for your language. Be aware that interpreted code will run an order of magnitude
slower than compiled code as a rule of thumb.

 Expressiveness. The number of lines of code you create per hour is not a strong function of
language, so favour languages that are expressive or powerful

 Project-size. Do you want to be programming in the large or programming in the small?

Choose a language that supports your use case.

 Tool support. Popularity usually buys tool support (and some languages are easier to
write tools for). If you are a tool-oriented user, choose a language with good tool support.
Just read this article on tool mavens vs language mavens before you make a choice.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 5 of 31

Two benefits that a small business organization would gain by having a website.

Advertising
A website is more environmental friendly when it comes to advertising and marketing. There are
lots of ways to advertise your products or services through the internet. One example
is Facebook ads, an advertising feature offered through Facebook. Another one is called SEO.
This is a major advantage for your business. Having a good SEO service provider can boost the
ranking of your website which quickly results in increased sales and higher profits.

Satisfaction
Having a website will be more convenient for your customers and leads. Make it easy for your
customers to purchase from you! Many will be more likely to visit your website, rather than
driving a car to your physical location and browsing for your products. From a customer’s point
of view, it’s better for them if they don’t have to ask anything. They can just find what they’re
looking for on your online site.

-Explain the function of each of the following in a web page: [6 marks]

i. Home page;
A home page or a start page is the initial or main web page of a website or a browser. The initial
page of a website is sometimes called main page as well. A home page is a webpage that serves
as the starting point of website. It is the defaultwebpage that loads when you visit a web address
that only contains a domain name. For example, visiting http://techterms.com will display the
Tech Terms home page.
ii. Web browser;
A web browser is a software program that allows a user to locate, access, and display web
pages. In common usage, a web browser is usually shortened to "browser." Browsers are used
primarily for displaying and accessing websites on the internet, as well as other content created
using languages such as Hypertext Markup Language (HTML) and Extensible Markup
Language (XML).
iii. Web server.

A Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files that
form Web pages to users, in response to their requests, which are forwarded by their
computers' HTTP clients. Dedicated computers and appliances may be referred to as Web
servers as well. The process is an example of the client/server model. All computers that host
Web sites must have Web server programs.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 6 of 31

-Distinguish between a web designer and a web developer. [4 marks]

web designers are responsible for the design of the visual layout of websites. Excellent
designers are good at the using of a variety of concepts, such as color collocation,
typesetting, spatial relations and user experience.

Through the use of graphic design software and prototyping tools, web designers could
create the initial version of a website. Then the completed design will pass to web
developers for coding.

Web developers are generally considered as a group of people who use the left brain to develop
the coding of products. Under normal circumstances, Web developers get the design of the
page from the Web designer and then use front-end development technology to encode these
pages. They do not really care if the page looks good or not, but they care about the clean code
very much. Outstanding developers are always paying more attention to details and focusing on
each of them.

TOPIC THREE (3) HTML CODING.

-Write a HTML program that displays the text “maji mazuri” at the title bar of the browser
window and the text “welcome to cool waters” with font attributes blue and size 3 when the page
is loaded. [2 marks]
<html>
<head>
<title>Maji Mazuri</title>
</head>
<body>
<font color="blue" size="3">Comic Sans MS</font><br />
</body>
</html>

-Explain the function of the alt attribute as used in HTML. [2 marks]

The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 7 of 31

The alt attribute provides alternative information for an image if a user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen
reader).

-With the aid of an example for each, distinguish between an ordered list and unordered list as
used in Internet Programming. [4 marks]

 Unordered list are basically any point form list like in a word processor using dots to list
items; example . or o
 Ordered list are list that categorized the list according to a, b, c or 1, 2, 3.

- Write HTML code to accomplish each of the following tasks:

i. Create a hyperlink that takes a user to the address http://www.knec.ac.ke on clicking
of a label captioned Examinations council. [2 marks]
<a href="http:// www.knec.ac.ke/" target="_top">KNEC SITE</a>
ii. Insert into an HTML page, an image named logo.gif stored in a folder named images.
[2 marks]
<img src="logo.gif" alt="Smiley face" height="42" width="42">

-Differentiate between HTTP and HTTPS as used in the internet. [4 marks]

Instead of HyperText Transfer Protocol (HTTP), this website uses HyperText Transfer Protocol Secure
(HTTPS). Using HTTPS, the computers agree on a "code" between them, and then they scramble the
messages using that "code" so that no one in between can read them. This keeps your information safe
from hackers.
-Outline the function of &nbsp in the HTML code. [2 marks]
NBSP. Alternatively referred to as a fixed space or hard space, Non-Breaking SPace (NBSP) is used in
programming, and word processing to create a space in a line that cannot be broken by word wrap. With
HTML &nbsp; allows you to create multiple spaces that are visible on a web page and not only in the
source code.
-Distinguish between cell padding and cell spacing as used in HTML. [2 marks]
Cell spacing is the amount of space in between the individual table cells. Cell spacing and margin is the
space between cells. Cell padding is space inside cells, between the cell border (even if invisible) and the
cell content, such as text

-Write a HTML code to display the following list. [6 marks]

Baking

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 8 of 31

 :is a method of cooking food that uses prolonged dry heat, normally in an oven, but also in
hot ashes, or on hot stones.
PROCEDURE FOR BAKING
 Gather ingredients
 Mix ingredients together
 Place ingredients in a baking dish
Before you place the ingredients in the baking dish, preheat the oven to 180 degrees.
4. Bake in oven for an hour.
5. Remove from oven.
6. Allow to stand for ten minute.
7. Serve.
<p> PROCEDURE FOR BAKING
<ul type =”circle”>
<li> Gather ingredients</li>
<li> Mix ingredients together</li>
<li> Place ingredients in a baking dish</li>
</ol>
<p> Before you place the ingredients in the baking dish, preheat the oven to 180 degrees.
<ol start=”4”>
<li> Bake in oven for an hour </li>
<li> Remove from oven.</li>
<li> Allow to stand for ten minute.</li>
<li> Serve.</li>
</ol>
</ul>

-Explain the meaning of the following as used in the input element. [4 marks]
(i) Name (ii) Size (iii) Value (iv) Max Length
Specifies the name of an <input> element
Specifies the width, in characters, of an <input> element

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 9 of 31

Specifies the value of an <input> element
Specifies the maximum number of characters allowed in an <input> element

-Describe an empty tag as used in HTML. [2 marks]

An empty element is an element from HTML, SVG, or MathML that cannot have any child nodes
(i.e., nested elements or text nodes).
-State four examples of empty tags. [4 marks]
The empty elements in HTML are as follows:

 <area>
 <base>
 <br>
 <col>
 <embed>
 <hr>
 <img>
 <input>
 <keygen>
 <link>
 <meta>
 <param>
 <source>
 <track>
 <wbr>

-State two considerations when planning to use frames on a webpage. [2 marks]

 Browser type - Not all browsers support frames. Therefore, to maintain accessibility, a framed
and non-framed version of the Web site is recommended by the W3 Consortium guidelines.
 Maintainability- A framed and non-framed version of the Web site is generally needed, raising the
cost of the Web site and the maintenance.

-Define frame and explain types of frames. [4 marks]

HTML frames are used to divide your browser window into multiple sections where each section can
load a separate HTML document. A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are organized: into rows and columns.

1) Vertical frameset
How to make a vertical frameset with three different documents.

<html>

<frameset cols="25%,50%,25%">

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 10 of 31

 <frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</html>

2) Horizontal frameset
How to make a horizontal frameset with three different documents.

<html>

<frameset rows="25%,50%,25%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</html>

3) Nested framesets
How to create a frameset with three documents, and how to mix them in rows and columns.

<html>

<frameset rows="50%,50%">

<frame src="frame_a.htm" />

<frameset cols="25%,75%">

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</frameset>

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 11 of 31

</html>

- Write a HTML code that would be used to display on the browser the following list of
counties; Nakuru, Kirinyaga, Bungoma, Machakos, Kiambu, Lamu in a drop down list with
the county Kirinyaga selected. The scree should have submit and reset button. [7 marks]

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
COUNTIES:
<SELECT NAME="Counties
<OPTION VALUE="naks">Nakuru
<OPTION VALUE="kr" checked >Kirinyaga
<OPTION VALUE="bung" >Bungoma
<OPTION VALUE="macha">Machakos
<OPTION VALUE="ki">Kiambu
<OPTION VALUE="lamu">Lamu
</SELECT>
</body>
</html>

-The following is a statement used in a HTML code:

<p style="color:red;font-size:18px" align=”left”>This is a paragraph!</p>
i. Identify and explain the type of CSS used. [2 marks]
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS
uses the style attribute of an HTML element. Inline styles relate to a specific HTML tag, using

a style attribute with a CSS rule to style a specific page element. They’re useful for quick,

permanent changes, but are less flexible than external and internal stylesheets as each

inline style you create must be separately edited should you decide to make a design

change.
ii. Explain the function of the tag and attributes associated with it. [4 marks]

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 12 of 31

The HTML <p> element represents a paragraph of text. Paragraphs are usually represented in
visual media as blocks of text that are separated from adjacent blocks by vertical blank space
and/or first-line indentation. Paragraphs are block-level elements.
The align attribute specifies the alignment of the text within a paragraph.

left Left-align text

-Write html code to execute the following frame. [8 marks]

<HTML>
<HEAD>
<TITLE>Welcome to Kingstone hospital</TITLE>
</HEAD>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="icu.html" />
<frame src="pharmacy.html" />
</frameset>
<frameset cols="50%,50%">
<frame src="icu.html" />
<frameset rows="25%,25%">
<frame src="icu.html" />
<frameset cols="25%,25%">

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 13 of 31

 <frame src="pharmacy.html"/>
<frame src="pharmacy.html"/>
</frameset>
</frameset>
</frameset>
</HTML>

-Write a html code to create the following login interface. [6 marks]

<form action="action_page.php">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>

<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>

<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>

<div class="container" style="background-color:#f1f1f1">

<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>

TOPIC FOUR (4) WEB AUTHORING AND DESIGN TOOLS.

-What is WYSIWYG? Give an example as used in web development. [2 marks]

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 14 of 31

A WYSIWYG (pronounced "wiz-ee-wig") editor or program is one that allows a developer to see what
the end result will look like while the interface or document is being created. WYSIWYG is an acronym
for "what you see is what you get". Example Dream weaver.

-Differentiate between code view and design view as used in a web authoring tool. [4 marks]

There are three main views for editing documents:

1. Code View - you work directly in the HTML code.

2. Design View - you work in the WYSIWYG (What You See Is What You Get)
interface that feels like a word processor.
3. Split View - you easily toggle back and forth between working in Code and
Design View and see your changes in both places.

Use the buttons in the upper-left of the Document toolbar to switch views:
.

-Explain two types of HTTP connection with the aid of diagrams. [4 marks]

HTTP can use both nonpersistent connections and persistent connections. A nonpersistent
connection is the one that is closed after the server sends the requested object to the client. In
other words, the connection is used exactly for one request and one response.

With persistent connections, the server leaves the TCP connection open after sending responses
and hence the subsequent requests and responses between the same client and server can be sent.
The server closes the connection only when it is not used for a certain configurable amount of
time. With persistent connections, the performance is improved by 20%.

-Georgina has been requested to design a website for an organization. Outline six phases that she
should consider during the design. [6 marks]

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 15 of 31

TheWebSiteDesignandDevelopmentProcess

There are numerous steps in the web site design and development process. From gathering initial
information, to the creation of your web site, and finally to maintenance to keep your web site up to date
and current.

The exact process will vary slightly from designer to designer, but the basics are the same.

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance

PhaseOne:InformationGathering

The first step in designing a successful web site is to gather information. Many things need to be taken
into consideration when the look and feel of your site is created.

This first step is actually the most important one, as it involves a solid understanding of the company it is
created for. It involves a good understanding of you – what your business goals and dreams are, and
how the web can be utilized to help you achieve those goals.

It is important that your web designer start off by asking a lot of questions to help them understand your
business and your needs in a web site.

Certain things to consider are:

 Purpose
What is the purpose of the site? Do you want to provide information, promote a service, sell a
product… ?
 Goals
What do you hope to accomplish by building this web site? Two of the more common goals are
either to make money or share information.
 Target Audience
Is there a specific group of people that will help you reach your goals? It is helpful to picture the
“ideal” person you want to visit your web site. Consider their age, sex or interests – this will later
help determine the best design style for your site.
 Content
What kind of information will the target audience be looking for on your site? Are they looking for
specific information, a particular product or service, online ordering…?

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 16 of 31

PhaseTwo:Planning

Using the information gathered from phase one, it is time to put together a plan for your web site. This is
the point where a site map is developed.

The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a
guide as to what content will be on the site, and is essential to developing a consistent, easy to understand
navigational system. The end-user of the web site – aka your customer – must be kept in mind when
designing your site. These are, after all, the people who will be learning about your service or buying your
product. A good user interface creates an easy to navigate web site, and is the basis for this.

PhaseThree:Design

Drawing from the information gathered up to this point, it’s time to determine the look and feel of
your site.

Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for example,
will look much different than one meant for a financial institution. As part of the design phase, it is also
important to incorporate elements such as the company logo or colors to help strengthen the identity of
your company on the web site.

PhaseFour:Development

The developmental stage is the point where the web site itself is created. At this time, your web designer
will take all of the individual graphic elements from the prototype and use them to create the actual,
functional site.

This is typically done by first developing the home page, followed by a “shell” for the interior pages. The
shell serves as a template for the content pages of your site, as it contains the main navigational structure
for the web site. Once the shell has been created, your designer will take your content and distribute it
throughout the site, in the appropriate areas.

PhaseFive:TestingandDelivery

At this point, your web designer will attend to the final details and test your web site. They will test things
such as the complete functionality of forms or other scripts, as well last testing for last minute
compatibility issues (viewing differences between different web browsers), ensuring that your web site is
optimized to be viewed properly in the most recent browser versions.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 17 of 31

A good web designer is one who is well versed in current standards for web site design and development.
The basic technologies currently used are HTML and CSS (Cascading Style Sheets). As part of testing,
your designer should check to be sure that all of the code written for your web site validates. Valid code
means that your site meets the current web development standards – this is helpful when checking for
issues such as cross-browser compatibility as mentioned above.

PhaseSix:Maintenance

The development of your web site is not necessarily over, though. One way to bring repeat visitors to
your site is to offer new content or products on a regular basis. Most web designers will be more than
happy to continue working together with you, to update the information on your web site. Many
designers offer maintenance packages at reduced rates, based on how often you anticipate making
changes or additions to your web site.

Other maintenance type items include regular site backups, WordPress upgrades, additional plugin
installation.

-Distinguish between hierarchical and linear web structure as used in web design using diagrams.
[4 marks]
• In a linear structure, each page is linked with the pages that follow and precede it in an
ordered chain
• Linear structure works best for Web pages with a clearly defined order
• In an augmented linear structure, each page contains an additional link back to an
opening page

• In the hierarchical structure, the pages are linked going from the most general page
down to more specific pages
• Users can easily move from general to specific and back again
• Within this structure, a user can move quickly to a specific scene within the page,
bypassing the need to move through each scene in the play

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 18 of 31

 (a)

(a)

-Outline four benefits derived from using a three tier architecture in web design. [4 marks]
A “tier” in this case can also be referred to as a “layer”. The three tiers, or layers, involved
include:
1. A Presentation Layer that sends content to browsers in the form of HTML/JS/CSS. This
might leverage frameworks like React, Angular, Ember, Aurora, etc.
2. An Application Layer that uses an application server and processes the business logic for the
application. This might be written in C#, Java, C++, Python, Ruby, etc.
3. A Data Layer which is a database management system that provides access to application
data. This could be MSSQL, MySQL, Oracle, or PostgreSQL, Mongo, etc.

BENEFITS
1. It gives you the ability to update the technology stack of one tier, without impacting other
areas of the application.
2. It allows for different development teams to each work on their own areas of expertise.
Today’s developers are more likely to have deep competency in one area, like coding the
front end of an application, instead of working on the full stack.
3. You are able to scale the application up and out. A separate back-end tier, for example,
allows you to deploy to a variety of databases instead of being locked into one particular
technology. It also allows you to scale up by adding multiple web servers.
4. It adds reliability and more independence of the underlying servers or services.
5. It provides an ease of maintenance of the code base, managing presentation code and
business logic separately, so that a change to business logic, for example, does not impact the
presentation layer.

-Explain two disadvantages of developing a website using template. [2 marks]

Disadvantages of using templates:
1. You can get web templates for free or at a low-price. But these templates are not
unique. Several people may have already bought or downloaded the template you have
chosen. If you cant change the colors or layout a bit, your site looks like a clone of several
sites. If you want a unique template design licensed only to you, you need to spend a

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 19 of 31

 fortune on it.
2. Often, templates don't look good if you stretch them a bit. For example, if there is space
for 100 words in a block and if you try to insert 200 words in that space, the template
layout may change. And this may not look good. This puts limitations on text you can place
in a template based web page, thereby restricting you from optimizing text or being
descriptive about your business. It is well known that the more verbose in a page the more
attention it gets from search engines. A template doesn't come with Meta tags. You need to
insert these meta tags.
3. Templates are good for static pages. If a site needs dynamic pages with a huge database
to built, you need to opt for simpler templates.
4. If you are doing customization for yourself, always work on a copy of the template files.
Templates are often done with simple HTML. But if you try to edit HTML tags instead of text
between them, you might end up with bad page layout.
5. If there are template files with .tpl extension, locate the files where variables are
defined. Then try to establish the logic behind the file system.
-Describe the term sitemap as used in web design. [2 marks]
A site map is a model of a website's content designed to help both users and search
engines navigate the site. A site map can be a hierarchical list of pages (with links)
organized by topic, an organization chart, or an XML document that provides instructions
to search engine crawl bots.

Distinguish between tag inspector and property inspector as used in web authoring applications.
[4 marks]
The Tag Inspector

The Property Inspector is a handy tool. It lets you adjust properties for all sorts of HTML tags,
like a table’s width or a paragraph’s font. But even the Property Inspector doesn’t tell the whole
story. Some HTML tags have additional properties that don’t appear there, such as the <a>
tag’s tabindex property, which lets you control the order in which Dreamweaver highlights links
as a visitor presses the Tab key.

The Property inspector becomes one of your most useful panels because it provides
you with information about any element you've selected in the Document window.

TOPIC FIVE (5) JAVA SCRIPT AND ACTIVE SERVER PAGES.

Distinguish between events and event handlers

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 20 of 31

Events
Events allow you to write JavaScript code that reacts to certain situations. Examples of events
include:

 The user clicking the mouse button

 The Web page loading
 A form field being changed

Event handlers
To allow you to run your bits of code when these events occur, JavaScript provides us with event
handlers. All the event handlers in JavaScript start with the word on, and each event handler
deals with a certain type of event. Here's a list of all the event handlers in JavaScript, along with
the objects they apply to and the events that trigger them:

Event handler Applies to: Triggered when:

The loading of the image is

onAbort Image
cancelled.

Button, Checkbox, FileUpload, Layer, The object in question loses focus

onBlur Password, Radio, Reset, Select, Submit, (e.g. by clicking outside it or
Text, TextArea, Window pressing the TAB key).

The data in the form element is

onChange FileUpload, Select, Text, TextArea
changed by the user.

Button, Document, Checkbox, Link, Radio,

onClick
Reset, Submit
The object is clicked on.

onDblClick Document, Link The object is double-clicked on.

An icon is dragged and dropped

onDragDrop Window
into the browser.

onError Image, Window A JavaScript error occurs.

Button, Checkbox, FileUpload, Layer, The object in question gains focus

onFocus Password, Radio, Reset, Select, Submit, (e.g. by clicking on it or pressing
Text, TextArea, Window the TAB key).

onKeyDown Document, Image, Link, TextArea The user presses a key.

onKeyPress Document, Image, Link, TextArea The user presses or holds down a

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 21 of 31

 key.

onKeyUp Document, Image, Link, TextArea The user releases a key.

The whole page has finished

onLoad Image, Window
loading.

onMouseDown Button, Document, Link The user presses a mouse button.

onMouseMove None The user moves the mouse.

The user moves the mouse away

onMouseOut Image, Link
from the object.

The user moves the mouse over

onMouseOver Image, Link
the object.

onMouseUp Button, Document, Link The user releases a mouse button.

The user moves the browser

onMove Window
window or frame.

The user clicks the form's Reset

onReset Form
button.

The user resizes the browser

onResize Window
window or frame.

The user selects text within the

onSelect Text, Textarea
field.

The user clicks the form's Submit

onSubmit Form
button.

onUnload Window The user leaves the page.

-Define the term uploading as used in internet.

Uploading means data is being sent from your computer to the Internet. Examples
of uploading include sending email, posting photos on a social media site and using your
webcam. Even clicking on a link on a web page sends a tiny data upload. Downloading means
your computer is receiving data from the Internet.

-Distinguish between physical and logical tags as used in HTML. (4 marks)

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 22 of 31

A tag that you apply to an individual character is referred to as a character tag. There
are two types of character tags, physical and logical.

Physical Tags

Physical tags are used to indicate exactly how specific characters are to be
formatted.
The syntax or format for using a PHYSICAL TAG is as follows:

<Tag Name> Characters to be formatted. </Tag Name>

Examples of Physical Character Tags

<B> Indicates that the text should be bold. </B>

<I> Indicates that the text should be italic. </I>

Indicates that the text should be

used with a font such as Courier
<TT> that allots the same width to each
</TT>
character.

Indicates that the text should be

<BIG> displayed in a big font. Available in </BIG>
HTML 3.0 or higher.

Indicates that the text should be displayed in a

<SMALL> </SMALL>
small font. Available in HTML 3.0 or higher.

Indicates that the text should be displayed as

<SUB> a subscript, in a smaller font if possible. Available </SUB>
in HTML 3.0 or higher.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 23 of 31

 Indicates that the text should be displayed as
<SUP> a superscript, in a smaller font if possible. Available </SUP>
in HTML 3.0 or higher.

Indicates that the text should be displayed

<U> </U>
underlined. Not all browsers support this tag.

Logical Tags

Logical tags are used to indicate to the visually impaired that there is some
emphasizes on the text. Each browser has its own technique as to how to indicate to
its viewer that the text between the tags are different.
The syntax or format for using a LOGICAL TAG is as follows:

<Tag Name> Character/s to be formatted. </Tag Name>

Examples of Logical Character Tags

Indicates that characters should be

<EM> emphasized in some way. Usually displayed </EM>
in italics.

Emphasizes characters more strongly than

<STRONG> </STRONG>
<EM>. Usually displayed in a bold font

Indicates a sample of code.

Usually displayed in a Courier
<CODE> font or a similiar font that </CODE>
allots the same width to each
character.

<KBD> Used to offset text that the </KBD>

user should enter. Often
displayed in a Courier font or a

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 24 of 31

 similiar font that allots the
same width to each character.

Indicates a variable. Often displayed in

<VAR> </VAR>
italics or underlined.

Indicates short quotes or citations. Often

<CITE> </CITE>
italized by browsers.

-Outline three uses of server side web programs. (3 marks)

SERVER-SIDE SCRIPT BASICS

 Runs on a server, embedded in the site’s code

 Designed to interact with back-end permanent storage, like databases,

and process information from the server to access the database—like a
direct line from user to database

 Facilitates the transfer of data from server to browser, bringing pages to life in
the browser, e.g., processing and then delivering a field that a user
requests or submits in a form

 Runs on-call. When a webpage is “called up,” or when parts of pages are
“posted back” to the server with AJAX, server-side scripts process and
return data

 Powers functions in dynamic web applications, such as user validation, saving

and retrieving data, and navigating between other pages

 Plays a big role in how a database is built from the ground up and
managed afterwards—an example of how roles often overlap in all
aspects of development

 Build application programming interfaces (APIs), which control what data and
software a site shares with other apps

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 25 of 31

-Explain three benefits of ASP language as used in web development.

 Asp.Net is purely server-side technology, so the code is processed on the

windows server before it is displayed in the web browser. Therefore, ASP.net
applications execute more quickly than interpreted scripts.

 ASP.Net features such as early binding, JIT compilation, caching services

and native optimization supports to get high level of performance. With .NET
you are not limited to JIT but have the option AOT if you want to eliminate
startup delays.

 Asp.Net framework is language independent, means you can choose any

programming language (C#, J#, VB, etc) which best suited to your
application.

 The Common Language Specification data types in all .Net applications

are similar, so no Type conversion is necessary when calling.Net methods,
C++, C# from Visual Basic, or Vice Versa.

 ASP.NET provides full support for XML, CSS and other new as well as
established web standards.

 Introduction of view state helps in maintaining state of the controls

automatically between the postbacks events.

 With the built-in configuration information, Asp.Net is easy to deploy.

There is no need to register components because the configuration
information is built-in.

 Finally, Asp.Net reduces the line of code needed to develop large

applications.

-Outline advantages of using site map.

Below are seven benefits of using Google sitemaps that you cannot afford to ignore.

 Content Modification: You can only maintain higher ranks in the search engines if you
keep modifying content on your site; keeping it fresh and useful to the needs of your
visitors. If you have used a sitemap creator or manually created a sitemap, Google will
be alerted whenever your site’s content is modified.
 Efficient Crawling: Every piece of content on a site should be crawled, which
sometimes may take long or never. With a sitemap, the website can be efficiently and
effectively be crawled.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 26 of 31

 Content Categorization: Sitemaps let you place web pages under categories and
prioritized. This means that the pages carrying your most important content will be
crawled and indexed faster than those with a less priority value.
 Get Discovered: The main reason you invest time and money creating new content for
your site is that you expect to be found on the web. Use a sitemap creator to generate a
sitemap and you will be discovered fast. Highly recommended for new websites or web
pages and other pieces of content.
 Save Time: Some pieces of information should be delivered when still fresh, like news
items. You don’t have to wait and guess when the spiders are likely to pay your website
a visit. You tremendously cut on this time.
 Free service: The best things in life come in small portions and are free! Yes,
submitting your sitemap to Google doesn’t cost a penny, just do it!
 Learn About Your Visitors: You can learn a lot by monitoring your sitemap reports.
Errors will be displayed so that you can fix, traffic sources and even keyword searches.
Using this information can help you improve your content and attract more traffic.

TOPIC SIX (6) WEB SECURITY.

-Explain three security measures that the company should put in place to secure client’s data. [6
marks]

SSH Keys
SSH keys are a pair of cryptographic keys that can be used to authenticate to an SSH server as an
alternative to password-based logins. A private and public key pair are created prior to
authentication. The private key is kept secret and secure by the user, while the public key can be
shared with anyone.

Firewalls
A firewall is a piece of software (or hardware) that controls what services are exposed to the
network. This means blocking or restricting access to every port except for those that should be
publicly available.

VPNs and Private Networking

Private networks are networks that are only available to certain servers or users. For instance, in
DigitalOcean, private networking is available in some regions as a data-center wide network.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 27 of 31

A VPN, or virtual private network, is a way to create secure connections between remote
computers and present the connection as if it were a local private network. This provides a way
to configure your services as if they were on a private network and connect remote servers over
secure connections.

-Describe of the following Internet Security Threats and ways of prevention: [8 marks]
i. Man-in-the middle. iii. Phishing
ii. Spoofing. iv. Pharming
Man-in-the-middle is a type of eavesdropping attack that occurs when a malicious actor inserts
himself as a relay/proxy into a communication session between people or systems.
A spoofing attack is a situation in which one person or program successfully masquerades as
another by falsifying data, thereby gaining an illegitimate advantage.
Phishing the fraudulent practice of sending emails purporting to be from reputable companies in
order to induce individuals to reveal personal information, such as passwords and credit card
numbers.
Pharming is a cyber attack intended to redirect a website's traffic to another, fake site. It can be
conducted either by changing the hosts file on a victim's computer or by exploitation of a
vulnerability in DNS server software.

-State two technical challenges faced when enforcing internet security.(3 marks)

Bandwidth
One approach taken by ISPs to improve their data-carrying capacity and relieve congestion
across the Internet has been to dramatically increase the bandwidth of the backbones connecting
points of presence (POPs).2 Today's backbone speeds are typically on the order of 600 megabits
per second (Mbps) to 2.5 gigabits per second (Gbps), but some ISPs have considerably more
bandwidth in place.

Network Availability
Network availability is another essential element of information systems security. 25 Availability
is the probability that the network (i.e., the Internet) will be operational at a particular point in
time and accessible to those who need it. High availability is a key requirement for mission-
critical and time-critical applications of the Internet, including many in health care. If the
availability of the Internet is uncertain, then health care providers cannot rely on it for the
provision of remote patient care or access to electronic medical records in the emergency room,
although they may still be able to use it (with some degree of frustration) to submit bills and
allow consumers to select physicians.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 28 of 31

TOPIC SEVEN (7) EMERGING TRENDS IN INTERNET BASED

PROGRAMMING.
-Explain three types of software used to deploy HTML files having forms to a web server.

Web Browsers

Test your webpages in a browser to make sure they look like you intended before you launch the
page. Chrome, Firefox, Safari (Mac), and Internet Explorer (Windows) are the most popular
browsers. Check your HTML in as many browsers as you have on your computer and download
lesser-known browsers, such as Opera, as well.

Graphics Editor

The type of graphics editor you need depends on your website. Although Adobe Photoshop is the
gold-standard for working with photos, you may not need that much power. You might prefer a
vector graphic program for logo and illustration work. A few graphics editors to look at for basic
web development use include:

 GIMP is a free, open-source photo-editing program that provides many of the features of its
more expensive competitors. As open-source software, it is available for Windows, Mac, and
Linux.

 Photoshop Elements for the Mac and PC is an image editor that is a light version of its
namesake but with plenty of power for working with graphics for the web.
 Corel PaintShop Pro for PCs has almost all the useful tools you find in Photoshop and an
interface that is easy to use.
 Inkscape for Windows, Mac, and Linux is a free vector graphics editor. This alternative to the
pricier Adobe Illustrator has more than enough power for simple design work and web graphics.

FTP Client

You need an FTP client to transfer your HTML files and supporting images and graphics to your
web server. While FTP is available via the command line in Windows, Macintosh, and Linux, it's
a lot easier to use a client.

There are many good-quality FTP clients available including:

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 29 of 31

  FileZilla is a free FTP client available for Windows, Mac, and Linux. It supports drag-and-drop file
transfers and has a pause and resume feature for uploading large files.
 Cyberduck is free open-source, cross-platform software known for its seamless integration with
external editors and its attractive user interface.
 Free FTP and Direct FTP are made by the same company. Free FTP is a minimalistic client, but it
meets all the basic file transfer needs. Direct FTP is a premium version that offers advanced
features. Both versions are supported by Windows 7,8 and Vista, but only Direct FTP is suitable
for Windows 10.
 Transmit is a premium, Mac-only FTP client. It facilitates unusually fast transfers and supports
Amazon CloudFront.
 Cute FTP is a powerful premium FTP client you can use to make up to 100 transfers at the same
time. It is considered to be one of the most secure FTP clients around.

-Outline two ways in which a web designer would control the size of graphics to be inserted on a
web page. [2 marks]

 Decoration. If the image is just decoration and isn't part of the content, add a blank
alt="". For example, a screen reader doesn't waste time reading out content that is no core
need to the user. Decorative images don't really belong in your HTML. CSS background
images should be used for inserting decoration, but if it is unavoidable, alt="" is the best
way to go.
 Content. If your image provides significant information, provide the same information in
a brief alt text. Or even better, in the main text which everybody can see. Don't write
redundant alt text. How annoying would it be for a sighted user if all paragraphs were
written twice in the main content? If the image is described adequately by the main text
body, you can just use alt="".
 Link. If you put an image inside <a> tags, to turn an image into a link, you still must
provide accessible link text. In such cases you may, either, write it inside the same <a>
element, or inside the image's alt attribute. Whatever works best in your case.
 Text. You should not put your text into images. If your main heading needs a drop
shadow, for example, use CSS for that rather than putting the text into an image.
However, If you really can't avoid doing this, you should supply the text inside the alt
attribute.

-Outline four reasons for the current popularity of open source software in web programming.
[2 marks]

Open source software can have a major impact on your entire organization. There are several
advantages of using open source software. The following are a list of the advantages of opting
for open source software.
1. Lesser hardware costs

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 30 of 31

 Since Linux and open source solutions are easily portable and compressed, it takes lesser
hardware power to carry out the same tasks when compared to the hardware power it takes
on servers, such as, Solaris, Windows or workstations. With this less hardware power
advantage, you can even use cheaper or older hardware and still get the desired results.
2. High-quality software

Open source software is mostly high-quality software. When you use the open source
software, the source code is available. Most open source software are well-designed. Open
source software can also be efficiently used in coding. These reasons make open source
software an ideal choice for organizations.
3. No vendor lock-in

IT managers in organizations face constant frustration when dealing with vendor lock-ins'.
Lack of portability, expensive license fees and inability to customize software are some of
the other disadvantages. Using open source software gives you more freedom and you can
effectively address all these disadvantages.
4. Integrated management

By using open source software, you can benefit from integrated management. Open source
software uses technologies, such as, common information model (CIM) and web based
enterprise management (WBEM). These high-end technologies enable you to integrate and
combine server, application, service and workstation management. This integration would
result in efficient administration.

DICT MOD 3 INTERNET BASED PROGRAMMING REVISION KIT Page 31 of 31