`

KWARA STATE UNIVERSITY, MALETE

COLLEGE OF INFORMATION AND COMMUNICATION TECHNOLOGY
DEPARTMENT OF COMPUTER SCIENCE
2024/2025 FIRST (HARMATTAN) SEMESTER COURSE

Course Code: CSC 101

Course Title: Internet Technology & Programming I.
Course Status: 2 Credit Compulsory

Chapter 1: Introduction to Internet

Internet: The Internet is a global system of interconnected computer networks that use the standard Internet
protocol suite (often called TCP/IP, although not all applications use TCP) to serve billions of users
worldwide.
It is a network of networks that consists of millions of private, public, academic, business, and government
networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking
technologies. The Internet carries an extensive range of information resources and services, such as the inter-
linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support email.
Computer Networks
A computer network is the infrastructure that allows two or more computers (called hosts) to communicate
with each other.
Definition
 A network can be defined as a group of computers and other devices connected in some ways so as to
be able to exchange data. -Each of the devices on the network can be thought of as a node; each node
has a unique address.
 A computer network, often simply referred to as a network, is a collection of hardware components and
computers interconnected by communication channels that allow sharing of resources and information.
The network achieves this by providing a set of rules for communication, called protocols, which should be
observed by all participating hosts.
A communications protocol is a set of rules for exchanging information over a network
The need for a protocol should be obvious: it allows different computers from different vendors and with
different operating characteristics to ‘speak the same language’.

Properties of Computer Networks:

1
a) Facilitate communications. Using a network, people can communicate efficiently and easily via email, instant
messaging, chat rooms, telephone, video telephone calls, and video conferencing.
b) Permit sharing of files, data, and other types of information. In a network environment, authorized users may
access data and information stored on other computers on the network. The capability of providing access to
data and information on shared storage devices is an important feature of many networks.
c) Share network and computing resources. In a networked environment, each computer on a network may
access and use resources provided by devices on the network, such as printing a document on a shared network
printer. Distributed computing uses computing resources across a network to accomplish tasks.
d) May be insecure. A computer network may be used by computer hackers to deploy computer viruses or
computer worms on devices connected to the network, or to prevent these devices from normally accessing the
network (denial of service).
e) May be difficult to set up. A complex computer network may be difficult to set up. It may also be very costly
to set up an effective computer network in a large organization or company.
Why Networks
a) Load Sharing: Both the program and data are transmitted to a remote computer to equalize the load between
the two facilities.
b) Message Service: A network can be used to handle interpersonal message transmissions. This type of service
can also be used for educational services and conference activities. However, it is not an important motivation
for a network of scientific computers.
c) Data Sharing: The program is sent to a remote computer where a large data base exists. This type of operation
will be particularly useful where data files are too large to be duplicated economically
d) Program Sharing.
e) Remote Service.
Network Terminologies
1) Intranet: An intranet is a set of networks, using the Internet Protocol and IP-based tools such as web browsers
and file transfer applications, that is under the control of a single administrative entity. That administrative
entity closes the intranet to all but specific, authorized users. Most commonly, an intranet is the internal network
of an organization. A large intranet will typically have at least one web server to provide users with
organizational information.
2) Extranet: An Extranet is a computer network used outside the intranet. An extranet is a computer network
that allows controlled access from the outside, for specific business or educational purposes. In a business-to-
business context, an extranet can be viewed as an extension of an organization's intranet that is extended to
users outside the organization, usually partners, vendors and suppliers, in isolation from all other Internet users.
3) Local area network: A local area Network (LAN) is a network that connects computers and devices in a
limited geographical area such as home, school, computer laboratory, office building, or closely positioned
group of buildings. Each computer or device on the network is a node.

2
4) Wide area network: A wide area Network (WAN) is a computer network that covers a large geographic area
such as a city, country, or spans even intercontinental distances, using a communications channel that combines
many types of media such as telephone lines, cables, and air waves. A WAN often uses transmission facilities
provided by common carriers, such as telephone companies.
5) Enterprise private network: An enterprise private network is a network built by an enterprise to interconnect
various company sites, e.g., production sites, head offices, remote offices, shops, in order to share computer
resources.
6) Virtual private network: A virtual private network (VPN) is a computer network in which some of the links
between nodes are carried by open connections or virtual circuits in some larger network (e.g., the Internet)
instead of by physical wires. The data link layer protocols of the virtual network are said to be tunneled through
the larger network when this is the case. One common application is secure communications through the public
Internet, but a VPN need not have explicit security features, such as authentication or content encryption. VPNs,
for example, can be used to separate the traffic of different user communities over an underlying network with
strong security features.
Network topology: A network topology is the layout of the interconnections of the nodes of a computer
network. Network topology signifies the way in which devices in the network see their logical relations to one
another. The use of the term "logical" here is significant. That is, network topology is independent of the
"physical" layout of the network. Even if networked computers are physically placed in a linear arrangement,
if they are connected via a hub, the network has a Star topology, rather than a bus topology. In this regard the
visual and operational characteristics of a network are distinct; the logical network topology is not necessarily
the same as the physical layout. Networks may be classified based on the method of data used to convey the
data, these include digital and analog networks.
Common layouts are:
1) Bus Network: all nodes are connected to a common medium along this medium.
2) A star network: all nodes are connected to a special central node.
3) A ring network: each node is connected to its left and right neighbor node, such that all nodes are
connected and that each node can reach each other node by traversing nodes left- or rightwards.
4) A mesh network: each node is connected to an arbitrary number of neighbors in such a way that
there is at least one traversal from any node to any other.
5) A fully connected network: each node is connected to every other node in the network.

3
History of Internet
In the late 1950's the Advanced Research Projects Agency (ARPA) was founded in the United States with the
primary focus of developing information technologies that could survive a nuclear attack. (Internet History) In
1967 ARPA university and private sector contractors met with representatives of the Department of Defense to
discuss possible protocols for sharing information via computers. In 1969, the U.S. Defence Department funded
a project to develop a network, which can withstand the bombing. Basically, the idea was to develop a very
secure network which can work even after a nuclear attack. This project was known as ARPANET. The
proposed network was not supposed to have a central control—which would be an obvious target. It connected
four sites at the University of California at Los Angeles, the University of California at Santa Barbara, Stanford
Research Institute, and the University of Utah. Throughout the 1970's researchers concentrated on developing
protocols for controlling networks, moving messages across a system of networks, and allowing for remote access
to the networks. There were computers connected at about two dozen sites when the first email was sent in 1972,
but the number of sites and messages soon mushroomed. By 1975 there were 63 sites. Ten years of research
brought Local Area Ethernet Networks (LANs) and workstations were developed to get connected to LAN. These
workstations and LANs were then connected to the ARPANET. For next decade the ARPANET grew and its
decentralized features helped its rapid expansion. Computers connected to ARPANET used a standard or rule to
communicate with each other. This standard used by ARPANET is known as NCP (National Control Protocol).
Protocol is a network term used to indicate the standard used by a network for communication. But the passing
time and rapid change in information technology suppressed NCP and brought TCP/IP (Transmission Control
Protocol/Internet Protocol) in to the world of networking. TCP "converts messages into streams of packets at the
source, and they are reassembled back into messages at the destination. IP handles the dispatch of these packets.
It handles the addressing, and makes sure that a packet reaches its destination through multiple nodes and even
across multiple networks with multiple standards. This flexibility of TCP/IP to handle multiple networks with
multiple protocols encourage other networks to get connected to ARPANET. Slowly the ARPANET became a
massive network of networks and now it is known as ‘Internet’.

4
The Internet has revolutionized the computer and communications world like nothing before. The invention of
the telegraph, telephone, radio, and computer set the stage for this unprecedented integration of capabilities. The
Internet is at once a world-wide broadcasting capability, a mechanism for information dissemination, and a
medium for collaboration and interaction between individuals and their computers without regard for geographic
location. The Internet represents one of the most successful examples of the benefits of sustained investment and
commitment to research and development of information infrastructure.
Commercial Development
In 1963 during the early days of computers and six years before ARPANET, students at MIT developed the first
computer game called Space War. It would be twenty years before the TCP/IP protocol stimulated the growth of
various networks and nearly thirty years (1991) before the United States government opened the Internet to private
enterprise (BBN Timeline), but this game foreshadowed the commercialization of the Internet. In the 1970's and
80's people who were online put out information about furniture and cars they wanted to sell. Debates raged about
whether this was an appropriate use of the new research tool, the Internet, but when the Commercial Internet
Exchange (CIX) was formed in 1991 the genie would not go back in the bottle.
Commercial contractors have been involved in the development of ARPANET from its inception. As Tang and
Teflon began as curiosities of the space program and later became common consumer products, so too have email,
web research, and home shopping on the Web. It has only been ten years since the first relay between a
commercial entity (MCI Mail) and the Internet was made. Since that time technologies have emerged that have
fueled the growth of private enterprise on the Web. In 1992 Paul Linder and Mark McCahill at the University of
Minnesota released Gopher, a tool that allowed researchers to retrieve specific data from myriad 8 locations. The
next year Mosaic, a web browser, was developed at the University of Illinois by Netscape founder Marc
Andreesen, the World Wide Web became a public the identification in-terms of User Login name and password
of the FTP client. If one does not have an account in the remote FTP server, still he can connect to the server
using anonymous login. Using anonymous login anyone can login in to a FTP server and can access public file
archives, anywhere in the world, without having an account. One can easily Login to the FTP site with the
username anonymous and e-mail address as password.
The basic objectives of FTP are
 to give flexibility and promote sharing of computer programs, files and data
 to transfer data reliably and more efficiently over network
 to encourage implicit or indirect use of remote computers using Internet
 to shield a user from variations in file storage systems among hosts.
The basic steps in an FTP session are:
 Start up your FTP client; by typing ftp on your system’s command line/’C>’ prompt (or, if you are in a
Windows, double-click on the FTP icon).
 Give the FTP client an address to connect to. This is the FTP server address to which the FTP
 client will get connected

5
  Identify yourself to the FTP remote site by giving the Login Name
 Give the remote site a password
 Remote site will verify the Login Name/Password to allow the FTP client to access its files
 Look directory for files in FTP server
 Change Directories if required
 Set the transfer mode (optional);
 Get the file(s) you want; and
 Quit.
Telnet (Remote Computing)
Telnet or remote computing is telecommunication utility software, which uses available telecommunication
facility and allows you to become a user on a remote computer. Once you gain access to the remote computer,
you can use it for the intended purpose. The TELNET works in a very step by step procedure. The commands
typed on the client computer are sent to the local Internet Service Provider (ISP), and then from the ISP to the
remote computer that you have gained access. Most of the ISP provides facility to TELNET into your own account
from another city and check your e-mail while you are travelling or away on business.
The followings steps are required for a TELNET session
 Start up the TELNET program;
 Give the TELNET program an address to connect to (some really nifty TELNET packages allow you to
combine steps 1 and 2 into one simple step!);
 Make a note of what the "escape character" is;
 Log in to the remote computer;
 Set the "terminal emulation;"
 Play around on the remote computer; and
 Quit.
WORLD WIDE WEB (WWW)
WWW is the acronym for the World Wide Web. It is also commonly known as ‘The Web’. The WWW is a
system that we use to access the Internet. The WWW is hypertext-based information retrieval tool, it uses the
hypertext to access the various forms of information available on the world’s different networks. One can
easily surf the Web by jumping from one document to another using the links in those documents. These
documents can be in many formats, such as text, graphics, animation, sound and latest is video. They may also
be a combination of all these. All the information on Internet is presented to the user as a document or more
popularly known as Web Page. All these Web Pages are link to each other or even to section within a Web
Page.

The Web Concepts

6
The Web was developed to be a pool of human knowledge, and human culture, which would allow
collaborators in remote sites to share their ideas and all aspects of a common project.
The Web consists of a vast assortment of files and documents that are stored on these computers and written
in some form of Hyper Text Markup Language (HTML) that tells browsers how to display the information.
The computers that store the files are called servers because they can serve requests from many users at the
same time. Users access these HTML files and documents via applications called browsers. The main Web
concepts are:

Web Page
The Web page is a space of information on the Internet that presents information about a particular person,
business, or organization or cause.
• The Web consists of files, called Web pages (documents).
• It is containing links to resources (text, images, audios, videos, and other data), throughout the Internet
Web Site
Web site can be defined as a collection of web pages which are grouped together and usually connected
together in various ways. Often called a "web site" or simply a "site." The web site usually presents information
about a particular person, business, organization or cause.
Generally, there are two types of website styles, Static and Dynamic website:
• A static Website is one that has web pages stored on the server in the same form as the user will view them.
• A dynamic Website is one that does not have web pages stored on the server in the same form as the user
will view them. Instead, the web page content changes automatically and/or frequently based on certain
criteria. There are two meaning for dynamic website. The first is that the web page code is constructed
dynamically, piece by piece. The second one is that the web page content displayed varies based on certain
criteria. The criteria may be pre-defined rules or may be based on variable user input.

The Web Terms

Uniform Resource Locator (URL)
It is the complete address of World Wide Web page and consists of three components that identifies where
the web page is stored on the Internet. These parts are: the protocol, the site name, and the absolute path to the
document or resource as shown in the following example

7
• protocol name (e.g., HTTP)
http:// The first thing the URL does is define the protocol that will be used for that particular transaction. The
letters HTTP let the server know to use Hypertext Transfer Protocol, or get into “web mode.”
• domain name/ hostname (servers address that a user wants to connect with), for example, www.google.com.
www.example.com The next portion of the URL identifies the website by its domain name. In this example,
the domain name is example.com. The “www.” part at the beginning is the particular host name at that domain.
For example, there might also be development.example.com, clients.example.com, and so on.
• File name is optional, implies the access to a file/directory into the principal webpage.
/2012/samples/first.html This is the absolute path through directories on the server to the requested HTML
document, first.html. The words separated by slashes are the directory names, starting with the root directory
of the host.
Example: http://www.icci.org/studies/ips.html .
1. Protocol: http.
2. Host computer name: www.
3. Second-level domain name: icci.
4. Top-level domain name: org.
5. Directory name: studies.
6. File name: ips.html.
Several Top-level domain are common:
com: commercial enterprise.
edu: educational institution.
gov: government entity.
mil: military entity.
net: network access provider.
org: usually nonprofit organizations
biz: Businesses
pro: Professionals, such as doctors and attorneys
Web hosting
After we create a website, it is necessary to store it in a place where it is always available for users. We use
Web hosting services/companies for this purpose. They own web servers that have the ability to store content.
Search engine
Search engines allow us to search in the Internet for information, images and other types of files stored in
various locations available throughout the network. Search engines work according to certain algorithms that
show the user relevant, requested search results. At first, information from the various websites is collected
and stored and then analyzed to organize and save them in the database for future use. When a user enters an
inquiry into the search engine, the database is organized by an index and the user is presented with results that

8
match best the entered search terms. Therefore, it is important to understand that by using the search engine
one does not search the entire Internet but the search engine’s database. Therefore, we might get different
results each time we use different web engines.
4. Internet protocols
• TCP/IP protocol: TCP / IP: This protocol is the main protocol for Internet communication. It defines the
rules that computers need to follow to communicate with other computers via a network.
• HTTP (Hypertext Transfer protocol): is a network protocol that ensures the exchange of almost all types
of resources on the web. With resources, we mean files, pages, images, search results, etc. It is basically, the
web browsers language to send requests to the server. There is also the HTTPS version, which is a secure and
encrypted version for HTTP communications.
• FTP (File Transfer Protocol): is used to load (upload) or retrieve (download) files between the client and
server communication, or between two computers on the Internet. In other words, this protocol is responsible
for file transfer on the Internet.
• Internet Service Provider (ISP):Is an organization that provides individuals and other companies’ access
to the Internet and other related services such as e-mail.
Web Design: Client-Server Architecture
1. Client-Server Architecture
Computers on the Internet use client/server architecture. This means that the remote server machine provides
files and services to the user local client machine.

Web Server: A Web Server is a computer purposed to runs special serving software. That software "serves"
HTML pages and the files associated with those pages when requested by a client, usually a Web browser.
The computer is secured so that only authorized people can access it to make changes to the data, so, If a
person is on the same network as the Web Server, he or she may be able to save the data directly onto the Web
Server computer (if authorized).

Server-side:

• JSP (Java Server Pages)

• ASP (Active Server Pages)

9
• ASP.NET (next generation of ASP)

• PHP

• Phython

Client: The Client (front end) or user side of the Web, it typically refers to the Web browser in the user's
machine. It may also refer to plug-ins and helper applications that enhance the browser to support special
services from the site. The term may imply the entire user machine or refer to a handheld device that provides
Web access.

Client-side:

• HTML / XHTML (Extensible Hyper Text Markup Language)

• CSS (Cascading Style Sheets)

• JavaScript / VBScript (client-side scripting).

Web Browsers: Generally, a web browser is a software application or program for retrieving, displaying, and
traversing information resources on the World Wide Web. An information resource is identified by a Uniform
Resource Identifier (URI) and may be a web page, image, video, or other piece.

10
Web Operations

The Web works on client- server approach. Following steps explains how the web works:

1. User enters the URL (say, http://www.tutorialspoint.com) of the web page in the address bar of web
browser.

2. Then browser requests the Domain Name Server for the IP address corresponding to
www.tutorialspoint.com.

3. After receiving IP address, browser sends the request for web page to the web server using HTTP protocol
which specifies the way the browser and web server communicates.

4. Then web server receives request using HTTP protocol and checks its search for the requested web page.
If found it returns it back to the web browser and close the HTTP connection.

5. Now the web browser receives the web page, it interprets it and display the contents of web page in web
browser’s window.

Site Structure: Every Web site was built in inherits structure and should have a consistent and simple
organization called a site structure. A site is a collection of HTML files, documents and images contained in
a single master folder (the root folder). Within this root folder you can save your documents and subfolders
organized in a manner that makes sense to you, as well as to others in your department that may need to edit
the information.

Therefore, it is recommended that the structure of Web site include:

1. A root folder that contains the Web site.

2. A Web page entitled index.htm (or index.html) that resides within the root folder to represent the default
homepage for the Web site.

3. May be images folder that contains the graphics, illustrations, images and photographs used in the Web
pages.

11
4. Additional folders for organizing the content.

Hyperlinks

Hyperlinks are the primary method used to navigate between pages and Web sites. Links can point to other
web pages, web sites, graphics, files, sounds, e-mail addresses, and other locations on the same web page.
When text is used as a hyperlink, it is usually underlined and appears as a different color. There are four types
of hyperlinks.

• Text hyperlink – Uses a word or phrase to take visitors to another page, file or document.

• Image hyperlink – Uses an image to take visitors to another page, file or document.

• Bookmark hyperlink – Uses text or an image to take visitors to another part of a web page.

• E-mail hyperlink – Allows visitors to send an e-mail message to the displayed e-mail address.

How Browsers Display Web pages

When a Web page is opened in a browser, the browser reads and interprets the HTML file and formats the
Web page for display. If there are references to external files, such as images or multimedia, these files are
downloaded from the server and displayed in the browser window. It is important to note that HTML files are
text files that only contain references to the external files – you do not “embed” these files into the Web page.

12
Types of Web Sites There are many types of Web sites, each catering to a particular type of content or use.
Hence, few illustrative but not exhaustive cases are given below:

1) Blog (Web Log): site generally used to post online diaries which may include discussion forums.

2) Social Networking Site: where users could communicate with one another and share media, such as pictures,
videos, music and blogs with other users. These may include games and Web applications.

3) Wiki Site: which users collaboratively edit (such as Wikipedia and Wikihow).

4) Web Portal: that provides a starting point or a gateway to other resources on the Internet.

5) Search Engine Site: a site that provides general information and is intended as a gateway or lookup for other
sites like Google, Yahoo, Bing search engines.

6) Education Site: where teachers, students, or administrators can post information about current events at or
involving their school.

Website Design Issues There are many points one should keep in mind while designing a Web site. These
points make a site usable and easily accessible to the users, which are discussed below:

1) Information Availability-- All the information that helps a visitor make informed decisions should be in the
Web site. The general benchmark of a good Web site is that it should be providing 80-90 % of what a
user/visitor is looking for.

2) Page layout: How the content is displayed on the page -- The page should be laid in such a way people
should be able to find relevant content quickly.

Else they lose interest and leave the site. Page should be simple to enhance the usability of the page.

3) Colors -Standard colors should be used as colors can affect the usability of the site. For example, the
standard colors used for links (blue for links; violet for visited links; and red for active links) should be
maintained as one runs the risk of confusing the visitors.

13
4) Web Accessibility- Web accessibility means accessibility to all including people with disabilities (like
visual, audio, physical, speech) can interact or contribute to the Web. As more and more accessible Web sites
and software are made available, people with disabilities should be able to use and contribute the Web more
effectively.

5) User-friendly Site- web site should be creating based on what the audience requires.

6) Download Speed - The download speed cannot determine by a Web designer. Some considerations are
optimizing the graphics (images not larger than 10 kb), making smaller pages, and avoiding nested tables.

INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language, and it is the most widely used Language used to create Web
Pages or Hypertext document. Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext. A Markup Language is a set of instructions
often called TAGS which can be added to text files. HTML is only a formatting language are not a
programming language.

Elements of a web document are labelled through the usage of HTML tags. It is the tags that describe the
document. Anything that is not a tag will be displayed in the document itself. HTML does not describe any
page layout i.e, for example, word for windows have different styles for headings, font size etc. Web Browsers
are best examples of HTML formatters.

Advantages of HTML: -

• A HTML document is small and hence easy to send over the net. It is small because it doesn’t include format
information.

• HTML documents are cross platform compatible and device independent. Its need a HTML readable browser
to view them.

Basic HTML tags: -

(1) <!doctype>:

This tag formally starts an HTML document and it also indicates the version of HTML used. Although it's not
a page structure tag, the XHTML 1.0 recommendation includes one additional requirement for your web
pages. The first line of each page must include a DOCTYPE identifier that defines the XHTML 1.0 version
to which the page conforms, and the document type definition (DTD) that defines the specification. This is
followed by the <html>, <head>, and <body> tags. In the following example, the XHTML 1.0 Strict
document type appears before the page structure tags:

14
<!DOCTYPE html >
<html>
<head>
<title>Page Title</title>
</head>
<body>
...your page content...
</body>
</html>
Three types of HTML 4.01 document types are specified in the XHTML 1.0

specification:

Strict, Transitional, and Frameset.

(2) <HTML>:

HTML is a markup language and makes use of various tags to format the content. These tags are enclosed
within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags.
For example, <html> has its closing tag</html> and <body> tag has its closing tag </body> tag etc.

Every HTML document starts with a <html> tag and it is always the first tag in a html page and indicates that
the document is a HTML document. The end tag <html> is </html>.

Example:

<html>……...</html>

Tag Description
<!DOCTYPE...> This tag defines the document type and HTML
version.
<html> This tag encloses the complete HTML document
and mainly comprises of document header which
is represented by <head>...</head> and
document body which is represented by
<body>...</body> tags.
<head> This tag represents the document's header which
can keep other HTML tags like <title>, <link>
etc.
<title> The <title> tag is used inside the <head> tag to
mention the document title.
<body> This tag represents the document's body which
keeps other HTML tags like <h1>, <div>, <p>
etc.
<h1> This tag represents the heading.
HTML Document Structure

A typical HTML document will have the following structure:

Document declaration tag

<html>
<head>

15
Document header related tags

</head>
<body>
Document body related tags
</body>
</html>
Heading Tags:

Any document starts with a heading. It contains the head of an html document, which holds about the
document such as title. Each property defined html page should have a head which can be created with <head>
tag. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. It has header information and it is displayed at the top of the browser. Each tag for <head> is </head>.

<!DOCTYPE html >

<html>
<head>
<title>This is the Title. It will be explained later on</title>
</head>
...your page...
</html>

(4) <title>:

Each HTML page needs a title to indicate what the page describes. It appears in the title bar of the browser
when people view the web page. It contains the title of the html document which includes the content that
will actually appear in the web browser. The entire content of the web page is placed in the pages <body>
tag. The end tag <body> is
<!DOCTYPE html >
<html>
<head>
<title>The Lion, The Witch, and the Wardrobe</title>
</head>
<body>
...your page...
</body>
</html>

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying
any heading, browser adds one line before and one line after that heading.

For example:

<!DOCTYPE html>
<html>
<head>
16
<title>Heading Example</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>
(5) <body>:

It contains the body of the HTML Document, which includes the content that will actually appear in the
web browser. The entire content of the webpage will be placed in the pages <body> tag. The end tag of
the

<!DOCTYPE html >

<html>
<head>
<title>This is the Title. It will be explained later on</title>
</head>
<body>
...your page...
</body>
</html>

STRUCTURE OF THE HTML PROGRAM: -

The HTML Program is generally divided into two sections i.e., head and body. We use <head> and <body> tags
to indicate these two sections. <head> section holds the header information of a webpage document indicated by
a title that is provided by using <title> tag in the <head>. The title helps us to refer to the webpage. <body>
section contains the content which we want to display which the webpage. Anything that is not a tag will be
displayed within the webpage.
Example:
<html>
<head>
<title>First Webpage</title>
</head>
<body>
This is my first page
</body>
</html>

17
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in
between an opening <p> and a closing </p> tag as shown below in the example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example
of an empty element, where you do not need opening and closing tags, as there is nothing to go in between
them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older
browsers will have trouble rendering the line break, while if you miss the forward slash character and just
use <br> it is not valid in XHTML.
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body> HTML
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
This will produce the following result:
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Attribute: An attribute is used to define the properties of an HTML element and is located within the element's
opening tag. All attributes consist of two parts: a name and a value.

18
 Set the desired property using its name. For example, the paragraph element <p> in the sample has a property
named align, which you can use to specify the alignment of the paragraph on the page.
 Use quotation marks to indicate the desired property value. The sample below displays three potential values
or the align attribute: left, center, and right.
Attribute names and values are case insensitive. However, the World Wide Web Consortium (W3C)
encourages lowercase attributes/values in its HTML 4 recommendation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
This will display the following result:

Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all) are:
 Id
 Title
 Class
 Style

The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.
There are two primary reasons that you might want to use an id attribute on an element:
 If an element carries an id attribute as a unique identifier, it is possible to identify just that
element and its content.

 If you have two elements of the same name within a Web page (or style sheet), you can use
the id attribute to distinguish between elements that have the same name.
Example
 <p id="html">This para explains what is HTML</p>
 <p id="css">This para explains what is Cascading Style Sheet</p>

The title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar
as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often displayed
as a tooltip when cursor comes over the element or while the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
19
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

A HTML list serves as a mechanism for showcasing a collection of interconnected items on a

webpage, allowing for their presentation either in a defined sequence or without a specific order.

These lists find application in various contexts, such as crafting menus, delineating procedural steps,

displaying data, or providing a succinct summary of information.

Notably, HTML supports three primary types of lists: Unordered lists, which lack a predefined order

and are marked with symbols like bullets or squares, Ordered lists, structured with a specific

sequence indicated by numbers or other symbols, and Description Lists, tailored for defining terms

and offering corresponding descriptions. This trio of list types contributes to the versatility and

organization of content within HTML documents.

Unordered lists: Unordered lists, characterized by their lack of a predetermined order or sequence,

are visually marked with symbols such as bullets, circles, or squares. The creation of unordered lists

in HTML involves the use of the `<ul>` tag to encapsulate the entire list, while each individual list

item is denoted by the `<li>` tag. For example:

HTML

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Orange</li>

</ul>

This code will produce the following output:

 Apple

 Banana

 Orange
20
Ordered lists: Ordered lists, in contrast to unordered lists, maintain a distinct order or sequence and

are visually represented with numbers, letters, roman numerals, or alternative symbols. The

construction of ordered lists in HTML involves employing the `<ol>` tag to define the list, while each

individual item within the list is designated by the `<li>` tag. For example:

<ol>

<li>First step</li>

<li>Second step</li>

<li>Third step</li>

</ol>

This code will produce the following output:

1. First step

2. Second step

3. Third step

Description lists: Description lists in HTML are structured using the `<dl>` (description list) tag.

Each term in the list is defined using the `<dt>` (definition term) tag, and its corresponding description

is provided using the `<dd>` (description) tag. This HTML structure is particularly useful for creating

lists that define or explain terms, concepts, or processes. The `<dl>`, `<dt>`, and `<dd>` tags

contribute to clear and organized content presentation on web pages. For example:

<dl>
<dt>HTML</dt>
<dd>A markup language that is used to create web pages</dd>
<dt>CSS</dt>
<dd>A style sheet language that is used to style web pages</dd>
<dt>JavaScript</dt>
<dd>A scripting language that is used to add interactivity and functionality to web pages</dd>
</dl>

21
This code will produce the following output:

HTML : A markup language that is used to create web pages CSS : A style sheet language that is used

to style web pages JavaScript : A scripting language that is used to add interactivity and functionality

to web pages.

HTML NESTED LIST

WHAT IS A NESTED LIST: A nested list is a list that contains another list as one of its items. A

nested list can be useful for creating outlines, hierarchies, menus, or other structures that require.

There are two types of lists in HTML: ordered and unordered. Ordered lists use numbers or letters to

indicate the order of the items, while unordered lists use bullets or other symbols. To create a nested

list, it needs to use the two types of HTML elements: <ul> and <li>. The <ul> element stands for

unordered list, which means the items are not numbered or ordered. The <li> element stands for list

item, which represents a single item in a list.

<ul>
<li>Animals
<ul>
<li>Mammals
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Elephant</li>
</ul>
</li>
<li>Birds
<ul>
<li>Eagle</li>
<li>Parrot</li>
<li>Penguin</li>
</ul>
</li>
<li>Fish
<ul>
<li>Shark</li>
<li>Salmon</li>
<li>Goldfish</li>
</ul>
</li>
22
 </ul>
</li>
<li>Plants
<ul>
<li>Flowers
<ul>
<li>Rose</li>
<li>Lily</li>
<li>Sunflower</li>
</ul>
</li>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>

What are the rules for creating a nested list: When building a nested list, there are a few guidelines
that must be adhere to.:
 A nested list must be inside a <li> element of the parent list.
 A nested list must have the same type as the parent list. For example, we cannot nest an ordered
list (<ol>) inside an unordered list (<ul>).
 A nested list can have any number of levels, but it is recommended to keep it simple and clear
for readability and accessibility.
 A nested list can have any content inside its <li> elements, such as text, images, links, or other
HTML elements.
Benefits of using a nested list: A nested list can have several benefits, such as:
 It can help organize and structure the information in a logical and hierarchical way.
 It can make the content easier to read and understand for the users and the browsers.
 It can improve the SEO (search engine optimization) of the web page by providing keywords
and headings for the search engines to index.
 It can enhance the accessibility and usability of the web page by providing navigation and
landmarks for the screen readers and keyboard users.
WHAT IS HYPERLINK: A hyperlink, often known as a link, is a way of connecting two web sites

or resources on the internet. A hyperlink allows the user to navigate to a new place by clicking on a

23
word, phrase, image, or other element. A hyperlink can also launch an application or open a new

browser window or tab.

Hyperlink are created using the HTML <a> element, also known as the anchor element. The <a>

element has an attribute called href, which stands for hypertext reference and the href attribute

specifies the URL (uniform resource locator) of the destination page or resource. The content inside

the <a> element is the link text, which is the part that will be visible and clickable to the user for

example <a href="https://www.google.com">Visit Google</a> and by default, hyperlinks have the

following appearance in most browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple

 An active link is underlined and red

Sometimes, the user may want to open the linked page or resource in a different browser window or

tab, instead of the current one. This can be useful for external links, pop-up windows, or web

applications. To change the target of a hyperlink, the user need to use the word target attribute of the

<a> element. The target attribute can have one of the following values:

 self – Default: Opens the linked page in the same window or tab as the current one.

 blank - Opens the linked page in a new window or tab.

 parent - Opens the linked page in the parent frame of the current one.

 top - Opens the linked page in the top-level frame of the current one.

For example, the following HTML code creates a hyperlink that opens the MDN Web Docs website

in a new window or tab: <a href="https://developer.mozilla.org" target="_blank">Visit MDN Web

Docs</a>.

Aside from linking to online sites or resources, several forms of hyperlinks may be created such as:

24
Image links - To utilize a picture as a link, the user just inserts the<img> element inside the <a>

element. For example: <a href="https://developer.mozilla.org"> <img src="mdn_logo.png"

alt="MDN Web Docs Logo"></a>.

Email links - To create a link that opens the user's email application and allows the user to send a

new email, use the mailto: protocol in the href attribute, followed by the email address. For example:

<a href="mailto:[email protected]">Send email to

[email protected]</a>.

Telephone links - To create a link that opens the user’s phone app and lets the user dial a number, its

uses the tel: protocol in the href attribute, followed by the phone number. For example:

<a href="tel:08038458590">Call 08038458590</a>

Download links - To create a link that prompts the user to download a file, it use the download

attribute of the <a> element, and optionally specify a new file name. For example: <a

href="resume.pdf" download="John_Doe_Resume.pdf">Download resume</a>.

rel - Specifies the relationship between the current page and the destination page or resource. It can

be one or more of the following values: alternate, author, bookmark, external, help, license, next,

nofollow, noreferrer, noopener, prev, search, or tag.

What is an Absolute and Relative Hyperlinks: An absolute hyperlink is a hyperlink that contains

the full address of the destination file or of the web site. E.g

<ahref=“https://www.kwasu.com.ng”>Visit Kwasu</a> this hyperlink contains the full address of the

destination web site, including the protocol (https://) and the domain name (www.kwasu.com.ng). It

will open the Kwasu home page in the same window or tab as the current document. The link text is

“Visit Kwasu”, which is the part that will be visible and clickable to the user. Absolute hyperlinks are

useful when linking to a web page or file that is outside your domain.

Relative hyperlinks, on the other hand, a relative hyperlink is a hyperlink that contains an address

that is relative to the address of the destination file. The address of the destination file is also known

25
as the hyperlink base. For example, a document has the following hyperlink base: C:\\Documents and

Settings\\ Username \\My Documents. A document that is named “Sales.doc” is located at the

following file path: C:\\Documents and Settings\\ Username \\My Documents\\April\\Sales.doc. The

relative hyperlink to this document contains only the relative address to Sales.doc. Therefore, the

relative hyperlink contains the following address: April\\Sales.doc.

What is the difference between absolute and relative hyperlinks: The main differences between

absolute and relative hyperlinks are:

 Absolute hyperlinks contain the full address of the destination file or web site, such as

https://www.bing.com. While Relative hyperlinks contain an address that is relative to the

current file or web site, such as images/logo.png.

 Absolute hyperlinks are useful for linking to external resources or web pages that are outside

your own domain or web site. While Relative hyperlinks are useful for linking to internal

resources or web pages that are within your own domain or web site.

 Absolute hyperlinks make your web site or file independent and easy to update, but they can

be hard to maintain and debug while Relative hyperlinks make your web site or file portable

and easy to move or copy, but they can cause duplicate content or broken links.

What is an Image HTML: The HTML image <img> tag serves the purpose of embedding an image

into a web page rather than being physically inserted, images are linked to web pages and the <img>

tag creates a space to hold the referenced image. The <img> tag is void of content and solely contains

attributes; it does not require a closing tag. Two essential attributes of the <img> tag are src, which

specifies the image's file path, and alt, which provides alternative text for the image. Image attributes

refer to the properties that alter the appearance and behavior of an image element in HTML. These

attributes are specified within the <img> tag, which is utilized for embedding images in web pages.

Common image attributes include:

26
src - A source image in HTML refers to an image that is referenced by the src attribute of the <img>

tag. This particular tag is utilized to embed an image within a web page. The source image can be

indicated through a URL, a relative path, or a data URL. Additionally, the <img> tag necessitates the

inclusion of an alt attribute, which serves to provide alternative text for the image in the event that it

cannot be displayed. For example:

html

<img src="https://www.kwasu.com.ng/html/img_kwasu.jpg" alt="Home Page">

Alt: In HTML, the representation of an alternative image is accomplished by utilizing the "alt"

attribute situated within the "img" (image) element. The "alt" attribute functions to supply alternative

text that is exhibited in the event that the image is unable to be loaded or in the circumstances where

the user utilizes a screen reader. Additionally, it serves as a descriptive element for the image, thereby

enhancing accessibility and furnishing users who may lack visual capability with substantial content.

For example, <img src="example.jpg" alt="A beautiful landscape with mountains and a lake">.

width and height - The dimensions of an image in HTML are determined by the width and height

attributes, which indicate the size of the image in pixels. The width attribute governs the horizontal

dimension, while the height attribute governs the vertical dimension. For instance, the HTML code

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> renders an image with a

width of 500 pixels and a height of 600 pixels. It is advisable to always designate both the width and

height attributes for images. This aids the browser in reserving the appropriate space for the image

and prevents any alteration of the page layout during the loading process. Nevertheless, should the

width and height attributes remain unspecified, the browser will utilize the natural size of the image,

which corresponds to the actual size of the image file.

style - The image style in HTML pertains to a methodology employed to modify the visual and

interactive characteristics of an image element by leveraging CSS. This can be accomplished through

the utilization of the style attribute or by employing a style sheet to apply diverse CSS properties,

27
such as width, height, border, filter, among others. To illustrate, a rounded image can be generated by

utilizing the border-radius property. For instance, <img src="img_girl.jpg" alt="Girl in a jacket"

style="border-radius: 8px;">.

Title - An HTML image title is a technique used to incorporate a tooltip containing text into an image

element. This tooltip is a small pop-up box that appears when the mouse pointer hovers over the

image. Its purpose is to provide additional information or context about the image. There are two

common methods of including an HTML image title in HTML: utilizing the title attribute within the

<img> tag. The value assigned to this attribute can be any string. For example: <img src="pic.jpg"

title="This is a picture of a cat">.

Utilizing a <figure> element for the purpose of structuring a photograph within a document, and

employing a <figcaption> element to define a descriptive caption for said photograph. The caption

shall be positioned beneath the image, while simultaneously being displayed as a tooltip when the

cursor hovers over the image. As an illustration:

<figure>

<img src="pic.jpg" alt="Cat">

<figcaption>This is a picture of a cat</figcaption>

</figure>.

id and class - Specify the identifier and the class name of the image, which can be used for styling or

scripting purposes. For example, <img src="smiley.png" alt="Smiley face" id="smiley1"

class="smiley"> assigns the id “smiley1” and the class “smiley” to the image, which can be referenced

by CSS selectors or JavaScript functions.

loading - The loading attribute plays a crucial role in determining the loading behavior of an image

within a web page. It offers two distinct options: "eager" and "lazy". By default, the "eager" value is

assigned, which signifies that the image should be loaded promptly. Conversely, the "lazy" value

instructs the browser to defer the image loading until it is near the user's viewport. To illustrate,

28
consider the following code snippet: <img src="smiley.png" alt="Smiley face" loading="lazy">. This

particular example demonstrates the utilization of the "lazy" value, delaying the image loading until

the user has scrolled down the page to view it. This approach can significantly optimize the

performance and overall user experience of the web page.

srcset and sizes - The <source> element contains a srcset attribute that specifies the URL of the image

file, and a media attribute that specifies the media condition. The browser will select the first <source>

element that matches the current media condition, and utilize the corresponding image file for the

<img> element. In the event that none of the <source> elements match, the browser will employ the

default image file specified by the src attribute of the <img> element. For instance,

<picture>

<source srcset="smiley.webp" type="image/webp">

<source srcset="smiley.jpg" type="image/jpeg">

<img src="smiley.png" alt="Smiley face">

</picture> provides three image files with different formats: WebP, JPEG, and PNG. The browser

will employ the WebP image if it is compatible, otherwise it will utilize the JPEG image. If neither

of them is supported by the browser, the PNG image will be used. This can enhance the compatibility

and efficiency of the webpage across various browsers and devices.

picture and source - In HTML, the <picture> element serves the purpose of presenting various

iterations of an image based on factors such as the browser, screen size, or device pixel ratio. Within

the <picture> element, the <source> element is employed to indicate one or multiple image sources

along with their corresponding descriptors. Conversely, the <img> element functions as a fallback

image in case none of the sources prove to be suitable. An illustrative instance of utilizing the

<picture> and <source> elements to showcase a high-density and standard-resolution image is

presented below.

<picture>

29
 <source srcset="logo.png, logo-1.5x.png 1.5x" />

<img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />

</picture>

What is an illustrative image in Html: An illustrative image serves the purpose of enhancing the

visual appeal or conveying meaning within a web page. This is achieved by embedding it into the

HTML document through the <img> element, which necessitates the inclusion of two attributes: src

and alt. The src attribute denotes the URL of the image, while the alt attribute offers alternative text

to describe the image in situations where it cannot be viewed or accessed by certain users. To

illustrate, consider the following example: <img src="images/dinosaur.jpg" alt="Dinosaur">.

Illustrative images can take various forms and may include photographs, diagrams, charts,

infographics, icons, and other visual elements. They play a crucial role in making web content more

engaging and understandable for users. Examples of illustrative images in HTML might include:

Photographs: Adding real-world images to illustrate concepts or provide visual examples. <img

src="example-photo.jpg" alt="A demonstration of a concept using a photograph">, Diagrams and

Charts: Using graphical representations to explain data or processes, <img src="process-

diagram.png" alt="A diagram illustrating a step-by-step process"> etc.

What is a background Image in Html: In HTML, a background image refers to an image that is set

as the background of an HTML element or the entire web page. This image is used to enhance the

visual appeal of the webpage by providing a backdrop or atmosphere. Background images are

commonly applied to elements such as the body of the HTML document, a section, a div, or any other

container element. To set a background image in HTML, the CSS (Cascading Style Sheets)

background-image property is used. Here is a basic example:

<!DOCTYPE html>

<html lang="en">

<head>

30
 <meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

background-image: url('background.jpg');

background-size: cover; /* Ensures the image covers the entire background */

background-repeat: no-repeat; /* Prevents the image from repeating */

background-position: center; /* Centers the image within the body */

/* Additional styling for content */

.content {

color: white;

text-align: center;

padding: 50px;

</style>

<title>Background Image Example</title>

</head>

<body>

<div class="content">

<h1>Welcome to My Website</h1>

<p>This is some content on the page.</p>

</div>

</body>

</html>

31
In this example above:

The background-image property is used to specify the URL of the background image.

 background-size: cover; ensures that the background image covers the entire background.

 background-repeat: no-repeat; prevents the image from repeating.

 background-position: center; centers the image within the body.

There are various methods to incorporate a background image in HTML, which vary depending on

the desired appearance on the element. For instance, by employing CSS properties like background-

size, background-position, background-repeat, and background-attachment. Here are some examples

of how to add a background image in HTML, using different CSS properties: To add, one can regulate

the size, position, repetition, and attachment aspects of the background image. Below are a few

examples illustrating different CSS properties used to add a background image in HTML: To include

a background image that spans across the entire page, use the following code:

<style>

body {

background-image: url("img_girl.jpg");

</style>

This code snippet allows the image file named "img_girl.jpg" to be set as the background image for

the body element. It is important to ensure that the image file is located in the same folder as the

HTML file or to provide the accurate file path. To achieve a background image that covers the entire

element without repeating or stretching, the following code can be utilized:

<style>

body {

background-image: url("img_girl.jpg");

32
 background-size: cover;

</style>

This will assign the value "cover" to the background-size property, indicating that the image will be

proportionally scaled to fit the element. To achieve a fixed background image that remains unaffected

by page scrolling, you can utilize the following code:

<style>

body {

background-image: url("img_girl.jpg");

background-attachment: fixed;

</style>

The difference between background image and illustrative images is mainly semantic and functional.

Background images are used to enhance the appearance or layout of an element, such as a <div> or a

<body> and are not part of the content. Illustrative images are used to convey information or meaning,

such as a logo, a diagram, or a photo, and are part of the content.

Background images are set using the CSS background-image property, while illustrative images are

embedded using the HTML <img> tag.

What is Html Table: A table in HTML serves as a means to systematically arrange and present data

in rows and columns. Tables prove to be advantageous when presenting structured information with

interrelated data types. For instance, tables can be utilized to exhibit the names and ages of various

individuals or the prices and characteristics of diverse products.

To create a table in HTML, you need to use the following elements:

<table>: This element defines the table and contains all the other elements related to the table.

33
<tr>: This element defines a table row, which can have one or more table cells.

<td>: This element defines a table cell, which can contain any HTML content, such as text, images,

links, etc.

<th>: This element defines a table header, which is a special type of table cell that usually appears at

the top or left of the table. Table headers are used to label the columns or rows of the table and make

them easier to understand.

<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

ADVANTAGES OF HTML TABLES:

 They can organize and display data in rows and columns, making it easy to read and compare.

 They can contain various types of content, such as text, images, lists, links, and other tables.

 They can be styled with CSS to enhance their appearance and functionality.

34
  They can be accessed by screen readers and other assistive technologies, improving the

accessibility of the web page.

DISADVANTAGES OF HTML TABLES:

 Inefficient and messy code: HTML tables require a lot of tags and attributes to create a grid

structure, which makes the code hard to read and debug. It also increases the file size and

loading time of the web page.

 Lack of flexibility and responsiveness: HTML tables are not designed to adapt to different

screen sizes and devices, which can affect the user experience and accessibility of the web

page. It is also difficult to change the layout or design of the web page using tables, as it

requires modifying the entire table structure.

 Poor semantic meaning and SEO: HTML tables do not convey the logical structure and

meaning of the web page content, which can confuse the search engines and the users. Tables

are meant for displaying tabular data, not for layout purposes. Using tables for layout can also

affect the ranking and visibility of the web page in the search results.

Definition of an HTML Table attributes: A table attribute is a property or characteristic of a table

that defines its appearance or behavior. For instance, the border attribute defines the width of the

border surrounding the table cells, while the align attribute specifies the horizontal alignment of the

table within the document. Typically, table attributes are indicated within the opening <table> tag of

an HTML document. HTML table attributes serve the purpose of altering the presentation and

functionality of tables. Several commonly employed attributes include:

BORDER: This attribute determines the magnitude of the border surrounding the table and its cells.

The value can be expressed in pixels or as a percentage of the table's width. For instance, one may

specify border="1" or border="10%". For border styling via CSS, it is recommended to utilize the

border property instead.

35
CELLPADDING: This attribute determines the spacing between the content of a cell and its border.

The value can be specified in pixels or as a percentage of the cell width. For instance, cellpadding="5"

or cellpadding="10%". To specify the padding using CSS, the padding property should be employed

instead.

CELL SPACING: This attribute determines the spacing between the cells of a table. The value can

be specified in pixels or as a percentage of the table width. For instance, cellspacing="10" or

cellspacing="5%". To define the spacing using CSS, employ the border-spacing property instead.

COLSPAN: This attribute specifies the number of columns a cell should span. For example, <td

colspan="2"> means the cell will occupy two columns.

ROWSPAN: This attribute specifies the number of rows a cell should span. For example, <td

rowspan="3"> means the cell will occupy three rows.

WIDTH: This attribute sets the width of the table or a cell. It can be either a fixed value in pixels or

a percentage of the available space. For example, <table width="500"> means the table will have a

width of 500 pixels, while <td width="50%"> means the cell will take up half of the table width.

BGCOLOR: This property determines the background color of the table. The value can be specified

as a color name, a hexadecimal code, or an RGB value. For instance, bgcolor="red",

bgcolor="#FF0000", or bgcolor="rgb(255,0,0)". To set the background color using CSS, it is

recommended to use the background-color property instead.

ALIGN: This attribute is used to horizontally align the table on the page. The value can be left, right,

or center. For instance, align="center". To align the table using CSS, the margin property should be

utilized instead.

DEFINITION OF A NESTED TABLE IN HTML: An HTML nested table refers to a table that is

constructed within another table within the same webpage. The inner table is positioned between the

<td> and </td> tags of the outer table. A nested table proves useful for presenting intricate data or

layouts. It is important to note that a nested table does not adopt the formatting of the outer table and

36
necessitates its own attributes. It is generally discouraged to employ nested tables as they tend to

complicate the markup and diminish accessibility. An example of a nested table in HTML:

<table>

<tr>

<td>Outer table cell 1</td>

<td>Outer table cell 2</td>

<td>Outer table cell 3</td>

</tr>

<tr>

<td colspan="3">

<table>

<tr>

<td>Inner table cell 1</td>

<td>Inner table cell 2</td>

</tr>

<tr>

<td>Inner table cell 3</td>

<td>Inner table cell 4</td>

</tr>

</table>

</td>

</tr>

</table>

What is HTML Form: A form in HTML refers to a designated section within a document that

facilitates the gathering of user input and subsequent transmission to a server for processing. This

37
component can encompass a variety of input elements, including but not limited to text fields, buttons,

checkboxes, and radio buttons. The creation of a form is accomplished through the utilization of the

<form> element, which possesses multiple attributes to specify the action, method, and encoding

associated with the form data. Some of the common attributes for HTML forms are:

The action attribute specifies the URL of the file that will handle the form data when the form is

submitted. For instance, <form action="/action_page.php"> will send the form data to a file named

action_page.php on the server.

The method attribute specifies the HTTP method to be used when sending the form data. The two

most common methods are get and post. The get method appends the form data to the URL as

name/value pairs, while the post method sends the form data inside the body of the HTTP request.

The post method is preferred for sending large or sensitive data. For example, <form method="post">

will use the post method to send the form data.

The target attribute specifies where to display the response that is received after submitting the form.

The target attribute can have values such as _blank, _self, _parent, _top, or a frame name. The default

value is _self, which means that the response will open in the current window. For instance, <form

target="_blank"> will open the response in a new window or tab.

The autocomplete attribute specifies whether the browser should automatically fill in the values of

the input fields based on previous entries by the user. The autocomplete attribute can have values such

as on or off. The default value is on, which means that the browser will try to autocomplete the input

fields. For instance, <form autocomplete="off"> will disable the autocomplete feature for the form.

The form attribute specifies the id of the form that the input element belongs to. This attribute can

be used to associate an input element with a form that is not its parent element. For instance, <input

type="text" form="myForm"> will belong to the form with id myForm, even if it is outside the form

element.

38
The name attribute denotes the name of the input element, which serves as an identifier for the input

value when transmitting form data to the server. For instance: <input name="fname">

The type attribute designates the type of the input element, which can take on various values such

as text, radio, checkbox, submit, button, etc. Each type possesses its own visual representation and

functionality. For example: <input type="text"> or <input type="radio">

The value attribute specifies the initial or default value of the input element. For example: <input

value="John">

The placeholder attribute provides a hint or brief description of the expected input value. It is shown

within the input field until the user enters some data. For example: <input placeholder="Enter your

name">

The required attribute indicates that the input field must be completed before submitting the form.

It can be set to either true or false. For example: <input required="true">

The disabled attribute specifies that the input element should be disabled, meaning it cannot be

edited or clicked. It can be set to either true or false. For example: <input disabled="true">

The readonly attribute specifies that the input element should be read-only, meaning it cannot be

edited but can be clicked or copied. It can be set to either true or false. For example: <input

readonly="true">

The checked attribute designates that the input element should be pre-selected or checked when the

page loads. This attribute is only applicable to radio buttons and checkboxes. It can be set to either

true or false. For example: <input type="radio" checked="true">

The id attribute provides a unique identifier for the input element. It is used to associate the input

element with a <label> element, which describes the input. For example: <input id="fname"> and

<label for="fname">First name:</label>

39
The class attribute specifies one or more class names for the input element. It is used to apply CSS

styling to the input element. For example: <input class="form-control">

Here is an example of a simple HTML form that asks the user to enter their name and email address:

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name"><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email"><br>

<input type="submit" value="Submit">

</form>

DEFINITION OF INPUT TAGS: An input tag in HTML is an element type that facilitates user

data input in a web form. It is utilized to create interactive controls for web-based forms, enabling

users to provide data. The input tag contains a type attribute, which determines the display format and

data type that the input element can accommodate. For instance, the following code snippet will

generate a text field for users to enter their name: <input type="text" id="name" name="name">.

There exist various types of input elements, including text, button, checkbox, radio, file, among

others. Each type possesses its own syntax, attributes, and behavior. The following are examples of

input tags namely:

Text: A text field in HTML is an input element that facilitates the input of textual data by the user. It

is described by the <input type="text"> tag and encompasses several attributes that afford

customization of its visual presentation and operational characteristics. These attributes include id,

name, value, placeholder, size, maxlength, readonly, and disabled, which respectively serve to specify

the identifier, name, default value, instructional placeholder, dimensions, maximum length, read-only

state, and disabled state of the text field. A text field is different from a text area, which is another

input element that allows the user to enter multiple lines of text.

40
A text area is defined by the <textarea> tag, which has similar attributes to the text field, but also

has rows and cols attributes to specify the height and width of the text area in characters. For iinstance,

the following code;

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name" placeholder="Enter your name"><br>

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" cols="40" placeholder="Enter your

message"></textarea><br>

<input type="submit" value="Send">

</form>.

Radio Button: A radio button in HTML is an input element that enables the user to choose a single

option from a set of associated options. It is defined by the <input type="radio"> tag, which includes

a name attribute to designate the group name and a value attribute to specify the option value. It is

important to note that only one radio button in a group can be selected concurrently. For example

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

The code presented above entails the creation of three radio buttons labeled as "gender", each

possessing distinct values namely "male", "female", and "other". It is crucial to note that only a single

option can be selected by the user at any given time. To establish a link between the text and its

corresponding radio button, the <label> tag is employed. The implementation of radio buttons proves

41
advantageous when the objective is to constrain the user to selecting a sole option from a

predetermined set of alternatives.

Checkboxes Input Tag: A check box input tag in HTML refers to an input element that permits the

user to choose or unchosen one or multiple options from a given list. This specific input element is

characterized by the <input type="checkbox"> tag, which includes a name attribute to specify the

input's name, as well as a value attribute to determine the option's value. Furthermore, a check box

can possess a checked attribute to denote its default selection status.

For example: <input type="checkbox" id="agree" name="agree" checked>

<label for="agree"> I agree to the terms and conditions</label>.

This code snippet generates a checkbox element with the identifier and name of "agree", accompanied

by a corresponding label. The inclusion of the checked attribute denotes that the checkbox will be

pre-selected. The checkbox's value is either "on" or the value specified in the value attribute, if

provided. Notably, the checkbox's value will only be transmitted to the server if it is checked.

A password input tag: A password input tag in HTML is a way to create a text field that allows the

user to enter a password securely. The text is masked with symbols, such as dots or asterisks, so that

it cannot be read by others. The password input tag is created by using the `<input>` tag with the

`type` attribute set to `"password"`. For example: html <input type="password" id="pwd"

name="pwd">, this code will create a password field with the id and name of "pwd". The user can

type any text value into this field, but it will be hidden from view. The value of the password field

will be submitted to the server along with the name attribute when the form is submitted.

Some of the attributes that can be used to customize the password input tag are:

Maxlength: This attribute specifies the maximum number of characters that the user can enter into

the password field. It must be a positive integer value. If the user enters more characters than the

maxlength, the input will be invalid.

42
Minlength: This attribute specifies the minimum number of characters that the user must enter into

the password field. It must be a non-negative integer value that is smaller than or equal to the

maxlength. If the user enters fewer characters than the minlength, the input will be invalid.

Pattern: This attribute specifies a regular expression that the value of the password field must match

to be valid. The regular expression must follow the JavaScript syntax. For example, `pattern="[A-Za-

