SABTECH EDUCATIONAL

KONSULTS MOTTO: NO ONE DOES IT BETTER!!!

TEL: 0706-624-4719. : 07066244719 . Email:Ojugo18@gmail.com

CIT484 SUMMARY
THE INTERNET
The Internet is a global system of interconnected computer networks that use the standard Internet
Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of
millions of private, public, academic, business, and government networks, of local to global scope, that are
linked by a broad array of electronic, wireless and optical networking technologies.

Modern uses
The Internet can now be accessed almost anywhere by numerous means, especially through mobile
Internet devices. Mobile phones, datacards, handheld game consoles and cellular routers allow users to
connect to the Internet from anywhere there is a wireless network supporting that device's technology.
Educational material at all levels from pre-school to post-doctoral is available from websites. Examples
range from CBeebies, through school and high-school revision guides, virtual universities, to access to top-
end scholarly literature through the likes of Google Scholar.

The low cost and nearly instantaneous sharing of ideas, knowledge, and skills has made collaborative
work dramatically easier, with the help of collaborative software. Not only can a group cheaply
communicate and share ideas, but the wide reach of the Internet allows such groups to easily form in the
first place.
Version control systems allow collaborating teams to work on shared sets of documents without either
accidentally overwriting each other's work or having members wait until they get "sent" documents to be
able to make their contributions.
The Internet allows computer users to remotely access other computers and information stores easily,
wherever they may be across the world. They may do this with or without the use of security,
authentication and encryption technologies, depending on the requirements. This is encouraging new ways
of working from home, collaboration and information sharing in many industries.
Information
Many people use the terms Internet and World Wide Web, or just the Web, interchangeably, but the two
terms are not synonymous. The World Wide Web is a global set of documents, images and other resources,
logically interrelated by hyperlinks and referenced with Uniform Resource Identifiers (URIs).
World Wide Web browser software, such as Microsoft's Internet Explorer, Mozilla Firefox, Opera,
Apple's Safari, and Google Chrome, let users navigate from one web page to another via hyperlinks
embedded in the documents.
Communication
Electronic mail, or email, is an important communications service available on the Internet. The concept
of sending electronic text messages between parties in a way analogous to mailing letters or memos
predates the creation of the Internet. Pictures, documents and other files are sent as email attachments.
Emails can be cc-ed to multiple email addresses.
Data transfer
File sharing is an example of transferring large amounts of data across the Internet. A computer file can be
emailed to customers, colleagues and friends as an attachment. It can be uploaded to a website or FTP
server for easy download by others. It can be put into a "shared location" or onto a file server for instant
use by colleagues. The load of bulk downloads to many users can be eased by the use of "mirror" servers
or peer-to-peer networks.
Streaming media is the real-time delivery of digital media for the immediate consumption or enjoyment by
end users. Many radio and television broadcasters provide Internet feeds of their live audio and video
productions. They may also allow time-shift viewing or listening such as Preview, Classic Clips and Listen
Again features. These providers have been joined by a range of pure Internet "broadcasters" who never had
on-air licenses
Access
The prevalent language for communication on the Internet has been English. This may be a result of the
origin of the Internet, as well as the language's role as a lingua franca. Early computer systems were
limited to the characters in the American Standard Code for Information Interchange (ASCII), a subset of
the Latin alphabet.
After English (27%), the most requested languages on the World Wide Web are Chinese (23%), Spanish
(8%), Japanese (5%), Portuguese and German (4% each), Arabic, French and Russian (3% each), and
Korean (2%). By region, 42% of the world's Internet users are based in Asia, 24% in Europe, 14% in North
America, 10% in Latin America and the Caribbean taken together, 6% in Africa, 3% in the Middle East
and 1% in Australia/Oceania.
Common methods of Internet access in homes include dial-up, landline broadband (over coaxial cable,
fiber optic or copper wires), Wi-Fi, satellite and 3G/4G technology cell phones. Public places to use the
Internet include libraries and Internet cafes, where computers with Internet connections are available.

How the WWW works

The World Wide Web is a system of hypertext documents that are linked to each other. Internet is the
means to access this set of interlinked documents. These hypertext documents can contain text, images or
even audio and video data. The World Wide Web, serving as an enormous information base, has also
facilitated the spread of this information across the globe. It has led to the emergence of the Internet age.

– How do URLs work

Almost every item of information on the WWW can be accessed directly. That is because every
document, file and image has a specific address. These addresses are called Uniform Resource Locators
(URLs). A URL is a formatted text string used by Web browsers, email clients and other software to
identify a network resource on the Internet. Network resources are files that can be plain Web pages, other
text documents, graphics, or programs.
URLs are used by Web browser to locate and access information on the WWW. A URL is also known as a
Web address. Think of URLs as a postal addresses for the Internet.

Figure 1: Showing parts of Uniform Resource Locator.

The first part of the URL parts is known as the protocol. This is almost always http://, which is short for
Hypertext Transfer Protocol. Some URLs start with a different protocol, such as ftp:// or news://. If you're
accessing a document on your local machine instead of on the Web, the URL will begin with file://.
The second part of the URL is known as the domain name. If you've used e-mail on the Internet, you're
probably already familiar with domains. The domain represents the name of the server that you're
connecting to. A domain name, to put it simple, is your address on the World Wide Web.
A most common example of a domain name is www yahoo.com. The first part, the www identifies the
server name of the domain. Yahoo, the second element, is the name of the company, individual or
 organization; and the suffix .com is the domain name extension, which identifies the purpose of the
website.
The third part of the URL is called the directory path. This is the specific area on the server where the
item resides. Directory paths on Web servers work a lot like they do on your desktop computer. To locate a
particular file on a server, you need to indicate its directory path first.
The fourth part of the URL is called the document file name. This indicates the specific file being
accessed. This is usually an HTML file, but it can also be an image, sound, or another file.
Absolute vs. Relative URLs
Full URLs featuring all substrings are called absolute URLs. In some cases such as within Web pages,
URLs can contain only the one location element. These are called relative URLs. Relative URLs are used
for efficiency by Web servers and a few other programs when they already know the correct URL protocol
and host.
CONTACT SABTECH EDU KONSULTS FOR
TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

HTML AND THE WEB

What is HTML?

HyperText is the method by which you move around on the web — by clicking on
special text called hyperlinks which bring you to the next page. The fact that it is
hyper just means it is not linear — i.e. you can go to any place on the Internet
whenever you want by clicking on links — there is no set order to do things in.
Markup is what HTML tags do to the text inside them. They mark it as a certain type
of text (italicised text, for example).
HTML is a Language, as it has code-words and syntax like any other language.
HTML is a computer language devised to allow website creation. These websites can then be
viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics
being accessible to most people in one sitting; and quite powerful in what it allows you to
create. It is constantly undergoing revision and evolution to meet the demands and
requirements of the growing Internet audience under the direction of the World Wide Web
Consortium, W3C, the organisation charged with designing and maintaining the language.

The full meaning of HTML is HyperText Markup Language.

HTML consists of a series of short codes typed into a text-file by the site author — these are
the tags. The text is then saved as a html file, and viewed through a browser, like Internet
Explorer or firefox. This browser reads the file and translates the text into a visible form,
rendering the page as the author had intended. Writing your own HTML entails using tags
correctly to create your vision. You can use anything from a rudimentary text-editor to a
powerful graphical editor to create HTML pages.
What are the tags up to?
The tags are what separate normal text from HTML code. You might know them as the
words between the <angle-brackets>. They allow all the cool stuff like images and tables and
stuff, just by telling your browser what to render on the page.

How does HTML works?

<b>These words will be bold</b>, and these will not.
How HTML works with the Web
HTML allows the individual elements on the Web to be brought together and presented as a collection.
Text, images, multimedia, and other files can all be packaged together using HTML. This section of unit
three explains the basic principles behind the interaction between HTML and the WWW.
You can always view the HTML source code for a particular page through your browser. Once you've
mastered the basics of HTML, this is a great way to learn how other authors put together their HTML
documents. To view the source code of the current document in Netscape, choose Document Source from
the View menu.

How HTML works on the Web

a) Your Computer
The browser on your computer sends a request for an HTML document from a remote server using
addresses called URLs (Uniform Resource Locators). When the data is located and returned, your browser
displays the web page (text and graphics) according to the HTML tags in the document.
b) Connection to the Internet
A dial up modem in your computer or a direct high speed data transmission line connects your computer
to an internet service provider.
c) Internet Service Provider
Your internet service provider is probably an internet web server and is connected to all the other
computers on the web. Your web server sends your request for an HTML document and sends back the file
to you.
d) Internet
The internet is a collection of web servers around the world. Each server has a URL and will forward your
request on until it reaches the server you are looking for. When the data is returned to you, it may travel a
totally different route over different computers.
e) Remote server
The remote web server with the URL you are looking for has all the HTML files including text, graphics,
sound, and video. It may also have gateway scripts that are programs running on the server to process data.

GETTING STARTED WITH HTML

How to Use Notepad
HTML is not really anything more than plain text. For that reason, you don't need any special editors or
compilers to create HTML files. In fact, you can create all of your HTML files with the simplest of text
editors. There are many specialized
HTML editors and converters available, and you may decide to choose one of them based on your
particular needs. But for all the HTML examples in this unit, we will use Windows Notepad to illustrate
just how simple creating HTML can be.

How to Use Mark up Tags

