FEDERAL UNIVERSITY OF KASHERE

DEPARTMENT OF MATHEMATICS AND COMPUTER SCIENCE

CSC2308: INTERNET TECHNOLOGY

LECTURE NOTE
STATUS: CORE CREDIT UNIT: 3

PREPARED BY

NUHU ABDUL’ALIM MUHAMMAD (EL-GURAMA)

1
COURSE OUTLINE

1. Internet: Definition, History, services, protocols, advantages and disadvantages.

2. WWW: Definition, History and fundamental concepts.
3. HTTP: TCP/IP, URLs server technology.
4. HTML: Document structure, images, maps, table, frames and forms.
5. Cascading Style Sheets (CSS):
6. JavaScript: Syntax, DOM, Form processing, common tasks.
7. Introduction to PHP:
8. DHTML:
9. Web Design and Usability:
10. Multimedia:
11. Web development tools:
12. Lab Exercises and Group Projects

LECTURE TIME

Monday
10am-12noon
New 350 CLT

Tuesday
10-12 noon
SCI 1

2
 CHAPTER ONE
INTERNET
DEFINITION:
The internet can be defined in many ways, some of the definitions are as follows:
The Internet is a network of networks (Local Area Networks, Metropolitan Area Networks and
Wide Area Networks) across the world.

Internet is defined as an Information Super Highway that is used to access information over the
web.

Internet is a world-wide global system of interconnected computer networks.

3
HISTORY
The Internet started as a project of the United States Government’s Department of Defense
(DOD), to create a non-centralized network. This project was called ARPANET (Advanced Research
Projects Agency Network), created by the Pentagon's Advanced Research Projects Agency established in
1969 to provide a secure and survivable communications network for organizations engaged in defense
related research.
ARPANET Initially started with four nodes (Hosts) They include:
a. University of California, Los Angeles (UCLA).
b. University of California, Santa Barbara (UCSB).
c. University of Utah.
d. STI (Stanford Research Institute).
In 1972, the ARPANET spread over the globe with 23 nodes located at different countries and thus
became known as Internet.
In 1977, The standard protocol called TCP/IP (Transmission Control Protocol/Internet Protocol)
was invented. TCP/IP allowed users to link various branches of other complex networks directly to the
ARPANET, which soon came to be called the Internet.
By the time, with invention of new technologies such as TCP/IP protocols, DNS, WWW, browsers,
scripting languages etc. Internet provided a medium to publish and access information over the web.

4
INTERNET SERVICES
The following are some of the services that can be accessed over the internet:
a. Communication Services: these are services that offer exchange of information with individuals
or groups. They include:

b. Information Retrieval Services: these are services that offer easy access to information on the
internet. The following table gives a brief introduction to these services:

c. Web services: these are services that allow exchange of information between applications on the
web. Using web services, applications can easily interact with each other.
i. World Wide Web (WWW): It offers a way to access documents spread over the several
servers over the internet. These documents may contain texts, graphics, audio, video,
hyperlinks. The hyperlinks allow the users to navigate between the documents.

5
ii. Video Conferencing (teleconferencing) is a method of communicating by two-way video and
audio transmission with help of telecommunication technologies.

6
INTERNET PROTOCOLS

These are different set of rules that are used to send data, packets and files over the internet they include:

a. Transmission Control Protocol (TCP)

TCP is a reliable and connection oriented protocol.

It is a connection oriented protocol meaning that it requires a connection between nodes for data exchange
to occur.

Reliable means there is a mechanism to ensure that data sent is received at the destination.

b. User Datagram Protocol

UDP is connectionless and unreliable protocol.

connectionless means that it doesn’t require making a connection with the host to exchange data.

Unreliable means there is no mechanism for ensuring that data sent is received.

c. File Transfer Protocol FTP

FTP is an internet protocol that is used to copy files from one host to another.

FTP copies files by creating two processes:

FTP creates two processes such as Control Process and Data Transfer Process at both ends i.e. at client as
well as at server.

FTP establishes two different connections: one is for data transfer and other is for control information.

Control connection is made between control processes while Data Connection is made between

FTP uses port 21 for the control connection and Port 20 for the data connection.

d. Trivial File Transfer Protocol TFTP

TFTP is an internet protocol that is used to transfer files without authentication. Unlike FTP, TFTP does
not separate control and data information. Since there is no authentication exists, TFTP lacks in security
features therefore it is not recommended to use TFTP.

TFTP makes use of UDP for data transport. Each TFTP message is carried in separate UDP datagram.

The first two bytes of a TFTP message specify the type of message.

The TFTP session is initiated when a TFTP client sends a request to upload or download a file.

The request is sent from an ephemeral UDP port to the UDP port 69 of an TFTP server. Telnet

7
 e. Telnet
Telnet is an internet protocol that is used to log in to remote computer on the internet. There are a number
of Telnet clients having user friendly user interface. The following diagram shows a person is logged in to
computer A, and from there, he remote logged into computer B.

f. Hyper Text Transfer Protocol HTTP

HTTP is an internet protocol that is used for communication between a browser and the web server. It is
also called request and response protocol because the communication between browser and server takes
place in request and response pairs.

8
ADVANTAGES OF THE INTERNET

Internet covers almost every aspect of life. It is useful in the following ways:

a. Communication

Internet allows us to communicate with the people in different locations. There are various apps available
on the wed that uses Internet as a medium for communication e.g.

Facebook, Twitter, Yahoo, Google+, Flickr, Orkut e.t.c.

b. Research

One can browse (surf) any kind of information over the internet. Information regarding various topics
such as Technology, Health & Science, Social Studies, Geographical Information, Information
Technology, Products etc. can be surfed with help of a search engine.

c. Entertainment

The Internet is a tool for enjoying one’s leisure time. There are the various modes for entertainment over
internet. They include:

Online Television

Online Games

Music

Videos

d. E-Commerce (electronic commerce) that allows the business deals to be conducted on electronic
systems.
e. Internet Banking.
f. Matrimonial Services.
g. Online Shopping.
h. Online Ticket Booking.
i. Online Bill Payment.
j. Data Sharing.

9
DISADVANTAGES OF THE INTERNET

There are some disadvantages associated to the internet, they include the following:

a. Cybercrime

Personal information such as name, address, credit card number and even money can be stolen over the
internet. Therefore, one should be very careful while sharing such information. One should use credit
cards only through authenticated sites.

b. Spamming

Spamming refers to the unwanted e-mails in bulk. These e-mails serve no purpose and lead to obstruction
of entire system.

c. Virus

Virus can easily be spread to the computers connected to internet. Such virus attacks may cause your
system to crash or your important data may get deleted.

d. Pornography

There are many pornographic (explicit sexual content) sites that can be found, letting your children to use
internet which indirectly affects the children healthy mental life.

e. Fake news and information

There are various websites that do not provide the authenticated information. This leads to misconception
among many people.

10
EXERCISES
1. Define the internet.

2. Give a brief history of the internet.

3. Draw the diagram of the physical components of the internet

4. List all the nodes that ARPANET started with.

5. List and explain all the internet services.

6. List and explain all the internet protocols.

7. List and explain all the advantages of the internet.

8. List and explain all the disadvantages of the internet.

PROJECT

Every student should by his/herself open:

a. A Gmail account (Compulsory).
b. A WhatsApp account (Optional but highly recommended).
c. A Facebook account (Optional).
d. Buy an item on any E-commerce site (Optional). Jumia, Konga, Jiji e.t.c
e. A bank account (Optional but highly recommended).
*The class rep should send the list of all students and their project

11
 CHAPTER TWO
WORLD WIDE WEB
DEFINITION:
The World Wide Web (WWW) is a dynamic collection of documents that contain text, graphics, sounds,
and movies etc. That can be accessed on the internet.
World Wide Web (WWW) is a collection of documents that are linked together and can be accessible via
the internet.
The World Wide Web (WWW) is a system of interlinked hypertext documents accessed via the Internet.
HISTORY OF THE WEB
The WWW was developed at the European Particle Physics Lab (CERN) in Switzerland by Tim
Berners-Lee in 1989 to allow information-sharing among internationally dispersed teams of high-energy
physics researcher.

World Wide Web Consortium is formed in September 1994, with a base at MIT is the USA, INRIA in
France, and now also at Keio University in Japan.

Factors Contributing to the Growth of World Wide Web

There are many Factors that contributed to the early growth of the web some of which includes:

i. Open architecture. Open standards and freely published structure and code.
ii. Minimal system requirements.
iii. Administrators with limited funds could participate as information providers.
iv. Interoperability between different computer platforms.
v. Hypertext linking.
vi. Established Internet protocols and tools File Transfer Protocol (FTP), Gopher, and Telnet
vii. The needs for information storage and retrieval.

12
FUNDAMENTAL WEB CONCEPTS

a. WEB Servers: A web server is the program that runs on a computer and is responsible for replying
to web browser requests for files. To publish pages on the Web, you need a web server. You need
a web server to publish documents on the Web. When you use a browser to request a page on a
website, that browser makes a web connection to a server using the HTTP protocol. The browser
then formats the information it got from the server. Server accepts the connection, sends the
contents of the requested files and then closes.
b. Web Browsers: A browser is a software program that allows users to access and navigate the
World Wide Web via hyperlinks. To access the World Wide Web, you must use a Web browser.
There are two types of browsers:

i. Text: these are text only web browsers. Navigation is accomplished by highlighting
emphasized words in the screen with the arrow up and down keys, and then pressing the
forward arrow (or Enter) key to follow the link. Lynx is a browser that provides access to the
Web in text-only mode.
ii. Graphical: these are web browsers that allows you to access all types of multimedia formats.
Navigation is accomplished by pointing and clicking with a mouse on highlighted words.
Examples are Netscape Navigator, Internet Explorer e.t.c. These browsers are available for
both Windows-based and Macintosh computers.
c. Hyperlinks: are links that are used to take a user to another page when you click on them. When
you scroll over them with your mouse, you’ll see that the pointer changes to indicate that a link is
present. Pictures can also be hyperlinks. If a picture is a hyperlink, your mouse pointer will change
when you move over it. Hyperlinks are a key element of how the web works. You don’t have to
type in the address of every page you visit: in fact, you rarely have to type in any addresses at all.
Instead you follow the hyperlinks that lead you between sites and to new pages. That’s why it’s
called the web.
d. HyperText: is a word (text) or group of words that connect to other pages, documents, images,
video, and sounds. These words are called links and are selectable by the user. A single hypertext
document can contain links to many documents.
e. Internet Protocol Suite: These are different set of rules that guides communication over the
internet. They are used to send data, packets and files over the internet.

EXERCISE

1. Define world wide web.

2. List all the objectives of world wide web development.
3. Who developed the world wide web.
4. When was the world wide web developed.
5. List all the factors that contributed to the growth of world wide web.
6. List and explain all the fundamental web concepts.

13
 CHAPTER THREE
URLS SERVER TECHNOLOGY, HTTP, TCP/IP

URL (Uniform Resource Locator). A URL is popularly known as web address.

The URL makes it possible for a computer to locate and open a web page on a different computer
on the Internet.

DEFINITION: A URL is the fundamental network identification for any resource (e.g., pages,
images, sound, files etc.) found on the web.

A URL is an address that shows where a particular page can be found on the World Wide Web.

HISTORY OF URL

In 1969, the Advanced Research Projects Agency Network (ARPANET) sent the first node-to-
node transmission from UCLA to the Stanford Research Institute.

in 1970, Network Control Protocol (NCP) Consisting of the Physical, Data, and Network layers,
a Transport layer was introduced.

In 1983, ARPANET switched from NCP to the Transmission Control Protocol/Internet Protocol
(TCP/IP).

In 1989, Tim Berners-Lee created the World Wide Web (WWW), introducing the markup
language, resource identifiers, and protocols for retrieving resources.

In 1992, Tim Berners-Lee created the URL as a tool to link to the location of any internet
resource a user may require.

WORKING OF THE URL

14
COMPONENTS OF URL

The four main components of URLs are the protocol, domain, path, and query.

Let us have a closer look at the different URL components, using the following example:

https://www.example.com/category-A/subcategory-A1/model-123.html

i. Protocol: The protocol or scheme of a URL indicates the method that will be used for
transmitting or exchanging data. The most familiar scheme is the Hypertext Transfer Protocol
(HTTP) or Hypertext Transfer Protocol Secure (HTTPS) for the transmission of HTML files.
Other Protocols can be:

i. http://

ii. https://

iii. ftp://

iv. gopher:// etc.

In the example URL above, https:// is the URL's secure protocol.

ii. Domain

The domain or hostname of a URL is a user-friendly expression of the Internet Protocol (IP)
address of a website. It points to the location of the website's host server.

In the example above, the domain is www.example.com.

iii. Path

The path points to a specific file or other resource location.

In our example URL, /category-A/subcategory-A1/model-123.html shows the path of the URL,

which in this example, ends in a product page.

iv. Query

The query string, also known as a fragment identifier, is frequently used for internal searches and
is commonly preceded by a question mark (?).

15
BASIC COMPONENT OF URL

i. Protocol
ii. WWW
iii. Domain name
iv. Resource name
v. Question mark signal “?”
vi. Parameters

Protocols

Every URL starts with a name (Protocol) which personal computer and server should
communicate.

Http is the mostly used protocol name.

Other specific protocols are ftp, smtp and https.

Protocols are followed by symbol “://”

WWW

stands for World Wide Web. It simply indicates that the resource that are seeking for resides on
the internet. This portion of the URL is not required and many times can be left out.

Domain Name

The name of resource owner comes which are youtube and example in the above structures

Domain name is followed by the type of domain which the user is registered.

.com, .gov, .edu, .org,

Resource Name

In above first structure, resource name is the watch in the webpage that user is seeking.

If the structure is seen in totality “watch” is a webpage that resides on a website called YouTube.

Question Mark Signal “?”

16
It signals the end of entire domain name and beginning of the parameter list.

Some webpages accept certain parameters to be passed on them.

This is necessary to function properly

Parameters

Parameters are passed in a “key=value” format and parameter in the list are separated from each
other by a character “&”

So in above first structure two parameters are passed (V=YR12&feature=relmfu)

STRUCTURE OF URL
Host name

17
CHARACTERS ALLOWED IN URLS
The characters that are allowed in URLs are specified by the World Wide Web Consortium. The
specifications include lists of unreserved and reserved characters.

