INTERNET APPLICATION PROGRAMMING

PREABLE
This is a complete documentation of the application and how to run the application. This documentation consists of 5 major parts: 1. System requirements 2. Developments requirements 3. Program design 4. How the program functions 5. Security measure In this documentation, all the HTML and Java Script tags are types in bold so as to differenciate the tags from the other parts of the documentation. The programming of the application is entirely HTML and Java Script.

Welcome to the Internet Application Programming

CONTENTS
SYSTEM REQUIREMENT..2 REQUIMENTS FOR PROGRAMM DEVELOPMENT...3 PROGRAMM DESIGN.3 HOW THE PROGRAM OPERATES13 SECURITY MEASURE...14

SYSTEM REQUIREMENTS.
1. Computer The whole program runs in a computer. Here the computer is the major equipment need for the application. The computer used to run this application should have the following qualities. a) Fast processor The computer should have a high processor of more than 500MHz. The can affect directly how the html and JavaScript instructions are loaded to the web browser. The computer processor should be of Pentium 3 or Pentium TV or Pentiumpro. b) Display monitor The display monitor o0f the screen should be colored. The color of the computer should be 24 bit. True color or 52 bit true color. The coloring of monitor will enable to view the graphics in the application. The graphics should appear in the original color. c) Storage disks The computer should be both fixed and removable storages. This will help in the subsequent storage and sharing of the information or graphics that can be downloaded, stored to other computers. d) Windows 98 and Recent Versions. Windows Operating System has the browser that reads the instructions from the web code editor. Windows 98 and other recent versions of windows have the Internet explorer 4.0 or above versions. This version can read the instruction from the code editor. The recent versions of html or transcript have codes that cannot be interpreted by Internet explorer that is below p.o or earlier versions of Netscape Navigator. 2. Modem A modem is the device that is used to connect the computer with the telephone line. A modem consists of 2 parts i.e. Modulator and De modulator hence the name Modem. The Modulator is used to change the digital massage from the computer to analogue message that can be transferred through the telephone lines. The Demodulator part of the Modem is used to change the analogue message that is received through the telephone line to digital message that will be viewed on a computer. The speed of the Modem is measured in Bits per second (BPS) and a modem should have a speed of more than 92 bits per second. 3. Internet service provider An ISP is a commercial organization that provides access to the Internet and other computer support services at a fee. An ISP has a number of host computers that provide storage for electronic mails and other WebPages for users to access the other computer support services may include Advice, Software Installation, Account security and others. 4. User Name And Password The user name and password helps to identify you in the Internet. This is required every time a person connects to the Internet. A user name and a password are offered when a user registers with an Internet Service Provider. Generally a password is for security purposes and it accompanies the user name. The password ensures that only authorized users can access the account.

5. Telephone lines A telephone line enables to transmit information from the Internet server to the host computer. When a user connects to the Internet Service Provider approves the connectivity through the telephone line.

REQUIREMENTS FOR PROGRAM DEVELOPMENT.

General safari web is created using HTML and JAVASCRIPT PROGRAMMING. The Requirements for development an Internet application using HTML and JavaScript are: I. Code Editor This is a program that enables the writing of the Hmtl and JavaScript codes. The Web Browser reads the instructions that were written on the code editor. The common code editor is notepad. II. Web Browser The web is a program that supports the viewing of the web information. The web browser reads the code and translates it to information that is viewed when browsing i.e. Internet explorer, Netscape navigator, enigma browser etc. III. Graphic Software Graphic software enables to create graphic and buttons that can be viewed on the web page. Also the software can manipulate graphics so as to have a certain look on the web page. IV. Scanner This enables the programmer to read graphics into the computer. Graphics that are to be included on the web page and are in a hard copy format are scanned into the computer and a digital copy of the graphic is retrieved. V. Animation Software They help to give special effects to graphics that are to be used in the web. The special effects make the page lively and attractive.

PROGRAM DESIGN
As stated earlier, the application uses 2 programming languages i.e. HTML and JAVASCRIPT. Html is the basic programming language presenting information on the web browser and JavaScript is used to create Web Pages that are interactive and can react to user input.

HTML CODES.
HTML stands for Hyper Text Mark-up Languages. This language is used to program web pages and design websites. HTML use defined tags that have special meaning in the language. Generally tags are instructions that are enclosed in angle brackets (<>) and have special meaning in HTML. When programming there should be an opening tag and a closing tag to mark the beginning and the end of the instructions. All the HTML programs must start with the HTML opening tag, followed by the title tag,

