INFORMATION RESOURCE DEVELOPMENT: PRACTICAL DEVELOPMENT OF AN INTERNET WEB SITE

MBAM, B. C. E. (B.Eng., M. Sc., ACOAN )

Department of Computer Science and Engineering,

Enugu State University of Science and Technology,

Enugu, Enugu State, Nigeria.

Phone: 042 – 451253/451244 Ext. 24

E-mail: esut@CompuServe.com.ng

Head of Department (HOD) of Computer Science Department of Our Saviour Institute of Science, Agriculture and Technology (OSISATECH) [October 1995 to June 1996]; Software Programmer for UNESCO Assisted Computer Project for the Teaching of Introductory Technology in Nigerian Secondary Schools [1990 to 1992]; Lecturer in Computer and Computer-related Courses in Tertiary Institutions; Author of the following Computer text books: "Elements of BASIC programming"[1994, 1997], "Teach Yourself FORTRAN 77" [1996], "Computer Literacy, Computer Operations and Logic Computations" [1997]; Presented paper titled "Data Processing Via Computer Programs" at COAN Conference INFRDEV ’98 [Calabar, May 27^th – 30^th,1998]; Best Lecturer of the year 1997 [Award by the Nigerian Universities Engineering Students Association, NUESA] at ESUT,Enugu; Best Corper in Suleja L.G.A. of Niger State in 1992/93 NYSC Service year; Best Graduating Student in Computer and Engineering Department in 1992 at ESUT, Enugu; Second Best Lecturer of the year 1996 at OSISATECH Polytechnic, Enugu; Member Computer Association of Nigeria {COAN}; Participant, National University Network (NUNet) Capacity Building Workshop II at Obafemi Awolowo University (OAU),Ile-Ife [October 6^th to October 20^th].

ABSTRACT

 Viewing Internet operations from the software perspective, it will be obvious that Internet services including World Wide Web are achieved simply by the manipulations of computer codes using a given computer programming language or tool.

In this paper, the popular Hypertext Mark-up Language (HTML) is used to review and discuss how an Internet web site suitable to be visited by Internet users could be practically and skilfully designed and developed. The paper takes a critical look at the structures and performance of the Internet text language HTML. It also explores the brief working principles of the popular Internet browser: the NETSCAPE.

 In particular, the paper explains the basic concepts of the HTML language; shows how simple HTML documents (web sites) are structured; introduces the tools used to create HTML documents; and it gives and serves as an awareness of good practices in authoring internet web sites, via HTML. In all, proper cares were taken to ensure that the program illustrations used in this paper are simple, well structured, and direct to the points to provide for smooth and fast assimilation by the targeted audience and readers.

For short, a web sites is the environment (or site) where information in your computer system (hooked to Internet) can be viewed (or visited or browsed) by other users on the Internet. The web (i.e. the information) and Internet links provided in the web site is often called the world wide web (www) which is actually a distributed multimedia hypertext system that is based on client/server architecture. An Internet web site name normally starts with http://www. , Where http stands for hypertext Transfer Protocols and www stands for World Wide Web. Http is a set of rules for communication between www clients and servers, whether in UNIX or in PC or Macintosh computer. The diagram below shows a simple http.

Caption: A Simple hypertext Transfer Protocol

However, a web site can also be in a simpler form as a file. In this case, the web site name starts with file: or file://. The web site so stored as a file can only be browsed within the computer where it is stored as a file in a local directory (In fact, most web sites are stored as files during their designs, developments, and debugging sessions. Thereafter, they are renamed to their actual World Wide Web names.). A web site name (location), including its full path, is known generally as Uniform Resource Locator (URL). Therefore, URL can be regarded as the address of an object on the WWW. For example, the web site name isoc98.html, which is, linked (reference) by

http://www.esut.com.ng/isoc98.html

Is a URL. Similarly, the web site name Test.html linked by

file:c:\Test.html or file://c\/Test.html

is a URL located in the local root directory of your computer.

Web site are designed and developed using HyterText Markup Language (HTML) which is a native language for preparing document for presentation on the Internet. In fact, the HTML is a simple Internet programming language that uses logical and physical tags to format document (i.e. information) appearing on the web site. Any web site document created by the use of HTML is normally saved with the file extension.html or.htm.

The Internet package the tags embedded in a HTML language in a web site to format the

Document text and provides links to other web sites and Internet users is known Internet

Browser or web browser. There are principally two widely uses web browsers, namely:

MicroSoft Internet Browser and the NETSCAPE. All HTML documents used in this paper are meant to be run (loaded) in NETSCAPE.

Note: The client who visits your web site is also known a browser.

DESIGNING OF A WEB SITE

In designing a web site suitable to be visited by Internet users all over the world, some factors or points are to be taken into considerations. First and foremost, the web site must contain current (up-to-date) information on the subjects being visited by the Internet users. This will go a long way to increase the zeal of clients in visiting the web regularly for new information.

Structuring and presentation of ideals in the web site matters a lot. This means that the markup tags and colours used in the wed site should be watched, depending on the targeted clients that will be visiting the web site. At times, excessive and over-shouting colours as well as unnecessary font sizes and styles portray wrong and bad impression of the intents of the information in the web site. Similarly, poor colours and bad fonts of texts may discourage clients from visiting your web site since this gives poor appearance to the site. Therefore, moderate use of colours, phonographic images, and font styles of texts may be the best approach to employ in the web site. However, engineering and scientific information must need different colours and font styles to enhance the actual meaning and senses being portrayed by the information presented in the web site. In fact, the tips strategies presented below will help and guide Internet web site designers to design standard web sites.

 Tips and Strategies in Designing A Web Sit e

In a nutshell, the key issues to be considered when designing a standard web site may include the following: Appearance, Page content, Navigation, and Colours.

Page", unnecessary jargons and colloquialisms in your web site. Ensure that the web site pages do not contain any typing and syntax errors. Above all, ensure that your web site pages and the entire web site conform to a standard.

In general, be consistent; use same text styles; use headings and subheadings; use icons where necessary; consider computer window sizes; use tables, frames, and useful pictures for clearer illustrations; use high contrast between text and background colours, and do not use bright background images. For large pieces of text do not use uppercase letters; do not centre text; and do not align texts to the right, except where it becomes absolutely necessary to do so.

As stated earlier, a web site is developed using the native language HTML (HyperText Markup Language). HTML text is prepared in any ASCII text editor such as notepad, EDIT of MS-DOS, SideKick (SK), dBASE, etc. However, use of notepad is recommended because it is the most available ASCII text editor, especially for windows users, and it takes up little spaces.

HTML Tags

Tags are instructions or control codes to an Internet browser that formats texts displayed in a web site. In other words, it tells the Internet browser (the NETSCAPE in this case) how to present texts, graphics, and links to the Internet user (clients). Some tags are simple while some are complex, as we will see very soon. Tags are not case sensitive. Thus, <title>, <Title> are the same, for example. However, uppercase (capital letter) makes the tags stand out better from their surrounding text. This is useful, especially when checking through an HTML document to find out why the formatting did not work properly.

All tags are enclosed in angular brackets < >. Most tags come in pairs: one to mark the start of the formatting style, and the other to mark the end. The tags in each pair are identical, except that the closing tag starts with a forward slash (/). For example we can write:

< H1 > This is an Internet Conference. < /H1 >

or for easier reading, we may put the tags on separate lines, thus:

< H1 >

This is an Internet Conference.

< /H1 >

Every HTML document (i.e. web site document), as a tradition, starts the tag < HTML> and ends with the corresponding tag < /HTML >. So, in its simplest form, an HTML document might appear thus:

< HTML >

body of the document or site

< /HTML >

This means that all other tags that will be included in the body of the document must appear between < HTML > and < /HTML >.

In general, an HTML document can be divided into two parts, namely: the head part and the body part. The head part is enclosed by < HEAD > and < /HEAD > and it contains the title and other annotations. The head part is not displayed, except the title, which appears on the top of the Internet browser, where the web site name (filename) is supposed to appear if there is no title. The body part is enclosed by < BODY > and

< /BODY> and it contains the texts that will appear on the web site pages. The body part contains other tags for formatting texts in the web site pages. Consider the following HTML document:

< HTML >

< HEAD >

< TITLE > Internet Society Conference <TITLE>

< /HEAD >

< BODY >

< P >

All members and interest groups here present are welcome to this maiden edition of ISOC Conference.

< /P >

< /BODY >

< /HTML >

In the above document, "Internet Society Conference" is the title and it constitutes the head part; "all members and interest groups here present are welcome to this maiden edition of ISOC Conference" is the web site page text and it constitutes the body part. The tag < /P > terminates the paragraph.