Unreserved characters: These are not reserved and can be used freely in URIs and URLS. They
include all upper case and lower-case letters, all decimal numbers, hyphens, underscores and
periods.

Reserved characters: These serve special purposes within a URL. They include / ; : ? @ & , + $
=.

Reserved characters are used for delimiting or other special purposes inside a URL and cannot be
used in any other way within a URL unless they are URL-encoded. This means that in order to
display a "?" as a question mark or a "+" as a plus sign inside a URL string, these characters will
require encoding.

NB: Space is not allowed in a URL.

USES OF URL

i. The information contained in a URL allows users to move from one web page to another
with just a click.
ii. URL it used to uniquely identify specific file.

18
HTTP (Hypertext Transfer Protocol)

Hypertext Transfer Protocol provides a network protocol standard that web browsers and servers
use to communicate. You see HTTP when you visit a website because the protocol appears in the
URL (for example, http://www.lifewire.com).

Because browsers communicate using HTTP, you can drop the protocol from a URL when
typing it in the browser's address bar.

Definition: HTTP (Hypertext Transfer Protocol) is an internet protocol that is part of the
Internet protocol suite that defines or specifies commands and services used for transmitting
webpage data.

FEATURES OF HTTP

There are three basic features of HTTP they include:

i. HTTP is connectionless: The client (browser) and server only get connected during
current request and response. A connection is only established when there is
communication between a client and server.
ii. HTTP is media independent: meaning any type of media data (text, image, audio,
video etc.) can be sent by HTTP.
iii. HTTP is stateless: meaning neither the client nor the browser can retain information
between different requests across the web pages. The server and client are aware of
each other only during a current request. Afterwards, both of them forget about each
other.

HTTP ARCHITECTURE OR MODEL

The following diagram shows a very basic architecture of a web application and depicts where
HTTP sits:

19
The HTTP protocol is a request/response protocol based on the client/server based architecture
where web browsers, robots and search engines, etc. act like HTTP clients, and the Web server
acts as a server.
Client
The HTTP client sends a request to the server in the form of a request method, URI, and protocol
version, followed by a MIME-like message containing request modifiers, client information, and
possible body content over a TCP/IP connection.
Server
The HTTP server responds with a status line, including the message's protocol version and a
success or error code, followed by a MIME-like message containing server information, entity
meta information, and possible entity-body content.

HISTORY OF HTTP

Tim Berners-Lee created the initial HTTP standard in the early 1990s as part of his work in
defining the original World Wide Web. Three primary versions were deployed during the 1990s:

i. HTTP 0.9: Support of basic hypertext documents.

ii. HTTP 1.0: Extensions to support rich websites.

iii. HTTP 1.1: Developed to address performance limitations of HTTP 1.0, specified in
Internet RFC 2068.

The latest version, HTTP 2.0, became an approved standard in 2015. It maintains backward
compatibility with HTTP 1.1 but offers additional performance enhancements.

While standard HTTP does not encrypt traffic sent over a network, the HTTPS standard adds
encryption to HTTP through the use of Secure Sockets Layer or, later, Transport Layer Security.

HTTP MESSAGE TYPES

The three HTTP message types are:

i. HTTP GET: Messages sent to a server contain only a URL. Zero or more optional data
parameters may be appended to the end of the URL. The server processes the optional data
portion of the URL, if present, and returns the result (a web page or element of a web page) to
the browser.

ii. HTTP POST: Messages place any optional data parameters in the body of the request
message rather than adding them to the end of the URL.

20
iii. HTTP HEAD: Requests work the same as GET requests. Instead of replying with the full
contents of the URL, the server sends back only the header information (contained inside the
HTML section).

TROUBLESHOOTING HTTP

Messages transmitted over HTTP may fail for several reasons:

i. User error.

ii. Malfunction of the web browser or web server.

iii. Errors in the creation of web pages.

iv. Temporary network glitches.

When these failures occur, the protocol captures the cause of the failure and reports an error code
to the browser called an HTTP status line/code. Errors begin with a certain number to indicate
what kind of error it is.

For example, errors with a failure code beginning with a four indicate that the request for the
page cannot be completed properly, or that the request contains the incorrect syntax. As an
example, 404 errors mean that a web page cannot be found.

21
TCP/IP

The key concept in TCP/IP is that every computer has to know or can figure out where all other
computers are on the network, and can send data by the quickest route, even if part of the route is
down.

DEFINITION: TCP/IP (Transmission Control Protocol/Internet Protocol) is a set of layered

protocols used for communication over the Internet. The communication model of this suite is
client-server model. A computer that sends a request is the client and a computer to which the
request is sent is the server.

TCP/IP LAYERS
TCP/IP has four layers namely:
i. Application layer − Application layer protocols like HTTP and FTP are used.
ii. Transport layer − Data is transmitted in form of datagrams using the Transmission Control
Protocol (TCP). TCP is responsible for breaking up data at the client side and then
reassembling it on the server side.
iii. Network layer − Network layer connection is established using Internet Protocol (IP) at
the network layer. Every machine connected to the Internet is assigned an address called
IP address by the protocol to easily identify source and destination machines.
iv. Data link layer − Actual data transmission in bits occurs at the data link layer using the
destination address provided by network layer.

22
TCP/IP transfers information in small chunks called packets (small amount of data sent over
a network).
Each packet includes the following information:
i. The computer (or last few computers) the data came from
ii. The computer to which it is headed
iii. The data itself
iv. The error-checking information (to ensure that the individual packet was accurately and
completely sent and received).

23
EXERCISES
1. What is the full meaning of URL.
2. Define URL.
3. Explain the history of URL.
4. Draw and explain the working of the URL.
5. List and explain all the components of URL.
6. Identify the components of each of the following URL.

I. Http://www.test101.com/docs/index.html?bookid=1234&author=tan+ah+tech

Ii. Https://www.seobility.net/en/wiki/url

Iii. Https://blog.cloudflare.com/the-history-of-the-url/

Iv. Https://www.example.com/category-a/subcategory-a1?searchterm=model+123

V. Https://www.geeksforgeeks.org/computer-science-projects/

Vi. Https://www.computerhope.com/

Vii. Http://www.test101.com/index.html,

Viii. Http://www.abc.com/smith/home.html

7. Explain and give 5 examples of characters allowed in URLS.

8. Explain and give an examples of characters not allowed in URLS.
9. List all the uses of URL.
10. What is the full meaning of HTTP.
11. Define HTTP.
12. List and explain all the features of HTTP.
13. Explain HTTP architecture or model.
14. Draw and explain HTTP architecture or model.
15. Explain the history of HTTP.
16. List and explain HTTP message types.
17. List 4 reason HTTP message may fail.
18. What is the full meaning of TCP/IP.
19. Define TCP/IP.
20. List and explain all the layers of TCP/IP.
21. List and explain 4 packet information in TCP/IP.

24
 CHAPTER FOUR
HTML

INTRODUCTION TO HTML

HTML is a plain-text, human-readable language that is used for creating the structure or
web pages. It is used to aid in the publication of web pages by providing a structure that defines
elements like tables, forms, lists and headings, and identifies where different portions of our
content begin and end. It can be used to embed other file formats like videos, audio files,
documents like PDFs and spreadsheets, among others.

DEFINITION HTML (Hyper Text Markup Language) is a language that is used for creating
the structure and content of web pages and web applications.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage.

Markup Language: a markup language is a computer language that is used to apply layout and
formatting to a text document.

Web Page: A web page is a document that is written in HTML and translated by a web browser.

HTML VERSIONS

Since the time HTML was invented there are lots of HTML versions in market, the brief
introduction about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML
language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was standard language
version for website design. HTML 2.0 was able to support extra features such as form-based file
upload, form elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable
of creating tables and providing support for extra options for form elements. It can also support a

25
web page with complex mathematical equations. It became an official standard for any browser
till January 1997. Today it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable version
of HTML language. This version is the current official standard, and it provides added support for
stylesheets (CSS) and scripting ability for various multimedia elements.

HTML5: HTML5 is the newest version of HyperText Markup language. The first draft of this
version was announced in January 2008. There are two major organizations one is W3C (World
Wide Web Consortium), and another one is WHATWG (Web Hypertext Application Technology
Working Group) which are involved in the development of HTML 5 version, and still, it is under
development.

FEATURES OF HTML

a. It is a very easy and simple language. It can be easily understood and modified.
b. HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.
c. It is a markup language, so it provides a flexible way to design web pages along with the
text.
d. It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
e. It is platform-independent because it can be displayed on any platform like Windows,
Linux, and Macintosh, etc.
f. It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
g. It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.

26
HTML TEXT EDITORS

Text editors are the programs which allow editing in a written text, hence to create a web page
we need to write our code in some text editor.

There are various types of text editors available which you can directly download, but for a
beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).

Example of text editors

a. Notepad.
b. Notepad++
c. Sublime Text

To save a HTML file, a file is saved with a .html or .htm extension.

HTML file name syntax: filename.html or filename.htm

Example

1. FirstFileDemo.html
2. HomePage.htm

WEB BROWSERS

A web browser is a program or software that is used to read HTML documents and display them
correctly. A browser does not display the HTML tags, but uses them to determine how to display
the document as seen in the above example.

Examples

i. Internet Explorer.
ii. Google Chrome.
iii. Mozilla Firefox.
iv. Edge.
v. Safari etc.

27
HTML BASIC STRUCTURE
A simple html file has the following basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
…HTML Code…
…HTML Code…
.
.
.
…HTML Code…
</body>
</html>

28
Example
<!DOCTYPE html>
<html>
<head>
<title>The basic building blocks of HTML</title>
</head>
<body>
<h2>The building blocks</h2>
<p>This is a paragraph tag</p>
<p style="color: red">The style is attribute of paragraph tag</p>
<span>The element contains tag, attribute and content</span>
</body>
</html>

OUTPUT

EXPLANATION

The <!DOCTYPE html> The <!DOCTYPE> NOT actually a tag, rather a declaration to the web
browser of what version of html the following document uses For HTML5, doctype declaration
is <!DOCTYPE html> This declaration must be the very first line of an html document

The <html> element is the root element of an HTML page because it can be considered the root
of the tree-like structure of elements in an HTML page

The <head> Contains information about the document, not content. Common elements included
within <head></head>:

29
 i. <title> - contains page title, displayed in browser’s title bar
ii. <link> used to add CSS stylesheets and icons to page
iii. <meta> used to specify metadata like page descriptions and keywords
iv. <script> used to add JavaScript code to the page

The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Appears directly beneath the
head element.

The <h2> used for next important sub header while h1 used for most important titles.

The <p> element defines a paragraph

Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!

30
HTML DOCUMENT

An HTML document consist of its basic building blocks which are:

i. Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and
> brackets.

ii. Attribute: An attribute in HTML provides extra information about the element, and it is
applied within the start tag. An HTML attribute contains two fields: name & value.

Syntax:

<tag name attribute_name= " attribute_value"> content </ tag name>

i. name – usually specifies the property of the element for which additional
information is being provided
ii. value –this is selected from set of possible values for given property
iii. Elements: An HTML element is an individual component of an HTML file. In an HTML
file, everything written within tags are termed as HTML elements.

31
HTML HEADINGS

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the heading with the largest size.

<h6> defines heading with the smallest size.

Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Demo</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

32
HTML PARAGRAPHS

HTML paragraphs are defined with the <p> tag: Appears anywhere within the body to represent a
paragraph of text expressing a single thought. Usually displayed with vertical space before and
after paragraph.

Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Demo</title>
</head>
<body>
<p> The Internet started as a project of the United States Government’s Department of
Defense (DOD), to create a non-centralized network. This project was called ARPANET
(Advanced Research Projects Agency Network), created by the Pentagon's Advanced
Research Projects Agency established in 1969 to provide a secure and survivable
communications network for organizations engaged in defense related research.

</p>
<p> A web browser is a program or software that is used to read HTML
documents and display them correctly. A browser does not display the HTML
tags, but uses them to determine how to display the document as seen in the above
example.

</p>

</body>
</html>

33
HTML <b> and <i> Tags
These are text formatting tags.
<b> indicates that the text should be bold
<i> indicates that the text should be italicized
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Demo</title>
</head>
Once upon a time, there lived an <i>ogre</i>. His name was <b>Shrek</b>.
He saved a princess named <b><i>Fiona</i></b>. They married and lived
happily ever after.
<body>
</body>
</html>

34
HTML <hr> and <br>
These tags are used to mark a break in content.

<hr> Is used to insert a visible line between preceding and subsequent content.
<br> Is used to insert a blank invisible line between preceding and subsequent content.

Example
<!DOCTYPE html>
<html>
<head>
<title>Line Breaks Demo</title>
</head>
<body>

</body>
</html>
OUTPUT

35
HTML LINKS

A link is a connection from one web resource (page) to another. HTML links are defined with
the <a> tag.

Syntax

<a href=”locationName.html”>Link Text</a>

Example
LinkDemo.html
<!DOCTYPE html>
<html>
<head>
<title>Link Demo</title>
</head>
<body bgcolor=”pink”>
<a href=”biodata.html”>Bio</a>
</body>
</html>
BioData.html
<!DOCTYPE html>
<html>
<head>
<title>Biodata</title>
</head>
<body>
<p>
Name: Musa Isa
D.O.B: 23/04/1997
Phone: 09034568219
Email: [email protected]
Address: No. 7 Nijar Layi Jos
</p>
</body>
</html>

36
HTML IMAGE
This is a tag that is used to display image on the web page. It uses <img> tag. HTML <img> tag
is an empty tag that contains attributes only, closing tags are not used in HTML image element.
The <img> tag creates a holding space for the referenced image.

Syntax

<img src="ImageName.extension" alt="alternate-text">

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are
given below:

i. src: It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server. The location of image may be on
the same directory or another server that is relative or absolute path.
ii. alt: The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describes the image in words.
iii. width: It is an optional attribute which is used to specify the width in pixel (e.g. 50px) to
display the image.
iv. height: It is also an optional attribute which is used to specify the height to display the
image. The HTML height attribute also supports iframe and object elements.
v. title: tooltip text displayed when mouse hovers over image

37
Example
<!DOCTYPE html>
<html>
<head>
<title>Image Demo</title>
</head>
<body>
<h2>Image Example</h2>
<img src = ”flower.jpg” alt=”Flowers in China” width=”300” height=”250”>
</body>
</html>

OUTPUT

