WORLD-WIDE WEB MODEL

WEB DESIGN
This is a user centered multi disciplinary design pursuit pertaining to planning and production of web
sites. It includes influences from visuals arts technology, information structure and networked delivery.

Components of web design

It consists of 5 components:
(i) Content
(ii) Visuals
(iii) Technology
(iv) Delivery
(v) Purpose

Factors to consider while designing a web site

(i) The subject content - Should be relevant
(ii) The coverage of the topic/scope of the resource - Size of page, wide or narrow scope
(iii) Presentation of the information - Should be accurate, should be logical
(iv) Interest of the authority - those responsible for the site, Is the author an expert on the subject?
(v) The objectivity of the site – How balanced or bias is the coverage?
(vi) Presentation – keep in mind the interest of the users
(vii) Currency - availability of the updates - date of publication
(viii) Usability – is information useful

Factors that influence the significant impact of the web design on web marketing efforts
(i) How long it takes to load a web page
(ii) How often visitors visit the site, register or buy products
(iii) How long users use the site
(iv) How users find the site
(v) How likely users revisit the site

Modern web design

1. Web - centered versus designer - centered site design.
One has to consider the designer and user needs hence the site should be developed with the users in
mind.

2. Balance of form and function

The site should contain function with form to inspire the user and to break the site boredom. There should
be a clear and continuous relationship between form and function. The designer has to make sure that the
visual form of the page related to its function.
3. Quality of execution
A web site is considered excellent if it is useful, usable, correct and pleasing. The components of web
development have to be compatible e.g. HTML, XML, JavaScript, Java, flash browser, compatibility and
server capacity.
4. Conformity of conversion and innovation
This includes how fast the site loads and how attractive the site is.

WEB SITES
- This is a group of web pages that are related and logically connected.
- Web sites can be viewed using software called a web browser eg Internet Explorer, Netscape navigator
- A web site may contain a single web page or many interconnected web pages.
-

1
 1. Web page
- This is a single web document that is everything you can see on your PC's browser window at one time.
Web pages are multiple documents.
- A web page can perform the following:
- Present information in an interesting way.
- Provide course material for students
- Share information globally
- Direct potential employees to information

2. Entry Page
- This is the first page a visitor views when entering a web site. It is not necessarily the home page.

3. Home Page
- This is the introductory, starting, first, or welcome page for a web page.
- It is where other pages branch off.
- It is the main page of a web site.
- It acts as the introductory page by providing visitors with an overview of the web site and links to the rest
of the site.

4. Exit page
- This is the last page a visitor views before leaving the web site.

5. Hypertext
- This is text that contains links to other texts or documents.
- It refers to any word or phrase in an electronic document that can be used as a pointer to a related text
page.

6. Hypermedia
- This is a system that have links between text or media that takes users to another web page.
- It contains various type of media hyperlinked to connect a page to other page.
7. Link
- This is a connection made on a piece of text or media that takes users to another web page.
- It is a part of web that can be clicked to get to somewhere else.

8. Hyperlink
- This is a connection or links from one document to another or to any resource or within a document.
- It is the most basic navigational element in a web browser.
9. Broken Link
It is a link that references a page that no longer exists.

10. Content
These are all the words, images and link which a user can read and interact with in a web page.

11. In - Line
- This is a resource of some type, which is placed directly into a document.
- It is always used in an image i.e. inline image.

12. Web design tools

- HTML documents are plain-text (also known as ASCII) files that can be created using any text editor. Eg
of text editors include notepad, web-edit, word processors like MS Word, DOS edit, Netscape composer
- Some WYSIWYG editors can also be used eg Front page, Outlook Express, Claris Home page, Adobe
PageMill

2
One can also use graphic tools like photoshop, Paint, Animated GIF construction set, PageMaker etc

[Link] browsers
The piece of software that runs on your computer and allows you to view Web pages. The most common
browsers are Netscape and Internet Explorer.

Types of Servers
The Internet is made up of millions of machines, each with a unique IP address. Many of these machines are
server machines, meaning that they provide services to other machines on the Internet. You have heard of
many of these servers: e-mail servers, Web servers, FTP servers, Gopher servers and Telnet servers, to name a
few. All of these are provided by server machines.

WEB SERVERS
At its core, a web server serves static content to a web browser by loading a file from a disk and serving it
across the network to a user’s web browser. This entire exchange is mediated by the browser and server talking
to each other using HyperText Transfer Protocol (HTTP)

DNS SERVERS
Since most people have trouble remembering the strings of numbers that make up IP addresses,
and because IP addresses sometimes need to change, all servers on the Internet also have human-
readable names, called domain names. For example, [Link] is a permanent,
human-readable name. It is easier for most of us to remember [Link] than it is to
remember [Link].
The name [Link] actually has three parts:
1. The host name ("www")
2. The domain name ("howstuffworks")
3. The top-level domain name ("com")
Domain names are managed by a company called VeriSign. VeriSign creates the top-level domain
names and guarantees that all names within a top-level domain are unique.
A set of servers called domain name servers (DNS) maps the human-readable names to the IP addresses. These
servers are simple databases that map names to IP addresses, and they are distributed all over the Internet.
Most individual companies, ISPs and universities maintain small name servers to map host names to IP
addresses. There are also central name servers that use data supplied by VeriSign to map domain names to IP
addresses.

PROXY SERVERS
Proxy servers sit between a client program (typically a web browser) and an external server (typically another
server on the web) to filter requests, improve performance, and share connections.

TYPES OF DOCUMENTS
(1) Static document
- Documents are stored as a file on a server
- The same content is delivered every time that URL is accessed.
- Advantages: They are simple, reliable, fast and the documents can be cached locally at a client.
- Disadvantages: Inflexible as content can only be changed by updating the file.
Information can become boring easily.
(2) Dynamic documents
- The documents are created by a program like CGI -script.
- Advantages: Information is timely and always reflects the latest information.
- Disadvantages: They are not reliable.
Require high cost of executing and maintenance.
Slow to access

3
(3) Active documents
- These are documents that contain executable elements that are executed by the client on arrival.
- Executable elements are in script language such as JavaScript, Active X, Java applets e.t.c
- Advantages: Documents reflect the latest information.
Good performance
- Disadvantages: High cost of execution and maintenance. It is complex and poses a great security risks
from servers and codes.

 Client: most users of the web simply want to access content. they need an app that can receive
incoming content and display it. this kind of app is called a client. (eg. strictly speaking, an email
program is considered a client.) many kinds of possible web clients (real player, winamp), but most
popular is a web browser (displays html, plus many other common media formats). client cache: the
location data is temporarily stored while it is displayed in your browser.
 Server: so where does a web page come from? servers, the host computers that act as storage and
distribution centres for web content waiting to be delivered to web clients. a web server is a 24-hour
communication application that works something like an automated telephone switchboard. it listens
for calls ("requests") placed by people using web browsers asking for web pages. once a request is
made by a browser, the server checks to see if it can find the requested page. if it can find the page, the
server sends it back to the browser and the browser displays it. if the server can't find the page, or there
is some other problem, it sends back an error response in the form of a numeric code. some responses
are: "404--the web server can't find the page you asked for", "403--you're not allowed to access the
page you asked for without authorization".

servers:
o Are actual computers physically hooked up to the internet via ethernet, cable, telephone line,
etc.
o Run software that listens for requests for web content and returns messages and data.
o Can perform tasks (run programs/scripts, query databases) before responding to clients.
o Can cease functioning without affecting the stability of the rest of the web/internet.
 Protocol: the language used by the client and server to negotiate the transfer of data. web: http (hyper-
text transfer protocol), file transfer: ftp (file transfer protocol), transmission control protocol/internet
protocol (tcp/ip...tcp disassembles data into packets, ip handles addressing and routing of the packets).

OVERVIEW OF HTML

