ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx

ICS 2203-WEB APPLICATION DEVELOPMENT
Course Objectives
Upon completion of this course, students should be able to:
1. Describe basic Internet Protocols.
2. Explain JAVA and HTML tools for Internet programming.
3. Describe scripting languages – Java Script and Vb
4. script
5. Explain dynamic HTML and XML programming.
6. Explain Server Side Programming tools.
7. Understand contemporary trends in internet programming.
Course Description
Fundamentals of the Web: services and protocols. Web authoring tools. Client side programming: Hyper Text
Markup Language (HTML), Dynamic HTML, extended Markup Language (XML), Scripting: examples in
languages like Jscript, Vbscript. Multimedia: graphics, audio, animation. Server side programming: JavaScript,
Common Gateway Interface (CGI) scripting, Active Server Pages, Sockets. Current trends in applications
development.
Teaching Methodology
1. Lectures
2. Practical and Tutorial Sessions in Computer Room
3. Individual and Group Assignments
Instructional Materials:
These will include: White board, LCD projector and computers, Flipcharts, Appropriate software.
Course Evaluation
CATs/Assignment/Presentation 30 %
Final Examination 70 %
Total 100%
Course Text Books
Deitel, H.M. and Deitel, P.J. (2007). Internets & World Wide Web How To Program, 4th
Ed. Pearson Education
Sebesta, R. W. (2009). Programming the World Wide Web. 5th
Ed. Pearson Education, Inc.
Reference Text Books
Shah, D.N. (2009). A Complete Guide to Internet and Web Programming. New Delhi: Dreamtech Press
Bates, C. (2006). Web Programming: Building Internet Applications. 3rd
Ed. West Sussex: John Wiley & Sons
Course Journals
Oxford Journals: The Computer Journal
Computer Science Journals (CSC Journals)
Reference Journals
Journal of Computing
Directory of Open Access (DOAJ): Computer Science

CHAPTER 1
WORLD-WIDE WEB MODEL
INTERNET
This is a world-wide system of interconnected computers cooperating with each other to exchange data using a
common software standard through telephone lines and satellite links. All the computers in the Internet can
communicate with each other. These computers use a communication standard called HTTP.
WWW
What is the World Wide Web?
The official definition of the WWW is "wide-area hypermedia information retrieval initiative aiming to give universal access to a
large universe of documents."
wide-area: The World Wide Web spans the whole globe.
hypermedia: It contains various types of media (text, pictures, sound, movies ...) and hyperlinks
that connect pages to one another.
information retrieval: Viewing a WWW document (commonly called a Web page) is very easy
thanks to the help of Web browsers. They allow you to retrieve pages just by clicking links, or
entering addresses.
universal access: It doesn't matter what type of computer you have, or what type of computer the
page you want is stored on - your Web browser allows you to connect seamlessly to many different
systems.
large universe of documents: Anyone can publish a Web page - and nearly anyone has! No matter
what obscure information you want to find, there is bound to be someone out there who has written
a Web page about it.
 The World Wide Web (WWW) is most often called the Web.
What's the relationship between the WWW and the Internet?
The World Wide Web is just one of the many services that the Internet provides. Some other services provided by
the Internet are email, FTP, gopher, telnet and usenet.
Almost every protocol type available on the Internet is accessible on the web including the following components: Email, FTP, Telnet,
User news, HTTP
How does the WWW work?
- Web information is stored in documents called Web pages. Web pages are web documents that are created
using Hypertext markup language (HTML). It is everything you can see on your PC's browser window at one
time.
- A group of web pages that are related and logically connected is called a website.
A web site may contain a single web page or many interconnected web pages.
- There are different aspects of web pages:
Entry Page
- This is the first page a visitor views when entering a web site. It is not necessarily the home page.
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.
Exit page

- This is the last page a visitor views before leaving the web site.
- These web pages are stored on computers called Web servers.
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. Examples of these servers
include: e-mail servers, Web servers, FTP servers, Gopher servers and Telnet servers, to name a few.
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,
www.howstuffworks.com is a permanent, human-readable name. It is easier for most of us to remember
www.howstuffworks.com than it is to remember 209.116.69.66.
The name www.howstuffworks.com 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.
 Computers reading the Web pages are called Web clients.
 Web clients view the pages with a program called a Web browser.
