IP1 Module With Reviewers

WACHEMO UNIVERSITY
COLLEGE OF ENGINEERING AND TECHNOLOGY

SCHOOL OF COMPUTING AND INFORMATICS
DEPARTMENT OF INFORMATION SYSTEMS
COURSE MODULE
INTRODUCTION TO INTERNET PROGRAMMING

(INSY3081)
COMPILED BY
MESELE WORKU (MSc)
REVIEWED BY
GETNET ASSEFA (MSc)
SAMUEL MULATU (MSc)
[HOSSANA, ETHIOPIA]
[FEBRUARY,2022]
TABLE OF CONTENTS
TITLE PAGE NO.
CHAPTER 1 ............................................................................................................................................................... 5
THE FUNDAMENTALS ........................................................................................................................................ 5
OBJECTIVES ............................................................................................................................................................. 5
UNIT STRUCTURE ............................................................................................................................................... 5
INTRODUCTION ................................................................................................................................................... 6
1.1. INTERNET HISTORY, USES AND SERVICES ...................................................................................... 6
1.2. TCP/ IP PROTOCOLS ................................................................................................................................. 20
1.3. HTTP REQUEST MODEL.......................................................................................................................... 23
UNIT SUMMARY ................................................................................................................................................. 27
TEST YOURSELF .................................................................................................................................................. 27
CHAPTER 2 ............................................................................................................................................................ 29
WEB DESIGN AND DEVELOPMENT ............................................................................................................ 29
OBJECTIVE ............................................................................................................................................................. 29
UNIT STRUCTURE ............................................................................................................................................. 29
INTRODUCTION ................................................................................................................................................. 30
2.1. GATHERING REQUIREMENTS ............................................................................................................ 36
2.2. INFORMATION ORGANIZATION AND ARCHITECTURE ......................................................... 37
2.3. INFORMATION VISUALIZATION ........................................................................................................ 38
UNIT SUMMARY ..................................................................................................................................................41
TEST YOUR SELF ..................................................................................................................................................41
CHAPTER 3 ............................................................................................................................................................ 42
INTRODUCTION TO HYPER TEXT MARKUP LANGUAGE (HTML) ............................................... 42
OBJECTIVES ........................................................................................................................................................... 42
UNIT STRUCTURE ............................................................................................................................................. 42
INTRODUCTION ................................................................................................................................................. 43
3.1. INTRODUCTION TO MARKUP LANGUAGES ................................................................................. 43
3.2. THE HTML DOM (DOCUMENT OBJECT MODEL) ........................................................................ 52
3.3. HEADINGS, PARAGRAPH AND BREAKS ........................................................................................... 57
3.4. FORMATTING TEXT ................................................................................................................................. 60
3.5. WORKING LISTS ........................................................................................................................................ 63
3.6. WORKING WITH GRAPHICS ............................................................................................................... 70
DEPARTMENT OF INFORMATION SYSTEMS 2

3.7. ANCHORS, URLS AND IMAGE MAPS ................................................................................................. 72

3.8. HTML TABLES ............................................................................................................................................. 73
3.9. HTML FRAMES ........................................................................................................................................... 79
3.10. HTML FORMS ......................................................................................................................................... 87
3.11. ACTIVEX OBJECTS AND APPLETS .................................................................................................. 99
3.12. SPECIAL HTML ELEMENTS .............................................................................................................. 101
3.13. PAGE LAYOUT AND DESIGN CONSIDERATIONS ................................................................... 108
UNIT SUMMARY ................................................................................................................................................ 110
TEST YOUR SELF ................................................................................................................................................. 111
CHAPTER 4 ........................................................................................................................................................... 113
CASCEDING STYLE SHEETS (CSS) ............................................................................................................... 113
OBJECTIVES .......................................................................................................................................................... 113
UNIT STRUCTURE ............................................................................................................................................ 113
INTRODUCTION ................................................................................................................................................ 114
4.1. CSS BASICS................................................................................................................................................... 114
4.2. STYLE SHEET RULES ............................................................................................................................... 115
4.3. CSS SELECTORS......................................................................................................................................... 117
4.4. STYLE PROPERTIES .................................................................................................................................. 118
4.5. FONT AND TEXT PROPERTIES ............................................................................................................ 119
4.6. FOREGROUND AND BACKGROUND PROPERTIES ................................................................... 126
4.7. LAYOUT AND POSITIONING PROPERTIES.................................................................................... 127
4.8. TYPE OF CSS STYLES............................................................................................................................... 130
4.9. STYLE INHERITANCE.............................................................................................................................. 131
4.10. STYLE RULES PRECEDENCE ........................................................................................................... 134
4.11. STYLE SHEET LAYERS........................................................................................................................ 150
UNIT SUMMARY ................................................................................................................................................ 151
TEST YOURSELF ................................................................................................................................................. 151
CHAPTER 5 ........................................................................................................................................................... 153
CLIENT-SIDE SCRIPTING LANGUAGE ...................................................................................................... 153
OBJECTIVES .......................................................................................................................................................... 153
UNIT STRUCTURE ............................................................................................................................................ 153
INTRODUCTION ............................................................................................................................................... 154
5.1. INTRODUCTION ...................................................................................................................................... 154
5.2. CLIENT-SIDE SCRIPTING USING JAVASCRIPT ........................................................................... 156

5.3. DYNAMIC HTML (DHTML)...................................................................................................................175

UNIT SUMMARY ................................................................................................................................................ 178
TEST YOURSELF ................................................................................................................................................. 178
CHAPTER 6 ........................................................................................................................................................... 179
INTRODUCTION TO EXTENSIBLE MARKUP LANGUAGE (XML)................................................... 179
OBJECTIVES .......................................................................................................................................................... 179
UNIT STRUCTURE ............................................................................................................................................ 179
INRODUCTION .................................................................................................................................................. 180
6.1. OVERVIEW OF XML ............................................................................................................................... 180
6.2. XML COMPONENTS ............................................................................................................................... 182
6.3. DOCUMENT TYPE DEFINITION ......................................................................................................... 185
6.4. DATA ELEMENTS ......................................................................................................................................187
6.5. DEFINING ATTRIBUTES AND ENTITIES ......................................................................................... 188
6.6. XML SCHEMA ............................................................................................................................................ 190
UNIT SUMMARY ....................................................................................................................................................... 192
TEST YOURSELF ........................................................................................................................................................ 193
REFERENCES/FURTHER READING ................................................................................................................. 194

CHAPTER 1
THE FUNDAMENTALS
OBJECTIVES
At the end of this unit, you should be able to:

Define and discuss the evolution of the Internet
Explain the meaning of intranet and extranet
List the devices use to access the Internet
Discuss the various means of accessing the Internet.
Describe the distinct difference between internet and WWW
Mention and describe basic terms you have to know whenever using
internet
UNIT STRUCTURE
1.1 Internet history, Uses and Services

1.2 TCP/ IP Protocols
1.3 HTTP Request Model

INTRODUCTION
Internet is the revolutionary phenomenon heralding the dawn of a new era in human
civilization the Information Age. Several computers connected to it and the number
is growing exponentially doubling in size approximately every 10 months, its
potential for affecting every facet of life, be it communication, education,
entertainment, business and government is mind- boggling.
Nowadays, most of the hype about the Internet is focused on the World Wide Web.
It has become the fastest growing and most popular part of the Net. The Web is an
interface-a window on the Net. It wraps most of the different features of the Internet
into a single interface used by Web applications.
1.1. INTERNET HISTORY, USES AND SERVICES
The Definition and Evolution of the Internet
The Internet is a term used to describe a worldwide network of computer networks

connecting millions of computers around the world and provides worldwide
communications to businesses, homes, schools, and governments.
The Internet is one of the largest, most widely used networks (in fact, a network
of networks) that has evolved and grown overtime. It is a group of two or more
networks that are:
Interconnected physically
Capable of communicating and sharing data with each other
Able to act together as a single network.
The Internet also referred to as the net, in simplest terms, consists of large a group
of millions of computers around the world that are connected to one another for the
purpose of communication. It is a network of networks that consists of millions of
private, public, academic, business, and government networks, local to global scope,
that are linked by a broad array of electronic, wireless and optical networking

technologies such as phone lines, fibre optic lines, coaxial cable, satellites, and
wireless connections. The Internet seems to be everywhere today with many people
and devices connected to it. When connected to the Internet people can access
services such as online shopping, listen to radio and TV broadcast, chat, and send
mail, access information, read newspaper and so on. Today Internet is not only
accessed from regular stationary computer but also from mobile / portable devices
such as Personal Digital Assistants (PDAs) as seen in figure 1.1, cell phones, netbook,
iPod, iPad, Palm Pilots and others.
Fig. 1.1: PDA access to the Internet
The Internet originated as a proposal from the Advanced Research Project Agency
(ARPA). The idea was to see how computers connected in a network i.e. (ARPANET)
could be used to access information from research facilities and universities. In 1969,
four computers (located at UCLA, Stanford Research Institute, University of California
Santa Barbara and the University of Utah) were successfully connected. As time went
on, other networks were connected. With four nodes by the end of 1969, the
ARPANET spanned the continental United States (US) by 1971 and had connections
to Europe by 1973. Though the Interconnected Network, or Internet, was originally
limited to the military, government, research, and educational purposes it was
eventually opened to the public. Today there are hundreds of millions of computers
and other devices connected to the Internet worldwide. Other definitions that are
closely related to the term Internet are intranet and extranet.
Intranets and Extranets

The term “Intranet” is used to describe a network of personal computers (PC)

without any personal computers on the network connected to the world outside of
the Intranet. The Intranet resides behind a firewall; if it allows access from the
Internet, it becomes an Extranet. The firewall helps to control access between the
intranet and Internet so that only authorised users will have access to the Intranet.
Usually these people are members of the same company or organisation. Like the
Internet itself, intranets are used to share information. Secure intranets are now the
fastest-growing segment of the Internet because they are much less expensive to
build and manage than private network based on proprietary protocols.
Extranets are becoming a very popular means for business partners to exchange
information. An Extranet is a term used to refer to an intranet that is partially
accessible to authorised outsiders. Privacy and security are important issues in
extranet use. A firewall is usually provided to help control access between the
Intranet and Internet. In this case, the actual server will reside behind a firewall.
The level of access can be set to different levels for individuals or groups of outside
users.
The Internet versus the Web

No, it’s not a battle to the death, just an opportunity to point out the distinction
between two words that are increasingly being used interchangeably.
The World Wide Web emerged from ideas about nonlinear information organization
and was developed to meet the information needs of researchers in the high-energy
physics community. The World Wide Web is a vast collection of information that is
spread across hundreds of thousands of computers around the world. The backbone
of the World Wide Web is the Hypertext Markup Language, often simply referred to
as HTML.
The internet is an international network of connected computers. No company owns

the internet; it is a cooperative effort governed by a system of standards and rules.
The purpose of connecting computers together, of course, is to share information.
There are many ways information can be passed between computers, including email
(POP3/IMAP/SMTP), file transfer (FTP), secure shell (SSH), and many more
specialized modes upon which the internet is built. These standardized methods for
transferring data or documents over a network are known as protocols.

The web (originally called the World Wide Web, thus the “www” in site addresses)
is just one of the ways information can be shared over the internet. It is unique in
that it allows documents to be linked to one another via hypertext links—thus
forming a huge “web” of connected information. The web uses a protocol called
HTTP (HyperText Transfer Protocol). That acronym should look familiar because it
is the first four letters of nearly all website addresses, as we’ll discuss in an upcoming
section.
The World Wide Web is a network of thousands of computers, all of which fall
neatly into two categories: clients and servers. Servers store information and process
requests from clients. Then they send the requested information to the clients. This
information includes all kinds of data, including images, sounds, and text. Servers
also send instructions to the client on how to display all this information. These
instructions are sent in the form of Hypertext Markup Language (HTML). Clients
make requests for information and then handle the chore of displaying that
information to the end user. When you are using a Web browser to navigate the
Web, your browsing software is acting as a client.
The World Wide Web is a distributed network. That means there is no central
computer for the World Wide Web. Any server on the Web can be accessed directly
by any client. If a server on the World Wide Web malfunctions, it doesn't affect the
performance of other servers. Users navigate the World Wide Web through the use
of hypertext links. When you select or click on a hypertext link, you go to another
area on the Internet.
Almost all of the documents on the Web are interconnected through the use of
hypertext links. Most of the documents on the World Wide Web are written in
Hypertext Markup Language (HTML). HTML provides instructions for the client
software on how the document should be displayed. HTML also contains information
about how to link up to other documents on the Web.
The Web Server

Let’s talk more about the computers that make up the internet. Because they “serve
up” documents upon request, these computers are known as servers. More accurately,
the server is the software (not the computer itself) that allows the computer to
communicate with other computers; however, it is common to use the word “server”
to refer to the computer as well. The role of server software is to wait for a request
for information, and then retrieve and send that information back as quickly as

possible. Servers are slave programs. They act only when requests are made to them
by browsers running on other computers and the Internet.
The primary function of a web server is to deliver web pages on the request to
clients. This means delivery of HTML documents and any additional content that
may be included by a document, such as images, style sheets and JavaScript. A
client, commonly a web browser or web crawlers, initiates communication by making
a request for a specific resource using HTTP and the server responds with the content
of that resource or an error message if unable to do so.
There’s nothing special about the computers themselves…picture anything from a

high-powered Unix machine to a humble personal computer. It’s the server software
that makes it all happen. In order for a computer to be part of the web, it must be
running special web server software that allows it to handle HyperText Transfer
Protocol transactions. Web servers are also called HTTP servers.
There are many server software options out there, but the two most popular are
Apache (open source software) and Microsoft Internet Information Services (IIS).
Apache is freely available for Unix-based computers and comes installed on Macs
running macOS. There is a Windows version as well. Microsoft IIS is part of
Microsoft’s family of server solutions.
Many generic web servers support server-side scripting. The scripting tools used for
middleware development include PHP, JSP, ASP, Servlet, PERL, Python, and so on.
These tools allow the behaviour of the web server to be scripted in separate files,
while the actual server software remains unchanged. Usually, this function used to
create HTML document “on-the-fly” as opposed to returning fixed documents. This
is referred to as dynamic and static content respectively.
Every computer and device (router, smartphone, car, etc.) connected to the internet
is assigned a unique numeric IP address (“IP” stands for “Internet Protocol”). For
example, as I write this, the computer that hosts oreilly.com has the IP address
199.27.145.64. All those numbers can be dizzying, so fortunately, the Domain Name
System (DNS) was developed to allow us to refer to that server by its domain name,
“oreilly.com”, as well. The numeric IP address is useful for computer software,
while the domain name is more accessible to humans. Matching the text domain
names to their respective numeric IP addresses is the job of a separate DNS server.
If you think of an IP address as a telephone number, the DNS server would be the
phonebook.

It is possible to configure your web server so that more than one domain name is
mapped to a single IP address, allowing several sites to share a single server.
A Word about Browsers
We now know that the server does the ‘serving’, but what about the other half of
the equation? The software that does the requesting is called the client. People use
desktop browsers, mobile browsers, and other assistive technologies (such as screen
readers) as clients to access documents on the web. The server returns the documents
for the browser (also referred to as the user agent in technical circles) to display.
The requests and responses are handled via the HTTP protocol, mentioned earlier.
Although we’ve been talking about “documents,” HTTP can be used to transfer
images, movies, audio files, data, scripts, and all the other web resources that
commonly make up websites and applications. It is common to think of a browser
as a window on a computer monitor with a web page displayed in it. These are
known as graphical browsers or desktop browsers and for a long time, they were
the only web-viewing game in town. The most popular desktop browsers as of this
writing include Edge and Internet Explorer for Windows, Chrome, Firefox, and Safari,
with Opera and Vivaldi bringing up the rear.
These days, however, more than half of web traffic comes from mobile browsers on
smartphones and tablets such as Safari on iOS, Android and Chrome browsers on
Android devices, Opera Mini, and a myriad of other default and installable mobile
browsers (see en.wikipedia.org/wiki/Mobile_browser for a complete list). Navigating
the web on a touch screen is the new normal.
It is also important to keep alternative web experiences in mind. Users with impaired
sight may be listening to a web page read by a screen reader (or simply make their
text extremely large). Users with limited mobility may use assistive technology such
as joysticks or voice commands to access links and enter content. The sites we build
must be accessible and usable for all users, regardless of their browsing experiences.
The web is also finding its way onto smart TVs and gaming systems, where users
access our pages with TV remotes or Xbox controllers. You never know where the
web will pop up next!
In summary, you can distinguish between Web Client (browser) and Web Servers as
follows:

Web Client
Connected to the Internet when needed

Usually runs Web browser(client) software such as Internet Explorer or
Netscape
Uses HTTP
Request Web pages from a server
Receives Web Pages and files from as server
Web Server
Continually connected to the Internet

