Simple Business Web site: How to Create Web Pages
This resource is designed specifically for Unit 6 of the Edexcel BTEC qualification, 'Business Online'.
Aim
In this section we examine how Web pages are produced using HyperText Markup Language (HTML). The structure of HTML will be explored and code examples provided. There is also a discussion of authoring tools and an introduction to basic formatting with in Web pages using Cascading Style Sheets.
Writing Web pages
We have divided this section into the following sub-sections:
- An introduction to HTML
- Basic Web page structure
- Basic HTML tags
- Authoring Web pages
- Basic formatting with CSS
- Preparing images for the Web
- Interactivity
- e-commerce
- Next steps...
An introduction to HTML
Web pages are written in a language called HTML or HyperText Mark-up Language. As its name suggests, HTML is a mark-up language meaning that sections of text are marked up with special tags that indicate what the text is. For example, there are special tags (also called elements) to indicate that a particular piece of text is a paragraph, a heading, a quote or an address.
These tags act as instructions to the Web browser and 'tell' the browser what to do with that bit of text. For example, a heading tag tells the browser to display that piece of text larger than the rest of the text in the page.
An example tag:
<h1>An important heading</h1>
- Tags are usually paired (although see below)
- <h1> is the starting tag
- </h1> is the end tag
- The <h1> tag identifies a piece of text as 'heading 1' - the largest/most important heading.
- The <h1> is a container tag, it contains a piece of text. In this example the <h1> tag contains the phrase 'An important heading'
- You can also have empty tags that don't contain any text or have an end tag. For example, <hr> which creates a horizontal rule in the page.
- Tags can also have attributes that are used to change the behaviour of the tag. For example:
<p align="center">This is a paragraph of text.</p>
The 'align' attribute has the value 'center' and this instructs the browser to align this paragraph in the centre of the page. NB. the American spelling of the word center is used.
You can have uppercase or lowercase tags. However for the purposes of compatibility with the latest version of HTML we strongly recommend you use lowercase tags and always make sure your attribute (for example: <p align="center">) appears within quotes (").
Basic Web page structure
HTML has a strictly defined structure, you cannot just put the tags wherever you want. One of the most common mistakes made by people new to writing Web pages (and even some 'professional' Web developers) is that they do not understand how tags can be nested and the correct structure of an HTML document (or Web page). The correct structure for an HTML page is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>
Now let us examine each line in turn:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> =
This line tells the Web browser which version of HTML you are using - it is called the Document Type Declaration (DTD). Many developers forget to include this line but it's actually very important - particularly for interoperability, that is the correct display of you Web page in a variety of Web enabled devices (e.g. Web browsers, mobile phones, Pesonal Digital Assistants, etc.). You can just copy this line between all of your Web pages.
<html> =
All HTML documents must have a pair of <html> tags. These tags enclose all of the rest of the document. The only information that may appear outside the <html> tags is the Doctype Declaration above. Between the <html> tags the HTML document itself is divided into two sections, the <head> and the <body>
<head> =
The <head> section of the HTML document usually only contains information about the document itself. Nothing put in the <head> section of the document will display within the browser window (i.e. where the Web pages appear).
<title>Page title</title> =
The <title> tag is one of the few tags permitted between the <head> tags. The <title> tag is a container tag, the text contained within it is displayed in the top bar of your Web browser application (if you're using Windows this is the top blue bar that also contains the buttons used to minimise, maximise and close the window).
</head> = This is the tag closing the head section.
<body> = This tag starts the body section of the HTML page. Between the start and end body tags comes the entire contents of the Web page that is displayed in the browser window. We have already met the <p>, <hr> and <h1> tags - these tags can only appear between the two body tags.
</body> = The closing body tag.
</html> = The closing html tag.
Task 1
IMPORTANT - Downloading an HTML template for use in later tasks
The best way to learn HTML is to try it out. To do this all you need is a text editor. For example: Notepad on a Windows PC (not WordPad), SimpleText for Mac and Emacs, Nano or Vi for Linux. You will also need to have a Web browser installed on your computer so you can view your HTML page. One of the most common Web browsers is Microsoft Internet Explorer(http://www.microsoft.com/windows/ie/default.mspx), however, there are a wide range of Web browsers and it is a good idea to try out your pages in a variety of browsers. Excellent alternatives to Internet Explorer (particularly if you do not use Windows) are:
- Firefox (http://www.mozilla.org/products/firefox/)
- Mozilla (http://www.mozilla.org/products/mozilla1.x/)
- Opera (http://www.opera.com/)
- Lynx - a text only browser (http://lynx.browser.org/)
Having made sure you have access to a text editor and a Web browser you can now download an example HTML template for use in later tasks. Follow the below instructions carefully:
- Download the HTML template by, right-clicking on the link below (or tabbing to the link and pressing 'Shift + F10') and selecting 'Save Target as' (or 'Save link target as').
- Save the file onto your computer and remember where you saved it.
- The link to the HTML template is below. Do not follow the link by clicking on it using a mouse or tabbing to the link and pressing return. If you do you will see a blank screen. If this happens press the back button on your browser and follow steps 1 and 2 again carefully:
Download HTML template
Irrespective of the text editor you are using the process by which you edit and view your changes to the HTML document you downloaded above is as follows. These instructions do assume you have some familiarity with a text editor, if this is not the case you should refer to the manual or help pages within the text editor before continuing:
- Open your chosen text editor.
- Open the HTML file you downloaded (see download instructions above).
- Make changes to the HTML file. For example, insert: <p>This is a new paragraph.</p> between the <body> and </body> tags.
- Now save your HTML file. NB. if you are creating a new HTML file rather than editing our example then you will need to make sure you save the file with a .htm or .html file extension. You should not have spaces in your filename (use _ or - instead) and it's a good idea to only use lowercase characters since on some Web servers filenames are case-sensitive. Always using lowercase characters means you don't need to worry about the case of filenames when it comes to linking to files.
Having edited and saved the HTML file you now need to view your changes in a Web browser.
- Start your chosen Web browser.
- Select 'Open...' or 'Open File...' depending on your browser from the 'File' menu.
- Now browse to the HTML file you have just edited and select it and, if necessary, confirm your selection.
- Your HTML page should now be displayed in the Web browser.
- You can now return to your text editor, make some changes and view them in the Web browser. When you have made your changes press the Reload/Refresh button in the browser (or press F5 or Cntrl + r) to reload the page and see your changes.
Basic HTML tags
HTML tags are usually English words or abbreviations.
<p>This is the first sentence in a paragraph. This is the second.</p> - a paragraph
<br> - new line (an empty tag)
<h1>The biggest heading</h1> - level 1 heading
<h2>Not quite the biggest heading</h2> - level 2 heading
<h3>A medium-sized heading</h3> - level 3 heading
<h4>A slightly smaller heading</h4> - level 4 heading
<h5>Not quite the smallest heading</h5> - level 5 heading
<h6>A very small heading</h6> - level 6 heading
It is important to note that there are only six heading sizes, there is no <h0> or <h7> etc. In order to control the size of these six headings Web developers use a technology called Cascading Style Sheets.
Other tags affecting the appearance of text include:
Physical styles:
- <b> - bold
- <i> - italics
- <tt> - teletype (non-proportional font). e.g. teletype
- <u> - underlined text
Logical styles:
- <em> - emphasis
- <strong> - strong emphasis
- <cite> - a citation or reference
In practice you should use logical styles in preference to physical styles. This is because not all Web enabled devices (particularly some mobile phones) are able to display bold or italic text. By using the logical styles you instruct the Web device that you want this piece of text emphasised or given strong emphasis and, depending on the capabilities of the device, it will display the text appropriately. Exceptions to this rule are, for example, scientific names for species which (by convention) are always italicised, e.g. Bufo bufo - the common toad.
Task 2
Using the HTML tags discussed in the section above add some headings and paragraphs to the HTML document you downloaded and began editing in Task 1. Now try giving some of the text emphasis and strong emphasis using the logical styles above.
Adding lists
There are two types of list:
Unordered list
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
The above produces:
Ordered list
<ol>
<li>Beetles</li>
<li>Praying Mantids</li>
<li>Flies</li>
</ol>
The above produces:
- Beetles
- Praying Mantids
- Flies
Lists can also be nested:
<ol>
<li>Beetles</li>
<li>Praying Mantids</li>
<li>Flies, including:
<ul>
<li>Greenbottles</li>
<li>Bluebottles</li>
<li>Dungflies</li>
</ul>
</li>
</ol>
The above produces:
- Beetles
- Praying Mantids
- Flies, including:
- Greenbottles
- Bluebottles
- Dungflies
Other tags include:
<sub> - subscript, e.g. H20
<sup> - superscript, e.g. E = mc2
<!-- comments --> - comments do not appear within the Web browsers. However it's good practice to put them in the source code for your Web pages to remind yourself what a particular piece of HTML does or why you did it 'that way', etc.
<hr> - horizontal rule e.g.
Task 3
Using the basic structure of an HTML page (downloaded in Task 1) produce a Web page for a fictitious company. Assume the company sells sporting goods to individuals and direct to other businesses. Start the page with a heading (the company name) and provide a paragraph about the business. Then produce a bulleted list of your business activities: Sales to individuals; Sales to trade (including gyms and sports centres); Product support/aftersales care; Training advice.
Now view your page in a Web browser.
HTML entities
You may be wondering how a Web browser can display <, > and " if they all appear in HTML tags?
If you want to display these characters then you must use special codes called 'entities'. For example:
- < is for a <
- > is for a >
- " is for a "
As a result we also need an entity for &, for this we use &
Other characters require the use of an entity rather than typing the character directly into a page. Some other common entities include:
- £ is for a £
- € is for a €
- ¢ is for a ¢
- ¼ is for a ¼
- ½ is for a ½
- ¾ is for a ¾
- © is for a ©
There are online lookup tables for characters and their equivalent entities. (http://www.htmlhelp.com/reference/html40/entities/latin1.html)
Adding images:
Images are added to Web pages using the <img> tag, for example,
<img src="/images/homepage/brown.jpg" alt="The Chancellor of the Exchequer, Gordon Brown. Copyright: World Bank and International Monetary Fund Spring Meetings Begin, Getty Images available from Education Image Gallery." height="67" width="67" border="1">
inserts the following picture:
The attributes used in the above HTML code are:
- src = the location on the Web server where the image file can be found.
- alt = the alternative text. This text is displayed if the device doesn't support the display of images. For example, a device (a screen reader or text-to-speech reader) that reads the content of the page aloud to a blind user would read aloud this text so the user knew what the picture was of. On many sites the alt text for images is omitted, this is an unforgiveable error.
- height, width = the height and width of the image in pixels. These attributes are often omitted from Web sites. However, images are usually larger in filesize than the HTML page containing them. The HTML page downloads first and is displayed in the browser. If the dimensions for the image are given then the browser leaves space for that image (while it downloads) and formats the text accordingly. If the dimensions are not given the text wrapping will keep changing to accomodate the images until all the images have been downloaded. This means the text 'jumps' about the page and it's difficult for the user who has already started reading the page to follow.
- border = adds a border (in pixels) to the image. If no border is desired the you can set it to zero: border="0".
Task 4
Save the image below to your computer by right-clicking on the image below and selecting 'Save Image As' (or 'Save picture as'). When prompted select an appropriate filename and save the image in the same directory/folder as the HTML file you produced in the tasks above.
Now add the image to one of your HTML pages using the code above. Remember to change the values of src, alt, width and height for the image being used.
Linking to other pages
Linking to other pages is what makes the Web a web. To create a link you must use the <a> tag:
<a href="online1.htm">Principles of Online Presence</a>
The above code produces the following link:
Principles of Online Presence
The href attribute refers to the page you want to link to (in this case a file called 'online1.htm' in the same directory as the one currently being viewed) and the text between the <a> and </a> tags is the text that forms the link text. If you want to link to a page on another site the link should take the form:
<a href="http://www.ilrt.bristol.ac.uk">Institute for Learning and Research Technology</a>
producing:
Institute for Learning and Research Technology
You must include the http:// part of the URL; <a href="www.ilrt.bristol.ac.uk"> would not work.
Task 5
Using the basic structure of an HTML page, create a second Web page for your business Web site. On this second page list the categories of sporting goods you sell to individuals. Now save this page in the same directory/folder as the first page and create links between them (from the 'Sales to individuals' item in the bulleted list). You should also create a link from the second page you created back to the first.
Now view your page in a Web browser and test the links.
Creating tables
Tables are used to present tabular data.
| Year | Quarter | GDP growth |
|---|
| 1994 | 1 | 1.37 |
| 1994 | 2 | 1.38 |
| 1994 | 3 | 1.00 |
| 1994 | 4 | 2.05 |
Tables usually contain four different tags:
- <table> - this tag defines the start and end points of the table.
- <tr> - this tag is nested inside the <table> tag and defines the start and end of each new row of the table.
- <td> - this tag defines the start and end of each piece of data within the table, this tag is nested inside the <tr> tags. The number of columns is determined by the number of <td></td> tags within each row.
- <th> - this tag is very similar to the <td> tag. However, it defines the data between start and end <th> tags as a table heading. Web browsers often display table headings in bold.
Refering back to the table above and the explanation of the tags look at the following code for the same table:
<table border="1" cellspacing="0" cellpadding="4" summary="UK GDP data for the four yearly quarters in 1994">
<tr><th>Year</th><th>Quarter</th><th>GDP growth</th></tr>
<tr><td>1994</td><td>1</td><td>1.37</td></tr>
<tr><td>1994</td><td>2</td><td>1.38</td></tr>
<tr><td>1994</td><td>3</td><td>1.00</td></tr>
<tr><td>1994</td><td>4</td><td>2.05</td></tr>
</table>
You will notice that the <table> tag contains a number of attributes, these are:
- border - adds a border (in pixels) to the table. If no border is desired the you can set it to zero: border="0"
- cellspacing - sets the spacing between the cells.
- cellpadding - sets the spacing inside the cells, i.e. how far the data in each cell is from the edge of the cell.
- summary - this attribute is used to provide a textual summary of the table contents to visitors using non-visual devices, for example, a screen reader.
Tables with hidden borders are often used to provide the structure of a Web page and position graphics and text. However, this practice has now been superseded by the use of Cascading Style Sheets.
Task 6
Returning to the first Web page you created earlier, add a table listing your 'top-selling' products and their cost.
Also add links to external Web pages on activities relating to your 'top-selling' products. For example, with 'footballs' you could add a link to BBC Sport's Football pages (http://news.bbc.co.uk/sport1/hi/football/default.stm).
Now view your page in a Web browser.
In this section we covered the basic structure of an HTML page and a few of the most common tags. You are strongly recommended to read some of the resources listed in the next steps section.
Authoring Web pages
Web pages can be written in nothing more complicated than a basic text editor. Many Web developers learn their trade by hand-coding pages. In fact, you can almost always spot someone who learned to write Web pages by hand-coding from someone who has always used an HTML editing tool. The code of the former is often more efficient and if any problems occur they know exactly where to look.
Having learned how to produce Web pages it is often desirable to use an authoring tool to help you. These tools reduce the time it takes to produce Web pages and the potential for you to introduce errors into your HTML. Excluding text editors which we have already met, there are two other types of tools that can be used to produce Web pages:
- Code editors: at first glance code editors are similar in appearance to text editors. You edit the HTML code directly. However the main difference is that rather than typing the tags by hand you can highlight a section of text, press an appropriate button and the tags will be inserted at the start and end of the text. Code editors reduce the time it takes to 'mark-up' (the process by which a Web page is produced) a page and many of the advanced code editors include tools for checking your code, spell checking, automatically inserting HTML entities, etc. Example free code editors include:
- HTML-Kit - Windows (http://www.chami.com/html-kit/)
- Taco HTML Edit - Mac (http://tacosw.com/htmledit/)
- Bluefish - Linux, Unix, FreeBSD, Mac OS-X, etc. (http://bluefish.openoffice.nl/)
- WYSIWYG editors: WYSIWYG (What You See Is What You Get - pronounced "Whizzy-Wig") editors allow you to view and edit the page as it would appear through the Web browser. You do not edit the code directly (although some editors will allow you to if you want). These tools produce all the HTML for you, the output pages are still HTML files but the process by which you create and edit them is what sets these tools apart from the others. These tools tend to be large packages and are often expensive, especially when you consider that the code editors listed above are free. Example WYSIWYG editors include:
- Macromedia Dreamweaver - Windows, Mac (http://www.macromedia.com/software/dreamweaver/)
- Adobe GoLive - Windows, Mac (http://www.adobe.com/products/golive/main.html)
- Microsoft FrontPage - Windows (http://www.microsoft.com/products/info/product.aspx?view=22&pcid=57bccce5-f934-422d-a11a-2afd0c0014db&type=ovr)
The type of editor you use is often down to a matter of personal taste (and cost). However, text and code editors have an inherent flexibility that isn't present in many WYSIWYG editors. The HTML language is still developing and has been improved and added to over the years. Text and code editors are not tied in to producing a particular version of HTML so with relatively little effort these tools can be used to produce pages adhering to the current HTML standards. In contrast, WYSIWYG editors produce the code for you and consequently the programs must be updated in order to produce HTML adhering to current standards. These updates must be performed by the software publishers and often constitute a new version of the software and an associated cost implication. In addition, there is also a delay between the release of a new HTML version and the update to the WYSIWYG software. The above is also true for Cascading Style Sheets (the technology used to control formatting and presentation within Web pages) since, by their nature, WYSIWYG editors must also write this code for you too.
Task 7
Consider the reasons why a business may choose to buy WYSIWYG software to enable staff to maintain the company's Web site. How might the size of the business affect this decision?
Basic formatting with CSS
HTML is used to control the structure of a Web page. As we have discovered, there are tags defining text forming paragraphs, headings, lists, etc. During the mid-90's Netscape introduced the <font> tag (Microsoft extended it with additional attributes), this tag was adopted as a way of changing the font face, size colour, etc. Unfortunately, the addition of the <font> tag meant that the HTML was no longer just defining the content/structure of the page but also the presentation.
Failing to separate content from presentation results in overly-complex pages and considerably reduces interoperability (the display of Web pages in a wide variety of Web enabled devices) - for example, a Web browser on a mobile phone also needs to understand the additional tags controlling presentation even though it may not be able to display the font face specified, etc.
As a result the <font> tag (and other similar presentational tags and attributes) have been deprecated and should not appear in Web pages. Instead a technology called Cascading Style Sheets (CSS) should be used. CSS can control the look and feel (size, font face, colour, spacing, etc.) of text in addition to being used to position the different parts of a Web page.
CSS can be utilised in three ways:
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Inline CSS takes the form of an attribute within the particular tag that you want the style applied to. For example:
<p style="font-size : 110%; color : #111199; background-color: #cccccc;">Example paragraph with presentation controlled by CSS.</p>
produces...
Example paragraph with presentation controlled by CSS.
You will notice that the value for the style attribute contains a number of properties and values:
- font-size : 110%; - this sets the font size of the text. In this case the text is 10% larger than the default text size set in the Web browser. Other possible units are em, px (pixels), pt (points), cm (centimetres). Units such as px, pt and cm should be avoided since, whilst it might be good to fix a font size from a design perspective, setting precise values can mean that these sizes cannot be overridden by browser settings. As a result, someone with impaired vision would not be able to increase the font size to improve the legibility of the text.
- color : #114690; - this sets the colour of the text. Note that it uses the American spelling of colour (color). The number following the # defines the colour. The numbers are arranged in three pairs corresponding to the amounts of red, green and blue being used to make the desired colour - this number is referred to as the hexadecimal or just hex number. Each part of the pair can be formed from 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f with 00 being the darkest and ff the lightest. Although some English words for a colour (e.g. red) can be used instead of the hex number these are not supported by all browsers and should be avoided. Hex numbers can be found on lookup tables(http://www.yvg.com/twrs/RGBConverter.html) or given using the 'picker/dropper' tool in many graphics packages.
- background-color : #dddddd; - this defines the background colour of the particular element that the style was applied to. In this example the background of the <p> is set to grey.
Another common use of CSS is to change the font face...
<p style="font-family: Times, serif">Example paragraph in Times font.</p>
produces...
Example paragraph in Times or serif font.
When defining a font family to be used it is usual to provide a series of font names and end with a generic font family (sans-serif or serif). If the main font is not present on the user's machine the Web browser will look for the next font in the list and so on until a font is present or the generic family is used.
Internal CSS
'Inline CSS' is applied directly through the use of a style attribute within the HTML tag. The style only applies to that particular tag, however, it is possible to use 'internal CSS' to apply styles throughout an HTML page. The styles must go in the <head> part of the HTML page, for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
p {font-size : 110%; color : #111199; background-color: #cccccc;}
.anotherexample { font-family: Times, serif;}
-->
</style>
</head>
<body>
<p>Example paragraph with presentation controlled by CSS.</p>
<p class="anotherexample">Example paragraph in Times font.</p>
</body>
</html>
The styles are contained within the <head> section of the document. The comment tags (<!-- and -->) must be included to hide the styles from older browsers that do not support CSS. The properties and values of the styles are also enclosed between curly brackets { and }. Note how the two styles are defined, the first refers solely to p tags and, as such, will be applied to all paragraphs. The second style starts with a . and then a name (.anotherexample). This allows the latter style to be applied to other tags using the class attribute, as illustrated.
You may be forgiven for thinking that the above example might produce a page looking like:
Example paragraph with presentation controlled by CSS.
Example paragraph in Times font.
However, the actual result would look like:
Example paragraph with presentation controlled by CSS.
Example paragraph in Times font.
You will remember that CSS stands for Cascading StyleSheet and the above demonstrates 'cascading' in action. If you look at the example code we have applied a font-size, color and background-color to all paragraph tags. The second paragraph has a style (called anotherexample) appled to it using a class attribute - this second style changes the font-family of the paragraph. However, since this is also a paragraph it adopts the styles defined for all paragraphs and hence has a grey background, blue text and increased font size as well.
Task 8
Add an internal stylesheet to your pages and use it to add a bit of colour to the text within your Web page.
Now view your page in a Web browser.
External CSS
In the above section we looked at 'internal CSS'. The stylesheet is just a collection of styles within the <head> section of the document. However, it is possible to take these styles and store them in a separate document called an external stylesheet or external CSS. This document contains only the styles, for example:
p {font-size : 110%; color : #111199; background-color: #cccccc;}
.anotherexample { font-family: Times, serif;}
External CSS documents are often given a .css file extension. The advantages of having the styles in a separate document is that they can be used by all the HTML pages in a Web site. There is no need to replicate the CSS in the <head> section of each file. You can also then make site-wide changes by editing the single CSS document. Assuming our external CSS document was given a filename of 'styles.css' it would be incorporated into the HTML page in the following way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
</head>
<body>
<p>Example paragraph with presentation controlled by CSS.</p>
<p class="anotherexample">Example paragraph in Times font.</p>
</body>
</html>
Most Web sites use external stylesheets in preference to internal and inline styles because of the advantages they offer in terms of easy site maintenance.
Preparing images for the Web
Images (graphics and photographs, etc.) can have a huge impact on the appearance of a Web page. However, if images are used poorly and not optimised for the Web then they can just as easily create a bad impression. Images are often much larger in terms of file size than the HTML page that contains them and bigger files take longer to download. As we discovered in the 'Principles of Online Presence' resource a competitor is only a mouse-click away - if your site is slow to load because too many images have been used or they haven't been correctly prepared for use on the Web then your customers are likely to go elsewhere. The three main factors to consider (other than 'Is the image necessary?') when preparing images for the Web are:
- File format - choosing the appropriate file format for the image can drastically reduce the file size of that image. JPEG (Joint Photographic Experts Group) is the most appropriate format for photographs or images with continuous tone. Gif (Graphic Interchange Format) is most appropriate for diagrams, illustrations or cartoons.
- Image dimensions - although HTML provides attributes for setting the height and width of an image these should not be used to reduce the amount of space the image takes up on the page. Images should be resized to the desired dimensions using an image manipulation package and then used at that size on the page.
- Compression - many graphics manipulation packages allow you to optimise/compress the file size of an image. These techniques might include, for example, optimising the number of colours used in an image (if an image uses two very similar red colours these areas could be recoloured to just use a single colour, the information required to describe the other red could then be removed from the file) or dithering (a process by which the appearance of additional colours is achieved by mixing up pixels of two other colours).
Popular image processing software includes:
Further information on preparing images for the Web:
Interactivity
Adding interactivity to a business Web site can be an excellent way of encouraging customers to keep returning to the site. Interactivity may take the form of a discussion forum, an online shop, order tracking and even games.
Image: A screen shot of Biz/ed's Interactive Markets resource(http://www.bized.co.uk/learn/economics/markets/mechanism/interactive/part1.htm)
Interactivity may be incorporated into a site using a variety of technologies, for example, JavaScript, Macromedia Flash, Java Applets, Perl and PHP scripts. Web developers write computer programs in these formats or languages and these can then be used by a client through their Web browser. Some of these technologies (for example, JavaScript and Macromedia Flash) are downloaded and run by the user's Web browser - these are known as client side technologies, others (for example, PHP and Perl) run on the Web server - these are known as server side technologies.
Client side technologies are limited by the client's Web browser. An example would be the Macromedia Flash resources used in Biz/ed's interactive markets resource(http://www.bized.co.uk/learn/economics/markets/mechanism/interactive/part1.htm). Macromedia Flash is a multimedia technology that can be embedded in HTML pages. Flash files can take the form of animations, games and even whole 'Web' sites. Biz/ed primarily uses Flash to produce interactive simulations or animations illustrating a particular theory or concept. Flash files are produced in an authoring tool (also called Macromedia Flash) and these compressed files (with a .swf extension) are embedded in the HTML page. Assuming the Web browser has the Flash plugin (a program that allows Web browsers to display a wider range of content) the animation/simulation is displayed. If a user doesn't have the plugin they will see an annotated diagram instead.
Another example of a client side technology is JavaScript. JavaScript (which should not be confused with the Java programming language) is a scripting language that can interact with the HTML code of a Web page. The JavaScript code is embedded within the page itself and so operates on the client side rather than server side. However, if the Web browser cannot run JavaScript (or has JavaScript disabled) then that functionality will not be available to the user. In some cases, the whole navigational structure of a Web site may require JavaScript and, if the site is badly designed, the Web site may be completely useless if JavaScript is not supported by the Web browser. This can have serious financial and legal implications for a business as we will see later.
Server side technologies are programs that reside on the Web server. When a user completes a form (for example), the data from that form is sent through what's called the CGI (Common Gateway Interface) which allows a user's Web browser to pass data to the program on the Web server. On receiving the data the program processes it and then, if appropriate, sends an HTML page back to the user. In the case of our Key Economic Data (KED) resource(http://www.bized.co.uk/cgi-bin/ked/ked.pl), students fill in the form depending on the data they require and then press the 'Submit' button. The data from the form is then sent through CGI to a Perl (Practical Extraction and Reporting Language) program residing on the Biz/ed Web server. This program processes the data from the form and connects to a database containing the data for the KED. The Perl script extracts data from the database based on the values filled in by the student. At this stage this data is then used to produce an HTML page which (depending on the display options chosen by the student) contains a graph (also created by the Perl script), a table of values and definitions for the data. The HTML page is then sent back to the student's Web browser. The student can also request the data in Comma Separated Value (CSV) format using the same form. In this instance the Perl script queries the database and produces a CSV file instead of an HTML page.
The CGI allows a Web browser to communicate with any program residing in a particular area on the Web server. However, modern scripting languages like PHP (PHP: Hypertext Preprocessor) offer similar functionality to programs accessed through the CGI but integrate more closely with the Web server and do not rely on the CGI.
What technology should I use?
In general, the answer to this question depends on what you want to do. If you want to produce a highly interactive game then you would usually use client side technology since the delay in sending data back and forth to the server might disrupt the gameplay. However, if you want to allow users to request financial data for a range of companies and that data is held in a database then you'd use server side technologies. In most instances the server side technologies are much more powerful (offer a greater degree of functionality) than the client side technologies. The main functionality of e-commerce software, for example, will use server side technologies.
Having decided on the client or server side you then need to decide on the specific technology to use. If your program will need to run on the server you may be limited to a particular range of technologies based on the type of Web server you have access to. For example a Windows Web server will allow you to use VBscript (a scripting language based on Visual Basic) but VBscript will not work on a Unix/Linux-based Web server.
Further reading:
- Flash Tutorial - client side (http://www.w3schools.com/flash/default.asp)
- JavaScript Tutorial - client side (http://www.w3schools.com/js/default.asp)
- Perl CGI Tutorial - a popular and extremely powerful server side scripting language that communicates with the Web browser through CGI (http://michaelbluejay.com/webdesign/perl.html)
- PHP Tutorial - PHP is another scripting language. PHP is not as powerful as Perl but many find it easier to learn and it is more closely integrated with the Web server software so does not rely on the CGI (http://www.w3schools.com/php/default.asp)
e-commerce
In the case of most small businesses their Web site is used solely as a promotional tool. If any e-commerce functionality is present it is likely to be provided by a third party since the costs of developing a bespoke application are prohibitive. Many off-the-shelf e-commerce solutions exist and the Internet Service Provider of the small business may also offer e-commerce facilities as part of its service. In addition, most banks offer e-commerce solutions to businesses. These solutions are a relatively low-cost way to provide an online shop and often they are integrated with business bank accounts so that money from sales is paid directly into the account.
In addition to setting up e-commerce facilities it is important that the business has the infrastructure to support this venture. If users buy a product online but must wait weeks for it to be delivered due to stock or staff shortages they are unlikely to return. The ease of shoping online has almost certainly raised the expectations of the customer in terms of turnaround and delivery times.
Further reading:
- E-commerce Tutorial (http://www.webmonkey.com/webmonkey/e-business/building/tutorials/tutorial3.html)
- osCommerce - an open source (the source code of the program is made available for developers to modify as desired) e-commerce solution (http://www.oscommerce.com/)
Next steps
View source
One of the best ways to learn about Web development is to look at how other developers achieved a particular effect or layout. Most Web browsers have a 'View source' function that allows you to view the HTML source of the Web page you are viewing.
- In Microsoft Internet Explorer select 'Source' from the 'View' menu.
- In Mozilla select 'Page Source' from the 'View' menu.
- In Firefox select 'Page Source' from the 'View' menu.
NB: although it is a good idea to improve your HTML skills by viewing the source of other pages you should be aware that not everyone adheres to HTML standards and good practice. When looking at someone else's code you should not adopt any bad practices. In addition the code is automatically copyrighted so you cannot simply replicate a design you like by copying the code.
Task 9
Visit two of your favourite Web sites and view the source of the homepage. Look for familiar parts of the document including the DTD, <html>, <head> and <body> tags. These tags are all required within an HTML page so, if the site adheres to the Web standards you should be able to find them.
HTML
We have only met a small number of the tags that are used to produce Web pages. Some excellent sources of further information on HTML are:
- HTML Tutorial (http://www.w3schools.com/html/default.asp)
- A Beginner's Guide to HTML (http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html)
- Web Monkey: Authoring HTML Basics (http://www.webmonkey.com/teachingtool/html.html)
- W3C HTML specification - lists all the tags, when they can be used and what attributes they can have. Web developers don't often read this from start to finish but refer to it as necessary. Good Web developers should know of the existence of this document and why it is important. (http://www.w3.org/TR/html4/)
A quick note on good practice. During the course of this resource we have used lowercase tags, put quotes around our attributes and correctly closed our tags (so a paragraph starts with <p> but then ends with a </p> for example). Some books and online resources you come across may not adhere to these rules as strictly. We have introduced this good practice to 'future-proof' your code and to promote the practice of writing valid code for reasons we will cover later in the resource.
XHTML
Earlier in the resource we refered to the Document Type Declaration as a means of identifying the version of HTML being used in your resource. The final version of HTML is 4.01, there will be no HTML 5. HTML has been superseded by XHTML (eXtensible HypeText Markup Language).
The specification for XHTML was first released in 2000. However, unlike Biz/ed who adopted XHTML in 2002, the majority of Web sites are still being written using HTML 4 - hence this resource focusing on HTML. The main reason for the slow adoption of XHTML is almost certainly due to the length of time it took for WYSIWYG editors to produce XHTML rather than HTML. Sites being developed using code/text editors could adopt the new standard more quickly. XHTML offers many advantages over HTML, for example, it forces you to write better structured, more efficient and valid code. XHTML properly separates presentation and content and, because of its stricter structure, it's easier for devices to 'read' and therefore support for XHTML will be more common in a wider range of Web enabled devices than HTML.
If you've followed the good practice we've outlined above then it is not difficult to convert your HTML documents to XHTML. Sites that use poor HTML markup will find it harder to convert to using XHTML but as browsers and device support for HTML disappears they will be forced to.
Further information on XHTML can be found at:
CSS
In this resource we have looked at the basics of Cascading Style Sheets, further information can be found here:
- Adding a touch of Style - CSS tutorial (http://www.w3.org/MarkUp/Guide/Style)
- Web Monkey: Mulder's Stylesheet Tutorial (http://www.webmonkey.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html)
- CSS contents and browser compatibility - not all Web browsers (particularly older ones) support the full range of the CSS specification. This page lists the CSS compatibility of a range of Web browsers. (http://www.quirksmode.org/css/contents.html)
- W3C CSS specifications (http://www.w3.org/Style/CSS/#specs)
- CSS positioning - CSS Positioning (CSS-P) is an advanced technique that uses CSS to control the position of elements within an HTML page. (http://www.brainjar.com/css/positioning/default.asp)
Checking your HTML and CSS
Both HTML and CSS have specifications that state how and when a tag or selector can be used. It is important that you adhere to these specifications. Failure to do so could cause display/functionality problems (for example, a poorly designed site may only display correctly in one type of browser, users with other browsers may only see a blank screen) and may mean that disabled users cannot use your Web site - we will look at the legal implications of this later in the resource. (http://www.bized.co.uk/educators/16-19/business/marketing/lesson/legal1.htm)
Many authoring tools will check your code for you as you write it (although these aren't infallible). A better way of checking your HTML and CSS is to use an online validator. In most cases you can enter the URL of a Web page you want checked in the form and submit the page for checking. However, this will only work if the page is on a Web site already. If your page is offline (as is the case of the pages produced in the tasks above) you can upload the HTML file through a 'browse' option in the validator and copy and paste the CSS code in to the validator form instead. Different validators are required to check your HTML and CSS. The validators will either confirm that your code is correct/valid (adheres to the standards) or will list errors. Two validators commonly used by Web professionals are:
Task 10
Validate your HTML pages and CSS code using the validation services above. The validator will indicate any errors. If this is the case try referring back to the notes and wider reading links above to fix the errors.
Task 11
Using the W3C Markup Validation Service(http://validator.w3.org/) validate the HTML code of the homepage for three Web sites you use regularly (these could be sites your teacher has directed you to or Web sites relating to your interests). If you don't regularly use the Web try validating your school Web site, Biz/ed (http://www.bized.co.uk) and BT (http://www.bt.com). Now answer these questions:
- Do all of the homepages validate without errors?
- How might invalid HTML affect the operation and perception of these organisations?
For further information on the importance of Web standards visit the Web Standards Project (WaSP)(http://www.webstandards.org/).
Back to An Overview of Business Online
|