A web browser is a piece of software that runs on your computer and allows you to view Web pages. There
are two types of browsers; text based browsers like LYNX and graphic based browsers like Netscape
Navigator and Internet Explorer.
How does the browser fetch the pages?
 A browser fetches a Web page from a server by a request.
 A request is a standard HTTP request containing a page address.
 A page address looks like this: http://www.someone.com/page.html.
How does the browser display the pages?
 All Web pages contain instructions for display
 The browser displays the page by reading these instructions.
 The most common display instructions are called HTML tags.

 HTML tags look like this <p>This is a Paragraph</p>.
Who is making the Web standards?
 The Web standards are not made up by Netscape or Microsoft.
 The rule-making body of the Web is the W3C.
 W3C stands for the World Wide Web Consortium.
 W3C puts together specifications for Web standards.
 The most essential Web standards are HTML, CSS and XML.
 The latest HTML standard is XHTML 1.0.
Features of WWW
- It has its own protocol i.e. HTTP
- It creates a convenient and user friendly environment
- It is the fastest components of Internet since it gathers together all the protocols into a single system.
- It relies on the hypertext as means of Information retrieval.
- It has the ability to work with multimedia and advanced programming languages i.e. text, graphics, video and
audio.
- It is a delivery medium, content provider and subject matter.
- It connects users to almost any part of the Internet.
- It is used to explore intellectual, verbal knowledge and effective learning.
- It contains complex virtual web of connections and consist of files.
It provides real-time collaboration, interactive pages and automatic push of information to client computers.
USES OF INTERNET
1) For Business/ To make money: The Internet offers a wide range of business opportunities
and facilities. One is able to trade online thus putting away all the tariffs and barriers
experienced. I.e. The Internet is used to advertise and sell product and services.
2) To Communicate: The Internet has enabled users to get faster and more reliable
communication. Communication ranges from electronic mail to Internet access. Through
chatting and emails the Internet can be used to meet people. www.yahoo.com
3) To have Fun: The Internet provides access to many games that one can download to play
online. (Entertainment in form of music, movies etc)
4) Research: Anyone can be able to find articles or information readily available on the Internet. It
is an open library with access to some university online libraries.www.google.com
5) News: Ranging from headlines around the world to sports it is readily available. E.g
www.nation.co.ke, www.cnn.com
6) Education: the Internet is a great learning tool. Many tutorials are available in various subjects
thus allowing users to learn more.
7) To find software: The Internet contains a wealth of useful downloadable shareware (software
you can use for free on a trial basis) e.g shareware.com
8) To shop: The Internet offers a wide range of goods that can be bought online e.g. cars, books
e.t.c. However, security online is still questionable. E.g www.amazon.com
INTRANET
- Organizations can use Internet networking standards and web technology to create private networks called
intranets.
- An Intranet is an internal organizational network that can provide access to data across the enterprise.
- It uses the existing company network infrastructure along with Internet connectivity standards and software
developed for the World Wide Web.

- Intranets can create networked applications that can run on many different kinds of computers throughout the
organization.
√ The principal difference between the Internet and an Intranet is that whereas the Internet is open to
anyone, the Intranet is private and is protected from public visits by firewalls.
√ A firewall is a hardware or software placed between an organization’s internal network and an external
network to prevent outsiders from invading private networks.
EXTRANET
- Private intranet that is accessible to select outsiders.
- They are extended to authorized users outside the company eg authorized buyers could link to a portion of the
company’s intranet to obtain information about the cost and features of its products.
- The company can use firewalls to make sure that only authorized people can access the site.
- Extranets are especially useful for linking organizations with customers or business partners. They often are
used for providing product availability, pricing and shipment data and electronic data interchange (EDI) or for
collaborating with other companies on joint development or training efforts.
OTHER WEB TECHNOLOGIES/ INTERNET SERVICES/ INTERNET TOOLS
(1) FTP
- The Internet allows you to copy files between your computer and other computers on the Internet by using file
transfer protocol (ftp). You connect your computer to an ftp server, an Internet host computer that stores files
for transfer. You may be required to log in to retrieve a file, which varies from software, and text files to graphic
files.
(2) TCP/IP ( Transmission Control Protocol/Internet Protocol)
- A special set of protocols that is used to send data in a more reliable way.
(3) E-mail
- This is online communication between computer users. It is quick, convenient, efficient and cheap way to
communicate with both individuals and groups.
- It’s the most popular internet service.
(4) TELNET
It’s a service that enables remote log in. Users are permitted to log in onto a host and perform tasks as if they
are working on the remote computer itself.
(5) USENET/newsgroups, mailing lists
A huge network of discussion groups
(6) Gopher
This is a menu based system that allows a user to access information from a remote computer. Menu items
point to a file which may be located on the same computer or on a different one.
(7) IRC
This is an Internet service that allows a number of users to connect to the same network node and
communicate in real time.
INTERNET ADDRESSING
IP ADDRESS
An IP address is a unique numerical address assigned to every machine on the Internet. The IP address is a
32 bit binary number normally represented as 4 decimal values i.e. octets. Each octet represents 8 bits in range from