Runs Web server software (such as Apache or Internet Information Services
(IIS)
Uses HTTP
Receives a request for the Web page
Responds to the request and transmits the status code, Web page, and
associated files
Internet Access
In order to have access to the vast resources on the Internet, you need to connect
your computer to a computer system that is already on the Internet, usually one run
by an Internet Service Provider (ISP). There are four major ways of connecting a
client (user) computer to the vast resources on the Internet; these are by a dial-up
connection using a telephone line or an Integrated Services Digital Network (ISDN),
a Digital Subscriber Line (DSL), a cable TV connection or a satellite connection.
While rural users may consider installing a satellite dish for Internet connections,
urban users may have access to wireless connections. In most offices, users connect
their computers via a local area network (LAN) connected to the Internet. Similarly,
in many home, users are beginning to connect their computers into Internet-
connected LANs, too. The Dialup access gives a low speed connection to the Internet.
High-speed Internet connections, which include DSL, ISDN, leased lines, cable
Internet, and satellite, are called broadband connections.
Basic terms you have to know to work with internet

Learning about the Internet can be a bit confusing at first, but it becomes a lot
simpler if you can become familiar with some of the terminology used when talking
about the Internet. Here is a list of common words that you might hear.

1. Web page:
Webpage is a document, typically written in HTML that is almost always accessible
via HTTP. Or pages on which, information will be displayed on the internet.
2. Web site
It is a collection of web pages. Many commercial companies maintain web sites, or
sets of web pages, that their customers can view. The companies can engage in e-
commerce, or electronic commerce, by describing their products on their web sites.
Customers who view the web pages can read the descriptions and then purchase
products directly from the companies by sending orders back over the Internet.
Buying and selling stocks and other investments is another popular web activity.
Many organizations and educational institutions also have web sites. They use their
sites to promote themselves and their causes, to disseminate information, and to
solicit funds and new members. Even many private individuals now have their own
web sites. They can fill their pages with photographs and personal information for
viewing by friends and associates.
3. Hyperlink
A hyperlink is an electronic path to another page or location (URL) on Internet.
Sometimes it appears as a piece of coloured and underlined text, or perhaps as a
picture with or without a coloured border around it. You can easily identify the
hyperlink by moving the mouse pointer around the screen until it turns into a hand
or notice also that a message appears in the status bar at the bottom of the web
browser, indicating that you have pointed to a hyperlink to … and the name of a
new web page.
4. Hypertext
Hypertext allows a user to move from one web page to another by using a mouse
to click on special hypertext links. For example, a user viewing web pages that
describe airplanes might encounter a link to jet engines from one of those pages. By
clicking on that link, the user automatically jumps to a page that describes jet
engines. Users "surf the web" when they jump from one page to another in search
of information.
5. WWW
This stands for the World-Wide-Web. Tim Berners-Lee, a physicist in Switzerland,
invented the World Wide Web in 1992 as a way to organize and access information

on the Internet. Its introduction caused the popularity of the Internet to explode
nearly overnight. Instead of only being able to download simple linear text, with the
introduction of the World Wide Web users could download web pages that contain
text, graphics, and even animations, video, and sound.
6. Web browser
A web browser is a program that runs on users' computers and allows them to view
and interact with the web pages on the World Wide Web. The most common web
browsers are called Internet Explorer, Mozilla Firefox, Opera and Netscape.
7. Web server
A web server is a computer that stores a web site, and is responsible for servicing
requests for viewing that web site. Client computers send requests for particular
URLs to the web server, which then finds the appropriate web page, and sends it
back to the client computer. A web server on the Internet must have a permanent
Internet connection, so that whenever a client computer requests a URL, the web
server can respond straight away.
 A computer that is responsible for accepting HTTP requests from web clients,
which are known as web browsers, and serving them HTTP responses along with
optional data contents, which usually are web pages such as HTML documents
and linked objects (images, etc.).
8. URL
Every page and resource on the web has its own special address called a URL, which
stands for Uniform Resource Locator. It’s nearly impossible to get through a day
without seeing a URL (pronounced “U-R-L,” not “erl”) plastered on the side of a
bus, printed on a business card, or broadcast on a television commercial. Web
addresses are fully integrated into modern vernacular. Some URLs are short and
sweet. Others may look like crazy strings of characters separated by dots (periods)
and slashes, but each part has a specific purpose. Let’s pick one apart.
The Parts of a URL
A complete URL is generally made up of three components: the protocol, the site
name, and the absolute path to the document or resource, as shown in Error! R
eference source not found.

Fig. 1.2: parts of URL

http://
The first thing the URL does is to define the protocol that will be used for that
particular transaction. The letters “HTTP” let the server know to use HyperText
Transfer Protocol, or get into “web mode.” You may also see a URL begin with
https://, HTTPS, the Secure Web Protocol. If you look at the address bar while
shopping online or using a banking site, you’ll notice that they use the HTTPS
protocol. HTTPS, where “S” stands for “secure,” is a modification of HTTP that
encrypts form information when it is sent between the user’s client and the server.
Any web page that has form fields that accept text (such as a search bar or a login)
should use HTTPS.
www.example.com
The next portion of the URL identifies the website by its domain name. In this
example, the domain name is “example.com.” The “www.” part at the beginning
is the particular hostname at that domain. The hostname “www” has become a
convention, but is not a rule. In fact, sometimes the hostname may be omitted.
There can be more than one website at a domain (called subdomains). For example,
there might also be “development.example.com,” “clients.example.com,” and so on.
/2018/samples/first.html
This is the absolute path through directories on the server to the requested HTML
document, first.html. The words separated by slashes are the directory names, starting
with the root directory of the host (as indicated by the initial /). Because the internet
originally comprised computers running the Unix operating system, our current way
of doing things still follows Unix rules and conventions, hence the / separating
directory names.

To sum it up, the URL in Figure 1.2 says it would like to use the HTTP protocol to
connect to a web server on the internet called “www.example.com” and to request
the document first.html, located in the samples directory, which is in the 2018
directory.
Simplified URLs Obviously, not every URL you see is so lengthy. To get to O’Reilly’s
site, you’d expect to type oreilly.com instead of http://www.oreilly.com/index.html.
Here’s why that works.
9. ISP
ISP stands for Internet Service Provider, a company whose business is to provide
Internet connections to paying customers. The customer uses a modem to dial the
telephone number of the ISP from their personal computer.
10. Download /Upload

To download is to transfer a file from another computer to the user’s computer
where as to upload is to send a file to another computer.
11. HTML
The Hypertext Markup Language is the language used to write most web pages on
the WWW. HTML pages typically consist of some text together with formatting
instructions and information about what graphics or audio clips to include in the
web page.
12. XML
The Extensible Markup Language is an alternative language for writing web pages.
Whereas HTML pages describe the format of the data’s presentation, pages written
in XML describe only how the data is structured. XML provides a standard format
for the movement of data in and between applications. The data in an XML file
usually requires some other application to interpret the data and display it in a
useful format.
How the internet works?

The internet, as we have discussed, is used up of a bunch of network .Each network
can be anything (an internet) with hundreds of computers. These networks talk to
one another using a common protocol Called TCP/IP.
Internet Uses and Services

A. Electronic Mail (Email)

The electronic mail is one of the fastest ways of sending information from one region
to another via the computer and other electronic devices. You can communicate with
one person at a time or thousands; you can receive and send files and other
information. The basic email functions include send and receive email messages, save
your message in a file, print mail messages, reply to mail messages and attach a file
to a mail message. There are a number of webmail providers but the most popular
ones are Gmail, yahoo mail and Hotmail.
An e-mail message consists of three components namely: (i) the message header (ii)
the message envelop, and (iii) the message body. The message header contains control
information, including, minimally, an originator's email address and one or more
recipient addresses. Usually descriptive information is also added, such as a subject
header field and a message submission date/time stamp. The message body carries
the data to be sent. The message’s body property usually contains details associated
with the message. In addition to the data part, messages carry details that assist in
distinguishing messages and selectively receiving them. This detail is made up of a
fixed number of fields, which is referred to as the message envelope. These fields
are source destination tag communicator.
To use email, you should have an email address, which is created by an Internet
Service Provider or on a Website such as yahoo, Google, and hotmail. Most e-mail
addresses are set up in this manner: your username, followed by “@” (at) symbol,
and then a domain name (for instance, .com, .edu.,.net, or .org). When you send e-
mail to others, Simple Mail Transfer Protocol (SMTP) is used. When you receive e-
mail, Post Office Protocol (POP, currently POP3) and Internet Message Access
Protocol (IMAP) can be used.

Fig. 1.3: Google Mail Interface
B. File Transfer Protocol (FTP)
FTP is protocol for exchanging files over the Internet used. It is used for moving
files between hosts on a TCP/IP network. FTP is most commonly used to download
a file from a server using the Internet or to upload a file to a server as seen in
figure 1.4
Fig. 1.4 FTP Interface

To achieve FTP, the user invokes one of two commands:

I. get: the command for transferring a file from another server to you own
computer
II. put: the command for moving a file from your computer to another one.
C. Search Engine
A search engine is designed to search for information on the Internet. This presents
the results in the form of a search results list. The search results can be qweb pages,
images, videos, and other type of files. Examples include Google, Bing, and Mamma
among others. One of the popular images is seen in fig. 1.5.
Fig. 1.5 Search Engine
D. Chatting
This is the other method of Internet conversation which enables the connection of
people anywhere on the Internet. Chart sessions allow many users to join in the
same free-form conversation which is usually within a discussion topic. Examples of
the charting software are MSN messengers, Yahoo messengers, IRC, pidgin, WhatsApp
among others.
E. Video Conferencing
A video conferencing is a set of interactive telecommunication technologies, which

allow two or more locations to interact via two-way video and audio transmission

simultaneously using the Internet. Examples include zoom, video WhatsApp, Google
meet among others.
F. E-Commerce
E-commerce also called electronic commerce is the buying and selling of products or
services over electronic systems such as the Internet. Some of the common
applications, which are used in e-commerce, are domestic and international payment
systems, group buying, automatic online assistants, online shopping and other
tracking, online banking, shopping cart software among other terms. Example of the
online marketing sites are amazon.com, ebay.com, alibaba.com, walmart.com among
others as seen in fig. 1.6
Fig. 1.6 logo of some e-commerce sites

1.2. TCP/ IP PROTOCOLS
What is Protocol?
Protocol is a set of rules that govern the transfer of data and communication
between two or more entities in a network or it is the suite of networking
protocol that let different type of computers to communicate over the network.
Protocols are rules and procedures for communicating. The term "protocol" is
used in a variety of contexts. For example, diplomats from one country adhere
to rules of protocol designed to help them interact smoothly with diplomats

from other countries. Rules of protocol apply in the same way in the computer
environment.
When several computers are networked, the rules and technical procedures
governing their communication and interaction are called protocols.
Keep three points in mind when you think about protocols in a network environment:
There are many protocols. While each protocol facilitates basic communications,
each has different purposes and accomplishes different tasks. Each protocol has
its own advantages and restrictions.
Some protocols work only at particular OSI layers. The layer at which a protocol
works describes its function. For example, a protocol that works at the physical
layer ensures that the data packet passes through the network interface card (NIC)
and out onto the network cable.
Protocols can also work together in a protocol stack, or suite. Just as a network
incorporates functions at every layer of the OSI reference model, different
protocols also work together at different levels in a single protocol stack. The
levels in the protocol stack "map," or correspond, to the layers of the OSI
reference model. For instance, the TCP/IP protocol's application layer maps to the
OSI reference model's presentation layer. Taken together, the protocols describe
the entire stack's functions and capabilities.
As we discussed earlier any network uses different protocols to make an effective

communication. The protocols are TCP/IP, HTTP/HTTPS, FTP, ICMP, SMTP, POP
etc.
TCP/IP
TCP (Transmission Control Protocol) is a set of rules (protocol) used along with the
Internet Protocol (IP) to send data in the form of message units between computers
over the Internet.
While IP takes care of handling the actual delivery of the data, TCP takes care of
keeping track of the individual units of data (called packets) that a message is divided
into for efficient routing through the Internet.
For example, when an HTML file is sent to you from a Web server, the Transmission
Control Protocol (TCP) program layer in that server divides the file into one or more
packets, numbers the packets, and then forwards them individually to the IP program
layer. Although each packet has the same destination IP address, it may get routed

differently through the network. At the other end (the client program in your
computer), TCP reassembles the individual packets and waits until they have arrived
to forward them to you as a single file.
TCP is known as a connection-oriented protocol, which means that a connection is

established and maintained until the message or messages to be exchanged by the
application programs at each end have been exchanged.
TCP is responsible for ensuring that a message is divided into the packets that
IP manages and for reassembling the packets back into the complete message
at the other end. In the Open Systems Interconnection (OSI) communication
model, TCP is in layer 4, the Transport Layer.
The TCP is responsible for the reliable transmission of data from one node to
another. It is a connection-based protocol and establishes a connection (also
known as a session, virtual circuit, or link), between two machines before any
data is transferred.
In order to maintain a reliable connection, each packet must contain:
A source and destination TCP port number.
A sequence number for messages that must be broken into smaller pieces.
A checksum to ensure that information is sent without error.
An acknowledgement number that tells the sending machine which pieces of
the message have arrived.
Internet Protocol (IP)
The Internet Protocol (IP) is the transmission mechanism used by the TCP/IP
protocols.
IP is an unreliable and connectionless datagram protocol a best-effort delivery service.
The term best-effort means that IP provides no error checking or tracking. IP assumes
the unreliability of the underlying layers and does its best to get a transmission
through to its destination, but with no guarantees.
A computer is hardwired to obey a list of built-in commands, rules, and standards,

known as protocols, to communicate and identify with other computers, or connect to
the internet. One such protocol is known as the Internet Protocol.
File Transfer Protocol (FTP) is used widely on the Internet for transferring files to
and from a remote host. FTP is commonly used for uploading pages to a Web site
and for providing online file archives.

ICMP is used by IP and higher-level protocols to send and receive status reports
about information being transmitted
Simple Mail Transport Protocol (SMTP) controls the transfer of email messages on
the Internet.
Post Office Protocol (POP) allows you to fetch email that is waiting in a mail server
mailbox. POP defines a number of operations for how to access and store email on
your server.
Network address translation (NAT) is the process where a network device, usually a
firewall, assigns a public address to a computer (or group of computers) inside a
private network.
A firewall is software or hardware that checks information coming from the Internet
or a network, and then either blocks it or allows it to pass through to your computer,
depending on your firewall settings.
1.3. HTTP REQUEST MODEL
HTTP is the protocol that supports communication between web browser and web
server. It is used to access HTML documents, or web pages.
HTTPS is the secure version of HTTP. HTTPS is used on web sites where sensitive
information such as bank details is exchanged. HTTP is the protocol behind the
World Wide Web. With every web transaction, HTTP is invoked. HTTP is behind
every request for a web document or graphic, every click of a hypertext link, and
every submission of a form. The Web is about distributing information over the
Internet, and HTTP is the protocol used to do so.
HTTP specifies how clients request data, and how servers respond to these requests.
By understanding how HTTP works, you'll be able to:
Manually query web servers and receive low-level information that typical
web browsers hide from the user. With this information, you can better
understand the configuration and capabilities of a particular server, and debug
configuration errors with the server or programming errors in programs
invoked by the web server.
Understand the interaction between web clients (browsers, robots, search
engines, etc.) and web servers.

Streamline web services to make better use of the protocol.

Because HTTP is the primary means by which communication on the Internet is
made possible, it is important to have a basic understanding of how it operates.
Figure illustrates the sequence of events that occur when a web browser on a client
computer wants to display a web page stored by a web server. Both computers, the
client and the web server, will use the HTTP protocol to communicate during this
sequence of events. HTTP enables the computers to communicate in a uniform and
predictable way.
Figure 1.7 a client computer interacting with a web server on the

Internet
In HTTP, messages sent between computers consist of a set of methods and headers.
An HTTP method is simply an instruction telling the other computer what type of
request is being made. For example, the HTTP GET method can be used when
requesting that a web page be sent from a web server to a client. The HTTP headers
that typically follow the method indicate what type of information will be sent.
Request
To illustrate this further, in step 1 of 2, the web browser sends an HTTP request
message to the web server. The request will look something like what is shown in
fig 1.8 below.

Fig.1.8 a HTTP request

This message consists of a request line, a header and a body.
The request line contains the method (GET), followed by the file name of the HTML
document requested and the server it is requested from. The remainder of the request
line provides the protocol’s name and version number.
The request header contains details about the type of browser that has requested the
page (in this case, IE6), the types of document the client will accept back (in this
case, any) and the date. It may also include other general configuration information
such as language settings.
Response
The server will then search for the requested resource (step 2 of Fig 1.7), and then
respond to the client, indicating whether it has found the resource or not (step 3 of
Fig 1.7) the contents of the HTTP response are illustrated in fig 1.9 below. It consists
of a response line, a header and a body.
The request line contains the HTTP version number and an HTTP request code that
indicates the success or failure of the request. Some common request codes are 200
(resource found), 401 (unauthorized access) and 404 (resource not found). A summary
of the code number ranges and what they mean is shown in the table below.
Codes Range Description
100-199 Information, indicating that the request is being processed

200-299 Success
300-399 Request not carried out because the information has been moved
400-499 A client error – the request was incomplete or incorrect

500-599 A server error – the request appeared to be valid, but the server
could not process it
Fig.1.9 a HTTP response
Client side
When a user clicks on a hyperlink, the browser carries out a series of steps in order
to fetch the page pointed to http://www.wcu.edu,et/home/index.html.
The browser determines the Host
The browser asks DNS for the IP address of www.wcu.edu.et.
DNS replies with 156.106.192.32.
The browser makes a TCP connection to port 80 on 156.106.192.32.
It then sends over a request asking for file /home/index.html.
The www.itu.org server sends the file /home/index.html.
The TCP connection is released.
The browser displays all the text in /home/index.html.
The browser fetches and displays all images in this file.
Server side
The steps that the server performs in its main loop are:
Accept a TCP connection from a client (a browser).
Get and resolve the name of the file requested.
Authenticate the client.
Perform access control on the client.
Perform access control on the Web page.
Check the cache.
Fetch the requested page from disk.
Determine the MIME type to include in the response.
Take care of miscellaneous tasks.

Return the reply to the client.

Make an entry in the server log.
Release the TCP connection
If the resource was found, the server will send a number of HTTP headers, which
provide additional information about the data being sent. In this case, it shows that
the server is sending an HTML document and the server is IIS 5.0 (Internet
Information Services). This header describes the content type of the document that
will follow. Other examples of content types are text/txt (for plain text documents)
and image/gif (for an image saved using the gif file format). After the header, the
body includes the content of the requested resource in this case, the HTML. The
connection is terminated when the transfer of the resource is complete. The web
browser on the client computer then interprets the HTML it receives and displays
the results on the screen of the client computer.
UNIT SUMMARY
The Internet has remained a dominant means of communication over the past
decade. It represents one of the most remarkable developments in the technological
history of the world. It began as a medium for exchanging files by academia and
has become a nearly ubiquitous phenomenon that has transformed almost every
aspect of daily life. The Internet has made information available in a quick and easy
manner, publicly accessible and within easy reach via the connection’s infrastructure
discussed in this unit.
TEST YOURSELF
Let’s play a round of “Identify That Acronym!” The following are a few basic
web terms mentioned in this chapter.
1. HTML ______ a. Home of Mosaic, the first graphical browser
2. W3C ______ b. The location of a web document or resource

3. CERN ______ c. The mark-up language used to describe web content
4. CSS ______ d. Matches domain names with numeric IP addresses
5. HTTP ______ e. A protocol for file transfer
6. IP ______ f. Protocol for transferring web documents on the

internet
7. URL ______ g. The language used to instruct how web content looks
8. NCSA ______ h. Particle physics lab where the web was born
9. DNS ______ i. Internet Protocol
10. FTP ______ j. The organization that monitors web technologies

CHAPTER 2
WEB DESIGN AND DEVELOPMENT
OBJECTIVE

Define and discuss what it mean web Design
Explain the meaning of Web Development
Describe basic phases of web site design and development process
Define and discuss Information Organization and Architecture
Define and discuss Information Organization and Architecture
List all steps to designing an information Visualization
UNIT STRUCTURE
2.1. Gathering requirements

2.2. Information organization and architecture
2.3. Information Visualization

INTRODUCTION
Web design and development is an umbrella term that describes the process of
creating a website. Like the name suggests, it involves two major skill sets: web
design and web development. Web design determines the look and feel of a website,
while web development determines how it functions.
Web design is the process of creating all the visual aspects of the interface. This
covers the layout, colour scheme, images, logos, type, design elements (such as
buttons and links), and anything else that you can see. The web is a visual medium,
so design is an important part of creating assets that are both engaging and effective.
Designers need to keep in mind the technical aspects of design, while prioritizing
the human factor. Digital properties shouldn’t just be beautiful. They need to create
a good experience for the visitor and meet business objectives, such as increasing
sales, creating brand ambassadors, as well as encouraging signups and, ultimately,
conversions.
Web development is the process of taking finished web designs and transforming
them into fully functioning, interactive websites. Development is what gives life and
movement to static designs, and enables users to access the website through their
web browsers. This is done by translating the designs into web coding languages
that can be interpreted and displayed by web browsers.
Web development and design applies to more than just websites, the principles can
be used for any digital assets you create, from mobile platforms to social media
profiles. The fundamental principle of good development and design is to understand
your users, they are the people who will actually be using and interacting with your
website. Web design combines a number of disciplines, including:
Graphic design
Information design
Interface design
HTML, style sheet, and graphic production
Scripting and programming
Multimedia

Basic phases of web site design and development processing

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance
1. Information gathering
The first step in designing a successful web site is to gather information. Many things
need to be taken into consideration when the look and feel of your site is created.
This first step is actually the most important one, as it involves a solid understanding
of the company it is created for. It involves a good understanding of you what your
business goals and dreams are, and how the web can be utilized to help you achieve
those goals.
It is important that your web designer start off by asking a lot of questions to help
them understand your business and your needs in a web site.
Certain things to consider are:
Purpose
What is the purpose of the site? Do you want to provide information, promote a
service, and sell a product…?
Goals
What do you hope to accomplish by building this web site? Two of the more
common goals are either to make money or share information.
Target Audience
Is there a specific group of people that will help you reach your goals? It is helpful
to picture the “ideal” person you want to visit your web site. Consider their age,
sex or interests – this will later help determine the best design style for your site.
Content

What kind of information will the target audience be looking for on your site? Are
they looking for specific information, a particular product or service, online
ordering…?
2. Planning
Using the information gathered from phase one, it is time to put together a plan for
your web site. This is the point where a site map is developed.
The site map is a list of all main topic areas of the site, as well as sub-topics, if
applicable. This serves as a guide as to what content will be on the site, and is
essential to developing a consistent, easy to understand navigational system. The
end-user of the web site – aka your customer – must be kept in mind when designing
your site. These are, after all, the people who will be learning about your service
or buying your product. A good user interface creates an easy to navigate web site,
and is the basis for this.
During the planning phase, your web designer will also help you decide what
technologies should be implemented. Elements such as what CMS (content
management system) such as WordPress to incorporate, will any contact forms be
needed, etc. are discussed when planning your web site.
During planning a site, these are some desirable site elements that might be include
in your site.
Table of Contents
Search Engines
Common Navigation tools
What is new: - People who visit your site frequently will appreciate what’s
new section. So that they can quickly find out what has changed since their
last visit. This spares them having to go through the whole site to discover
new content.
Feedback Mechanism: - You should always be gathering feedback on your site
so that you can build upon and improve it. Putting a feedback mechanism on
your site is a great way to collect opinions from people as they visit.
Mailing List: - A mailing list gateway allows users to subscribe to mailing lists
that will keep them up to date on changes to the site or on some other topic
of interest

Threaded discussion groups: - Threaded discussion groups are very much like
having UseNet newsgroups right on your site. Users can participate in
discussions about the site or topics relevant to content on the site by posting
their ideas and opinions or by responding to posts by others.
Chat channels: - let users interact in real time. Some sites support a general
chat channel where users can discuss the site or topics that relate to site
content. Another application of chat channels is to provide a question-and-
answer session with a subject matter expert or celebrity.
3. Design
Drawing from the information gathered up to this point, it’s time to determine the
look and feel of your site. Target audience is one of the key factors taken into
consideration. A site aimed at teenagers, for example, will look much different than
one meant for a financial institution. As part of the design phase, it is also important
to incorporate elements such as the company logo or colours to help strengthen the
identity of your company on the web site.
Your web designer will create one or more prototype designs for your web site. This
is typically a .jpg image of what the final design will look like. Often times you will
be sent an email with the mock-ups for your web site, while other designers take it
a step further by giving you access to a secure area of their web site meant for
customers to view work in progress.
Either way, your designer should allow you to view your project throughout the
design and development stages. The most important reason for this is that it gives
you the opportunity to express your likes and dislikes on the site design.
In this phase, communication between both you and your designer is crucial to
ensure that the final web site will match your needs and taste. It is important that
you work closely with your designer, exchanging ideas, until you arrive at the final
design for your web site.
4. Development
The developmental stage is the point where the web site itself is created. At this
time, your web designer will take all of the individual graphic elements from the
prototype and use them to create the actual, functional site.

This is typically done by first developing the home page, followed by a “shell” for
the interior pages. The shell serves as a template for the content pages of your site,
as it contains the main navigational structure for the web site. Once the shell has
been created, your designer will take your content and distribute it throughout the
site, in the appropriate areas.
This entire time, your designer should continue to make your in-progress web site
available to you for viewing, so that you can suggest any additional changes or
corrections you would like to have done. On the technical front, a successful web
site requires an understanding of front-end web development. This involves writing
valid HTML / CSS code that complies with current web standards, maximizing
functionality, as well as accessibility for as large an audience as possible.
The following are some of the design ideologies to keep in mind while developing
a look and feel for your site.
Less is often more: - Don't forget that some users have text-only browsers and others
have slow connections. These people will not have the ability or the patience to
view a site that relies heavily on a lot of graphics for its look. Try to keep the
number of graphics to a minimum.
Backgrounds: - A good background should stay exactly there, in the background. If

a background is so obtrusive that it interferes with presentation of content in the
foreground, you're less likely to get your points across.
Colour Choices: - Control the background and Text colour of your page.
Iconography: - Many designers choose to represent major sections of a site with

icons, small images that are meant to convey what type of content is found in each
section.
5. Testing and delivery

At this point, your web designer will attend to the final details and test your web
site. They will test things such as the complete functionality of forms or other scripts,
as well last testing for last minute compatibility issues (viewing differences between
different web browsers), ensuring that your web site is optimized to be viewed
properly in the most recent browser versions.

A good web designer is one who is well versed in current standards for web site
design and development. The basic technologies currently used are HTML and CSS
(Cascading Style Sheets). As part of testing, your designer should check to be sure
that all of the code written for your web site validates. Valid code means that your
site meets the current web development standards.
The following are some of the sections that give you some different tests to try
Pilot the Site: - Taking the site for a test drive with some potential users is a great
way to gather ideas for making it better. To do this, round up some people who
have some degree of Web-surfing experience but who have not seen the site. Turn
them loose on the site and encourage them to look for things that they would
change. You can even give them a feedback form to fill out with a standard set of
questions and an open-ended question for other thoughts they may have. •
Try it with different browsers: - As you developed the site, you probably used just
one browser. Once you're done, you owe it to your audience to view the site in
other browsers, including at least one non-graphical browser. Record any corrections
needed and go back to your HTML files and look for ways to address the problems
you find. •
Try it with different connection speed: - You may have to send people home to sign
on from there to accomplish this one, but it's well worth the effort. Have them
check the pages on the site and time how long it takes for each to download? One
popular rule of thumb suggests that it shouldn't take more than 15 seconds for each
page to download. Identify pages that take longer than this and look for ways to
scale back the amount of information
Once you give your web designer final approval, it is time to deliver the site. An
FTP (File Transfer Protocol) program is used to upload the web site files to your
server. Some web designers offer domain name registration and web hosting services
as well, or have recommendations as to where you can host your site. Once these
accounts have been setup, and your web site uploaded to the server, the site should
be put through one last run-through. This is just precautionary, to confirm that all
files have been uploaded correctly, and that the site continues to be fully functional.
6. Maintenance

When we come to these phase testing the web site some error is occur the web
designer is redesigning of the web site. The development of your web site is not
necessarily over, though. One way to bring repeat visitors to your site is to offer
new content or products on a regular basis. Most web designers will be more than
happy to continue working together with you, to update the information on your
web site. Many designers offer maintenance packages at reduced rates, based on how
often you anticipate making changes or additions to your web site.
If you prefer to be more hands on, and update your own content, there is something
called a CMS (Content Management System) such as WordPress can be implemented
to your web site. This is something that would be decided upon during the Planning
stage. With a CMS, your designer will utilize online software to develop a database
driven site for you.
A web site driven by a CMS gives you the ability to edit the content areas of the
web site yourself. You are given access to a back-end administrative area, where
you can use an online text editor (similar to a mini version of Microsoft Word).
You’ll be able to edit existing content this way, or if you are feeling more
adventurous, you can even add new pages and content yourself. The possibilities are
endless.
It’s really up to you as far as how comfortable you feel with updating your own
web site. Some people prefer to have all the control so that they can make updates
to their own web site the minute they decide to do so. Others prefer to hand off
the web site entirely, as they have enough tasks on-hand that are more important
for them to handle directly.
That’s where the help of your web designer comes in, once again, as they can take
over the web site maintenance for you – one less thing for you to do is always a
good thing in these busy times!
2.1. GATHERING REQUIREMENTS
The first phase of web application development is to gather the required and desired
requirement from the client. These requirements can also be taken from users through
thinking from the perspective of users. Many of the cms development and other

development organizations takes much emphasize on gathering of the requirement

gathering process for web applications.
Website requirements are a list of necessary functions, capabilities, or characteristics

related to your website and the plans for creating it. There are several types of
requirements that may be defined during the process that come together to focus
and prioritize the project plan.
Types of Requirements
There are many different types of requirements documentation. At a higher level,

most can fall within one of the following categories:
Business Requirements define the objectives and what problems the stakeholder
intends to solve with the product.
User Requirements describe how user expectations and how they will interact with
the product. Use the features, functions, and content described in your scenarios to
develop your requirements. Your user scenarios should outline the tasks your users
want to complete on your site.
Functional Requirements provide details of how a product should behave and specify
what is needed for development.
Quality-of-Service Requirements detail what characteristics a product must maintain

in order to maintain its effectiveness and any constraints.
Implementation Requirements are used to detail changes in process, team roles,

migration from one system to another, etc.
2.2. INFORMATION ORGANIZATION AND ARCHITECTURE
We organize information in our minds and in information systems in order to collect

and record it, retrieve it, evaluate and select it, understand it, process and analyse
it, apply it, and rearrange and reuse it.
We also organize things, such as parts, merchandise in a store, or clothes in a closet,

using similar principles for similar purposes.

2.3. INFORMATION VISUALIZATION
Information visualization is the process of representing data in a visual and

meaningful way so that a user can better understand it. Dashboards and scatter plots
are common examples of information visualization. Via its depicting an overview
and showing relevant connections, information visualization allows users to draw
insights from abstract data in an efficient and effective manner.
Information visualization plays an important role in making data digestible and

turning raw information into actionable insights. It draws from the fields of human-
computer interaction, visual design, computer science, and cognitive science, among
others.
The process of creating information visualization typically starts with understanding

the information needs of the target user group. Qualitative research (e.g., user
interviews) can reveal how, when, and where the visualization will be used. Taking
these insights, a designer can determine which form of data organization is needed
for achieving the users’ goals. Once information is organized in a way that helps
users understand it better and helps them apply it so as to reach their goals
visualization techniques are the next tools a designer brings out to use. Visual
elements (e.g., maps and graphs) are created, along with appropriate labels, and
visual parameters such as colour, contrast, distance, and size are used to create an
appropriate visual hierarchy and a visual path through the information.
Information visualization is becoming increasingly interactive, especially when used

in a website or application. Being interactive allows for manipulation of the
visualization by users, making it highly effective in catering to their needs. With
interactive information visualization, users are able to view topics from different
perspectives, and manipulate their visualizations of these until they reach the desired
insights. This is especially useful if users require an explorative experience.
Steps to Designing an Information Visualization
The overall process is simple and once you’ve reviewed the process, it should feel
like common sense:
1. Define the problem
2. Define the data to be represented

3. Define the dimensions required to represent the data

4. Define the structures of the data
5. Define the interaction required from the visualization
Web Application (Webapps)
Webapps are applications that are accessed with a web browser over a network such
as the Internet or an intranet. They are popular because of the ubiquity of the
browser as a client (thin client). Similarly, its popularity is equally due to the
possibility of updating and maintaining the application without necessarily
distributing and installing it on every available client. Webapps or web applications
as they are sometimes called are used to implement webmail, online retail sales,
online auctions, discussion boards, and weblogs and so on. Web developers often
use client-side scripting to add functionality to the webapps by creating an interactive
site that does not require page reloading. Webapps generate a series of web pages
dynamically in a standard format such as Hypertext Mark-up Language (HTML)
supported by common browsers. Through Java, JavaScript, Flash and other
technologies, application specific methods such as drawing on the screen, playing
audio and accessing the keyboard and mouse are all possible. Webapps are the
present and the future of business transactions. The Web is based on the client/server
architecture. That is, both the server and the client application are responsible for
some sort of processing. Web application is commonly structured as a 3-tier
application. The web browser constitutes the first tier, a middleware engine using
some dynamic web content technology such as: Common Gateway Interface (CGI),
Hypertext Preprocessor (PHP), Java Servlets or Java Server Pages (JSP) or Active
Server Pages (ASP) constitutes the middle-tier and the database is the third tier or
back-end. The backend applications include MySQL, SQL Server, Oracle, etc. The
bulk of online transactions take place between the middleware and the database
server. While the middle-ware is responsible for the business logic transaction
processing, the back-end is responsible for information storage and retrieval from
the database. The middle-tier may be multi-tiered. That is, it can be composed of
several other servers with designated responsibilities, hence the over-all architecture
is said to be Ntier. A fundamental rule in 3-tier architecture is that the client has
no direct line of communication with the data tier. That is, all communications are
routed through the middleware tier.

Fig.2.1: Architecture of a Web Application
Web Hosting and Domain Registration
Web Hosting is a service to store and serve ready-made files and programs so they
are accessible on the Web. Hence publishing on the web involves designing and
constructing the pages and writing the programs for a website placing the completed
website with a hosting service.
To host a site under a given domain name, a hosting service associates that domain
name to an IP number assigned to the hosted site. The domain-to-IP association is
made through domain name servers (DNS) managed by the hosting service.
Domain Name Registration
To obtain a domain name you need the service of a domain name registrar. Avery
modest yearly fee is usually charged for new domain name registration. Once
registered, the domain name is property belonging to the registrant. ICANN accredits
commercial registrars for common Top Level Domains (TLDs) including .com, .net,
.org. New TLDs being added include .biz, .info, .pro, .aero, .name, and .museum.
The registration record of a domain name is publicly available. The standard Internet
WHOIS service allows easy access to this information. WHOIS is provided by the
whois command:
whois domain name

UNIT SUMMARY
Web design is the process of creating all the visual aspects of the interface. This
covers the layout, colour scheme, images, logos, type, design elements (such as
buttons and links), and anything else that you can see. Web development is the
process of taking finished web designs and transforming them into fully functioning,
interactive websites. Basic phases of web site design and development processing are
Information Gathering, Planning, Design, Development, Testing and Delivery and
Maintenance.
TEST YOUR SELF
1. What is the difference between web design and development

2. What does it mean information visualization

CHAPTER 3
INTRODUCTION TO HYPER TEXT MARKUP LANGUAGE (HTML)
OBJECTIVES

Discuss the meaning of HTML Design tables and organize
Use simple HTML tags information using a table tag
Write HTML codes using tags Format table using table
Run HTML codes. attributes.
embed multimedia files in Write HTML codes to process
HTML codes form information
Create links to other web Use Form action and Methods
pages. Use various form elements
UNIT STRUCTURE
3.1 Introduction to Markup 3.7 Anchors, URLs and Image Maps

Languages 3.8 Tables
3.2 Document Object Model (DOM) 3.9 HTML Frames
of HTML 3.10 HTML Forms
3.3 Headings, Paragraph and Breaks 3.11 ActiveX Objects and Applets
3.4 Formatting Text 3.12 Special HTML Elements
3.5 Working With List 3.13 Page Layout and Design
3.6 Working with Graphics Considerations

INTRODUCTION
HTML stands for Hypertext Mark-up Language. It is the language for building Web
pages and consists of standardized codes or “tags” that are used to define the
structure of information on the Web page. Web pages come in many different
varieties. In their simplest form, they contain static information, which is made up
of simple texts. On the other extreme are pages, which are highly colourful,
containing animation, sound and interactive elements. HTML codes make it possible
for web pages to have many features including bold text, italic text, heading,
paragraph breaks, tables, forms etc. Web pages generally reside on the HTTP server.
A user request a web page from an HTTP (Web) server through a web browser such
as, Internet Explorer, Mozilla Firefox, Safari, Chrome and so on, either by clicking
on the hypertext or designating a particular URL (Uniform Resource Locator). The
server then sends the requested information to the user computer.
In this unit, we shall discuss the background of HTML, structure of HTML document,
embed multimedia files in HTML codes, Create links to other web pages, organize
information using a table as well as create form and process form information using
an HTML tags.
3.1. INTRODUCTION TO MARKUP LANGUAGES

Hyper-Text Markup Language (HTML) is the language of the web. When you go to
a web page in your web browser such as Internet Explorer, Firefox, or Safari, the
browser downloads and displays HTML.
At its heart, HTML is just a document, much the same as a document you’d make
in a word processor. A program like Microsoft Word is used to view word processor
documents because it knows how to read and display them. Likewise, when it comes
to the web, the web browser is the program that knows how to read and display
documents created with HTML. Word processor documents can be created and read
with a single program.
On the other hand, HTML documents need different programs for creation and
reading; you can’t create HTML documents with a browser. You create HTML
documents using a program called an editor. This editor can be as simple as the

Notepad program that comes with Microsoft Windows or as complex as Eclipse or

Microsoft Visual Studio or Notepad++ or Sublime Text, and so on.
This chapter describes HTML documents and shows how to build an HTML page that
you can view through a web browser using the most current version, HTML5.
Understanding the HTML Building Blocks
HTML documents being just documents, they can be stored on any computer. For
instance, an HTML document can be stored in the Documents folder on your
computer. However, you’d be the only one who could view that HTML document
on your computer. To solve that problem, web documents or pages are typically
stored on a computer with more resources, known as a web server. Storing the
document on a web server enables other people to view the document.
A web server is a computer that runs special software that knows how to send (or
serve) web pages to multiple people at the same time.
HTML documents are set up in a specific order, with certain parts coming before
others. They’re structured like this so that the web browser knows how to read and
display them. When you create an HTML document, it’s expected that you’ll follow
this structure and set up your document so the browser can read it.
Document types
Web browsers can display several types of documents, not just HTML, so when
creating a web document the first thing you do is tell the browser what type of
document is coming. You declare the type of document with a special line of HTML
at the top of the document.
Web browsers can usually read documents in many formats, including HTML, XML,
XHTML, SVG, and others. Each of these documents lives by different rules and is
set up differently. The document type tells the browser what rules to follow when
displaying the document. In technical terms, the document type is called the
Document Type Declaration, or DTD for short.
In prior versions of HTML, developers needed to constantly copy and paste the
document type into the document because it was both long and complicated. With

the release of the latest version of HTML, called HTML5, the document type has
been greatly simplified. The document type for HTML5 is
<!doctype html>
This will be the first line of every HTML document that you create, before anything
else. Any time you need to display HTML, you include a document type, sometimes
called a doctype.
You may be tempted to use <!doctype html5>, but there is no version number
associated with the HTML5 document type. When the next version of HTML comes
out, you won’t have to go back and update all your document types to HTML6
(unless, of course, they change the document type definition again!).
You may see the other, older document types in your career as an HTML developer.
They include:
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01

Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0 Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML 1.1 DTD <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
Other document types exist as well, and most of them are similarly complex and
difficult to remember. If you see these document types on a web page, you’ll know
that the page may use slightly different syntax to create its HTML document.
Adding Tags
Tags are easy to read and use once you become familiar with their components.
First, all tags are composed of elements that are contained within angle brackets (<
>). The angle brackets simply tell browsers that the text between them is a HTML
command. A tag with its angle brackets looks like this:

<TAG> Second, most tags are paired, with an opening tag (<TAG>) and a closing
tag (</TAG>). Both tags look alike, except the closing tag also includes a forward
slash (/). To apply tags to information in your document, place the opening tag
before the information, and place the closing tag after the information, like this:
<TAG> information that the tag apply to </TAG>)
Including Attributes
Attributes provide extra information about a tag. For example, if you apply a heading
tag (<H1>) to a line of text, like this:
<H1> A heading goes here </H1>
You can further specify that it should be centred by using an attribute, like this:
<H1 ALIGN = "Centre"> A centred heading goes here </H2>
As a general rule, most attributes those that include only letters, digits, hypens, or
periods work fine without quotes. For example, you can type ALIGN = CENTRE or
ALIGN = "CENTRE"; all browsers should display these in the same way. Attributes
that have other characters, such as spaces, or # signs, however, do require, quotes.
For example, if you use the WIDTH = attribute to indicate percentage of the
document window, type WIDTH = "75%".
First HTML Example
To create this HTML example, just start your text editor and type in the following
HTML code and save it as first.html.
<HTML>
<HEAD>
<TITLE> A Hello World Example in HTML </TITLE>
</HEAD>
<BODY>
Hello, World !
</BODY>
</HTML

Browser will display this code as a simple web page.
Fig 3.1. Simple web page
Student Activity
1. Define HTML.
2. Describe various version of HTML.
3. What is a tag?
4. What are attributes?
5. Describe various control characters of HTML.
Basic Structure of an Html Document
Well-structured HTML documents come in these three parts:

1. A head that identifies a document as HTML and establishes its title.
2. A body that contains the content for a Web page. This part holds all displayed
text on a page, as well as most links to graphics, multimedia, locations inside
the same file, and to other Web documents.
3. A footer that labels a page by identifying its author, date of creation, and version
number.
Defining HTML Documents with the HTML Element

One should bracket an entire HTML document by the identification tags <HTML>,
to open the document, and </HTML>, to close it. These tags identify the DTD for
the document to an SGML sensitive program, to allow the program to interpret a
document's contents properly. An optional line may sometimes precede a document
head. It is called a document type prolog and describes, in SGML, that the HTML
document complies to the indicated level of the HTML DTD.
e.g.: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2// EN">
It indicates that the HTML document confirms to the HTML 3.2 DTD distributed by
the Internet Engineering Task Force (IETF). You can also tell that the DTD is PUBLIC
and is not system dependent. Finally, you can tell that the HTML tag set is defined
by the English language (the EN in the DOCTYPE statement).
Describing Documents with the Head Element
The head element is used to mark the position of the head section. The head section
contains elements that define certain information about an HTML document, such as
what its title is, who the author is, and reference information about the document.
To create a head element, start with <HEAD> tag, then include all of the elements
you want in your head section, then end the head element with a </HEAD> tag.
Naming Documents with the Title Element
Titles are displayed by browsers on the top of the page, usually in the title bar.
Every HTML document must have a title contained in a <TITLE> start tag and a
</TITLE> end tag. For example:
<HEAD>
<TITLE> A Hello World Example in HTML </TITLE>
</HEAD>
Wrapping Your Content with the Body Element
The real content for any HTML document occurs in the body section, which is
enclosed between
<BODY> and </BODY> tags.
Two Categories of Body Elements

There are two basic categories of HTML elements used in the body section:
A. Block-Level Elements
B. Text-Level Elements
A. Block-Level Elements
Block-level elements are used to define groups of text for a specific role. They include
tags that position text on the page, begin new paragraphs, set heading levels and
create lists. Some commonly used block-level elements and their tags are:
Paragraph: <P> and </P>
Heading, level one: <H1> and </H1> Heading, level two: <H2> and </H2>
Horizontal rule: <HR>
Centring: <CENTER>
B. Text-Level Elements
Text-level elements are for mark-up bits of text, including creating links, inserting
things like images or sounds, and changing the appearance of text. Some commonly
used text-level elements are:
Bold: <B> and </B> Italic: <I> and </I> Line-break: <BR>
Link anchor: <A HREF = "URL"> and </A> Image: <IMG SRC = "URL">
Footer
Technically speaking, HTML does not include a separate tag to denote a page footer.
But it is recommended because a good footer helps to identify a document's vintage
and contents and let interested readers contact the author if they spot errors or want
to provide feedback.
e.g.: Type the following HTML code, and save it as footer.html in your web folder.
<HTML>
<HEAD>
<TITLE> Rupert's Fabulous T-shirt Company </TITLE>
</HEAD>
<BODY>

