Designing a web site using secured web technology

1. Designing a web site using secured web technology

1.1. The detailed appearance of index.html as expected in a web browser that supports cascading style sheet is as follows:

The header section of the index.html consists of the title as “Andy's Antiques” which will be displayed on the window title bar. A link to cascaded style sheet “basic_style0608.css” is attached. A screen-shot of the index.html is shown in Figure-1. The advantage of using a CSS is discussed in 1.2.

The page background of index.html is yellow. The heading “Andy's Antiques” has the following attributes:

  • Text Colour is set to brown.
  • The font used is 28 point Arial with font style is italic; weight is bold.
  • Text is aligned to centre.

The paragraph “We specialise in fine antiques including: clocks, furniture and jewellery. Choose from our extensive range:” is of 12 point Arial font. It is noticed that there is a table within the index.html page with the following properties:

  • Table width is set to 50% of the page.
  • Cellspacing - sets the spacing between table cells, in this case it is set to “10”.
  • Table border - is the width of the table border around the table and the cells, which is set to “5”.
  • The table is aligned to centre of the web page.

The content of the table data cell such as Clock, Furniture and Jewellery has an Arial font with 12 points and they are linked with respective pages, the colour of the link is set to purple., when a user clicks on Clocks it will take the user to clock.html page similarly clicking on Furniture will take the user to furniture.html page and Jewellery to jewellery.html page.

1.2. What is CSS?

CSS stands for Cascade Style Sheet, It is a used for styling web pages such as to design page design, text, body tags, HTML tags, links that have special attributes, and printable page attributes. While CSS can be used for an individual page, another use of CSS is in external style sheets. Rather than formatting being done for each page in the HTML code for that page, styling with CSS using external style sheets is separate, and each CSS style can be applied like a template to multiple pages. In addition a website can have multiple CSS files.

1.2.1. Advantages of using CSS

According to “Using CSS significantly contributes to the separation of structure and presentation.” The advantages are as follows:

  • Website visitors can use Lower bandwidth.
  • A separate CSS file can be stored temporarily in the visitor's browser; as a result it only needs to be loaded once. The file size is reduced, as the HTML pages no longer contain any mark-up for the appearance. Therefore, both the visitor and the host save bandwidth. The page loads faster in the user's browser.
  • Easier to maintain and update the website.
  • The structure and presentation in CSS ensures that the content is well ordered and the structure is simple. Consequently simplifies construction and maintenance by web developers and content managers.
  • Development of website is reduced in terms of time. Developers can work on a common appearance and the content/structure independent of each other. This accelerates up the production process and reduces the chance of flaws.
  • CSS provides consistency in the presentation of the site allowing visitors recognise and use the site.

Options for web developers and visitors

CSS allows web developers a broad range of presentation options compared to HTML markup. HTML Markup for text presentation is very limited and deprecated. Furthermore, it causes inconvenience regarding accessibility, compatibility, construction and site maintenance.

CSS allows the site visitors to control how he wants to view the sites. With the help of User Style Sheets a user can overwrite visual aspects of the site in his browser, for example a user might want to increase the contrast or to enable big fonts, depending on their choices. Web developers who use CSS (rather than markup) for the presentation of a website make it easier for the visitor to apply such a change. Continuity and compatibility Browser support for CSS is currently fair to good. Modern browsers currently support the basic rules for presentation, defined in CSS Level 1.

1.2.2. How HTTP works

The Hypertext Transfer Protocol (HTTP) is a language used by web clients and servers to communicate to each other. HTTP is considered as the backbone of the World Wide Web. The general format of HTTP process has three parts:

  • Request or response line
  • Header section and
  • Entity body

The first line of a user request begins with an HTTP command known as Method. The method tells the server regarding the intention of the client request. The three methods defined for HTTP are:

· GET - The GET method is used to request for information to be found at a specified URI (uniform resource identifier) on the server. The GET request result can be a document file accessible by the server or the output of a program /CGI script or the output from a hardware device.

The HEAD method requests only the header information on a file or resource.

The server does not transmit anything in the data portion of the reply. This method is helpful for the following information:

  • The amendment time of a document, most useful for cache-related queries.
  • The size of the file/document.
  • The file/document type, to examine the documents of a certain type.
  • The server type, to allow tailored server queries.