0 to 255 separated by decimal points. This method of notation is called the dotted decimal notation e.g.
216.27.61.137
To guarantee world-wide unique addresses, IP addresses are licensed from Network Information Center
(NIC).
An IP address and its subnet mask perform the following functions:
- Enable the system to process the receipt and transmission of packets.
- They specify the device’s local addresses.
- They specify a range of addresses that share the cable with the device.
Commands that can be used to verify IP configuration
Router interfaces must be configured with an IP address if it is to be routed to or from the interface.
PING
This uses Internet Control Message Protocol (ICMP) protocol to verify the hardware connection and logical
address at the network layer.
This command is used to determine the response time of a host.
TRACERT
This command is used to determine the path of a packet.
IPCONFIG
This command is used to determine the IP address of your computer.
DOMAIN NAMES
This is a unique name that identifies an Internet site.
It is an alpha-numeric representation of the IP address. The characters are separated by dots and correspond to an
IP address e.g. www.nation.co.ke
IP addresses are not user friendly and could cause typing errors; the domain name system (DNS) was created so
people would not have to remember several confusing numbers. Domain names enable short, alphabetical names to
be assigned to IP addresses.
They are easier to remember and to work with than an IP address and are informative and convenient to people.
A domain name is divided into two main parts:
(i) First level
It is an extension and is assigned according to what kind of domain it represents
E.g.
Domain name Type of domain
Edu Educational institution
Gov Government organization
Mil Military organization
Net Network service provider
Com Commercial organization
Org Organizations
Au Australian domain
Uk United Kingdom domain
Ke Kenyan domain
Za South African domain
(ii) Second level
It is a name one chooses or the main host of the Internet.
E.g. www.mail.yahoo.com
Domain name contains the following information
- the name of the organization

- the organization itself
- the country
- the particular computer or network
FQDN
- A Fully Qualified Domain Name is a domain name that includes all higher level domains relevant to the entity
named.
- It is usually selected to give a clear indication of the site’s organization or sponsoring agent.
DOMAIN NAME SERVICE (DNS)
- This is a hierarchical, distributed method of organizing the name space of the Internet. It
translates domain names to IP addresses and vice versa.
- It provides a centralized, distributed database which keeps track of computers names and their corresponding
IP addresses.
- DNS servers are computers connected to the Internet host part of the DNS database and allow others to access
it.
- DNS servers contains a subset of the entire databases. DNS uses a client/server model where the DNS servers
contain information about a portion of the DNS database and makes information available to clients.
How DNS function
- Enter the domain name in the address location
- The browser software will ask Windows for the IP address it maps to
- Windows then sends a request to the local name server(local ISP)
- If the local ISP does not get the request then it forwards it to a higher name server until mapping is done.
- Translation then takes place ie domain name to IP address and vice versa
ROUTING
- A router is a machine that routes packets and keep information used to get data to its destination in routing
tables.
- Each router knows about its sub-networks and which IP addresses they use.
- Routers form a tree-like structure on the Internet with Network Service Provider (NSP) backbone at the roots.
- When a packet(piece of data) arrives at a router, the router examines the IP address of its destination then
checks its routing table. If the network containing the IP address is found the packet is sent to that network, if
not, then the router sends the packet on a default route up the backbone to next router until it finds its
destination. This process is called package routing.