<H1> Welcome to Rupert's Fabulous T-shirts! </H1>
<H2> Fabulous T-shirts Since 1752 </H2>
Our Company, <B> Rupert's Fabulous T-shirt Company </B>, is your <B>
<I> second-best choice </I> </B> for T-shirts. (The best choice is <A
HREF = "http://WWW.abcdef.com/"> Inky Fingers </A>.)
Write us at: <BR>
555 Garment Way <BR> Alameda, (A 94412
<P> (all us at (510) 555-9912. <I> <B> we’re here to help: </B> </I>
<IMG SRC = "t-shirt.jpg")
<HR>
<CENTER> Why not visit <A HREF = "http: //www.yahoo.com/"> Yahoo</A>?
</CENTER>
</BODY>
</HTML>

Fig. 3.2. Creating page footer
Student Activity
1. Describe the basic structure of an HTML document.
2. What is the function of <TITLE> tag?
3. What are block-level elements?
4. What are text-level elements?
5. What is the advantage of inserting a footer in an HTML document?
How to create and Run HTML codes
Creating an HTML document is easy. HTML allows us use only ASCII characters for
both the main text and formatting instructions. To begin coding HTML you need a
standard text editor. Notepad is readily available on computer systems. You could
also use Dreamweaver or other text editors if installed. It is not advisable to use a
word processor.

Steps
1. Launch Notepad application on your computer
2. Type in your HTML codes
3. Save the document onto a location in your computer drive with a name and the
extension “html or htm” (for example firstnoun.html)
4. To run the application, double-click on the file name in the location where it
was saved.
5. The default browser will display the application as seen in Fig. 3.1
3.2. THE HTML DOM (DOCUMENT OBJECT MODEL)
When a web page is loaded, the browser creates a Document Object Model of the
page. The HTML DOM model is constructed as a tree of Objects: The HTML DOM
Tree of Objects
With the object model, JavaScript gets all the power it needs to create dynamic
HTML:
 JavaScript can change all the HTML elements in the page

 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page

 JavaScript can remove existing HTML elements and attributes

 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard
for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and
style of a document."
The W3C DOM standard is separated into 3 different parts:

Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for HTML. It defines:
The HTML elements as objects

The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML
elements. HTML DOM methods are actions you can perform (on HTML Elements). HTML
DOM properties are values (of HTML Elements) that you can set or change.
The DOM Programming Interface
The HTML DOM can be accessed with JavaScript (and with other programming languages).
In the DOM, all HTML elements are defined as objects. The programming interface is the
properties and methods of each object.

A property is a value that you can get or set (like changing the content of an HTML
element).
A method is an action you can do (like add or deleting an HTML element).

Example
The following example changes the content (the innerHTML) of the <p> element with
id="demo":
Example
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
In the example above, getElementById is a method, while innerHTML is a property.
The getElementById Method
The most common way to access an HTML element is to use the id of the element. In the
example above the getElementById method used id="demo" to find the element.
The innerHTML Property
The easiest way to get the content of an element is by using the innerHTML property. The
innerHTML property is useful for getting or replacing the content of HTML elements. The
innerHTML property can be used to get or change any HTML element, including <html>
and <body>.
The HTML DOM Document Object
The document object represents your web page. If you want to access any element
in an HTML page, you always start with accessing the document object.
Below are some examples of how you can use the document object to access and
manipulate HTML.

Finding HTML Elements
Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name
Changing HTML Elements
Method Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML
element
element.setAttribute(attribute, value) Change the attribute value of an HTML
element
element.style.property = new style Change the style of an HTML element
Adding and Deleting Elements
Method
Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(element) Replace an HTML element
document.write(text) Write into the HTML output stream

Adding Events Handlers
Method Description
document.getElementById(id).onclick = function(){code} Adding event handler

code to an onclick event
Finding HTML Objects

The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections,
and properties. These are still valid in HTML5. Later, in HTML DOM Level 3, more
objects, collections, and properties were added.
Property Description DOM
document.anchors Returns all <a> elements that have a name 1

attribute
document.applets Returns all <applet> elements (Deprecated in 1
HTML5)
document.baseURI Returns the absolute base URI of the document 3
document.body Returns the <body> element 1
document.cookie Returns the document's cookie 1
document.doctype Returns the document's doctype 3
document.documentElement Returns the <html> element 3
document.documentMode Returns the mode used by the browser 3
document.documentURI Returns the URI of the document 3
document.domain Returns the domain name of the document server 1
document.domConfig Obsolete. Returns the DOM configuration 3
document.embeds Returns all <embed> elements 3
document.forms Returns all <form> elements 1
document.head Returns the <head> element 3
document.images Returns all <img> elements 1
document.implementation Returns the DOM implementation 3
document.inputEncoding Returns the document's encoding (character set) 3

document.lastModified Returns the date and time the document was 3

updated
document.links Returns all <area> and <a> elements that have 1
a href attribute
document.readyState Returns the (loading) status of the document 3
document.referrer Returns the URI of the referrer (the linking 1

document)
document.scripts Returns all <script> elements 3
document.strictErrorChecking Returns if error checking is enforced 3
document.title Returns the <title> element 1
document.URL Returns the complete URL of the document 1
3.3. HEADINGS, PARAGRAPH AND BREAKS

The Heading Elements
These are organised into levels <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
The size of the text is largest at <h1> and smallest for <h6>. Depending on the
font being used, text contained in <h5> and <h6> may be displayed smaller than
the default text size. You use different sizes for your headings. When headings are
displayed by a browser, one line is added before and after each of the heading
Example: Codes for Heading Elements
<html>
<head>
<body>
<h1>Heading1: Department of Information Systems </h1>
<h2> Heading2: Department of Information Systems </h2>

</body>
</head>
</html>
This will display following result:
Fig. 3.3. Example of heading element
The Paragraph Elements
Paragraph elements are used to group sentences and sections of text together.
Texts to appear in the paragraph are contained between <p> and </p> tags.
<p> Department of Information Systems, </p>
<p> School of Computing and Informatics, </p>
<p> Wachemo University </p>
This will produce the following result:
Department of Information Systems, School of Computing and Informatics,

Wachemo University

The Line Break Element
The line break tag, <br>, is used to force a new line when a browser displays the
text on the Web page document. The line break tag opening tag is used alone. It
is not used as in pairs like many other tags.
<br> Wachemo University.
Example: HTML Codes: Putting all Together
<html>
<head>
<body>
<p><b> Wachemo University </b> <br><i> Wachemo University </i>
<br><big> Wachemo University </big> <br><small> Wachemo University
</small> <br><center> Wachemo University </center> <br><sub> Wachemo
University </sub>
<br><sup> Wachemo University </sup> <br><strike> Wachemo University
</strike> <br><u> Wachemo University </u>
</p>
</body>
</head>
</html>

This will produce:
Fig. 3.4. All in one
3.4. FORMATTING TEXT
Presentation Controls / Text Presentation Tags
Presentation tags alter the display of content by affecting properties such as font
styles and horizontal rules.
Using Font-Style Elements
Font-Style elements change the appearance of text. These font-style elements are
known as physical markup. All font-style elements are a subcategory of text-level
elements, and they all require both start and end tags. They can all be nested
according to the normal rules of nesting text-level elements. The seven font-style
elements are: bold (<B>), italic (<I>), underline (<U>), strikeout (<STRIKE> or
<S>), big (<BIG>), small (<SMALL>), and teletype (<TT>).
Tag: <B> ... </B>
Tag Name: Boldface
Explanation:
It indicates that the enclosed text is in bold face type. The bold element does not

indicate strong emphasis when read by some text-only or text-to-speech browsers.
Tag: <I> ... </I>
Tag Name: Italic
Explanation:
This element marks up text in italics (text slanted diagonally upward to the right).
It is appropriate to use the italics element to indicate text in a foreign language.
e.g.: <I> corpe diem </I>
Remember that its effectiveness fades quickly with overuse. If you are
including a citation or bibliographic resource in your document, use <CITE>
instead of <I>.
Tag: <U> ... </U>
Tag Name: Underlined text
Explanation:
The Underline element underlines text.
e.g.: <U> Hello, World ! </U>
Tag: <STRIKE> ... </STRIKE>
Tag Name: Strikethrough
Explanation:
This element indicates that the enclosed text should have a line drawn through the
middle of the text.
Strikethrough text is difficult to read onscreen, so use this tag sparingly. Use
<STRIKE> to show text removed from earlier versions of a document, the old text
will appear with a line through it.
e.g.: <STRIKE> Hello! </STRIKE>

Tag: <BIG> ... </BIG>
Tag Name: Big text
Explanation:
It makes text font one size larger than the <BASEFONT> size Nesting <BIG> tags
can produce text in a larger font than using only one <BIG> tag.
e.g.: <BIG> The Big and Tall Company </BIG>
<BIG> <BIG> The Very Big and Tall Company </BIG> </BIG>
Tag: <SMALL> ... </SMALL>
Tag Name: Small text
Explanation:
This element makes text one size smaller than the basefont size. Nesting <SMALL>
tags can produce text in a smaller font than using only one <SMALL> tag.
e.g.: <SMALL> The Small and Short Company </SMALL>
Tag: <TT> ... </TT>
Tag Name: Teletype text
Explanation:
The Teletype element renders the enclosed text in teletype font. This means that
the text will be monospaced to look like a typewriter font (browsers will often use
Courier font by default).
e.g.: <P> All the vowels on my typewriter are broken. I keep typing in
a standard phrase and it comes out like this: <TT> Th qck brwn fx jmps
vr th lz dg </TT>. I think I need a type writer repairman. </P>

Fig. 3.5. A paragraph with a Teletype Text
3.5. WORKING LISTS
Lists provide methods to lay out item or element sequences in document content.
There are three main types of lists:
Unordered lists
Ordered lists
Definition lists
Ordered lists are numbered in some fashion, while unordered lists are bulleted.
Definition lists consist of a term followed by its definition. Both ordered and
unordered lists require start and end tags as well as the use of a special element to
indicate where each list item begins (the /LI tag). In addition to these three types
of lists, HTML also allows two other types of lists that are not very commonly used:
Directory lists
Menu lists
Tag: <LI>
Tag Name: List Item
Explanation: <LI> is a singleton tag.
It is a child element that is used to create a list item in an ordered list, unordered
list, menu list, or dir list.
Attributes: TYPE = (DISC ¦ SQUARE ¦ CIRCLE) or (1¦a¦A¦i¦I)

When an ordered list <OL> is used, the <LI> element will be rendered with a
number. One can control that number's appearance with the <TYPE> attribute.
Similarly, inside an unordered list <UL>, one can control the type of bullet displayed
with <TYPE>. VALUE = number changes the count of ordered lists as they progress.
Tag: <UL> ... </UL>
Tag Name: Unordered List (Block-level element)
Explanation: It creates an unordered list with bullets preceding each list item.
Unordered lists can be preceded by any one of several bullet styles: a closed circle,
an open circle, or a square.
Attributes:
COMPACT: Renders the list as compactly as possible by reducing line leading and
spacing. TYPE : (DISC ¦ SQUARE ¦ CIRCLE)
The type of bullet can be suggested with the <TYPE> attribute. The CIRCLE attribute
value is used for a hollow bullet, the DISC type creates a solid bullet, and the
SQUARE attribute value renders a solid block.
The default appearance for a list is with a disc. You can use an optional </LI> end
tag at the end of each list item.
The following example generates two separate lists:
<TITLE> Two Shopping Lists </TITLE>
<BODY>
<UL>
<LI> Eggs
<LI> Milk
<LI> Apples
<LI> Razor Blades
</UL>

<UL TYPE = "SQUARE">
<LI> Hammer
<LI> Screwdriver
<LI TYPE = "DISC"> Screws
<LI TYPE = "CIRCLE"> Chainsaw
</UL>
recognize that the TYPE attribute can be used with the <LI> tag. In fact, even
IE 4 does not recognize it.
<UL>
<LI> Body
<UL>
<LI> Head
<LI> Hand
<UL>
<LI> Finger
<LI> Thumb
</UL>
</UL>
<LI> Mind
<UL>
<LI> Brain
<UL>
<LI> Neuron
</UL>
</UL>

<LI> Spirit
<UL>
<LI> Soul
<UL>
<LI> Light body
</UL>
</UL>
</UL>
Fig. 3.6. Unordered List
Tag: <OL> ... </OL>
Tag Name: Ordered List

Explanation: These tags are used to create ordered lists. Ordered lists are identical
in behaviour to unordered lists except they use numbers instead of bullets, and you
can use an attribute to start numbering at a number other than one.
Attributes: TYPE = (1¦ a ¦ A ¦ i ¦ I)
Changes the style of the list
TYPE ="1" (Arabic numbers)
TYPE ="a" (Lowercase alphanumeric)
TYPE ="A" (Uppercase alphanumeric)
TYPE ="i" (Lowercase Roman numbers)
TYPE ="I" (Uppercase Roman numbers)
[Arabic Numbers are the default]
COMPACT: Renders the list as compactly as possible by reducing line leading and
spacing.
START = "Value" Indicates where the list numbering or lettering should begin. In
ordered lists, the <LI> tag can use the VALUE attribute to force to make a particular
list item to have a certain number.
e.g.:
<OL>
<LI> Milk
<LI> Bread
<LI> Turkey Bacon
<LI VALUE = "10"> Dark Chocolate
<LI> Avocados
</OL>

Fig. 3.7. Ordered List
Tag: <DT>
Tag Name: Definition Term
Explanation: The <DT> tag is a singleton tag. It is a child element and can only be
used in a definition list element. It creates a term that can be defined in a definition
list.
Tag: <DD>
Tag Name: Definition
Explanation: It is a singleton tag which marks the definition/description for a term in

a glossary list. It is used for glossaries or other lists in which a single term or line
needs to be associated with a block of indented text.
Tag: <DL> ... </DL>
Tag Name: Definition List
Explanation: Definition lists require a start tag (<DL>) and end tag (</DL>) and
two special elements: one for definition terms (the <DT> tag) and one for definition
(the <DD> tag). The list is rendered without bullets.
Attributes: COMPACT: Renders the list as compactly as possible by reducing line

leading and spacing.

e.g.:
<DL>
<DT> Term A
<DD> Definition of Term A
<DT> Term B
<DD> Definition Term B
</DL>
Tag: <DIR> ... </DIR>
Tag Name: Directory List
Explanation: This block-level element marks unbulleted list of short elements, such
as filenames.
e.g.:
<DIR>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</DIR>
Tag: <MENU> ... </MENU>
Tag Name: Menu List
Explanation: It encloses a menu list in which each element is typically a word or

short phrase that fits on a single line.
This list is rendered more compactly than most other list types.
Attributes: COMPACT Renders the list as compactly as possible by reducing line

leading and spacing.
e.g.:

<MENU>
<LI> Sourdough
<LI> Butter milk
<LI> Rolls
</MENU>
For both directory and menu lists, the only item that should be contained is a list
item element (the <LI> tag).
Student Activity
1. What are presentation tags?
2. Describe various presentation tags.
3. Name various types of lists that can be entered in an HTML document.
4. Differentiate between <UL> and <OL> tags.
5. Which three tags let you create the definition lists?
3.6. WORKING WITH GRAPHICS
Image Element
Images can be included within HTML documents with the IMG element tag <img>.
Images are used to enhance the appearance of web pages. Commonly used attributes
with the image element are shown in the table below:
Attribute Value Description

Alt Text Specifies an alternative text for an
Image
Src URL Specifies the URL or source of an
Image
Image Src
From the above, src attribute stands for source; that is, the source where the image
file is located. The image may be directly available on your local system, a Web

server or any standard URL. The src attribute must be properly pointed to the local
or external source.
Example: HTML Code
<img src="logo.gif" />
Image:
Fig.3.8. Wachemo University logo
HTML –Alternative Attribute
The alt attribute specifies alternate text to be displayed if for any reason, the browser
does not locate the specified image or if a user has image files disabled. For browsers
that support only text, the alternate attribute becomes very relevant also.
Example HTML Code:
<img src="wcu_logo.jpg" alt="Noun Logo" />
HTML Music (Audio) and Video Codes
Music and video can easily be inserted onto web page in a relatively easy way by
using the embed <embed> tags. In the past, multiple tags had to be used because
browsers did not have a uniform standard for defining embedded media files. A src

attribute is required to define the correct URL (local or global) of the audio or video
file in order for it to be displayed correctly. Other attributes can be set in order to
customise your web pages.
Example: HTML Code for Music (Audio)
<embed src="nounanthems.mid" />
Example: HTML Code for Video
<embed src=" files/noun.mpeg"/>
Listing of Video Media Types
Below is the list of the most commonly used file formats for the internet.
.swf files - are the file types created by Macromedia's Flash program.
.wmv files - are Microsoft Window‟s Media Video file types.
.mov files - are Apple's Quick Time Movie format.
.mpeg files - set the standard for compression movie files created by
the Moving Pictures Expert Group.
3.7. ANCHORS, URLS AND IMAGE MAPS
Anchor Element
The HTML anchor <a> element is used to create a link or hyperlink reference (href)
to a resource such as another web page, a file, a multimedia element, and so on or
to a specific place within a web page. Each hyperlink begins with an <a> tag and
ends with an </a> tag. The opening and closing tags surround the text to click to
perform hyperlink. The anchor tag requires some attribute and value to work.
Hypertext Reference (href)
The href attribute defines reference that the link refers to. This is where the user
will be taken if they wish to click this link. Hypertext references can be Internal,
Local, or Global.
Example
<a href="http://wcu.edu.et ">NOUN</a>

<a href="home.html">Home</a>
<a href="contactus.html">Contact Us</a>
<a href="register.html">Register</a>
<a href="login.html">Login</a>
In this example, when you click on NOUN, it will take you to the website wcu.edu.et
3.8. HTML TABLES

A table is layout mechanism that allows contents, which include text, images, links,
forms, and even other tables to be arranged into vertical columns and horizontal
rows. The rows and columns do not have to be visible, nor do they have to be equal
in size. Each block of space within a table is called a table data cell. The size,
background colors or background images, border colors and other formatting can
easily be achieved by using Cascading Style Sheet (CSS). In HTML, tables are created
using the table tag, in conjunction with the tr and td as the basic tags. Major
formatting can be done on table using CSS.
The <table> tag is used to begin a table. Within a table element are the <tr>
(table rows) and <td> (table columns) tags. Tables are can be used to create site
layout and server as container for forms or other elements. To create a simple table
of two rows and two columns the following HTML code can be used:
HTML Code:
<table border="1">
<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>
Basic Table
Row 1 Col 1 Row 1 Col 2

Row 2 Col 1 Row 2 Col 2
Table rows are defined by <tr> and </tr> while table data is defined by <td>
and </td>.
Let us now examine some attributes that are commonly used with tables.
Table Attributes
Commonly used table <table> attributes include align, border, border colour, with,
height, cellspacing, cellpadding, bgcolour
The Border Attribute
This attribute is used to specify whether and what type of visible border the table
will have. The values specifies range from 0 to 100 with 0 indicating no border will
be visible and 1(relatively thin bother) -100 (very thick border). In the HTML code
above, we specified the value of the border attribute as 1.
Spanning Multiple Rows and Cell
The rowspan attribute is used to span multiple rows and while the colspan is used
to span multiple columns. To set headers table you need the <th> tags. Headers
are by default bold to make them different from other content of the table.
HTML Code:
<table border="1">
<tr>
<th>Column1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Column 1</td>
<td>Row 1 Column2</td><td>Row 1 Column3</td></tr>
<tr><td>Row 2 Column2</td><td>Row 2 Column3</td></tr>
<tr><td colspan="3">Row 3 Column1</td></tr>
</table>

Column 1 Column 2 Column 3

Row 1 Column3
Row 1 Column 1
Row 1 Column2
Row 2 Column2 Row 2

Column3
Row 3 Column1
Table Heading – The <th> Element
Table heading can be defined using <th> element The <th>, or table heading
element is used to add heading to tables and distinguish column heading from table
content. Figure below shows a table that uses <td> element.
<table border="1">
<tr>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>Okeke Ayo Sule</td>
<td>Economics</td>
</tr>
<tr>
<td>Etinosa Wada Erujeje </td>
<td>Computer Science</td>
</tr>
</table>
This will produce the following result.

Name Department
Okeke Ayo Sule Economics
Etinosa Wada Erujeje Computer Science
Cell Padding and Spacing

The cellspacing Attribute: This attribute specifies the distance between the cells in
pixels. If a value is not specified for the cellspacing attribute, the default value
(usually around 2 pixels) is assumed by the browser.
The cellpadding attribute: This attribute specifies the distance in pixel between the
cell content and the edge of the cell. If you do not specify a value for the cellpadding
attributes, the default value which is 1 pixel is assumed by the browser. An example
with cellpadding set to 10 is shown in Figure below.
HTML Code:
<table border="1" cellspacing="10"
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row 1 Col1</td><td>Row 1
Col2</td></tr>
<tr><td>Row 2 Col1</td><td>Row 2 Col2</td>
</tr>
</table>
Cellspacing and Padding
Column 1 Column 2
Row 1 Col1 Row 1 Col2
Row 2 Col1 Row 2 Col2
Let us now specify a value of 10 for the cellpadding of the table and remove the
cellspacing from the previous example.
HTML Code:
<table border="1" cellpadding="10"
<tr>
<th>Column 1</th>
<th>Column 2</th>

</tr>
<tr><td>Row 1 Column1</td><td>Row Column2</td></tr>
</table>
ColPads
The value you specify for padding and spacing is interpreted by the browser as a
pixel value. The value 10 specified in the two examples are simply means 10 pixels
wide. That is, attributes that use numeric values for their measurements use pixels.
Figure below shows a table with cellpading of five and cellspacing of five.
<table border="1" cellpadding="5" cellspacing="5"> <tr>

<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td> Okeke Ayo Sule </td>
<td>Economics</td>
</tr>
<tr>
<td> Etinosa Wada Erujeje </td>
<td>Computer Science</td>
</tr>
</table>
This will produce the following result
Name Department
Okeke Ayo Sule Economics
Etinosa Wada Erujeje Computer Science
Colspan and Rowspan Attributes

The colspan Attribute: This attribute specifies the number of columns that a cell will
occupy. It is also used to merge two or more columns into a single column. The
rowspan attribute: This attribute specifies the number of rows that a cell will occupy.
The rowspan attribute is used to merge two or more rows.
Figure below shows a table with rowspans=2 and colspan=3
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Column1</td>
<td>Row 1 Column2</td><td>Row 1 Column3</td></tr>
<tr><td colspan="3">Row 3 Column1</td></tr>
</table>
This will produce the following result:
The Width and Height Attributes
The Width Attribute: This attribute specifies the width of the table in pixel or in
percentage of the Web page. The table will stretch to fit the entire width of the
page if 100% is used. If width is not specified, the browser assumes the width of a
particular table automatically by using the width of the element and text it contains.
The essence of this attribute is to customize or control the display of tables on the
Web page.
The Height Attribute: This attribute specifies the height of the table in either pixel
or the percentage of the Web page. This is more commonly used on <tr> and <td>
tags.

You can specify table width or height in terms of integer value or in terms of
percentage of available screen area. Study example below for a better understanding
of the use of these attributes.
Example:
<table border="1" width="300" height="120"> <tr>

<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
This will produce following result:
Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2
3.9. HTML FRAMES
A Frame is a rectangular region inside the browser window which can displays a
web page. A web page can contain more than one frame. Thus, using frames one
can display more than one web page in a single web page in the browser.
In the early days of HTML technology only a single page could be seen at a time in
a browser. Frames have been added to the HTML to overcome this limitation by
dividing the browser window into number of HTML documents.
Frames allow the user to arrange text and graphics into rows and columns of text
and graphics just like tables. Unlike a table cell, however, any frame can contain
links that change the contents of other frames or itself. One frame could display an
unchanging table of content while the other frames change based on which link are
made. This feature provides tremendous flexibility in achieving dynamic character
inside a web page.
Frames allow users to change the contents of on a portion of a web page being
displayed while keeping other areas unchanged. The dynamic behavior offered by
frames can be exploited to enhance a web page in variety of ways.

Frame capable of displaying a web page each can be grouped into what is called a
frameset. A web page that displays framesets contains nothing but frameset tags and
is aptly called a frameset document. Frames are introduced in a web using frame
and frameset tags discussed below.
Creating a frameset document
Before you create a frameset document create the content of each frame as an
ordinary HTML pages. Having done that a frameset document is created. A frameset
document actually has no content. It only tells the browser which page to load, and
how to arrange them in the browser window among different frames. For example,
suppose we have the following three HTML pages:
One.html
<html>
<head>
<title>Vehicles</title>
</head>
<body>
<p>This is the first page to be displayed.</p>
<table border=”1" cellpadding=”0" cellspacing=”0" style=”border-
collapse: collapse” bordercolor=”#111111" width=”79%” id=”AutoNumber1">
<tr>
<td width=”50%”><b>Items </b> </td>
<td width=”50%”><b>Rate (Rs. Per Piece)</b></td>
</tr>
<tr>
<td width=”50%”>Car</td>
<td width=”50%”>2,00,000</td>
</tr>
<tr>
<td width=”50%”>Truck</td>
<td width=”50%”>22,00,000</td>
</tr>
<tr>
<td width=”50%”>Bus</td>
<td width=”50%”>12,00,000</td>
</tr>
<tr>
<td width=”50%”>Jeep</td>

<td width=”50%”>4,00,000</td>
</tr>
<tr>
<td width=”50%”>Utility Van</td>
<td width=”50%”>6,00,000</td>
</tr>
</table>
<p> </p>
</body>
</html>
The page when opened in the browser looks like a shown below
Fig.3.9. Example One

Two.html
<html>
<head>
<title>Second Page</title>
</head>
<body>
<p>This is the second page to be displayed.</p>
<table border=”1" cellpadding=”0" cellspacing=”0" style=”border-
collapse: collapse” bordercolor=”#111111" width=”79%” id=”AutoNumber1">
<tr>


</tr>
<tr>
<td width=”50%”>Pen</td>
<td width=”50%”>20</td>
</tr>
<tr>
<td width=”50%”>Pencil</td>
<td width=”50%”>10</td>
</tr>
<tr>
<td width=”50%”>Sign pen</td>
<td width=”50%”>32</td>
</tr>
<tr>
<td width=”50%”>Marker pen</td>
<td width=”50%”>40</td>
</tr>
<tr>
<td width=”50%”>Paint brush</td>
<td width=”50%”>60</td>
</tr>
</table>
<p> </p>
</body>
</html>

Fig.3.10.Example Two
Three.html
<html>
<head>
<title>Third Page</title>
</head>
<body>
<p>This is the third page to be displayed.</p>
<table border=”1" cellpadding=”0" cellspacing=”0" style=”border- collapse:
collapse” bordercolor=”#111111" width=”79%” id=”AutoNumber1">
<tr>
</tr>
<tr>
<td width=”50%”>Refrigerator</td>
<td width=”50%”>20,000</td>
</tr>
<tr>
<td width=”50%”>Washing machine</td>
<td width=”50%”>10,000</td>
</tr>
<tr>
<td width=”50%”>Air conditioner</td>

<td width=”50%”>32,000</td>
</tr>
<tr>
<td width=”50%”>Inverter</td>
<td width=”50%”>14,000</td>
</tr>
<tr>
<td width=”50%”>Computer</td>
<td width=”50%”>34,000</td>
</tr>
</table>
<p> </p>
</body>
</html>
Fig.3.11. Example 3
Having done this, create a frameset document to arrange these pages into a single
web page as shown below:
Main.html
<html>
<head>
<title>New Page 1</title>
</head>

<frameset cols=”*,*,*”>
<frame name=”left” src=”one.htm”>
<frame name=”center” src=”two.htm”>
<frame name=”right” src=”three.htm”>
<noframes>
<body>
<p>This page uses frames, but your browser doesn’t support them.</p>
</body>
</noframes>
</frameset>
</html>
Fig.3.12. A page with a frame

The <frameset> tag is what defines a group of frames. A frameset may have the
following attributes:
Rows: This attribute indicates that the frames included into this frameset should be
arranged in rows.
Cols: This attribute indicates that the frames included into this frameset should be
arranged in columns.
The user should use Cols attribute instead of Rows if he desires frames to be side-
by-side. One must specify the sizes of the Rows on Cols either as precise pixel values
or as percentages of the total size of the browser window. The user can also use an
astrick (*) to indicate that a frame should fill whatever space is available in the
window. If more than one frame has as asterisk (*) value the space will be allotted
equally between them.

Or example, <Frameset Rows = “70, 70”> means to break the window vertically
into two frames as shown below:
Fig.3.13. Frames arranged in rows

It is advised to safest approach to use % rather than exact pixel values to indicate
the size of the rows and columns. For example to mate a left frame 35% of the
width of browser window with a right frame taking up the remaining 65%. One
should write as
< frameset cols = “35%, 65%” >
The <Frame>tag
Within the <Frameset> and </frameset> tags the user should have a <frame> tag
indicating which HTML document to display in each frame. One need not to specify
a closing </ Frame> corresponding to each of the frame> tags.
Include a SRC attribute in each < FRAME> tag with the address of the web page
to load in that frame. The user can insert the address of an image file instead of a
web page if the user just want a frame with a single image in it.
Link between frames and windows

When we give a frame a name with <FRAME NAME> attribute. We can made any
link on the change the contents of that frame using the <A target> attribute.
Consider the following modified example.
List.html
<html>
<head>
<title>Rates</title>
</head>
<body>
<p><a target=”bottom” href=”one.htm”>Vehicle</a><br>
<a target=”bottom” href=”two.htm”>Stationery</a><br>
<a target=”bottom” href=”three.htm”>Household equipment</a><br> </p>
</body>
</html>
Index.html
<html>
<head>
<title>New Page 1</title>
</head>
<frameset rows=”23%,*”>
<frame name=”top” src=”list.htm”>
<frame name=”bottom” src=”one.htm”>
</frameset>
</html>
Now load the page Index.html into the web browser, it should like shown below
Fig.3.14. Link between frames and windows
This way you can introduce a number of interactive frames in a single web page.
3.10. HTML FORMS
A form is an HTML element that contains and organises other objects or controls. Form
elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes,

and so on, which are used to take information from the user. Generally, a user completes
a form by entering text, selecting menu items and so on before submitting it to an agent
such as Web server, a mail server, etc. for processing. Within the server, the back-end
application such as CGI, ASP Script or PHP script, and so on does the required processing
on the users data as specified in the scripts. Results are rendered to the Web browsers if
there is a need to do so.
The <form> tag is used to specify the beginning of a form area on a Web page
while the </form> tag is used to specify the end of a form area. Common attributes
used to the <form> tags are name, method, and action. These attributes are used
to specify what server-side program or file will process the form, how the form
information will be sent to the server, and the name of the form.
Name Attribute: This is an optional attribute and names the form. The name of the
form is required for it to be easily access by client scripting languages, such as
JavaScript (will be treated latter) to edit and verify the form prior to sending its
information for server-side processing
Method Attribute: This attribute is optional. The values GET or POST may be
specified. When GET is specified, it causes the form data to be appended to the URL
and sent to the Web server. When the value POST is specified for the attribute, it
transmits the form data in the body of the HTTP response. This is a more referred
and acceptable method.
Example below is a sample HTML fragment that defines a simple form that allows
the user to enter a first name, last name, department and the gender of a user.
When the submit button is activated, the form will be processed based on the
instructions contained a PHP script (process.php).
Action Attribute: This attribute is optional. However, when a value is specified it

determines the server-side program or script that will process your form data using
CGI. The value should be a valid file name on a Web server. Examples PHP script
(.php extension), Sun JavaServer Pages (.jsp extension), Microsoft Active Server Pages
(.asp extension).
Example: HTML Code for Form
<FORM action="process.php” method="post"> <P>

First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
Department: <INPUT type="text" name="dept"><BR>
<INPUT type="radio" name="gender" value="Male"> Male<BR>
<INPUT type="radio" name="gender" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset" value=”Reset”>
</P>
</FORM>
Output
Fig. 3.15. Form Display on Browser
HTML – Text Field/Box
Text fields are small rectangles that allow a user to simply input some text or
numeric information, such as names, e-mail addresses, phone number, and other text
and submit the information to the web server. The form element is configured by

the <input /> tag. Common attributes of a text box are type, size, maxlength, value
and password.
HTML – Text Field Size
You can control the size of the text area by specifying the size attribute. The example
below provides three different sizes for your text fields.
The default size is usually around 20 characters long. See example below
Example: HTML Code for Input / Text Box Element
<html>
<body>
First name: <INPUT type="text" name="firstname" size="20"><BR>
Last name: <INPUT type="text" name="lastname" size="19"><BR>
Department: <INPUT type="text" name="dept"
size="15"><BR> </P>
</FORM>
</body>
</html>
Output

Fig. 3.16: Textbox
HTML –TextField Maxlength
When the value is specified, TextField Maxlength is used to limit the number of
characters a user can type into fields. It is a good programming practice to specify
the maxlength; generally, this should match the size of your field.
Example: HTML Code Textbox with Maxlength Attribute
<html>
<body>
<FORM action="process.php” method="post">
<P>
First name: <INPUT type="text" name="firstname" size="20"

maxlength="20"><BR>
Last name: <INPUT type="text" name="lastname" size="20"

maxlength="20"><BR> Department: <INPUT type="text" name="dept" size="15"
maxlength="15"><BR>
</P>
</FORM>
</body>
</html>
Practice
Run the program and attempt to enter data more than the maximum length specified.
Write down your experience in a sentence
HTML –TextField Value
The value attribute is used to pre-populate your text fields with some information.
This can then be manipulated with any scripting language such as PHP, PERL, etc.
See example below.
Example : HTML Code for TextField value

<html>
<body>
First name: <INPUT type="text" name="firstname" size="20" maxlength="20"
value="Sule"><BR>
Last name: <INPUT type="text" name="lastname" size="20" maxlength="20"
Value="Okeke"><BR>
Department: <INPUT type="text" name="dept" size="15" maxlength="15"
Value="Economics"><BR>
</P>
</FORM>
</body>
</html/>
Fig. 3.17. TextField with Values
HTML – Password Field
Password fields are a special type of <input /> tag. To implement them, change
the type attribute from text to password. Password field is used to accept information
that need to be hidden as it is entered. When a user types in information in a
password box, asterisks (i.e *) are displayed instead of the characters that are being
typed. This does not mean that the data entered is encrypted. To encrypt data one
must use a scripting language to process the data captured. See example below.
Example: Password Attribute
HTML Code:
<html>

<body>
MatNo: <INPUT type="text" name="matno" size="11" maxlength="11"><BR>
User Name: <INPUT type="text" name="username" size="20" maxlength="20"><BR>
Password: <INPUT type="password" name="pass" size="8" maxlength="8"><BR>
</P>
</FORM>
</body>
</html>
Fig. 3.18. Password Fields
HTML – Checkbox Forms
Checkboxes are another type of <input /> form. They are used for instances where
a user may wish to select some or all-multiple options. The “type” attribute must
be set to checkbox and set the name and value attributes. A sample checkbox code
and the corresponding form are shown in Example and Figure below.
Example: HTML Code for Checkbox
<html>

<body>
<p>Please select the courses to register for the semester.</p> CIT313: <input
type="checkbox" name="courses" value="CIT313" /><br />
CIT314: <input type="checkbox" name="courses" value="CIT314" /><br />
CIT315: <input type="checkbox" name=" courses" value="CIT315" /><br />
EDU325: <input type="checkbox" name="courses" value="EDU325"
/><br/>
</P>
</FORM>
</body>
</html>
Fig.3.19. Radio box
HTML –Checkboxes selected
With checkboxes, it is possible to pre-check the input boxes for viewers using the
checked attribute. For example if the course CIT 313 is a compulsory course for all
the students, it can be pre-checked. To implement this, simply set the checked

attribute to “yes”. The codes for implementing checkboxes selected and the
corresponding output are shown in example and Figure respectively.
Example: HTML Cod for Checkbox selected
<p>Please select the courses you want to register for the semester.</p> CIT313:
<input type="checkbox" checked =”yes” name="courses" value="CIT313" /><br />
CIT314: <input type="checkbox" name="courses" value="CIT314"
/><br />
CIT315: <input type="checkbox" name=" courses" value="CIT315"
/><br />
EDU325: <input type="checkbox" name="courses" value="EDU325"
/><br/>
</P>
Output
Fig. 3.20. Checkbox selected
HTML –Radio Form
Radios are types of input forms that allow a user to select exactly one item from a
group of predetermined items. In order to achieve this, we must properly name each

radio button selection accordingly. Thus, each radio button in a group is given the
same name and a unique value. The codes for implementing radio buttons and the
corresponding output are shown in example and Figure respectively.
Example: HTML Code for Radio Button
Economics: <input type="radio" name="department” /> Computer Science: <input

type="radio" name="department" /> Accounting: <input type="radio"
name="department" />
Economics: Computer Science: Accounting:
Fig. 3.21. Radio Button
By naming these three radios “department,” they are identified as being related by
the browser.
HTML –Radio Checked
By using the checked attribute, you will be able to configure the radio button to be
selected by default when displayed by the browser. Example below shows the codes
for Radio Checked while Figure 7 shows the corresponding output on a browser.
Example: HTML Code for Radio Checked
Economics: <input type="radio" name="department” checked="yes" /> Computer

Science: <input type="radio" name="department" /> Accounting: <input
type="radio" name="department" />

Economics:
Computer Science:
Accounting:
HTML - Textarea
This allows multi text field to be entered by a user. Paragraphs, essays, questions,
descriptions or memos can be cut and pasted into textareas and submitted. Textareas
have an opening tag <textarea> and a closing tag </textarea>. Example and Figure
below show the codes and the output of textarea on a browser respectively.
Example: HTML Code for Textarea
<textarea>Wachemo University, School of Computing and Informatics, Department

of Information Systems!</textarea>
Fig.3.22. Textarea
HTML – Text area Col and Rows
To adjust the size of the appearance of the text area requires two attributes, cols
and rows with numeric values. The larger the value the larger the field will appear.
Example below is a sample code for implementing text area col and row.
Example: HTML Code for col and row in textarea
<textarea cols="30" rows="10">Text Area!</textarea>

HTML –Selection Forms and Drop Down Lists
Drop down lists are the basic selection forms. The <select> container tag along with
the <option> tags are used to configure the select list. Other names used to describe
the drop down list are select list, select box, drop- down box, and option box. Drop
down lists have several options a user can select. A sample code to implement drop
down list and the corresponding output on a browser are shown in example and
Figure below.
Example: HTML Code for Drop Down List
<select>
<option>Economic </option>
<option>Computer Science </option>
<option>Accounting </option>
</select>
By default, the first coded <option> will be displayed or selected as the default.
We can change this using the selected attribute.
Example: HTML Code for Drop Down list with selected attribute
<select>
<option>Economic </option>
<option>Computer Science </option> <option selected=”yes”>Accounting </option>
</select>

Fig.3.23. Drop Down list
HTML – Submit Button
Submission buttons are a type of <input /> tag and is used to submit the form. To
achieve form submission, set the type attribute to submit. This creates a special type
of button in forms that will cause the browser to send the form data to the web
server provided there are available server scripting codes to achieve this.
HTML – Reset Button
Reset buttons exist to reset the fields of a form to its initial vales. See the codes in
example below.
Example: HTML Code for Submit and Reset Buttons
<input type="submit" value="Submit" /><br />
<input type="Reset" value="Reset" /><br />
Notice that in the above example we also changed what was written on our button
using the value attribute. This can be changed to any value you wish.
3.11. ACTIVEX OBJECTS AND APPLETS

An ActiveX control can be automatically downloaded and executed by a Web browser.
ActiveX is not a programming language, but rather a set of rules for how applications
should share information. Programmers can develop ActiveX controls in a variety of
languages, including C, C++, Visual Basic, and Java.

With ActiveX, Web sites come alive using multimedia effects, interactive objects, and
sophisticated applications. ActiveX brings innovation and interactivity to the Web.
Because it is supported by many different languages and tools, it enables developers
with varied backgrounds and expertise to bring their creativity to the Web. Based
on a refinement of the existing COM standard already known by thousands of
developers, it can leverage the knowledge and work of the development community
without a steep learning curve. And because it is a third-generation technology with
extensive third-party support, it provides the richest development platform for both
Internet and intranet Client/Server applications available today. ActiveX takes the
most creative and innovative software development efforts and enables them to work
together seamlessly in a Web site. With thousands of these software components
already existing, an exciting collection of interactive objects is available for
immediate use by Web producers.
What Are Its Primary Benefits?

Active Web Content with Impact that will attract and retain users. Open, Cross-
Platform Support on Macintosh, Windows and UNIX operating systems. Familiar Tools
from a wide assortment of tools and programming language vendors, including Visual
Basic, Visual C++, Borland Delphi, Borland C++, Java, and Java-enabled tools.
Developers can use what they know and be productive immediately. Existing
Inventory of ActiveX controls available today for immediate use by Web producers.
Industry Standards, with built-in support for key industry and de-facto marketplace
standards, including HTML, TCP/IP, Java, COM, and others.
What Are Its Elements?

ActiveX includes both client and server technologies.
ActiveX Controls are the interactive objects in a Web page that provide
interactive and user-controllable functions.
ActiveX Documents enable users to view non-HTML documents, such as
Microsoft Excel or Word files, through a Web browser.
Active Scripting controls the integrated behavior of several ActiveX controls
and/or Java Applets from the browser or server.
Java Virtual Machine is the code that enables any ActiveX-supported browser
such as Internet Explorer 3.0 to run Java applets and to integrate Java applets
with ActiveX controls.

ActiveX Server Framework provides a number of Web server-based functions

such as security, database access, and others.
3.12. SPECIAL HTML ELEMENTS
Html Tags with Description

Following tags have been introduced in older versions of HTML but all the tags
marked with are part of HTML-5.
Tag Description Version
 Specifies a comment
<!DOCTYPE> Specifies the document type
<a> Specifies an anchor
<abbr> Specifies an abbreviation
<acronym> Specifies an acronym
<address> Specifies an address element
<applet> Deprecated. Specifies an applet
<area> Specifies an area inside an image map
<article> Specifies an article
Specifies some content loosely related to the page

<aside> content. If it is removed, the remaining content
still makes sense
<audio> Specifies a sound content
<b> Specifies bold text
<base> Specifies a base URL for all the links in a page
<basefont> Deprecated. Specifies a base font

<bdo> Specifies the direction of text display
Represents text that must be isolated from its

surrounding for bidirectional text formatting. It
<bdi>
allows embedding a span of text with a different,
or unknown, directionality
<bgsound> Specifies background music
<big> Specifies big text
<blink> Specifies a text which blinks
<blockquote> Specifies a long quotation
<body> Specifies the body element
<br> Inserts a single line break
<button> Specifies a push button
<canvas> For making graphics with a script
<caption> Specifies a table caption
<center> Deprecated. Specifies centered text
<cite> Specifies a citation
<code> Specifies computer code text
<col> Specifies attributes for table columns
<colgroup> Specifies groups of table columns
<comment> Puts a comment in the document
<datalist> A list of options for input values

<dd> Specifies a definition description
<del> Specifies deleted text
<dfn> Specifiesa definition term
<dialog> Specifiesa dialog box or window
<dir> Deprecated. Specifies a directory list
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<em> Specifies emphasized text
Specifiesa container for an external (non-HTML)

<embed>
application
<fieldset> Specifies a fieldset
<figcaption> Specifiesa caption for a <figure> element
<figure> Specifies self-contained content
<font> Deprecated. Specifies text font, size, and color
<footer> Specifies a footer for a document or section
<form> Specifies a form
<frame> Specifies a sub window (a frame)
<frameset> Specifies a set of frames
<h1> to <h6> Specifies header 1 to header 6

<head> Specifies information about the document
<header> Specifies a header for a document or section
<hr> Specifies a horizontal rule
<html> Specifies an html document
<i> Specifies italic text
<iframe> Specifies an inline sub window (frame)
<ilayer> Specifies an inline layer
<img> Specifies an image
<input> Specifies an input field
<ins> Specifies inserted text
<isindex> Deprecated. Specifies a single-line input field
<kbd> Specifies keyboard text
<keygen> Generate key information in a form
<label> Specifies a label for a form control
<layer> Specifies a layer
<legend> Specifies a title in a fieldset
<li> Specifies a list item
<link> Specifies a resource reference
Specifies the main or important content in the

<main> document. There is only oneelement in the
document

<map> Specifies an image map
Specifies a text highlighted for reference purposes,

<mark>
that is for its relevance in another context
<marquee> Creates a scrolling-text marquee
<menu> Deprecated. Specifies a menu list
Specifies a command/menu item that the user can

<menuitem>
invoke from a popup menu
Specifies meta data of an html document which is

<meta>
not displayed on the page
<meter> Specifies a scalar measurement within a known

range (a gauge)
<multicol> Specifies a multicolumn text flow
Specifies a section that contains only navigation

<nav>
links
<nobr> No breaks allowed in the enclosed text
Specifies content to be presented by browsers that

<noembed>
do not support the <embed>tag
<noframes> Specifies a noframe section
<noscript> Specifies a noscript section
<object> Specifies an embedded object
<ol> Specifies an ordered list
<optgroup> Specifies an option group
<option> Specifies an option in a drop-down list

<output> Specifies the result of a calculation
<p> Specifies a paragraph
<param> Specifies a parameter for an object
Deprecated. Render the remainder of the

<plaintext>
document as preformatted plain text
<pre> Specifies preformatted text
<progress> Specifies a completion progress of a task
<q> Specifies a short quotation
Specifies to show browsers that do not support

<rp>
the ruby element
<rt> Specifies an text ruby annotation
<ruby> Specifies an ruby annotation
<s> Deprecated. Specifies strikethrough text
<samp> Specifies sample computer code
<script> Specifies a script
<section> Specifies a section in a document
<select> Specifies a selectable list
<spacer> Specifies a white space
<small> Specifies small text
Specifies a media resources for media elements,

<source>
defined inside video or audio elements

<span> Specifies a section in a document
<strike> Deprecated. Specifies strikethrough text
<strong> Specifies strong text
<style> Specifies a style definition
<sub> Specifies subscripted text
Specifies a summary, caption, or legend for a

<summary>
given <details>
<sup> Specifies superscripted text
<table> Specifies a table
<tbody> Specifies a table body
<td> Specifies a table cell
<textarea> Specifies a text area
<tfoot> Specifies a table footer
<th> Specifies a table heading
<thead> Specifies a table header
<time> Specifies a date and time <details>
<title> Specifies the document title
<tr> Specifies a table row
<track> Specifies a text tracks used in mediaplayers
<tt> Specifies teletype text

<u> Deprecated. Specifies underlined text
<ul> Specifies an unordered list
<var> Specifies a variable
<video> Specifies a text tracks used in media players
Indicates a potential word break point within a

<wbr>
<nobr> section
<xmp> Deprecated. Specifies preformatted text
3.13. PAGE LAYOUT AND DESIGN CONSIDERATIONS
An effective website design should fulfil its intended function by conveying its
particular message whilst simultaneously engaging the visitor. Several factors such
as consistency, colours, typography, imagery, simplicity, and functionality contribute
to good website design.
When designing a website there are many key factors that will contribute to how it
is perceived. A well-designed website can help build trust and guide visitors to take
action. Creating a great user experience involves making sure your website design is
optimised for usability (form and aesthetics) and how easy is it to use (functionality).
Below are some guidelines that will help you when considering your next web
project.
1. Website Purpose
Your website needs to accommodate the needs of the user. Having a simple clear
intention on all pages will help the user interact with what you have to offer. What
is the purpose of your website? Are you imparting practical information like a ‘How
to guide’? Is it an entertainment website like sports coverage or are you selling a
product to the user? There are many different purposes that websites may have but
there are core purposes common to all websites.
Describing Expertise

Building Your Reputation

Generating Leads
Sales and After Care
2. Simplicity
Simplicity is the best way to go when considering the user experience and the
usability of your website. Below are ways to achieve simplicity through design.
Colour
Colour has the power to communicate messages and evoke emotional responses.
Finding a colour palette that fits your brand will allow you to influence your
customer’s behaviour towards your brand. Keep the colour selection limited to less
than 5 colours. Complementary colours work very well. Pleasing colour combinations
increase customer engagement and make the user feel good.
Type
Typography has an important role to play on your website. It commands attention

and works as the visual interpretation of the brand voice. Typefaces should be legible
and only use a maximum of 3 different fonts on the website.
Imagery
Imagery is every visual aspect used within communications. This includes still
photography, illustration, video and all forms of graphics. All imagery should be
expressive and capture the spirit of the company and act as the embodiment of their
brand personality. Most of the initial information we consume on websites is visual
and as a first impression, it is important that high-quality images are used to form
an impression of professionalism and credibility in the visitors’ minds.
3. Navigation
Navigation is the wayfinding system used on websites where visitors interact and
find what they are looking for. Website navigation is key to retaining visitors. If the
website navigation is confusing visitors will give up and find what they need
elsewhere. Keeping navigation simple, intuitive and consistent on every page is key.
4. F-Shaped Pattern Reading

The F- based pattern is the most common way visitors scan text on a website. Eye-
tracking studies have found that most of what people see is in the top and left areas
of the screen. The F shaped layout mimics our natural pattern of reading in the
West (left to right and top to bottom). An effectively designed website will work
with a reader’s natural pattern of scanning the page.
5. Visual Hierarchy
Visual hierarchy is the arrangement of elements in order of importance. This is done
either by size, colour, imagery, contrast, typography, whitespace, texture and style.
One of the most important functions of visual hierarchy is to establish a focal point;
this shows visitors where the most important information is.
6. Content
An effective website has both great design and great content. Using compelling
language great content can attract and influence visitors by converting them into
customers.
7. Grid Based Layout

Grids help to structure your design and keep your content organised. The grid helps
to align elements on the page and keep it clean. The grid-based layout arranges
content into a clean rigid grid structure with columns, sections that line up and feel
balanced and impose order and results in an aesthetically pleasing website.
8. Load Time
Waiting for a website to load will lose visitors. Nearly half of web visitors expect a
site to load in 2 seconds or less and they will potentially leave a site that isn’t
loaded within 3 seconds. Optimising image sizes will help load your site faster.
9. Mobile Friendly
More people are using their phones or other devices to browse the web. It is
important to consider building your website with a responsive layout where your
website can adjust to different screens.
UNIT SUMMARY

On World Wide Web, the documents are written in a special language called HTML
(Hyper Text Markup Language). An HTML document must have <HTML>, <HEAD>
and <BODY> tags, where <HEAD> and </ HEAD> specify the header part and
<BODY> and <//BODY> specify by the document body.
Special characters <, > and & are printed using < > and & escape
sequences. In HTML, lists can be of three types: unnumbered, numbered, and
definition. The unnumbered lists are defined with <UL> tag; numbered lists are
defined with <OL> tag. The items in these lists are defined with <LI> tag. The
definition lists are defined with <DL> tag, definition terms are defined with <DT>
tag and definition descriptions are defined with <DD> tag.
Images can be inserted in text using <IMG> tag. Its source is specified with attribute,
alternate text with alt attribute, alignment with align attribute and size with height
and width attributes. Hyperlinks can be created using <A> tag. Linking to another
document is called external linking. Linking within the same document is called
internal linking.
This unit also described the origin of HTML and the various advancement till date.
It shows how the text content of an HTML document could be formatted with
relevant HTML tags. By formatting, we mean layout and some presentation details.
We also discussed how multimedia elements could be embedded into HTML
documents to enhance their interactivity or appearance.
HTML allows a designer to create table by using table tags in conjunction with the
tr and td as the basic tags. Important attributes, which provide additional information
about table elements, were also covered in this unit.
In this unit, we discussed how to create and use form on Web Pages. You also learnt
how to configure elements of form such as text boxes, labels, checkboxes etc.
TEST YOUR SELF
1. What is the meaning of HTML?

2. List the structure of HTML

3. List and explain the meaning of five HTML tags

4. Mention the names of five Web browsers
5. Write HTML codes to display your personal details to include name, address,
department and year of study.

CHAPTER 4
CASCEDING STYLE SHEETS (CSS)
OBJECTIVES

Explain the meaning and importance of CSS
Use CSS to format web pages
Add CSS to HTML files.
UNIT STRUCTURE
4.1. CSS Basics 4.7. Layout and Positioning Properties

4.2. Style Sheet Rules 4.8. Type of CSS Styles
4.3. CSS Selectors 4.9. Style Inheritance
4.4. Style Properties 4.10. Style Rules Precedence
4.5. Font and Text properties 4.11. Style Sheet Layer
4.6. Foreground and Background properties

INTRODUCTION
You have heard style sheets mentioned quite a bit already, and now we will finally
put them to work and start giving our pages some much-needed style. Cascading
Style Sheets (CSS) is the W3C standard for defining the presentation of documents
written in HTML, and in fact, any XML language. Presentation, again, refers to the
way the document is delivered to the user, whether shown on a computer screen,
displayed on a cell phone, printed on paper, or read aloud by a screen reader. With
style sheets handling the presentation, HTML can handle the business of defining
document structure and meaning, as intended.
CSS is a separate language with its own syntax. This chapter covers CSS terminology
and fundamental concepts that will help you get your bearings for the upcoming
chapters, where you will learn how to change text and font styles, add colors and
backgrounds, and even do basic page layout.
4.1. CSS BASICS

Cascading style sheet is defined as a style sheet in which, all the style information
of a web page can be defined. CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what background images
or colors are used, as well as a variety of other effects. CSS is easy to learn and
understand but it provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.
The Benefits of CSS
Not that you need further convincing that style sheets are the way to go, but here
is a quick rundown of the benefits of using style sheets.
Precise type and layout controls. You can achieve print-like precision using
CSS. There is even a set of properties aimed specifically at the printed page.

Less work. You can change the appearance of an entire site by editing one
style sheet. This also ensures consistency of formatting throughout the site.
More accessible sites. When all matters of presentation are handled by CSS,
you can mark up your content meaningfully, making it more accessible for
non-visual or mobile devices.
4.2. STYLE SHEET RULES
How Style Sheets Work
It’s as easy as 1-2-3!
1. Start with a document that has been marked up in HTML.

2. Write style rules for how you’d like certain elements to look.
3. Attach the style rules to the document. When the browser displays the
document, it follows your rules for rendering elements.
Marking Up the Document
You know a lot about marking up content from the previous chapters. For example,
you know that it is important to choose elements that accurately describe the meaning
of the content. You also heard me say that the markup creates the structure of the
document, sometimes called the structural layer, upon which the presentation layer
can be applied.
Writing the Rules
A style sheet is made up of one or more style instructions (called style rules) that
describe how an element or group of elements should be displayed. The first step in
learning CSS is to get familiar with the parts of a rule. As you’ll see, they’re fairly
intuitive to follow. Each rule selects an element and declares how it should look.
The following example contains two rules. The first makes all the h1 elements in
the document green; the second specifies that the paragraphs should be in a large,
sans-serif font. Sans-serif fonts do not have a little slab (a serif) at the ends of strokes
and tend to look more sleek and modern.
h1 {color: green ;}
p { font-size: large; font-family: sans-serif; }

In CSS terminology, the two main sections of a rule are the selector that identifies the
element or elements to be affected, and the declaration that provides the rendering
instructions. The declaration, in turn, is made up of a property (such as color) and its value
(green), separated by a colon and a space. One or more declarations are placed inside curly
brackets, as shown in 4.1.
Fig.4.1 the parts of a style rule.
Selectors
In the previous small style sheet example, the h1 and p elements are used as
selectors. This is called an element type selector, and it is the most basic type of
selector. The properties defined for each rule will apply to every h1 and p element
in the document, respectively.
Another type of selector is an ID selector, which selects an element based on the

value of an element’s id attribute. It is indicated with the # symbol. For example,
the selector #recipe targets an element with id="recipe". Upcoming sections,
introduce you to more sophisticated selectors that you can use to target elements,
including ways to select groups of elements, and elements that appear in a particular
context.
Declarations
The declaration is made up of a property/value pair. There can be more than one
declaration in a single rule; for example, the rule for the p element shown earlier
in the code example has both the font-size and font-family properties. Each
declaration must end with a semicolon to keep it separate from the following
declaration. If you omit the semicolon, the declaration and the one following it will
be ignored. The curly brackets and the declarations they contain are often referred
to as the declaration block (Figure 4.1).

Because CSS ignores whitespace and line returns within the declaration block, authors
typically write each declaration in the block on its own line, as shown in the
following example. This makes it easier to find the properties applied to the selector
and to tell when the style rule ends.
p {
font-size: large;
font-family: sans-serif;
Note that nothing has really changed here there is still one set of curly brackets,
semicolons after each declaration, and so on. The only difference is the insertion of
line returns and some character spaces for alignment.
4.3. CSS SELECTORS
Many different types of CSS selector allow you to target rules to specific elements
in an HTML document. CSS selectors are case sensitive, so they must match element
names and attribute values exactly.
Selector Meaning Example
Universal Applies to all elements in the *{} Targets all elements on the page
Selector document
Type Matches element names h1, h2, h3 {}

Selector
Targets the <h1>, <h2> and <h3> elements
Class Matches an element whose class .note {} Targets any element whose class
Selector attribute has a value that matches attribute has a value of note
the one specified after the period
p.note {} Targets only <p> elements whose
(or full stop) symbol
class attribute has a value of note
Id Selector Matches an element whose id #introduction {}

attribute has a value that matches
Targets the element whose id attribute has a
the one specified after the pound or
value of introduction
hash(#) symbol

Child Matches an element that is a direct li>a {}

Selector child of another
Targets any <a> elements that
are children of an <li> element (but not other

<a> elements in the page
Descendant Matches an element that is a p a {}

Selector descendent of another specified
Targets any <a> elements that
element (not just a direct child of
sit inside a <p> element, even if there are
that element)
other elements nested between them
Adjacent Matches an element that is the next h1+p {}

Sibling sibling of another
Targets the first <p> element
Selector
after any <h1> element (but not other <p>
elements)
General Matches an element that is a sibling h1~p {}

Sibling of another, although it does not
If you had two <p> elements that are siblings
have to be the directly preceding
Selector of an <h1> element, this rule would apply
element
to both
4.4. STYLE PROPERTIES

The heart of style sheets lies in the collection of standard properties that can be
applied to selected elements. The complete CSS specification defines dozens of
properties for everything from text indents to how table headers should be read
aloud. This book covers the most common and best-supported properties that you
can begin using right away.
Values
Values are dependent on the property. Some properties take length measurements,
some take color values, and others have a predefined list of keywords. When you
use a property, it is important to know which values it accepts; however, in many
cases, simple common sense will serve you well. Authoring tools such as Brackets
or Sublime Text 3 or Dreamweaver provide hints of suitable values to choose from.

Exercise
<!DOCTYPE html>
<html>
<head>
<title>My First CSS</title>
<style>
h1 { color: green;}
p { font-size: large; font-family: sans-serif; }
</style>
</head>
<body>
<p>Enjoy the power of CSS</p>
</body>
</html>
4.5. FONT AND TEXT PROPERTIES

Font-family
The font-family property allows you to specify the typeface that should be used for
any text inside the element(s) to which a CSS rule applies. The value of this property
is the name of the typeface you want to use. The people who are visiting your site
need the typeface you have specified installed on their computer in order for it to
be displayed.
You can specify a list of fonts separated by commas so that, if the user does not
have your first choice of typeface installed, the browser can try to use an alternative
font from the list. Look the Example below:
<!DOCTYPE html>
<html>

<head>
<title>Font Family</title>
<style type="text/css">
body { font-family: Georgia, Times, serif;}
h1, h2 { font-family: Arial, Verdana, sans-serif;}
.credits { font-family: "Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed"
href="http://en.wikipedia.org/wiki/
Briard">briard</a>, or berger de brie, is
a large breed of dog traditionally used as
a herder and guardian of sheep...</p>
</body>
</html>
If a font name is made up of more than one word, it should be put in double quotes.
Font-size
The font-size property enables you to specify a size for the font. There are several
ways to specify the size of a font. The most common are:
Pixels

Pixels are commonly used because they allow web designers very precise control
over how much space their text takes up. The number of pixels is followed by the
letters px.
h1 { font-size: 4px; }
Percentages
The default size of text in browsers is 16px. So a size of 75% would be the equivalent
of 12px, and 200% would be 32px. If you create a rule to make all text inside the
<body> element to be 75% of the default size (to make it 12px), and then specify
another rule that indicates the content of an element inside the <body> element
should be 75% size, it will be 9px (75% of the 12px font size).
h1 { font-size: 150%; }
ems
An em is equivalent to the width of a letter m.
h1 { font-size: 1.5em; /* sets all h1s to 1.5em */}
p { font-size: .875em /* 14 pixels based on 16px default */}
Font-weight
The font-weight property allows you to create bold text. This property commonly
takes two values:
Normal
This causes text to appear at a normal weight.
.credits { font-weight: normal;}
Bold
This causes text to appear bold.
In this example, you can see that the element whose class attribute has a value of
credits has been bolded.
.credits { font-weight: bold;}

Font-style
The font-style property affects the posture of the text that is, whether the letter
shapes are vertical (normal) or slanted (italic and oblique).
Values: normal | italic | oblique
Default: normal
Applies to: all elements
Inherits: yes
Use the font-style property to make text italic. Another common use is to make text
that is italicized in the browser’s default styles (such as emphasized text) display as
normal. There is an oblique value that specifies a slanted version of the font;
however, browsers generally display oblique the same as italic.
Font Properties
Property Description Values

font Sets all the font font-style, font-variant, font-weight, font-
properties in one size/line-height, font-family, caption, icon,
declaration menu, message-box, small-caption, status-
bar, inherit
font- Specifies the font family family-name, generic-family, inherit
family for text
font-size Specifies the font size of xx-small, x-small, small, medium, large,
text x-large, xx-large, smaller, larger, length,
%, inherit
font-style Specifies the font style normal, italic, oblique, inherit
for text
font- Specifies whether or not normal, small-caps, inherit
variant a text should be
displayed in a small-
caps font
font- Specifies the weight of normal, bold, bolder, lighter,
weight a font 100, 200, 300, 400, 500, 600, 700, 800,
900, inherit
Careful, many of these are not supported!

Text-transform
The text-transform property is used to change the case of text giving it one of the
following values:
uppercase
This causes the text to appear uppercase.
lowercase
This causes the text to appear lowercase.
capitalize
This causes the first letter of each word to appear capitalized.
In this example, the <h1> element is uppercase, the <h2> element is lowercase,
and the credits are capitalized. In the HTML, the word by in the credits had a
lowercase b.
h1 {text-transform: uppercase;}
h2 {text-transform: lowercase;}
.credits {text-transform: capitalize;}
Text-decoration
The text-decoration property allows you to specify the following values:
none
This removes any decoration already applied to the text.
underline
This adds a line underneath the text.
overline
This adds a line over the top of the text.
line-through

This adds a line through words.
blink
This animates the text to make it flash on and off (however this is generally frowned
upon, as it is considered rather annoying).
In this example, the credits have been underlined. Also, the name of the breed
(which is a link) is not underlined, which it would be by default because it is a
link.
.credits { text-decoration: underline;}
a { text-decoration: none;}
Text-align
The text-align property allows you to control the alignment of text. The property
can take one of four values:
left
This indicates that the text should be left-aligned.
right
This indicates that the text should be right-aligned.
center
This allows you to center text.
justify
This indicates that every line in a paragraph, except the last line, should be set to
take up the full width of the containing box.
h1 {text-align: left;}
p {text-align: justify;}
.credits {text-align: right;}
Text-shadow

The text-shadow property has become commonly used despite lacking support in all
browsers. It is used to create a drop shadow, which is a dark version of the word
just behind it and slightly offset. It can also be used to create an embossed effect
by adding a shadow that is slightly lighter than the text.
The value of this property is quite complicated because it can take three lengths and
a color for the drop shadow.
The first length indicates how far to the left or right the shadow should fall. The
second value indicates the distance to the top or bottom that the shadow should
fall. The third value is optional and specifies the amount of blur that should be
applied to the drop shadow. The fourth value is the color of the drop shadow.
Example:
p.one { background-color: #eeeeee; color: #777777;
text-shadow: 1px 1px 0px #000000;}
p.two { background-color: #dddddd; color: #777777;
p.three { background-color: #cccccc; color: #ffffff;
p.four { background-color: #bbbbbb; color: #cccccc;
text-shadow: -1px -2px #777777;}
p.five { background-color: #aaaaaa; color: #ffffff;
text-shadow: -1px -1px #777777;}
Text Properties
Property Description Values

color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between lines normal, number, length, %
letter- Increase or decrease the space normal, length
spacing between characters
text-align Aligns the text in an element left, right, center, justify

text- Adds decoration to text none, underline, overline,

decoration line-through
text-indent Indents the first line of text in an length, %
element
text- Controls the letters in an element none, capitalize, uppercase,
transform lowercase
4.6. FOREGROUND AND BACKGROUND PROPERTIES
The color property allows you to specify the color of text inside an element. You
can specify any color in CSS in one of three ways: RGB values, HEX codes, or Color
names. For example:
/* color name */
h1 { color: DarkCyan;}/* hex code */
h2 { color: #ee3e80;}/* rgb value */
p { color: rgb(100,100,90);}
Background-Color
CSS treats each HTML element as if it appears in a box, and the background-color
property sets the color of the background for that box. If you do not specify a
background color, then the background is transparent.
By default, most browser windows have a white background, but browser users can
set a background color for their windows, so if you want to be sure that the
background is white you can use the background-color property on the <body>
element.
Example:
body { background-color: rgb(200,200,200);}
h1 { background-color: DarkCyan;}
h2 { background-color: #ee3e80;}
p { background-color: white;}

4.7. LAYOUT AND POSITIONING PROPERTIES

The position property specifies the type of positioning method used for an element
(static, relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an element.
There are five different position values:
static
relative
fixed
absolute
sticky
Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first.
They also work differently depending on the position value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:
position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element
will cause it to be adjusted away from its normal position. Other content will not
be adjusted to fit into any gap left by the element.

position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means
it always stays in the same place even if the page is scrolled. The top, right, bottom,
and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have
been located. Notice the fixed element in the lower-right corner of the page. Here
is the CSS that is used:
Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned

ancestor (instead of positioned relative to the viewport, like fixed). However; if an
absolute positioned element has no positioned ancestors, it uses the document body,
and moves along with page scrolling.
Note: Absolute positioned elements are removed from the normal flow, and can
overlap elements.
Here is a simple example:

Here is the CSS that is used:
Example
div.relative {
position: relative;
width: 400px;
height: 200px;
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;

4.8. TYPE OF CSS STYLES

In the previous exercise, we embedded the style sheet right in the document by
using the style element. That is just one of three ways that style information can be
applied to an HTML document. You’ll get to try out each of these soon, but it is
helpful to have an overview of the methods and terminology up front.
1. External style sheets
An external style sheet is a separate, text-only document that contains a number of

style rules. It must be named with the .css suffix. The .css document is then linked
to (via the link element) or imported (via an @ import rule in a style sheet) into
one or more HTML documents. In this way, all the files in a website may share the
same style sheet. This is the most powerful and preferred method for attaching style
sheets to content.
Example:
<link rel=”stylesheet” href=”example.css” type=”text/css”>
Or
@import url(“examples.css”); /*this should be inside style element*/
2. Embedded style sheets
This is the type of style sheet we worked with in the exercise. It is placed in a
document via the style element, and its rules apply only to that document. The style
element must be placed in the head of the document.
<head>
<title>Required document title here</title>
<style>
/* style rules go here */
</style>
</head>
3. Inline styles

You can apply properties and values to a single element by using the style attribute
in the element itself, as shown here:
<h1 style="color: red">Introduction</h1>
To add multiple properties, just separate them with semicolons, like this:
<h1 style="color: red; margin-top: 2em">Introduction</h1>
Inline styles apply only to the particular element in which they appear. Inline styles
should be avoided, unless it is absolutely necessary to override styles from an
embedded or external style sheet. Inline styles are problematic in that they intersperse
presentation information into the structural markup. They also make it more difficult
to make changes because every style attribute must be hunted down in the source.
Comments in Style
Sheets Sometimes it is helpful to leave yourself or your collaborators comments in a

style sheet. CSS has its own comment syntax, shown here:
/* comment goes here */
Content between the /* and */ will be ignored when the style sheet is parsed, which
means you can leave comments anywhere in a style sheet, even within a rule:
body {
font-size: small;
/* change this later */
One use for comments is to label sections of the style sheet to make things easier
to find later; for example:
4.9. STYLE INHERITANCE

Are your eyes the same color as your parents’? Did you inherit their hair color?
Well, just as parents pass down traits to their children, styled HTML elements pass
down certain style properties to the elements they contain.

Notice in one of exercise, when we styled the p elements in a large, sans-serif font,
the em element in the second paragraph became large and sans-serif as well, even
though we didn’t write a rule for it specifically (figure 4.2). That is because the em
element inherited the styles from the paragraph it is in. Inheritance provides a
mechanism for styling elements that don’t have any explicit styles rules of their own.
Fig.4.2 The em element inherits styles that were applied to the paragraph.
Document structure
This is where an understanding of your document’s structure becomes important. As

I’ve noted before, HTML documents have an implicit structure, or hierarchy. For
example, the sample article we’ve been playing with has an html root element that
contains a head and a body, and the body contains heading and paragraph elements.
A few of the paragraphs, in turn, contain inline elements such as images (img) and
emphasized text (em). You can visualize the structure as an upside-down tree,
branching out from the root, as shown in figure 4.3.

Fig.4.3. The document tree structure of the sample document
Parents and children
The document tree becomes a family tree when it comes to referring to the
relationship between elements. All the elements contained within a given element
are said to be its descendants. For example, the h1, h2, p, em, and img elements
in the document in figure 4.3 are all descendants of the body element.
An element that is directly contained within another element (with no intervening

hierarchical levels) is said to be the child of that element. Conversely, the containing
element is the parent. For example, the em element is the child of the p element,
and the p element is its parent.
All of the elements higher than a particular element in the hierarchy are its ancestors.
Two elements with the same parent are siblings. We don’t refer to “aunts” or
“cousins,” so the analogy stops there. This may all seem academic, but it will come
in handy when you’re writing CSS selectors.
Pass it on
When you write a font-related style rule using the p element as a selector, the rule
applies to all of the paragraphs in the document as well as the inline text elements
they contain. We’ve seen the evidence of the em element inheriting the style
properties applied to its parent (p) back in figure 4.2. Figure 4.4 demonstrates what

is happening in terms of the document structure diagram. Note that the img element
is excluded because font-related properties do not apply to images.
Figure 4.4. Certain properties applied to the p element are inherited by their
children.
Notice that I’ve been saying “certain” properties are inherited. It’s important to
note that some style sheet properties inherit and others do not. In general, properties
related to the styling of text font size, color, style, and the like are passed down.
Properties such as borders, margins, backgrounds, and so on that affect the boxed
area around the element tend not to be passed down. This makes sense when you
think about it. For example, if you put a border around a paragraph, you would not
want a border around every inline element (such as em, strong, or a) it contains as
well.
You can use inheritance to your advantage when writing style sheets.
4.10. STYLE RULES PRECEDENCE

Ever wonder why they are called “cascading” style sheets? CSS allows you to apply
several style sheets to the same document, which means there are bound to be
conflicts. For example, what should the browser do if a document’s imported style
sheet says that h1 elements should be red, but its embedded style sheet has a rule
that makes h1s purple? The two style rules with h1 selectors have equal weight,
right?
The folks who wrote the style sheet specification anticipated this problem and devised
a hierarchical system that assigns different weights to the various sources of style

information. The cascade refers to what happens when several sources of style
information vie for control of the elements on a page: style information is passed
down (“cascades” down) until it is overridden by a style rule with more weight.
Weight is considered based on the priority of the style rule source, the specificity of
the selector, and rule order.
Priority
If you don’t apply any style information to a web page, it renders according to the
browser’s internal style sheet. We’ve been calling this the default rendering; the W3C
calls it the user agent style sheet. Individual users can apply their own styles as well
(the user style sheet, also called the reader style sheet), which override the default
styles in their browser. However, if the author of the web page has attached a style
sheet (the author style sheet), that overrides both the user and the user agent styles.
The only exception is if the user has identified a style as “important,” in which
case that style will override all competing styles. This permits users to keep settings
accommodating a disability such as extra-large type for sight impairment.
Specificity
It is possible for conflicts to arise in which an element is getting style instructions

from more than one rule. For example, there may be a rule that applies to paragraphs
and another rule for a paragraph that has the ID “intro.” Which rule should the
intro paragraph use?
When two rules in a style sheet conflict, the type of selector is used to determine
the winner. The more specific the selector, the more weight it is given to override
conflicting declarations. In our example, the selector that includes the ID name
(#intro) is more specific than a general element selector (like p), so that rule would
apply to the “intro” paragraph, overriding the rules set for all paragraphs.
Assigning Importance
If you want a rule not to be overridden by a subsequent conflicting rule, include

the !important indicator just after the property value and before the semicolon for
that rule. For example, to guarantee paragraph text will be blue, use the following
rule:

p {color: blue !important;}
Even if the browser encounters an inline style later in the document (which should
override a document-wide style sheet), like this one: <p style="color: red"> that
paragraph will still be blue because the rule with the !important indicator cannot
be overridden by other styles in the author’s style sheet.
The only way an !important rule may be overridden is by a conflicting rule in a

reader (user) style sheet that has also been marked !important. This is to ensure
that special reader requirements, such as large type or high-contrast text for the
visually impaired, are never overridden. Based on the previous examples, if the
reader’s style sheet includes this rule p {color: black;} the text would still be blue
because all author styles (even those not marked !important) take precedence over
the reader’s styles. However, if the conflicting reader’s style is marked !important,
like this p {color: black !important;} the paragraphs will be black and cannot be
overridden by any author-provided style.
Rule order
After the entire style sheet sources have been sorted by priority, and after all the
linked and imported style sheets have been shuffled into place, there are likely to
be conflicts in rules with equal weights. When that is the case, the order in which
the rules appear is important. The cascade follows a “last one wins” rule. Whichever
rule appears last has the last word.
Within a style sheet, if there are conflicts within style rules of identical weight,
whichever one comes last in the list “wins.” Take these three rules, for example:
<style>
p { color: red; }
p { color: blue; }
p { color: green; }
</style>
In this scenario, paragraph text will be green because the last rule in the style sheet
that is, the one closest to the content in the document overrides the earlier ones.

Procedurally, the paragraph is assigned a color, then assigned a new one, and finally
a third one (green) that gets used. The same thing happens when conflicting styles
occur within a single declaration stack:
<style>
p { color: red;
color: blue;
color: green; }
</style>
The resulting color will be green because the last declaration overrides the previous
two. It is easy to accidentally override previous declarations within a rule when you
get into compound properties, so this is an important behaviour to keep in mind.
That is a very simple example. What happens when style sheet rules from different
sources come into play?
Let’s consider an HTML document that has an embedded style sheet (added with the
style element) that starts with an @import rule for importing an external .css file.
That same HTML document also has a few inline style attributes applied to particular
h1 elements.
STYLE DOCUMENT ( external.css) :
h1 { color: red }
HTML DOCUMENT:
<!DOCTYPE html>
<html>
<head>
<title>…</title>
<style>
@import url(external.css); /* set to red first */
h1 { color: purple;} /* overridden by purple */

</style>
</head>
<body>
<h1 style="color: blue">Heading</h1> /* blue comes last and wins */
</body>
</html>
When the browser parses the file, it gets to the imported style sheet first, which sets
h1s to red. Then it finds a rule with equal weight in the embedded style sheet that
overrides the imported rule, so h1s are set to purple. As it continues, it encounters
a style rule right in an h1 that sets its color to blue. Because that rule came last,
it’s the winner, and that h1 will be blue.
Note that other h1s in this document without inline style rules would be purple,
because that was the last h1 color applied to the whole document.
CSS Units of Measurement
It’s a good to get familiar with the units of measurement used in CSS. You’ll be
using them to set font size, the width and height of elements, margins, indents, and
so on. The complete list is provided in the following section.
CSS3 provides a variety of units of measurement. They fall into two broad categories:
absolute and relative.
A. Absolute units
Absolute units have predefined meanings or real-world equivalents. With the

exception of pixels, they are not appropriate for web pages that appear on screens.
px pixel, defined as equal to 1/96 of an inch in CSS3.
in inches.
mm millimeters.
cm centimeters.

q ¼ millimeter.
pt points (1/72 inch). Points are a unit commonly used in print design.
pc picas (1 pica = 12 points or 1/6 inch). Points are a unit commonly used in print
design.
B. Relative units
Relative units are based on the size of something else, such as the default text size
or the size of the parent element.
em a unit of measurement equal to the current font size.
ex x-height, approximately the height of a lowercase “x” in the font.
rem root em, equal to the em size of the root element (html).
ch zero width, equal to the width of a zero (0) in the current font and size.
vw viewport width unit, equal to 1/100 of the current viewport (browser window)
width.
vh viewport height unit, equal to 1/100 of the current viewport height.
vmin viewport minimum unit, equal to the value of vw or vh, whichever is smaller.
vmax viewport maximum unit, equal to the value of vw or vh, whichever is larger.
Although not a “unit,” percentages are another common measurement value for web
page elements. Percentages are calculated relative to another value, such as the value
of a property applied to the current element or its parent or ancestor. The spec
always says what a percentage value for a property is calculated on.
When used for page layouts, percentage values ensure that page elements stay
proportional.
Child elements do not inherit the relative values of their parent, but rather the
resulting calculated value.
Border, Margin & Padding

Every box has three available properties that can be adjusted to control its appearance:
Border
Every box has a border (even if it is not visible or is specified to be 0 pixels wide). The
border separates the edge of one box from another.
Margin
Margins sit outside the edge of the border. You can set the width of a margin to create a
gap between the borders of two adjacent boxes.
Padding
Padding is the space between the border of a box and any content contained within it.
Adding padding can increase the readability of its contents.
If you specify a width for a box, then the borders, margin, and padding are added to
its width and height.
border-width
The border-width property is used to control the width of a border. The value of this
property can either be given in pixels or using one of the following values:
thin medium thick

(You cannot use percentages with this property.)
You can control the individual size of borders using four separate properties:
border-top-width border-bottom-width
border-right-width border-left-width
You can also specify different widths for the four border values in one property, like so:
border-width: 2px 1px 1px 2px;
The values here appear in clockwise order: top, right, bottom, left.
Example:
p.one {border-width: 2px;}
p.two {border-width: thick;}

p.three { border-width: 1px 4px 12px 4px;}
border-style
You can control the style of a border using the border-style property. This property can take
the following values:
solid a single solid line

dotted a series of square dots (if your border is 2px wide, then the dots are 2px squared
with a 2px gap between each dot)
dashed a series of short lines
double two solid lines (the value of the border-width property creates the sum of the
two lines)
groove appears to be carved into the page ridge appears to stick out from the page
inset appears embedded into the page
outset looks like it is coming out of the screen
hidden / none no border is shown
You can individually change the styles of different borders using:
border-top-style border-right-style
border-left-style border-bottom-style
Example:
p.one {border-style: solid;}
p.two {border-style: dotted;}
p.three {border-style: dashed;}
border-color
You can specify the color of a border using either RGB values, hex codes or CSS color
names. It is possible to individually control the colors of the borders on different sides of a
box using:
border-top-color border-bottom-color
border-right-color border-left-color
It is also possible to use a shorthand to control all four border colors in the one property:
border-color: darkcyan deeppink darkcyan deeppink;
The values here appear in clockwise order: top, right, bottom, left.

Example:
p.one { border-color: #0088dd;}
p.two { border-color: #bbbbaa #111111 #ee3e80 #0088dd;}
The border property allows you to specify the width, style and color of a border in one
property (and the values should be coded in that specific order).
Example:
p { width: 250px; border: 3px dotted #0088dd;}
i.e. border-width: 3px; border-style: dotted; border-color: #0088dd;
Border-radius
CSS3 introduces the ability to create rounded corners on any box, using a property called
border-radius. The value indicates the size of the radius in pixels.
Older browsers that do not support this property will show a box with right-angled corners.
The -moz-border-radius and -webkit-border-radius properties are not in the CSS specification.
However, they are used in some versions of Chrome, Firefox, and Safari to offer early
support for this style (and therefore can be used to achieve this effect in more browsers).
You can specify individual values for each corner of a box using:
border-top-right-radius border-bottom-left-radius
border-bottom-right-radius border-top-left-radius
You can also use a shorthand of these four properties (in clockwise order: top, right, bottom,
left). For example:
border-radius: 5px, 10px, 5px, 10px;
box-shadow
The box-shadow property allows you to add a drop shadow around a box. It works just like
the text-shadow property. It must use at least the first of these two values as well as a
color:
Horizontal Offset: Negative values position the shadow to the left of the box.
Vertical Offset: Negative values position the shadow to the top of the box.

Blur Distance: If omitted, the shadow is a solid line like a border.
Spread Of Shadow: If used, a positive value will cause the shadow to expand in all directions,
and a negative value will make it contract.
The inset keyword can also be used before these values to create an inner-shadow.
Chrome, Firefox, and Safari were quick to support this property using the -moz-box-shadow
and -webkit-box-shadow properties. These are not in the CSS specification but using them
can help this style to work in these browsers.
padding
The padding property allows you to specify how much space should appear between the
content of an element and its border. The value of this property is most often specified in
pixels (although it is also possible to use percentages or ems). If a percentage is used, the
padding is a percentage of the browser window (or of the containing box if it is inside
another box).
If a width is specified for a box, padding is added onto the width of the box.
As you can see, the second paragraph here is much easier to read because there is a space
between the text and the border of the box. The box is also wider because it has padding.
You can specify different values for each side of a box using:
padding-top padding-bottom
padding-right padding-left
Or you can use a shorthand (where the values are in clockwise order: top, right, bottom,
left):
padding: 10px 5px 3px 1px;
Example:
p { width: 275px; border: 2px solid #0088dd; }
p.example { padding: 10px;}
</style>
<body>

<p>Analog synths produce a wave sound, whereas the sounds stored on a digital
synth have been sampled and then turned into numbers.</p>
<p class="example">Analog synths produce a wave sound, whereas the sounds

stored on a digital synth have been sampled and then ... </p>
</body>
Result:
margin
The margin property

controls the gap between boxes. Its value is commonly given n pixels, although you may
also use percentages or ems. If one box sits on top of another, margins are collapsed, which
means the larger of the two margins will be used and the smaller will be disregarded.
If the width of a box is specified then the margin is added to the width of the box.
You can specify values for each side of a box using:
margin-top margin-bottom
margin-right margin-left
You can also use the shorthand (where the values are in clockwise order: top, right, bottom,
left):
margin: 1px 2px 3px 4px;
Sometimes you might see the following, which means that the left and right margins should
be 10 pixels and the top and bottom margins should be 20 pixels:
margin: 10px 20px;
(This same shorthand shown above can also be applied to padding.)

The value of the margin property is not inherited by child elements in the same way
that the color value of the font-family property is, so you need to specify the margin
for every element that needs to use it.
Example:
p { width: 200px; border: 2px solid #0088dd; padding: 10px;}
p.example { margin: 20px;}
</style>
<p>Analog synthesizers are often said to have a "warmer" sound than their
digital counterparts. </p>
<p class="example">Analog synthesizers are often said to have a "warmer" sound

than their digital counterparts.</p>
Result:
Cursor
The cursor property allows you to control the type of mouse cursor that should be displayed
to users. For example, on a form you might set the cursor to be a hand when the user
hovers over it.
Here are the most commonly used values for this property:

A. auto
B. crosshair
C. default
D. pointer
E. move
F. text
G. wait
H. help
url("cursor.gif");
You should only use these values to add helpful information for users in places
they would expect to see that cursor. (For example, using a crosshair on a link
might confuse users because they are not used to seeing it.)
visibility
The visibility property allows you to hide boxes from users but it leaves a space
where the element would have been. This property can take two values:
A. hidden This hides the element.

B. visible This shows the element.
If the visibility of an element is set to hidden, a blank space will appear in its
place. If you do not want a blank space to appear, then you should use the
display property with a value of none instead (as covered on the previous page).
Please note that anyone can view the contents of any elements whose visibility
property has been set to hidden by viewing the source in their browser.
Display
The display property allows you to turn an inline element into a block-level
element vice versa, and can also be used to hide an element from the page. The
values this property can take are:
A. inline: this causes a block-level element to act like an inline element.

B. block: this causes an inline element to act like a block-level element.
C. inline-block: this causes a block-level element to flow like an inline element,
while retaining other features of a block-level element.
D. none: this hides an element from the page. In this case, the element acts as
though it is not on the page at all (although a user could still see the content
of the box if they used the view source option in their browser).

If you use this property, it is important to note that inline boxes are not
supposed to create block-level elements.
Example:
Overflow
When an element is sized too small for its contents, you can specify what to do
with the content that doesn’t fit by using the overflow property.

Values: visible | hidden | scroll | auto
A. visible
The default value is visible, which allows the content to hang out over the
element box so that it all can be seen.
B. hidden
When overflow is set to hidden, the content that does not fit gets clipped off and
does not appear beyond the edges of the element’s content area.
C. scroll
When scroll is specified, scrollbars are added to the element box to let users scroll
through the content. Be aware that they may become visible only when you click
the element to scroll it. There is an issue with this value on old iOS (<4), Android
(<2.3), and a few other older mobile browsers, so it may be worthwhile to use
a simpler alternative to overflow: scroll for mobile.
D. auto
The auto value allows the browser to decide how to handle overflow. In most
cases, scrollbars are added only when the content doesn’t fit and they are needed.
E. Float
Simply stated, the float property moves an element as far as possible to the left
or right, allowing the following content to wrap around it. It is a unique feature
built into CSS with some interesting behaviours.
Values: left | right | none
The best way to explain floating is to demonstrate it. In this example, the float
property is applied to an img element to float it to the right. FIGURE below
shows how the paragraph and the contained image are rendered by default (top)
and how it looks when the float property is applied (bottom).
The Markup
<p><img src="icecreambowl.png" alt=""> After the cream is frozen

rather
stiff,…
The Styles

img { float: right; margin:1em;
Result:
Position
The position property indicates that an element is to be positioned and specifies

which positioning method to use.
Values: static | relative | absolute | fixed
A. static
This is the normal positioning scheme in which elements are positioned as they
occur in the normal document flow.
B. relative
Relative positioning moves the element box relative to its original position in the
flow. The distinctive behaviour of relative positioning is that the space the element
would have occupied in the normal flow is preserved as empty space.
C. absolute
Absolutely positioned elements are removed from the document flow entirely and
positioned with respect to the viewport or a containing element. Unlike relatively
positioned elements, the space they would have occupied is closed up. In fact,
they have no influence at all on the layout of surrounding elements.
D. fixed

The distinguishing characteristic of fixed positioning is that the element stays in

one position in the viewport even when the document scrolls. Fixed elements are
removed from the document flow and positioned relative to the viewport rather
than another element in the document.
E. sticky
Sticky positioning is a combination of relative and fixed in that it behaves as

though it is relatively positioned, until it is scrolled into a specified position
relative to the viewport, at which point it remains fixed.
4.11. STYLE SHEET LAYERS
In CSS, layers refer to applying the z-index property to elements that overlap with each
other.
The z-index property, when used in conjunction with the position property, enables you
to specify which element should appear on top in the event of an overlap. An overlap
can easily occur when using the position property, and this is often desirable when
creating advanced layouts.
A z-index property can help you to create more complex webpage layouts. Following is
the example which shows how to create layers in CSS.
<html>
<head>
</head>
<body>
<div style = "background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color:yellow;

width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style = "background-color:green;

width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>
</html>
It will produce the following result:
Fig.4.5. Style sheet layers
UNIT SUMMARY
Cascading style sheets refers to a unique processing approach by which multiple
style sheets may be applied to single Web page but is supported by all style sheet
languages. There are many advantages, which result from using style sheets to
apply stylistic formatting to Web pages. For example, a Web developer can
separate documents available to many pages in a Web site, thus enabling the
developer to apply similar styles across many documents while having to modify
styles in one file when there is a need.
TEST YOURSELF
1. What is a style sheet selector?

2. How can styles be referenced in an HTML page?

3. What property can be set in order to change the colour of paragraph text to red
(from the default black)?
4. Write an internal style for producing an <H2> heading tag that has a blue
background, is in italics, and is centred.

CHAPTER 5
CLIENT-SIDE SCRIPTING LANGUAGE
OBJECTIVES
Explain JavaScript
Write simple JavaScript programs
Use arithmetic operators
Use JavaScript to make web pages interactive.
Implement logical construct with JavaScript
Apply decision statements with JavaScript
Use loops with JavaScript.
Implement JavaScript Popup Boxes
Explain the meaning of event and event handlers
Apply JavaScript Functions
Use JavaScript to implement events and event handlers.
UNIT STRUCTURE
5.1. Introduction
5.2. Client-Side Scripting Using JavaScript
5.3. Dynamic HTML (DHTML

INTRODUCTION
5.1. INTRODUCTION
JavaScript is a programming language that adds interactivity and custom behaviors

to our sites. It is a client-side scripting language, which means it runs on the
user’s machine and not on the server, as other web programming languages such
as PHP and Ruby do. That means JavaScript (and the way we use it) is reliant
on the browser’s capabilities and settings. It may not even be available at all,
because either the user has chosen to turn it off or because the device does not
support it, which good developers keep in mind and plan for. JavaScript is also,
what is known as a dynamic and loosely typed programming language.
What It Isn’t
Right off the bat, the name is pretty confusing. Despite its name, JavaScript has
nothing to do with Java. It was created by Brendan Eich at Netscape in 1995 and
originally named “LiveScript.” But Java was all the rage around that time, so
for the sake of marketing, “LiveScript” became “JavaScript.” Or just “JS,” if
you want to sound as cool as one possibly can while talking about JavaScript.
JS also has something of a bad reputation. For a while it was synonymous with
all sorts of unscrupulous internet shenanigans—unwanted redirects, obnoxious
pop-up windows, and a host of nebulous “security vulnerabilities,” just to name
a few. There was a time when JavaScript allowed less reputable developers to do
all these things (and worse), but modern browsers have largely caught on to the
darker side of JavaScript development and locked it down. We shouldn’t fault
JavaScript itself for that era, though. As the not-soold cliché goes, “with great
power comes great responsibility.” JavaScript has always allowed developers a
tremendous amount of control over how pages are rendered and how our browsers
behave, and it’s up to us to use that control in responsible ways.
What It Is
Now we know what JavaScript isn’t: it isn’t related to Java, and it isn’t a
mustachioed villain lurking within your browser, wringing its hands and waiting
to alert you to “hot singles in your area.” Let’s talk more about what JavaScript
is. JavaScript is a lightweight but incredibly powerful scripting language. We most

frequently encounter it through our browsers, but JavaScript has snuck into
everything from native applications to PDFs to ebooks. Even web servers
themselves can be powered by JavaScript.
As a dynamic programming language, JavaScript doesn’t need to be run through

any form of compiler that interprets our human-readable code into something the
browser can understand. The browser effectively reads the code the same way we
do and interprets it on the fly. JavaScript is also loosely typed. All this means is
that we don’t necessarily have to tell JavaScript what a variable is. If we’re
setting a variable to a value of 5, we don’t have to programmatically specify that
variable as a number; that is, 5 is a number, and JavaScript recognizes it as such.
What JavaScript Can Do
Most commonly we’ll encounter JavaScript as a way to add interactivity to a

page. Whereas the “structural” layer of a page is our HTML markup, and the
“presentational” layer of a page is made up of CSS, the third “behavioral” layer
is made up of our JavaScript. All of the elements, attributes, and text on a web
page can be accessed by scripts using the DOM (Document Object Model), Using
JavaScript. We can also write scripts that react to user input, altering either the
contents of the page, the CSS styles, or the browser’s behavior on the fly.
Adding Javascript to a Page
As with CSS, you can embed a script right in a document or keep it in an external
file and link it to the page. Both methods use the script element.
A. Embedded Script
To embed a script on a page, just add the code as the content of a script element:
<script> … JavaScript code goes here </script>
B. External Scripts
The other method uses the src attribute to point to a script file (with a .js suffix)
by its URL. In this case, the script element has no content:
<script src="my_script.js"></script>
The advantage to external scripts is that you can apply the same script to multiple
pages (the same benefit external style sheets offer). The downside, of course, is

that each external script requires an additional HTTP request of the server, which
slows down performance.
Script Placement
The script element can go anywhere in the document, but the most common
places for scripts are in the head of the document and at the very end of the
body. It is recommended that you don’t sprinkle them throughout the document,
because they would be difficult to find and maintain. For most scripts, the end
of the document, just before the </body> tag, is the preferred placement because
the browser will be done parsing the document and its DOM structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body> …contents of page…
<script src="script.js">
//java scripts here
</script>
</body>
</html>
Consequently, that information will be ready and available by the time it gets to
the scripts, and they can execute faster. In addition, the script download and
execution blocks the rendering of the page, so moving the script to the bottom
improve the perceived performance. However, in some cases, you might want
your script to do something before the body completely loads, so putting it in
the head will result in better performance.
5.2. CLIENT-SIDE SCRIPTING USING JAVASCRIPT
There are a few common syntactical rules that wind their way through all of
JavaScript. It is important to know that JavaScript is case-sensitive. A variable
named myVariable, a variable named myvariable, and a variable named
MYVariable will be treated as three different objects. Also, whitespace such as

tabs and spaces is ignored, unless it’s part of a string of text and enclosed in
quotes. All of the character spaces added to scripts such as the ones in this
chapter are for the benefit of humans—they make reading through the code easier.
JavaScript doesn’t see them.
Statements
A script is made up of a series of statements. A statement is a command that

tells the browser what to do. Here is a simple statement that makes the browser
display an alert with the phrase “Thank you”:
alert("Thank you.");
The semicolon at the end of the statement tells JavaScript that it’s the end of the
command, just as a period ends a sentence. According to the JavaScript standard,
a line break will also trigger the end of a command, but it is a best practice to
end each statement with a semicolon.
Comments
JavaScript allows you to leave comments that will be ignored at the time the
script is executed, so you can provide reminders and explanations throughout
your code. This is especially helpful if this code is likely to be edited by another
developer in the future.
There are two methods of using comments. For single-line comments, use two
slash characters (//) at the beginning of the line. You can put single-line comments
on the same line as a statement, as long as the comment comes after the
statement. It does not need to be closed, as a line break effectively closes it.
// This is a single-line comment.
Multiple-line comments use the same syntax that you’ve seen in CSS. Everything
within the /* */ characters is ignored by the browser. You can use this syntax to
“comment out” notes and even chunks of the script when troubleshooting.
/* This is a multiline comment.
Anything between these sets of characters will
be completely ignored when the script is executed.
This form of comment needs to be closed. */
Variables

A variable is like an information container. You give it a name and then assign
it a value, which can be a number, text string, an element in the DOM, or a
function anything, really. This gives us a convenient way to reference that value
later by name. The value itself can be modified and reassigned in what-ever way
our scripts’ logic dictates. The following declaration creates a variable with the
name foo and assigns it the value 5:
var foo = 5;
We start by declaring the variable by using the var keyword. The single equals
sign (=) indicates that we are assigning it a value. Because that’s the end of our
statement, we end the line with a semicolon. Variables can also be declared
without the var keyword, which affects what part of your script will have access
to the information they contain.
There are a few rules for naming a variable:
It must start with a letter or an underscore.

It may contain letters, digits, and underscores in any combination.
It may not contain character spaces. As an alternative, use underscores in
place of spaces, or close up the space and use camel case instead (for
example, my_variable or myVariable).
It may not contain special characters (e.g., ! . , / \ + * =).
Remember: JavaScript is case-sensitive, and so are those variable names.
Data types
The values we assign to variables fall under a few distinct data types:
A. Undefined
The simplest of these data types is likely undefined. If we declare a variable by
giving it a name but no value, that variable contains a value of undefined.
var foo;
alert(foo); // This will open a dialog containing "undefined".
B. Null
Similar to undefined, assigning a variable of null (again, case-sensitive) simply
says, “Define this variable, but give it no inherent value.”
var foo = null;
alert(foo); // This will open a dialog containing "null".

C. Numbers
You can assign variables numeric values.
var foo = 5;
alert(foo); // This will open a dialog containing "5".
The word foo now means the exact same thing as the number 5 as far as
JavaScript is concerned. Because JavaScript is loosely typed, we don’t have to
tell our script to treat the variable foo as the number 5. The variable behaves
the same as the number itself, so you can do things to it that you would do to
any other number by using classic mathematical notation: +, -, *, and / for plus,
minus, multiply, and divide, respectively. In this example, we use the plus sign
(+) to add foo to itself (foo + foo).
var foo = 5;
alert(foo + foo); // This will alert "10".
D. Strings
Another type of data that can be saved to a variable is a string, which is basically
a line of text. Enclosing characters in a set of single or double quotes indicates
that it’s a string, as shown here:
var foo = "five";
alert( foo ); // This will alert "five"
The variable foo is now treated exactly the same as the word five. This applies
to any combination of characters: letters, numbers, spaces, and so on. If the value
is wrapped in quotation marks, it will be treated as a string of text. If we were
to wrap the number 5 in quotes and assign it to a variable, that variable wouldn’t
behave as a number; instead, it would behave as a string of text containing the
character “5.”
Earlier we saw the plus sign (+) used to add numbers. When the plus sign is used
with strings, it sticks the strings together (called concatenation) into one long
string, as shown in this example.
var foo = "bye"
alert(foo + foo); // This will alert "byebye"
Notice what the alert returns in the following example when we define the value
5 in quotation marks, treating it as a string instead of a number:

var foo = "5";
alert( foo + foo ); // This will alert "55"
If we concatenate a string and a number, JavaScript will assume that the number
should be treated as a string as well, since the math would be impossible.
var foo = "five";
var bar = 5;
alert( foo + bar ); // This will alert "five5"
E. Booleans
We can also assign a variable a true or false value. This is called a Boolean value,
and it is the lynchpin for all manner of advanced logic. Boolean values use the
true and false keywords built into JavaScript, so quotation marks are not
necessary.
var foo = true; // The variable "foo" is now true
Just as with numbers, if we were to wrap the preceding value in quotation marks,
we’d be saving the word true to our variable instead of the inherent value of
true (i.e., “not false”).
In a sense, everything in JavaScript has either an inherently true or false value.

For example, null, undefined, 0, and empty strings (" ") are all inherently false,
while every other value is inherently true. These values, although not identical
to the Booleans true and false, are commonly referred to as being “truthy” and
“falsy.” I promise I didn’t make that up.
Arrays
An array is a group of multiple values (called members) that can be assigned to
a single variable. The values in an array are said to be indexed, meaning you
can refer to them by number according to the order in which they appear in the
list. The first member is given the index number 0, the second is 1, and so on,
which is why one almost invariably hears us nerds start counting things at zero
because that’s how JavaScript counts things, and many other programming
languages do the same. We can avoid a lot of future coding headaches by keeping
this in mind.
So, let’s say our script needs all of the variables we defined earlier. We could
define them three times and name them something like foo1, foo2, and so on, or
we can store them in an array, indicated by square brackets ([ ]).

var foo = [5, "five", "5"];
Now anytime you need to access any of those values, you can grab them from
the single foo array by referencing their index number:
alert( foo[0] ); // Alerts "5"
alert( foo[1] ); // Alerts "five"
alert( foo[2] ); // Also alerts "5"
.length
.length is just one of the standard properties and methods of the Array object in
JavaScript that returns the length of an array or string.
var items = ["foo", "bar", "baz"]; // First we create an array.
for( var i = 0; i < items.length; i++ ) {
alert( items[i] ); // This will alert each item in the array.
Instead of using a number to limit the number of times the loop runs, we’re
using a property built right into JavaScript to determine the “length” of our
array, which is the number of items it contains. .length is just one of the standard
properties and methods of the Array object in JavaScript. In our example, there
are three items in the array, so it will loop three times.
Comparison Operators
There is a set of special characters called comparison operators that evaluate and
compare values in different ways:
== Is equal to
!= Is not equal to
=== Is identical to (equal to and of the same data type)
!== Is not identical to
> Is greater than
>= Is greater than or equal to
< Is less than
<= Is less than or equal to
Examples:

lert( 5 == 5 ); // This will alert "true"
alert( 5 != 6 ); // This will alert "true"
alert( 5 < 1 ); // This will alert "false"
alert( "5" == 5 ); // This will alert "true". They're both "5".
alert( "5" === 5 ); /* This will alert "false". They're both "5", but
they're not the same data type. */
alert( "5" !== 5 ); /* This will alert "true", since they're not the same
data type. */
Mathematical operators
The other type of operator is a mathematical operator, which performs

mathematical functions on numeric values (and, of course, variables that contain
numeric values). We touched briefly on the straightforward mathematical operators
for add (+), subtract (-), multiply (*), and divide (/). There are also some useful
shortcuts you should be aware of:
+= Adds the value to itself

++ Increases the value of a number (or a variable containing a number value) by
1
-- Decreases the value of a number (or a variable containing a number value) by
1
if/else statements
if/else statements are how we get JavaScript to ask itself a true/false question.
if( true ) {
// Do something.
Example
var foo = [5, "five", "5"];
if( foo[1] === "five" ) {
alert("This is the word five, written in plain English.");
Example

var test = "testing";
if( test == "testing" ) {
alert( "You haven't changed anything." );
} else {
alert( "You've changed something!" );
Loops
There are several ways to write a loop, but the for method is one of the most
popular. The basic structure of a for loop is as follows:
for( initialize the variable; test the condition; alter the value; ) {
// do something
Here’s an example of a for loop in action:

for( var i = 0; i <= 2; i++ ) {
alert( i ); // This loop will produce three alerts, reading "0",
"1", and "2" respectively.
JavaScript Popup Boxes
Popup boxes are used to display a message, along with an “OK” button.
Depending on the popup box, it might also have a “Cancel” button, and one
might also be prompted to enter some text JavaScript has three different types of
popup box available for one to use. They are Alert box, Confirm box, and Prompt
box.
A. Alert Box
An alert box is often used if one wants to make sure information comes through
to the user. When an alert box pops up, the user will have to click "OK" to
proceed.
Syntax alert("sometext");

Example
<html>
<head>
<script type="text/javascript"> function show_confirm()
{
var r=confirm("Press a button"); if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm
box" />
</body>
</html>
Fig. 5.1: Alert
B. Confirm Box
A confirm box is often used if one wants the user to verify or accept something.
When a confirm box pops up, the user will have to click either “OK” or “Cancel”
to proceed. If the user clicks “OK”, the box returns true. If the user clicks
“Cancel”, the box returns false.
Syntax confirm("sometext");
Example
<html>

<head>
<scripttype="text/javascript"> functionshow_confirm()
{
varr=confirm("Pressabutton"); if(r==true)
{
alert("You pressed OK!");
}
else
{
alert("YoupressedCancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm
box"/>
</body>
</html>
C. Prompt Box
A prompt box is often used if the user is required to input a value before entering
a page. When a prompt box pops up, the user will have to click either “OK” or
“Cancel” to proceed after entering an input value. If the user clicks “OK”, the
box returns the input value. If the user clicks “Cancel,” the box returns null.
Syntax prompt("sometext","defaultvalue");
Example
<html>
<head>
<script type="text/javascript"> function show_prompt()
var name=prompt("Please enter your name","Myname"); if (name!=null &&

name!="") {
document.write("Hello " + name + "! You are Welcome!");

</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box"

/>
</body>
</html>
Fig. 5.2: Prompt
Functions
A function is a bit of code for performing a task that doesn’t run until it is
referenced or called. alert() is a function built into our browser. It’s a block of
code that runs only when we explicitly tell it to.
There are two types of functions: those that come “out of the box” (native
JavaScript functions) and those that you make up yourself (custom functions).
A. Native functions
Hundreds of predefined functions are built into JavaScript, including these:
alert(), confirm(), and prompt(): these functions trigger browser-level dialog

boxes.
Date(): returns the current date and time.

parseInt("123"): this function will, among other things, take a string data
type containing numbers and turn it into a number data type. The string
is passed to the function as an argument.
setTimeout(functionName, 5000): executes a function after a delay. The
function is specified in the first argument, and the delay is specified in
milliseconds in the second argument (in the example, 5,000 milliseconds,
which equals 5 seconds).
B. Custom functions
To create a custom function, we type the function keyword followed by a name
for the function, followed by opening and closing parentheses, followed by
opening and closing curly brackets:
function name() {
// Our function code goes here.
Example:
function foo() {
alert("Our function just ran!");
// This code won't run until we call the function 'foo()'
We can then call that function and execute the code inside it anywhere in our
script by writing the following:
foo(); // Alerts "Our function just ran!"
Arguments
function alertArraySize(arr) {
alert(arr.length);
Then,
var test = [1,2,3,4,5];
alertArraySize(test); // Alerts "5"
Returning a value

function addNumbers(a,b) {
return a + b;
Then,
alert( addNumbers(2,5) ); // Alerts "7"
Events
An event is an action that can be detected with JavaScript, such as when the
document loads or when the user clicks an element or just moves her mouse over
it. HTML 4.0 made it possible for a script to be tied to events on the page,
whether initiated by the user, the browser itself, or other scripts. This is known
as event binding.
In scripts, an event is identified by an event handler. For example, the onload

event handler triggers a script when the document loads, and the onclick and
onmouseover handlers trigger a script when the user clicks or mouses over an
element, respectively. Table below lists some of the most common event handlers.
Keep in mind that these are also case-sensitive.

Exercise
1. Given the following array var myArray = [1, "two", 3, "4"]; write what
the alert message will say for each of these examples:
a. alert( myArray[0] );
b. alert( myArray[0] + myArray[1] );
c. alert( myArray[2] + myArray[3] );
d. alert( myArray[2] – myArray[0] );
2. What will each of these alert messages say?

a. var foo = 5;
foo += 5;
alert( foo );
b. i = 5;

i++;
alert( i );
c. var foo = 2;
alert( foo + " " + "remaining");
d. var foo = "Mat";
var bar = "Jennifer";
if( foo.length > bar.length ) {
alert( foo + " is longer." );
} else {
alert( bar + " is longer." );
e. alert( 10 === "10" );
3. Match each event handler with its trigger.
a. onload 1. The user finishes a form and hits the submit button.
b. onchange 2 The page finishes loading.
c. onfocus 3. The pointer hovers over a link.
d. onmouseover 4. A text-entry field is selected and ready for typing.
e. onsubmit 5. A user changes her name in a form field.
THE DOM (Document Object Model)
The DOM gives us a way to access and manipulate the contents of a document.
We commonly use it for HTML, but the DOM can be used with any XML language
as well. It provides a structured map of the document, as well as a set of methods
to interface with the elements contained therein.
The Node Tree

A simple way to think of the DOM is in terms of the document tree as diagrammed
in figure 5.1. You saw documents diagrammed in this way when you were learning
about CSS selectors.
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h1>Heading</h1>
<p>Paragraph text with a <a href="foo.html">link</a> here.</p>
</div>
<div>
<p>More text here.</p>
</div>
</body>
</html>
Fig. 5.3: A simple document.

Each element within the page is referred to as a node. If you think of the DOM
as a tree, each node is an individual branch that can contain further branches.
Accessing DOM Nodes
The document object in the DOM identifies the page itself, and more often than
not will serve as the starting point for our DOM crawling. The document object
comes with a number of standard properties and methods for accessing collections
of elements.
The statement in the following example says to look on the page (document),
find the element that has the id value “beginner”, find the HTML content within
that element (innerHTML), and save those contents to a variable (foo):
var foo = document.getElementById("beginner").innerHTML;
There are several methods for accessing nodes in the document.
A. By element name
getElementsByTagName()
We can access individual elements by the tags themselves, using

document.getElementsByTagName (). This method retrieves any element or
elements you specify as an argument.
For example, document.getElementsByTagName("p") returns every paragraph on

the page.
var paragraphs = document.getElementsByTagName("p");
B. By id attribute value
getElementById()
This method returns a single element based on that element’s ID (the value of its
id attribute), which we provide to the method as an argument. For example, to
access this particular image <img src="photo.jpg" alt="" id="lead-photo">
we include the id value as an argument for the getElementById() method:
var photo = document.getElementById("lead-photo");
Example
<html>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
In the example above, getElementById is a method, while innerHTML is

a property.
C. By class attribute value

getElementsByClassName()
Just as it says on the tin, this allows you to access nodes in the document based
on the value of a class attribute. This statement assigns any element with a class
value of “column-a” to the variable firstColumn so it can be accessed easily from
within a script:
var firstColumn = document.getElementsByClassName("column-a");
Manipulating Nodes
Once we’ve accessed a node by using one of the methods discussed previously,
the DOM gives us several built-in methods for manipulating those elements, their
attributes, and their contents.
innerHTML
innerHTML gives us a simple method for accessing and changing the text and
markup inside an element. It behaves differently from the methods we’ve covered
so far. Let’s say we need a quick way of adding a paragraph of text to the first
element on our page with a class of intro:
var introDiv = document.getElementsByClassName("intro");
introDiv[0].innerHTML = "<p>This is our intro text</p>";
The second statement here adds the content of the string to introDiv (an element
with the class value “intro”) as a real live element because innerHTML tells
JavaScript to parse the strings “<p>” and “</p>” as markup.
Style

The DOM also allows you to add, modify, or remove a CSS style from an element
by using the style property. It works similarly to applying a style with the inline
style attribute. The individual CSS properties are available as properties of the
style property. I bet you can figure out what these state-ments are doing by using
your new CSS and DOM know-how:
document.getElementById("intro").style.color = "#fff";
document.getElementById("intro").style.backgroundColor = "#f58220";
JavaScript Date Objects
The Date object provides date / calendar functions. A date consists of a year, a
month, a day, an hour, a minute, a second, and milliseconds.
Using new Date(); creates a new date object with the current system date and
time.
Example
var now = new Date();
var result = "It is now " + now;
document.getElementById("timeField")
.innerText = result;
...
<p id="timeField"></p>
var today= new date();
var day = today.getdate();
var month=today.getmonth()+1;
var year=today.getfullyear();
alert(day + “/” + month + “/” + year); // this statement alerts
15/01/2020
Timers:
A. setTimeout(): Make something happen (once) after a fixed delay

Example: var timer = setTimeout('bang()', 5000); i.e. 5 (5000 milliseconds) seconds

after this statement executes, this function is called.
B. clearTimeout(timer); Cancels the timer.

C. setInterval(); Make something happen repeatedly at fixed intervals.
Example: var timer = setInterval('clock()', 1000); The function ‘clock()’ is called
continuously per 1 second (1000 milliseconds).
D. clearInterval(timer); stops the timer.
Built-in JavaScript Functions
Built-in Functions are provided by the language and you cannot change them to
suit your needs. Some of the built-in functions in JavaScript are shown here:
eval - eval(expr): eval evaluates the expression or statements
isFinite: Determines if a number is finite
isNaN: Determines whether a value is “Not a Number”
parseInt: Converts string literals to integers
parseFloat: Finds a floating-point value at the beginning of a string.

5.3. DYNAMIC HTML (DHTML)
DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.
Dynamic HTML is not a markup or programming language but it is a term that
combines the features of various web development technologies for creating the
web pages dynamic and interactive. The DHTML application was introduced by
Microsoft with the release of the 4th version of IE (Internet Explorer) in 1997.
Components of Dynamic HTML
DHTML consists of the following four components or languages:
HTML 4.0
CSS
JavaScript
DOM
HTML 4.0

HTML is a client-side markup language, which is a core component of the DHTML.

It defines the structure of a web page with various defined basic elements or tags.
CSS
CSS stands for Cascading Style Sheet, which allows the web users or developers
for controlling the style and layout of the HTML elements on the web pages.
JavaScript
JavaScript is a scripting language that is done on a client-side. The various

browser supports JavaScript technology. DHTML uses the JavaScript technology
for accessing, controlling, and manipulating the HTML elements. The statements
in JavaScript are the commands that tell the browser for performing an action.
DOM
DOM is the document object model. It is a w3c standard, which is a standard

interface of programming for HTML. It is mainly used for defining the objects
and properties of all elements in HTML.
Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):
It is used for designing the animated and interactive web pages that are
developed in real-time.
DHTML helps users by animating the text and images in their documents.
It allows the authors for adding the effects on their pages.
It also allows the page authors for including the drop-down menus or
rollover buttons.
This term is also used to create various browser-based action games.
It is also used to add the ticker on various websites, which needs to refresh
their content automatically.
Features of DHTML
Following are the various characteristics or features of DHTML (Dynamic HTML):
Its simplest and main feature is that we can create the web page
dynamically.

Dynamic Style is a feature that allows the users to alter the font, size,
color, and content of a web page.
It provides the facility for using the events, methods, and properties. And
provides the feature of code reusability.
It also provides the feature in browsers for data binding.
Using DHTML, users can easily create dynamic fonts for their web sites or
web pages.
With the help of DHTML, users can easily change the tags and their
properties.
The web page functionality is enhanced because the DHTML uses low-
bandwidth effect.
Difference between HTML and DHTML
HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup

language)
1. HTML is simply a markup 1. DHTML is not a language, but it is a
language. set of technologies of web development.
2. It is used for developing and 2. It is used for creating and designing
creating web pages. the animated and interactive web sites or
pages.
3. This markup language creates 3. This concept creates dynamic web
static web pages. pages.
4. It does not contain any server-side 4. It may contain the code of server-side
scripting code. scripting.
5. The files of HTML are stored with 5. The files of DHTML are stored with the
the .html or .htm extension in a .dhtm extension in a system.
system.
6. A simple page which is created by
6. A page which is created by a user
a user without using the scripts or
using the HTML, CSS, DOM, and
styles called as an HTML page. JavaScript technologies called a DHTML
page.
7. This markup language does not 7. This concept needs database
need database connectivity. connectivity because it interacts with
users.
DHTML JavaScript
JavaScript can be included in HTML pages, which creates the content of the page
as dynamic. We can easily type the JavaScript code within the <head> or
<body> tag of a HTML page. If we want to add the external source file of
JavaScript, we can easily add using the <src> attribute.

UNIT SUMMARY
JavaScript is the most popular scripting language of the Internet. It is majorly

used as a client-side scripting language to add interactive functionality, validate
forms, detect browsers, etc. in Web design. Some of its constructs have been
covered in this unit. It is supported by major browsers, such as Internet Explorer,
Firefox, Chrome, Opera, and Safari.
JavaScript statements are typically embedded directly with HTML. A single HTML
document can include any number of embedded scripts. When used properly,
JavaScript has the capacity to improve the look and enhance user‟s interactivity
with Web pages. The normal execution of statements in a program is one after
the other in the order in which they are written. This process is called sequential
execution. Programmer can however, specify the order in which statements should
be executed by using control constructs/statement. Some statements that will
enable one to write simple JavaScript codes have been covered in this unit.
TEST YOURSELF
1. Locate a JavaScript calculator and explain how it works.

2. Using JavaScript, design a Web page that converts temperature reading in
Celsius to Fahrenheit scale.
3. Identify and correct the errors in following segments of code:
if ( age >= 30 );
document.write (“Age greater than or equal to 30);
else
document.write(“Age is less than 30);
4. Write a script that outputs HTML text that keeps displaying in the browser
window the multiples of the integer 2, namely 2,4, 8, 16, 32, 64, 128, etc.
Ensure that your loop terminates when the value 2048576 is printed
5. Name three JavaScript event handlers and describe how they are used. Create
a Web page that incorporates them.
6. What are some practical uses of alert boxes?

CHAPTER 6
INTRODUCTION TO EXTENSIBLE MARKUP LANGUAGE (XML)
OBJECTIVES
Explain the meaning of XML

Show how to create and modify XML document
Illustrate how to process and validate XML document
Describe how to view XML documents in a Web browser
UNIT STRUCTURE
6.1. Overview of XML
6.2. XML Components
6.3. Document Type Definition
6.4. Data Elements
6.5. Defining Attributes and Entities
6.6. XML Schema
6.7. XML Core Technologies

INRODUCTION
6.1. OVERVIEW OF XML

XML stands for Extensible Markup Language and is a text-based markup language
derived from Standard Generalized Markup Language (SGML).
XML is a software- and hardware-independent tool for storing and transporting

data.
XML is a markup language much like HTML

XML was designed to store and transport data
XML was designed to be self-descriptive
XML is a W3C Recommendation
XML tags identify the data and are used to store and organize the data, rather
than specifying how to display it like HTML tags, which are used to display the
data. XML is not going to replace HTML in the near future, but it introduces new
possibilities by adopting many successful features of HTML.
There are three important characteristics of XML that make it useful in a variety
of systems and solutions:
XML is extensible: XML allows you to create your own self-descriptive tags, or
language, that suits your application.
XML carries the data, does not present it: XML allows you to store the data
irrespective of how it will be presented.
XML is a public standard: XML was developed by an organization called the World
Wide Web Consortium (W3C) and is available as an open standard.
XML Usage
A short list of XML usage says it all:
XML can work behind the scene to simplify the creation of HTML
documents for large web sites.
XML can be used to exchange the information between organizations and
systems.
XML can be used for offloading and reloading of databases.

XML can be used to store and arrange the data, which can customize your
data handling needs.
XML can easily be merged with style sheets to create almost any desired
output.
Virtually, any type of data can be expressed as an XML document.
The Difference between XML and HTML
XML and HTML were designed with different goals:
XML was designed to carry data - with focus on what data is

HTML was designed to display data - with focus on how data looks
XML tags are not predefined like HTML tags
XML documents form a tree structure that starts at "the root" and
branches to "the leaves".
XML Syntax:
Following is a complete XML document:
<?xml version="1.0"?>
<contact_info>
<name>Rajesh</name>
<company>TCS</company>
<phone>9333332354</phone>
</contact_info>
You can notice there are two kinds of information in the above example:
markup, like <contact-info> and

The text, like Rajesh etc.
The following diagram depicts the syntax rules to write different types of mark-
up and text in an XML document.

Let us see each component of the above diagram in detail:
XML Declaration
The XML document can optionally have an XML declaration. It is written as

below:
<?xml version="1.0" encoding="UTF-8"?>
Where version is the XML version and encoding specifies the character encoding
used in the document.
Syntax Rules for XML declaration
The XML declaration is case sensitive and must begin with "<?xml>"
where "xml" is written in lower-case.
If document contains XML declaration, then it strictly needs to be the first
statement of the XML document.
The XML declaration strictly needs be the first statement in the XML
document.
An HTTP protocol can override the value of encoding that you put in the
XML declaration.
6.2. XML COMPONENTS

An Example XML Document
The image above represents books in this XML:

<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
</book>
<book category="web">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>

<year>2003</year>
</book>
</bookstore>
XML documents are formed as element trees. An XML tree starts at a root element
and branches from the root to child elements. All elements can have sub elements
(child elements):
<root>
<child>
<subchild>. ...</subchild>
</child>
</root>
The terms parent, child, and sibling are used to describe the relationships between
elements. Parents have children. Children have parents. Siblings are children on
the same level (brothers and sisters).
XML Namespaces
In XML, element names are defined by the developer. This often results in a
conflict when trying to mix XML documents from different XML applications.
This XML carries HTML table information:
<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>
This XML carries information about a table (a piece of furniture):
<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>
If these XML fragments were added together, there would be a name conflict.
Both contain a <table> element, but the elements have different content and
meaning.A user or an XML application will not know how to handle these
differences.
Solving the Name Conflict Using a Prefix

Name conflicts in XML can easily be avoided using a name prefix. This XML
carries information about an HTML table, and a piece of furniture:

<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
In the example above, there will be no conflict because the two <table>
elements have different names.
Valid XML Documents

A "well formed" XML document is not the same as a "valid" XML document.
A "valid" XML document must be well formed. In addition, it must conform to a
document type definition. There are two different document type definitions that
can be used with XML:
DTD - The original Document Type Definition
XML Schema - An XML-based alternative to DTD
A document type definition defines the rules and the legal elements and attributes
for an XML document.
6.3. DOCUMENT TYPE DEFINITION
An XML document with correct syntax is called "Well Formed". An XML document
validated against a DTD is both "Well Formed" and "Valid". A "Valid" XML
document is a "Well Formed" XML document, which also conforms to the rules
of a DTD. DTD is the basic building block of XML. The purpose of a DTD is to
define the structure of an XML document. It defines the structure with a list of
legal elements.
<!DOCTYPE book [
<!ELEMENT book (title,author,price)> <!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)> <!ELEMENT price (#PCDATA)> ]>
The DTD above is interpreted like this:
!DOCTYPE book defines that the root element of the document is book
!ELEMENT book defines that the book element must contain the elements:

"title, author, price”

!ELEMENT title defines the title element to be of type "#PCDATA"
!ELEMENT author defines the author element to be of type "#PCDATA"
!ELEMENT price defines the price element to be of type "#PCDATA" Note:
PCDATA: Parse able Character Data, CDATA: Character Data. There are two
types of DTDs:
1) Internal / Embedded DTD.
2) External DTD.
Internal / Embedded DTD.

<!DOCTYPE student [
<!ELEMENT student (id,name,age,addr,email,ph)>
<!ELEMENT id (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT addr (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT ph (#PCDATA)> ]>
<student>
<id>543</id>
<name>Ravi</name>
<age>21</age>
<addr>Guntur</addr>
<email>nsr@gmail.com</email>
<ph>9855555</ph>
<gender>male</gender>
</student>
External DTD.
<!ELEMENT student (id,name,age,addr,email)>

<!ELEMENT id (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT addr (#PCDATA)>
<!ELEMENT email (#PCDATA)>
Save the above code as “student.dtd” and prepare “student.xml” as follows...
<!DOCTYPE student SYSTEM "student.dtd">
<student>

<id>543</id>
<name>Ravi</name>
<age>21</age>
<addr>Guntur</addr>
<email>nsr@gmail.com</email>
</student>
In the above example we are using <!DOCTYPE student SYSTEM "student.dtd">

which is used to provide “student.dtd” code in our “student.xml” file. If the
above xml code follows the exact rules defined in DTD then we can conclude that
our xml document is a valid document. Otherwise it is an invalid document.
When to Use a DTD/Schema?
With a DTD, independent groups of people can agree to use a standard

DTD for interchanging data.
With a DTD, you can verify that the data you receive from the outside
world is valid.
You can also use a DTD to verify your own data.

6.4. DATA ELEMENTS
An XML file is structured by several XML-elements, also called XML-nodes or
XML- tags. XML-elements' names are enclosed by triangular brackets < > as
shown below:
<element>
Syntax Rules for Tags and Elements
Element Syntax: Each XML-element needs to be closed either with start or with
end elements as shown below:
<element>. </element>
or in simple-cases, just this way:
<element/>
Nesting of elements:
An XML-element can contain multiple XML-elements as its children, but the

children elements must not overlap. i.e., an end tag of an element must have the
same name as that of the most recent unmatched start tag.

Following example shows incorrect nested tags:
<contact_info>
<company>TCS
<contact_info>
</company>
Following example shows correct nested tags:
<contact_info>
<company>TCS</company>
<contact_info>
Root element:
An XML document can have only one root element. For example, following is not
a correct XML document, because both the x and y elements occur at the top
level without a root element:
<x>...</x>
<y>...</y>
The following example shows a correctly formed XML document:
<root>
<x>...</x>
<y>...</y>
</root>
Case sensitivity:
The names of XML-elements are case-sensitive. That means the name of the start
and the end elements need to be exactly in the same case.
For example <contact_info> is different from <Contact_Info>.
6.5. DEFINING ATTRIBUTES AND ENTITIES

An attribute specifies a single property for the element, using a name/value pair.
An XML-element can have one or more attributes. For example:

<a href="http://www.wcu.edu.et/">Tutorials!</a>
Here href is the attribute name and http://www.wcu.edu.et/ is attribute value.
Syntax Rules for XML Attributes
Attribute names in XML (unlike HTML) are case sensitive. That is, HREF and href
are considered two different XML attributes.
<a b="x" c="y" b="z">. .. </a>
Same attribute cannot have two values in a syntax. The following example shows
incorrect syntax because the attribute b is specified twice:
Attribute names are defined without quotation marks, whereas attribute values
must always appear in quotation marks. Following example demonstrates incorrect
xml syntax:
<a b=x>. .. </a>
In the above syntax, the attribute value is not defined in quotation marks.
XML References
References usually allow you to add or include additional text or markup in an

XML document. References always begin with the symbol "&”, which is a reserved
character and end with the symbol ";". XML has two types of references:
Entity References: An entity reference contains a name between the start and the
end delimiters. For example & where amp is name. The name refers to a
predefined string of text and/or markup.
Character References: These contain references, such as A, contains a hash

mark (“#”) followed by a number. The number always refers to the Unicode
code of a character. In this case, 65 refers to alphabet "A".
XML Text
The names of XML-elements and XML-attributes are case-sensitive, which means

the name of start and end elements need to be written in the same case. To avoid
character encoding problems, all XML files should be saved as Unicode UTF-8 or
UTF-16 files. Whitespace characters like blanks, tabs and line-breaks between
XML-elements and between the XML-attributes will be ignored. Some characters
are reserved by the XML syntax itself. Hence, they cannot be used directly. To
use them, some replacement-entities are used, which are listed below:

Not allowed character Replacement-entity Character description
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
6.6. XML SCHEMA

An XML Schema describes the structure of an XML document, just like a DTD.
An XML document with correct syntax is called "Well Formed". An XML document
validated against an XML Schema is both "Well Formed" and "Valid".
XML Schema is commonly known as XML Schema Definition (XSD). It is used to

describe and validate the structure and the content of XML data. XML schema
defines the elements, attributes and data types. Schema element supports
Namespaces. It is similar to a database schema that describes the data in a
database.
XML Schema is an XML-based alternative to DTD:
Syntax
You need to declare a schema in your XML document as follows:
<xs:schema>
<xs:element name="book">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="price" type="xs:integer"/>

<xs:element name="edition" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
The Schema above is interpreted like this:
<xs:element name="book"> defines the element called "book" is a root.

<xs:complexType> the "book" element is a complex type i.e. root
<xs:sequence> the complex type is a sequence of elements i.e. childrens
<xs:element name="title" type="xs:string"> the element "title" is of type
string (text)
<xs:element name="author" type="xs:string"> the element "author" is of
type string
<xs:element name="price" type="xs:integer"> the element "price" is of type
integer.
<xs:element name="edition" type="xs:string"> the element "edition" is of
type string
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.w3schools.com"
elementFormDefault="qualified">
<xs:element name="student">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="age" type="xs:integer"/>
<xs:element name="addr">
<xs:complexType>
<xs:sequence>
<xs:element name="city" type="xs:string"/>
<xs:element name="pincode" type="xs:long"/>
</xs:sequence>

</xs:complexType>
</xs:element>
<xs:element name="ph" type="xs:integer"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Save the above code as “student.xsd” Prepare “student.xml” as follows…
<student xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3schools.com student.xsd">
<name>rajesh</name>
<age>25</age>
<addr>
<city>mylavaram</city>
<pincode>53333</pincode>
</add>
<ph>9343434</ph>
</student>
If the above xml code follows the exact rules defined in “student.xsd” then we can
conclude that our xml document is a valid document. Otherwise it is an invalid
document.
UNIT SUMMARY
Within the last two decades of the introduction of XML, it has been used to create
hundreds of languages which include XHTML ,WSDL for describing available web services,
WAP and WML as markup languages for handheld devices, RSS languages for news feeds,
RDF and OWL for describing resources and ontology, SMIL for describing multimedia for
the web etc. In addition, XML-based formats have become the default for most office-
productivity tools, including Microsoft Office (Office Open XML) and Apple's iWork.

XML describes data in a way that both human beings and computer can understand. It
enhances the storage and exchange of data amongst disparate computer systems. In this
unit, we covered how to create, modify, validate, format, process and view XML
documents in a browser.
TEST YOURSELF
1. Discuss the importance of XML technologies

2. State which of the following statements is true(T) or false(F):
A. XML can be used to create other markup languages(T/F)
B. Parsers are used to check the syntax of an XML document (T/F)
C. XML document is not case sensitive (T/F)
D. All XML start tags must have corresponding end tags (T/F)

REFERENCES/FURTHER READING
1. Alex, L. & Mathew, L. (1999). Fundamentals of Information Technology. Ne

Delhi:Vikas Publishing House PVT LTD.
2. Andy, S. (1999).Computer Communications, Principles and Business

Applications. (2nd ed.). England: McGraw-Hill.
3. Behrouz, A. F. (2003). Data Communications and Networking. (3rd ed.). N.Y,
USA: McGraw-Hill/Osborne.
4. Brian, et al.(1999). Using Information Technology: A Practical Introduction to
Computers and Communication. Irwin/McGraw-Hill.
5. Terry, F-M. (2009). Web Development and Design Foundations with XHTML.
USA: Pearson.
6. HTML complete ,2nd Ed, Paperback by sybex (pages 1-131,and 481-651)
7. Deitel, Deitel &Nieto, internet & world wide web: How to program, Prentice
Hall USA,2002
8. HTML, Black Book, by Holzner
9. JavaScript Bible 6th edition by Danny Goodman and Michael Morrison
10. PHP & MySQL Web development by Luke Welling and Laura Thomson
11. JavaScript for the World Wide Web by Tom Negrino and Dori Smith
12. PHP5 and MySQL Bible by Tim Converse and Joyce Park with Clark Morgan
13. The Internet and Its Protocols : A Comparative Approach (The Morgan
Kaufmann Series in Networking) by Adrian Farrel

IP1 Module With Reviewers

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IP1 Module With Reviewers

Uploaded by

Copyright:

Available Formats

WACHEMO UNIVERSITY

COLLEGE OF ENGINEERING AND TECHNOLOGY

INTRODUCTION TO INTERNET PROGRAMMING

DEPARTMENT OF INFORMATION SYSTEMS 2

3.7. ANCHORS, URLS AND IMAGE MAPS ................................................................................................. 72

DEPARTMENT OF INFORMATION SYSTEMS 3

5.3. DYNAMIC HTML (DHTML)...................................................................................................................175

DEPARTMENT OF INFORMATION SYSTEMS 4

At the end of this unit, you should be able to:

1.1 Internet history, Uses and Services

DEPARTMENT OF INFORMATION SYSTEMS 5

1.1. INTERNET HISTORY, USES AND SERVICES

The Definition and Evolution of the Internet

The Internet is a term used to describe a worldwide network of computer networks

DEPARTMENT OF INFORMATION SYSTEMS 6

Fig. 1.1: PDA access to the Internet

Intranets and Extranets

DEPARTMENT OF INFORMATION SYSTEMS 7

The term “Intranet” is used to describe a network of personal computers (PC)

The Internet versus the Web

The internet is an international network of connected computers. No company owns

DEPARTMENT OF INFORMATION SYSTEMS 8

The Web Server

DEPARTMENT OF INFORMATION SYSTEMS 9

There’s nothing special about the computers themselves…picture anything from a

DEPARTMENT OF INFORMATION SYSTEMS 10

A Word about Browsers

DEPARTMENT OF INFORMATION SYSTEMS 11

Connected to the Internet when needed

Continually connected to the Internet

Basic terms you have to know to work with internet

DEPARTMENT OF INFORMATION SYSTEMS 12

DEPARTMENT OF INFORMATION SYSTEMS 13

The Parts of a URL

DEPARTMENT OF INFORMATION SYSTEMS 14

Fig. 1.2: parts of URL

DEPARTMENT OF INFORMATION SYSTEMS 15

10. Download /Upload

How the internet works?

Internet Uses and Services

DEPARTMENT OF INFORMATION SYSTEMS 16

A. Electronic Mail (Email)

DEPARTMENT OF INFORMATION SYSTEMS 17

Fig. 1.3: Google Mail Interface

B. File Transfer Protocol (FTP)

Fig. 1.4 FTP Interface

DEPARTMENT OF INFORMATION SYSTEMS 18

To achieve FTP, the user invokes one of two commands:

Fig. 1.5 Search Engine

A video conferencing is a set of interactive telecommunication technologies, which

DEPARTMENT OF INFORMATION SYSTEMS 19

Fig. 1.6 logo of some e-commerce sites

DEPARTMENT OF INFORMATION SYSTEMS 20

As we discussed earlier any network uses different protocols to make an effective

DEPARTMENT OF INFORMATION SYSTEMS 21

TCP is known as a connection-oriented protocol, which means that a connection is

Internet Protocol (IP)

A computer is hardwired to obey a list of built-in commands, rules, and standards,

DEPARTMENT OF INFORMATION SYSTEMS 22

1.3. HTTP REQUEST MODEL

DEPARTMENT OF INFORMATION SYSTEMS 23

Streamline web services to make better use of the protocol.

Figure 1.7 a client computer interacting with a web server on the