38
IMAGE PATHS

HTML image paths are used to define the image location to be used as an external resource
within the HTML document. The location of the file is specified as per the structure of the web
folder.

ABSOLUTE IMAGE PATH

An absolute image path is the full URL to an image.

Example

<!DOCTYPE html>
<html>
<head>
<title>Image Demo</title>
</head>
<body>
<h2>Image Example</h2>

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

</body>
</html>

39
RELATIVE IMAGE PATHS

A relative image path points to an image relative to the current page.

EXAMPLE

a. file in the same folder as the html file.

<!DOCTYPE html>
<html>
<head>
<title>Image Demo</title>
</head>
<body>
<h2>Image Example</h2>
<img src="picture.jpg" alt="Mountain" width=”200” height=”300”>
</body>
</html>
NB: The image file called picture.jpg is in the same folder as the html file.

b. file in a different folder as the html file.

<!DOCTYPE html>
<html>
<head>
<title>Image Demo</title>
</head>
<body>
<h2>Image Example</h2>
<img src="images/river.jpg" alt="Mountain" width=”200” height=”300”>
</body>
</html>
NB: the image river.jpg is in a folder images.

40
c. Folder at the root folder.

<!DOCTYPE html>
<html>
<head>
<title>Image Demo</title>
</head>
<body>
<h2>Image Example</h2>
<img src="/images/river.jpg" alt="Mountain" width=”200” height=”300”>
</body>
</html>

NB: The root folder (C:\ drive) has a folder images consisting of an image ‘river.jpg’.

41
HTML TABLES
This is used to create a table and populated it with data. It is use to arrange data into rows and
columns. The <table> tag is used.

HTML TABLE TAGS

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

42
Examples

<!DOCTYPE html>
<html>
<head>
<title>Image Demo</title>
</head>
<body>
<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>

OUTPUT

SPANNING MULTIPLE ROWS AND COLUMNS

Spanning allow you to extend table rows and columns across multiple other rows and columns.

Normally, a table cell cannot pass over into the space below or above another table cell. But, you
can use the rowspan or colspan attributes to span multiple rows or columns in a table.

43
Example
<!DOCTYPE html>
<html>
<head>
<title>Table Row Demo</title>
</head>
<body>
<table border="2">
<tr>
<th>Name:</th>
<td>Khalid</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>08012345687</td>
</tr>
<tr>
<td>+2348062783681</td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Table Row Demo</title>
</head>
<body>
<table border="2">
<tr>
<th>Name:</th>
<th colspan="2">Phone:</th>
</tr>
<tr>

<td>Khalid</td>
<td>08012345687</td>
<td>+2348062783681</td>
</tr>
</table>
</body>
</html>

44
OUTPUT

45
HTML FORMS

Forms are used to send and collect different kinds of user data such as contact details like name,
email address, phone numbers, or details like credit card information, etc.

Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text,
selecting items, etc. and submitting this form to a web server for further processing.

An HTML form facilitates the user to enter data that is to be sent to the server for processing.
The <form> tag is used to create an HTML form.

HTML Form Syntax

<form action="url" method="get|post">

//form contents
</form>

The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text area,
password field, etc.

THE ACTION ATTRIBUTE

The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit button.
THE METHOD ATTRIBUTE
The method attribute specifies the HTTP method to be used when submitting the form
data.
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").
The default HTTP method when submitting form data is GET.

46
DIFFERENCE BETWEEN POST AND GET

Tip: Always use POST if the form data contains sensitive or personal information!

HTML FORM TAGS

Some HTML 5 form tags.

Tags Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<select> It defines a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

47
HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form fields, to take
input from user. We can apply different input filed to gather different information form user.
Following is the example to show the simple text input.

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button

Text Fields

The <input type="text"> defines a single-line input field for text input.

A form with input fields for text:

<form>
<label>First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label>Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

The <label> tag defines a label for many form elements.

The <label> element also help users who have difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it
toggles the radio button/checkbox.
Therefore, attribute of the <label> tag should be equal to the id attribute of the <input> element to
bind them together.

48
Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

<form>
<input type="radio" id="male" name="gender" value="male">
<label>Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label>Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label>Other</label>
</form>

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label> I have a boat</label>
</form>

49
The <select> Element

The <select> element defines a drop-down list:

<label>Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>

Input Type Password

<input type="password"> defines a password field:

Example

<form>
<label>Username:</label><br>
<input type="text" id="username" name="username"><br>
<label>Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

50
OUTPUT

SUBMIT BUTTONS
A submit button is used to send the form data to a web server. When submit button is clicked the
form data is sent to the file called form handler which is specified in the form's action attribute
to process the submitted data.

Example

<form action="action_page.php" method="get" >

<label>First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label>Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

OUTPUT

51
THE RESET BUTTON
The reset button is used to delete (resets) all the forms data to default values.

<form action="action.php" method="post">

<label>First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

OUTPUT

52
Example

Write the html code that displays the form below:

53
Solution
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Internet Technology Practicals</h1>
<form >
<label>Username:</label><br>
<input type="text" name="username"><br>
<label>Password:</label><br>
<input type="password" name="password" ><br>
<label>First name:</label><br>
<input type="text" name="fName"><br>
<label>Last name:</label><br>
<input type="text" name="lname"><br>
<label> Gender:</label> <br>
<input type="radio" name="gender" value="male">
<label>Male</label><br>
<input type="radio" name="gender" value="female">
<label>Female</label><br>
<input type="radio" name="gender" value="other">
<label>Other</label><br>
<label>Properties:</label> <br>
<input type="checkbox" name="vehicle1" value="Bike">
<label> I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label> I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat">
<label> I have a boat</label><br><br>
<label>Car Type (Volvo, Audi, Mazda, Toyota): </label><br>
<select name="cars">
<option>Volvo</option>
<option>Audi</option>
<option>Mazda</option>
<option>Toyota</option>
</select><br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
</body>
</html>

54
HTML IFRAMES
An iframe or inline frame is used to display external objects including other web pages within a
web page. An iframe pretty much acts like a mini web browser within a web browser. The
content inside an iframe exists entirely independent from the surrounding elements.

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax

<iframe src="url" title="description">

</iframe>

The url specified in the src attribute points to the location of an external object or a web page.

The title attribute is used by screen readers to read out what the content of the iframe is.

IFRAME HEIGHT AND WIDTH

The height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:

55
Example
IFrameDemo.html
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<iframe src = ”FirstIFrameDemo.html” width=”300” height=”200” tittle=”First Frame”>
</iframe>
<iframe src = ” SecondIFrameDemo.html” width=”300” height=”200” tittle=”Second
Frame”>
</iframe>
</body>
</html>
FirstIFrameDemo.html

<html>
<head>
<title>First IFrame</title>
</head>
<body bgcolor=”green”>
<h1>Internet Technology Demo</h1>
</body>
</html>

SecondIFrameDemo.html
<html>
<head>
<title>Second IFrame</title>
</head>
<body bgcolor=”blue”>
<h1>Internet Technology Practicals</h1>
</body>
</html>

OUTPUT

56
EXERCISES

1. Define html.
2. Write the full meaning of the acronym html.
3. List and explain all the html versions
4. List and explain all the features of html
5. Define html text editors.
6. List any two html text editors.
7. Define web browser.
8. List 5 examples of web browser.
9. Write the syntax of a basic Html file.
10. List and explain the basic blocks of a HTML document.
11. Write a HTML code demonstrating all the HTML headings.
12. Write a HTML code demonstrating HTML Paragraph.
13. Write a HTML code demonstrating HTML <b> and <i> tags.
14. Write a HTML code demonstrating HTML <hr> and <br> tags.
15. Write the syntax of a HTML link.
16. Write a HTML code demonstrating HTML link.
17. Write the syntax of a HTML image.
18. Write a HTML code demonstrating HTML image
19. Explain image path.
20. Write HTML codes of the different image paths.
21. Explain the HTML table tags in a Tabular form.
22. Write a HTML code to display the following output:
i.

ii.

57
iii.

23. Explain HTML forms.

24. Write and explain the HTML Form Syntax.

25. Write difference between post and get methods.

26. Explain the HTML form tags in a Tabular form.

27. Write the html code that displays the form below:

28. Explain HTML Iframe.

29. Written the syntax of HTML Iframe.
30. Write a HTML code to display the following Iframe:

58
59
 CHAPTER FIVE
CASCADING STYLE SHEET

INTRODUCTION TO CSS

CSS It is a style sheet language which is used to describe the look and formatting of a document
written in markup language. It provides an additional feature to HTML. It is generally used with
HTML to change the style of web pages and user interfaces. Hence CSS describe the presentation
of documents, define sizes, spacing, fonts, colors, layout, etc.

CSS uses selectors to select certain parts of an HTML document in order to apply new styles to
them. You can select all elements of the same type, or you can select specific elements by their
attributes, even creating custom attributes to fine-tune which elements you’d like to apply styles
to.

The browser reads CSS from top to bottom, line by line. That means that if you write a selector
once, and then write the same selector later in the CSS document, the later styles will override the
earlier ones. This is called the cascade. CSS specifications are maintained by the World Wide Web
Consortium (W3C)

DEFINITION OF CSS

CSS is a formatting language used to describe the appearance of content in an HTML file.

CSS It is a style sheet language which is used to describe the looks and formatting of a document
written in markup language.

60
VERSIONS OF CSS

i. CSS1

The first CSS specification to become an official W3C Recommendation is CSS level 1, published
in December 1996.

ii. CSS2

CSS level 2 specification was developed by the W3C and published as a recommendation in
May 1998.

iii. CSS3

Work on CSS level 3 started around the time of publication of the original CSS 2
recommendation. The earliest CSS 3 drafts were published in June 1999. CSS3 is the latest
version of the CSS specification. CSS3 adds several new styling features and improvements to
enhance the web presentation capabilities.

ADVANTAGES OF USING CSS

1. Separation of style and layout: One of the advantages of CSS is that it allows the separation
of style and layout from the content of the document.
2. CSS Save Lots of Time: CSS gives lots of flexibility to set the style properties of an
element. You can write CSS once; and then the same code can be applied to the groups of
HTML elements, and can also be reused in multiple HTML pages.
3. Easy Maintenance: CSS provides an easy means to update the formatting of the documents,
and to maintain the consistency across multiple documents. Because the content of the
entire set of web pages can be easily controlled using one or more style sheets.
4. Pages Load Faster: CSS enables multiple pages to share the formatting information, which
reduces complexity and repetition in the structural contents of the documents. It
significantly reduces the file transfer size, which results in a faster page loading.
5. Superior Styles to HTML: CSS has much wider presentation capabilities than HTML and
provide much better control over the layout of your web pages. So you can give far better
look to your web pages in comparison to the HTML presentational elements and attributes.
6. Multiple Device Compatibility: CSS also allows web pages to be optimized for more than
one type of device or media. Using CSS the same HTML document can be presented in
different viewing styles for different rendering devices such as desktop, cell phones, etc.

61
DISADVANTAGES OF CSS

a. Different browsers may interpret Style Sheets in different ways.

b. Some styles may not be seen at all on some browsers. I.e. not uniformly supported by all
browsers.

SYNTAX OF CSS

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document.

A style rule is made of three parts:

a. Selector
b. Property
c. Value

i. Selector: is an HTML tag at which a style will be applied.

Example

a. table {border :1px;}

b. h1 {color: red; font-size: 15px;}

ii. Property: A property is a type of attribute of HTML tag.

• They could be color, border, etc.

iii. Value: these are the values assigned to properties. For e.g. color property can have the value
either red, blue, green etc.

62
 Declarations: The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations: color set to blue and font-size set
to 12px. Each declaration contains a property name and value, separated by a colon.

63
CSS INCLUSION
Including CSS in HTML documents. CSS can either be attached as a separate document or
embedded in the HTML document itself. There are three methods of including CSS in an HTML
document:

i. Inline styles — Using the style attribute in the HTML start tag.
ii. Embedded styles — Using the <style> element in the head section of a document.
iii. External style sheets — Using the <link> element, pointing to an external CSS file.

1. INLINE STYLES

Inline styles are used to apply the unique style rules to an element by putting the CSS rules
directly into the start tag. It can be attached to an element using the style attribute.

The style attribute includes a series of CSS property and value pairs. Each "property: value" pair
is separated by a semicolon (;). But it needs to be all in one line i.e. no line break after the
semicolon.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color : red; font-size:30px;">This is a heading</h1>
<p style="color : blue; font-size:22px;">This is a paragraph.</p>
</body>
</html>

OUTPUT

NB: Using the inline styles are generally considered as a bad practice. As style rules are
embedded directly inside the HTML tag, it causes the presentation to become mixed with the
content of the document; which makes the code hard to maintain and negates the purpose of
using CSS.

64
ADVANTAGES OF INLINE CSS
a. Easy to use.
b. Good for quick, one-off situations.
DISADVANTAGES OF INLINE CSS
a. Mixing content and presentation: this should be avoided.
b. Hard to manage for large, complex pages.

2. EMBEDDED OR INTERNAL STYLE

Embedded or internal style sheets only affect the document they are embedded in.

Embedded style sheets are defined in the <head> section of an HTML document using
the <style> element. You can define any number of <style> elements in an HTML document but
they must appear between the <head> and </head> tags.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: blue; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
OUTPUT

65
ADVANTAGES OF INTERNAL CSS
a. Separates content and presentation.
b. Easy to use.
In particular, if you want to apply the same style to all tags of a certain type (say <p>) it’s easier
to do it with internal CSS than inline CSS
c. Good if you only have a limited amount of CSS in the page

DISADVANTAGES OF INTERNAL CSS

a. Hard to manage for large, complex pages
b. Cannot reuse across multiple pages

66
 3. EXTERNAL CSS
An external style sheet is ideal when the style is applied to many pages of the website.

An external style sheet holds all the style rules in a separate document that you can link from any
HTML file on your site. External style sheets are the most flexible because with an external style
sheet, you can change the look of an entire website by changing just one file.

LINKING EXTERNAL STYLE SHEETS

An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes
inside the <head> section.

Before linking, we need to create a style sheet first.

SYNTAX
<link rel="stylesheet" href="filename.css">

EXAMPLE

style.css