The tags < HTML >, < HEAD> and < BODY > with there corresponding closing tags < /HTML >, < /HEAD > and </BODY > can be omitted. They are normally included just as a tradition or convention, or just to complete a given standard.

Text Formatting Tags

These are tags that determine how a text is displayed in a web site. There are many tens of such tags, but in this paper, only simple and commonly used tags will be discussed.

The < H… > and < FONT SIZE = … > Tags

These are a set of tags that are used to define headings over a range of character sizes in a text. The < H… > tag defines heading with levels ranging from 1 to 6. < H1 > uses 24 points, < H2 > uses 18 points, < H3 > uses 14 points, < H4 > uses 12 points, < H5 > uses 10 points, and < H6 > uses 7 points to display text. The text displayed with < H… > tag is automatically made bold. The following HTML document:

< HTML >

< TITLE > Nigerian Chapter of Internet Society < /TITLE >

< H1 > Internet Conference – Level 1 < /H1 >

< H2 > Internet Conference – Level 2 < /H2 >

< H3 > Internet Conference – Level 3 < /H3 >

< H4 > Internet Conference – Level 4 < /H4 >

< H5 > Internet Conference – Level 5 < /H5 >

< H6 > Internet Conference – Level 6 < /H6 >

This is a special Conference – Normal body text

< /HTML >

will display "Nigeria Chapter of Internet Society" at the title bar (at the top of the screen) and the web site page will appear thus:

Internet Conference – Level 1

Internet Conference – Level 2

Internet Conference – Level 3

Internet Conference – Level 5

Internet Conference – Level 6

:

The < FONT SIZE = … > tag allows web site developers to specify their own font size of texts. The tag is terminated by < /FONT >. For example, the statement

< FONT SIZE = 36 > Internet Society < /FONT >

will display the word "Internet Society", using 36 font size as shown below.

Internet Society

The < B >, <I >, <! … >, and ALIGN Tags

< B > is used to bold text while < I > tag is used to italicise text. < B > marks the beginning of bolded text while < /B > terminates the bold effect. Similarly, < I > marks the beginning of italicised text while < /I > terminates the italics effect. The following HTML statements:

< B > ISOC is an international society < /B >

< I > Today’s Conference has started < /I >

< B > < I > Testing the tags < / I > < /B >

will produce the following:

ISOC is an international society

Today’s Conference has started

Testing the tags

The <!…> tag is used to include comments in an HTML document. So, if you want to add comments to a document for your use, not for general consumption, write them inside < !…> like the following example:

< ! The Author: Engr. Mbam >

The text enclosed in <!…> tag does not appear on the web site page, and indeed, that is why it is a comment.

The ALIGN option is used to align (justify) text to the right, or to the centre, or to the left. It is used inside <H… > or < P > tag. It uses the keyword ALIGN =, followed by centre or right or left (however left is the default alignment). As an example, the following statements:

< H3 ALIGN = Left > Hello, everybody < /H3 >

< P ALIGN = Centre > Hello, everybody < /P >

< H2 ALIGN = Right > Hello everybody < /H2 >

will produce the following:

List Tags

List tags are used to arrange a list of items (or texts) in an ordered manner. To be discussed is the bulleted list and numbered list. The bulleted list uses round bullet (.), by default; while numbered list uses the numerals 1, 2, 3,…

The bulleted list is set is set up with the tag < UL > to mark the starting point of the list and < /UL > to close it. Each item in the list is preceded by the tag < LI >. As an example, the following statements:

<H2> Internet Society Nigeria Chapter </H2>

<B> FINANCIAL REQUIREMENTS: </B>

<UL>

<LI> Application Form =N=100

<LI> Membership Fee =N=2,500

<LI> Annual Subscription =N=1,000

</UL>

will appear as shown below

Internet Society Nigeria Chapter

Financial requirements:

	Application Form=N=100
	Membership Fee=N=2,500
	Annual Subscription =N=1,000

A numbered list uses the same rules as the bulleted, but the tag <OL> is used, instead of <UL>. The tag <OL> begins the list while </OL> terminates the list. So if we replace <UL> and </UL> with <OL> and </OL>, respectively, in our last example, the result will be:

Internet Society Nigeria Chapter

Financial Requirements

1. Application Form=N=100
2. Membership Fee=N=2,500
3. Annual Subscription=N=1,000

 

