WEBSITE DEVELOPMENT

INTRODUCTION

HTML, an initialism of Hypertext Markup Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document by denoting certain text as lines, headings, paragraphs, lists, and so on. HTML is written in the form of labels (known as tags or elements), surrounded by angle brackets.

HTML pages are used for specifying web page content. They contain information and instructions to web browsers that inform them of what to display, and how it should be displayed. It is a simple format, easily learned, and can support a number of media devices, such as sound, graphic images, and video.

HTML documents are ASCII files, and are created using a simple text editor (or an editor like Front Page). With a text editor, you cannot see what the code looks like in the browser, unless you save the page and then load it into the browser for viewing. WYSIWYG (What you see is what you get) editors like Front Page allow you to view the page as it is constructed in the editor window.

One advantage of using a simple text editor is that you have more control over the HTML code; the disadvantage is you must know the code and have a picture in your mind as to what it looks like. Another disadvantage is that since HTML is becoming more complex, it is harder to write, and sophisticated editors like Front Page support the advanced features making it easier for you to implement them.

HTML is a series of tags enclosed in < and > brackets. For instance, is an HTML tag that defines a head section of an HTML document. Certain characters are reserved, such as & which are interpreted as HTML codes.

Explanation:

The first tag in your HTML document is . This tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document.

The text between the tag and the is header information. Header information is not displayed in the browser window. The text between the tags is the title of your document. The title is displayed in your browser. The text between the and tags will be displayed in a bold font.

Each HTML page adheres to a basic structure. This looks like:

When viewed in the browser, this page looks like:

HTML TEXT FORMATTING

HTML TAGS

HTML codes are not case sensitive. Most HTML tags need an end-tag to end it. An example of an HTML tag is and the end tag for this is .

BOLD TYPE

The BOLD print tag starts with and ends with so that all text in-between the tags is printed in bold.

Example of using the bold tag

• The source in the HTML page looks like:

  This is bold text and this is not.

• The resultant output by the browser looks like:

  This is bold text and this is not.

SPACES, TABS AND FORMATTING

Newlines, spaces and tabs are ignored (single spaces accepted).

Example of spaces in the input text

• The source in the HTML page looks like:

  ∙ This line contains heaps of spaces.

• The resultant output by the browser looks like:

  This line contains heaps of spaces.

To format text literally, the

LARGE SIZE TEXT

There are 6 header sizes, from H1, the smallest, to H6, the largest. The HTML tags

Examples of using the tag to implement larger style text

• The source in the HTML page looks like:

  This is header size 3

• The resultant output by the browser looks like:

  This is header size 3

ITALIC TEXT

The ITALIC print tag starts with and ends with so that all text in-between the tags is printed in italics.

Example of using the italics tag

• The source in the HTML page looks like:

  This is italic text and this is not.

• The resultant output by the browser looks like:

  This is italic text and this is not.

A PAGE TITLE

A page title, specified on an HTML page, appears in the title window of the browser.

• Add a title which appears in the title bar of the browser:

A HORIZONTAL DIVIDER

This is used for breaking pages up, by separating sections using a horizontal line.

• The source in the HTML page looks like:

• The resultant output by the browser looks like:

  ---

In addition, a number of effects can be applied to a horizontal rule, such as color, size, and width tags.

• The source in the HTML page looks like:

• The resultant output by the browser looks like:

  ---

ADDING IMAGES

Graphic images are added to an HTML page using the tag.

• The source in the HTML page looks like:

   This is an icon

• The resultant output by the browser looks like:

  

LINKING TO OTHER PAGES

This is called a hyperlink. It shows up in the document as underlined text, and allows the user to load another page.

• The source in the HTML page looks like:

  Goto next page

• The resultant output by the browser looks like:

  Goto next page

FONT SIZES, FACES AND COLOR

You can specify the font face, size, and color using the tag. Some systems may not have the desired font installed on their system.

• Specify font size, color, and type of font, the source in the HTML page looks like:

• The resultant output by the browser looks like:

  Hello There

