IOM 431 “Business Information Systems”
“Presentation Layer Lab 2
GENERAL INFORMATION:
This assignment is designed
to provide you with an understanding of how infrastructure is developed for
presenting data in a web based environment. For this purpose it is necessary to
instruct you on the basics of HTML.
HTML is used to present or
format the data using both hypermedia (hyperlinks, etc.) and standard
formatting structure similar to that found in word processing documents. JavaScript adds a dynamic aspect to the
presentation of data allowing the user to interact with a page.
Both HTML and JavaScript may
be explained conceptually, but to truly understand the power, flexibility and
effort involved in developing the presentation aspects of e-Business applications
it is best to build a proto-type.
Our proto-type will include 4 (HMTL) or .html pages.
The pages to be developed are as follows:
1.
Frame page: The frame page divides the
window into two sections.
2.
Three content pages (menu, resume and
main):
Ø
A menu page (menu.html)
Ø
A Home page (main.html)
Ø
A Current Research page (cr.html)
Ø
A link to a cm.html (will be created in
the Application Layer Lab)
Step #1
Open Notepad (a text editor)
Select START | RUN | type-in “notepad” | OK.
Step #2
Read the explanation on the frame page or
“index.html” for this assignment.
The Frame Page (separates a web page into two distinct areas
or windows)
The
idea behind frames is to create several sub windows that may be pointed to and
updated independent of other windows within the browser. For this assignment we will start out by
creating a simple two-window frame that will house the menu page on the left;
and any page that is selected from the menu, on the right. The division of the browser window into
frames is as follows. Columns are
defined by using the command FRAMESET COLS. In the HTML code below, the left
sub-windows is coded, as 150 pixels wide and right are 500 pixels wide. The
command BORDER = “0” simply makes the border invisible. The command FRAME SRC = determines the
content of each column. The content can
be either another HTML page (resume.html or rm.html in your case, OR it can be
a picture file, audio file, etc) the command “SCROLLING = AUTO” allows a
scrolling bar to appear only when the page size exceeds the size of the browser
window. The command NAME = “MAIN”
defines a name for the right-hand side column. The NAME command is optional and
is used only in special circumstances as discussed later.
Below is the HTML code for the index.html page
______________________________________________________________________________
<HTML>
<HEAD>
<TITLE>FIRST
FRAME HTML ASSIGNMENT</TITLE>
</HEAD>
<FRAMESET
COLS="150, 500" BORDER="0">
<FRAME SRC="menu.html"
SCROLLING = AUTO>
<FRAME SRC="main.html"
NAME="MAIN">
</FRAMESET>
</HTML>
______________________________________________________________________________
STEP # 3
Copy and paste the code above starting from <HTML> Start to
</HTML> stop into notepad.
STEP
# 4
Save the file as “index.html”
Step
#5
Read the explanation on the menu page or “menu.html”
for this assignment.
MENU PAGE
The
menu page should contain all of the required navigational elements. The navigational elements are created using
the command <a href= . This command
can also be called the “hyperlink” command. The <a href = highlights the text contained between the
symbols, > & < as a
navigational link. In the code below, the text in the first ahref= command
is “HOME” and the ahref command makes “HOME” click able. When the “HOME” link is clicked, the page is requested from a remote web
server . c) HTML code offers the option
of displaying the requested page main.html in a separate window whose
name has been earlier defined during usage of the command FRAME SRC.