body {

background: lightyellow;

font: 18px Arial, sans-serif;

h1 {

color: orange;

cssDemo.html

<!DOCTYPE html>
<html>
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

67
ADVANTAGES OF EXTERNAL CSS
a. Separates content and presentation
b. Can include many different CSS pages with multiple tags
DISADVANTAGES OF EXTERNAL CSS
a. Lots of different files to manage (which might be overkill for smaller
pages)

68
CSS SELECTORS
Selectors is a pattern that is to target specific elements and apply some style on them. The style
rules associated with that selector is applied to the elements that match the selector pattern.

Universal Selector
The style rules for Universal Selector is applied to every element in a document.

The universal selector may be omitted if other conditions exist on the element. This selector is
often used to remove the default margins and paddings from the elements for quick testing
purpose.

EXAMPLE

*{
margin: 0;
padding: 0;
}

Element Selectors
An element type is applied on all instance of the element in the document with the corresponding
element type name.

EXAMPLE

p{
color: blue;
}

69
The style rules inside the p selector will be applied on every <p> element (or paragraph) in the
document and color it blue, regardless of their position in the document tree.

Id Selectors
The id selector is used to define style rules for a single or unique element.

The id selector is defined with a hash sign (#) immediately followed by the id value.

EXAMPLE

#error {
color: red;
}
This style rule renders the text of an element in red, whose id attribute is set to error.

Class Selectors
The class selectors can be used to select any HTML element that has a class attribute. All the
elements having that class will be formatted according to the defined rule.

The class selector is defined with a period sign (.) immediately followed by the class value.

EXAMPLE

.blue {
color: blue;
}
The above style rules renders the text in blue of every element in the document that
has class attribute set to blue.

EXAMPLE

p.blue {
color: blue;
}
The style rule inside the selector p.blue renders the text in blue of only those <p> elements that
has class attribute set to blue, and has no effect on other paragraphs.

Descendant Selectors
You can use these selectors when you need to select an element that is the descendant of another
element, for example, if you want to target only those anchors that are contained within an
unordered list, rather than targeting all anchor elements.

70
EXAMPLE

ul.menu li a {
text-decoration: none;
}
h1 em {
color: green;
}
The style rules inside the selector ul.menu li a applied to only those <a> elements that contained
inside an <ul> element having the class .menu, and has no effect on other links inside the
document.

Similarly, the style rules inside the h1 em selector will be applied to only those <em> elements
that contained inside the <h1> element and has not effect on other <em> elements.

Child Selectors
A child selector is used to select only those elements that are the direct children of some element.

A child selector is made up of two or more selectors separated by a greater than symbol (>). You
can use this selector, for instance, to select the first level of list elements inside a nested list that
has more than one level. Let's check out an example to understand how it works:

EXAMPLE

ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}
The style rule inside the selector ul > li applied to only those <li> elements that are direct
children of the <ul> elements, and has no effect on other list elements.

Grouping Selectors
Often several selectors in a style sheet share the same style rules declarations. You can group
them into a comma-separated list to minimize the code in your style sheet. It also prevents you
from repeating the same style rules over and over again.

EXAMPLE

h1 {
font-size: 36px;
font-weight: normal;

71
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
}
As you can see in the above example, the same style rule font-weight: normal; is shared by the
selectors h1, h2 and h3, so it can be grouped in a comma-separated list, like this:

h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}

72
SELECTORS EXAMPLE
selector.css
/*Universal selector*/
*{
margin: 0;
}

/*Element selector*/
h1{
color:red;
}

/*class selector*/
.address{
font-size:18px;
font-style:italic;
}

/*id selector*/
#section1{
Color:blue;
}

/*grouping selector*/
h4, h5, h6 {
font-family:algerian;
}

73
 SelectorDemo.html
<!DOCTYPE html>
<html>
<head>
<title>Selector Demo</title>
<link rel="stylesheet" href="selector.css">
</head>
<body>
<h1>This is a heading</h1><br><hr>

<div class="address"> With CSS, you can control the color,

font, the size of text, the spacing between elements,<br>
</div>
<div> With CSS, you can control the color,
font, the size of text, the spacing between elements,<br><hr>
</div>

<p id="section1">CSS stands for Cascading Style Sheets</p>

<p>CSS stands for Cascading Style Sheets<br><hr></p>

<h2>An element type is applied on all instance of the element</h2>

<h3>An element type is applied on all instance of the element</h3>
<h4>An element type is applied on all instance of the element</h4>
<h5>An element type is applied on all instance of the element</h5>
<h6>An element type is applied on all instance of the element</h6>
</body>
</html>

OUTPUT

74
CASCADING OR OVERRIDING ORDER
What style will be used when there is more than one style specified for an HTML element?
Generally, all the styles will "cascade" into a new “virtual" style sheet.
Here are the rules for cascading or overriding Style Sheet.
a. Any inline style sheet takes the highest priority. So, it will override any rule defined in
<style>...</style> tags or the rules defined in any external style sheet file.
b. Any rule defined in <style>...</style> tags will override the rules defined in any
external style sheet file.
c. Any rule defined in the external style sheet file takes the lowest priority, and the rules
defined in this file will be applied only when the above two rules are not applicable.

CSS FONT

CSS Font property is used to control the look of texts. By the use of CSS font property you can
change the text size, color, style and more.

These are some important font attributes:

i. CSS Font color: This property is used to change the color of the text. (Standalone
attribute). There are three different format to define a color: By a color name (h1 {color:
red;}), By a hexadecimal value (h2{color: #9000A1;}) and RGB (p{color: rgb(0, 220,
98);})
ii. CSS Font family: This property is used to change the face of the font. And is divided into
two types: Generic family it includes Serif, Sans-serif, and Monospace. Font family it
specifies the font family name like Arial, Verdana etc. Example p {font-family: Arial;}
iii. CSS Font size: This property is used to increase or decrease the size of the font. Example
p {font-size: 18px;}.
iv. CSS Font style: This property is used to make the font bold, italic or oblique. Example h2
{font-style: italic;}.
v. CSS Font variant: This property creates a small-caps effect. Example p {font-variant:
small-caps;}.

75
vi. CSS Font weight: This property is used to increase or decrease the boldness and lightness
of the font. The possible values of font weight may be normal, bold, bolder, lighter or
number (100, 200… up to 900). Example p{font-weight: bold;}

76
TEXT DECORATION

The text-decoration property is use to add or remove an underline. Usually you do not want to add
an underline to text unless it is a link. But you may want to remove the underline from a link,
which is a popular style. Example a {text-decoration: none;}. To underline element after you
define the selector, put the property as text-decoration and set the value to underline.

CSS BACKGROUND

You can set the following background properties of an element.

i. The background-color: The background-color property specifies the background color

of an element. Example: body{background-color: lightblue;}
ii. The background-image: specifies an image to use as the background of an element.
Example: body{background-image: url("paper.gif");}
iii. The background repeat: repeat an image both horizontally and vertically. Example body{
background-image: url("paper.gif"); background-repeat: repeat-x;}
iv. The background position: The background position is used to define the initial position
of the background image. By default, the background image is placed on the top-left of the
webpage. It has other values such as right, left, center, bottom etc.
v. The background attachment: Is used to control the scrolling of an image in the browser
window. You can set it as fixed or scroll.

77
CSS ─ MEASUREMENT UNITS

CSS supports a number of measurements including absolute units such as inches, centimeters,
points, and so on, as well as relative measures such as percentages and em units. You need these
values while specifying various measurements in your Style rules e.g. border="1px solid red".

We have listed out all the CSS Measurement Units along with proper Examples:

pt Defines a measurement in points. A body {font-size: 18pt;}

point is defined as 1/72nd of an inch.

px Defines a measurement in screen p {padding: 25px;}

pixels.

78
CSS COLORS
CSS uses color values to specify a color. Typically, these are used to set a color either for the
foreground of an element (i.e., its text) or for the background of the element.

DEFINING COLOR VALUES

Colors in CSS are specified in the following formats:

i. Color keyword e.g. "red", "green", "blue", "transparent" etc.

h1 {
color: red;
}
p{
color: purple;
}
ii. HEX value e.g. "#ff0000", "#00ff00" etc.

h1 {
color: #ffa500;
}
p{
color: #00ff00;
}
iii. RGB value e.g. "rgb(255, 0, 0)" etc.

h1 {
color: rgb(255, 165, 0);
}
p{
color: rgb(0, 255, 0);
}

79
 COLOR HEX

EXERCISES
1. What is the full meaning of CSS.
2. Define CSS.
3. List all the versions of CSS and their date of release.
4. List and explain the advantages of using CSS.
5. List the disadvantages of CSS.
6. List and explain the syntax of CSS.
7. List and explain CSS inclusion.
8. Write a code to demonstrate inline CSS.
9. Write a code to demonstrate internal CSS.
10. Write a code to demonstrate external CSS.
11. Write the syntax for linking external style sheets.
12. Write a code to demonstrate linking external style sheets.
13. Explain CSS selectors.
14. Explain CSS selectors with example.
15. Write a code to demonstrate the output below using selectors:

80
16. Write the cascading order.
17. Demonstrate cascading order with an example.
18. Explain CSS font with a code example.
19. Explain text decoration with a code example.
20. Explain CSS background with a code example.
21. Explain CSS measurement units with a code example.

22. List and explain ways of defining CSS color values with a code example.

81
HTML5 STRUCTURAL ELEMENT
HTML 5 has introduced a number of sectioning elements that can be used to structure a given web
page.

They include:
1. Header

<header></header>

The header is a place to put your site title and navigation:

2. Nav

<nav></nav>

The nav is the element that contains your site navigation (all of the links that you put in your
header, sidebar, or footer to help people get around your site.)

3. Main

<main></main>

The main is the big container for your main content. You should only use one per HTML
document.

82
 4. Article

<article></article>

The article element contains an article, or the main information, of your web page. It may be
an article, a blog post, an interactive form, or any other type of content. One <main> element
may contain multiple articles.

5. Section

<section></section>

Articles are divided into sections. Each section has a heading <h1...h6> etc., which we can
defined in the section called Adding Text.

6. Aside

<aside></aside>

An aside is a place to put extra information that doesn’t go into the main article, but is not
header or footer content. This may be a place for an author’s bio, extra links, ads, and more. This
is placed outside of the <main> element.

7. Footer

<footer></footer>

The footer is used for a web page’s footer content. It may include copyright information,
your site navigation, other related links, and more.

83
EXAMPLE

newhtml.css

header{
width: 100%;
text-align: center;
background-color: lightblue;
}
section{
margin: 0;
padding: 5px;
background-color: pink;
}
article{
margin: 0;
padding: 5px;
background-color: yellow;
}
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
footer{
margin: 0;
width: 100%;
text-align: center;
background-color: lightgreen;
}

84
 html5Demo.html

<!DOCTYPE html>

<html>

<head>

<title>HTML 5 Demo</title>
<link rel="stylesheet" href=" newhtml.css">
</head>
<body>
<header>
<nav>
<a href="/html/">HTML</a> |<a href="/css/">CSS</a> |
<a href="/js/">PHP</a> |<a href="/jquery/">MySQL</a>
</nav>
</header>
<section>
<h1>Microsoft Edge</h1>

<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet
Explorer.</p>

<aside>

<h4>HTML5 </h4>

<p>HTML5 has new structural elements that define specific web page features with much more accurate semantics
than were available in HTML 4.</p>

</aside>

</section>

<article>

<h2>Google Chrome</h2>

<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>

<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular
web browser since January, 2018.</p>

</article>

<footer>

<p>Author: Elgurama<br><a href="mailto:[email protected]">[email protected]</a>

</p>
</footer>
</body>
</html>

85
OUTPUT

EXERCISE
1. Explain html5 structural element with a code example.
2. Draw the diagram the basic html5 structural element.
3. Use HTML 5 and CSS to design the websites below:
i.

86
ii.

iii.

87
 CHAPTER SIX

JAVASCRIPT
INTRODUCTION TO JAVASCRIPT

JavaScript is the most popular and widely used client-side scripting language. Client-side
scripting refers to scripts that run within your web browser. JavaScript is designed to add
interactivity and dynamic effects to the web pages by manipulating the content returned from a
web server.

JavaScript is an object-oriented language, and it also has some similarities in syntax to Java
programming language. But JavaScript is not related to Java.

Definition: JavaScript is a client side (front-end) scripting language that is used for creating
dynamic web pages.

HISTORY OF JAVASCRIPT

JavaScript was originally developed at Netscape in 1995 by Brandon Eich. It was originally
called Mocha, late on renamed as LiveScript and lastly renamed to JavaScript. It became an
ECMA (European Computer Manufacturers Association) standard in 1997. Now JavaScript is
the standard client-side scripting language for web-based applications, and it is supported by
virtually all web browsers available today, such as Google Chrome, Mozilla Firefox, Apple
Safari, etc.

APPLICATION OF JAVASCRIPT

JavaScript is used to create interactive websites. It is mainly used for:

i. Client-side validation.
ii. Dynamic drop-down menus
iii. Displaying date and time
iv. Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog
box and prompt dialog box)
v. Displaying clocks etc

88
ADVANTAGES OF JAVASCRIPT
JavaScript allows interactivity such as:

i. Implementing form validation

ii. React to user actions, e.g. handle keys
iii. Changing an image on moving mouse over it
iv. Sections of a page appearing and disappearing
v. Content loading and changing dynamically
vi. Performing complex calculations
vii. Custom HTML controls, e.g. scrollable table

DISADVANTAGES OF JAVASCRIPT

i. Client – side security: since the code runs on user computer, it can be exploited for
malicious purposes.
ii. JavaScript is sometimes interpreted differently by different browsers

Syntax
<script type=”text/javascript” src=”filename.extension”></script>
The script tag takes two important attributes:

i. Type: This attribute is what is to indicate the scripting language in use and its value
should be set to “text/javascript”.
ii. Src (Source): This attribute is use to point where the .js file is located.

EMBEDDING JAVASCRIPT IN HTML

i. INTERNAL: Placing the JavaScript code directly inside body.

ii. EMBEDDED: Placing the JavaScript code in the head of the HTML file.
iii. EXTERNAL: Creating an external JavaScript file with the .js extension and then load it
within the page through the src attribute of the <script> tag.

89
INTERNAL EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript</title>
</head>
<body>
<button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

OUTPUT

90
EMBEDED EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>Embedding JavaScript</title>
<script>
var greet = "Hello World!";
document.write(greet);
</script>
</head>
<body>
<p>JavaSript is simple</p>
</body>
</html>

OUTPUT