Example: A HTTP transaction using HEAD request

POST - The POST method allows data to be sent to the server to be processed. The data is directed to a data handling program that the server has access to e.g. a CGI script. The POST method is more robust and secure that GET Method which can be used for the following applications:

        • Network services- such as newsgroup posting
        • Command line interface programs
        • Submitting HTML form data to Databases

The data send to the server is in entity-body section of client's request. The encoding scheme most commonly used with POST is URL-encoding for CGI processing.

Example: A POST Method

A Client request using POST method to send next semester intake:

Other HTTP methods that are not frequently used are as follows:

  • LINK - Requests the header information that is associated with a file/document on the server.
  • PUT - Request the entity-body of the request be stored at the specific URI.
  • DELETE - Requests the removal of data at a URI on the server.
  • CONNECT - A reserved method used specifically for Secure Socket Layer (SSL) tunnelling.

Status Code explained:

Code Range

Response Meaning




Client request successful


Client request restricted, further action necessary


Client request incomplete


Server errors

1.3 Changing the size of the paragraph font (<p>) from 14 point Times to 12 point Courier in index.html.

This can be achieved by either of the two ways:

First method is to embed the style sheet into the index.html, head section by using the <style> tag. Example is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"



<style type="text/css">


body {color:black;background:yellow}

h1 {font:28pt Arial;font-style:italic;font weight:bold;color:brown; text-align:center}

p1 {font:12pt Arial}

p {font:12pt Courier;text-align:left}




<title>Andy's Antiques</title>



<h1>Andy's Antiques</h1>

<p>We specialise in fine antiques including: clocks, furniture and jewellery.<br><br>

Choose from our extensive range:</p>

<table width="50%" cellspacing="10" border="5" align=center><tr>

<td><p1><a href="clocks.html">Clock</a></p1></td>

<td><p1><a href="furniture.html">Furniture</a></p1></td>

<td><p1><a href="jewellery.html">Jewellery</a></p1></td>





Second method is by editing the basic_style0608.css with the following changes:

body {color:black;background:yellow}

h1 {font:28pt Arial;font-style:italic;font weight:bold;color:brown; text-align:center}

p1 {font:12pt Arial}

p {font:12pt Courier;text-align:left}


And save the file as basic_style0609.css.

Only the index.html file is now linked to separate external style sheet which is “basic_style0609.css”, all other pages will be linked to basic_style0608.css example is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"



<title>Andy's Antiques</title>

<link rel="stylesheet" href="basic_style0609.css">



<h1>Andy's Antiques</h1>

<p>We specialise in fine antiques including: clocks, furniture and jewellery.<br><br>

Choose from our extensive range:</p>

<table width="50%" cellspacing="10" border="5" align=center>


<td><p1><a href="clocks.html">Clock</a></p1></td>

<td><p1><a href="furniture.html">Furniture</a></p1></td>

<td><p1><a href="jewellery.html">Jewellery</a></p1></td>





1.4 The purpose of the JavaScript function

  • The function processForm() will make sure users fills in both input fields which are catalogue number and offer. If user doesn't fill both fields on clicking the submit button, the error message will be displayed “You must complete both fields”. This is a type of validation check. Lets us discuss how it works. The variable ok is set to true, this is known as initialization. The If, else conditional statement will check for user inputs which are cat_number and offer. If the user leaves any of the input fields empty the variable ok will return false and the error message is displayed using the alert( ) javascript keywork. Figure-2 shows a screen-shot of the user entry and the error message.
  • The method = “get” function is used to collect values from the form (offerDetails). Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) and has limits on the amount of information to send (max. 100 characters).
  • The relative path is most useful URL path as it points to a file or directory in relation to the present file or directory (folder). So, here a relative URL would help in web site maintenance. Moving files between directories can be easily done even a website can be easily moved from one domain name to another. And there is no need to worry when updating links, images or even paths.

1.5. GIF, JPEG and PNG image file formats.

1.5.a. The main features associated with GIF, JPEG and PNG


Both GIF and JPEG are presently the major file types for graphics on the Internet. Details of each of them are stated below.

GIF Format