The <FONT COLOUR => and <IMG SRC => Tags

The tag < FONT COLOUR = > is used to set the colour of texts. < /FONT > marks the end of the coloured text. For example, the statement:

< FONT COLOUR = Red > International Internet Society < /FONT >

will display the text "International Internet Society" in red in your web site page.

The tag <IMG SRC = >, which stands for IMaGe SouRCe, is used to link an image (i.e. graphic object or picture) and displays it on a web site page. It takes the following format:

< IMG SRC = filename >

where filename is a graphic file with the extension .GIF or .JPG (GIF means Graphic Information Format: JPG means Joint Photographic Expert Group). As an example, the statement:

<IMG SRC = "ISOC.GIF" >

will link the image saved with the name ISOC.GIF and display the image onto your web site page. The image shown is my passport photograph which has been scanned and saved as PICTURE.GIF and it was linked into my local web site page by the use of the following statement: <IMG SRC = "PICTURE.GIF" >.

Engr. Mbam, B.C.E.

 

Dept. of Computer

 

Science and Engineering

ESUT, Enugu.

 

 

Caption: Graphics Image Linked onto a web site page using <IMG SRC = > tag.

 

 

Comments: The Internet browser – NETSCAPE needs that images be converted to GIF or JPG format before they can be loaded (linked) onto a web site. In this case, you need image-converter package such Lview Pro, Paintshop Pro, etc. to convert graphic images saved in other formats other than GIF or JPG.

 

Web Site Links

This is one of the most interesting aspects of web site development. A web site link allows other web sites or files (i.e. hypertext documents) to be linked (or referenced) into your web site page. In fact, hypertext links is what HTML is all about.

The key word for linking a web site is HREF (Hypertext REFerence). This identifies the web site name. But it can not be used alone. It must be anchored to a piece of text or graphic image so that there will be something to click to pick up the link. The anchor tags are <A…> and </A> which mark the start and end of the link text. The general format for linking a web site is:

< A HREF =URL > link text </A>

where URL (Uniform Resource Locator), as stated in the introduction, is the web site address; link text is the anchored text through which you can link the desired web site

(or URL). As an example, the statement:

<A HREF = http://www.isocnig. org.ng/isoc.html> Internet Society Nigeria </A>

will display the text as:

Internet Society Nigeria

And the link text is clicked (with a mouse or keyboard); the web site (or file) ISOC.HTML located at the computer with the (domain name) isocnig.org.ng will be loaded (linked) onto your web site page.

 

Concluding Remarks

Realising a standard Internet web site through computer native languages is often a very big challenge. This is so because a lot of logistics have to be put in place for the desired web site to be achieved. Also, where large amount of texts and presentations are involved, the trauma the web site developer(s) have to undergo during debugging session is always tasking and tedious. The best option then is to use web-developing tools (packages) to ease out the development of Internet web sites, especially in developing countries such as Nigeria.

The Nigeria Government should make extra efforts to upgrade her telecommunication network system to increase and provide more communication lines to Nigeria Internet users. She should also grant licences to many organisations to become Internet Service providers (ISP).

In the same direction, Internet Society (ISOC) Nigeria Chapter should focus attention and efforts towards encouraging the development of local information web site and databases as well as Intranet (i.e. within Nigeria Internet) services, which will be linked to the global Internet. By so doing, our country Nigeria will not be just a passive subscriber to the Internet, but will add value to Internet services by making positive and helpful information about Nigeria available on the Internet. This is important because the degree of efficient and effective global links achieved is the greatest measure of the success of economic, science, engineering, technology and political sectors in developing countries.

 

References

 

1. Mac Bride (1996): "Teach Yourself HTML", Hodder & Stoughton, UK, pp.19-22, 28-34, 46-47.
2. Nigeria Internet Group (NIG) News (Dec.1996 Vol. 1 No 1): "Towards Full Internet Connectivity in Nigeria". Pp.1, col 2, 3.
3. Mbam, B.C.E. (1998): "Data Processing Via Computer Programs: A Practical Approach", Proceeding of the 14^th National Conference of Computer Association of Nigeria (COAN), Vol. 9, pp. 71.
4. Kofi A. Arthiabah (October 6^th – 13^th, 1997): "Planning a Web Based Information Service", National University Network (NUNet) Capacity Building Workshop II, Obafemi Awolowo University (OAU), Ile-Ife, Nigeria.