z0-9]{8,}"` means that the password must contain at least 8 alphanumeric characters.

Required: This attribute indicates that the user must enter a value into the password field before

submitting the form. If the password field is empty, the input will be invalid.

Disabled: This attribute indicates that the user cannot interact with the password field. The password

field will be grayed out and its value will not be submitted to the server.

Select Menu HTML Tags: A select menu tag in HTML is a way to create a drop-down list that

allows the user to choose one or more options from a set of predefined values. It is created by using

the <select> tag, which contains one or more <option> tags as its children. Each <option> tag

represents an option in the list, and has a value attribute that specifies the data to be submitted to the

server when the option is selected. Optionally, you can also use the <optgroup> tag to group related

options together under a label. Here is an example of a select menu tag in HTML:

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</select>

The above code will create a drop-down list with four options: Volvo, Saab, Mercedes, and Audi. The

user can select one of them, and the value of the selected option will be sent to the server as the value

43
of the name attribute, which is “cars” in this case. The label tag is used to associate the drop-down

list with a descriptive text for accessibility purposes. The id attribute is used to identify the drop-down

list in the document.

Some of the attributes that you can use to customize the select menu tag are:

Multiple: This Boolean attribute allows the user to select more than one option at a time. When this

attribute is present, the drop-down list will be displayed as a scrolling list box instead of a single-line

menu.

Size: This attribute specifies the number of visible options in the drop-down list. If the multiple

attributes are also present, this attribute determines the height of the list box. If the multiple attributes

are not present, this attribute has no effect unless the value is 1, in which case the drop-down list will

be displayed as a text box.

Required: This Boolean attribute indicates that the user must select an option before submitting the

form. If this attribute is present, the browser will display a validation message if the user tries to

submit the form without selecting an option.

Disabled: This Boolean attribute indicates that the user cannot interact with the drop-down list. The

drop-down list will be grayed out and its value will not be submitted to the server.

Difference Between Text field and Password tags in Html

A text field and a password field are both types of input elements in HTML that allow the user to

enter text data. Some of the main differences are:

 A text field shows the user’s input as plain text, while a password field masks the user’s input

with a symbol, usually a dot or an asterisk. This is to prevent other people from seeing the

user’s password or other sensitive information.

 A text field allows the user to copy and paste the input value, while a password field does not.

This is to prevent the user from accidentally exposing their password or other sensitive

information to other applications or websites.

44
  A text field can have different types of validation, such as email, number, url, etc., while a

password field only accepts text values. This is to allow the user to enter different kinds of data

in a text field, depending on the purpose of the input.

 A text field can have a default value, while a password field cannot. This is to avoid displaying