The GIF format is one of the most accepted formats for putting animation online. This format is exceptional at compressing areas of images with large areas of the same colour. Flash or other vector-based animation formats are also common but normally cost more. The GIF89a format supports transparency as well as interlacing.

Maximum colour that GIF files support is 256 colours, which makes them realistic for almost all graphics except photographs. The GIF files size can be reduced by just reducing the number of colours on the palette. The compression scheme used by GIF is LZW compression to make images much smaller as possible without losing any data.


A GIF format also supports transparency which allows a graphic designer to assign the background of the image transparent. If a transparent GIF is placed in a light blue table cell, the background colour of that image will turn light blue.


The interlacing feature creates the illusion of faster loading graphics. This is where when an image is presented in a browser in several steps. It depends as the information is downloaded, firstly the image will be blurry, but image becomes progressively distinct until the entire image has been downloaded from the server. Interlaced GIF files are usually larger than non-interlaced ones. So, it is recommended to use interlacing only when required.

When to use GIF

Usually, GIF files are mostly used for logos, line drawings and icons. Not recommended for using it for photographic images, and graphics which have long stretches of continuous-tone in them. When you're designing GIF files, keep away from using gradients and turn off anti-aliasing where possible to minimize the file size.

JPEG Format

The JPEG format support for 16.7 million colours and primarily designed for photographic images. The internal compression algorithm of a JPEG format, unlike GIF format, in fact throws out information. Depending on what settings is used, the thrown out data may or may not be visible to the eye. Once reducing the quality of an image and saved, the extra data cannot be regained.

When to use JPEG

As a rule, the JPEG format should be used on photographic images, and images which do not look as good with only 256 colours.

PNG format

PNG is the newest file format and widely supported by the Web. PNG was developed to exceed the limitations of GIFs. PNG was designed to cover the main characteristics of the GIF format, together with streaming and progressive file formats. Moreover, it provides greater colour depth. PNG supports true colour with 48-bit colour images, as opposed to the 24-bit colour scheme of JPEG. PNG format will be well-known in the near future, even though it will never completely replace GIF because it doesn't support animation.

1.5.b. Performance issues on website which have large number of images

As we know graphics tend to be big, let us consider the followings:

1280 X 854 24 bit image

1280 X 854 = 1,093,120 pixels

1,093, 120 X 3 bytes = 3,279,360 bytes (3.13 Mb)

Approximately 240 images per 750 Mb CD-ROM

Therefore data compression is essential.

Image Compression are of two types which are:

Lossless Compression - There is no quality loss during the compression. Decompressed image is a perfect copy of the original image. Example of these type of file format is GIF.

Lossy Compression - Here the quality losses during compression. Decompressed image is an imperfect approximation of the original. Example of these type pf file format is JPEG.

Run Length Encoding

RLE (Run Length Encoding)

This is a simple lossless compression algorithm. Not widely used on its own (very commonly used in conjunction with other algorithms). Run (repeated data) are replaced by the single data item and the length of the run

1.5.c. The design issues that AA would need to concern are as follows:

Dealing with variety of browsers and Operating System Platforms/Environment

- The web page should be able to address various browser capabilities. The few major browsers are Microsoft Internet Explorer, Netscape Navigator, Mozilla Fire Fox and Safari. So, careful attention is required when using JavaScript, CSS or DHTML. Most web designers based their design on the functionality of Navigator and Internet explorer Windows system.

Make accessible to the world with the safest HTML standards - To make sure to work on all browsers, including Lynx and Version 2.0 of the popular browsers. Design page that take advantage of technology supported in previous version of major browsers to make sure tables, frames and JavaScripts render as expected.

2. Writing Report

2.1. World Wide Web and Change

Business benefits of Intranet system:

Businesses are finding that some of the greatest benefits of internet technology come from application s that lower agency and coordination costs. Although companies have used internal networks for many years to manage and coordinate their business processes, intranets quickly are becoming the technology of choice for electronic business. The intranet typically centres on a portal to provide a single point of access to internal systems and documents using web interface. Such corporate portal provides a single, consolidate view of the information resources on the intranet and can be customised. They may also feature e-mail, collaboration tools and tools for searching internal corporate systems and documents.