BACKGROUND IMAGES

An image (.gif or .jpg) can be used as a background. It should be reasonably pale so as not to distract from the displayed information.

• The source in the HTML page looks like:

You can also specify a background color rather than an image. The sixteen basic colors are AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, and YELLOW.

• The source in the HTML page looks like:

BACKGROUND SOUNDS

A background sound is loaded and plays when the HTML page is loaded by the browser. The HTML tag specifies the filename to play (which is generally a .wav file for Windows systems), whilst the LOOP statement specifies the number of times to play the sound.

• The source in the HTML page looks like:

IMAGES AS HYPERLINKS

It is common to use little pictures or icons as links to other pages. For example, the little red up triangles used in this document are used as hyperlinks to the top of this page.

• The source in the HTML page looks like:

• The resultant output by the browser looks like:

  

EMBEDDED VIDEO

Some browsers such as Internet Explorer support video embedded on the HTML page. The tag is extended to include DYNSRC which specifies the location of the video file, LOOP which specifies how many times to play, and START, which specifies how the movie will play (MOUSEOVER or FILEOPEN).

• The source in the HTML page looks like:

• The resultant output in the browser looks like:

  

You should be aware that browsers that do not support embedded video need the SRC statement so a graphic image is displayed if the movie file is not found or is not supported.

Using the Reserved Characters & < > as text

As was stated earlier, the characters &, <, and > are reserved to implement HTML tags. To use these as text requires the use of a special code sequence.

Embedding a video or sound object

One of the problems of using the background sound tag is that it is only supported by Internet Explorer. To use video and sound that will play in both Netscape Navigator and Internet Explorer, use the EMBED tag. Its format is shown below.

The src is the path to the object, the height and width is the screen space allocated to displaying the object.

To create a table:

Example:

Save your codes as tabe.html

Then open your work where you saved it.

OUTPUT

HTML Forms:

A form is a graphical user interface with text entry fields and buttons, check boxes, pull down menus, scrolling lists, etc. Form elements are elements that allow the user to enter information in a form.

To create a simple Form.

Save the page as form.html

Open form.html where you saved it

OUTPUT

First name:

Last name:

OUT PUT:

INTRODUCTION TO JAVASCRIPT

JavaScript is a scripting language designed to enhance HTML pages and provide functionality such as data validation, forms, and interaction with form elements. It is a language created by Netscape, and is not Java. It is embedded into an HTML document and interpreted by the client browser. It is supported by both Internet Explorer and Netscape Navigator.

Inserting JavaScript into HTML Documents

JavaScript statements are inserted into HTML documents using the tag. In addition, this is further wrapped using embedded comment tags. The embedded comment tags prevent browsers which do not support the script tag from displaying the JavaScript code.

In this particular case, the opening tag specifies the language to be used as JavaScript.

The use of and is for browsers which do not support JavaScript, so if you were using such a browser, the line would have read:

Last modified 19th March 97.

Example 1

The following example embeds the current date and time directly into the HTML document.

The date is Sat Dec 13 2014 10:10:35 GMT-0800 (Pacific Standard Time)

The code for this is as follows:

The and tags surround the JavaScript code. In addition, this is further wrapped using the embedded comment tags . The embedded comment tags prevent browsers which do not support the script tag from displaying the JavaScript code.

The Window Status Bar

The bottom line of the browser window is called the STATUS BAR. Using JavaScript, you can write directly to the status bar. Consider the following example, which displays a message in the status bar.

Look at the status bar to see this text displayed there now.

OnMouseOver

Well, that was pretty neat. But it would be nice to have the contents of the status bar change from time to time. For instance, when the mouse cursor moves over a hyperlink, the status bar could display a message which informs you of what the hyperlink is all about. To do this, the mouseover statement is added. Consider the following example.

Message Box Alerts

The next thing we will discuss is message boxes. Sometimes, when a user clicks on something, you want to pop up a message box. The following example does just that.

Note the return false, this causes the click on the href to not perform the action of loading the referenced page. As an example, try creating a new document and change it to return true and note the different effect this has.