and the body tag. HTML tags are listed below: 1) HTML tag <html> This is the first tag to appear on the code. The tag instructs the browser that the document being made is html document. The closing tag of html appears at the end of the document. The closing tag of </html> appears at the end of the program code. 2) Head tag <head> This is the tag that appears below the <html> tag. This tag informs the browser that the information inside marks the head of the document. Inside the head tag, there is the <title> tag that encloses the information that will appear on the title bar of the browser. Also the JavaScript embedding tag that informs the browser on the availability of JavaScript commands in the body section. In the head tag, there is also <style> definition tag that defines styles of items of the code e.g. lists, hyperlinks, headings etc. Before the end of the <head> tag, all the other tags that have been included in the header part should be closed with their relevant closing tags. 3) Body tags This tag marks the start or the end of the information that will appear in the browser window. Attributes Background This appears inside the <body> tag and it specifies the color to be applied on the browser window background and also it can specify the image to be used as a background. The format is: <body bgcolor=Red> for a back ground color and <body back ground=Back. jpg> This will apply the image found in a file Back . jpg as the background image. Note: The first three tags listed above are the essentials of the HTML programming and should be included in every HTML code. The other tags are mostly used for formatting text, tables, lists, add images and other formats to the page. 4) Paragraph tag <p> This marks the start or the end of the paragraph. The closing </p> paragraph tag is optional. Attributes (i) Alignment This aligns the text on the paragraph. The alignment can be left, right, center or justify. The format is: <p align=Center> 5) Heading tag <h1> There are six levels of heading in HTML programming starting from <hl> through <h6>. <hl> is the largest and bold while <h6> is the smallest and bold. The heading tags helps to mark the titles of web page. Format:<hl> My Name</hl> This will make the text My Name to be big and bold.

6) Break tag <br> Due to the fact that the web browser does not understand the end of a program code line as the end of the line, the <br> helps to curb this problem. When the browser meets the break tag on the code, it shows the content after the tag on the next line. 7) Font tag<font> This tag is used to give different fonts attributes to the next on the program code. We have different tags for different fonts attributes as shown below. i. Font color: This is used to specify the font color of the text been formatted. : <font color=>. This will show the text been formatted in color red. ii. Font face: It specifies the font face of the text. Format<font face=Tahoma>. This code makes the font face of the text be Tahoma. iii. Font size: This tag specifies the font size of the text. Format: <font size=5>Gives the text a font size of 5. The font size in HTML is not the same as the size that can be applied on other word processing programs. The above 3 tags are closed by one </font> closing tag even when they are used together iv. Bold: This gives the font a bold attribute. This tag should be followed by a relevant </b> closing tag. Format: <b>Text to be formatted </b> v Italic: Gives the text an italic format. Format: <I > Text to be formatted <I> vi Underline: This is known as underline tag. When this is used to format text, the text is underline. The closing tag should be the one that appeared last. 8) Horizontal line tag <hr> This line is use to draw and show a horizontal line on the web browser window. It has several attributes like: Color This tag is used to apply a color on the line Format: <hr color=blue> Size This gives the height size in pixels. Format: <hr size=10> Width

This specifies the length of the line and it is given in percentage. 100% will make the line, which fits the width of the browser window. Format: <hr width=100%> Alignment This positions the line either left, right, or center. Format: <hr align=Center> 9). Lists There are two types of lists in Internet application programming i.e. Ordered list- gives a numeric or alphabetic numbering. Unordered list- gives the list bullets. In ordered list we use the <ol> tag and <ul> tag in the unordered lists as seen in the example: <ol> <li>Item 1</li> <li>Item 2</li> </ol> For unordered list we use the Format: <ul> <li>Item 1</li> <li>Item 2</li> </ul> In the two types of list, there is a common type of attribute that is the Type attribute that is used to specify the type of numbering or bullets to be used. E.g. <ol type=a> or <ol type=i> or <ul type=Disk> or <ul type=Square> There is also the Start attribute that specifies the number to start in the listing if the list should not start with the first character like a i e.t.c. e.g. <ol start=5> We use numeric numbers even when the list is specified to be an alphabetic list or roman letters. 10) Preformatted tag <pre> This tag is used to inform the web browser that the text should appear on the browser with the format on the code editor as it has already been formatted. This can help in tabulating data that has no lines between rather than using the table tag. 11) Color This is used to apply colors on various parts of the page e.g. background, font, border, horizontal line e.t.c. There are two ways of applying the colors:

1. Solid colors In this case, the color to be applied is specified by its name. The disadvantages of this method is that some web browsers may not understand the name of the color. Format: <font color=Red> 2. Hexadecimal colors

