Page 1
1
Introduction to Web Programming
CS 632
Dr. H. Assadipour
Web Terminology:
Internet: Network of networks – worldwide connection of all computer networks
Interanet: Private networks, usually unconnected to outside, with restricted access to only members of the
institution or company
Page or Web page: A page that can be read over the Web using a Web browser
Hyperlink (link): A string of clickable text or graphics that points to another Web page or document
Hypertext: Web pages that have hyperlinks to other pages
Browser (Web client): A software tool used to view Web pages, read e-mail, etc. (e.g., MS Explorer)
Multimedia: Information in the form of graphics, audio, video or movies
Hypermedia: Media with links navigational tools
Surfer: Someone who spends time to explore the Web
Web presentation: A collection of associated & hyperlinked Web pages, usually with one underlying
theme
Web Master/Web Manager: A person who creates and manages Web presentation, often for a business or
organization
Web Site: An entity on the Internet that publishes Web pages
Web Server: A computer that satisfies your requests for Web pages
Uniform Resource Locator (URL): A string of characters that specify the address of a web page
Example URL: http://web.njit.edu/~hassadi (How/Where/What)
http: page access protocol (How)
web.njit.edu: domain name of the computer where the Web page resides (Where)
~hassadi: defaults to index.html (file name) of hassadi as username (What)
Other protocols:
ftp: file transfer
mailto: sending e-mail
telnet: Remote login (SSH Secure Shell Client program is used instead)
news: Requesting news
ASCII (American Standard Code for Information Interchange) Editor: A simple text editor
Page 2
2
HyperText Markup Language (HTML)
HTML is based on SGML (Standard Generalized Markup Language), which is very broad and all-
encompassing. SGML, because of being very broad, is not useful to the larger population of users.
Therefore HTML is the Web language to learn, or at least to begin with. XHTML (Extensible HTML) is
another version or extension of HTML with some differences.
HTML document: A web page is created when an ordinary ASCII text file is “marked up” using HTML
tags and is then displayed using a browser.
Tags: are predefined combinations of characters enclosed between < and > characters.
<HTML>, <TITLE>, <CENTER>, etc.
Each tag (if it has and ending) has a corresponding ending or closing tag: </HTML>, </TITLE>,
</CENTER>, etc.
HTML document Structure:
<HTML>
<HEAD>
<TITLE> First Page </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Note: Indentation & spacing makes the document easier to read.
Page 3
3
Creating your homepage:
Make sure you have an account. Start by using the following link: http://ist.njit.edu
Where you will find that you need a University Computing ID (UCID). The UCID serves as your
credentials for many computing services: it is the key to your NJIT Campus Directory entry; it is the
account login for many NJIT computer systems. Then follow the step-by-step online account creation
process to create your account.
The following is a step-by-step process to create your webpage. In UNIX environment:
1. Use SSH Secure Shell Client program → Quick Connect to see the following window:
Fill in the “Host Name” and “User Name” fields and click the Connect button. You will be prompted
to enter your Password in the next window, as shown here:
Click the OK button to see the system prompt, allowing you access to the AFS machine you logged
into.
Note: afs20 is the name of one of the several (I think they go up to 36) under Andrew File System
(AFS).
2. Create public_html sub-directory in your home directory (mkdir public_html and press
RETURN)
3. Change to this directory (cd public_html) and use a text editor (pico , vi, emacs, etc.) and
create index.html file (e.g., pico index.html and press RETURN)
4. Create your html file and save the file. At the system prompt, key-in:
/usr/ec/bin/homepage.setup to set up your homepage.
5. Use a browser to invoke your homepage
Page 4
4
Creating your first HTML document: Use a text editor (Notepad will do at this time) and create
the following file (First.html) and save it on your diskette. If you are using a text editor in Unix
environment such as pico, vi or emacs, you need to use the ftp program to transfer that file to your flash
memory.
<HTML>
<HEAD>
<TITLE> My first HTML document </TITLE>
</HEAD>
<BODY>
<H2> My first HTML document </H2>
Hello, <i> World Wide Web! </i>
<!-- This is a comment line -->
<p>
Greetings From your instructor!<br>
<a href="http://www-ec.njit.edu/~hassadi"> Dr. H. Assadipour </a>
<p>
Spring Semester 2015
</BODY>
</HTML>
Use a Web browser (e.g., Explorer or Google Chrome) to load the above HTML file to see the following:
My first HTML document Hello, World Wide Web!
Greetings From your instructor!
Dr. H. Assadipour
Spring Semester 2015
There are a number of HTML tags used in this program. These tags are described on the following page.
Once the page is loaded, the link presented by your instructor’s name will connect you to the instructor’s
course site on the Web.
Page 5
5
HTML Tags
The above example represents a simple HTML document consisting of tags, a comment, and text.
<HTML> and </HTML>: These tags serve to delimit the beginning and ending of an HTML document
<HEAD> and </HEAD>: Has no attributes but several tags can be included inside it as follows:
META: Used to include additional information about a document and can be used to pass additional
information to a browser. This tag is placed inside the <HEAD> and </HEAD> tags.
Example: Someone who has a Web page about woodworking might include the following:
<HEAD>
<META NAME = “keywords”
CONTENT = “wooodworking, cabinetworking, handmade furniture”>
</HEAD>
<TITLE> and </TITLE>: The contents will be displayed in the Title Bar of the page
<BODY> and </BODY>: The text and HTML codes that goes between the body beginning and ending
tags is rendered and displayed in the document area of the browser’s window.
In addition to the above tags, you see <i>, <br>, and <p> which represent italic, break (new line) and new
paragraph, respectively. Also included in the first example is an anchor <a> tag with its href attribute to
define a source hyperlink, your instructor’s Website, in this case. Here are some examples:
Anchor tag: <A> … </A>
Example 1: < A HREF=http://www.njit.edu> NJIT </A>
mailto tag:
Example 2: <A HREF="mailto:[email protected] ">Dr. H. Assadipour </A>
Image tag:
Example: <img src="../images/logo.gif" width="95" height="45">
HTML Comments: <! - - This is a comment - - >
Paragraph Formatting: <P> and </P>.
Heading Tags: <H1> Largest Font </H1>
<H2> Second Largest </H2>
.
.
<H6> Smallest size </H6>
HTML Colors: There are two ways of defining color:
a. Straightforward color names (varies from browser to browser): gray, blue, etc.
b. Using hexadecimal numbers (RGB): #000000 (black), #FFFF00 (yellow), #00FF00 (green),
#FFFFFF (white), etc.
Page 6
6
Text Basics:
The contents of a Web page have to be organized and presented in an attractive fashion to catch the attention
of the viewer. You have already seen how the <p> tag for paragraphs and the <br> tag for line-breaks.
Headings are used to make it easier for the user to read the document. For example, in your first document,
you used <H2> to display the heading of the document “ My First HTML document” in a distinct manner.
Here is another example of heading tag with the align attribute:
<h3 align=center> placed in the middle of the line </h3>
One can add images to headings as in the following:
<h2>
<img src=”info.gif”>
For More Information … </h2>
Which inserts the info.gif image (i) followed by the text: For More Information …
There are a number of tags that control the appearance of the text in your document. These are referred to
as content-based style tags and the following is a sample set of these tags defining the Logical Style of the
text. Note that not in all cases the browsers will render the same final result for a given HTML document.
Tag Netscape Explorer
<cite> italic italic
<code> monospace monospace
<em> italic italic
<strong> bold bold
Summary of Physical Style Tags:
Tag Meaning Display Style
<b> Bold contents bold
<big> Increased font size bigger text
<blink> Alternating fore- and background colors blinking text
<i> Italic contents italic
<small> Decreased font size bigger text
<s>, <strike> Strike-out text strike
<sub> Subscripted text subscripted
<sup> Superscripted text sub
scripted
<tt> Teletypewriter style monospaced
<u> Underlined content underlined
Formatted Lists: To help readers quickly scan, understand, and extract information from your page.
Unordered list: <ul>
<li> …
<li> …
</ul>
Ordered list: <ol>
<li> …
<li> …
</ol>
See HTML link http://www.w3schools.com/html/ for more detail coverage of these topics.
Page 7
7
Introduction to Web Programming
CS 632
Dr. H. Assadipour
Web Presentation Outline, Design, and Management
A Web presentation is a collection of associated, hyperlinked Web pages that usually
have some underlying theme. It is not hard to distinguish between a good Web
presentation & design and a poor one as the presentation is so visually oriented and one
gets a feel of the author’s capabilities by glancing through a few pages. Some of the
elements of an effective Web presentation are:
Details: A presentation that includes well-thought-out touches can make a positive
impression on the reader. Good choice of background color, headers, footers, and
appropriate font size are important.
Coding: Overly simplistic pages could indicate a lack of knowledge by the designer, and
cluttered pages indicate poor design. Use the appropriate style.
Features: A few ”bells and whistles”, such a as use of applets and JavaScript, can improve the feel of a set
of pages. Do not include “cool” features, which are time-consuming to download.
Graphics: A modest use of in-line images is probably one of the most significant ways to enhance your
design. Many images are available on the Web. Make sure the image integration is effective and not
random.
Layout: If the pages are visually appealing and if they provide convenient navigation, they are likely to be
visited by more users.
Hyperlinks: Navigation is a key element to any good Web presentation. If the reader can move around the
pages easily, they will be more impressed. On the other hand, a confusing navigation is frustrating and
turns off the visitors of the Web site.
The following page shows three common types of Web presentation organizations:
1. Circular
2. Exploratory
3. Hierarchical
1. Circular: The circular arrangement of Web pages supports forward and backward movement
through the pages. This format is especially good for describing step-by-step procedures or instructions or
dividing up text that should be read sequentially. The four pages are labeled A, B, C, and D, where A is the
starting page and D is the ending page of the presentation. The hyperlinks are arrows pointing to other
pages. The drawback of this approach is that there is no way to jump to the middle of the presentation.
Page 9
9
2. Exploratory: The exploratory arrangement allows jumping from nearly every page to nearly every other
page, in an order completely determined by the user. This form of structure is similar to a spider web, and it
works best for describing things like geographical areas or maps. The figure on the previous page depicts a
nine-page exploratory arrangement. There are lots of hyperlinks providing the user freedom to move
around but the opportunity to get lost, at the same time!
3. Hierarchical: The hierarchical arrangement permits a more limited number of hyperlinks from the
introductory page, and each succeeding page leads to additional hyperlinks. This arrangement yields a tree-
like or directory structure. The fanout, defined as the maximum number of hyperlinks available from any
page, should be kept small. In general, fanout should not be more than ten hyperlinks. The depth of the
presentation, defined as the number of levels of the tree, should be restricted to five at most. The
hierarchical model is well suited for describing companies, institutions, and organizations, that is, entities
with an inherent hierarchy.
Obviously, such regular structure makes it easy for the user to anticipate the navigational options that will
be available.
From now on, as you navigate through Web pages, pay attention to the type of organization and navigation
that you feel works best. Use these basics design concepts in developing your own Web pages.
Exercise: Visit your course Web site:
www-ec.njit.edu/~hassadi/CPT330
Go to the first page of the site and try to construct the type of organization used for the site. Sketch the Web
site organization in the space provides here.
Tables: Tables in HTML pages allow you to organize information in row and column format. There are
many ways to use tables to format information on the Web. When you see an interesting layout on the Web,
view the source code and see how the effect was achieved. There is a good chance that a table was used.
For example, you may want to display your courses and their corresponding grades in a tabular form, as
shown here.
Fall Semester Spring Semester
Business B Accounting C
German I A German II B+
Math C+ Web Prog. I A
Economics B Philosophy B
Sociology B
Page 10
10
The following is the HTML code for this table:
<CENTER>
<TABLE>
<TR>
<TD> Business
<TD> B
<TD> Accounting
<TD> C
<TR>
<TD> German I
<TD> A
<TD> German II
<TD> B+
<TR>
<TD> Math
<TD> C+
<TD> Web Prog. I
<TD> A
<TR>
<TD> Economics
<TD> B
<TD> Philosophy
<TD> B
<TR>
<TD> Sociology
<TD> B
</TABLE>
</CENTER>
View this table using MS Explorer.
Exercise #1: Try to embellish the previous table by using the following and other tools that makes it more
presentable: BORDER COLSPAN
CELLSPACING ROWSPAN
CELPADDING
Exercise #2: Try the table due to the code on the following pages.
