Web Design Using Html

WEB DESIGHN
THE NYERI NATIONAL POLYTECHNIC.

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:
Compiled by M/s Wachira 1
Web Design Using Html
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.

Compiled by M/s Wachira 2

Web Design Using Html
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.

Compiled by M/s Wachira 3

Web Design Using Html
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.

Compiled by M/s Wachira 4

Web Design Using Html
- 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.
Compiled by M/s Wachira 5
Web Design Using Html
- 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
Compiled by M/s Wachira 6
Web Design Using Html
- 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.

Compiled by M/s Wachira 7

Web Design Using Html
WEEK 2

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

Compiled by M/s Wachira 8

Web Design Using Html
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.
Compiled by M/s Wachira 9
Web Design Using Html
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)

Compiled by M/s Wachira 10

Web Design Using Html

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
Compiled by M/s Wachira 11
Web Design Using Html
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).

Compiled by M/s Wachira 12

Web Design Using Html
WEEK 3

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.

Compiled by M/s Wachira 13

Web Design Using Html
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"-->

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<P>Hello world!</P>

</BODY>

</HTML>

- COMMENT TAG
The first line of the code usually starts with !. It is usually for commenting and it is an
empty tag. Comment tags do not show up in the browser window. 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.
<!-- This is a comment -->
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.
Compiled by M/s Wachira 14
Web Design Using Html

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

Compiled by M/s Wachira 15
Web Design Using Html
<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>

Compiled by M/s Wachira 16

Web Design Using Html
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.

Compiled by M/s Wachira 17

Web Design Using Html
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
Alignment align the text in the page layout.
The justification tag is <div>…….</div>

Blockquote Forces a paragraph break above and below the text. Used to include
<blockquote>…… lengthy quotations in separate block on the screen. Most browsers
</blockquote> generally change the margins for the quotation to separate it from
the surrounding text.
Preformatted text Used to generate text exactly as typed in including spaces, new
<PRE>….</PRE> 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

Compiled by M/s Wachira 18

Web Design Using Html
&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

Compiled by M/s Wachira 19

Web Design Using Html
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>

Compiled by M/s Wachira 20

Web Design Using Html
WEEK 4

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>
Compiled by M/s Wachira 21
Web Design Using Html
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>

WEEK 5
CHAPTER 6

Compiled by M/s Wachira 22

Web Design Using Html
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.
Compiled by M/s Wachira 23
Web Design Using Html
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
Compiled by M/s Wachira 24
Web Design Using Html

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:[email protected]"> Send me mail</a>

Compiled by M/s Wachira 25

Web Design Using Html
- 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:[email protected]?subject= topic">Greetings</a>
<a href "mailto:[email protected][email protected]>Greetings</a>

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

Compiled by M/s Wachira 26

Web Design Using Html
WEEK 5
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.
Compiled by M/s Wachira 27
Web Design Using Html
<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.

Compiled by M/s Wachira 28

Web Design Using Html
- 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.

Compiled by M/s Wachira 29

Web Design Using Html
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
Compiled by M/s Wachira 30
Web Design Using Html
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.

WEEK 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

Compiled by M/s Wachira 31

Web Design Using Html
<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.

Compiled by M/s Wachira 32

Web Design Using Html
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.

WEEK 6
CHAPTER 8

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
Compiled by M/s Wachira 33
Web Design Using Html
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.

Compiled by M/s Wachira 34

Web Design Using Html
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.
Compiled by M/s Wachira 35
Web Design Using Html

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>
<TD> Row 2 Col 2 </TD>
</TR>
</TABLE>

Spanning Rows and Columns

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

COLSPAN = number
This is an attribute that specifies the number of columns spanned by the current cell. The
value 0 means that cells span all columns from the current column to the last column of
the column group. Cells may span several columns.
e.g
<TABLE BORDER =1>
Compiled by M/s Wachira 36
Web Design Using Html
<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>
<TD> Row 2 Col 1 </TD>
<TD> Row 2 Col 2 </TD>
</TR>
</TABLE>
Compiled by M/s Wachira 37
Web Design Using Html

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>
Compiled by M/s Wachira 38
Web Design Using Html

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.

Compiled by M/s Wachira 39

Web Design Using Html
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.

Compiled by M/s Wachira 40

Web Design Using Html
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
Compiled by M/s Wachira 41
Web Design Using Html
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>
Compiled by M/s Wachira 42
Web Design Using 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.
Compiled by M/s Wachira 43
Web Design Using Html
- 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.

Compiled by M/s Wachira 44

Web Design Using Html
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
Compiled by M/s Wachira 45
Web Design Using Html
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:[email protected]" 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:[email protected] METHOD="POST" ENCTYPE
="TEXT/PLAIN">
FORM CONTENTS
</FORM>
<FORM ACTION =http://amarco.co.ke/mg/aserver METHOD ="POST">
FORM CONTENT
</FORM>

Compiled by M/s Wachira 46

Web Design Using Html
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
Compiled by M/s Wachira 47
Web Design Using Html
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.
Compiled by M/s Wachira 48
Web Design Using Html
<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.

Compiled by M/s Wachira 49

Web Design Using Html
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 [email protected]>

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.

Compiled by M/s Wachira 50

Web Design Using Html
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>

Compiled by M/s Wachira 51

Web Design Using Html

STRUCTURAL DEFINITION
Heading <H?></H?> (the spec. defines 6 levels)
Align Heading <H? ALIGN=LEFT|CENTER|
Compiled by M/s Wachira 52
Web Design Using Html
RIGHT></H?>
Division <DIV></DIV>
Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
4.0 Defined Content <SPAN></SPAN>
<BLOCKQUOTE></
Block Quote 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 <STRONG></STRONG> (usually displayed as bold)
Emphasis
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>
(marks additions in a new
4.0 Insert <INS></INS>
version)
<INS
4.0 Time of Change DATETIME=":::"></INS>
4.0 Comments <INS CITE="URL"></INS>
(marks deletions in a new
4.0 Delete <DEL></DEL>
version)
<DEL
4.0 Time of Change 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)

Compiled by M/s Wachira 53

Web Design Using Html
<FONT
Change Font Size SIZE="+|-?"></FONT>
<FONT COLOR="#$$$$$
Font Color $"></FONT>
<FONT
4.0* Select Font FACE="***"></FONT>
<FONT POINT-SIZE=?
N4 Point size ></FONT>
<FONT
N4 Weight WEIGHT=?></FONT>
4.0* Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)
MS Marquee <MARQUEE></MARQUEE>

Compiled by M/s Wachira 54