Confirming Actions

In some cases, where a user clicks on a link that might download a rather large file, you would consider giving the user a means of canceling the request before the action is performed. An example of this follows:

The confirm function returns either true or false, depending upon the user’s choices. If it returns true, the action is performed, and the browser will load the referenced wave file.

Detecting the Browser Type

Because browsers display HTML slightly differently, and not all statements are supported by every browser, JavaScript is often used to perform actions based on a particular browser type. This calls for some code which will detect the browser type. An example follows:

This is not Internet Explorer 4

Functions

JavaScript supports functions. These are a series of JavaScript statements combined into a single unit and assigned a name. A function could validate a user’s entry in a dialog box, write specific details to the document, access a database, or manipulate an ActiveX control. Functions often return values, like true or false.

Here is an example of a function which displays a text input box and when the user enters data into it, displaying it in an alert box. In further examples, this will be expanded. The JavaScript code contains a function GetTemp, which references the InputBox, and uses the alert function to read the temperature and display it respectively. In addition, a standard

Enter Number in Degrees Fahrenheit:

The code for this is as follows:

A FORM is used to hold a text entry box labeled DegreesF and a push button labeled CheckTemp1. When the user clicks on this button, the associated JavaScript event DisplayTemp() is invoked. This function procedure prints out the value of the variable passed to it, which was document.getTemp1.degreesF.value.

The use of alert displays the temperature by using concatenated strings; the + character is used to indicate concatenation and the quotes to define text strings.

Expanding the above example to perform conversion

A function in JavaScript is a series of JavaScript statements that are enclosed by the function and { } statements. A function that does not accept any values has the name of the function followed by an empty set of parentheses. In addition, a function may, or may not, return a value for the function.

It would be more meaningful if we actually did something better than just echo users’ responses. Let’s consider the previous example, and this time, expand it to convert the temperature from Fahrenheit to Celsius. To do this, we will add a function ConvertCelsius() which will take the value in degrees Fahrenheit and display the answer in degrees Celsius.

It looks like:

Enter Number in Degrees Fahrenheit:

And the JavaScript code to implement this change looks like:

The function Display2() also indicates the declaration of a local variable called DegreesC using the var statement. The statement DegreesC = ConvertCelsius(value) passes the value of DegreesF to the function ConvertCelsius() which returns the result into the variable DegreesC.

Validating Numeric Entry

In this example, the scripts are expanded to ensure that the entry is numeric. Obviously, the function GetCelsius3() should not be called if the entry is not numeric. It uses the parseInt() function in JavaScript to determine if the field is numeric. If parseInt cannot convert the string, it returns NaN, which is checked for by the isNaN function.

It looks like:

Enter Number in Degrees Fahrenheit:

The code looks like:

This demonstrates the use of an If Else statement to check if the data entry is numeric.

Validating the Number Range

In this example, we expand the previous by including a range check on the input numeric data. In this case, we limit the input data to a range of 32 to 100 inclusive. This is done using an additional if else statement and a compound relational test.

It looks like:

Enter Number in Degrees Fahrenheit:

The code looks like:

COOKIES

In this section we shall show the use of cookies. A cookie is a file that is placed on the user’s computer, and saves some information which can be later accessed using JavaScript. Consider applications like a shopping cart, where a user browses a web site, selecting items, each time the item is added to the cookie file. Once the user has finished shopping, the JavaScript code can read back the cookie file, determining the items the user wants to purchase, and generate an invoice.

Provided below are some basic JavaScript statements for implementing cookies. These are available in the public domain. The entire JavaScript code is placed in the head section of the HTML document.

Now, let us show you how to use them. The following HTML code displays a message box and allows the user to enter their name, when the page is accessed the first time. This happens because the JavaScript function who() is called, which determines the cookie does not exist (this is the first time the user has accessed the page), so it presents a dialog box. On subsequent accesses to the page, the function finds the cookie, extracts the username stored there, and prints it as part of the document.