91
EXTERNAL EXAMPLE

hello.js
function msg() {
alert("Practice for Test and Exams");
}
javascriptDemo.html
<!DOCTYPE html>
<html>
<head>
<title>Including External JavaScript File</title>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<form>
<input type="button" value="CLICK" onClick="msg()">
</form>
</body>
</html>

OUTPUT

92
GENERATING OUTPUT IN JAVASCRIPT
There are certain situations in which you may need to generate output from your
JavaScript code. For example, you might want to see the value of variable, or write a message to
browser console to help you debug an issue in your running JavaScript code, and so on.

In JavaScript there are several different ways of generating output including writing output to the
browser window or browser console, displaying output in dialog boxes, writing output into an
HTML element, etc.

1. WRITING OUTPUT TO BROWSER CONSOLE

You can easily outputs a message or writes data to the browser console using
the console.log() method. This is a simple, but very powerful method for generating detailed
output.

Tip: To access your web browser's console, first press F12 key on the keyboard to open the
developer tools then click on the console tab.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Output</title>
</head>
<body>
<script>
// Printing a simple text message
console.log("Hello World!");
// Printing a variable value
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum);
</script>
<p>Note:Please check out the browser console by pressing the f12 key on the
keyboard.</p>
</body>
</html>

OUTPUT

93
 2. DISPLAYING OUTPUT IN ALERT DIALOG BOXES
You can also use alert dialog boxes to display the message or output data to the user. An alert
dialog box is created using the alert() method.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Output</title>
</head>
<body>
<script>
// Printing a simple text message
alert("Kashere is peaceful");
</script>
</body>
</html>
OUTPUT

94
 3. WRITING OUTPUT TO THE BROWSER WINDOW

You can use the document.write() method to write the content to the current
document only while that document is being parsed.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Output</title>
</head>
<body>
<script>
// Printing a simple text message
document.write("Hello World!");
</script>
<br>
<script>
// Printing a variable value
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum);
</script>
</body>
</html>

OUTPUT

95
 4. INSERTING OUTPUT INSIDE AN HTML ELEMENT
You can also write or insert output inside an HTML element using the
element's innerHTML property. However, before writing the output first we need to select the
element using a method such as getElementById().

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Output</title>
</head>
<body>
<p id="greet"></p>
<p id="result"></p>

<script>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Welcome to Gombe State";

// Writing a variable value inside an element

var x = 10;
var y = 2;
var sum = x / y;
document.getElementById("result").innerHTML = sum;
</script>
</body>
</html>

OUTPUT

96
JAVASCRIPT SIMPLE CALCULATOR
Write a code that displays the following calculator that can calculate the sum of First and Second
Number:

SOLUTION
<DOCTYPE html>
<html>
<head>
<title>JavaScript sum Calculator</title>
</head>
<body>
<form name="cal">
<label>A JavaScript Calculator to find sum</label><br>
<label>First Number</label>
<input type="text" name="num1"><br>
<label>Second Number</label>
<input type="text" name="num2"><br>
<label>Result</label>
<input type="text" name="res"><br>
<input type="button" name="cal" value="calculate"
onClick="sumNum()">
</form>
<script type="text/javascript">
function sumNum()
{
var num1, num2, res;
num1=Number(document.cal.num1.value);
num2=Number(document.cal.num2.value);
res=num1+num2;
document.cal.res.value=res;
}
</script>
</body>
</html>

97
JAVASCRIPT EVENT

HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML
pages, JavaScript can "react" on these events. An HTML event can be something the browser
does, or something a user does. Here are some examples of HTML events:

i. An HTML web page has finished loading

ii. An HTML input field was changed
iii. An HTML button was clicked
Often, when events happen, you may want to do something. JavaScript lets you execute code when
events are detected.

MOUSE EVENT

Events Description

Onclick occurs when element is clicked.

Ondblclick occurs when element is double-clicked.

Onmouseover occurs when mouse is moved over an element.

Onmouseout occurs when mouse is moved out from an element (after moved
over).

Onmousedown occurs when mouse button is pressed over an element.

Onmousemove occurs when mouse pointer moves within an element.

Onmouseup occurs when mouse is released from an element (after mouse is

pressed).

98
EXAMPLE
<DOCTYPE html>
<html>
<head>
<title>JavaScript Events</title>
</head>
<body>
<script>
var x=5;
var y=10;
var sum=x+y;
var diff=x-y;
var mul=x*y;
var div=x/y;
</script>
<button onclick="document.write(Date())">Time</button><br>
<button ondblclick="document.write(sum)">SUM</button><br>
<button onmouseout="document.write(mul)">PRODUCT</button><br>
<button onmousedown="document.write(div)">DIVIDE</button><br>
<button onmouseover="document.write(diff)">DIFFERENCE</button><br>
</body>
</html>

OUTPUT

JAVASCRIPT FORM VALIDATION

Form validation it the process of making sure appropriate values are inserted and submitted
through a form. JavaScript provides facilities to validate forms on the client side so processing will
be fast than server-side validation. So, most of the web developers prefer JavaScript form
validation. Through JavaScript, we can validate name, password, email, date, mobile number etc
fields.

99
EXAMPLE

Validate a form to have the following:

A form with name, password and email elements.

Name can’t be empty, Password can’t be less than 6 characters long, Email can’t be empty.

NB: The user will not be forwarded to the next page until all the values are correct.

<!DOCTYPE html>
<html>
<head>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
var email=document.myform.email.value;
if (name==null || name==""){
alert("Name can't be blank");
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
}
else if (email==null || email==""){
alert("Email can't be blank ");
}
}
</script>
</head>

100
 <body>
<form name="myform" method="" action="" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

OUTPUT

EXERCISES

1. Define JavaScript.
2. Write the brief history of JavaScript.
3. List 5 application of JavaScript.
4. List 5 advantages of JavaScript.
5. List 5 disadvantages of JavaScript.
6. List and explain the ways of embedding JavaScript in html.
7. Write a code to demonstrate inline JavaScript in html.
8. Write a code to demonstrate embedded JavaScript in html.
9. Write a code to demonstrate external JavaScript in html.
10. Write and explain JavaScript script tag.
11. List all the ways of generating output in JavaScript.
12. Write a code to demonstrate each ways of generating output in JavaScript.

101
13. Write a code to display the calculator below:

14. Explain JavaScript mouse events.

15. List and explain 5 JavaScript events.
16. Write a code to demonstrate all the JavaScript mouse events.
17. Write a code to demonstrate form validation with the following:

i. Name can’t be empty, password can’t be less than 6 characters long, email can’t be
empty.

18. Write a code to demonstrate form validation with the following:

i. Name can’t be empty, password and confirm password must be the same characters

19. Write a code to demonstrate the following form validation:

20. Write a code to demonstrate form validation with the following:

i. Name can’t be empty, phone number must be 11 characters, email must have @
symbol.

21. Write a code to checks if an alphabet is a vowel or consonant.

22. Write a code to checks if a number is even or odd.

102
 CHAPTER SEVEN
INTRODUCTION TO PHP

PHP (Hypertext Preprocessor) is an open source, interpreted and object-oriented scripting