the user’s password or other sensitive information by default.

Definition of Cascading Style Sheet (CSS): CSS (Cascading Style Sheets) is a stylesheet language

that is widely used in web development for the purpose of defining the presentation and visual

appearance of HTML or XML documents. It serves the purpose of separating the structural elements

(HTML) from the presentational aspects (CSS) of a web page, allowing web designers to apply a

variety of styles, including but not limited to colors, fonts, and spacing, to HTML elements. The

utilization of CSS empowers developers to create visually appealing and consistently-designed

layouts across a multitude of web pages, thus enriching the overall user experience and streamlining

the maintenance and updating process of website designs. As an indispensable tool in web

development, CSS offers the means to exert control over the positioning, styling, and overall

presentation of elements within a website, thereby contributing to the creation of professional and

cohesive web interfaces.

CSS works by applying rules to HTML elements that match certain selectors, such as element names,

classes, or ids. Each rule consists of one or more declarations, which specify the properties and values

that affect the selected elements. For example, the following CSS rule sets the text color of all

paragraphs to red:

css

p{
45
 color: red;

The whole structure is called a ruleset, (The term ruleset is often referred to as just rule.) Note the

names of the individual parts:

Selector: This is the HTML element name at the start of the ruleset. It defines the element(s) to be

styled (in this example, <p> elements). To style a different element, change the selector.

Declaration: This is a single rule like color: red; It specifies which of the element's properties you

want to style.

Properties: These are various methods of styling an HTML element. (In this particular instance, color

is a property of the <p> elements.) In CSS, one selects the properties to be affected within a rule.

Property value: Situated to the right of the property—after the colon—lies the property value. This

determines one particular appearance among numerous possibilities for a given property. (For

instance, there exist various color values other than red). In addition to the selector, it is necessary for

each ruleset to be enclosed in curly braces ({}). In each declaration, a colon (:) must be employed to

separate the property from its value or values. Furthermore, within each ruleset, a semicolon (;) should

be used to separate each declaration from the subsequent one.

There are various methods available for incorporating CSS into HTML documents, including inline

styles, internal style sheets, external style sheets, or imported style sheets. The hierarchical order and

placement of the CSS sources can have an impact on how the styles are implemented, as per the

cascade and specificity rules. To incorporate CSS into HTML, it is necessary to establish a linkage

between the style sheet and the HTML document by employing one of the following methods.:

- Inline styles: Inline style in CSS refers to the technique of directly applying CSS styling to an

HTML element using the style attribute. This method allows for the application of a distinct style to

46
an individual HTML element, while avoiding any impact on other elements or the need for a separate

CSS file. For instance, <p style="color: red; font-size: 20px;">This is a paragraph with inline

style.</p>

- Internal style sheets: An internal style in CSS refers to a technique employed to apply styles

exclusively to a specific HTML document. This is achieved by incorporating a <style> element within

the <head> section. By utilizing this approach, it becomes feasible to customize the visual properties

of the various elements present on said page, including but not limited to color, font, size, alignment,

and more. To illustrate, an internal style could be employed to render all headings in blue and all

paragraphs in red. Nonetheless, it is important to acknowledge that internal styles suffer from certain

drawbacks, namely increased file size, reduced code reusability, and the inherent limitations with

regard to style management across multiple pages. The ensuing example provides a straightforward

demonstration of an internal style implemented via CSS:

<!DOCTYPE html>
<html>
<head>
<style>
/* Internal CSS */
h1 {
color: blue;
text-align: center;
}
p{
color: red;
text-align: center;
}
</style>
</head>
<body>

47
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- External style sheets: An external style in CSS is a method of applying styles to HTML elements

through the use of a distinct file with a .css extension. External styles prove advantageous in

establishing consistent and reusable styles across numerous web pages. To establish a linkage between

an external style sheet and an HTML document, it is necessary to utilize the <link> element within

the <head> section of the HTML file. Here is an example of how to link an external style sheet to an

HTML document:

html

<head>

<link rel="stylesheet" href="style.css">

</head>

Selecting by classes: The utilization of class selection in CSS involves the application of style rules

to HTML elements that possess a specific class attribute. The purpose of a class attribute is to group

elements that share common characteristics or functionality. For example, a class can be used to

centrally align all headings on a webpage or modify the color of all the links. To select elements by

class in CSS, one must utilize a period (.) followed by the class name. For instance, .center selects all

elements that have class="center". Moreover, it is possible to combine the class selector with an

element selector to achieve a higher level of specificity. For instance, p.center selects only the <p>

elements that have class="center". The following example illustrates the practical implementation of

class selection in CSS:

/* This will select all <p> elements with class="center" */

p.center {

48
 text-align: center;
color: blue;
}
/* This will select all elements with class="large" */
.large {
font-size: 24px;
}

What is Selecting by Identity: Selecting by identity in CSS involves utilizing the id attribute of an

HTML element to apply a distinct style to said element. The id attribute is exclusive to each page,

thereby necessitating the id selector to choose a single element. To select an element with a particular

id, simply prepend the element's id with a hash (#) character. For instance, #demo would successfully

select the element with id="demo". For example, the following color add color yellow to the first

name.

<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the #id selector</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>

What is Box Model: The CSS box model is a fundamental concept that elucidates how the

dimensions and structure of an element are influenced by its content, padding, border, and margin

attributes. This model can be represented as a box encompassing each HTML element, wherein

49
individual layers correspond to specific properties. To illustrate this concept, consider the following

exemplar of the box model: <!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: lightgrey;

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:

borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px

green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

mollit anim id est laborum.</div>

</body>

</html>

50
The box model diagram shows the following parts of the box:

Content: This is the innermost part of the box where the actual content of the element, such as text

or images, is displayed. The width and height properties determine the size of this area.

Padding: This refers to the space between the content and the border of the element. The padding

property allows for setting the size of this space individually for each side (top, right, bottom, left) or

for all sides simultaneously. The padding is transparent and does not affect the background color or

image of the element.

Border: This is the line that surrounds the padding and content of the element. The border property

allows for specifying the width, style, and color of this line for each side or for all sides at once. The

border is considered part of the element's background and may have a different color or image

compared to the content or padding areas.

Margin: This refers to the space outside the border of the element. The margin property allows for

setting the size of this space individually for each side or for all sides simultaneously. The margin is

transparent and does not affect the background color or image of the element or its parent element. It

is used to create space between the element and other elements on the page.

Coloring in CSS: Utilizing color in CSS serves as a means to enhance the visual appeal of web pages.

There exist different methods to specify colors in CSS, including:

Color names: One can employ any of the 140 predefined color names supported universally by

browsers, such as red, blue, green, and others.

Hexadecimal values: It is possible to utilize a six-digit hexadecimal value in the format #rrggbb,

where rr, gg, and bb represent the red, green, and blue components of the color, respectively. Each

component's range is from 00 to ff (0 to 255 in decimal). For instance, #ff0000 represents red, #00ff00

represents green, and #0000ff represents blue.

51
RGB values: By using the rgb() function, one can specify a color as a combination of red, green, and

blue intensities. Each intensity level ranges from 0 to 255. For example, rgb(255, 0, 0) represents red,

rgb(0, 255, 0) represents green, and rgb(0, 0, 255) represents blue.

RGBA values: The rgba() function allows for the specification of a color as a combination of red,

green, blue, and alpha (opacity) values. The red, green, and blue values range from 0 to 255, while

the alpha value ranges from 0 to 1. For instance, rgba(255, 0, 0, 0.5) represents a semi-transparent

red, rgba(0, 255, 0, 1) represents a fully opaque green, and rgba(0, 0, 255, 0) represents a fully

transparent blue. CSS provides the ability to apply color to various elements and properties, such as

text, background, border, shadow, and others.

There are various methods to specify colors in CSS, including the utilization of color names,

hexadecimal values, RGB values, HSL values, and other alternatives. The syntax for implementing

color relies on the chosen property for applying the color. For instance, if there is a desire to modify

the text color of a paragraph, the color property can be employed in the following manner:

p{

color: blue; /* using a color name */

color: #0000ff; /* using a hexadecimal value */

color: rgb(0, 0, 255); /* using an RGB value */

color: hsl(240, 100%, 50%); /* using an HSL value */

If one desires to alter the background color of an element, the background-color property can be

employed in the following manner:

div {

background-color: green; /* using a color name */

background-color: #00ff00; /* using a hexadecimal value */

52
 background-color: rgb(0, 255, 0); /* using an RGB value */

background-color: hsl(120, 100%, 50%); /* using an HSL value */

Floating in CSS: The CSS float property is utilized to specify the desired floating behavior of an

element. This property can be assigned one of the following values:

left: This value causes the element to float towards the left of its container.

right: This value causes the element to float towards the right of its container.

none: This value indicates that the element should not float, and instead be displayed in its original

position within the text. This value is the default setting.

- inherit: This value allows the element to inherit the float value from its parent element.

In its most basic usage, the float property is employed to wrap text around images. To illustrate, the

following code snippet demonstrates the use of the float property to make an image float towards the

right within a textual context:

img {

float: right;

What is Positioning in CSS: Positioning in CSS is a fundamental aspect of web page design as it

allows for the precise placement and arrangement of elements. The position property plays a crucial

role in determining the type of positioning method employed for an element. This can range from

static positioning, which is the default behavior, to more dynamic options such as relative, fixed,

absolute, or sticky positioning. Each of these positioning values has distinct implications for how an

element interacts with the normal flow of the document, the viewport, as well as its surrounding parent

and sibling elements. To further refine the element's position, the top, right, bottom, and left properties

are leveraged to adjust its placement along both the vertical and horizontal axes.

53
Additionally, the z-index property serves as a means to modify the stacking order of the element

relative to other positioned elements. This enables designers to control the layering and visual

hierarchy of elements on the web page, enhancing the overall user experience. For instance the

following code will produce the following output.

/* This element is positioned according to the normal flow of the document */

div.static {
position: static;
border: 3px solid #73AD21;
}
/* This element is positioned relative to its normal position */
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
/* This element is positioned relative to the viewport and stays in the same place even if the page is
scrolled */
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

/* This element is positioned relative to its closest positioned ancestor or the initial containing block
*/
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
/* This element is positioned according to the normal flow of the document, and then offset relative
to its nearest scrolling ancestor and containing block */
div.sticky {
position: sticky;
top: 50px;
border: 3px solid #73AD21;
}

Definition of Border in CSS: In the realm of CSS, the border property serves the purpose of
establishing a defined border surrounding an element. This property grants the ability to set the desired

54
style, color, and width of the border. It is applicable to a multitude of HTML elements, encompassing
a <div>, <p>, <table>, and even an <img>. The border property can be specified through the
utilization of shorthand syntax, wherein the style, width, and color values are consolidated within a
singular declaration. An exemplification of this can be observed in the following example:

.example-border {
border: 1px solid red;
}
In this instance, the .example-border class is defined, and the border property is established to a solid
red border with a width of 1 pixel. Alternatively, it is possible to indicate the individual constituents
of the border property independently. Here is an illustration:
.example-border {
border-style: dashed;
border-width: 2px;
border-color: blue;
}
In this particular case, the border-style property is employed to establish a dashed border style, the
border-width property determines a width of 2 pixels, and the border-color property designates the
color as blue. It is also possible to specify alternative border styles such as dotted, double, groove,
ridge, inset, outset, and more. Additionally, you can use the border-radius property to round the
corners of the border. Here's an example that combines different border properties others. Moreover,
the border-radius property allows for the rounding of border corners. An illustrative example that
amalgamates various border properties is provided below:
.example-border {
border-style: dashed;
border-width: 2px;
border-color: blue;
border-radius: 5px;
}
The font property is utilized to determine the visual presentation of text on a webpage. It enables the
specification of different attributes of the font, including the typeface, size, weight, style, and
additional characteristics. The font property serves as a concise mechanism that consolidates
numerous font-related properties into a singular declaration.
55
The syntax for the font property is as follows:
selector {
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}
Let's break down each component of the font property:
Font Style: This component determines the style of the font, such as normal, italic, or oblique. It is
represented by the font-style property. The available options include:
 normal: This displays the text in a regular style.
 italic: This displays the text in an italicized style.
 oblique: This displays the text in an oblique style, which is similar to italic but with a different
slant angle.

Font Variant: This component defines the variant of the font, such as normal or small caps. It is
indicated by the font-variant property. The possible choices are:
 normal: This displays the text in a regular variant.
 small-caps: This displays the text in small capital letters.

Font Weight: This component determines the thickness (weight) of the font, such as normal, bold, or
a specific numeric value. It is represented by the font-weight property. The available options are:
 normal: This displays the text with a regular weight.
 bold: This displays the text in a bold weight.
 Numeric values: Specific numeric values, such as 100, 200, 300, ..., 900, can also be used to
define different levels of font thickness.

Font Size: This component determines the size of the font. It is indicated by the font-size property.
The available choices are:
Absolute size values: These values can be specified using units like pixels (px), points (pt), em, rem,
etc.
Relative size values: These values can be specified using terms like larger, smaller, xx-small, x-small,
small, medium, large, x-large, xx-large, etc.

Line Height: This component determines the height of each line of text. It is represented by the line-
height property. The available options include:

56
Normal: This displays the text with the default line height.
Numeric values: Specific numeric values can be used to define a particular line height.
Relative values: Relative values like normal, inherit, initial, etc., can also be utilized.

Font Family: This component determines the font family to be used for the text. It is represented by
the font-family property. Multiple font families can be specified, separated by commas, as a fallback
option. The browser will attempt to apply the first font in the list, moving on to the next if it is
unavailable, until a suitable font is found.
Now, let us examine an example that illustrates the usage of the font property:
p{
font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}
In this example:
 font-style is set to italic.
 font-variant is set to small-caps.
 font-weight is set to bold.
 font-size is set to 16px.
 line-height is set to 1.5.
font-family is set to Arial, followed by a fallback of generic sans-serif fonts.
This will result in the paragraphs (<p>) on the web page being displayed in italicized style, with small
capitals, in bold weight, with a font size of 16 pixels, a line height of 1.5 times the font size, and using
the font family "Arial" if available. If Arial is not available, the browser will use a generic sans-serif
font as a fallback.

Text Alignment: In CSS (Cascading Style Sheets), the concept of alignment pertains to the
positioning of elements within their containing elements, as well as the alignment of text within a text
block. CSS offers a variety of properties that can be utilized to control alignment.
Let us delve into some commonly employed alignment properties in CSS, accompanied by illustrative
examples:
text-align: This particular property is used to align the horizontal position of text within its container.
It can be applied to both block-level elements and inline elements. The potential values are as follows:
i. left: Aligns the text to the left.
ii. right: Aligns the text to the right.

57
iii. center: Horizontally centers the text.
iv. justify: Adjusts the spacing between words in a line in order to justify both the left and right
edges.
p{
text-align: center;
}
In this example, the text within <p> (paragraph) elements will be centered horizontally.

Vertical Alignment: This property serves the purpose of vertically aligning inline or inline-block
elements within their container elements. It can also be employed to align table cells. The available
values are:
 baseline: Aligns the element's baseline with the baseline of its parent.
 top: Aligns the top of the element with the top of the tallest element on the line.
 middle: Aligns the middle of the element with the middle of the parent element.
 bottom: Aligns the bottom of the element with the bottom of the parent element.
 text-top: Aligns the top of the element with the top of the parent's font.
 text-bottom: Aligns the bottom of the element with the bottom of the parent's font.
img {
vertical-align: middle;
}
In this example, the images will be vertically aligned to the middle within their containing elements.

justify-content: This property is employed to align flex items along the main axis of a flex container.
It is applicable when utilizing flexbox for layout purposes. The potential values include: flex-start:
Aligns items to the start of the flex container.
 flex-end: Aligns items to the end of the flex container.
 center: Centers items along the main axis of the flex container.
 space-between: Distributes items evenly along the main axis, with the first item at the start and
the last item at the end.
 space-around: Distributes items evenly along the main axis, with equal space around them.
 space-evenly: Distributes items evenly along the main axis, with equal space between them.
Example:
css

58
Copy
.container {
display: flex;
justify-content: center;
}
In this example, the flex items within the container will be horizontally centered.

align-items: This property serves the purpose of vertically aligning flex items within a flex container,
specifically in the context of flexbox layout. The available values for this property are:
 flex-start: Aligns items to the start of the flex container.
 flex-end: Aligns items to the end of the flex container.
 center: Centers items vertically within the flex container.
 baseline: Aligns items such that their baselines align.
 stretch: Stretches items to fill the flex container vertically.
Example:
css
Copy
.container {
display: flex;
align-items: center;
}
In this example, the flex items within the container will be vertically centered.
These are just a few examples of alignment properties in CSS. There are other alignment properties
available, such as float, position, and margin properties, which can also influence the alignment of
elements on a web page, depending on the specific layout requirements.

59