How intranets supports online shopping

Intranets are used in all the major functional areas of businesses, enabling organisations to manage more business processes electronically. Figure 2.1 illustrates some of the internet applications that have been developed for finance and accounting, human resources, sales and marketing and manufacturing and production.

The pre-internet environment, business process integration was hampered by the difficulties of marketing information flow smoothly among many different kinds of systems servicing different functional areas and parts of organisation. Some of this integration can be supplied relatively inexpensive using intranet technology. Firms are using intranets to improve coordination among their internal business processes, and they are deploying extranets to coordinate processes shared with their customers, business partners and other organisations.

The internet and internet technology have created extraordinary opportunities for new and traditional business to exploit digital technology. Firms are using these technologies to create new product and services, new channels for sales and marketing and even entirely new businesses. These technologies have also strengthened traditional business model by helping firms reduce supply chain costs, increase production efficiency, and tightened relationship with customers by getting feedback from websites or online communities to improve product design.

E-business and e-commerce often require new organisational design and management process to take advantage of internet technology. Companies may need to redesign entire business process rather than trying to graft new technology on existing business practice.

2.2. Internet World Statistics



POPULATION (2009 est.)




USER GROWTH 2000-2009


























































3. Case Study

3.1. Royal Bank of Scotland Central England

3.1.a. Business benefits and limitations of an intrusion-detection system


As we know networks of major businesses are attacked by hackers. An intrusion detection system is a security software tool (e.g Entercept) which can screen incoming traffic and filter out the hacker distributed denial of service (DDOS) traffic while allowing legitimate traffic into their website. First Citizen Bank paid millions of pounds for several destructive computer viruses and hackers probes and attacks.

The benefits of such an intrusion detection systems are as follows:

  • Provides intrusion detection and prevention software's for host and application services.
  • The software decides whether to permit a system request into a server from an external network (malicious request) source based on the signature of the request or behaviour rule. For e.g. If hacker were seeking a password file an a web server, that behaviour would be contrary to the normal behaviour of someone accessing a web page and would not be allowed for a permission to the web server.
  • It can give network administrator's time to thoroughly test patches and then apply them themselves.


An intrusion detection system does precisely as the name suggests: it can detect possible intrusions. More specifically, IDS tools try to detect computer attacks or computer misuse or both, and alert the appropriate individuals upon detection. It typically works as burglar alarm system equipped at house. IDS's could be used in conjunction with firewalls, which intend to regulate and manage the flow of information into and out of a network. The two security tools must not be considered as equivalent. They can protect a network and attempt to prevent intrusions, while IDS tools detects whether or not the network is under attack or has, in fact, been breached. IDS tools thus form a central part of a systematic and complete security system. However, they don't fully guarantee security, but when used with security policy, vulnerability assessments, data encryption, user authentication, access control, and firewalls, they can greatly enhance network safety.

3.1.b. What security defence that small businesses need to take to protect their website and internet system.

Consideration has been taken to ensure the security of the networks. If the firms uses net extensively in dealing with its customers, suppliers or any stakeholders then valuable information such as Credit Card details, bank account details and personal data will be used in communications, so effective security measures is required which should prevent intruders to gain access to the network. Access control will consist of policies and procedures to prevent improper access to system by unauthorized insider or outsider. To gain access to the website a user will be authorized and authenticated. illustrates proposed network security for small businesses.

3.2. Business on the Web: Evaluating Capital One Financial

3.2.a. Capital One Business Evaluation

Business value

By aligning customer value with business value by reshaping the organisation and infrastructure with customer defined value. Attract loyal customers and attain growth by completing on customer values.

Put into operation a customer focused vision - not only the product but also through process and services. Continuously monitoring and maintaining alignment between the customer ‘visions' of ‘ideal value delivery'.

Customer Value

The goal of customer value is to deliver optimal value, improvement program. Capital one try to create the kind of business that can deliver to customers what they want. Provide information to all its customers with ID theft advice and information 24 hours a day

Please be aware that the free essay that you were just reading was not written by us. This essay, and all of the others available to view on the website, were provided to us by students in exchange for services that we offer. This relationship helps our students to get an even better deal while also contributing to the biggest free essay resource in the UK!