language i.e. executed at server side. It is used to develop web applications (an application i.e.
executed at server side and generates dynamic page) and can be embedded directly into the HTML
code. The PHP syntax is very similar to JavaScript, Perl and C. PHP is often used together with
Apache (web server) on various operating systems and supports many databases like (MySQL,
Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
PHP stands for Hypertext Preprocessor.
PHP is an interpreted language, i.e., there is no need for compilation.
PHP is a server-side scripting language.
PHP is faster than other scripting languages, for example, ASP (Active Server Pages) and JSP
(Java Server Pages.)

SERVER-SIDE SCRIPTING
A “script” is a collection of program or sequence of instructions that is interpreted or carried out
by another program rather than by the computer processor.
In server-side scripting, (such as PHP, ASP) the script is processed by the server Like: Apache
on Windows. And the client-side scripting such as JavaScript runs on the web browser.

ADVANTAGES OF SERVER-SIDE SCRIPTING

i. Dynamic content.
ii. Computational capability.
iii. Database and file system access.
iv. Network access (from the server only).
v. Built-in libraries and functions.
vi. Security improvements

103
USES OF PHP
i. PHP can generate dynamic page content.
ii. PHP can collect form data.
iii. PHP can send and receive cookies (programs that store user data to remember user details
and improve browsing experience).
iv. PHP can add, delete, modify data in your database.
v. PHP can restrict users to access some pages on your website.
vi. PHP can encrypt data.

FEATURES OF PHP
i. Performance: Script written in PHP executes much faster than those scripts written in
other languages such as JSP & ASP.
ii. Open Source Software: PHP source code is free available on the web. You can
develop all the version of PHP according to your requirement without paying any cost.
iii. Platform Independent: PHP are available for WINDOWS, MAC, LINUX & UNIX
operating system. A PHP application developed in one OS can be easily executed in
other OS also.
iv. Compatibility: PHP is compatible with almost all local servers used today like Apache,
IIS etc.
v. Embedded: PHP code can be easily embedded within HTML tags and script.

PHP VERSIONS
i. PHP Version 1.0
PHP developed in 1994 by Rasmus Lerdorf.
ii. PHP Version 2.0
Released in 1995.
iii. PHP Version 3.0
In 1997, Zeev Suraski and Andi Gutmans rewrote the internal PHP parser and formed the basic
structure for PHP 3. The official launch of PHP 3 was done in June 1998 once the public testing
was completed.
104
iv. PHP Version 4.0
In 2000, PHP version 4 powered by Zend Engine 1 was released for public usage.
v. PHP Version 5.0 and 6.0
In 2004, this was released and was powered by Zend Engine 2.
vi. Version 7.0
The current version was created during the period of 2016 and 2017, PHP underwent major
changes and the update was released as PHP 7. The version number selected for rolling out this
release has to face several debates.

ENVIRONMENTAL SETUP
In order to develop and run PHP web pages, you need two (2) vital components have to be installed
on your computer system namely:
i. Web Server: XAMPP (cross-platform, Apache, MySQL, PHP and Perl).
ii. Database: e.g. MySQL, Oracle.

BASIC PHP SYNTAX

A PHP is a script language that is executed on the server and the plain HTML result is sent back
to the browser. We have the following three ways of writing PHP syntax.
i. Standard Tags: Recommended
<?php
Code goes here
?>
ii. Short tags:
<?
Code goes here
?>
iii. HTML or script tags:
<script language = “php”>
code goes here
</script>

105
PHP FILES
PHP files can contain text, HTML, CSS, JavaScript, and PHP code. PHP code are executed on the
server, and the result is returned to the browser as plain HTML. PHP files have extension ".php".

CREATING PHP SCRIPT

After you have successfully installed WampServer on your computer.

1. On the WampServer.
2. create a new PHP file in a text editor and type the following code:

<?php
// Display greeting message
echo "Hello, world!";
?>
3. save the file as "hello.php" in your project folder (located at C:\wamp\www\project).
4. Run the code through your browser through by typing the
URL: http://localhost/project/hello.php.

Alternatively, you can access the "hello.php" file through selecting the localhost option and then
select the project folder from the WampSever menu on the taskbar.

EMBEDDING PHP IN HTML.

PHP can be embedded within a normal HTML web page. That means inside your HTML
document you can write the PHP statements

EXAMPLE

<!DOCTYPE HTML>
<html>
<head>
<title>PHP Application</title>
</head>
<body>
<?php
// Display greeting message
echo 'Hello First PHP';
?>
</body>
</html>

106
OUTPUT

VARIABLES IN PHP
Variables are used to store data, like string of text, numbers, etc. Variable values can change over
the course of a script. Here're some important things to know about variables:

i. In PHP, a variable does not need to be declared before adding a value to it. PHP
automatically converts the variable to the correct data type, depending on its value.

ii. After declaring a variable it can be reused throughout the code.

iii. The assignment operator (=) used to assign value to a variable.

SYNTAX

$var_name = value;

EXAMPLE
<?php
// variables declaration
$txt = "Internet Technology!";
$x = 10;
$y = 5;
$sum = $x+$y;

echo $txt;
echo $sum;
?>

107
PHP OUTPUT
PHP ECHO AND PRINT STATEMENT
In PHP there are two basic ways to get output:
i. echo or echo().
ii. print or print().
SIMILARITIES BETWEEN ECHO AND PRINT STATEMENT
They are both used to output data to the screen.
DIFFERENCES BETWEEN ECHO AND PRINT STATEMENT
i. echo has no return value while print has a return value of 1 so it can be used in expressions.
ii. echo can take multiple parameters while print can take one argument.
iii. echo is faster while Print is slower to use.
EXAMPLE
<?php
// Display using echo
echo "<h1>Welcome to Kashere</h1>";
echo "<h1 style='color: red;'>A land of Opportunities. </h1>";

// Display using print

print "<h4>This is a simple heading.</h4>";
print "<h4 style='color: blue;'>This is heading with style.</h4>";
?>

108
PHP STRINGS

A string is a sequence of letters, numbers, special characters and arithmetic values or

combination of all. The simplest way to create a string is to enclose the string literal (i.e. string
characters) in single quotation marks (')

$my_string = 'Hello World';

You can also use double quotation marks ("). However, single and double quotation marks work
in different ways. Strings enclosed in single-quotes are treated almost literally, whereas the
strings delimited by the double quotes replaces variables with the string representations of their
values as well as specially interpreting certain escape sequences.

The escape-sequence replacements are:

i. \n is replaced by the newline character.

ii. \r is replaced by the carriage-return character

iii. \t is replaced by the tab character

iv. \$ is replaced by the dollar sign itself ($)

v. \" is replaced by a single double-quote (")

vi. \\ is replaced by a single backslash (\)

Here's an example to clarify the differences between single and double quoted strings:

EXAMPLE
<?php
$my_str = 'World';
echo "Hello, $my_str!<br>"; // Displays: Hello World!
echo 'Hello, $my_str!<br>'; // Displays: Hello, $my_str!

echo '<pre>Hello\tWorld!</pre>'; // Displays: Hello\tWorld!

echo "<pre>Hello\tWorld!</pre>"; // Displays: Hello World!
echo 'I\'ll be back'; // Displays: I'll be back
?>

109
MANIPULATING PHP STRINGS

PHP provides many built-in functions for manipulating strings like calculating the length of a
string, find substrings or characters, replacing part of a string with different characters, take a
string apart, and many others. Here are the examples of some of these functions.

i. Calculating the Length of a String

The strlen() function is used to calculate the number of characters inside a string. It also includes
the blank spaces inside the string.

ii. Counting Number of Words in a String

The str_word_count() function counts the number of words in a string.

iii. Replacing Text within Strings

The str_replace() replaces all occurrences of the search text within the target string.

iv. Reversing a String

The strrev() function reverses a string.

v. Finding substring

The substr() is used to get a substring from a given string.

Example
<?php
// Calculating the Length of a String
$my_str = 'Welcome to Federal University of Kashere';
echo strlen($my_str); echo"<br>";// Output: 40
// Counting Number of Words in a String
$my_str1 = 'The quick brown fox jumps over the lazy dog.';
echo str_word_count($my_str1); echo"<br>";// Output: 9
// Replacing Text within Strings
$my_str2 = 'If the facts do not fit the theory, change the facts.';
echo str_replace("facts", "truth", $my_str2); echo"<br>";// Output: If the truth do not fit the
theory, change the truth.
// Reversing a String
$my_str3 = 'You can do anything, but not everything.';
echo strrev($my_str3); echo"<br>";// Output: .gnihtyreve ton tub ,gnihtyna od nac uoY
// Finding substring
$my_str4 = 'Live is precious.';
echo substr($my_str4, 0, 5); echo"<br>";// Output: Live
?>

110
OUTPUT

PHP FORM HANDLING

We can create and use forms in PHP. The form request may be get or post. To get form data, we
need to use PHP superglobals which are:
i. $_GET: To retrieve data from get request, we need to use $_GET.
ii. $_POST : To retrieve data from get request, we need to use $_POST.

PHP GET FORM

Get request is the default form request. The data passed through get request is visible on the URL
browser so it is not secured. It sends the encoded user information appended to the page request.
Before the browser sends the information, it encodes it using a scheme called URL encoding.
In this scheme:
i. Name/value pairs are joined with equal signs
ii. Different pairs are separated by the ampersand.
e.g. name1=value1&name2=value&name3=value3.
iii. Spaces are removed and replaced with the + character
iv. Any non-alphanumeric characters are replaced with a hexadecimal values after the
information is encoded.
GET also has limit on the amount of information to send.

111
EXAMPLE
formTest.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="Testing.php" method="GET">
<label>Name:</label><input type="text" name="name1"><br>

<label>Gender:</label><input type="text" name="gender1"><br>

<label>Age:</label><input type="text" name="age1"><br>

<input type="submit" value="SEND"><br>

</form>
</body>
</html>
Testing.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<? php
$name = $_GET["name1"];
$gender = $_GET["gender1"];
$age = $_GET["age1"];
echo "Welcome $name, Your Gender is: $gender and Your Age is: $age";
?>
</body>
</html>

OUTPUT

112
PHP POST FORM
Post request is widely used to submit form that have large amount of data such as file upload,
image upload, login form, registration form etc.
The data passed through post request is not visible on the URL browser so it is secured.
All names/values are embedded within the body of the HTTP request.
EXAMPLE
postForm.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action=" postFormHandler.php" method="POST">
<label>First Number:</label><input type="text" name="num1"><br>
<label>Second Number:</label><input type="text" name="num2"><br>
<input type="submit" value="SUM"><br>
</form>
</body>
</html>
postFormHandler.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
$first=$_POST["num1"];
$second=$_POST["num2"];
$sum=$first + $second;
echo "The sum of $first and $second is : $sum";
?>
</body>
</html>
OUTPUT

113
 contactForm.html
<!DOCTYPE html>
<head>
<title>Contact Form</title>
</head>
<body>
<h2>Contact Us</h2>
<p>Please fill in this form</p>
<form action="contactFormHandler.php" method="post">
<label>Name: * </label>
<input type="text" name="name"><br><br>
<label>Email: * </label>
<input type="text" name="email"><br><br>
<label>Subject:</label>
<input type="text" name="subject"><br><br>
<label>Message: * </label>
<textarea name="message" rows="5" cols="30"></textarea><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
contactFormHandler.php

<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<h1>Thank You</h1>
<p>Here is the information you have submitted:</p>
<form action="" method="">
<label>Name:</label> <?php echo $_POST["name"]?></br>
<label>Email:</label> <?php echo $_POST["email"]?></br>
<label>Subject:</label> <?php echo $_POST["subject"]?></br>
<label>Message:</label> <?php echo $_POST["message"]?></br>
</form>
</body>
</html>

114
OUTPUT

115
PHP FUNCTIONS
A function is a block of code that performs a specific task.

ADVANTAGES OF USING FUNCTIONS

i. Functions reduces the repetition of code within a program: Function allows you to extract
commonly used block of code into a single component. Now you can perform the same task by
calling this function wherever you want within your script without having to copy and paste the
same block of code again and again.

ii. Functions makes the code much easier to maintain: Since a function created once can be
used many times, so any changes made inside a function automatically implemented at all the
places without touching the several files.

iii. Functions makes it easier to eliminate the errors: When the program is subdivided into
functions, if any error occur you know exactly what function causing the error and where to find
it. Therefore, fixing errors becomes much easier.

iv. Functions can be reused in other application: Because a function is separated from the rest
of the script, it's easy to reuse the same function in other applications just by including the PHP
file containing those functions.

TYPES OF PHP FUNCTIONS

1. PHP Built-in Functions

These are collections of internal or built-in functions that you can call directly within your PHP
scripts to perform a specific task.

EXAMPLES

i. echo().

ii. print().

iii. count().

iv. empty().

v. die().

2. PHP User-Defined Functions

These are functions that PHP allows you to define. It is a way to create reusable code packages
that perform specific tasks and can be kept and maintained separately form main program.

116
CREATING PHP FUNCTIONS
SYNTAX

function functionName(){
// Code to be executed
}

The declaration of a user-defined function start with the word function, followed by the name of
the function you want to create followed by parentheses i.e. () and finally place your function's
code between curly brackets {}.

INVOKING OR CALLING PHP FUNCTIONS

SYNTAX

function functionName();

EXAMPLE
<?php
// Defining function
function hello(){
echo "PHP is Easy";
echo "<br>";
}
function todayDate(){
echo "Today is " . date('l', mktime());
}
// Calling function
hello();
todayDate();
?>
OUTPUT

NB: A function name must start with a letter or underscore character not with a number,
optionally followed by the more letters, numbers, or underscore characters. Function names
are case-insensitive.

117
FUNCTIONS WITH PARAMETERS
You can specify parameters when you define your function to accept input values at run time.
The parameters work like placeholder variables within a function; they're replaced at run time by
the values (known as argument) provided to the function at the time of invocation.

SYNTAX

function myFunc($oneParameter, $anotherParameter){

// Code to be executed
}

You can define as many parameters as you like. However, for each parameter you specify, a
corresponding argument needs to be passed to the function when it is called.

EXAMPLE

<?php
// Defining function
function findSum($num1, $num2){
$sum = $num1 + $num2;
echo "Sum of the two numbers $num1 and $num2 is : $sum";
}
// Calling function
findSum(5, 20);
?>

OUTPUT

118
PHP AND MySQL

DATA is defined as an unorganized facts or figures that can be collected and analyzed to retrieve
useful information.

DBMS (Database Management System): is a software package that is used to store, manage
and manipulate data in a database.

Example

1. MySQL.
2. Oracle.
3. Microsoft Access.
4. SQL Server.
5. PostgreSQL etc.

DATABASE is defined as an organized collection of data that is stored and accessed (retrieved,
search, update etc.) from a given device (computer, server etc.).
MySQL is a relational database (the most popular relational database system) that is used to
store, manage and manipulate data in a database.

MySQL database stores data into tables like other relational database.

It is freely available and easy to install. If you have installed Wampserver on your computer,
MySQL will be automatically installed.

A TABLE is a collection of related data, and it is divided into rows and columns.

Each row in a table represents a data record i.e. information of a particular instance (person).
Each column represents a specific field e.g. id, first_name, last_name, email, etc.

S/N Name Matriculation Number Level

1 Musa Isa FUKU/SCI/19/COM/0010 100

2 Hadiza Habu FUKU/HMSS/17/ISL/0015 400

3 John Markus FUKD/SCI/19/PHY/0101 200

4 Buhari Ali FUKU/EDU/19/BIO/0005 100

119
 ADVANTAGES OF MYSQL DATABASE

i. MySQL is easy to use, yet extremely powerful, fast, secure, and scalable.
ii. MySQL runs on a wide range of operating systems, including UNIX or Linux, Microsoft
Windows, Apple Mac OS X, and others.
iii. MySQL supports standard SQL (Structured Query Language).
iv. MySQL is ideal database solution for both small and large applications.
v. MySQL includes data security layers that protect sensitive data from intruders.

DATABASE QUERIES
A QUERY is defined as a request or question sent to a database to return or execute an instruction.
We can query a database for specific information and have a record set returned.
EXAMPLE
SELECT LastName FROM Employees. This query selects all the data in the "LastName" column
from the "Employees" table.
SQL QUERY is a database language that is designed for the retrieval and management of data
in a relational database.
TYPES OF SQL QUERIES
1. Data definition language DDL: is a language that is used to define the structure of database or
database schema.
DDL COMMANDS:
i. CREATE: use to create database and table schema.
SYNTAX
CREATE DATABSE db_Name;
CREATE TABLE Table_Name (Colum1_Name Datatype1 …);
EXAMPLE
CREATE DATABASE University;
CREATE TABLE Student (id INT (5), Name VARCHAR(50), Matric_Number
VARCHAR(20));
ii. DROP: Removes database and tables.
SYNTAX
DROP DATABSE db_Name;

120
DROP TABLE Table_Name;
EXAMPLE
CREATE DATABASE University;
CREATE TABLE Student;
iii. ALTER: this command changes the structure of a table.
Syntax
ALTER TABLE Table_Name ADD Column_Name Column_Definition … ;
EXAMPLE
CREATE TABLE Student ADD gpa VARCHAR(5);
iv. TRUNCATE: This command is used to delete all table records.
SYNTAX
TRUNCATE Table_Name;
EXAMPLE
TRUNCATE Student;
v. RENAME: This command is used to change the name of a table.
SYNTAX
RENAME Table_Name;
EXAMPLE
RENAME Student;

2. Data Manipulation Language (DML): is a language that is used to modify database.

DML COMMANDS
i. INSERT: This command is used to insert data into the rows of a table.
SYNTAX
INSERT INTO Table_Name (Column1, Column2, … ColumnN) VALUES (value1, value2, …
valueN);
OR
INSERT INTO Table_Name VALUES (value1, value2, … valueN);

121
EXAMPLE
INSERT INTO Student (id, Name, Matric_Number, gpa) VALUES (1, ‘Musa’, ‘FUKU/0010’,
‘3.20’);
OR
INSERT INTO Student VALUES (3, ‘James’, ‘FUKU/0014’, ‘3.50’);

ii. UPDATE: This command is used to update or modify the data in a column a table.
SYNTAX
UPDATE Table_Name SET (Column1 = value1, Column2 = value2 … ColumnN= valueN)
WHERE Condition;
EXAMPLE
UPDATE Student SET (id = 3, Name = ‘Hadiza’, Matric_Number = ‘FUKU/0230’, gpa = ‘4.5’)
WHERE id = 2;
iii. DELETE: This command is used to delete one or more rows from a table.
SYNTAX
DELETE FROM Table_Name WHERE Condition;
EXAMPLE
DELETE FROM Student WHERE id=1;

3. Data Query Language (DQL): is a language that is used to fetch data from a database.
DQL COMMAND
SELECT: This command is used to select data from a database based on certain conditions.
SYNTAX
SELECT expressions FROM TABLE WHERE Conditions;
EXAMPLE
SELECT Name FROM Student WHERE gpa > 3.5;

122
4. Data Control Language DCL: is a language that is used to give rights and permission to
users of a database.
DCL Commands
i. GRANT: This command is used to give user access and privileges ton a database.
ii. REVOKE: This command is used to give user access and privileges ton a database.

5. Transaction control language (TCL): is a language that is used to manage transactions in a

database.
TCL Commands
i. START TRANSACTION: This command is used to start or begin a new SQL Transaction.
ii. COMMIT: This command is used to finish a transaction and store all changes made within a
transaction.
iii. ROLLBACK: This command is used to revert all changes made within a scope of a
transaction.
iv. SAVEPOINT: This command is used to create a set a saving point within a transaction.

123
MYSQL DATABASE CONNECTION
Before you can access and work with data in a database you must create a connection to the
database. One of the ways you can do that in PHP is with mysql_connect() function and closing
database is done with mysql_close() function.
Syntax

Mysql_connect(servername,username,password);

Parameter Description

Servername Specifies the server to connect to.

Default value is "localhost"

Username Specifies the username to log in with.

Default value is "root"

Password Specifies the password to log in with.

Default value is ""

EXAMPLE

124
CREATE A DATABASE
The CREATE DATABASE statement is used to create a database in MySQL.
Syntax

CREATE DATABASE database_name;

To get PHP to execute the statement above we must use the mysql_query() function. This function
is used to send a query or command to a MySQL connection.

Example
<?php
$con = mysql_connect("localhost", "root","");
if (!$con) {
die('error connecting to database');
}
echo 'Connected successfully'. '<br>';
if (mysql_query("CREATE DATABASE cs_fuk")) {
echo "Database created";
} else {
echo "Error creating database";
}
mysql_close($con);
?>

SELECT A DATABASE
Example
<?php
$con = mysql_connect("localhost", "root","");
if (!$con) {
die('error connecting to database');
}
echo 'Connected successfully'. '<br>';
$database='cs_fuk';
if(mysql_select_db($database)){
echo " we are working with database ".$database;
} else {
echo "There is some error in selecting database";
}
mysql_close($con);

125
?>

CREATE A TABLE
<?php
$con = mysql_connect("localhost", "root","");
if (!$con) {
die('error connecting to database');
}
echo 'Connected successfully'. '<br>';
$database='cs_fuk';
mysql_select_db($database);
$details = mysql_query("CREATE TABLE details (
id int(6) NOT NULL AUTO_INCREMENT PRIMARY KEY,
student_name varchar(50) NOT NULL,
student_id varchar(12) NOT NULL,
age int(2) NOT NULL,
level varchar(100) NOT NULL,
gender varchar(6) NOT NULL
)");
if(!$details){
echo "Error occur while creating a table";
} else {
echo "Table created successfully";
}
mysql_close($con);
?>

126
Output

INSERTING DATA INTO DATABASE

index.php
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
<style type="text/css">
td{
padding: 10px;
}
</style>
</head>
<body>
<h2>Computer Science Student Registration Form</h2>
<form name="details" action="details.php" method="post">
<table>
<tr>
<td>Student Name:</td>
<td><input type="text" name="name" value=""></td>
</tr>

<tr>
<td>Student ID:</td>
<td><input type="text" name="id_no" value=""></td>
</tr>

<tr>
<td>Age:</td>
<td><input type="text" name="age" value=""></td>
</tr>

127
 <tr>
<td>Level:</td>
<td><input type="text" name="level" value=""></td>
</tr>

<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value="">Please Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="Submit" name="submit"></td>
</tr>
</table>
</form>
</body>
</html>

128
details.php
<?php
$con = mysql_connect("localhost","root","");
if(!$con){
die('Could not connect');
}
mysql_select_db('cs_fuk');

if(filter_has_var(INPUT_POST, 'submit')){
// first get the post variable on the page
$name = $_POST['name'];
$std_id = $_POST['id_no'];
$age = $_POST['age'];
$level = $_POST['level'];
$gender = $_POST['gender'];

if(!empty($name) && !empty($std_id) && !empty($age) && !empty($level) &&

!empty($gender) ){
$query = "INSERT INTO details (student_name,student_id,age,level,gender) VALUES ('$name',
'$std_id','$age','$level','$gender')";

if (!mysql_query($query)) {
die('Error in inserting records');
}else{
echo "Data Inserted Successfully";
}
}else{
echo "All field is required";
}
}
mysql_close($con);
?>

129
Design View

Output

Database view

130
EXAMPLE 1: GET

<form method="get">

<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>

<tr>
<input type="submit" name="submit" value="Submit">
</tr>
</form>

<?php

if(isset($_GET["submit"])){
$name = $_GET["name"];

echo "Welcome ".$name;

}
?>

EXAMPLE 2: POST

index.php

<form action="welcome.php" method="post">

<table>
<tr><td>Name:</td><td> <input type="text" name="name"/></td></tr>
<tr><td>Password:</td><td> <input type="password" name="password"/></td></tr>
<tr><td><input type="submit" value="login"/> </td></tr>
</table>
</form>

welcome.php

<?php
//receiving name field value in $name variable
$name=$_POST["name"];

//receiving password field value in $password variable

$password=$_POST["password"];

131
echo "Welcome: $name, your password is: $password";
?>

EXAMPLE 3: ADDITION OF TWO NUMBERS DYNAMICALLY

<?php

//add() function with two parameter

function add($x,$y){
$sum=$x+$y;
echo "Sum = $sum ";
}

if(isset($_POST['add'])){

//call add() function

add($_POST['first'],$_POST['second']);

?>

<form method="post">
<table>
<tr>
<td>Enter first number:</td>
<td><input type="number" name="first"/></td>
</tr>
<tr>
<td>Enter second number: </td>
<td><input type="number" name="second"/></td>
</tr>
<tr>
<td><input type="submit" name="add" value="ADD"/></td>
</tr>
</table>
</form>

132
EXAMPLE 4: FORM VALIDATION

<form method="post">
<table>
<tr>
<td>Enter UserName:</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>Enter Password: </td>
<td><input type="password" name="pass1"/></td>
</tr>

<tr>
<td>Repeat Password: </td>
<td><input type="password" name="pass2"/></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit"/></td>
</tr>
</table>
</form>

<?php

if(isset($_POST['submit'])){
$user = $_POST['username'];
$pass1 = $_POST['pass1'];
$pass2 = $_POST['pass2'];

if(!empty($user) && !empty($pass1) && !empty($pass2)){

if($pass1 != $pass2 ){
echo '<script> alert("Passwords does not match") </script>';
}else{
echo '<script> alert("Your Registration was successful") </script>';
}

}else{
echo '<script> alert("All fields are Required") </script>';
}
}
?>

133
 CHAPTER EIGHT
DHTML
DHTML (Dynamic HTML) : is a collection of technologies used together to create interactive
and animated websites by using a combination of a static markup language (such as HTML), a client-side
scripting language (such as JavaScript), a presentation definition language (such as CSS), and the
Document Object Model (DOM).
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 four components or languages:
i. 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.
ii. 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.
iii. JavaScript
JavaScript is a scripting language which 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 which tell the browser for performing
an action.
iv. 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
i. It is used for designing the animated and interactive web pages that are developed in real-time.
ii. DHTML helps users by animating the text and images in their documents.
iii. It allows the authors for adding the effects on their pages.
iv. It also allows the page authors for including the drop-down menus or rollover buttons.
v. This term is also used to create various browser-based action games.
vi. It is also used to add the ticker on various websites, which needs to refresh their content automatically.

134
FEATURES OF DHTML
Following are the various characteristics or features of DHTML (Dynamic HTML):
i. Its simplest and main feature is that we can create the web page dynamically.
ii. Dynamic Style is a feature, that allows the users to alter the font, size, color, and content of a web page.
iii. It provides the facility for using the events, methods, and properties. And, also provides the feature of
code reusability.
iv. It also provides the feature in browsers for data binding.
v. Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
vi. With the help of DHTML, users can easily change the tags and their properties.
vii. The web page functionality is enhanced because the DHTML uses low-bandwidth effect.

DIFFERENCE BETWEEN HTML AND DHTML

135
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.
Following are the various examples, which describes how to use the JavaScript technology with the
DHTML:
Document.write() Method
The document.write() method of JavaScript, writes the output to a web page.
Example 1: The following example simply uses the document.write() method of JavaScript in the
DHTML. In this example, we type the JavaScript code in the <body> tag.

136
JavaScript and HTML event

A JavaScript code can also be executed when some event occurs. Suppose, a user clicks an HTML
element on a webpage, and after clicking, the JavaScript function associated with that HTML element is
automatically invoked. And, then the statements in the function are performed.

Example 1: The following example shows the current date and time with the JavaScript and HTML event
(Onclick). In this example, we type the JavaScript code in the <head> tag.

137
JavaScript and HTML DOM

With version 4 of HTML, JavaScript code can also change the inner content and attributes of the
HTML event.

Example 1: This example checks the Grade of a student according to the percentage criteria with
the JavaScript and HTML DOM. In this example, we type the code of a JavaScript in the <body>
tag.

138
CSS WITH JAVASCRIPT IN DHTML

With version 4 of HTML, JavaScript code can also change the style such as size, color, and face
of an HTML element.

Example 1: The following example changes the color of a text.

139
DHTML CSS

We can easily use the CSS with the DHTML page with the help of JavaScript and HTML DOM. With the
help of this.style.property=new style statement, we can change the style of the currently used HTML
element. Or, we can also update the style of any particular HTML element
by document.getElementById(id).style.property = new_style statement.

Example 1: The following example uses the DHTML CSS for changing the style of current element:

140
Example 2: The following example uses the DHTML CSS for changing the style of the HTML element:

141
DHTML EVENTS

An event is defined as changing the occurrence of an object.

It is compulsory to add the events in the DHTML page. Without events, there will be no dynamic content
on the HTML page. The event is a term in the HTML, which triggers the actions in the web browsers.

Suppose, any user clicks an HTML element, then the JavaScript code associated with that element is
executed. Actually, the event handlers catch the events performed by the user and then execute the code.

Example of events:

1. Click a button.

2. Submitting a form.

3. An image loading or a web page loading, etc.

Following table describes the Event Handlers used in the DHTML:

142
Following are the different examples using the different event handlers, which helps us to
understand the concept of DHTML events:

Example 1: This example uses the onclick event handler, which is used to change the text after
clicking.

Example 2: This example uses the onsubmit event handler, which gives an alert after clicking on a
submit button.

143
144
DHTML DOM

DHTML DOM stands for Dynamic HTML 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. It also defines the methods for
accessing the HTML elements.

Example: The following program helps in understanding the concept of DHTML DOM. This
example changes the color of text and displays the text in red colour automatically.

ADVANTAGES OF DHTML
i. Those web sites and web pages which are created using this concept are fast.

145
ii. There is no plug-in required for creating the web page dynamically.
iii. Due to the low-bandwidth effect by the dynamic HTML, the web page functionality is enhanced.
iv. This concept provides advanced functionalities than the static HTML.
v. It is highly flexible, and the user can make changes easily in the web pages.

DISADVANTAGES OF DHTML
i. The scripts of DHTML does not run properly in various web browsers. Or in simple words, we can say
that various web browsers do not support the DHTML. It is only supported by the latest browsers.
ii. The coding of those websites that are created using DHTML is long and complex.
iii. For understanding the DHTML, users must know about HTML, CSS, and JavaScript. If any user does
not know these languages, then it is a time-consuming and long process in itself.

146
 CHAPTER NINE
WEB DESIGN AND USABILITY

Web design encompasses many different skills and disciplines in the production and
maintenance of websites.

What are the elements of web design?

The web design process allows designers to adjust to any preferences and provide effective
solutions. There are many standard components of every web design, including:

 Layout
 Images
 Visual hierarchy
 Color scheme
 Typography
 Readability
 Navigation
 Content
 Mobile

a. Layout

The layout of the website is how the material is displayed on a page. Choosing the layout is an
essential task for the designer. It should be simple, intuitive and accessible. Web designers can use
blank areas called white spaces to organize the elements of the site with grid-based designs to keep
them in order.

Designers can create specialized layouts for desktop screens and mobile devices. Mobile-friendly
websites are a necessity because many visitors access websites on their cellphones or tablets. To
ensure a website is ready for mobile visitors, the designer can use a responsive template that adapts
to different screen sizes or a mobile-only look that will activate when a non-desktop device
connects to the website. A consistent layout between supports contributes to the visitors' trust.

b. Images

Images are illustrations, graphics, photographs, icons and others used to provide supplementary
information to the text. To create the effect desired, designers can pick images that complement
each other and the brand that the website represents.

Images & Icons

Amazing designs can communicate a lot of information in just a few seconds. This is made
possible with the use of powerful images and icons. Choose images and icons that support and
strengthen your message. A quick Google search for stock images and icons will generate
thousands of options. To help simplify your search, here are a few favourites:

147
 c. Visual hierarchy

Visual hierarchy is the order in which the user will process the information on the site. The designer
creates it by applying a visual pattern to the website. The visual pattern is the way the design
directs visitors' eyes and behaviors. For example, F-Patterns or Z-Patterns emphasize the top
horizontal section of your site, where most designers place navigation and the brand's logo and
sometimes a search box. These are elements that inspire user interaction and brand recognition.

d. Color scheme

The color scheme is a combination of colors that is in harmony with the brand and industry it
represents. To achieve this, they will pick a dominant color and a few others to create a palette. A
color palette can be monochromatic (different shades of the same color), analogous (colors close
to each other) or complimentary. Designers also account for what colors users are more likely to
be attracted to.

e. Typography

The typography is the style or font of the written content. Web designers pick one or a combination
that is attractive and easy to read. To make the best choice, they should choose a font that
corresponds to the target audience. Some sites may be better in serif fonts while others can use
non-serif fonts, depending on the site's industry, purpose and typical user.

f. Readability

Readability is when the text of content is easy to see and read on a webpage. The text on the
website should be readable because visitors usually spend little time on it and should find
information quickly. The designers can achieve this by selecting an appropriate size and pixel for
the text. The contrast between the text and the site's background colors also improves readability.

g. Navigation

The navigational elements are the tools allowing users to choose where they want to go within a
website. They may be present in the header, body and footer of the website, depending on the site's
layout and structure. These elements are essential as they direct visitors to the information they
want as quickly as possible.

Designers can choose a variety of navigation designs and layouts, such as using a button that hides
and reveal navigation menus. They can also incorporate one-click arrows and other buttons that
direct users back to the top of a page, to a specific area of a page or another page entirely.

h. Content

148
 Content is all of the information available on the website. It is a pivotal element because visitors
want to get information quickly. When the website communicates clearly and grabs the readers'
attention, it is more likely to convert them into consumers. The designer can achieve this by using
the appropriate tone and provide the right information on the entire website, including the "About"
and "Contact" pages.

FUNCTIONAL ELEMENTS OF A WEB DESIGN

A website that functions properly is crucial for ranking highly on search engines, and
giving your users the best possible experience.

a. Navigation
Your website’s navigation is one of the main elements that determines whether your
website is functioning properly. Depending on your audience, your navigation can serve
multiple purposes: helping first time visitors discover what your site has to offer, giving
easy access to your pages for returning visitors, and improving every visitor's overall
experience. Check out these best practices for more tips on navigation.

b. User Interactions
Your site visitors have multiple ways of interacting with your site depending on their
device (scrolling, clicking, typing, etc.). The best website designs simplify these
interactions to give the user the sense that they are in control. Here are a few examples:
 Never auto-play audio or videos
Never underline text unless its clickable
 Make sure all forms are mobile-friendly
 Avoid pop ups
 Avoid scroll-jacking

c. Animations
There are tons of web animation techniques that can help your design grab visitor’s
attention, and allow your visitors to interact with your site by giving feedback. For
example, adding “like” buttons or forms can keep your site’s visitors engaged. If you’re
new to web design, we’d recommend keeping your animations simple to avoid developer
intervention.
d. Speed

No one likes a slow website. Having to wait more than a few seconds for a page to load
can quickly deter a visitor from remaining on or returning to your site. Regardless of how
beautiful, if your site doesn’t load quickly, it will not perform well in search (i.e. won’t
rank high on Google).

149
Top site builders typically compress your content for faster load times, however, there are
no guarantees. Make sure to research which site builders will work best for the content
you will have on your site. For example, PageCloud optimizes your images to ensure fast
loading times for sites with large and/or multiple photos.

e. Site structure

A website’s structure plays an important role in both user experience (UX) and search
engine optimization (SEO). Your users should be able to easily navigate through your
website without encountering any structural issues. If users are getting lost while
attempting to navigate through your site, chances are “crawlers” are too. A crawler (or
bot) is an automated program that searches through your website and can determine its
functionality. Poor navigation can lead to a poor user experience and site ranking.

f. Cross-browser & cross-device compatibility

A great design should look polished on all devices and browsers (yes, even Internet
Explorer). If you’re building your site from scratch, we’d recommend using a cross-
browser testing tool to make this tedious process faster and more efficient. On the other
hand, if you’re using a website building platform, the cross-browser testing is typically
taken care of by the company’s development team allowing you to focus on design.

USES OF WEB DESIGN

Web designing is used for many important tasks and goals, including:

Search engine optimization

Search engine optimization (SEO) is a method for improving the chances for a website to be found
by search engines. Web design codes information in a way that search engines can read it. It can
boost business because the site shows up on the top search result pages, helping people to find it.

Customer satisfaction

A professional web design impacts clients' satisfaction positively as it provides them the
information they are looking for quickly. It helps the company build a positive relationship with
the visitors by ensuring the navigation on its website is easy to understand, predictable and
consistent.

Mobile responsiveness

Mobile responsiveness is the feature of a website that allows it to display on a mobile device and
adapt its layout and proportions to be legible. Web design ensures sites are easy to view and

150
navigate from mobile devices. When a website is well designed and mobile-responsive, customers
can reach the business with ease.

Consistent branding

Branding refers to the promotion of a product with a unique design. Web design helps companies
build or maintain a clear brand for their business. When a website expresses a business's brand
consistently, it makes it easier to navigate and helps customers more clearly identify the visual
elements of a brand as a specific company and its products or services.

Technical efficiency

This term refers to how productive a website can be in making a comfortable experience on a
website. Designers can achieve this with clean coding that allows for quick loading times,
functioning links and dynamic images and graphics. Web design services also fix those eventual
glitches when they occur.

User experience optimization

Web designers run reports to understand the way people are interacting with a website all over the
world. They determine which pages have more or less traffic and adapt the web design to optimize
the user experience.

Conversion

Conversion happens when a visitor completes a desired action on the website. Attractive web
design encourages visitors to stay long enough to be converted into consumers. They will click on
a call-to-action button, exchange valuable information and subscribe or buy a product.

Improve sales

Increasing the number of items sold or acquiring more active customers are objectives of a
compelling website. As web design reaches targeted customers and search engines, it helps the
business make conversions on their site and improve its sales.

151
TYPES OF WEBSITE DESIGN

a. Adaptive websites

Adaptive web design uses two or more versions of a website that are customized for specific screen
sizes. Adaptive websites can be split into two main categories based upon how the site detects
what size needs to be displayed:

i. Adapts based on device type

When your browser connects to a website, the HTTP request will include a field called “user-
agent” that will inform the server about the type of device attempting to view the page. The
adaptive website will know what version of the site to display based on what device is trying to
reach it (i.e. desktop, mobile, tablet). Issues will arise if you shrink the browser window on a
desktop because the page will continue to display the “desktop version” rather than shrinking to
the new size.

ii. Adapts based on browser width

Instead of using the “user-agent”, the website uses media queries (a CSS feature that enables a
webpage to adapt to different screen sizes) and breakpoints (certain width sizes) to switch between
versions. So instead of having a desktop, tablet, and mobile version, you will have 1080px, 768px,
and 480px width versions. This offers more flexibility when designing, and a better viewing
experience as your website will adapt based on screen width.

b. Responsive Websites

Responsive websites can use flexible grid layouts that are based on the percentage each element
takes up in its container: if one element (e.g. a header) is 25% of its container, that element will
stay at 25% no matter the change in screen size. Responsive websites can also use breakpoints to
create a custom look at every screen size, but unlike adaptive sites that adapt only when they hit a
breakpoint, responsive websites are constantly changing according to the screen size.

152
WHAT IS USABILITY
Usability is a measure of how well a specific user in a specific context can use a product/design to
achieve a defined goal effectively, efficiently and satisfactorily.

ELEMENTS OF USABILITY AND THEIR APPLICATIONS IN WEB DESIGN

Clear Navigation

Web navigation is the process of exploring a website—how you scroll through a screen, interact
with different site elements and buttons or travel from one page to another.

Legibility that Encourages Engagement

“Content is King,” wrote Bill Gates in his 1996 essay pertaining to how he foresaw the internet as
a content marketplace. In contemporary times, people have taken this concept a step further by
saying, “Content is King, but Engagement is Queen.”

Yes, the quality of your website content is important for marketing and search engine optimisation,
but if your visitors find it difficult to read, then it would have lost part of its value. On the other
hand, legible content encourages user engagement, which is indicative of usability.

Legibility is achieved through proper presentation of text: correct usage of fonts (appropriate styles
and sizes), colour contrast and information hierarchy. These factors direct your users to what they
want to find and facilitate scannability.

Performance

One of the variables that influences usability is the performance of your website. Site performance
is measured by the speed at which it loads—how long it takes to make your content available to
visitors and how quickly they can navigate through its pages. As a rule of thumb, loading time
should not exceed two seconds.

You can improve the speed of your website by having it hosted on a server that delivers optimal
load time. A simple, clutter-free layout containing only the necessary elements will also help
enhance your website performance.

Responsiveness

Another feature that lends to usability is how your website appears and functions on different
screen sizes. Majority of users these days browse the internet via their mobile devices instead of
desktop computers, so your website should be able to adapt and accommodate this shift in how
they browse online.

153
Designing a flexible web layout that automatically adjusts to various screen sizes favours
responsiveness and usability.

Credibility

The internet has evolved so much in the past years to become what it is today. It has entered the
era of social media, online dating and e-commerce. Websites that are platforms for these
enterprises require personal information, payment and trust, above all else.

Some websites ask visitors to enter their email address or personal information before gaining
complete access to all its features. Social media and other similar platforms require individuals to
create user profiles in order to participate. E-commerce sites request for payment and other
necessary customer data to complete purchases.

If your site does not appear to be trustworthy, visitors will decline to supply you with their
information or make a transaction. Not being able to accomplish what they came to do on your
website reflects poor usability.

To establish website credibility, ensure that your design points them to where they can find
complete and correct information about your company, your goods and services, and the processes
required to carry out their desired transaction. For example, an updated About Us section,
accessible contact information, accurate product details, truthful customer testimonials and a clear
payment method will make them more comfortable about using your website.

i. Effectiveness—It supports users in completing actions accurately.

ii. Efficiency—Users can perform tasks quickly through the easiest process.
iii. Engagement—Users find it pleasant to use and appropriate for its industry/topic.
iv. Error Tolerance—It supports a range of user actions and only shows an error in genuine erroneous
situations. You achieve this by finding out the number, type and severity of common errors users make,
as well as how easily users can recover from those errors.
v. Ease of Learning—New users can accomplish goals easily and even more easily on future visits.
vi. Clear navigation: The easier your site is to browse, the happier your users will be.
vii. Performance: Slow websites loose visitors, so you need to optimize for performance.
viii. Readability: Your content should be easy to read, so that it doesn’t confuse or frustrate.
iv. Responsiveness: Mobile traffic is more important than ever, so your site needs to work well on all
devices.

154
 CHAPTER TEN
MULTIMEDIA
Multimedia is the use of various types of media to create a presentation or an application which
can be used for the purpose of broadcasting, entertainment, education and many others.
Multimedia is also said to be a positive and effective medium of communication because text,
audio, video and animation of various colors and patterns can be displayed simultaneously on the
screen.

DEFINITION OF MULTIMEDIA
Multimedia is any combination of text, image, sound, animation, and video delivered to
you interactively by computer or other electronic or digitally manipulated means.

Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more. Web pages often contain
multimedia elements of different types and formats. The first web browsers had support for text
only, limited to a single font in a single color. Later came browsers with support for colors, fonts,
images, and multimedia!

155
ELEMENT OF MULTIMEDIA
The basic five Elements of Multimedia
i. TEXT: is a combination of characters that is used to represent data or information.
Example of Text

ii. IMAGE: a still (not moving) visual representation of an object.

Example of Audio

iii. AUDIO: In multimedia, audio is sounds that is used to represent data or information. Things
we can hear normally known as audio.
iv. VIDEO: is a recording of moving images. It mostly combines images and sounds. Video takes
a lot of space from storage device.
Example of Video

iv. ANIMATION: is a recording of moving images (drawing) that creates an illusion of motion
using successive drawings.
Example of Animation

156
MULTIMEDIA FORMATS
These are the different ways that multimedia files are encoded and stored. The most common way
to discover the type of a file, is to look at the file extension.
EXAMPLES
.wav, .mp3, .mp4, .mpg, .wmv, .avi. etc.

AUDIO FILES
Audio files play a major role in some multimedia systems. Audio files appear as part of application
content and also to aid interaction. When they appear within Web applications and sites, audio
files sometimes need to be deployed using plug-in media players. Audio formats include MP3,
WMA, Wave, MIDI and RealAudio. When developers include audio within a website, they will
generally use a compressed format to minimize on download times. Currently there are three
supported file format for HTML 5 audio tag.
i. mp3: media type is audio/mpeg
ii. wav: media type is audio/wav
iii. ogg: media type is audio/ogg

HTML AUDIO
The HTML <audio> element is used to play an audio file on a web page.
To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
OUTPUT

157
HTML AUDIO - HOW IT WORKS
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not
support the <audio> element.

ATTRIBUTES OF HTML AUDIO TAG

Below is a given list of HTML audio tag.

Attribute Description

controls It defines the audio controls which is displayed with play/pause buttons.

autoplay It specifies that the audio will start playing as soon as it is ready.

loop It specifies that the audio file will start over again, every time when it is completed.

muted It is used to mute the audio output.

Src It specifies the source URL of the audio file.

VIDEO FILES
Digital video appears in many multimedia applications, particularly on the Web. As with audio,
websites can stream digital video to increase the speed and availability of playback. Common
digital video formats include Flash, MPEG, AVI, WMV and QuickTime. Most digital video
requires use of browser plug-ins to play within Web pages, but in many cases the user's browser
will already have the required resources installed. Currently, there are three video formats
supported for HTML video tag:
1. mp4: media type is video/mp4
2. webm: media type is video/webm
3. ogg: media type is video/ogg

158
HTML VIDEO
The HTML <video> element is used to show a video on a web page.
To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video
OUTPUT

HOW IT WORKS
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the
page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may choose
from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.

159
ATTRIBUTES OF HTML VIDEO TAG
Let's see the list of HTML 5 video tag attributes.
Attribute Description

Controls It defines the video controls which is displayed with play/pause buttons.

Height It is used to set the height of the video player.

Width It is used to set the width of the video player.

Poster It specifies the image which is displayed on the screen when the video is not played.

Autoplay It specifies that the video will start playing as soon as it is ready.

Loop It specifies that the video file will start over again, every time when it is completed.

Muted It is used to mute the video output.

Src It specifies the source URL of the video file.

HTML TEXT DOWNLOAD

Text content is by far the most common media type in computing applications. Most multimedia
systems use a combination of text and other media to deliver functionality. Text in multimedia
systems can express specific information, or it can act as reinforcement for information contained
in other media items. In our previous classes we discuss on how to add a text using HTML. We
use <p>, <h1> etc. to add text in to our HTML document.
We can use HTML to download the following Text file formats
i. .pdf
ii. .docx
iii. .xls

160
HOW TO DOWNLOAD A DOCUMENT
You can use the HTML download attribute in ancho tag <a> to enable download when a user
clicks on the hyperlink.
The download attribute is only used if the href attribute is set.

EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Text Downloads</title>
</head>
<body>
<p><a href="chapter 3 to 6.docx" download>DOCX Downloads</a> to download the
Document file.</p>
<p><a href="important stuffs.xlsx" download>Excel Downloads </a> to download the
Excel sheet file.</p>
<p><a href="final latest latest.pdf" download>PDF Downloads </a> to download the
PDF file.</p>
</body>
</html>
EXERCISES

1. Define multimedia.
2. List all the elements of multimedia.
3. List and explain all the elements of multimedia.
4. Explain multimedia formats.
5. List all the audio files formats.
6. List all the video files formats.
7. Write a html code to add an audio file.
8. Write a html code to add a video file.
9. Write a html code to download a PDF document.
10. Write a html code to download an EXCEL document.
11. Write a html code to download an DOCX document.

161
 CHAPTER ELEVEN
WEB DEVELOPMENT TOOLS
Web development tools (often called devtools) allow web developers to test
and debug their code. They are different from website builders and integrated
development environments (IDEs) in that they do not assist in the direct creation of
a webpage, rather they are tools used for testing the user interface of a website or web
application.

WEB DEVELOPMENT TOOLS

i. Sublime Text

Is a super-efficient and speedy code editor. It provides a wide array of keyboard shortcuts to the
developers.

ii. Chrome Developers Tools

allows the web developers to edit the HTML and CSS in real time. The developer can see the real-
time performance on the website while making any change.

iii. Twitter Bootstrap

Twitter Bootstrap is an excellent User Interface (UI) framework that provides reusable modules to
the developers. This tools allows developers to normalize their style sheets, build modal objects
and add JavaScript plugins e.t.c. It reduces the number of lines of codes by cutting down the code
that is needed to build a project.

iv. Jquery

Is a web development tool that allows greater scope to the developers in creating animations,
adding plugins.

v. GitHub

This web development tool allows developers to view any change made by other developers and
can go back in the previous state if he screws up. It also offers some features like bug tracking,
feature request, task management.

162
 CHAPTER TWELVE
LAB EXERCISES AND GROUP PROJECTS

Generate the code to display the following:

1. Write the html code to display the table below:

Day/Food Breakfast Lunch Dinner

Monday Kunu Shinkafa Tuwo

Tuesday Noodles Gwate Shinkafa

Wednesday Shayi Couscous Doya

Thursday Fries Awara Alale

Friday Danwake Snasir Suya

Saturday Masa Kilishi Biski

Sunday Dumame Taliya Balango

2. Write a html code that has the following:

a. A title “First Web Project”.
b. A link called click to a document called courses.
c. A paragraph “I enjoy web design”
d. Display an image called selfie with extension jpg.

e. NIGERIAN PREMIER LEAGUE TABLE

Clubs Points

Plateau United 51

Kano Pillars 49

Kaduna United 40

Gombe United 39

Enyimba 32

163
3. Display the output below using HTML and CSS code.

HTML Project

@elgurama

4. Create the output below with the following sections Header, Navigation, Main, Article,
Section and footer.

164
5. Write the html code to display the form below:

165
6.

166
7.

167
8.

168
9.

169
10.

11.

170
12.

171
13.

14.

15.

172
16.

17.

173