CHAPTER 2
CONCEPTS OF WEB DESIGN
Definitions
Content
The actual 'meat' of a document -- all of the words, images, and links which a user can read and interact
with. The content is "whatever you put in the document."
Hyperlink
- This is a connection from one document to another or to any resource or within a document. It 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.
- A link from one document to another, or to any resource, or within a document.
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.
In-line
Almost always used in the context "in-line image," this refers to a resource of some type, which is
placed directly into a document. As I say, this is nearly always an image, but the future could see things
like in-line animations.
Hypermedia
- This is a system that has links between texts or media that takes users to another web page.
- It contains various type of media hyper linked to connect a page to other page.
Broken Link
It is a link that references a page that no longer exists.
URL
The Uniform Resource Locator is a "standard" way of easily expressing the location and data type of a
resource. URLs in general take the form "protocol://address" 1`where protocol is procedure or method like
gopher, FTP, telnet, and so on, and the address is merely the server and pathname (if any) of a given resource or
page.
The syntax is:
Scheme://host.domain[:port]/path/filename
Where scheme is one of:
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
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. WYSIWYG is an acronym for What You See Is What You Get and it means that one can design the
html document visually, as if you are using a word processor, instead of writing the mark up tags in a plain text
file and imagining what the resulting page will look like.
One can also use graphic tools like photoshop, Paint, Animated GIF construction set, PageMaker etc. These are
used to create graphics that can be used in the web documents.

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.
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
(ix) How long it takes to load a web page
(x) How often visitors visit the site, register or buy products
(xi) How long users use the site
(xii) How users find the site
(xiii) How likely users revisit the site
Standard elements of a page
Standard Header
Each page should have a standard header that will contain information about where the user is in the web of pages.
Standard Footer
Every page should have the following information presented at the bottom of the page:
1. The author’s contacts.
2. A date indicating when the page was most recently modified to allow the user to determine whether
a page is current or not.
3. The URL of the current page if you feel that users might want to print a page or will need to know
where they are in your hierarchy.
In addition to the above required information, the following information should be provided as necessary:
1. Copyright information on the text displayed.
2. Acknowledgements of copyrighted information.
3. A disclaimer.(legal claim)
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.
5. Size of the page
The size of the page should be determined by the audience of the page, the intent of the page and the
envisioned use of a page.
6. Navigational issues

Every page you make should have a link at the top level page. If applicable there should also be links to the next
document in the series and to the previous document in the series.
7. Graphics
The graphics should be small and simple due to the increasing web usage and the limited facilities to
accommodate users. Each image should also have alternate text for viewers that cannot see graphics or for
users who choose not to load them
8. Links
Avoid broken links.
The links should be self -explanatory. That means the description given should match the task at hand. Again do
not use too much content on the link. Try to focus on the text that is relevant not to a whole sentence.
9. Browser specification enhancements
Some tags like <BLINK> and <MARQUEE> are not supported by all the web browsers. View your web page
in all common types of web browsers.
10. Aesthetics
Your web page should be user friendly.
Avoid a lot of movements eg blinking, scrolling text and images. This may distract the user and he/she may
not focus on the rest of the page.
(Note: Read Internet by Onunga pg 256 –271 for more details)
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 reflect the latest information.
- Disadvantages: They are not reliable.
Require high cost of executing and maintenance.
Slow to access
(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 a 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).

CHAPTER 3
OVERVIEW OF HTML
HTML CODING
- HTML stands for Hyper Text 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.
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 is structured i.e. it has a beginning, body and end.
- Pages are made of text, images and URL links.
- 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.
HTML Tags
 HTML tags are used to mark-up HTML elements
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.
 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 HTML tags are not case sensitive, <b> means the same as <B>
- 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.

<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. They are ignored by the browser. 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.
You can also use comments to explain your code, which can help you when you edit the source code at a
later date.

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
Its an empty tag.
- <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.</html>tells the browser that this is the
end of the 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.
- <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
</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>

CHAPTER 4
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>
<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
<sup>…..</sup>
The text is raised
e.g. km<sup>3</sup> would be km3
Subscript
<sub>…..</sub>
The text is lowered
e.g. H <sub>2</sub>O would be H2O
Text justification/
Alignment
The text is justified according to the align attribute indicated to
align the text in the page layout.
The justification tag is <div>…….</div>
Blockquote
<blockquote>……
</blockquote>
Forces a paragraph break above and below the text. Used to include
lengthy quotations in separate block on the screen. Most browsers
generally change the margins for the quotation to separate it from
the surrounding text.
Preformatted text
<PRE>….</PRE>
Used to generate text exactly as typed in including spaces, new
lines and 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
&plusmn 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
&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>

CHAPTER 5
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)
- 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
<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>

CHAPTER 6
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:
- 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:/practice.html> 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://host.domain [: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 = "http://www.w3.com.org/addressing"><font 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="http://www.mail.yahoo.com" 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.
- Top : Cancels all frames and loads in full browser window
E.g.
<a href =http://www.jkuat.ac.ke 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 documentA.html to documentB.html
In documentA.html:
<a href = "documentB.html#linkname"> Text to activate link</a>
In documentB.html:
<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=http://www.yahoo.com>Yahoo page</a>
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 ="mailto:emailinfo@host">Name</a>
e.g.
<A HREF = " mailto:danil2000@yahoo.com"> 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 ="mailto:danil2000@yahoo.com?subject= topic">Greetings</a>
<a href "mailto:danil2000@yahoo.com?cc=person@hotmail.com>Greetings</a>
NB/ It is important to note that UNIX is case-sensitive operating system where filenames
are concerned.

CHAPTER 7
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 = “filename.gif”>
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.
Attributes
Size
- This scales the image and sets the appropriate space (in pixels) as it downloads the image.
< IMG SRC =”filename.gif” 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 = “filename.gif” 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 =”filename.gif” ALIGN=RIGHT>
Border
- This is used to place or eliminate a border round the image.
- Border widths are measured in pixels.
<IMG SRC =”filename.gif” 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=”filename.gif” 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 = “filename.gif”>
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 =”index.html”><IMG SRC =”filename.gif BORDER=”50” ALT=”Picture of a cat”></A>
- Images can also link to other images forming hyperlinked images.
<A HREF=”picture.gif”><IMG SRC=”hyper.gif” BORDER =”0”>
hyper.gif acts s hyperlink to picture.gif
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
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 ="mymap.gif" WIDTH =100 HEIGHT =100 ISMAP USEMAP ="#mapdata">
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=http://www.apage.co.uk">
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.

CHAPTER 8
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 ="bg.gif" 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 ="mysound.wav"> 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="mysound.wav" 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
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 =" mysound.wav" WIDTH="150" HEIGHT="250" CONTROLS ="TRUE" LOOP = "TRUE">
This would play back the the file mysound.wav, 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 = "moresound.wav" 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.

CHAPTER 9
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.
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.
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.
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>
</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>
<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>
</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.
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.

CHAPTER 10
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.
When is it appropriate to use frames?
1. Common Content: If you have a collection of documents that share information, you may want to display
the common material in a frame. E.g a header, footer in the form of navigational aids, copyright information, etc
2. Form verification: If the user is to submit a form, you may want to have the original information displayed
in one frame and the information that the server receives and sends back displayed in an adjacent frame. This
way, a user can do a side-to-side comparison, to make sure that all the data is entered correctly.
3. Table of Contents: If your pages have a table of contents or an index, that you want to remain on-screen for
navigational purposes, you could place this material in a separate frame. If the material fits into a small frame,
hyperlinks could be set up to target a larger frame.
NB/ Frames are not supported by all browsers. Only the latest versions can support frames.
TAGS USED TO CREATE FRAMES
The tags used to create a frame document are:
The name frame is an analogy with window frame. A group of frames in a single browser window is called a
frameset.
<FRAMESET></FRAMESET>
<FRAME>
<NOFRAME>
General Format:
<HTML>
<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.
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.
It can support the following attributes:
- SRC
- Frame border
- Marginwidth
- Marginheight
- Scrolling
- Name
- Longdescr
- Align
- Width
- Height
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 ="Frame-source1.html">
<FRAME SRC ="Frame-source2.html">
</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 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 = "List.html" Title = "Menu">
<FRAME NAME = "Content" SRC = "add.html" Title = "Content">
</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 ="Source1.html" Scrolling ="yes">
<FRAME SRC ="Source2.html" NORESIZE MARGINWIDTH ="10">
</FRAMESET>
<FRAME SRC ="Source3.html" FRAMEBORDER ="0">
<FRAME SRC ="Source4.html" FRAMEBORDER ="0">
</FRAMESET>
</HTML>
TARGET ATTRIBUTE
It is used to direct hyperlinks into specific frames. You specify the name by using the frame’s name as the value
of the TARGET attribute. If the value of TARGET does not match the name of any frame, a completely new
browser window will be created.
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%">
<FRAME NAME ="Dynamic" SRC = "dy.html">
<FRAME NAME ="Fixed" SRC = "fixed.html">
</FRAMESET>
</HTML>
E.G.

<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Now you may have to advance to<A HREF ="doc.html TARGET ="Dynamic">Slide</A>
ALIGN ATTRIBUTE
This allows the content of Frame element: Left, right, bottom, and Center
WIDTH and HEIGHT ATTRIBUTES
This specifies the width and the height of the inline frame.
e.g.
<FRAME SRC ="Source.html" WIDTH="400" HEIGHT ="500" SCROLLING ="auto" FRAMEBORDER
="1">
<A HREF ="source.html"> Related document </A>
</FRAME>
<FRAME SRC ="doc.html" 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.
<NOFRAMES> ELEMENT
NOFRAME element provide an alternate content for browsers that do not support frames.
It contains text that should only be rendered when frames are not displayed or the browsers are configured not
to display frames.
NOFRAMES element must not contain the BODY element.
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 ="main.html">
<NOFRAMES>
<P>Here is the <A HREF ="main.html">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.

CHAPTER 11
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>
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 ="mailto:daniel2003@yahoo.com" METHOD ="POST">
Note:
It is server side form handler and specifies the form processing agent.
3. ENCTYPE=" "
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/x-www-form-url.encoded" the value "multipart/form -data" should be used in
combination with input ELEMENT type="file".
e.g.
<form action =mailto:dan2003@yahoo.com METHOD="POST" ENCTYPE ="TEXT/PLAIN">
FORM CONTENTS
</FORM>
<FORM ACTION =http://amarco.co.ke/mg/aserver 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.
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".
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 = "dol.gif">
<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.
<FROM ACTION =http://serve.com/cgi/handle 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@yahoo.com>
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 = source.gif 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
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>
-
STRUCTURAL DEFINITION
Heading <H?></H?> (the spec. defines 6 levels)
Align Heading
<H?
ALIGN=LEFT|CENTER|RIGHT>
</H?>
Division <DIV></DIV>
Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
4.0 Defined Content <SPAN></SPAN>
Block Quote
<BLOCKQUOTE></BLOCKQUOTE
> (usually indented)

4.0 Quote <Q></Q> (for short quotations)
4.0 Citation <Q CITE="URL"></Q>
Emphasis <EM></EM> (usually displayed as italic)
Strong
Emphasis
<STRONG></STRONG> (usually displayed as bold)
Citation <CITE></CITE> (usually italics)
Code <CODE></CODE> (for source code listings)
Sample Output <SAMP></SAMP>
Keyboard Input <KBD></KBD>
Variable <VAR></VAR>
Definition <DFN></DFN> (not widely implemented)
Author's
Address
<ADDRESS></ADDRESS>
Large Font Size <BIG></BIG>
Small Font Size <SMALL></SMALL>
4.0 Insert <INS></INS>
(marks additions in a new
version)
4.0 Time of Change
<INS
DATETIME=":::"></INS>
4.0 Comments <INS CITE="URL"></INS>
4.0 Delete <DEL></DEL>
(marks deletions in a new
version)
4.0 Time of Change
<DEL
DATETIME=":::"></DEL>
4.0 Comments <DEL CITE="URL"></DEL>
4.0 Acronym <ACRONYM></ACRONYM>
4.0 Abbreviation <ABBR></ABBR>
PRESENTATION FORMATTING
Bold <B></B>
Italic <I></I>
4.0* Underline <U></U> (not widely implemented)
Strikeout <STRIKE></STRIKE> (not widely implemented)
4.0* Strikeout <S></S> (not widely implemented)
Subscript <SUB></SUB>
Superscript <SUP></SUP>
Typewriter <TT></TT> (displays in a monospaced font)
Preformatted <PRE></PRE> (display text spacing as-is)
Width <PRE WIDTH=?></PRE> (in characters)
Center <CENTER></CENTER> (for both text and images)
N1 Blinking <BLINK></BLINK> (the most derided tag ever)
Font Size
<FONT
SIZE=?></FONT> (ranges from 1-7)
Change Font Size
<FONT SIZE="+|-
?"></FONT>
Font Color
<FONT
COLOR="#$$$$$$"></F
ONT>
4.0* Select Font
<FONT
FACE="***"></FONT>

N4 Point size
<FONT POINT-
SIZE=?></FONT>
N4 Weight
<FONT
WEIGHT=?></FONT>
4.0* Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)
MS Marquee <MARQUEE></MARQUEE>

ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx

Recommended

More Related Content

Similar to ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx (20)

Recently uploaded (19)

ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx