MODULE TITLE: Internet Application Programming

Introduction
This unit begins by examining the Internet, what it is and an introduction to what the World
Wide Web is and what constitutes a hypertext document. A description of the history of the
hypertext mark-up language, its structure and how to produce some basic World Wide Web
pages.
It delves into simple text formatting, colors, Marquee, Lists, creating graphical images, hypertext
links, forms, tables and frames.

Prerequisites to this unit

None
Assignments/self tests
There is a project and 2 continuous assessment tests that the learner will undertake in the
course of the study. These will account for 30% of the final score.

Examinations
The examination will be a sit-in at the appropriate centre to be advised and will contribute
70% of the final score

Objectives

We will begin this unit by introducing the internet, how the internet works, protocols for the
internet software to create web pages. Create a simple web site for the project. This unit is a pre-
requisite for advanced web that uses this unit as a background for its development

By the end of this unit the learner should be able to:

i. Define the concept of internet and its protocols.
ii. Know what the World Wide Web is.
iii. Distinguish between XML, SGML and HTML
iv. Hypertext Markup language.
v. Simple text formatting
vi. Create a web site.

Recommended Reading
Niederst J (2001) Learning Web Design Shroff Publishers

Additional Reading

1. Jennifer Niederst (2006) Web Design in a Nutshell 3rd ed. O’Reilly and Associates
2. Keith Sutherland: Understanding the Internet; A clear guide to internet technologies
(2001) Butterworth Heinemann
3. C Xavier (2000) World Wide Web with HTML McGraw-Hill Publishing Company
Limited
4. Kentie Peter (2002) Web design tools and Techniques PeachPit Press
5. Douglas E. Comer (2000) Hands-On Networking with Internet Technologies. Prentice
Hall

TABLE OF CONTENTS

Lesson 1: Introduction

1.1 Introduction
1.2 Objectives
1.3 What is the Internet
1.4 How does the Internet work
1.5 Types of Servers
1.6 Internet Addressing
1.7 Summary
1.8 Revision questions

Lesson 2: World Wide Web

2.1 Introduction
2.2 Types of documents
2.3 What is WWW
2.4 Relationship between WWW and the Internet
2.5 SGML and XML
2.6 Hypertext Mark-Up Language
2.7 Relationship between SGML, XML and HTML
2.8 Summary
2.9 Revision question

Lesson 3: Web Design

3.1 Introduction
3.2 Web design
3.3 Factors to consider while designing a web site
3.4 Factors that influence web design on web marketing efforts
3.5 Modern web design consideration
 3.6 Web sites
3.7 Concepts used in Web Design
3.8 Web design tools
3.9 Web browsers
3.10 Revision questions

Lesson 4: Introduction to HTML

4.1 HTML Elements
4.2 Software to create Web pages
4.3 Naming Conventions
4.4 Structure of HTML Documents
4.5 Introduction to the heading Section
4.6 Exercises

Lesson 5: Simple Text formatting

5.1 Introduction to the Body Section
5.2 Paragraphs
5.3 Forcing a new line break
5.4 Inserting Section Heading
5.5 Preformatted Text
5.6 Block quote Text
5.7 Address Text
5.8 Physical Text Characteristics
5.9 Logical Text Characteristics
5.10 Special Characters
5.11 Exercises

Lesson 6: Further Text formatting

6.1Centering
6.2 Marquee
6.3 No Breaks
6.4 Word Breaks
6.5 Base Font Size
6.6 Font Size
6.7 Exercises

Lesson 7: Colours and Textures

7.1 Introduction
7.2 Background Colour
7.3 Text and Hyperlink Colours
7.4 Background Wallpaper
7.5 Important points on Colours and Wallpapers
7.6 Exercises

Lesson 8: Listing
 8.1 Introduction to Lists
8.2 Unordered List
8.3 Unordered List (Type)
8.4 Ordered List
8.5 Ordered List (Type Start)
8.6 Menu Lists
8.7 Directory Lists
8.8 Definition Lists
8.9 Exercises

Lesson 9: Graphical Images

9.1 Introduction to Graphical Images
9.2 Horizontal Rule
9.3 In-Line Images
9.4 Setting an Image Border
9.5 Break (enhanced)
9.6 Exercises

Lesson 10: Hyperlinks

10.1 Introduction to Hyperlinks
10.2 Internal Hyperlinks
10.3 External Hyperlinks
10.4 An external Hyperlinks to an existing web page
10.5 In-Line Images as Links
10.6 Hyperlinks to Mail Dialogues
10.7 Hyperlinks to Newsgroup Dialogues
10.8 Hyperlinks to Files
10.9 Embedding Files
10.10 Clickable Maps
10.11 Exercise

Lesson 11: Forms

11.1 Introduction to Forms
11.2 Basic Form elements
11.3 Basic Form Input
11.4 Submit and Reset
11.5 Checkbox Fields
11.6 Radio Button Fields
11.7 Text Fields
11.8 Password Fields
11.9 Hidden Fields
11.10 Text Area Fields
11.11 Menu Fields
11.12 Exercise

Lesson 12: Tables

 12.1 Introduction to Tables
12.2 Heading Cells
12.3 Adding Captions
12.4 Altering the look of the table
12.5 Altering the look of the Table Row
12.6 Altering the look of a Table Cell
12.7 Nested Tables
12.8 Images in Tables

Lesson 13: Frames

13.1 Introduction to Frames
13.2 Frame Documents
13.3 Basic Frame Elements
13.4 Column Frames
13.5 Row Frames
13.6 Combining Column and Row Frames
13.7 Exercise

Lesson One

1.1 Introduction

This section of the course will begin by examining. the internet, what it is and how it works. The
types of servers and internet addressing. It reminds students of what they did in the unit BIT
1102 Internet Technology.

1.2 Objectives

1. The learner should be able to define the internet.

2. Remind the learner of Internet protocols as learnt in Internet Technologies.
3. Know how the internet works.
4. The learner should be able to describe the types of servers.
5. The learner should be able to describe internet addressing.

1.3 What is the Internet

The Internet is a global system of interconnected computer networks that use the standard
Internet protocol suite (TCP/IP) to link several billion devices worldwide. It is a network of
networks that consists of millions of private, public, academic, business, and government
networks, of local to global scope, that are linked by a broad array of electronic, wireless, and
optical networking technologies. The Internet carries an extensive range of information resources
and services, such as the inter-linked hypertext documents and applications of the World Wide
Web (WWW), the infrastructure to support email, and peer-to-peer networks for file sharing and
telephony. In the two decades following 1994 it has all but replaced earlier telegraph systems
such as Telex and by far has exceeded the functionality of earlier forms of telegraph. Internet
users are also able to share resources and make available a huge amount of information to other
internet users. Information of every conceivable topic can be found on the internet, in addition to
large repositories of software, graphics, sound files and video clips.

1.4 How does the Internet work

To understand the Internet, it helps to look at it as a system with two main components. The first
of those components is hardware. That includes everything from the cables that carry terabits of
information every second to the computer sitting in front of you.
Other types of hardware that support the Internet include routers, servers, cell phone towers,
satellites, radios, smart phones and other devices. All these devices together create the network
of networks. The Internet is a malleable system -- it changes in little ways as elements join and
leave networks around the world. Some of those elements may stay fairly static and make up the
backbone of the Internet. Others are more peripheral.
These elements are connections. Some are end points -- the computer, smart phone or other
device you're using to read this may count as one. We call those end points clients. Machines
that store the information we seek on the Internet are servers. Other elements are nodes which
serve as a connecting point along a route of traffic. And then there are the transmission lines
which can be physical, as in the case of cables and fiber optics, or they can be wireless signals
from satellites, cell phone or 4G towers, or radios.
All of this hardware wouldn't create a network without the second component of the Internet: the
protocols. Protocols are sets of rules that machines follow to complete tasks. Without a common
set of protocols that all machines connected to the Internet must follow, communication between
devices couldn't happen. The various machines would be unable to understand one another or
even send information in a meaningful way. The protocols provide both the method and a
common language for machines to use to transmit data. Most of these protocols and how they
work, you have done in the unit internet technologies.

1.5 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.

1.5.1 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)

1.5.2 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.

1.5.3 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.

1.6 INTERNET ADDRESSING

1.6.1 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 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.

1.6.2 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

1.6.3 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.
1.6.4 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.
1.6.5 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.

Revision Questions

1. Briefly explain what the internet is.

2. Describe the protocols of the internet.
3. Explain the Internet addressing modes.
4. Discuss the various types of servers.

Suggested Reading
1. Tanenbaum, A.S and Wetheral,D. 2011 Computer Networks. 5th edition. New Delhi:
Prentice-Hall
2. Stallings, W. I.2004 Data and computer communications. 7th edition. New Delhi:
Pearson/Prentice Hall

Lesson Two

2.1 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) 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.

2.2 What's the relationship between the WWW and the Internet?

The World Wide Web (WWW) is a client server architecture system for information serving and
retrieval. The WWW is a means by which a user can ask a computer connected on the internet to
serve (or transmit) some information to the user (or client).The WWW works through the
installation of both client programs and server programs.
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

2.2.1 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.

2.2.3 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.2.4 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.

2.2.5 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.

2.2.6 USENET/newsgroups, mailing lists

A huge network of discussion groups

2.2.7 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.

2.2.8 IRC
This is an Internet service that allows a number of users to connect to the same network node
and communicate in real time.

2.3 SGML (Standard Generalized Markup Language)

Historically, Electronic publishing applications such as Microsoft Word, Adobe PageMaker or

QuarkXpress, "marked up" documents in a proprietary format that was only recognized by that
particular application. The document markup for both structure and style was mixed in with the
content and was published to only one media, the printed page.

Because SGML is a nonproprietary international standard it allows you to create documents that
are independent of any specific hardware or software. The document structure (what elements
are used and their relationship to each other) is described in a file called the DTD (Document
Type Definition). The DTD defines the relationships between a document's elements creating a
consistent, logical structure for each document.

SGML is good for handling large-scale, long-term information management needs and has been
around for more than a decade as the language of defense contractors and the electronic
publishing industry. Because SGML is very large, powerful, and complex it is hard to learn and
understand and is not well suited for the Web environment.

2.4 XML (Extensible Markup Language)

XML is a "restricted form of SGML" which removes some of the complexity of SGML. XML
like SGML, retains the flexibility of describing customized markup languages with a user-
defined document structure (DTD) in a non-proprietary file format for both storage and exchange
of text and data both on and off the Web.

XML separates structure and content from style and the structural markup tags can actually
describe the content because they can be customized for each XML based markup language. A
good example of this is the Math Markup Language (MathML) which is an XML application for
describing mathematical notation and capturing both its structure and content.

Until MathML, the ability to communicate mathematical expressions on the Web was limited to
mainly displaying images (JPG or GIF) of the scientific notation or posting the document as a
PDF file. MathML allows the information to be displayed on the Web, and makes it available for
searching, indexing, or reuse in other applications.

2.5 HTML (Hypertext markup Language)

The way in which web pages are formatted, and thus displayed, is controlled through the
use of the HyperText Mark-up Language, Known simply as HTML.

HTML web pages are standard ASCII (American Standard Code for Information
Interchange) file. Each web page is a simple text file which is not stored or encoded in
any complex way. Html is a set of formatting marks which can be used to influence the
way the web page is displayed on the client browser, once it has been delivered by the
WWW server. The HTML formatting marks are known as elements.

Once the web browser receives the ASCII web file it scans the file looking for the
element markers which instruct it to, for example display this text as a large heading and
to insert a graphic at a particular position. The web browser the displays the web page in
accordance to these instructions.

2.6 Relationship between SGML, XML and HTML

HTML is a single, predefined markup language that forces Web designers to use its limiting and
lax syntax and structure. The HTML standard was not designed with other platforms in mind,
such as Web TV’s, mobile phones or PDAs. The structural markup does little to describe the
content beyond paragraph, list, title and heading.

XML breaks the restricting chains of HTML by allowing people to create their own markup
languages for exchanging information. The tags can be descriptive of the content and authors
decide how the document will be displayed using style sheets (CSS and XSL). Because of
XML's consistent syntax and structure, documents can be transformed and published to multiple
forms of media and content can be exchanged between other XML applications.

HTML was useful in the part it has played in the success of the Web but has been outgrown as
the Web requires more robust, flexible languages to support it's expanding forms of
communication and data exchange.
Summary

XML will never completely replace SGML because SGML is still considered better for long-
time storage of complex documents. However, XML has already replaced HTML as the
recommended markup language for the Web with the creation of XHTML 1.0.

Even though XHTML has not made the HTML that currently exists on the Web obsolete, HTML
4.01 is the last version of HTML. XHTML (an XML application) is the foundation for a
universally accessible, device independent Web.

Revision Questions

1. Briefly explain the services offered by the internet.

2. What is the relationship between SGML, XML and HTML
3. Give the benefits and limitations of SGML and XML.
4. Discuss the evolution of HTML.

LESSON THREE

3.1 Introduction
In this lesson we are going to look at web design, what it is, components of web design, concepts
used in web design and the factors to consider when designing a web site.

3.2 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

3.3 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

3.4 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

3.5 Modern web design consideration

3.5.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.

3.5.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.5.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.
3.5.4 Conformity of conversion and innovation
This includes how fast the site loads and how attractive the site is.

3.6 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.

3.7 CONCEPTS USED IN WEB DESIGN

3.7.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

3.7.2. Entry Page

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

3.7.3. Home Page

- This is the introductory, starting, first, or welcome page for a web site.
- 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.

3.7.4. Exit page

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

3.7.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.

3.7.6. Hypermedia
- This is a system that has links between texts or media that takes users to another web page.
- It contains various types of media hyperlinked to connect a page to other pages.

3.7.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.

3.7.8. Hyperlink
- This is a connection or links from one document to another or to any resource within a
document.
- It is the most basic navigational element in a web browser.

3.7.9. Broken Link

It is a link that references a page that no longer exists.

3.7. 10. Content

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

3.7.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.
 3.8 Web design tools
- HTML documents are plain-text (also known as ASCII) files that can be created using any
text editor. E.g. of text editors include notepad, web-edit, word processors like MS Word,
DOS edit, Netscape composer
- Some WYSIWYG editors can also be used e.g. Front page, Outlook Express, Claris Home
page, Adobe Page Mill.
One can also use graphic tools like Photoshop, Paint, Animated GIF construction set, PageMaker
etc.

3.9 Web browsers

The piece of software that runs on your computer and allows you to view Web pages is known as
the web browser the most common browsers are Netscape, Mozilla, Safari, Google Chrome and
Internet Explorer.

3.10 Revision Questions

1. What is Web design?
2. What are some of the factors to consider when designing a web site?
3. Identify the web browsers that are used in web design.

Lesson 4: Introduction to HTML

In this lesson we are going to look at the structure of an HTML document. The elements that
make up a web page, software that is used in creating web pages, the general structure of a web
page. The elements used in the heading section and introduction to the body section of an html
document.

4.1 HTML Elements

HTML elements provide formatting information on how a web page should be displayed.
Elements are a request for something to occur. Since HTML documents are stored as ASCII text
files they are not compiled but are simply interpreted. If during interpretation the web browser
doesn’t understand a particular element instruction or is unable to perform it, for whatever
reason, then the element is simply ignored. No error message will be displayed.
- 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 or elements which are always enclosed in angle brackets <>
- Tags in HTML are not case sensitive.
- In HTML there are two types of tags, container or open 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.
- Start tag switches format on
- End tag switches format off
- Start tag <>
- End tag </>
- Example <I> text </I>
- switches italics on and off
- Tag names are not case sensitive
- – but use upper case
- Cannot have spaces after <
- < I> is not <I>
- Can have spaces and other text before >
- Start tags can have attributes
- <tag name attribute name>
- <tag name attribute name=“argument”>
- Tags can be intermixed with text

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.

4.2 Software to create Web pages

To create a web page we need a text editor which can save files as ASCII text. Any editor
e.g. MS Word will do but the preferred editor is notepad

4.3 Naming Conventions

There are a number of naming conventions which should be adhered to when creating Web
pages. Web pages should be identified by use of the extension .html.
The html language supports a limited number of graphics formats. The most commonly used
among these are;
i. Graphics interchange format (.GIF)
ii. JPEG compressed files. (.JPEG or .JPG) extension.
Various other file formats have standard filename extensions, some of the common ones include:
i. .MPG - Em-peg movie file
ii. .mpeg – Em-peg movie file
iii. .WAV – Wave sound file
iv. .TXT – Text file
 v. .EXE – DOS executable file
vi. .ZIP – DOS compressed zipped file
vii. .Z – UNIX compressed file
viii. .EPS – Encapsulated Postscript file

4.4 Introduction to the heading Section

The heading section of a HTML document contains general information about the document.
Such information includes the title of the document, its relationship to other documents, whether
it is a searchable index or not. Information in the Heading section is not displayed in the main
hypertext window. Examples of elements in the heading section;
4.4.1 <TITLE> - This element defines the title of the HTML document. This is
displayed by many browsers, on the top title bar of the application window.
4.4.2 <ISINDEX> - This element indicates whether the Web document is
searchable. It’s not used often.
4.4.3 <NEXTID> - This element is used to supply certain web page creation
programs with a unique identification number when editing a suite of Web
documents. . It’s not used often.
4.4.4 <LINK> - This element allows a relationship to be defined between
documents which are similar in a Web system.
4.4.5 <BASE> - This element allows the Base URL of the document to be recorded.
The base URL is the original location of the document system.
4.4.6 Comments can be inserted into a HTML document anywhere but it is
recommended that they be inserted in the heading section of the document and
define the name of the document, who created it and when it was written, as a
minimum amount of information. Comments are not displayed by the web
browser and are included for information only.
Example on how to use comments
<HTML>
<HEAD>
<!- -this is my first page- ->
<!--html is easy to use and understand-->
</HEAD>
<BODY>
The text of the page goes here
</BODY>
</HTML>

4.5 Structure of a HTML Document

<HTML>
<HEAD>
<TITLE> title text goes here </TITLE>
</HEAD>
<BODY>
The text of the page goes here
</BODY>
 </HTML>

4.6 Exercise
1. Illustrate the use of the <Title> tag in HTML document.

2. Design an HTML document with the elements of the heading section discussed above.
Note that all the elements are open or container tags (elements) and must have their
corresponding closing tags.

Lesson 5: Simple Text formatting

5.1 Introduction to the BODY Section

In this lesson we will introduce a number of basic HTML elements which effect the display and
formatting of text within the Body section of the HTML document.
The majority of HTML elements are placed in the BODY section of the document.
These elements define how the HTML document should be displayed. Each of the
elements in the BODY section can be thought of as a request to the web browser
to format the web page in a certain way.
Web browsers differ in their ability and run in a variety of ways.

5.2 Paragraphs
The element <P> is used to instruct the web browser to place the text that follows it on a new
paragraph, i.e. it inserts a blank line between paragraphs and aligns the text with the left side of
the web browser window. The <P> element is both an empty and an open type.
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

Example

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<P>Hello world!</P>

</BODY>
</HTML>

5.3 Forcing a new line break

The element <BR> is used to move the text that follows it to a new line on your web page. No
blank line is inserted between the previous line and the new one. The <BR> element is a empty
element. Any number of <BR> elements can be placed in a row. This provides the ability to
insert any number of lines between paragraphs of text, consider

<HTML>

<HEAD>

<!--Example of the line break element -->

</HEAD>

<BODY>
This text forms the first paragraph of my document.
<BR>
This text starts on a new line. Notice that there is no space between this line and the previous one.
<BR>
<BR>
This text is on a another new line. There are two line break elements above this text.
<BR>
<BR>
<BR>
This line has three line break elements above it.
</BODY>

</HTML>

5.4 Inserting Section Heading

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>
<H1> This is Heading 1 </H1>
<H2> This is heading 2 </H2>
<H3> This is heading 3 </H3>
<H4> This is heading 4 </H4>
<H5>This is heading 5 </H5>
<H6>This is heading 6 </H6>

The bulk of the page goes here

</BODY>
</HTML>
 5.5 Preformatted Text

The <PRE> element stands for predefined text and is an open element. Text in between the
opening tag of <PRE> and closing tag, displays text as typed by the user.

5.6 Block quote Text

The <BLOCKQUOTE> element allows us to format some normal text as though it were a
quotation. It requires a closing element.

5.7 Address Text

The open <ADDRESS> element is used to define some text as being an address, signature and
/or authorship. This element is often found at the top or bottom of a document. It implies a
paragraph break before and after, its normally rendered in an italic typeface.

5.8 Physical Text Characteristics

Html has two types of styles for individual words or sentences.
(i) Physical styles
(ii) Logical styles

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 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>

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.

Example
<HTML>
<HEAD>
<TITLE> My Web Page </TITLE>
</HEAD>
<BODY>
<H1> Example HTML Source </H1>
<P>This is <I >my</I> first web page</P>
The next two words <B> are bold </B><BR>
<U> This text is underlined</U><BR>
Now back to unformatted text<BR>
<EM>emphasis <STRONG>emphasis and strong <STRIKE>emphasis,
strong and strikeout
</STRIKE></STRONG></EM>
</BODY>
</HTML>

5.9 Logical Text Characteristics

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

5.10 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
&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 than
&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.

5.11 Exercises
 1. Write a paragraph about your family. Create a web page which will display this
paragraph. Each family member should have a heading, between H1 to H6.
2. Prepare a two-paragraph text about your house. In this paragraph, mention that your
house has a garden, drawing room, two bedrooms, etc. Develop an HTML document
which displays these two paragraph in such a way that each room beomes apage of its
own e.g. garden.html, drawing.html, kitchen.html

Lesson 6: Further Text formatting

6.1Centering

The element <CENTER> is used to specify that text, graphics and tables should centred on the
browser window. The <CENTER> element is an open element. The <CENTER> element
implies a <BR> element before and after.

Example:
<HTML>

<HEAD>

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

<!--Example of Centering -->

</HEAD>

<BODY>
This text is not centered
<CENTER>
This text is centered
</CENTER>
This text is not

</BODY>

</HTML>

6.2 Marquee

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.
Example
<HTML>
<HEAD>
<TITLE> My Web Page </TITLE>
</HEAD>
<BODY>
<marquee behavior= alternate bgcolor= "white" hspace= 2 vspace="4" >Some text
here </marquee>
</BODY>
</HTML>

6.3 No Breaks
The open <NOBR> element is used to specify that the text it surrounds cannot have any line
breaks inserted by the web browser. This means that even if the screen is resized during
viewing that the line will not be wrapped.
Format:
<NOBR>
Text
</NOBR>

6.4 Word Breaks

The closed element <WBR> stands for word breaking and is used to define where a line
break is required. It is not a commonly used element.

6.5 Base Font Size

The empty element <BASEFONT> allows you to change the size of the standard text on the
Web page displayed. The element is closed and has a single attribute SIZE which has a valid
range of 1-7, with a default of 3. This element is closely linked to the element <FONT
SIZE>. The <BASEFONT> element can be inserted multiple times into a single HTML
document, but is more commonly only inserted once at the beginning of the <BODY>
section.

Example;
<HTML>
<HEAD>
 <!—example of basefont size-->
</HEAD>
<BODY>
<BASEFONT SIZE=5>
The text here is size five
</BODY>
</HTML>

6.6 Font Size

The open element <FONT> allows the size of the text on the page to be altered.

<BASEFONT SIZE=4>
This paragraph shows some of the font styles available <BR>
<FONT SIZE=1>size1 </FONT>
<FONT SIZE=3>size3 </FONT>
<FONT SIZE=5>size5 </FONT>
<FONT SIZE=7>size7 </FONT> <BR>
Back to base font size<BR>
<FONT SIZE=5 COLOR=red>red </FONT>
<FONT SIZE=6 COLOR=blue>blue </FONT>
<FONT SIZE=7 COLOR=green>green </FONT><BR>
Back to base font
</BODY>
</HTML>

6.7 Exercises

Design a web page of your town and favorite friend using the elements discussed in this chapter.

Lesson 7: Colours and Textures

7.1 Introduction
This section will exam changing the colours of the text and background of the web pages,and the
use of textured wallpapers.

7.2 Background Color

BGCOLOR is used to change the color of the background window. The BGCOLOR attribute
uses hexadecimal or name of the color. The following example contains the hexadecimal
numbers and there corresponding color names.

Example Colours
Black = "#000000"
Lime = "#00FF00"
Green = = "#008000"
Olive = "#808000"
Yellow = "#FFFF00"
Navy = "#000080"
Blue = "#0000FF"
Teal = "#008080"
Aqua = "#00FFFF
Silver = "#C0C0C0"
Grey = "#808080"
White = "#FFFFFF"
Maroon = "#800000"
Red = "#FF0000"
Purple = "#800080"
Fuchsia = "#FF00FF

Example Format;
<HTML>
<HEAD>
<!--Example of changing background colour-->
</HEAD>
<BODY BGCOLOR=”#800080”>
This web page has a purple background!
</BODY>
</HTML>

7.3 Text and Hyperlink Colours

Once the background color has been changed it may be necessary to change the text color. The
<BODY> element supports the following attributes;
7.3.1 TEXT this is used to control the colour of all the normal text in the document
which defaults to black.
7.3.2 LINK, VLINK and ALINK enable you to control the colouring of a hypertext
link. VLINK stands for visited link and ALINK for active link, the default
colours for these are blue, purple and red.
<HTML>
<HEAD>
<!--Example of Text colours-->
</HEAD>
<BODY BGCOLOR=”#FFFF00”TEXT=”#FF0000”LINK=”#00FF00”>
This web page has a yellow background and red text!
<AHREF=”trainer/foo.bar”>This link doesn’t go anywhere!</A>
</BODY>
</HTML>
 7.4 Background Wallpaper
In as much as you can put wallpaper in MS Windows, so can you put a wallpaper in
your web page. The <BODY> element has BACKGROUND attribute which is used to
define the background image to be used on the page. The BACKGROUND attribute
should be set to point to the URL (location) of the image to be used as the wallpaper.

Example
<HTML>
<HEAD>
<!--Example of Text colours-->
</HEAD>
<BODY BACKGROUND=”trainer/backlogo.gif”>
This web page has a wallpaper background.
</BODY>
</HTML>

7.5 Exercises
7.5.1 Write a note on colour combinations and designing colours using the three
primary colours.
7.5.2 What is the use of the text attribute in the <BODY> tag?
7.5.3 Design a document describing you. Assign a suitable background wallpaper,
background colour and a text colour.

Lesson 8: Listing
8.10 Introduction to Lists
This section will introduce you to the concept of lists. A list is a sequence of items, each
displayed on a separate line and may be indented from the left margin. Lists can either be
numbered or bulleted.

8.11 Unordered List

The open elements<UL> is used to define a list of items which are on separate lines and
marked with a bullet. The empty element <LI> is used to define each item within the list.
<UL>
<LI> first list item
<LI> second list item etc.
</UL>

8.12 Unordered List (Type)

Unordered list can be of
TYPE = disc
TYPE = circle
TYPE = square
Example;
<HTML>
<HEAD>
<TITLE> My Web Page </TITLE>
</HEAD>
<BODY>
<UL TYPE="square">
<LI> first list item
<LI> second list item
</UL>
</BODY>
</HTML>
Example of nested unordered list
<HTML>
<HEAD>
<TITLE> example of nested UL </TITLE>
</HEAD>
<BODY>
<UL>
<LI> first item in the list
<LI> second item in the list
<UL TYPE="square">
<LI> first list item
<LI> second list item
</UL>
</UL>
</BODY>
</HTML>

8.13 Ordered List

The <OL> element is used to define a numbered list of items. It also uses <LI>

8.14 Ordered List (Type Start)

<OL Type="type" START=number>
Type can be:
1 uses numbers (default)
a uses lower case letters in sequence
A uses upper case letters in sequence
i uses lower case Roman numbering i.e. i ii iii iv etc
I uses upper case Roman numbering i.e. I II III IV etc.
Number defines the starting number or letter
Example
<HTML>
<HEAD>
<TITLE> My Web Page </TITLE>
</HEAD>
<BODY>
<OL TYPE=“a" START=3>
<LI> first list item
 <LI> second list item etc.
</OL>
</BODY>
</HTML>
8.15 Menu Lists
Menu lists are specified with the <MENU> element and are a form of unordered list. A menu list
is a list of items which are supposed to have only one line per item.
<HTML>
<HEAD>
<TITLE> example of nested UL </TITLE>
</HEAD>
<BODY>
<menu>
<LI> first item in the list
<LI> second item in the list
<menu TYPE="square">
<LI> first list item
<LI> second list item
</menu>
</menu>
</BODY>
</HTML>

8.16 Directory Lists

The <DIR> element is used to format a list of items up to 20 characters in length. This is
basically a unordered list.
<HTML>
<HEAD>
<TITLE> example of nested DIR </TITLE>
</HEAD>
<BODY>
<DIR>
<LI> first item in the list
<LI> second item in the list
<DIR TYPE="square">
<LI> first list item
<LI> second list item
</DIR>
</DIR>
</BODY>
</HTML>

8.17 Definition Lists

A definition list is a list of terms and corresponding definitions. The element<DL> is used to
define a definition list. <DT> the term and <DD> the definition.
<HTML>
 <HEAD>
<TITLE> My Web Page </TITLE>
</HEAD>
<BODY>
<DL>
<DT> definition term
<DD> definition etc.
</DL>
</BODY>
</HTML>
8.18 Exercises
Do the following exercise so that the outcome is as displayed.

EAST AFRICA COUNTRIES AND

CITIES
1.KENYA
i. Nairobi
ii. Kisumu
iii. Mombasa
2. UGANDA
a. Entebe
b. Kampala
c. Tororo
3. TANZANIA
 Dar es salam
 Arusha
 Moshi

Lesson 9: Graphical Images

9.7 Introduction to Graphical Images
This section will introduce the concept of graphical images and how to include them in web
documents.

9.8 Horizontal Rule

The closed <HR> element is used to define a horizontal rule. A horizontal rule is a horizontal
graphical line drawn across the screen. A <BR> element is assumed below and above the line.
The <HR> element has the following attributes;
SIZE- an indication of the line thickness
<HR SIZE-num>
WIDTH – An indication of the width of the line across the screen.
It can be in pixels or as a percentage of the width of the web page.
<HR WIDTH=num/percentage>
ALIGN – The alignment of the line. This specifies whether the line should be aligned to the left,
right or centered.
NOSHADE – The line should not be shaded. This instructs the browser to display the lines as a
solid black line.
 9.9 In-Line Images
The <IMG> element is used to incorporate images into web pages. Images are stored as separate
files from the textual HTML document and are loaded and inserted where applicable.
Graphical images are usually stored in either GIF or JPEG format. The <IMG> element supports
the following attributes;
SRC - The name and location of the image to be embedded.
ALIGN – The alignment of the image to the document text. This allows you to specify whether
the image is aligned at the top, bottom or middle of any text on the same line as the image.
ALT – Alternative text to be displayed if the graphic is not.
ISMAP – Defines the images as being a clickable map.

9.10 Setting an Image Border

It is possible to give a border of desired thickness to images. This is done using the border
attribute in the <IMG> tag. The thickness of the border may be from 1 pixels to 10 pixels. For
example, when we write <IMG SRC=“elephant.gif” border=”5”> the picture is shown with a 5
pixel thick border. This is illustrated in the following example
<html>
<head>
<title> Elephant </title>
</head>
<body bgcolor= “aabbcc” text=”001100”><CENTER>,
<img src=”elephant.gif” align=center width=250 height=175
border=10></img>
<hr>
</body>
</html>

9.11 Break (enhanced)

<BR> element can take the attribute CLEAR with the values LEFT, RIGHT or ALL.
<BR CLEAR=LEFT/RIGHT/ALL>

9.12 Exercises
1. Design a web page of an international leader with an appropriate color combination..
Design it with suitable headings and horizontal rules.
2. Design a web page of your favorite town with images of what it looks like.

Lesson 10: Hyperlinks

 10.12 Introduction to Hyperlinks
This section of the course will examine some of the features of hypertext links and how these can
be combined with graphical images.

10.13 Internal Hyperlinks

Assign location name to individual point in an HTML file
Location name can then be added to the page’s URL
Link to specific point on the page
Location marked by including a NAME attribute in an A (anchor) element
Ex. <A NAME = “features”></A> in list.html
URL of location
Format: page.html#name
Ex. list.html#features

A hot text is created with an anchor tag <A>text</A>.

Format: <A HREF=”college.html”>St Xavier’s College</A>

10.14 External Hyperlinks

<A HREF> is used to connect to an external link.

10.15 An external Hyperlinks to an existing web page

It is possible to create hyperlinks to pages on other servers. This allows you to share the
resources and information already available on other internet sites. The element <A> is
used with attribute HREF to form a link to an existing web site page.
Format: <A HREF=”location and name”>…</A>

10.16 In-Line Images as Links

The <A> text </A> hyperlink element is placed around text in order to form a hypertext link.
Clicking on the image will result in the hyperlink being activated.
Format: <A HREF=”location and file name”><IMG SRC=”name and location”></A>

10.17 Hyperlinks to Mail Dialogues

The <A> element can link to mail tool instead of another web page.
Format: <A HREF=mailto:name@location>….</A>

10.18 Hyperlinks to Newsgroup Dialogues

The <A> hyperlink element can link to a newsgroup dialogue, instead of another web page.
Format: <A HREF=news:news.group>…..</A>

10.19 Hyperlinks to Files

Hyperlinks can point to files on a server as well as web pages, mail and news group tools.
Format: <A HREF=”/directory/myprog.exe”>

10.20 Embedding Files

The <EMBED> element allows you to embed document of any type into the page.
Format: <EMBED SRC=”location and name”>
 <EMBED SRC=”location and name” HEIGHT=num1 WIDTH=num2>

10.21 Clickable Maps

A clickable map is the name given to an in-line image which has been defined as a clickable
region. ISMAP is added to make the image clickable.
Format: <IMG SRC=”name and location” ISMAP>

10.22 Creating and Using Image Maps

• Image maps
– Designate certain sections of an image as hotspots
– Use hotspots as anchors for linking
– All elements of image map inside <MAP>…</MAP> tags
– <MAP> tag requires NAME attribute
• Ex. <MAP NAME = “picture”>
• Hotspots designated with AREA element
– AREA attributes:
• HREF sets the target for the link on that spot
• SHAPE and COORDS set the characteristics of the AREA
ALT provides alternate textual description

10.23 Exercise

Write the names of several countries in a paragraph and store it as an HTML document,
“world.html”. Each continents name must be a hot text. When you click Europe, it should open a
file called “Europe.html”. So prepare “Europe.html”,” America.html”, “Africa.html”,”
Asia.html” and “Australia.html”. Each of the HTML documents must give a brief introduction of
the continent and list a few important countries in it. Each country’s name must be a hot text.
When you click India (for example), it must open “India.html”

Lesson 11: Forms

11.1 Introduction to Forms

A form is a web page which uses HTML form elements. Form elements provide a convenient
method to collect user input through a web page.

11.2 Basic Form elements

The <FORM>…</FORM> element is used to define the start and end of a form in a document.
There can be several forms on a page; however forms should not be nested. The <FORM>
element has two attributes:
1. ACTION ; This attribute defines the URL of the program that will receive and process
the data submitted on the form. All forms need to be linked to a program in order that
their data can be processed.
2. METHOD; This attribute defines the method in which the data will be transmitted to the
server. METHOD can take one of these values POST or GET. With the default method
being GET.
Format: <FORM METHOD=POST|GET ACTION=”name and location”>
 </FORM>
Example 1
Example of Form
<HTML>
<HEAD><!—Example of form element-->
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=“location and file name”>
This is a blank form!
</FORM>
</BODY>
</HTML>

11.3 Basic Form Input

HTML provides a number of different form fields who’s contents can be edited by the user. The
<INPUT> element is used to specify the majority of these. <INPUT> elements have an attribute
value which can be one of the following types:
i. CHECKBOX
ii. HIDDEN
iii. PASSWORD
iv. RADIO
v. RESET
vi. SUBMIT
vii. TEXT

11.4 Submit and Reset

All forms require a SUBMIT and RESET button. These produce a button on the screen which
the user can click on to transfer data on the form to the server program. While RESET clears the
any data entered on the form.
Example 2
<HTML>
<HEAD><!—Example of submit and reset-->
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=“location and file name”>
This is my form!
<input type=submit value=“send information” name=“submit”> <br>
<input type=reset value=“clear the form” name=“reset”
</FORM>
</BODY>
</HTML>

11.5 Checkbox Fields

If the <INPUT> element has the attribute set to CHECKBOX then a checkbox field is generated.
A checkbox can take the following attribute:
i. NAME is the unique name of the checkbox field.
ii. VALUE the data sent to the program is contained within the VALUE attribute.
iii. CHECKED is used to set whether a checkbox is selected.
Example 3
<HTML>
<HEAD><!—Example of checkbox-->
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=“location and file name”>What do you think
about forms<p>
<input type=checkbox Name=Fun value=Y>
This course is fun <p>
<input type=checkbox Name=Tutor value=Y CHECKED>
The tutor is great<BR>
<input type=checkbox Name=Home value=Y>
I want to go home<BR>
<input type=Submit value=“send information”> <BR>
<input type=Reset value=“clear form”>
</FORM>
</BODY>
</HTML>

11.6 Radio Button Fields

If the input element has the attribute set to RADIO a radio button field is generated. RADIO is
used when you wish to accept a single value from a set of alternatives. It takes the attributes,
NAME, VALUE, CHECKED.
Example 4
<HTML>
<HEAD> <!—Example of radio button-->
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=“location and file name”>What What is your
favourite colour <p>
<INPUT TYPE=RADIO NAME=COLOUR value=RED> Red <BR>
<INPUT TYPE=RADIO NAME=COLOUR value=GREEN> Green <BR>
<INPUT TYPE=RADIO NAME=COLOUR value=BLUE> Blue <BR>
<INPUT TYPE=RADIO NAME=COLOUR value=YELLOW> Yellow<BR>
<INPUT TYPE=RADIO NAME=COLOUR value=WHITE> White<BR>
<INPUT TYPE=SUBMIT VALUE=“send information”> <BR>
<INPUT TYPE=RESET VALUE=“clear form”>
</FORM>
</BODY>
</HTML>
 11.7 Text Fields
Text fields are used when you wish to accept a line of typed text, such as a person’s name. A text
field takes the attributes; NAME, VALUE, SIZE, MAXLENGTH.
Example 5
<HTML>
<HEAD> <!—Example of a text field-->
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=“location and file name”>
Please enter your name
<p>
<INPUT TYPE=TEXT NAME=NAME SIZE=30>
<BR>
<INPUT TYPE=SUBMIT VALUE=“send information”> <BR>
<INPUT TYPE=RESET VALUE=“clear form”>
</FORM>
</BODY>
</HTML>

11.8 Password Fields

These are identical to text field, except the text is displayed as **** as it is entered.
Example 6
<HTML>
<HEAD> <!—Example of a text field-->
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=“location and file name”>
Please enter your name
<p>
<INPUT TYPE=PASSWORD NAME=NAME SIZE=30>
<BR>
<INPUT TYPE=SUBMIT VALUE=“send information”> <BR>
<INPUT TYPE=RESET VALUE=“clear form”>
</FORM>
</BODY>
</HTML>

11.9 Hidden Fields

Hidden fields are used to embed data into a form without the user being aware of it.

11.10 Text Area Fields

The <TEXTAREA>…</TEXTAREA> element is used to enable a user enter in more than one
line of text. It takes three attributes i.e, NAME, ROWS and COLS.
Example 7
<HTML>
<HEAD> <!—Example of a textarea field-->
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=“location and file name”>

<TEXTAREA NAME=MESSAGE ROWS=5 COLS=50>

Please enter your message here!
</TEXTAREA>
<BR>
<INPUT TYPE=SUBMIT VALUE=“send information”>
<BR>
<INPUT TYPE=RESET VALUE=“clear form”>
</FORM>
</BODY>
</HTML>

11.11 Menu Fields

Pull down menus can be created through the open element <SELECT>…</SELECT>. Every
option in this list is defined using a <OPTION> element. The <SELECT> element can take the
attributes MULTIPLE, NAME, SIZE.
Example 8
<HTML>
<HEAD> <!—Example of MENU field-->
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=“location and file name”>
Please select your favourite colours:
<BR>
<SELECT NAME=MENU MULTIPLE SIZE=5>
<OPTION > Red
<OPTION > White
<OPTION SELECTED > Orange
<OPTION > Blue
<OPTION > Yellow
<OPTION > Green
</SELECT>
<BR>
<INPUT TYPE=SUBMIT VALUE=“send information”>
<BR>
<INPUT TYPE=RESET VALUE=“clear form”>
</FORM>
</BODY>
 </HTML>

11.12 Exercise
Write an HTML code to design the following information;
i. Are you a vegetarian or a non-vegetarian?
 Vegetarian
 Non-vegetarian
ii. What is your profession?
 Teaching
 Research
 Medicine
 Engineering
 Clerical
 Business
 Other
iii. Type your comments on our food items. ( use textarea field)

Lesson 12: Tables

12.1 Introduction to Tables
A table is a convenient way of displaying text, graphics or a combination of both in rows and
columns.
Advantages
– control over text layout
– easy to use
Disadvantages
– not all browsers can display
– over-use can cause problems
– non graphical browsers may have serious problems

12.2 Heading Cells

The <TH> element stands for table header. Header cells are identical to data cells, except that
they are in bold font and to the center of the cell.
Format: <TH> text </TH>
<HTML>
<HEAD><TITLE> EXAMPLE OF TABLE</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION ALIGN=TOP>Information on Cars</CAPTION>
<TR><TH>Car</TH><TD>Ferrari</TD><TD>Toyota</TD><TD>Nissan</TD>
</TR>
<TR><TH>Cost</TH><TD>$70000</TD><TD>$40000</TD><TD>$20000</TD>
 </TR>
<TR><TH>Colour</TH><TD>Red</TD><TD>Blue</TD><TD>White</TD>
</TR>
</TABLE>
</BODY>
</HTML>

12.3 Adding Captions

The <CAPTION>..</CAPTION> should appear within the <TABLE> elements but not inside
any row or cell definitions. It has attribute ALIGN.
Format: <CAPTION ALIGN=TOP|BOTTOM>text </CAPTION>
<HTML>
<HEAD><TITLE> EXAMPLE OF TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 CELLSPACING=3 CELLPADDING=2 WIDTH=80%>
<CAPTION ALIGN=TOP>Information on Cars</CAPTION>
<TR><TH>Car</TH><TD>Ferrari</TD><TD>Toyota</TD><TD>Nissan</TD>
</TR>
<TR><TH>Cost</TH><TD>$70000</TD><TD>$40000</TD><TD>$20000</TD>
</TR>
<TR><TH>Colour</TH><TD>Red</TD><TD>Blue</TD><TD>White</TD>
</TR>
</TABLE>
</BODY>
</HTML>

12.4 Altering the look of the table

The <TABLE> element has the following attributes:
a. BORDER this instructs the browser to display the table with borders around all table
cells.
b. CELLSPACING=num allows the amount of space inserted between individual cells to be
altered.
c. CELLPADDING=num allows the amount of space between the border of a cell and the
contents of the cells to be altered.
WIDTH=num or percent. It is used to define the desires width of the table

<HTML>
<HEAD><TITLE> EXAMPLE OF TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION ALIGN=TOP>Information on Cars</CAPTION>
<TR ALIGN=RIGHT
VALIGN=MIDDLE><TH>Car</TH><TD>Ferrari</TD><TD>Toyota</TD><TD>
Nissan</TD>
 </TR>
<TR><TH>Cost</TH><TD>$70000</TD><TD>$40000</TD><TD>$20000</TD>
</TR>
<TR><TH>Colour</TH><TD>Red</TD><TD>Blue</TD><TD>White</TD>
</TR>
</TABLE>
</BODY>
</HTML>
12.5 Altering the look of the Table Row
The <TR> element can use both ALIGN and VALIGN

12.6 Altering the look of a Table Cell

The <TH> heading and <TD> data elements use the following attributes:
a. ALIGN, this controls whether text inside the table cell is aligned to the left, right or
centred within the cell.

b. VALIGN, controls whether text inside the table cell is aligned to the top, bottom or
vertically centred.

c. NOWRAP, this means that the lines within a cell cannot be broken to fit the width of the
cell.
d. COLSPAN, specifies how many columns the cell should span.
e. ROWSPAN, Specifies how many rows the cell should span.

<HTML>
<HEAD><TITLE> EXAMPLE OF TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION ALIGN=TOP>Information on Cars</CAPTION>
<TR ><TH COLSPAN=2
ALIGN=CENTER>Car</TH><TD>Ferrari</TD><TD>Toyota</TD><TD>Nissan<
/TD>
</TR>
<TR><TH VALIGN=MIDDLE ROWSPAN=2>Cost</TH><TD
ALIGN=RIGHT>$70000</TD><TD>$40000</TD><TD>$20000</TD>
</TR>
<TR><TH>Colour</TH><TD>Red</TD><TD>Blue</TD><TD>White</TD>
</TR>
</TABLE>
</BODY>
</HTML>

12.7 Nested Tables

Tables can be nested within tables. Consider the following example:
 <HTML>
<HEAD></HEAD>
<BODY>
<TABLE BORDER=1>
<TR ><TD>This</TD><TD>Is</TD></TR>
<TR><TD>the</TD><TD>first</TD></TR>
<TR><TD>
<TABLE BORDER=3>
<TR><TD>This is a nested</TD></TR>
<TR><TD>table!</TD></TR>
</TABLE>
</TD><TD>table</TD></TR>
<TR></TR>
</TABLE>
</BODY>
</HTML>

12.8 Images in Tables

Images can be placed within tables as well as text, consider:
HTML>
<HEAD><TITLE> EXAMPLE OF TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION ALIGN=TOP>Information on Cars</CAPTION>
<TR ><TH COLSPAN=2
ALIGN=CENTER>Car</TH><TD>Ferrari</TD><TD>Toyota</TD><TD>Nissan<
/TD>
</TR>
<TR><TH VALIGN=MIDDLE ROWSPAN=2>Cost</TH><TD
ALIGN=RIGHT>$70000</TD><TD>$40000</TD><TD>$20000</TD>
</TR>
<TR><TH>Colour</TH><TD><IMG SRC=“location&file name.gif”>
</TD><TD>Blue</TD><TD>White</TD>
</TR>
</TABLE>
</BODY>
</HTML>

12.9 Exercise

1. Write an HTML program that produces a table that shows the end of
semester timetable for exams.
2. Write an HTML program for your bio-data using tables.
Lesson 13: Frames
13.1 Introduction to Frames
This lesson looks at the concept of frames that is supported by many browsers and is commonly
used in web sites.

13.2 Frame Documents

A frame document is a web document which specifies the size and shape of each of the frames
on the web page. The frame document also specifies the name and location of the web page to be
displayed in each of the frames. A frame document has a basic structure as shown below:

<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>

13.3 Basic Frame Elements

The <FRAMESET>…</FRAMESET> element is used to define the start and end of a frame
container. The <FRAMESET> element has two attributes. ROWS and COLS. These attributes
take a comma separated list of values in quotation marks. These attributes can be in absolute
pixels or in percentages between 1% - 100%. The special character * can be used to denote a
relative sized frame (the remaining space to the frame).

However, before we can illustrate the use of the <FRAMESET> element we need to be able to
define the URL address of the pages which are to be displayed with these frames. The
<FRAME> element is used to define a single frame within a <FRAMESET>. The <FRAME>
element may occur only inside <FRAMESET> elements.
The <FRAME> element has six attributed:
a. SRC define the URL of the web page to be displayed.
b. NAME allows an individual frame to be named.
c. MARGINWIDTH and MARGINHEIGHT allows space between images and text within
a frame and frame boundary to be adjusted.
d. SCROLLING determines whether a window will be allowed to be scrolled when its
contents are displayed.
e. NORESIZE specifies that the user cannot resize the frames by dragging a frame edge to a
new position.

13.4 Column Frames

<HTML>
<HEAD> <!—Example of column frames-->
</HEAD>
<frameset cols=“100,60%,*”>
<NOFRAMES>
This document uses frames
</NOFRAMES>
<frame SRC=“location and file name” SCROLLING=NO>
<frame SRC=“location and file name”NORESIZE>
<frame SRC=“location and file name”>
</frameset>

</HTML>

13.5 Row Frames

<HTML>
<HEAD> <!—Example of Row frames-->
</HEAD>
<frameset ROWS=“100,60%,*”>
<NOFRAMES>
This document uses frames
</NOFRAMES>
<frame SRC=“location and file name” SCROLLING=NO>
<frame SRC=“location and file name”NORESIZE>
<frame SRC=“location and file name”>
</frameset>

</HTML>

13.6 Combining Column and Row Frames

<HTML>
<HEAD> <!—Example of Row frames-->
</HEAD>
<frameset COLS=“40%,*”>
<NOFRAMES>
This document uses frames
</NOFRAMES>
<frame SRC=“location and file name”>
<frameset ROWS=“20%,*”>
<frame SRC=“location and file name”>
</frameset>

</HTML>

13.7 Exercise
1. Write a set of frames to show your bio-data in a colourful form with suitable links
2. Write a few HTML documents each explaining about a district or county you belong to.
The list of districts must appear in a frame. When you click on a district, the details must
appear in another frame.