Now, let us show you how to use them. The following HTML code displays a message box and allows the user to enter their name, when the page is accessed the first time. This happens because the JavaScript function who() is called, which determines the cookie does not exist (this is the first time the user has accessed the page), so it presents a dialog box. On subsequent accesses to the page, the function finds the cookie, extracts the username stored there, and prints it as part of the document.

Hello null. It’s good to see you here.

DETERMINING THE SCREEN WIDTH

The following JavaScript code determines the screen width.

General Web Design Issues

In this section, we discuss issues concerned with the design of Web Pages. Much of the information covered here is a summary of looking at features that work successfully, derived from looking at top rated sites and sites that have proved to be effective. The topics below show the areas that this section deals with.

THE ELEVEN BASIC RULES OF DESIGN WEB PAGE

1. Page layout, Size, Titles
2. Text, Fonts and Sizes
3. Colors
4. Images, Backgrounds, Icons
5. Multiple Platforms
6. Client Side versus Server Side
7. Use of HTML, Java, JavaScript, VBScript, Active X, Plug ins
8. Download times, hits per page
9. Copyrights
10. Accessibility
11. Ease of Navigation

Page layout, Size, Titles

Each page should have a unique title. A page title is defined in the section of an HTML (Hyper-Text Markup Language) document, using the tag. This is covered in the HTML overview section. A unique page title aids in maintaining the web site using a package such as Front Page Explorer. The page title is also displayed in the top of the browser window, and appears at the top of the page when it is printed.

Each page should be no more than about one to two pages longer than the screen depth. This minimizes scrolling. In addition, the user should not have to scroll horizontally across the screen. Any information should fit easily on the page and not appear cluttered. Ample use of white space is important for readability and quick identification of the information presented. Obviously, this page does not conform to these requirements!

Page size is linked to download speeds; the more information the page contains, the longer it is, and the more time it will take to download. The use of horizontal lines or other methods to divide sections on a page are important to give the impression of separation to users.

Also, avoid the use of a page that has little to say. Classic pages such as “Click here to enter” are a waste of time and convey little to users.

Text, Fonts and Sizes

While it is tempting to use a lot of font sizes and styles, users should avoid this for a number of reasons. From a design point of view, consistency in the use of headings and font styles is important. At most, you should use three different sizes: one for the body of text, a slightly larger one for titles, and a larger one again for the main title, which appears at the top of the page. Do not make the large title too big; it will detract from the information and consume valuable screen real estate that is better suited to displaying information.

Avoid the use of too many font styles or faces. A font face is “Times Roman” or “Courier”. Be aware that a user might be using a web browser that does not have the specified font installed on their system. Instead, stick to a common font, and use attributes such as bold and italic sparingly.

Avoid the use of underlining. In web pages, underlining most often refers to hyperlinks. Using underline for text will confuse users, making them think they are hyperlinks to other material.

In addition, when font faces are specified using Front Page, statements are embedded into the HTML document. This has the potential to treble the size (in bytes) of the document, which will take longer to download, consume more disk space, and increase network bandwidth (because the file is larger, it consumes more of the bandwidth over a longer period).

Font sizes are specified using the HTML statement . In general, text should use font style 2; if a font size is not specified, most browsers will default to this size. A font size of 6 is the largest, with 1 being the smallest. Avoid font size 1 where possible.

Colors

The use of too much color confuses and detracts from the information being presented. Use color sparingly, for titles, headings, or important keywords that you want to highlight. Certain colors cause reactions with users; an example is Red.

Color is embedded using statements in HTML. Try to stick to one of the sixteen default colors specified in HTML 2.0, the reason being that you have no control over what color setting the user has specified for their screen display (it might be 16 colors), and your selection might make the information unreadable on their screen. Some of the standard 16 colors available in HTML 2.0 are RED, YELLOW, GREEN, CYAN, BLUE, WHITE, BLACK, and MAGENTA.

Images, Backgrounds, Icons

Background images or wallpaper should be sparingly used. It is better to use a background color, as this does not involve any download time. Take notice again of contrasting colors, so that text is clearly visible. If using a background image, ensure that it is very pale, so that any information placed on it is clear and easy to read.

Large background images can increase download time considerably, and take into account what will happen if the user resizes the window, or uses a much larger display than what you designed for. For instance, you create a wallpaper of 640 by 480, but the user views this on 800 by 600. Try to use a background image that is expandable. What this means is that the left side matches the right side, and the top side matches the bottom side. If you take one background image, then place four more of the same image, one on the top and bottom, and one on the right and left, the background image looks symmetrical.

For images embedded within the document, use appropriate sizes. This means no more than half the viewing area, so for a screen viewing size of 640 by 480, the largest image should be 320 x 240. Again, as with text colors, use images that conform where possible to 256 colors. Sometimes, file sizes of images are important. It takes time to download images across the network, and in general, images tend to be larger than the HTML page itself. Consider a 10K page, which has four images on it, each of 32K bytes each. The total size is thus 138K (10K + 4 * 32K), which on a 28.8Kbps dial-up link will take a minimum of 38.3 seconds to download.

Saving an image in an alternative format (for instance, from .gif to .jpg) often results in a smaller file size. Where larger images are necessary, an example being maps, consider using a thumbnail (a much smaller image typically 100 by 100 or less) as a hyperlink to the much larger image.

Screen real estate is always at a premium. When using images, rather than leave white space around the image, it is better to wrap the text around the image. This is done using two-column tables that span the width of the page; one column of the table holds the image, the other the text.

Icons are little symbols that, in web pages, represent shortcuts or links to material. In this document, we have used the image to refer to the top of the page. If the user clicks on this little icon, they return to the top of this document. When using icons, always use them in the same context, with only one meaning, so that left icons always refer to the previous page, up icons refer to the top, down icons to the bottom, and so on. This avoids confusion. Also, use the same icons across all your web pages; users will expect that a particular icon on one page will behave the same way on another page. Icons should resemble the function that they perform or the action associated with them. If this is not the case, use simple text links. In addition, icons should be small, and an alternative should be provided in case the user has graphics disabled on their web browser, or is sight impaired.

Multiple Platforms

One thing you have little control over is what browser the user has. With Active X Server Pages (ASP), or JavaScript, it is possible to detect the type of browser and present the information suited for a particular type of browser (though JavaScript only works for JavaScript enabled browsers). In addition, other factors such as screen size and color depth are beyond your control, so if you intend to use high resolution screen sizes and 16-bit color depths, that fact should be announced to your potential viewers on the home page.

Client Side versus Server Side

Client side (CS) means that the information or request is handled within the web browser. Once the page is loaded, an Internet or network connection is no longer required. All the information is embedded within the page. Client side is normally written in a script language like JavaScript or Visual Basic Script.

Server side (SS) means that the user sends the information to a dedicated server, which is required to perform some action and return results to the user. This requires an Internet or network connection. An example of server side is CGI (common gateway interface). Without the server, the information cannot be processed. Server side scripting allows you to send different pages to users, dependent upon a number of factors (such as browser type and personal interests). Shopping cart systems are generally implemented using SS.

The downside of SS is that the files must reside on the server, and the user requires a connection to the server. The server must perform the action required, which takes resources away from other things the server might be doing (in other words, places an additional load on the server).

Another advantage of using CS is the pages can readily be stored on a CD-ROM and are portable, so an Internet connection is not required to use them.

Clickable image maps should be implemented client side, as this will be faster (since no requests to the server will be done); however, client side will increase the size of the web pages.

Use of Java, JavaScript, VBScript, Active X, Plug ins

Because all browsers do not support scripting, ensure that you provide alternatives, so users can view the information, or get access to a browser which does support what you implement.

Remember that Active X and VBScript are only supported by Internet Explorer, a Microsoft browser. If you implement pages using this technology, you are limiting it to clients with that particular browser and a Windows-based platform.

If you use plugins (components which extend the capability of the browser), provide links to where the plugins are located so the user can download them and install them on their computer. Some users may not have permissions to install plugins on their computer, so it is wise to limit their use. The other problem with plugins is some tend to make the computer unstable, and there is also the issue of support and how long the plugin will be available for. The same applies to Active X components.

Download times, hits per page

Users access information from a wide variety of sources, using a wide variety of communication links, some of which are high speed, and some of which are still very slow. In general, design for a lower speed limit of 14.4Kbps, with an average page download time of around 20 seconds.

The more information you place on a page, the longer it will take to download. Every image and sound reference on a page often creates another hit on the server (most browsers can be configured to limit the number of simultaneous connections it can open), which the server must handle by allocating resources to it. If a page has a lot of embedded references, the download time can increase dramatically, by having all these open connections at once, attempting to download all the images across a narrow bandwidth connection.

It’s a good idea to limit the number of hits per page to less than 10. If you use frames, a lot of hits can be generated at once, one for each page in the frameset, one for the default document, and one for each graphic referenced on each page within the frameset. It is not uncommon to have 20 or more hits generated from accessing a single document that specifies a frameset. You would need to add up all the page sizes, and image sizes referenced on each, to get an indication of how long it will take to be downloaded at 14.4Kbps.

Copyrights

It is important that a copyright message be placed on the page. This identifies the page as having ownership, either by the organization or by an individual. Other aspects you might include are the file’s last modified date, so users readily know how old the page is and when it was last modified.

If you use images, sounds or other resources from other sources, you must first obtain permission to do so (unless those files have been placed in the public domain as freely usable). Place the “permission to use” or “copyright …” statements as close as possible to the image that you are using.

If quoting text or information from other sources, acknowledge the source either directly, or at the bottom of the page in a reference. It is only fair that people who have placed information on the web be acknowledged for their efforts.

Accessibility

This refers to designing pages for users who have disabilities in one form or another. With web pages, this usually means visually impaired persons. Obvious things that stand out are the use of icons as hyperlinks, with no text alternatives.

In a browser such as Internet Explorer, you can enlarge the display font easily (In IE4.0, from the menu bar, View, Fonts, Largest). This option increases the size of all text displayed by the browser, BUT, it does not enlarge the graphics as well. Thus symbols or icons which act as hyperlinks remain invisible to sight impaired users. Providing the option of text links and pages with text only is a necessary solution.

Navigation Issues

Browsing pages on the web is not like reading a book. A book is structured, and its organization is quickly found. Information is presented in chapters, index, table of contents and a reference or appendix section.

It’s easy for a user to flip pages, but still know where they are in a book. With web pages, that is significantly more difficult. It’s hard to see where you are and how this page relates to the previous page, or the next one for that matter. The major cause for this is hyperlinks. Consider a page where a user is discussing various makes of automobiles, as has a hyperlink to a web site for the Ford motor company. A user browsing the current web site clicks on the hyperlink, and is suddenly deep inside another web site, with its own culture, its own symbols, its own navigation systems. User context is lost; they no longer know where they are. If there is an icon at the top of the page called BACK, and the user clicks on it, they will not go to the page they have just come from. This might be self-explanatory to those familiar with computers or the Internet, but thousands of new people join the Internet daily, and for them, this is a major issue.

Each page should have clear links to the previous and next page (where appropriate), and the home page. If you implement your web site using frames, one frame is usually used for navigation purposes, with various subsections always accessible from within the frame. The net effect is that each topic is always only one click away, and if a user gets lost, the navigation frame is there to help them.

Always use the same icons or symbols throughout your web site. Remember, this creates a culture for those that visit your site, and consistent use of symbols is essential to avoid confusion. Avoid changing the style of navigation. If you present navigation via a frame, don’t suddenly change to something else, as this will only confuse users. You might also consider offering a navigation alternative, or several methods of navigation. However, the more information and navigation you place on a page, the more overwhelming it becomes, the longer it takes to download, and the less likely a user is to read all of it or access the information contained therein. Simple is often best.