The use of markup tags is what separates HTML from plain text. Markup tags are used extensively in
HTML, and they provide ways to control text formatting, create links to other documents, and even
incorporate images and sounds. In short, markup tags are the key to
making HTML pages work. Markup tags are not case sensitive. For example, the body
element tag (which you'll learn about in the next unit) can be typed as <BODY>, <body>, or even
<BoDy>.

How to Use Special HTML Editing Software

Creating HTML documents with a text editor is the best way to learn the language.
However, before you continue, you should know that there are a number of specialized HTML editing
programs available. Some have graphical interfaces, others feature online help. All of them make creating
HTML documents much easier. Once you have mastered the HTML basics, you may want to try out one of
these programs. In this unit, we will show you what you should look for in an HTML editor.
 Figure 8: Some Features of HTML
1. Look for toolbars and other features that make creating HTML easier. To create a markup tag, you
can click on a button instead of typing it in.
2. Many WYSIWYG (What You See Is What You Get) HTML editors are now available. These
allow you to see what your HTML document will look like as you're putting it together. This feature will
save you the trouble of having to load your page with a Web browser every time you want to see how
things are progressing.
3. Another feature to look for is HTML syntax checking. Editors with this capability can check your
document for HTML errors. Some will even fix the errors for you automatically.
4. Many of the best HTML editors are available right on the World Wide Web as shareware. That
means you can download them and try them out before buying them. There are plenty of places on the
Web to find HTML editors. One of the best places to start looking is the HTML Editors section in the
Yahoo directory.
5.
UNDERSTANDING THE BASICS OF HTML

How to Use the Head Section

The least thing you must include in the HEAD section of all your webpages in order to write valid HMTL
documents is the TITLE element. The title of a webpage appears in your browser´s title bar when you
view the page. The screenshot below shows you the title of this webpage:

The title tag is used extensively by Web search engines; search engines use the text inside a title tag as a
way to determine the actual contents of your page. So make sure your title is descriptive.

 Don't type any extra text in between the <HEAD> and </HEAD> tags. In most cases, the only line
you'll insert between those two tags is your document title.

1. Open a new document in Notepad and type <HTML>. To begin the head section, insert an
opening tag into your HTML document by typing <HEAD>.
2. The only element required in the head section is the Title of your document. Your title should be
short enough to fit in the title bar of a typical browser window, but descriptive enough to explain what your
HTML document contains.
3. Insert a title tag within the head section by typing <TITLE>, followed by the actual title of your
document. In this example, we'll name this document HTML: Easier Than We Thought. Go ahead and type
in that title, then close the tag by typing
</TITLE> on the same line.

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719
 4. Close the head section by typing </HEAD> on the line below the title line.

– How to Use the Body Section

The body section of your HTML document contains most of the text, graphics, hypertext links, and other
information that will appear on the page. All of your HTML formatting tags, which describe the content
and appearance of your document, are placed in the body section. These tags will be explained in detail in
the next two units.
 Sometimes it is easier to type both the <BODY> and </BODY> tags on separate lines right away,
and then fill in the rest of your HTML document between them.

1. Insert the opening body tag by typing <BODY> on a new line in your document. Make sure that
the new body tag follows the end of the head section of your document.

2. Following the <BODY> tag, begin entering the actual text of your HTML document. For this
example, we will just insert a simple sentence. Type HTML is much easier than I thought.

Close the body section of your document by typing </BODY> on a new line. Make sure that this closing tag
appears before the </HTML> tag at the very bottom of your document.

3. Here is what your HTML document looks like so far when viewed with Netscape. Notice the
placement of the document title and the body text.

4. At this point, you should save your file in Notepad. Make sure you save it with an extension of
.htm or.html (it doesn't matter which-all browsers will handle both types). Keep this file open, because you
will be adding to it in the next unit.

How to Use Headings

Headings are used in HTML documents to indicate different sections. There are six different Heading
sizes, which range from very large to very small (smaller than the default body text). You should use
headings judiciously, keeping them short and concise. The most common use for a heading is as the first
line of a home page. In essence, it becomes a headline for your document.
How to Use Special Characters
By now, you may have noticed a potential problem with HTML. All of the markup tags are indicated by
left and right angle brackets (greater-than and less-than symbols). These characters are reserved by HTML
for use with tags. What happens when you want to include one of these characters in your text?
 That's a good question, and the problem isn't limited to just those two symbols. A number of characters
can't be typed directly into the body text HTML, including many foreign language symbols. Fortunately,
HTML provides a solution through the use of character entities. By
using special codes, HTML can display all of the characters in the ISO-Latin-1 (ISO 8859) character set.
HTML 3.2 also includes support for many mathematical symbols.

1. Locate your cursor at the position in the document where the character entity for the special
character is to be placed.

2. A character entity begins with an ampersand (&), followed by the code, and ends with a
semicolon. To place a double quote in your document, for example, type &quot;.

3. Other common character entities for characters that are reserved for HTML tags are &lt; for the
less-than symbol; &gt; for the greater-than symbol; and &amp; for the ampersand. Note that these named
character entities are case-sensitive.
4. You can also use named character entities for many foreign language symbols. For example, to
create the umlaut used in the German phrase, über alles, you would type in &uuml;ber alles.

5. In addition to named character entities, you can use numbered character entities. HTML uses a
subset of the ISO 8859/1 8-bit character set, and several characters, including the copyright symbol,
trademark symbol, and mathematical symbols, are available when referenced by their numbered character
entity.
6. To insert a numerical character entity into HTML, type an ampersand, followed by a pound sign,
the number of the character and a semicolon. For example, to enter the registered trademark symbol into
your document, you would type &#174;. You can find a partial list of numerical character entities in the
Appendix.

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

FORMATTING TEXT
 How to Format Characters with Physical Tags
HTML provides two general ways to apply formatting to text. The first group of formatting tags is
collectively known as physical markup tags. This type of tag gets its name because it indicates a specific
change in appearance. Bold and italic tags, for example, are known as physical markup tags because they
directly specify how the text should appear on screen. In this section of the unit, we will look at how you
can use physical tags in HTML.

1. In general, all character formatting tags work the same. Each has a starting tag and an ending
tag. All of the text that falls between the two tags inherits the specified format. In addition, you can nest
formatting tags inside one another to combine effects.
2. To create italic text, insert an <I> tag in the document, followed by a </I> tag. Any text between
these two tags will be displayed in italics when viewed by a browser.

3. To create bold text, insert <B> and </B> tags. Any text falling between these two tags will appear
in boldface type.

4. To create text that is displayed in a monospaced font (such as Courier), use the <TT> and </TT>
tags. Text falling between these two tags will be displayed in a fixed-width font, similar to the output
from a teletype machine or typewriter.

5. To create strike-through text, which is text with a single horizontal line running through it, use
the <STRIKE> and </STRIKE> tags.

6. Underlined text can be displayed using the <U> and </U> tag pair. You should use these tags
only when absolutely necessary, as underlined text is not widely supported by Web browsers.

7. You can change the font size of normal text. Using the <BIG> and </BIG> tags will increase the
size of the indicated text relative to the default size. <SMALL> and
</SMALL> will make the text smaller.

8. You can also format text as either superscript or subscript, which is text that appears slightly
above or below the current line, respectively. Superscript and subscript numbers are often used in
mathematical equations or to indicate footnotes. Using the <SUP> and </SUP> tags will mark text as
superscript (slightly above the current line). <SUB> and </SUB> will mark text as subscript (slightly below
the current line)
 How to Format Characters with Logical Markup Tags
Logical tags take the approach that what is really important is the type of information being displayed,
rather than exactly how it is displayed. Logical tags leave the actual appearance decisions-such as whether
to display text in boldface, italics, or larger sizes-up to the browser (and ultimately the reader).
CONTACT SABTECH EDU KONSULTS FOR
TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

How to Format Paragraphs

Now that you have learned all the ways to format individual characters, words, and phrases, you are ready
to examine the options you have for presenting entire sections of text. As with normal documents, the basic
section of text in HTML is the paragraph. HTML provides many new ways to present, format, and align
paragraphs.

1. The basic paragraph tag is always used to start a new paragraph. To indicate a paragraph,
type <P>. This tells the Web browser to insert a line space and begin a new paragraph. The <P> tag
always creates a simple, left-justified paragraph. Although the closing <P> tag is optional, you may want
to include it to help you remember where a paragraph ends.
2. You can change the justification of the paragraph with the ALIGN attribute. To change the
alignment of a paragraph, put the ALIGN statement in the paragraph tag, followed by the type of
justification you want. To create a right-justified paragraph, type <P ALIGN=RIGHT>.

3. To create a centered paragraph, type <P ALIGN=CENTER>. To create a paragraph that is

justified on both sides, type <P ALIGN=JUSTIFY>. You can also create a left-justified paragraph by typing
<P ALIGN=LEFT>. However, since this is the default, just typing <P> will have the same effect.

1. By default, the Web browser will wrap lines of text to keep the entire paragraph in view. You
have the option of turning off word wrapping by including the NOWRAP command in the paragraph tag.
To turn off word wrapping in a paragraph, type <P NOWRAP>. This will allow you to explicitly place line
breaks using the <BR> tag, which is explained in the next section.

2. Normally, paragraphs will wrap around an object in the margin, such as a figure or table. To force
the paragraph to begin below the object, you can use the CLEAR attribute. Typing <P CLEAR=LEFT> moves
the paragraph down until the left margin is clear. CLEAR=RIGHT forces the paragraph down to a point
where the right margin is clear. CLEAR=ALL forces the paragraph to wait until both margins are clear.
3. To combine formatting commands in the same paragraph, type all the attributes together in the
same <P> tag. For example, to create a center-aligned paragraph with no word wrapping, type <P
ALIGN=CENTER NOWRAP>.
 How to Use Text Breaks

Not all text fits neatly into paragraphs. Sometimes you want the reader's Web browser to end a line of text
at a specific point. If you're using HTML to display poetry, lyrics, instructional materials, or any other type
of information where specific formatting is necessary, you will want to have control over the flow of text
in the document.

4. To insert a line break at a specific point, type <BR>. This instructs the Web browser to
immediately end the current line and begin placing text on the next line. A line break does not start a new
paragraph.

5. You can use multiple line breaks to create a short, informal list of items. By creating a new
paragraph before and after the list, you can separate it from the rest of your text.

6. Sometimes you'll want to visually break apart sections of text using a visible line. HTML supports
this through the use of horizontal rules. These can be added anywhere in the document by typing <HR>. A
thin line stretching across the entire window will be placed at that point in the text. Horizontal rules, like
paragraphs, support the clear attribute to allow you to begin the line when the margins are clear.

7. To place an entire section of text apart from the rest, use the <BLOCKQUOTE> and
</BLOCKQUOTE> tag pair. This tag, used in place of a paragraph tag, will offset an
entire paragraph from the main body of text, usually by indenting it and adding extra spaces to the top
and bottom. It is commonly used to highlight long quotations and passages.

How to Use Preformatted Text

Preformatted text allows you break away from the normal rules of HTML and quickly specify exactly how
a section of text will appear in the reader's Web browser. When you are using preformatted text, you don't
need to use the HTML markup tags-the text will appear exactly as you have typed it, complete with spaces,
line breaks, and empty lines. Preformatted text is always displayed in a monospaced, fixed-width font.

8. To begin a section of preformatted text, type <PRE>.

Now type the section of text exactly how you want it to appear. It's a good idea to limit the length of
 your lines to 65 characters or less, so that you can accommodate the screen width of most browsers.
(Remember that browsers will not word wrap preformatted text.)

9. When you're finished entering your preformatted text, type </PRE> to mark the end of the
section.

10. You can apply character formatting styles, such as bold and italic, in preformatted text. Headings
and paragraphs will not work in preformatted text blocks, however.

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

USING HYPERTEXT LINKS

What is hypertext link
Hypertext is text displayed on a computer or other electronic device with references (hyperlinks) to other
text that the reader can immediately access, usually by a mouse click or key press sequence. Apart from
running text, hypertext may contain tables, images and other presentational devices. Hypertext is the
underlying concept defining the structure of the World Wide Web. It is an easy-to-use and flexible format
to share information over the Internet.
Types and uses of hypertext
Hypertext documents can either be static (prepared and stored in advance) or dynamic (continually
changing in response to user input). Static hypertext can be used to cross- reference collections of data in
documents, software applications, or books on CDs. A well- constructed system can also incorporate other
user-interface conventions, such as menus and command lines.
How to Create a Hyperlink
Hyperlinks connect two different documents. You can link to one of your own documents or to any other
document on the World Wide Web. You can even link to a different section in the same document. It is
very easy to create links with HTML, and you only need to follow a few simple steps.

1. Use your Web browser to locate the document you want to link. You can link to any other
document on the World Wide Web.
2. Make a note of the Uniform Resource Locator (URL) of the document you want to link to. The
URL is prominently displayed by your Web browser, usually near the top. Make sure to note the complete
URL.
3. To make a link to another document, you need to use a special type of HTML tag known as an
anchor tag, also commonly known as a link tag. Locate the place in your HTML document where you
want to insert the hypertext link. Type <A HREF=", followed by the URL of the document you want to
link to. Then close the tag by typing ">.

4. Type some descriptive text (also known as the link text) after the anchor tag to let readers know
something about where this link will take them.

5. Finish the anchor tag by typing </A> on the same line.

 6. Once you've created your link, check to make sure it works by clicking on it while using your
Web browser. Note that by default, most Web browsers display hypertext links as underlined text in a
different colour than normal text. This lets your readers know that clicking on the text will take them to
another document.

How to Use the ID Attribute

Assigning an ID to an element in your HTML document allows hyperlinks to point directly to that element
instead of to the very top of the page. The HTML 3.0 ID attribute did not make it into the HTML 3.2
standard, but it is rendered by some browsers. You can use the ID attribute for most HTML elements, such
as paragraphs, headings, and lists.
7. Locate the element you'd like to name with an ID. This can be almost any element in your
document, but it is usually a paragraph or heading.
8. Inside the element's opening tag, just after the letter P, insert a space and type ID=.
9. Your element ID needs a name. The hyperlinks will use this name to take readers directly to this
section of your document. In this example, we'll simply name the element "MyParagraph".
10. Type the name of your ID, inside quotation marks.
11. To create a hyperlink directly to this element, add a pound sign and the ID name inside your
hyperlink tag. For example, to link directly to "MyParagraph", a typical hyperlink might look like the one
above.

How to Use Relative Path Names

Web browsers, even when running on PC or Macintosh machines, always follow UNIX style path names.
This means that directories (folders) are separated by forward slash marks (/), and higher-level directories
are indicated by two periods (..).
 The simplest relative path name is no path name at all. If you are linking to another
document that is in the same directory, all you have to do is type in the file name of the new document in
place of the full URL. For example, to link
to a document named newfile.html, type
<AHREF="newfile.html">.

 To link to documents or files in a subdirectory, all you need to specify is the path and file
name relative to the current document. For example, to link to a document called budget.html in a
subdirectory named budget96, you would type
<A HREF="budget96/budget.html">.

 You can also navigate up the directory tree of your server by using two periods (..) to
move up one level. For example, to link from the budget.html file in the previous example back to the main
document, you would type
<A HREF="../main.html">.

 If the new document was two levels above the current one, you would separate each level
with a slash, and type
<A HREF="../../main.html">.

 The single greatest advantage to using relative path names is portability. If you do your
HTML development on a local machine, and then upload your finished work to a Web server, you can save
yourself the trouble of having to reset all of your hyperlinks to reflect the new location. Likewise, relative
 path names will save you the headache of changing your hyperlinks if you move your existing HTML files
to an entirely new Web server
CONTACT SABTECH EDU KONSULTS FOR
TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

LISTS, TABLES AND FRAMES IN HTML

How to Create Unordered Lists

The simplest list in HTML is the unordered or bulleted list. This is ideal for listing items that have no
particular hierarchy or order of importance. Unordered lists are very common on the Web and are used to
convey items of note in a quick and concise manner. Web browsers
usually place bullets or other markers in front of each item in an unordered list.

1. Locate the part of your HTML document where you want to insert a list.
2. Begin the unordered list by typing <UL>, and then press Enter. The <UL> tag tells the Web
browser to treat this section of text as an unordered list. Unordered lists will usually be indented from
the main document and list items will be formatted with bullets. The size and type of bullets used are
determined by the Web browser.

3. Create a heading for your list. This is an optional brief description of what your list contains. To
create a list header, type <LH>, followed by a brief summary of the list contents. Then type </LH> to close
the list heading tag. For example, to create a list heading for a grocery list, you would type <LH>My
Grocery List</LH>.

4. To create the first item in your list, type <LI>. Then type the text of the item itself.

<LI> is an open tag, which means that you do not need to type </LI> at the end of each item.

5. Continue typing <LI> followed by text for each item in your list. Press Enter after each item.
6. Finish the unordered list by typing </UL>.

How to Create Ordered Lists

1. To create an ordered list, locate the place in your document where you'd like to begin the list
and type <OL>.

2. To create an optional heading for the ordered list, type <LH> followed by the heading. Then close
the heading tag by typing </LH>.
 3. To enter the first item of your list, type <LI> followed by the item. There is no need to include a
closing </LI> tag.

4. Type </OL> to close the ordered list.

How to Create Definition Lists

Definition lists are different from other lists in HTML, because each item in a definition list contains two
parts: a term and a definition. Definition lists are typically used for glossaries and dictionaries. With a little
creativity, however, they can be put to use in many different ways, such as product catalogs and even
poetry. Definition lists are extremely flexible. The information contained in a <DD> tag is not limited to
simple text. You can include images, tables, and full character formatting in your definitions.
Figure 3 : A n Example of definition List in HTML
5. To create a definition list in your HTML document, type <DL> at the point where you'd like the
list to begin.

6. As mentioned earlier, definition lists are slightly different from ordered and unordered lists. Each
item in a definition list is made up of two separate parts: the term and the definition. Typically, browsers
will display the term on one line and the definition indented on the next line.

7. To create a definition term, type <DT> followed by text describing the element being defined.
For example, to begin a definition of the word apple, you would type
<DT>Apple.

8. To create the definition, type <DD>, followed by the text of the definition. For example, to create
a definition for the term in the previous step, you would type
<DD>a firm, edible, rounded fruit.

9. As with ordered and unordered lists, there are no closing tags for list items. Therefore, it is not
necessary to type </DT> or </DD> at the end of your terms and definitions.
10. Type </DL> to close your definition list.

How to Create Lists within Lists

Begin the first list by typing <OL>. In this example, we're assuming that the first list is an ordered list, but
in reality, it can be any type of list you want.
 11. Enter your list items one by one, beginning each item with <LI>.

12. When you reach a step that requires a nested list, begin another list. The Web browser will
automatically format this new list to fall underneath the current item in the first list. For example, to
create a nested list under Step 2 in your original list, just type <UL>.

13. Start entering items in your new list. When you're finished, close the new list by typing </UL>.
You must close the new list before continuing to enter items in the original list.
Enter the remaining items in the original list. Then press Enter and type </OL> when you're finished.

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

HTML form

A webform on a web page allows a user to enter data that is sent to a server for processing. Webforms
resemble paper or database forms because internet users fill out the forms using checkboxes, radio buttons,
or text fields. For example, webforms can be used to enter shipping or credit card data to order a product or
can be used to retrieve data (e.g., searching on a search engine).

In addition to functioning as input templates for new information, webforms can also be used to query and
display existing data in a similar manner to mail merge forms, with the same advantages. The decoupling
of message structure and underlying data allow both to vary independently. The use of webforms for this
purpose avoids the problems associated with explicitly creating separate web pages for each record in a
database.
Webforms are defined in formal programming languages such as Perl, PHP, Java, Javascript or .NET
(including ASP.NET). The implementations of these languages often automatically invoke user interface
idioms, such as grids and themes, minimizing programming time, costs and risks.
A form in HTML is by far the most common way to use a form online. The following elements can make

up the user-inputting portion of a form:

 input field
o text – a simple text box that allows input of a single line of text (an alternative, password,
is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as
*)
o checkbox – a check box
o radio – a radio button
o file – a file select control for uploading a file
o reset – a reset button that, when activated, tells the browser to restore the values to their
initial values.
o submit – a button that tells the browser to take action on the form (typically to send it to a
server)
 textarea – much like the text input field except a textarea allows for multiple rows of data to be
shown and entered
 select – a drop-down list that displays a list of items a user can select from

These basic elements provide most possible graphical user interface (GUI) elements, but not all. For
example, there are no equivalents to a combo box, balloon help, tree view, or grid view. A grid view,
however, can be mimicked by using a standard HTML table with each cell containing a text input element.
A tree view could also be mimicked through nested tables or, more semantically appropriately, nested lists.
Many of these are available through JavaScript libraries
How to Create a Simple Form
Fill-out forms in HTML are easy, quick, and painless. In fact, you can create a simple fill-out form in just
a few simple steps. Long forms usually work best when placed in their own HTML documents. If your
form requires a lot of input, create a new HTML document just for the form and then create a hyperlink to
it from your main page. This will eliminate clutter and confusion. You're not limited to just input fields in
your form. You can use all the normal HTML paragraph and character formatting codes. It is often a good
idea to place brief paragraphs in front of groups of input fields to help explain what needs to be entered in
the form.
1. Type <FORM> in your HTML document as in figure 2

1. Each <FORM> tag has two important attributes that need to be set: Method and Action. The
Method attribute indicates how the information inside the form will be transferred to the Web server.
There are two choices for Method: GET and POST. The critical difference between the two is that the
POST method tells the server to process the form line by line, while the GET method tells the server to
process the
entire form as one long concatenated string of values. You'll almost always want to use the POST method
with your forms.

2. The Action attribute tells the server what to do with the data contained in the form. This
attribute usually contains the URL of a special program designed to process the data. You will learn a little
more about how this works at the end of the unit.

3. Enter your form labels using normal HTML markup codes. For example, to create a label to
prompt the user to enter their last name at the top of the form, type <P>Last Name:.

4. To insert a data field to allow the user to enter information into the form, type
<INPUT>. This tells the Web browser to place a data field in the document and to accept user input.
There are several types of input fields available. One of the simplest types is the single-line text field.
5. To specify a single-line text field, enter TYPE=TEXT inside the <INPUT> tag.

6. Each input field needs to be assigned a name, so that it can be distinguished from other input
fields. You can name the input field anything you like, but the name should be kept short and should not
contain any spaces or special characters. For example, to name the above field lastname, type
NAME="lastname" inside the
<INPUT> tag.

7. You can specify the maximum length of a text field with the size attribute by typing SIZE=,
followed by the length in quotes. For example, to limit the length of the lastname field to 20 characters,
type SIZE="20" inside the <INPUT> tag.

8. The last two input items that every form should have are the Submit and Reset buttons. The
Submit button is pressed by the user when the form is completed, and sends all of the information to the
server. To include a Submit button in your form, type <INPUT TYPE=SUBMIT> near the bottom of the
form. The Submit button is a required element-without it, the form cannot be processed.
The Reset button allows the user to clear all of the fields in the form at once and reset them to their
initial values so that new information can be added. Although the Reset button is not required, it is
strongly recommended. To include it in your form, type <INPUT TYPE=RESET>.

Figure 4 : The Reset Button

9. Type </FORM> on a new line to close the form.

How to Use Input Fields in Forms

In many cases, simple text fields are not enough when it comes to specifying the type of information you
want to receive from your forms. Fortunately, HTML forms are very flexible, and include many different
types of data fields.

2. You can insert a password field into your form. This acts like a single-line text field, but hides the
input by displaying asterisks (**) in place of the actual characters entered. To insert a password field into
your form, type <INPUT NAME="password" TYPE=PASSWORD>. You can specify the maximum length of
the password using the SIZE attribute.
 3. Checkbox fields allow the user to select or deselect an item. You can also initialize the field to be
selected by setting the VALUE attribute to "checked". The label for the checkbox is typed in immediately
after the <INPUT> tag. For example, you might include a checkbox field on your form to allow users to
specify whether or not they'd like to receive a newsletter. To insert this field into your form, type <INPUT
NAME="getnews" TYPE=checkbox VALUE= "checked">Check here to receive our newsletter.

4. Radio button fields allow the user to make a selection from a group of choices. Only one item in a
radio button group can be selected.

5. To insert a radio group into your form, type <INPUT NAME= "groupname" TYPE=radio
VALUE="value1">. Each item in the group is entered with separate
<INPUT> tags and unique VALUE attributes, but all of the items in the same radio button group should
have the same NAME attribute.

6. You can add file attachments to the form by using the file type. This allows users to attach a file
to the form by either typing the file name or selecting it from a browse dialog. To insert a file attachment
field, type <INPUT NAME="attachment" TYPE=file>.

7. You can also insert a free-form field for text, which allows the user to enter more than just a
single line of text. Instead of using the <INPUT> tag, use the <TEXTAREA> and </TEXTAREA> tag pair.
8. The <TEXTAREA> tag accepts several rows of input, up to the maximum you specify using the
ROWS attribute. You can also specify the number of columns (the line width) in the TEXTAREA field with
the COLS attribute. For example, to create a field to allow a user to enter comments, you would type
<TEXTAREA NAME= "comments" ROWS=6 COLS=65>. This would leave room for six lines of up to 65
characters each.

9. Sometimes you'll want to include a selection menu on your form. This allows you to present the
user with a large number of choices without using up too much space on your form. The menu can allow
either a single or multiple-choice selection.
 10. To insert a selection menu, use the <SELECT> and </SELECT> tag pair. As with the
<INPUT> tag, you need to assign a NAME attribute for your selection menu. For example, to create a
selection menu that allows the user to choose a color, type
<SELECT NAME="color">. If you want to allow multiple selections to be made, insert the attribute
MULTIPLE inside the <SELECT> tag.

Each item in a selection menu is typed in using the <OPTION> tag (much like the unordered list).
Enter each menu choice on a separate line.

11. When you've finished typing in all of the option items, type </SELECT>.

How CGI Makes Your Forms Work

CGI is a universal way to execute programs on the Web. These programs are known as CGI scripts, and
are designed to process data submitted via forms from Web browsers of all types. CGI scripts can be
written and compiled using a variety of different programming languages, such as Perl or Visual Basic.
The language used depends on the type of server that the CGI script needs to be run on.
1. The user supplies data by filling out the form, and then presses the Submit button.
2. The browser sends the data fields from the form to a CGI script. The appropriate script is
specified with the ACTION attribute in the <FORM> tag.

<FORM METHOD = POST ACTION = “--/cgi-bin/process-data”

3. The CGI script processes the data supplied by the browser.
4. At this CGI point, the CGI script may update a database on the server, instructs the server to
perform additional functions, or even execute additional CGI scripts.
5. The script finishes and returns information to the server, usually in the form of a new HTML
document that is created by the script.
6. The server sends the new information along to the Web browser, which displays it.

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

USING TABLES
How to Create a Simple Table
Creating a simple table in HTML is fairly straightforward. All you need to do is supply the data. The
client-side Web browser takes care of all the dirty work by determining how to display it.
The key thing to remember about tables in HTML is that they are organized in rows, which go
horizontally from left to right. Once you begin to think of the data you want to place in your table in terms
of rows, you will be all set to perform some HTML wizardry.

In this unit, you will get started by stepping through the process of creating your first table in HTML.
 1. Type <TABLE BORDER> in your HTML document to create a table with a thin border around
all of the table cells.

2. You can type in a caption for your table, which most browsers will display at the top. It's
sometimes easier to think of the caption as the title of your table. Type
<CAPTION>, followed by the actual text of your table caption. Then type<
/CAPTION> to close the tag.

3. Tables are built row by row using the <TR> and </TR> tag pair. To start your first table row, type
<TR>.

4. Now it's time to enter in the data for the individual cells of the table. Because this is the first row
of the table, it's likely that you'll want this row to contain headings for each of the columns of data. Table
headings are created using the <TH> and </TH> tag pair. To create a heading for a column of last names,
you would type <TH>Last Name</TH>.

5. You can type all of your column headings one after another, each contained in its own
<TH> and </TH> tag pair.
6. After you've completed your first row, type </TR> to finish it. Since you'll be adding another row
immediately after it, you can type <TR> on the next line to start the new row.

7. Now you can start adding the actual table data cell by cell using the <TD> and </TD> tag pair. To
enter the data in the first cell of the second row, type <TD> followed by the actual data and the closing
</TD> tag.

8. Type in your remaining data, using the <TD> and </TD> tags to separate each cell and the <TR>
and </TR> tags to separate each row. When you're finished, type
</TABLE>to signal the end of the table.

How to Format Tables

Because HTML is a markup language and not a layout language, the actual display of HTML tables is left
up to the Web browser. The height and width of the individual cells are calculated by the browser based on
their contents. In general, browsers do a good job of displaying table contents all by themselves.
Sometimes, however, you'll want to exercise a little more control over how your tables are displayed.
HTML 3's table formatting codes let you do just that.
9. To create a table with no border at all, simply type <TABLE>. You can also give your table a 3-D
beveled look by adjusting the size of the outside border. This feature is only supported by Netscape
browsers. To adjust the size of the outside table border, use the BORDER attribute. For example, to create
a table with a border that is 8 pixels wide, type <TABLE BORDER=8>.

10. Netscape also adds extensions to give you even greater control over the borders and spacing of the
cells inside your table. To change the size of the internal borders, add the CELLSPACING attribute to your
<TABLE> tag. For example, to create a table with a wide internal border, type <TABLE BORDER
CELLSPACING=5>.
11. You can also "pad" the individual cells of your table to add space on all sides. This keeps the
border from running up against the actual cell contents. It's very useful if you plan on including images
inside your table. To add space, use the CELLPADDING attribute inside your <TABLE> tag. To add 3
pixels of space on each side of every cell, type <TABLE CELLPADDING=3>.
12. You can format text in each individual cell using all of the standard character-level markup codes,
such as <B>, <I>, and <STRONG>. You can also include line breaks inside cells using the <BR> tag. Each
cell can be formatted independently of the others.
13. To control the alignment of text inside cells, use the ALIGN and VALIGN attributes with the
standard commands, such as LEFT, RIGHT, and CENTER. You can set the cell alignment for an entire
row by placing these attributes in the <TR> tag. You can even align the contents of each cell individually
if you're so inclined. For example, to center text within an individual cell both vertically and horizontally,
type <TD ALIGN=CENTER VALIGN=CENTER>. Individual cell alignments will override any
settings for the row.

14. Sometimes you'll want an individual cell to span across multiple columns or rows. This is easy to
do using the ROWSPAN and COLSPAN attributes inside the cell's
<TD> tag. To force a cell to span vertically down across three rows, type <TD ROWSPAN=3>. To force
a cell to span horizontally from left to right across several columns, use the COLSPAN attribute inside the
<TD> tag. For example, to span a cell across two columns, type <TD COLSPAN=2>.
15. You can gain even more precise control over the size and appearance of your table using the
WIDTH attribute. The WIDTH attribute can be applied to both the entire table as well as individual cells.
You can specify an exact width for the table or set the width to be a percentage of the visible screen.

16. To specify an exact width for your table in pixels, set the WIDTH attribute to an absolute number.
For example, to force a table to be exactly 400 pixels wide, type
<TABLE WIDTH=400>.

17. You can also set the table width to be relative to the space between the left and right margins of
the current window. This means the table will resize along with the Web browser. To set the table width
equal to two-thirds of the screen, type <TABLE WIDTH=66%>.
18. You can apply width settings to columns by placing the WIDTH attribute inside a
<TH> or <TD> tag. The width can be indicated using absolute or relative numbers. When you use a
percentage value in individual cells, the width is relative to the table, not the full screen. For example, to
set a column width to one-half the total width of the table, type <TD WIDTH=50%>.

19. You can also control how the internal cell borders are displayed using the RULES attribute. The
possible values for RULES are ALL, the default, which displays all of the internal borders; NONE, which
disables internal borders; COLS, which places borders only between columns; and ROWS, which places
 borders only between rows.
For example, to place internal cell borders between columns only, you would type
<TABLE ROWS=COLS>. As with the FRAME attribute, the RULES attribute is new to HTML3 and is
not widely supported.

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

USING FRAMES

How to Create Frame Documents

The first thing to understand about frames is that they use an entirely new kind of HTML document, called
a frame document. Frame documents control the layout and appearance of the frames. Frame documents
don't contain any other HTML content.
Once you've built your frame document, you can fill the frames with regular HTML documents. But
before we get too far ahead of ourselves, let's concentrate on creating a very simple set of frames.

1. Open a new document in Notepad, and type in <HTML>.Press Enter, then type in
<HEAD>. Press Enter again.
2. Type <TITLE>My First Frame Document</TITLE>,then press Enter. On the next line, type
</HEAD>and press Enter one more time.

3. So far, this looks just like a normal HTML document. Here's where things get different, though.
Instead of typing <BODY>, type <FRAMESET>. The
<FRAMESET> tag instructs Netscape that this is a frame layout document.

4. Place the cursor inside the <FRAMESET> tag and typeROWS="*,*,*". This creates three
horizontal frames of equal relative height. The asterisk character instructs the browser to give the frame all
the remaining space in the window. Because there are three asterisks, Netscape will give each frame one-
third of the available space.

5. On the next line, type <FRAME NAME=frame1 SRC="blank.html">.This assigns the name
frame1 to the first frame in your document. The SRC attribute tells the browser to display the HTML
document named blank.html in this frame. Normally,
you would place a real HTML document in the SRC attribute. For this example, we'll just use blank.html,
a made-up file name that doesn't really exist. Press Enter when you're finished.

6. Type <FRAME NAME=frame2 SRC="blank.html">and then press Enter. On the next line,
type <FRAME NAME=frame3 SRC="blank.html"> and press Enter again. Now we've created three
empty named frames.

7. Type <FRAMESET> and press Enter. Then type < /HTML>.

8. Save your document in Notepad as myframe.html.

9. You have now created a very simple frame document that contains three empty frames. If this
document were viewed in Netscape, it would look exactly like the document shown in the monitor in the
center of the page. It may not look like much right now, but in the next section, you'll learn how to make
your frames come alive.
How to Use Targets in Frames
Now that you've created a frame document, you're ready to start filling those frames with HTML content.
In this unit you'll learn how to place HTML documents in frames. More importantly, you'll learn how to
update frames with new documents, including how to update the contents of one frame from another.
10. Frames are updated using targets. Targets are simply hyperlink tag extensions that contain a frame
name. Targets specify which frame the hyperlink should update.
11. Before we go any further, we'll need to create a few HTML documents that contain hyperlinks
using targets. Launch Notepad and open a new document. Then type
<HTML> and press Enter.
12. Type <HEAD> and press Enter. Then type <TITLE>Document A</TITLE> and press Enter.
Finally, type </HEAD>and press Enter again.

13. Type <BODY> and press Enter. Then type <H1>Document A</H1> and press Enter.

14. Type <P> to start your first paragraph. Then type Top Frame: and press Enter.
 15. Here's where we'll start placing hyperlinks with target attributes. These three hyperlinks will allow
the user to display different documents in the top frame. Type
<A HREF="a.html" TARGET="frame1">A</A>. This link will load a.html (the
document you're creating right now) into the frame named frame1. In the frame document you created in
the last section, frame1 was the top frame.

16. Press Enter, then type <A HREF="b.html" TARGET="frame1">B</A>.This link will load a
document named b.html into the top frame. Press Enter again and then type <A HREF="c.html"
TARGET="frame1">C</A>. As you've probably guessed by now, this hyperlink will load c.html into
the top frame. Press Enter again.

17. Type <BR> to force a line break and press enter. Then type Middle Frame: and press Enter
again.

18. Type in all three hyperlinks again, only this time, change the target to frame2. This will instruct
the browser to load the documents into the middle frame.

19. When you're finished, type <BR> to force another line break and press Enter. Then type Bottom
Frame: and press Enter again. Type in the hyperlinks again, with the target set to frame3. When you're
finished, press Enter and type</P> to close the paragraph. Then press Enter again.

20. Type </BODY> and then press Enter. Then type</HTML>.

21. Save this document as a.html. Make sure that you save it in the same folder as myframe.html,
which you created in the last section.
22. Repeat this process two more times, and save the files as b.html and c.html. To save a lot of
typing, you can simply change the <TITLE> and <H1> tags at the top of the document and save the
 existing file under a new name. Just choose Save As from the File menu and type in the new file name.

Open myframe.html in Notepad. Place the cursor inside the SRC attribute of the first
<FRAME> tag, and change the URL from blank.html to a.html. Change the URLs for the next two
<FRAME> tags to b.html and c.html, respectively. Choose Save from the File menu to save the changes to
myframe.html.

23. Launch Netscape and open myframe.html. Three frames will appear. Each of your three HTML
documents, A, B, and C, will appear in a different frame.
24. Now try clicking on the different hyperlinks and see what happens. You can load A, B, and C into
any of the three frames. You can even fill all three frames with the same document.

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

JAVASCRIPT
What is JavaScript?
JavaScript is the client side scripting language, developed by netscape, used along with HTML to build a
efficient web site / webpage. JavaScript is used in most websites to enrich the interface and enhance the
user experience.
In the beginning stages, web pages were developed only using html, which are nothing but static pages.
User interaction and dynamic changes are not possible with html. With the advent of scripting languages
the problem was solved. There are two types of script languages - server side and client side.

When a page is requested, the request is sent to the server and data is fetched and viewed in the browser.

 If the dynamic changes in the webpage are caused in the client side (the browsers like mozilla /
IE). It is called client side scripting language (E.g. - JavaScript).
 If the dynamic changes in the web page are caused in the server side (the server checks the request
and based on the data it makes changes in the page before sending the data to the browser). It is called
server side scripting language (E.g. - PHP).

Java script codes are embedded in HTML files. Whenever a browser requests for a webpage, the HTML
file along with script is transferred to the browser.
JavaScript is used to create dynamic changes, validate forms, detect visitor details, create/use cookies,
etc.. JavaScript works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, Opera,
Safari and more.
The basic concepts of JavaScript and client-side scripting
Client side
Programs are passed to the computer that the browser is on, and that computer runs them. The alternative
is server side, where the program is run on the server and only the results are passed to the computer that
the browser is on. Examples of this would be PHP, Perl, ASP, JSP etc. Currently the most popular client-
side scripting language is JavaScript
 Interpreted
The program is passed as source code with all the programming language visible. It is then converted into
machine code as it is being used. Compiled languages are converted into machine code first then passed
around, so you never get to see the original programming language. Java is actually dual half compiled,
meaning it is half compiled (to 'byte code') before it is passed, then executed in a virtual machine which
converts it to fully compiled code just before use, in order to execute it on the computer's processor.
Scripting
This is a little harder to define. Scripting languages are often used for performing repetitive tasks.
Although they may be complete programming languages, they do not usually go into the depths of
complex programs, such as thread and memory management. They may use another program to do the
work and simply tell it what to do. They often do not create their own user interfaces, and instead will rely
on the other programs to create an interface for them.

High level
Written in words that are as close to English as possible. The contrast would be with assembly code,
where each command can be directly translated into machine code.

What is Object Oriented Programming?

An Object Oriented Programming is a set of tools and methods that enable software Engineers to build
reliable, user friendly, maintainable, well documented, reusable software systems that fulfils the
requirements of its users. It is claimed that object-orientation provides software developers with new mind
tools to use in solving a wide variety of problems.
Object-orientation provides a new view of computation. A software system is seen as a community of
objects that cooperate with each other by passing messages in solving a problem.
An object-oriented programming language provides support for the following object oriented concepts:
 Objects and Classes
 Inheritance
 Polymorphism and Dynamic binding
What Is an Object?
An object is a software bundle of related state and behavior. Software objects are often used to model the
real-world objects that you find in everyday life. This lesson explains how state and behavior are
represented within an object, introduces the concept of data encapsulation, and explains the benefits of
designing your software in this manner.
What Is a Class?
A class is a blueprint or prototype from which objects are created. This section defines a class that models
the state and behavior of a real-world object. It intentionally focuses on the basics, showing how a simple
class can cleanly model state and behavior.
What Is an Inheritance?
Inheritance provides a powerful and natural mechanism for organizing and structuring your software. This
section explains how classes inherit state and behavior from their super classes, and explains how to derive
one class from another using the simple syntax provided by the Java programming language.

What is polymorphism?
In object-oriented programming, polymorphism (from the Greek meaning "having multiple forms") is the
characteristic of being able to assign a different meaning or usage to something in different contexts -
specifically, to allow an entity such as a variable, a function, or an object to have more than one form.
There are several different kinds of polymorphism.
What is Dynamic Binding
The property of object-oriented programming languages where the code executed to perform a given
 operation is determined at run time from the class of the operand(s). There may be several different classes
of objects which can receive a given message. An expression may denote an object which may have more
than one possible class and that class can only be determined at run time. New classes may be created that
can receive a particular message, without changing (or recompiling) the code which sends the message. A
class may be created that can receive any set of existing messages.
Java and JavaScript
Never confuse JavaScript with Java. Java is an application development language developed by SUN
Microsystems and has no links with J avaScript. JavaScript was created long before

java was developed. JavaScript is many times denoted as Java Script.

Table 1. JavaScript compared to Java
JavaScript Java
Interpreted (not compiled) by client Compiled byte codes down loaded from
server, executed on client
Object-based. No distinction between Object-oriented. Objects are divided into
types of objects. Inheritance is through the classes and instances with all inheritance
prototype mechanism and through the class hierarchy. Classes and
properties and methods can be added to instances cannot have properties or
any object dynamically. methods
added dynamically.
Code integrated with, and embedded in, Applets distinct from HTML
HTML (accessed from HTML pages).
Variable data types not declared (loose Variable data types must be declared
typing). (strong
typing).
Dynamic binding. Object references Static binding. Object references must
checked at runtime exist at compile-time

Cannot automatically write to hard disk. Cannot automatically write to hard

disk (in Java Applets).

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719

JAVA SCRIPT VARIABLES AND DATA TYPES

JavaScript Variables
Every piece of data is known as a value. When a value is referred in a statement, it is called a literal value.
For the same reason people are identified by names as opposed to "human" or "person", literal values can
be named in order to make repeated reference to them practical, efficient and readable. These names are
called variables.
Declaring and Initializing the Variables
var num; // declare variable, has null value
num = 20; // assign a value, null value is replaced
//OR
var num=20; // declare AND assign value (initialize)
var a,b,c,d; //multiple variables may be declared simultaneously
 var a = 5, b = 6, c = 7,d=8; //multiple variables may be initialized simultaneously
Variable Names
Variable names cannot contain spaces, begin with a number but can see the underscore (_)
. JavaScript Variable name can not use any reserved keywords. Two words can either be separated by an
underscore (my_variable) or (myVariable).
Variable Scope
There are two types of Variable scope:-
1. Globle scope Variable,
2 . Local scope Variable.
1. Globle scope Variable:- A variable declared or initialized outside a function body has a global scope,
making it accessible to all other statements within the same document.
2. Local scope Variable:- A variable declared or initialized within a function body has a local scope,
making it accessible only to statements within the same function body. [

Java Script Data type

Data Type:- A data type is defined by the value assigned to it . A variable could be a number on one line,
then assigned a string value and later be assigned an object reference. JavaScript would change its data
type dynamically .It also represent the data's nature. Data is directly treated on those data types and
calculate up on the works.
There are two types of the data types, namely:-
 .Primitive data types
 Compositive data types
Primitive data types:- Primitive data types are the simplest building blocks of a program. The types are
the following:-
 Numeric:-JavaScript supports both integers and floating point numbers .Integers are whole
numbers and it does not support the decimal numbers such as : 145 . Floating point numbers are fractional
numbers or decimal numbers. Such as : 12.50
 String:- String is a collection of characters enclosed in either single quotes or double quotes .If
the string starts with a single quotes it must end with single quotes .If the string starts with a double quotes,
it must end with double quotes . Such as: 'Welcome to JavaScript' or "Welcome to JavaScript".
 Boolean:-Boolean literals are logical values that have only one of two values, true or false. It is
used in conditional statements. Our statements
are checked true or false then we use the Boolean variables.
 Null:-The null value represents no value that means strings are empty .
 Undefined:- A variables to be declared but given no any initial value then it runtime error display

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719
 STATEMENT AND OPERATORS
JavaScript Statement
The JavaScript language supported Two type Condition.
 .if statement
 Function
if Statement
if statements execute a set of commands if a specified condition is true. If the condition is false, another
set of statements can be executed through the use of the else keyword.
The main idea behind if statement is embodied by the sentence: "If the weather's good tomorrow, we'll go
out and have a picnic and Lisa will do cartwheels -- else, we'll stay in and Catherine will watch TV."
As you can see, the idea is quite intuitive and, surprisingly enough, so is the syntax:

if (condition) { statements1 }
-or-
if (condition) {
statements1
}
else {
statements2
}

(An if statement does not require an else statement following it, but an else
statement must be preceded by an if statement.)

condition can be any JavaScript expression that evaluates to true or false. Parentheses are required around
the condition. If condition evaluates to true, the statements in statements1 are executed.

statements1 and statements2 can be any JavaScript statements, including further nested if statements.
Multiple statements must be enclosed in braces.

Function
The function keyword identifies as a function. The parameters in the parenthesis ( ) provide a means of
passing values to the function. There can be as many parameters separated by commas as you need. This is
perfectly ok to have a function with no parameters. These parameters are variables which are used by the
JavaScript statements inside the curly braces { }. The variable keyword is not needed to declare the
parameters in a function as variables because they are automatically declared and initialized when the
function is called. The function can return a value by using the return keyword.
Conditional JavaScript if-else Statement
The JavaScript Conditional Statement used to different actions and used to based on different
conditions,you want to execute some code if a condition is true and another code the condition is not true,
use the if else statement.

JavaScript Operators
Operators determine what is done to variables and functions. JavaScript has many operators namely:
Arithmetic, Assignment,Bitwise,Comparison, logical, Conditionnal, Operator Precedence and String
Operators.
Operators "operate" on values. We deal with operators every day, you have probably just never heard
them called that. For example, in a statement such as 1+1=2, the + sign is the operator. JavaScript offers
many operators beyond the basic ones used in arithmetic.
Syntax
Though specific rules of syntax vary with some operators, the typical syntax is variable = value operator
value

where variable is the name of a variable used to store a value, value is a number, string, value, expression,
or property of an object, and operator is one of the operators described here.

Description
The sections that follow group JavaScript into classes based on the type of operation performed.
Arithmetic Operators
Arithmetic operators act on numbers. Table 1 lists the arithmetic operators offered in JavaScript and
provides examples of each.
Bitwise Operators
Bitwise operators treat their values as binary numbers (1's and 0's) rather than as numeric values. You
may never need to use these so don't waste too much energy trying to memorize them. But just in case you
do come across a bitwise operator, Table 3 shows what each one does.
Table 3: JavaScript's Bitwise Operators.

Operator Action Example

bitwise AND 10&3=2
bitwise OR 10|3=11
bitwise exclusive OR 10^3=9
<< left shift 10<<3=80
Sign-propagating right
>> 10>>3=1
shift
>>> Zero-fill right shift 10>>>3=1

Some shortcut operators also exist for bitwise assignments, as listed in Table 4.

Table 4: JavaScript's Bitwise Assignment Operators.

Operator Example Meaning

<<= x<<=y x=x<<y
>>= x>>=y x=x>>y
>>>= x>>>=y x=x>>>y
&= x&=y x=x&y
^= x^=y x=x^y
|= x|=y x=x|y

Comparison and Logical Operators

Comparison and logical operators compare two values and return either true or false. Table 5 lists the
comparison operators and Table 6 lists the logical operators.
Table 5 JavaScript's Comparison Operators.

Operator Meaning Example

== is equal to 10==3 is false
!= does not equal 10!=3 is true
> is greater than 10>3 is true
is greater than or equal
>= 10>=3 is true
to
< is less than 10<3 is false
<= is less than or equal to 10<=3 is false Table 6: JavaScript's Logical

Operators.
 Operato Meaning If x=10 and y= 5 then
r
&& AND (x = 10) && (y < 10) is true
|| OR (x=10) || (y=10) is true
! NOT x !=y is true

Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some
conditions. The operators for a conditional expression are? and : using this syntax:
myvar = (condition) ? value1 : value2;
Operator Precedence
JavaScript operators follow the standard order of precedence or operator precedence. But you can
override natural precedence with parentheses. For example
5+3*10
equals 35 because the multiplication is naturally carried out first (according to the rules of precedence).
That is, the machine first evaluates 10*3, which equals 30, and then adds 5 to that to get 35.
This expression has a different result:
(5+3)*10

This expression results in 80 because the parentheses force the addition to be carried out first (5+3 equals
8). That result then is multiplied by 10 to result in 80. Table 7 shows the order of precedence of the
operators, from highest to lowest, when you do not use parentheses in an expression. Operators at the same
level of precedence within an expression are carried out in left-to-right order.

string Operators
String operators are chunks of text, such as Hello (rather than a number such as 10). Unlike numbers, you
cannot add, subtract, multiply, and divide strings. Example: 2*3 = 6 is fine. But what is "Hello" * "There"?
The question makes no sense.
You can, however, concatenate strings, which is a fancy name for "stick them together." You use the +
operator to concatenate strings. Here is an example where we create three variable, x, y, and z, all of which
contains strings:
x="Hello"; y="There"; z=x+y;

The result is that z now contains HelloThere.

Why is there no space between the words? Because to a computer, strings are just meaningless strings of
characters. To a computer, the string hello in no more meaningful than the string bvhdsz. They are both
just strings. If you want to add a space between the words, you can pop a space into the expression. A
literal space would be a space enclosed in quotation marks (" "). Hence, this series of commands
x="Hello"; y="There";
z=x+" "+y;
results in z containing Hello There. A shortcut operator also exists for string concatenation
+=. For example x="Hello" y="There" x+=" "+y

in which case x equals itself with a space and y tacked on, x then contains Hello There.

CONTACT SABTECH EDU KONSULTS FOR

TMA SOLUTION AND SUBMISSION, BUSINESS PLAN, IT REPORT, FREE PAST QUESTIONS(POP&E EXAM), EXAM SUMMERY ALL
COURSES, FREE SEMINAR/PROJECT TOPIC AND MATERIALS, PROJECT AND SEMINAR WRITE UP,QUESTIONNAIRE DESIGN,DATA
ANALYSIS, EXAM LIVE QUESTIONS (POP&E EXAM) E.T.C
TEL: 0706-624-4719. : 07066244719