HTML CODING
- HTML stands for HyperText Markup Language.
- Hyper means active.
- It represents textual and image content.
- It is platform independent. This means that the text and the content are encoded in a way that they can be
displayed on a wide range of computers.
- Pages are made of text, images and URL links.
- HTML is structured i.e. it has a beginning, body and end.
- HTML is composed of tags which are always enclosed in angle brackets <>
- Tags in HTML are not case sensitive.
- In HTML there are two types of tags, container tags, and empty tags.
- Container tags occur in pairs. An example of a container tag is the <title></title> tag. Whatever is
contained within this tag is assigned to the title. Notice that the closing tag has a slash in it.
- Empty tags require no closing tag. An example of an empty tag is the break tag <br>. This forces the
cursor to a new line.
- Tags should always be balanced hence containers should be nested within each other.

4
Advantages of HTML
1. It can be written in any editor.
2. It is universal and simple to learn and implement.
3. It gives an opportunity to further explore and add more features.

HTML document Structure

- HTML files usually have the extension of htm, html, or shtml.
- Document tags define the overall structure of an HTML document.
- HTML tags are used to mark elements of a file for your browser.
- An element is a fundamental component of the structure of a text document. Some examples of elements
are heads, tables, paragraphs, and lists.
- Some elements may include an attribute, which is additional information that is included inside the start
tag.
- There are four tags every HTML document should have. These tags define what type of document it is,
and the major sections.
- These tags are <HTML>, <HEAD>, <TITLE>, and <BODY ...>.
e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>This is my first web page</TITLE>

</HEAD>

<BODY>

<P>Hello world!</P>

</BODY>

</HTML>

- COMMENT TAG
The first line of the code usually starts with !. It is usually for commenting and it is an empty tag.
Comment tags do not show up in the browser window. One can tell your web browser what version of
HTML being used. This needs to be written exactly as is. This, unlike the rest of the HTML language is
case sensitive. You can write all the other tags in upper or lower case.

- <HTML> </HTML>
This is now the beginning of the document. It tells the browser that the file contains HTML coded
information. The file extension .html indicates that the file is a HTML document.
- <HEAD> </HEAD>
This identifies the first part of the HTML - coded document that contains the title. The title is shown as
part of the browser’s window.
- <TITLE> </TITLE>
The title element contains the document title and identifies its content in a global context. The title is
typically displayed in the title bar at the top of the browser window, but not inside the window itself. The
title is also what is used to identify the page for search engines and also what is displayed on a bookmark
list. Titles should be descriptive, unique and relatively short.

5
- <BODY> </BODY>
The body tag defines the look of the page as a whole – specifically global settings for the color of the text,
the color of the background and the color of the links.
This is the second and the largest part of the HTML document.
The Body section of HTML contains other tags, which display text, images, links and multimedia.
Body Tag Attributes
BGCOLOR
Defines the background color of the page. The color setting can be expressed in one or two ways,
either by name e.g. “ blue” or as a six digit hexadecimal number e.g. Blue – 0000ff, Green – 00ff00,
Red – ff0000, White – ffffff, Black – 000000 e.t.c
BACKGROUND
Defines a background image. The images get tiled in the browser.
TEXT
Defines the color of the text of the page. NB/ Make sure your background
contrasts with the text color.
LINK
Defines the color of hyperlinks which have yet to be selected.
ALINK
Defines the color of hyperlinks as they are being clicked.
VLINK
Defines the color of hyperlinks which have already been visited.
BGPROPERTIES
Only available in some modern browsers which “watermarks” the page, fixing any image specified
with the BACKGROUND tag so it does not move if a user scrolls up and down a HTML page.

e.g.
<HTML>
<HEAD>
<TITLE>Welcome to my page </TITLE>
</HEAD>

<BODY BGCOLOR=”Blue” TEXT=”White” LINK= “Green”

ALINK= “Lightgreen” VLINK= “DarkGreen”>

The bulk of the page goes here

</BODY>
</HTML>

OTHER TAGS
HEADINGS
Html has six levels of headings numbered H1 to H6 with H1 being the largest. Headings are typically
displayed in larger and/or bolder fonts than normal body text.
<HTML>
<HEAD>
<TITLE>Welcome to my page </TITLE>
</HEAD>

<BODY BGCOLOR=”Blue” TEXT=”White” >

<H1> This is Heading 1 </H1>
<H2> This is heading 2 </H2>

The bulk of the page goes here

6
 </BODY>
</HTML>

PARAGRAPH
The amount of spaces and carriage returns are automatically compressed into a single space when the HTML
document is displayed in a browser.
Hence, the paragraph tag ,<P> </P> is used.
Attributes of Paragraph tag
<P ALIGN= CENTER></P>
<P ALIGN= RIGHT></P>
<P ALIGN=LEFT></P> is the default alignment i.e. if the align attribute is not included, the paragraph will be
left aligned.

LINE BREAK
When your HTML document is viewed, normally the text will do a word-wrap at the end of a line. Using the
<BR> tag forces a line break with no extra space between lines. This <BR> tag has no closing tag.
HORIZONTAL RULE
The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is useful to
separate major sections of your document.

Attributes
WIDTH
The width of the rule can be expressed in two way: as a number or a as a percentage.
e.g <HR WIDTH=500> or <HR WIDTH = 75%>

SIZE
Allows the designer to specify how high, in pixels, the line will be.

NOSHADE
By default horizontal rules come with a 3D look. By using NOSHADE the line is displayed without the drop
shadow that would normally accompany the basic line.
e.g.

<HR SIZE= 4 WIDTH="50%" NOSHADE>

7
HTML TEXT

Html has two types of styles for individual words or sentences.

(i) Logical styles
(ii) Physical styles

Logical styles
These styles tag text according to its meaning.
These tags do not directly specify the type of highlighting they will employ.
- The advantage of this approach is that it reduces repetition of modification of text e.g. when you want to
change the appearance of level one heading from 24-point times centered to 30 Helvetica right aligned, all
one has to do is change the definition of level one in the web browser.
- Another advantage of logical styles is that they enforce consistency.

Examples of logical styles

<DFN> For a word being defined, Typically displays the words in Italics.
<EM> For emphasis. Typically displays the words in Italics.
<CITE> For titles of books e.t.c. Typically displays words in Italics
<CODE> For computer code. Displayed in a fixed width font.
<KBD> For user keyboard entry. Displays words in plain text width font
<SAMP> For a sequence of literal characters. Displayed in a fixed width font
<STRONG> For strong emphasis. Typically displays words in bold.
<VAR> For a variable, where you will replace the variable with specific information.
Typically displays words in Italics.
<ADDRESS> Displays a block of text in Italics and offsets it to a new line

Physical styles
They offer consistency in that something you tag a certain way will always be displayed that way for readers of
your document.

Examples of physical styles

<B> Bold text

<I> Italic text
<TT> Typewriter text e.g. fixed-width font
<U> Underline text
<Strike> Strikethrough text
<blink> Causes text to blink
<Basefont> Used to specify the overall font for your page. It is added immediately
after the <body> tag. It has a face, size and color attributes. It has no
closing tag. E.g.
<body>
<basefont face =”arial, verdana, courier” size=”5” color =”red”> Hello
this is my page.<br>This is text<br></body>
<Font> It has face, size and color attributes.
Font size: Used to set the size of the font from 1(smallest) to 7(largest)
with size 3 being the normal text.
Format- <font size =”6”>font size 6</font>
The other method for using font tag is provided by relative size change
from basefont size
i.e. <basefont size=”5”>size five<br>

8
 <font size = “+1”> size six<br>
<font size = “-1”>size four</font><br>
Font face: Used to specify the desired font typeface. The faces selected
should be standard. The browser uses the first font in the list available on
the visitor’s computer.
e.g. <body>
<font face =”verdana, Helvetica,courier”>Some text here</font>
Attributes
<div align =”left”> This text is left aligned</div>
<div align=right”> This text is right aligned</div>
Superscript The text is raised
^….. e.g. km³ would be km3
Subscript The text is lowered
_….. e.g. H ₂O would be H2O
Text justification/ The text is justified according to the align attribute indicated to align the
Alignment text in the page layout.
The justification tag is <div>…….</div>

Blockquote Forces a paragraph break above and below the text. Used to include
<blockquote>…… lengthy quotations in separate block on the screen. Most browsers
</blockquote> generally change the margins for the quotation to separate it from the
surrounding text.
Preformatted text Used to generate text exactly as typed in including spaces, new lines and
<PRE>….</PRE> tabs. Useful for program listings.
e.g.
<pre>
mangoes sh 5
Oranges sh 10
</pre>

Note: Most websites stick to fonts like Times Roman and Arial, because most computers have these fonts
installed. If you were to use an elaborate font and your viewers didn't have that font, it will revert to Sans-Serif
or Helvetica, as default.

SPECIAL CHARACTERS
The ASCII characters <,> and & have special meanings in HTML therefore, they cannot be used in text. The
angle brackets are used to indicate the beginning and end of tags while the ampersand sign is used to indicate
the beginning of an escape sequence.

& lt Is used to display < less than

&gt Is used to display > greater than
&amp Is used to display & ampersand
&copy Is used to display  copyright
&reg Is used to display  trademark
&quot Is used to display " quote
&plus or mn Is used to display /- plus or minus
&not Is used to display - negative
&deg Is used to display  degree sign
&pound Is used to display pound sign
&micro Is used to display micron
&para Is used to display paragraph mark

9
&yen Is used to display yen sign
&sect Is used to display § section
&cent Is used to display cent
&raquo Is used to display double greater that
&laquo Is used to display double less than
&middot Is used to display midline dot
&nbsp Is used to display space character
It is used to add extra spaces.
&ouml Is used to display a lower case o with an umlaut:
&ntilde Is used to display a lower case n with a tilde:
&Egrave Is used to display an uppercase E with a grave accent:

NB/ Unlike the rest of HTML, the escape sequences are case sensitive.

MARQUEE ELEMENT
This is a tag that creates a scrolling text.
i.e. <marquee>……….</marquee>
It can not be nested and it must have an ending tag.
Attributes
Marquee Align= top/middle/bottom
This align the marquee with the top, middle or bottom of neighboring text line.

Marquee behavior = scroll/ slide / alternate

This specifies the text behavior.

Marquee bgcolor = red

Sets the background color of marquee.

Marquee direction = left/right

This defines the direction in which the text scrolls

Marquee loop= number/infinitive

This specifies the number of loops as a number value or infinite.

Marquee scrollamount = number

Sets the number of pixels to move the content for each scroll movement

Marquee scrolldelay = number

Specifies the delay in milliseconds between successive movement of the marquee content.

Marquee Hspace = number

Sets the amount of space to clear left or right of the marquee.

Marquee Vspace= number

Sets the amount of space to clear above or below the marquee.
e.g. <marquee behavior= alternate bgcolor= "white" hspace= 2 vspace="4" >Some text here </marquee>

HTML LISTS
Lists are often used to present information in an easy to read format. It can also be used to indent information.
Lists can be numbered, unnumbered or definition lists. Lists tags can be nested.
There are three types of lists:
- Unordered/ Unumbered Lists (Bullets)
- Ordered/ Numbered Lists (Numbers)

10
- Definition Lists (no numbers or bullets)

Unordered Lists
These are bulleted lists i.e. a list of items is preceded by bullets or markers. It is a single item list. The list
begins and ends with this tag.
To make a bulleted list:
- Start with an opening list<UL> (for unnumbered list) tag
- Enter the <LI> (list item) tag followed by the individual item; no closing</LI> tag is needed.
- End the entire list with a closing list </UL> tag.
The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph tags.
e.g.
<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
</UL>
Attributes
Type: This is used to set different kind of bullet character. The options are:
- disc <UL type = square>
- circle
- square

Ordered Lists
A numbered list is identical to the unnumbered list only you use <OL> to number the list
<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
</OL>
Attributes
Type: This is used to set different kind of numbered lists.

E.g.
Plain number - <OL type =1>
Capital Letter - <OL type = A>
Small Letter - <OL type = a>
Capital Roman numbers - <OL type = I>
Small Roman numbers - <OL type = I>
Value: This is used to change the number within a list and is used as part of LI command.
<OL>
<LI value ="7">Item 7
<LI>Item 2
</OL>

Definition Lists
It consists of alternating a definition term<DT> and a definition <DD>. Web browsers generally format the
definition on a new line and indent it.
The <DT> and <DD> entries can contain multiple paragraphs.
e.g.
<DL>
<DT> Alligator
<DD>A large reptile with very sharp teeth.
<DT>Alliance

11
<DD>A union, relationship
</DL>

The COMPACT attribute can be used routinely in case your definition terms are very short.
e.g.
<DL COMPACT>
<DT>ctrl s
<DD>Short cut for saving in Windows
</DL>

Nested Lists
Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single item.
e.g.
<UL>
<LI> A few provinces of Kenya:
<UL>
<LI>Nairobi
<LI>Coast
<LI>Western

<LI> Two towns in Central Province

<UL>
<LI>Nyeri
<LI>Kiambu
<LI>Muranga
</UL>

HTML LINKS
The chief power of HTML comes from its ability to link text and/or an image to another document or section
of a document. A browser highlights the identified text or image with color and/or underlines to indicate that it
is hypertext link.
Links are used to:
- Jump from section to section within the same web page.(Internal)
- Link to different page within your web site. (Local)
- Link to another web page in another web site. (Global)
- Link to a graphical image
- Link to documents in other directories.