It is a standard way of mixing colors that is used in HTML. It uses the format of RGB (Red, Green and blue) to mix the colors. The colors are represented with ff to oo, ff represents the full availability of colors while oo represents non-availability of colors. Format: <font color=#aaaaaa> Where the first aa represents color Red, second aa represents color Green and the last aa represents color Blue. 12) Image tag <img> It is used to insert image in the page. The tag uses the format: <img src=Image.gif> the file which contains the image to be applied should have the extension .gif or jpg for easy access by the web browser. Attributes Size The size of the image to be inserted is specified by height and width. The measurements are given in pixels and 72 pixels are equivalent to one inch. Size is specified in the format: <img src=image. jpg height=200 width=200> this can either shrink or stretch the image. Alignment This refers to the position of the image on the web browser window. The alignment can left, right or center. Format: <img src=Image.gif=center> Alternative This replace the image with a name the programmer sets if the image can not be shown on the browser window. Format: <img src=image.jpg alt=Girls> 13) Table tag <tag> This tag helps a programmer to create a table when presenting a tabulated data. When creating a table, the programmer creates a row at a time. The table tag is implemented with other tags like: <tr> -Marks the start of a row. <th> -Shows that the inputs are the headings and the text will be aligned at the center of the cell and also it will be bold. <td>- I t stands for the table data. It indicates the data entry in a table. Other attributes of a table are: I. Cell padding: This is the space surrounding the contents of a cell. By default, the Cell padding is zero. In order to increase the Cell padding we use the format <table Cell padding=20>. II. Cell spacing: Cell spacing is the space between two adjacent cells. The format for spacing cells is: <table Cell spacing=20> III. Border color: This specifies the thickness of the table line. The format is: <table border=2>

IV. Width: This specifies the width of the columns and it is specified in percentage. By default the width is determined by the contents. The format is: <table with=60%> When the width is specified as 100% the table will occupy the whole screen. V. Background color: This applies a color on the cell of the table. The format is: <table bgcolor=#aa00aa> VI. Border color: This tag applies a color on the border of the table and the cells. The format is:<table border color=#aaaa00> VII. Columns pan and rows pan: This is the merging of the cells in a table. Cols pan merges the row specified while rows pan merge the rows specified. The format is: <td Cols pan=3> <td row span=3> 14) Form Objects The form objects are used to collect data from the user. The common form objects include: Text boxes: They help to enter personal details like name, address e.t.c. Format: <input type=text maxlength=20 size=20> The size attribute defines the width of the textbox while the maxlength defines the maximum number of characters to be entered in the textbox. Option boxes: They are used to select one option among the many given e.g. Yes/No, Male/Female, True/False. The Format is: Are you married? <input type=Radio>Yes<br> <input type=Radio>No<br> List Menu/Combo box: This creates a drop list menu where the user can select one option on the list. Format: Select a country: <select> <option>Choose one <option>Kenya <option>Uganda <option>Tanzania </select> Check box: Check box allows the user to select several options on a given list. Format: <input type=check box>Tsavo east<br> <input type=check box>Tsavo west<br>

<input type=check box>Amboseli<br> Text Area: Gives the user a space to enter more information like remarks. Format: <text area cols=20 rows=10></text area> Submit Button: Creates a button to sent a form. Format: <input type=submit value=send> Reset Button: Creates a button that can clear the contents of a form. <input type=Reset value=Clear form> 15) Links A link is a text or object that enables the user to access a certain page of the programmers choice when clicked. Links takes the user from one page to another when clicked. Links are used to join web pages so as to make a complete website. The syntax below is applied when text is used as a link: <a href=pictures.html>pictures page</a> to use graphic as a link apply the format bellow: <a href=picture.html><img src=picture.jpg></a> to link an E-mail address, use: <a href=Mailto:singoriw@yahoo.com>Walters E-mail address</a> to link a website: <a href=http//www.123greetings.com>Greetings site</a> You can link a section on a page by applying the format bellow: On the destination apply the code: <a name=_Walter_Singori></a>Walter Singori On the text to link code as follows: <a href=#_Walter_Singori>Back to Walter</a> 16) Animations Animation can be either be applied on text or graphic. HTML supports a format of animation known as marquee that enables the scrolling of text or graphics. Format: <marquee direction=right>Text to scroll</Marquee> Attributes a. Behavior: This enables the alternating of text. <marquee behavior=alternate>Text</Marquee> b. Scroll amount: Determine the speed of the scrolling text. The higher the value, the higher the speed will be. <marquee scrollamount =2>Text</Marquee> c. Background color: Give the scrolling text a background color.

<marquee bgcolor=#ffoocc> d. Height/width: Specifies the height or the width of the background of the scrolling text. <marquee height=200 width=100> Images can also be animated by the format: <marquee direction=left>img src=Image.gif></marquee> (17) Frames The use of frames enables the programmer to insert more than one page on a single browser window. The following simple frame tags below illustrate the use of frames: <html> <head> <title>Bookings</title> </head> <frameset cols=40%,*> <frame src=Intro.html> <frameset rows=35%,*> <frame src=Welcome.html> <frameset rows=50%, *> <frame src=link.html> <frame src=Info.html> </frame> </html> NOTE The asterisk (*) used after the percentage means that the remainder percentage will be allocated to the next framesets. This means that after the first frameset, the next allocation will be on the remainder percentage, which is assumed to be 100%. (18) Escape codes These are used to type characters that are difficult to type or have special meaning in the HTML coding. There is one type of escape code i.e. &#124 that represents vertical bar.