Relative pathnames
You can link to documents in other directories by specifying the relative path from the current document to the
linked document. Relative links are useful because:
1. It is easier to move a group of documents to another location (because the relative path names will still be
valid.
2. It is more efficient connecting to the server
3. There is less to type

Ways of providing links

- Clicking on a word, phrase r text
- Clicking on a button
- Clicking on an image

HTML uses <A> tag which stands for anchor.

To include an anchor in your document:

12
- Start the anchor with <A (include a space after A)
- Specify the document you're linking to by entering the parameter HREF="filename" followed by a closing
right bracket >
- Enter the text that will serve as the hypertext link in the current document.
- Enter the ending anchor tag. </A>
e.g.
<A HREF ="C:/[Link]> This is practice document</A>

URLs
This is the address or location of the link.
The World Wide Web uses Uniform Resource Locators (URLs) to specify the location of files on other
servers. A URL includes the type of resource being accessed (e.g. web, gopher, ftp), the address of the server
and the location of the file. The syntax is:

Scheme://[Link] [:port]/path/filename

Where scheme is one of the following:

File a file on your local system
ftp a file on an anonymous FTP server
http a file on a world wide web server
gopher a file on a gopher server
WAIS a file on a WAIS server
News a Usenet newsgroup
telnet a connection to a Telnet-based service.
NB/ Unless otherwise the port number can be omitted.

Attributes
Href
- Stands for hypertext reference.
- This is the location of the file or section of page that is referenced.

Color
The general color of the text links is specified in the <body> tag
i.e. <body link="ff00ff" vlink=#808080" alink="#ff0000"
where link is the color of the link that has not been visited, vlink is the color of the link that has been visited
and alink is the color displayed when the mouse hovers over the text.
- One can also define colors for individual links on the page. There are two methods:
(a) Placing font tags between <a href> and </a> e.g.
Click <a href = "[Link] color="ffOOCC">here</font></a> to go
to w3.
This works for most browsers except IE 3.0
(b) Using a style setting in the <a> tag e.g.
click<a href="[Link] style=color:rgb(0,255,0)"> here </a> to go to w3.
This works for all browsers.

Target
The target is used if you want the link to open in another window or frame than where the link itself is placed.
The format is <a href="url" target =" ">
The predetermined targets are:
- Blank : loads the page into a new browser window
- Self : loads the page into the current widow
- Parent : loads the page into the frame that is superior to the frame the hyperlink is in.

13
- Top : Cancels all frames and loads in full browser window
E.g.
<a href =[Link] target="blank"> here</a>

Name attribute
- This is used to set up named anchors.
- You can invisibly mark certain points of a document as places that can be jumped directly instead of
loading the document.
- The value of the Href attribute value of name attribute must be enclose with quotation marks.
- The anchor should have either name or Href attribute but not both.
- The anchor can not be nested.

Links to sections of a page

Links within a page
Anchors can be used to move a reader to a particular section in a document. To create the links, you require
two items:
(a) HREF attribute
(b) NAME attribute

e.g.
<a href ="#linkname"> word</a>
linkname is the name of the section that you are linking to
The # symbol instructs the browser to look through the HTML document for a named anchor.
A named anchor is a hidden reference marker for a particular section of the same page. It is also used to mark
a section of another page.
e.g.
<body>
<a name ="top"></a>
.
.
<a href ="top">TOP</a>
</body>

or
<a href ="#linkname"> word</a>
.
.
<A name ="linkname">about some text here</a>

Links between sections of different documents

The HTML code for linking to a named anchor in another local HTML document is as follows:
Suppose you want to link from [Link] to [Link]
In [Link]:

<a href = "[Link]#linkname"> Text to activate link</a>

In [Link]:

<a name ="linkname">Text that responds to the link</a>

Linking to another page anywhere in the Internet

This is used to create a link to a page in the Internet and the format is:
<a href=[Link] page</a>

14
Mailto
- Used to hyperlink email addresses, but this scheme is unique in that it uses only a colon (:) instead of ://
between the scheme and the address.
- You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the
mailto attribute in a hyperlink. The format is:
<A HREF ="[Link]
e.g.
<A HREF = " [Link] Send me mail</a>

- Mailto allows users to send emails by clicking on the hyperlink and a mail windo appears.
- One can also set the subject,cc and bcc to be part of the the mailto link:
e.g. <a href ="[Link] topic">Greetings</a>
<a href "[Link]

NB/ It is important to note that UNIX is case-sensitive operating system where filenames
are concerned.

HTML IMAGES
Images are also called pictures, graphics, icons, cliparts.
Most web browsers support two inline image formats ie GIF and JPEG

GIF (Graphic Interchange Formats)

- All the graphical browsers use it for in line images.
- It compresses the picture information and translates it to binary codes that can be sent over the Internet. It
is, however, not good in compressing photographs.
- It is excellent for banners, buttons and cliparts.
- It is limited to a maximum of 256 colors for any image.
- It has a feature of defining a color to be transparent.

JPEG or JPG (Joint Photographic Expert Group)

- It can support any number of colors.
- It takes significantly longer than GIF image to decompress and display. It has good image quality though
it occupies larger file size.
- JPEG images do not have the ability to have transparency.

Factors to consider when using graphics in web pages.

- Large and numerous images may look great on high-end computers but frustrate users who might wait for
images to load.
Keep images no wider than 480 pixels and no higher than 300 pixels to avoid users to scroll or resize
their web browser window.
A single image can appear several times in a web page with little time delay.
- Image should add meaning to the page.
- Images can also be linked as external images. Using same image in several web pages will load them very
fast.

HTML TAG FOR IMAGE

The basic HTML format for an inline image tag is:
<IMG SRC = “[Link]”>
The first part of the tag tells the browser to expect an image, the second part specifies the location of the image
<IMG> is an empty tag hence has no closing tag.

15
Attributes
Size
- This scales the image and sets the appropriate space (in pixels) as it downloads the image.
< IMG SRC =”filem\[Link]” HEIGHT=100 WIDTH = 100>

Hspace and Vspace

- This tag allows the designer to put space between the edge of the image and the surrounding text.
- They both take numeric values which specify the amount of horizontal and vertical space surrounding any
image they are applied to. This value is specified in pixels.
<IMG SRC = “[Link]” VSPACE=”10” HSPACE =”20”>

Alignment
- By default an image is left aligned.
- This attributes controls text around the graphic. The align attribute can take the following values:
CENTER, RIGHT, LEFT, TOP, and BOTTOM.
<IMG SRC =”[Link]” ALIGN=RIGHT>
Border
- This is used to place or eliminate a border round the image.
- Border widths are measured in pixels.
<IMG SRC =”[Link]” BORDER=”0”>

Alt attribute
- This is used to define an alternate text for the image.
- It improves the display and usefulness for people using text only browsers or when image autoload is off.
- It is used to give the user more information about the image.
<IMG SRC=”[Link]” alt =”picture of a lion”>

Background Graphics
- Newer versions of web browsers can load an image and use it as a backgroundwhen displaying a page.
- Background images can be a texture or an image of a logo.
- Using a feature called tiling, a browser takes the image and repeats it across and down to fill your browser
window.
<BODY BACKGROUND = “[Link]”>

Images as Hyperlinks
- Inline images can be used as hyperlinks just like plain text. Ie. They can be used as connectors to other
web pages

<A HREF =”[Link]”><IMG SRC =”[Link] BORDER=”50” ALT=”Picture of a cat”></A>

- Images can also link to other images forming hyperlinked images.

<A HREF=”[Link]”><IMG SRC=”[Link]” BORDER =”0”>
[Link] acts s hyperlink to [Link]

IMAGE MAPS
- This is an active click able image that sends visitors to different web pages depending on different parts of
the image clicked. These are called hotspots.
- Using an image one can tell the browser that particular sections of the graphic, when clicked, will trigger a
jump to a particular page.
- The image is divided into regions or areas with each area linked to a different URL.
- An image map has three components:
o An image

16
 o A set of map data
o A HTML host entry
- An image map is a normal web page typically stored in GIF or JPEG format.
- Map data is a set of description of the mapped regions within the image.
- There are two types of image map which can be used in a web page:
o Server-side image mapping: It is the older technique and is compatible
with all browsers. It relies on information being passed on back to the server when a visitor
clicks on a map. The information is translated and the relevant link is passed back and acted
upon by the browser.
The process is interpreted by the web server when the visitor clicks on the image, the browser
program transfer the coordinates of the click to a program running on the web server to be
processed.
This program then examines the map data and coordinates to determine the link then the URL
or coordinates associated with those that well clicked on is sent back to the client’s browser
and page is loaded.
How server side maps are stored depends on software installed on the web server.
This program is CGI script which examines the map data and determines the link. CGI is a
standard method for a web server to interact with programs running on a client browsers.

Common Gateway Interface

The two most common server-side map standards ARE:
- NCSA
- CERN
- Both of these standards requires the map data to be stored in a text file separate from the HTML document
usually with a .map extension to file name.

Merit
- It is supported by all browsers.

Demerits
- It takes a lot of time to load.
- It requires more system and programs e.g. CGI on your web server.
- Status bar shows only coordinates flying by along with the name of the image mp file include URL.
o Client-side image mapping:
A client side image map is made up of two elements: the graphical map and the code which
tells the browser how to operate it.
The code itself requires two elements, the <IMG> tag which will display the map and the
<MAP> tag which provides instructions on what it will do.
With a client-side map, all of the data required to operate the selection procedure is included
with the HTML page, cutting out the need for streams of communications with the server.
Client-side maps data is stored in HTML files and embedded directly into a page containing
other HTML elements and are interpreted by the web browser program.
It works independently of your web server hence interpreted by the visitors’ web browser.
The web data are embedded in the host page and when the client clicks on the image, the
browser processes without interaction with the server.

The <IMG> tag takes all the attributes including two extra ones:
 ISMAP which tells the browser this is an image map
 and USEMAP which contains an anchor link to the map definition data. USEMAP
assigns a name to the image which must be unique. The value of the name is case
sensitive.
e.g.
<IMG SRC ="[Link]" WIDTH =100 HEIGHT =100 ISMAP USEMAP ="#mapdata">

17
 The map data sits inside the <MAP> container and looks like:

<MAP NAME ="mapdata">

<AREA ….>
<AREA ….>
<AREA ….>
</MAP>
The map definition contains a number of AREA definitions, each of which sets up areas of the
graphic map which will trigger active links when the mouse pointer moves over them..
Merits
No interaction with web servers is required to determine what URL to use.
It is very fast to load and process.
The status bar at the bottom of browser’s window tells you the URL or web page you would
be loading.

Demerits
Older browsers do not support it.

The attributes of AREA tag

SHAPE
This defines the different shapes, regions or hotspots.
Can be a standard shape i.e RECT, CIRCLE, POLY or DEFAULT that allows the designer to
specify an action for instances where none of the user-defined shapes have been selected.

RECT
Two pairs of coordinates are needed to specify a rectangle. The first pair specifies the top left
corner of the rectangle while the second pair specifies the bottom right corner of the rectangle.
e.g.
<AREA SHAPE ="RECT" COORDS="100,100,200,200" Href=[Link]

CIRCLE
This is defined by its center and its distance from the center to any point on the circle.
<AREA SHAPE ="CIRCLE" COORDS ="67,97,34">

67,97 is where the center is located and its radius is 34.

POLYGON
This is a figure that has got any number of sides. Polygon is built by a list of adjacent vertices.
E.g.
<AREA SHAPE ="POLY" COORDS =16,13,35,62,72,27,16,13>

COORDS
Specifies sets of X and Y coordinates within the map image that will act as hotspots. When the
mouse moves over a hotspot the browser detects that a link has been activated. If a mouse
button is pressed the browser will act in the same way as if a hyperlink has been selected.

HREF
Contains the URL the browser will jump to when the hotspot is clicked by the page visitor.

Advantages of using image maps

- Image maps provide an alternative to loading a page containing several linked pages.
- Image maps can provide an alternative to a cluttered page.
- Image map allows you to use a single image to provide links to a number of different URLs.

18
HTML BACKGROUNDS
Modifying the background involves including attributes in the <BODY> tag:

BGCOLOR
It adds solid background color.
<BODY BGCOLOR= red>
TEXT
Is used to add color of normal body text.

LINK
Adds the color for hypertext links items.
VLINK - This attribute adds color for the recently visited link.(Visited link)
ALINK - This attribute adds color of the link that is currently being selected. (Active link)

BACKGROUND
This attribute overrides the BGCOLOR attribute since wallpaper goes on top of the background color.
Before including the background image you must consider the following point:
 File size
 Effect of texture
 Readability of the text

One can combine two or more attributes

e.g
<BODY BGCOLOR ="#FFFFFF" BACKGROUND ="[Link]" TEXT = #000000 Link ="#0000FF" VLINK
="#660099">

BACKGROUND SOUND
Sound for the web comes in two main formats, digital audio or WAV and synthesized music of MIDI format.
Both are compatible with all browsers.

WAV is a very versatile Microsoft Windows format, which allows anything from music samples to voice to be
digitally recorded for later playback, either from a sound player or over the web.

The MIDI format cannot handle digital data and instead draws on collections of preset musical sounds which
are usually stored on a chip on your PC sound card.

To add sound:
<a href ="[Link]"> Click here for my sound</a>
When the user clicks the hyperlink, the browser will automatically launch a suitable player if one exists. If not,
the browser will ask you if you wish to save the file to disk.
NB/ Care should be taken as these files are of a reasonable size.

BGSOUND TAG
It’s an easy way of adding a background sound:
<BGSOUND SRC="[Link]" LOOP =50>
Attributes
SRC
The SRC attribute allows the designer to specify which sound file is to be played, and where to find it.

LOOP

19
This attribute takes one of two values. INFINITE which means the sound will continue to play forever and X,
where X is any value which determines how many times the sound will play before ending.
NB/ Netscape does not support the <BGSOUND> tag.

MULTIMEDIA IN YOUR PAGE

<EMBED> tag is used to allow content and plug-in applications to be included in a web page like sound, video
clip, motion etc.
<EMBED> tag supports many common file formats like: .wav, .mid, .au, .mov, etc

SRC
The SRC attribute allows the designer to specify which sound file should be played.

WIDTH
Allows the width of the sound playing control to be specified. Most sound controls have a small number of
buttons including play, rewind and stop associated with them and by specifying the width and height it is
possible to fix the size of the control and buttons.

HEIGHT
Specifies the height of the sound playing control.

HIDDEN
Takes the values "YES" and "NO". Hides the sound playing control from view- useful in conjunction with
AUTOPLAY.

AUTOPLAY
Forces the file specified in SRC to play as soon as it is loaded.

LOOP
Takes the values TRUE or FALSE. Using TRUE forces the browser to endlessly repeat the sound file.

VOLUME
Entering a percentage value between 0 and 100 forces the sound tool to alter the playback volume of the sound
to the specified level.
Placing it in a page:

<EMBED SRC =" [Link]" WIDTH="150" HEIGHT="250" CONTROLS ="TRUE" LOOP =

"TRUE">

This would play back the the file [Link], placing the sound player in an area 150 by 250 pixels. The
controls for the player would be displayed and the sound will loop. As AUTOPLAY is not set the page visitor
would have to use the player controls to start the sound.
<EMBED SRC = "[Link]" HIDDEN ="TRUE" LOOP = "FALSE" VOLUME ="50%" AUTOPLAY
= "YES">
The above example will hide the sound player, automatically starting the sound as soon as it is loaded. The
sound itself will play once(LOOP is set to FALSE) at half of the maximum possible volume .

NB/ You may use multiple embed tags within one page, but it is recommended to never set more than one on
autoplay.

HTML TABLES
Tables establish a way of presenting data in a highly controlled tabulated form giving greater control over
positioning of elements.
Tables allow information to be in rows and columns.

20
Apart for allowing text to be arranged in columns tables can be used:
1. To divide the page into various sections
2. To create menus
3. To add interactive form fields
4. To create fast loading headers of page
5. For easy alignment of images
The <TABLE> tag is used to signify the start of a table definition.

CAPTION tag
This gives the caption for the title of the table. The default position of the title is centered at the top of the
table.
It is only permitted after the TABLE tag.
A good caption should provide a short heading for the table.
It has the following align attribute values: ALIGN=BOTTOM, TOP, LEFT, RIGHT.

NOTE
 The content of a table is not shown until the entire table is loaded.
 The table must be declared using the table tag

Attributes of <table> tag

WIDTH
Allows designers to set the width of the table using two methods, either as an explicit value or a percentage
value. Using the first method it is possible to create a table to exact horizontal dimensions.
e.g.
<TABLE WIDTH=500> gives the table which is fixed to 500 pixels.

The second method, whilst not as exact, uses a percentage of the available space which allows the table to
expand or contract along with the browser if it is resized at any point.
e.g.
<TABLE WIDTH="90%"> forces the table to take 90% of the available horizontal space.

HEIGHT
It is declared just like the width attribute, however, not all browsers accept this attribute.

BORDER
This attribute sets the thickness of the borders surrounding the table.
e.g.
<TABLE BORDER =2>
If no border is desired a value of 0 BORDER=0 is given.
Every table is a collection of rows and cells. Each row contains a number of cells, each of which contains the
table information.
Rows must be set up before cells can be added in. In order, to create a table row the <TR> and </TR>
container is used. Each row can contain a number of cells .
The color of the border can be set by declaring:
<TABLE BORDER COLOR = red>

Table rows
The <TR> tag has the following attributes:

ALIGN
Specifies the horizontal alignment of cell data for a row. ALIGN can be either LEFT, RIGHT, or CENTER.

21
VALIGN
Specifies the vertical alignment of cell data for a row. It takes one of the values TOP, MIDDLE, or BOTTOM.

BGCOLOR
A recent addition to the table attributes, BGCOLOR takes the same values as the BGCOLOR attribute of the
BODY tag.
NB/ This tag is not supported by all browsers.

Table Cells
For every ROW in a table there must be a number of cells which contain the data to be displayed.

There are two elements for table cells ie <TH> and <TD>
<TD> tag that defines a table data cell. By default the text in this cell is aligned left and centered vertically. It
specifies the start and end tag of a cell which may hold data.
<TH> tag that defines a table header cell. By default the text in this cell is bold and centered.
Every <TH> and <TD> tags have the following attributes:

CELLSPACING
This attribute sets the size of the "invisible" margin between individual cells in a table as well as the size of the
gap between the cells and the border of the table overall.
e.g.
<TABLE BORDER = 1 BORDERCOLOR=#ff0000 CELLSPACING=20>
<TR><TD>Data1<TD>Data2<TD>Data 3
<TR><TD>Data 4<TD>Data 5<TD>Data 6
</TABLE>

CELLPADDING
Allows the setting of the gap between the left hand edge of table cells and the start of the cell contents.
Cellpadding can be used to create areas of space within cells so that the cell contents don't appear to be pushed
up close to the edge of that cell.
e.g.
<TABLE CELLSPACING = 20 or = 50%>
<TR><TD>D1<TD>D2<TD>D3
</TR><TD>D4<TD>D5<TD>D6
</Table>

ALIGN
This allows the horizontal position of the table overall to be set.
Giving values of RIGHT or LEFT allows the table to be pushed against the respective page edge, using
CENTER will align the table so it sits neatly in the middle of the page.

VALIGN
This allows the designer to specify where the cell contents will physically appear.

BGCOLOR
Allows the background color of individual cells to be specified.

WIDTH
This attribute allows the width of individual table cell to be specified either as an explicit value or as
percentage of the total table width.

NB/ Care should be taken when specifying cell widths as the browser will only allow one width to be used per
column.

22
If multiple widths are specified the browser will resize all cells in that column to the width of the widest.

HEIGHT
Takes values explicitly or percentages.
NB/ It is not supported by all browsers.

NOWRAP
Tells the browser that any text in any cell which uses the NOWRAP attribute must appear as a single line,
rather than over a number of lines.
NOWRAP can be useful if a specific sentence is required to fill just one line.
It turns off word wrapping.
e.g
<TABLE>
<CAPTION ALIGN =Bottom> Table Head Summary </CAPTION>
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
</TR>
<TR>
<TD> Row 2 Col 1 </TD>
<TD> Row 2 Col 2 </TD>
</TR>
</TABLE>

Spanning Rows and Columns

- Using COLSPAN and ROWSPAN attributes it is possible to expand cells.
- The values of COLSPAN and ROWSPAN can be anything from 2 to the maximum number of cells in the
width and height.
- Values greater than the total number of cells have no effect though care should be taken as this may cause
problems later on when the table is extended.
- Spanned cells always extend to the right of their own position (in the case of row span) and into the space
below their own position (if it’s a colspan) It is not possible to tell a cell to span into space above or to the
left of its own position.

COLSPAN = number
This is an attribute that specifies the number of columns spanned by the current cell. The value 0 means that
cells span all columns from the current column to the last column of the column group. Cells may span several
columns.
e.g
<TABLE BORDER =1>
<TR>
<TD>1
<TD>2
<TD>3
</TR>

<TR>
<TD>4
<TD>6
<TD Colspan="2">8
</TR>

<TR>

23
<TD>9
<TD>10
</TR>
</TABLE>

ROWSPAN = number
This attribute specifies the number of rows spanned by the current cell including the current row.
e.g.
<TABLE BORDER =1>
<TR>
<TD>A
<TD rowspan = 2>B
<TD>C

<TR>
<TD>D
<TD>E

<TR>
<TD>F
<TD>G
</TABLE>

e.g
<TABLE>
<CAPTION ALIGN =Bottom> Table Head Summary </CAPTION>
<TR>
<TD ROWSPAN=2>Row 1 Col 1</TD>
<TD COLSPAN=2>Row 1 Col 2</TD>
</TR>
<TR>
<TD> Row 2 Col 1 </TD>
<TD> Row 2 Col 2 </TD>
</TR>
</TABLE>

e.g.
<TABLE BORDER=1>
<TR><TD>Row 1 Cell 1</TD><TD>Row1 Cell 2</TD>
<TD>Row 1 Cell 3</TD>
</TR>
<TR><TD ROWSPAN = 2>Row 2 Cell 1</TD>
<TD COLSPAN =2>Row 2 Cell 2</TD>
</TR>
<TR><TD>Row 3 Cell 2</TD><TD>Row 3 Cell 3</TD>
</TR>
</TABLE>

ROW GROUP ELEMENTS

Table rows may be grouped into a table head, table foot and the table body sections. This division enables the
browser to support scrolling of table bo….. independent of the table head and foot.
Table head and foot information can be repeated each page that contains table data.

24
THEAD
This contains the header information about the columns.
This element defines a group of header rows in a table. It follows caption, colspangroup elements and precedes
the optional TFOOT element and TBODY.

TFOOT
This contains the footer information about the columns. This element defines a group of footer rows in a table.
It follows the THEAD and precedes TBODY. It provides a summary row or footnotes that apply to the entire
table or portions of it.

TBODY
This defines a group of data rows in a table. A table must have one or more TBODY element. It contains row
groups

e.g.
<TABLE>
<THEAD>
<TR>
<TH>ABBR </TH>
<TH>Long Form </TH>
</TR>
</THEAD>
<TFOOT>
<TR>
<TD>Footer
</TR>
</TFOOT>
<TBODY>
<TR>

</TBODY>
</TABLE>

COL ELEMENT
This allows the designer to create structural divisions within a table.
It allows designers to share attributes among several columns without implying any structural grouping.

HTML FRAMES
Frames allow author's to present or render documents in multiple views within sub windows of the main
window. This help in keeping certain information stationary e.g. static banner, a small navigation bar.
Frames make it difficult to print paper copies of the web and not all web browsers support frames.
A web page consists of a master HTML document that define FRAMESETS or the arrangement of the framed
areas on the page.
Frame is a way to divide the browser screen to allow easier navigation under some circumstances.
The tags used to create a frame document are:
<FRAMESET></FRAMESET>
<FRAME>
<NOFRAME>

General Format:
<HTML>

25
<HEAD>
<FRAMESET>
</HTML>

<FRAMESET>………..</FRAMESET>
This specifies the layout of the main user window in terms of rectangular subspaces. It is used to declare
multiple frames.
This is a container element for dividing a window into rectangular subspaces called frames.
It takes the place of the body element and immediately follows the head.
It can be nested and contain one or more frames element.

NOFRAME element provide an alternate content for browsers that do not support frames.

Attributes
ROWS AND COLS
These define the dimensions of each frame in the set. I.e. row gives the height of each row and cols give the
width of each column. Each attribute takes a comma separated by a list of lengths.
e.g.
<FRAMESET ROWS="30%, 25%, 45%" cols = "33%", 33%,34%">

If rows and columns are omitted the implied values for the attribute is 100%.
This element accepts ONLOAD and ONUNLOAD attributes to specify client-side scripting actions to perform
when frames have all been loaded or removed.

<FRAME>
This element defines the contents and appearance of a single frame i.e. the rectangular subspace within a
frameset documents. Each frame element must be contained within a frameset element that defines the
dimensions of the frame.

Attributes of Frame
SRC Attribute
This provides the uniform resource identification of the frames content i.e. the source document which is a
typical HTML document. It specifies the location of the initial contents to be contained in the frame.
e.g.
<HTML>
<HEAD><TITLE>A two row framed page</TITLE>
</HEAD>
<FRAMESET ROWS ="15%","85%" >
<FRAME SRC ="[Link]">
<FRAME SRC ="[Link]">
</FRAMESET>
</HTML>

Name Attribute
Name = data
This assigns a name to the current frame and may be used as the target of the subsequent links i.e. A, Link,
Base element
The name attribute vale must begin with a character in the range A-Z or a-z
The name should be human-readable and based on the content of the frame.
e.g.
<FRAMESET COL = "40%", *">
<FRAME NAME = "Menu" SRC = "[Link]" Title = "Menu">
<FRAME NAME = "Content" SRC = "[Link]" Title = "Content">

26
</FRAMESET>

FRAMEBORDER ATTRIBUTE
This specifies whether or not the frame has a visible border.
e.g. FRAMEBORDER =1 tells the browser to draw a border between the frame and all adjoining frames. It is
the default value.
FRAMEBORDER=0 tells the browser not to draw a border between this frame and every adjoining frame
though borders from other frames will override this.

MARGINWIDTH
This specifies the amount of space to the left between the frame's contents in the left and right margins. The
value must be greater than zero in pixels.

MARGINHEIGHT
This specifies the amount of space to be left between the frames content in its top and bottom margins.

NORESIZE
This is a boolean attribute that tells the browser that the frame cannot be resized.
SCROLLING
This specifies whether the scrollbar should be provided for the frame. It takes the values of AUTO, YES or
NO.
The default value of AUTO generates scrollbars only when necessary.
The YES value generates scrollbars at all times.
The NO value suppress the scrollbar even if it is required hence should not be used.

LONGDESC
This specifies a link to a long description of the frame. It displays an alternate content for non-visual browsers.
This description should supplement the short description provided using title attribute.
It is useful for non-visual browsers.

e.g.
<HTML>
<HEAD><TITLE>Some example of frames</TITLE>
<FRAMESET COLS ="33%", "33%", "33%">
<FRAMESET ROWS ="*, 200">
<FRAME SRC ="[Link]" Scrolling ="yes">
<FRAME SRC ="[Link]" NORESIZE MARGINWIDTH ="10">
</FRAMESET>
<FRAME SRC ="[Link]" FRAMEBORDER ="0">
<FRAME SRC ="[Link]" FRAMEBORDER ="0">
</FRAMESET>
</HTML>

TARGET ATTRIBUTE
This specifies the name of a frame where a document is to be opened. By assigning a name to a frame via a
name attribute, the author can refer to it as the target of links defined by other elements.
This attribute may be set for elements that creates links (a, link) image maps (area) and forms (form)
e.g.
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS ="50%, 50%">

27
 <FRAME NAME ="Dynamic" SRC = "[Link]">
<FRAME NAME ="Fixed" SRC = "[Link]">
</FRAMESET>
</HTML>

E.G.
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Now you may have to advance to<A HREF ="[Link] TARGET ="Dynamic">Slide</A>

<NOFRAMES> ELEMENT
This contains text that should only be rendered when frames are not displaced or the browsers are configured
not to display frames.
It is typically used in a frameset document to provide an alternate content for browsers that has to support the
frames.
NOFRAMES element must not contain the BODY elemt.
A meaningful NOFRAMES element should always be provided in a frameset document and should at least
contain links to the main frame.

e.g.
<HTML>
<HEAD>
<TITLE>This is an example</TITLE>
</HEAD>
<FAMESET COLS="50%, 50%>
<FRAME SRC ="[Link]">
<NOFRAMES>
<P>Here is the <A HREF ="[Link]">NONFRAME</A?
</NOFRAMES>
</FRAMESET>
</HTML>

NB
It allows the explanation of the document's purpose in cases when it is used with browsers that do not support
frames.

<|FRAME> ELEMENT
This defines an inline frame for the inclusion of external objects including other HTML documents.
It can act as a target for other links. It allows the designer to insert a frame within a block of text.
Inserting an inline frame is like inserting an object via the object element.
Object is more widely supported than inline frame.
The content of the Inline frame element should only be displayed by browsers that do not support frames or
are configured not to display the frames.
Inline frames may not be resized. It can support the following attributes as the element.
- Frame border
- Marginwidth
- Marginheight
- Scrolling
- SRC
- Name
- Longdescr

28
Other attributes are:
ALIGN
This allows the content of Frame element: Left, right, bottom, and Center

WIDTH and HEIGHT

This specifies the width and the height of the inline frame.
e.g.
<FRAME SRC ="[Link]" WIDTH="400" HEIGHT ="500" SCROLLING ="auto" FRAMEBORDER
="1">
<A HREF ="[Link]"> Related document </A>
</FRAME>

<FRAME SRC ="[Link]" TITLE ="Famous">

<H2>Frames </H2>
<H3>Gradient</H3>
</FRAME>

Note
- The NOFRAME element and LONGDES attributes displays an alternate content.
- Frameset definition never changes but the contents of one of its frames can.
- Frameset definition never changes but the contents of one of its frames can.
- Frameset may make navigation forward and backward through for user browsers.
- Frameset cols ="50,**">
This means column of 50 pixels and * means the remain space left over.
Authors should not use an image or similar objects as content of a frame for better accessibility and better
indexing with search engines.

HTML FORMS
An HTML form is a section of a document containing normal content, markup, special element called controls
and labels on those controls (checkboxes, menus, radio buttons e.t.c)
Forms are used to:
- Add another level of interactivity to your web page.
- Allow communication between your viewers and your website.
- Gather information (take input from users)
- Offer different means of navigation.

Generally, a form is used in conjunction with a CGI, PHP, ASP script.

Forms gather different kinds of users input i.e. fields to type in text, menus to select, radio buttons to choose
items.
The web browser takes this information wraps it up into a packaged format that can be sent directly to a web
server where there is a customized program. The program can unpack the information, manipulate it, store data
and send a feedback page back to the viewer.
Users usually complete a form by modifying its controls before submitting the form to an agent for processing.
Every form has three parts:
1. The FORM tag
2. The actual form elements where the visitor enters information.
3. The submit tag which creates the button that sends all collected information to the server.

FORM ELEMENT
<FORM>…….</FORM> defines an interactive form which is a web page form.
It contains the following form control element which are in the container for the form.
1. <INPUT>

29
 2. <SELECT>………</SELECT>
3. <OPTION>
4. <TEXTAREA>……….</TEXTAREA>
5. <BUTTON>
6. <LABEL>
7. <OPTGROUP>
8. <LEGEND>
9. <FIELDSET>
Form element act as a container for controls:
It specifies:
- The layout of the form
- The program that will handle the completed and submitted form
- The receiving program must be able to place name/value pairs in order to make use of them.(action)
- The method by which user data will be sent to the server (method)
- The character encoding that will be accepted by the server in order to handle this form.

ATTRIBUTES OF THE FORM ELEMENT

1. METHOD
This specifies which HTTP method will be used to submit the form data set. The values are "GET" and
"POST".
Format is:
<FORMAT METHOD ="GET">OR<FORM METHOD ="POST">

GET
Data from the form is posted by appendices. the data to the end of script URL and send the form input in an
URL to the processing agent server. the amount of data that it can handle is limited by URL and what browser
can process. It should be used when the form causes no side effects i.e. idempotent e.g database
It restricts form data set values to ASCII characters.
It allows form submission to be containers completely in a URL.

POST
****Data from the form is sent as a separate packet to the HTTP server, the form is sent in the body of the
submission *******
It does not entail the character encoding and length restrictions imposed by GET.
The form data set is specified to cover the entire character set and is included in the body of the form.

2. ACTION=" "
This specifies the URL of the script that the form should be sent to.
The value of action attribute is the URL of the destination. It usually points to a CGI script or Java script that
handles the form submission.
The value is the place where the form is to be sent to.
The URL identified does not have to be CGI script.
It may point to mailto: URL

<form action ="destination_url" method=GET/POST">

e.g
<form action ="[Link] METHOD ="POST">

Note:
It is server side form handler and specifies the form processing agent.

3. ENCTYPE=" "

30
This specifies the content type used in submitting the form to the server when the value of method is post.
The default value is "application/[Link]" the value "multipart/form -data" should be used in
combination with input ELEMENT type="file".
e.g.
<form action =[Link] METHOD="POST" ENCTYPE ="TEXT/PLAIN">
FORM CONTENTS
</FORM>
<FORM ACTION =[Link] METHOD ="POST">
FORM CONTENT
</FORM>

4. ACCEPT =" "

It specifies a comma separated list of content types that a server processing this form will handle often it is
used with INPUT element.

5. ACCEPT_CHARSET =" "

This specifies the list of character encoding for input data that is accepted by the server processing the form.
The default value is UNKNOWN considered as character encoding used to transmit the document containing
form.

6. TARGET =
This is used with frames to specify in which frame the form response should be rendered. If no frame with
such a name exist, response is rendered in a new window.
Th values are case sensitive e.g.
- TOP renders the response in the full unframed window.
- SELF renders the response in current frame
- BALNK renders the response in a new window
- PARENT renders the response in the immediate frameset parent.

The following attributes specify client side scripting actions for various events.

7. NAME
It names the element so that it may be referred to from style sheets or scripts.

8. ONSUBMIT
To specify when the form is submitted the action to be taken by the script.

9. ONRESET
To specify the action to be taken by script when the form is reset.

INPUT ELEMENT
This is one of the useful tags used in form's container which is an empty element.
It generates button, input fields and checkboxes.
It inputs areas in a form and defines a form control for the used to enter input.

The following attributes are used in INPUT tag.

1. NAME
This assigns the control name i.e. assign names to the input are.

2. VALUE
This specifies or sets the initial value of the area. It is optional except when type attribute has the value radio or
checkbox.

31
3. SIZE=" "
This sets the horizontal space of the area i.e. the initial width of the control.

4. MAXLENGTH
This sets the maximum size of the characters allowed in the area.

5. CHECKED
This boolean attribute specifies that the button is on. I.e. it initially sets either a radio button or checkbox areas
as checked.

6. SRC=" "
This specifies the source the source of an image to be used to decorate the graphical submit button.

7. ALT=
This specifies the alternative text for an image.

8. ALIGN=
This specifies the alignment of the graphical submit button to top, middle and bottom.

9. READONLY
This sets the value of the area to read-only.

10. DISABLED
This disables the use of an area.

11. ACCESSKEY=" "

This sets a key to access the area i.e. short cut key.

12. TABINDEX
This sets the order in which the area should receive focus i.e. position in tabbing order.

The following specify client-side scripting actions for various events.

13. ONCLICK
Used to define the action taken when button is activated.
e.g. <INPUT TYPE=button VALUE ="Hide non-strict attributes" ID = toggler ONCLICK ="TOGGLER()">

14. ONFOCUS
When the element receives focus.

15. ONBLUR
When the element loses focus.

16. ONSELECT
When text in an input of type text or password is selected.

17. ONCHANGE
When the element loses focus and its value has changed since it received focus.

TYPE=
This specifies the type of control to create the default value for this attribute is "text".

32
It defines the type of form control. It has the following value: text, password, checkbox, radio, submit, reset,
file, hidden, image and button.
e.g.
<INPUT TYPE = "image src = "[Link]">
<INPUT TYPE = text NAME = Username SIZE="8" MAXLENGTH ="8">

TYPE = text
This creates a single line text input control area. E.g. <INPUT TYPE = text NAME="text1" SIZE="30"
VALUE ="H11">

TYPE = Password
Create a single line to input text but rendered as a series of asterisks. This contrtol type is used for sensitive
inputs.
e.g. <INPUT TYPE = password name ="pass" SIZE="30" VALUE ="Pass">

TYPE = Checkbox
This produces a checkbox if checked. It will come up checked selected initially. For multiple checkboxes the
name changes but value the same.
e.g.
<INPUT TYPE ="Checkbox" Name ="Rock" Value = "Yes" Checked>Hotdogs<BR>
<INPUT TYPE ="Checkbox" Value ="Yes" Name ="ED> Chips <BR>

Note
That every checkbox have a unique name and check boxes allows users to choose one or more options.

TYPE = Radio
This produces a radio button which always exist in a group. All members of this group have same name but
different values hence allows users to choose only one of the several options i.e. only one button can be
checked initially or latter.
e.g.
<INPUT TYPE ="radio" NAME = food VALUE =Dan>HOT<BR>
<INPUT TYPE ="radio" NAME = food VALUE =Yes Checked>COLD<BR>
<INPUT TYPE ="radio" NAME = food VALUE =Lock>WARM<BR>

TYPE = Submit
This produces a submit button which when pressed sends the content of the form to the servers.
For multiple submit buttons each should have a different name. It sends all the selection, values and entered
text to defined action destination.
e.g.
<INPUT TYPE="Submit" VALUE ="Send" Name ="Okoth>
<INPUT TYPE ="Submit" VALUE ="Send" Name ="Dan">
TYPE = Reset
This produces a reset button which will restore the form to its original state if pressed. The value of VALUE
attributes is used as text on the button.
e.g.
<INPUT TYPE ="reset" VALUE ="Clear">

TYPE = file
This creates a field through which users can upload files from their local computers or network.
It is typically presented as an input box with a button to start browsing the local hard disk and you can specify
one or more file names to upload.
A form that include a file input must specify method =post and enctype = "multipart" form="data" in form tag.
e.g.

33
<FROM ACTION =[Link] enctype = "multipart/ form - data" method ="post">
<P>Name<INPUT TYPE =text name ="Sender">
File sending?<INPUT TYPE ="file" NAME="files">
</P>
</FORM>

TYPE = Hidden
It allows author's to include form data without having it rendered to the user. It is useful if the document is
generated by a script and author need to store state information.
User input can be carried from form to form by hidden inputs.
It sends the form data without appearing in the layout of the web page.
e.g.
<INPUT TYPE ="hidden" NAME ="Instructor" VALUE =Mulei@[Link]>

TYPE =Image
This creates a graphical submit button and provide alt attribute to act as an alternative text to image you can
also create an image map.
e.g.
<INPUT TYPE =Image SRC = [Link] ALT ="Submit">

If only act as submit but not reset buttons.

TYPE = "text area"

Are text field that have more than one line and can scroll as the viewer enters more text.

Example
<INPUT TYPE ="Text" NAME ="Text" SIZE ="120">
<INPUT TYPE ="password" NAME ="pass" SIZE ="30">
<INPUT TYPE ="checkbox" NAME ="box" VALUE ="box" Checked>
<INPUT TYPE ="Radio" NAME ="food" VALUE ="Yes">
<INPUT TYPE ="Submit" VALUE ="SEND">
<INPUT TYPE ="Reset" VALUE ="RE">
<INPUT TYPE ="Textarea" COLS =30 ROWS = 40>
Quiz
What is the structure of a web form.
Describe the content of a web from data submission.
What is the difference between radio button and checkboxes, submit and reset forms buttons.

TEXTAREA ELEMENT
This is a container element which defines a text input window, <textarea> is used for large textual areas.
It allows users to enter multiple lines of text or information.
When the form is submitted the current value of any textarea within the form is sent to the server as name/
value pair.
The name attribute provides the name used and cols and rows attributes specify the number of visible rows and
columns in visual browser.
Readonly attribute prevent the user from editing the content of the textarea.
Tabindex attribute specifies a number between 0 and 3276 to indicate te tabbing order of the element.
Accessing attribute specified a single unicode character as a shortcut key for giving focus to the textarea.

WRAP attribute
This is automatically wrap the text according the values.

Wrap = Virtual

34
Means that the text in box wraps but it is sent as one long continuous string.

Wrap = Physical
Means that the text in the box wraps and is sent that way too.

Wrap = Off
Means that the text in the box does not wrap but it is sent exactly the way it was typed in.

e.g.
<TEXTAREA NAME="Comments" ROWS ="10" Cols ="45" WRAP ="Virtual">
</Textarea>

DROP DOWN SELCT MENU

ELEMENT <SELECT>
This is a container element used to create a menu that will drop down when clicked on and allow the viewer to
choose one from a list of choices.
It defines a form control for the selection of options.
It contains one or more OPTION or OPTGROUP elements to provide a menu of choices for the user.
By default users can only select one option but multiple attribute of select allow multiple selection.
The NAME attribute provides the control to sent to the server with the value of the selected option.
The SIZE attribute specifies the number of rows in the list that should be visible at the same time.
e.g.
<SELECT NAME = Section>
<OPTION>Otieno
<OPTION>Kamau
<OPTION>Nyambane
</Select>

<Select name ="Section" Multiple>

35