WEB PROGRAMMING

- By Ms. Kajal Singh

 Unit 1
Internet and the World Wide Web: What is Internet?
Introduction to internet and its applications, E-mail,
telnet, FTP, e-commerce, videoconferencing, e-
business. Internet service providers, domain name
server, internet address, World Wide Web (WWW):
World Wide Web and its evolution, uniform resource
locator (URL), browsers–internet explorer, Netscape
navigator, opera, Firefox, chrome, Mozilla. search
engine, web saver –apache, IIS, proxy server, HTTP
protocol
HTML5: Introduction, Why HTML5? Formatting text
by using tags, using lists and backgrounds, Creating
hyperlinks and anchors. Style sheets, CSS formatting
text using style sheets, formatting paragraphs using
style sheets.
 Unit 1
Chapter 1
Internet and the World Wide Web: What is Internet? Introduction to internet
and its applications, E-mail, telnet, FTP, e-commerce, videoconferencing, e-
business. Internet service providers, domain name server, internet address,
World Wide Web (WWW): World Wide Web and its evolution, uniform
resource locator (URL), browsers–internet explorer, Netscape navigator, opera,
Firefox, chrome, Mozilla. search engine, web saver –apache, IIS, proxy server,
HTTP protocol
 What is Internet?
 It is a global network connecting millions of computers.
 Each Internet computer, called a host, is independent.
 The Internet, sometimes called ‘the Net’ is a worldwide system of computer networks –
a network of networks in which users at anyone computer can, if they have permission,
get information from any other computer.
 It was conceived by the Advanced Research Projects Agency (ARPA) of the U.S.
government in 1969 and was first known as the ARPANet.
 The original aim was to create a network that would allow users of a research computer
at one university to talk to research computers at other universities.
 A side benefit of ARPANet's design was that, because messages could be routed or
rerouted in more than one direction, the network could continue to function even if parts
of it were destroyed in the event of a military attack or other disaster.
 Client and Server
 Client/server is a program relationship in which one program (the client) requests a
service or resource from another program (the server). 
Client and Server (Contd)
 Internet (Contd)
 Who pays for the internet?
 No one central agency exists that charges individual Internet users. Rather, individuals
and institutions who use the internet pay a local or regional Internet service provider
for their share of services.
 In turn, those smaller Internet service provider might purchase services from an even
larger network.
 Basically , everyone who uses the Internet in some way pays for part of it.
 What makes the internet work?
 The unique thing about the internet is that it allows many different computers to connect
and talk to each other.
 This is possible because of a set of standards known as protocols, that govern the
transmission of data over the network: TCP/IP(Transmission Control Protocol/ Internet
Protocol).
 Applications of the Internet
1. E-Mail
2. Telnet
3. File Transfer Protocol
4. E-Commerce
5. Video Conferencing
6. E- Business
Applications of the Internet - E-Mail
 E-Mail
 Electronic mail, (most commonly called email or e-mail since around 1993), is a
method of exchanging digital messages from an author to one or more recipients.
Email operates across the Internet or other computer networks.
 E-mail is probably the most popular and widely used Internet function.
 E-mail is an asynchronous form of communication, meaning that the person whom
you want to read your message doesn’t have to be available at the precise moment you
send your message.
 Some early email systems required the author and the recipient to both be online at the
same time, in common with instant messaging.
 Today's email systems are based on a store-and-forward model. Email servers accept,
forward, deliver, and store messages.
 Neither the users nor their computers are required to be online simultaneously; they need
to connect only briefly, typically to a mail server, for as long as it takes to send or
receive messages.
 E-Mail
 An email message consists of three components, the message envelope, the message
header and the message body.
 Header contains information about who sent the message, the recipient(s) and the route.
 Header also usually contains descriptive information, such as a subject header field and
a message submission date/time stamp.
 Email message body contains text as well as multimedia messages.
 Network based emails are exchanged over the internet using the SMTP (Simple Mail
Transfer protocol).
 In the process of transporting email messages between systems, SMTP communicates
delivery parameters using a message envelope separate from the message (header and
body) itself.
 Email addresses (both for senders and recipients) are two strings separated by the
character "@" (the "at sign"): such as user@domain
 The right-hand part describes the domain name involved, and the left-hand part refers to
the user who belongs to that domain.
E-Mail
 Telnet
 It is a Terminal Emulation program for TCP/IP networks such as the Internet.
 The telnet program runs on your computer and connects your pc to a server on the
network.
 You can enter commands through the telnet program and they will be executed as if
you are entering them directly on the server console. This enables you to control the
server and communicate with other servers on the network.
 Through Telnet, an administrator or another user can access someone else's computer
remotely.
 To start a Telnet session, you must log in to a server by entering a valid username and
password.
 Telnet is a common way to remotely control web servers.
  On the Web, HTTP and FTP protocols allow you to request specific files from remote
computers, but not to actually be logged on as a user of that computer. With Telnet, you
log on as a regular user with whatever privileges you may have been granted to the
specific application and data on that computer.
 Telnet
 Few applications of telnet include the ‘putty’ TCP client which can access a linux server
using windows operating system.
 Telnet is the protocol used to establish a login session on a remote computer on the
network.
 While many computers on the internet require users to have authorization, others are
open to the public and can be logged onto with telnet.
 Telnet is most likely to be used by program developers and anyone who has a need to
use specific applications or data located at a particular host computer.
 Basic Telnet Commands:
 Open: Used  to establish a Telnet connection to a host.
 Close: Used to close an existing Telnet connection.
 Quit: Used to exit from Telnet.
 Telnet
1. Telnet is a network protocol used on the Internet or local area networks to provide a
bidirectional interactive text-oriented communication facility using a virtual terminal
connection.
2. A Telnet command request looks like this (the computer name is made-up):
telnet the.libraryat.whatis.edu
 The result of this request would be an invitation to log on with a user id and a
prompt for a password. If accepted, you would be logged on like any user
who used this computer.
 File Transfer Protocol(FTP)
 File transfer protocol is a simple and standard network protocol that transfers a file
from one host to the other over a TCP network.
 FTP is built on a client-server architecture and uses separate control and data
connections between the client and the server. 
 FTP users may authenticate themselves using a clear-text sign-in protocol, normally in
the form of a username and password, but can connect anonymously if the server is
configured to allow it.
 To use your web browser to connect to an FTP site such as ftp.empire.gov, where you
normally enter a URL, enter
 ftp://[email protected]/
 Command-line FTP
 ftp ftp.empire.gov
● Like Simple Mail Transfer Protocol(SMTP), which transfers e-mail, FTP is an
application protocol that uses the Internet’s TCP/IP protocols.
 File Transfer Protocol(FTP)
 It’s also commonly used to download programs and other files to your computer from
other servers.
 Using FTP, you can also update(delete, rename, move and copy) files at a server.
 You need to logon to an FTP server. However, publicly available files are easily accessed
using anonymous FTP.
 To do FTP, a user invokes one of the two commands:
● Get: The command for transferring a file from another server to your own computer.
● Put: The command for moving a file from your computer to another server.
 E-Commerce
 Electronic commerce or e-commerce can be defined as use of electronic communications,
particularly via the internet, to facilitate the purchase and sale of goods and services or
conducting any transaction involving the transfer of ownership or rights to use goods or
services through a computer-mediated network .
 E-commerce includes all forms of electronic trading including electronic data
interchange(EDI), electronic banking, electronic mail and other online services.
 E-commerce is the use of electronic communications and digital information processing
technology in business transactions to create, transform and redefine relationships for value
creation between or among organizations, and between organizations and individuals.
 These business transactions occur either
I. business-to-business,
II. business-to-consumer,
III. consumer-to-consumer
IV. consumer-to-business.
E-Commerce
 Advantages of E-Commerce
 Cost Effective
● The entire financial transactions will eventually become electronic, so sooner conversion
is going to be lower on cost. It makes every transaction through e-commerce payment a
lot cheaper.
 Better Productivity
● Productivity here means productivity for both companies and customers. People like to
find answers online because it is faster and cheaper, and it costs a lot cheaper expense as
well for the company.
 Quick Comparison
● E-commerce also enables you to compare price among several providers. In the end, it
leads you to smart shopping. People can save more money while they shop.
 Economy Benefit
● E-commerce allows us to make transaction without any needs on stores, infrastructure
investment, and other common things we find. Companies only need well built website
and customer service.
 Disadvantages of E-Commerce
 Security
● Customers need to be confident and trust the provider of payment method. Sometimes,
we can be tricked. Examine on integrity and reputation of the web stores before you
decide to buy.
 Scalability of System
● A company definitely needs a well developed website to support numbers of customers
at a time.
 Integrity on Data and System
● Customers need secure access all the time. In addition to it, protection to data is also
essential.
 Products People
● People who prefer and focus on product will not buy online. They will want to feel, try,
and touch the product.
 Customer Service and Relation Problem
● They sometimes forget how essential to build loyal relationship with customers. Without
loyalty from customers, they will not survive the business.

Video Conferencing
Video Conference, also called as video teleconference, is a set of interactive
telecommunication technologies which allow two or more locations to interact via two-
way video and audio transmission simultaneously.
 It has also been called 'visual collaboration' and is a type of groupware.
 Video conferencing differs from videophone calls in that it's designed to serve a
conference or multiple locations rather than individuals.
 It is an intermediate form of videotelephony, first used commercially in Germany during
the late-1930s and later in the United States during the early 1970s as part of
Picturephone technology.
 The core technology used in a videoconferencing system is the compression of audio
and video streams in real time.
 The hardware or software that performs compression is called a codec (coder/decoder).
 Components for Video Conferencing
 The components required for a video conferencing system include:
 Video Input: video camera or webcam
 Video Output: computer monitor, television or projector
 Audio Input: microphones, CD/DVD Player, Cassette player, etc.
 Audio Output: usually loudspeakers associated with the display device or
telephone.
 Data Transfer: analog or digital telephone network, LAN or Internet.
 Advantages of Video Conferencing
✔ No Time Constraint
Video conferencing can be conducted at any time of the day. Time differences between
countries do not matter when people use this method of communication because they do not
actually need to travel to attend meetings.
✔ Saves Time and Money
Transaction of any business requires frequent travel, to facilitate its growth and
diversification. That translates to travel and associated costs like hotel accommodation and
food expenses. A video conference will keep executives in the office, rather than sending
them halfway across the country for conducting business.
✔ Sharing Information is Easy
This technology enables improvisation of operations and services of remote outlets. As it
can also be used to transmit files and documents, it is possible to provide real-time
information, that can help in solving problems. Also, decisions can be made in the least
possible time. The ability to share, coordinate and evaluate digital data from anywhere in
the world allows people to conduct simultaneous communication and collaboration on
time-sensitive projects.
 Advantages of Video Conferencing
✔ Useful for Medical Professionals
Video conferencing makes it easier to access experts in a medical environment. Doctors,
scientists, and researchers can bring together their findings and studies, and accelerate
the process of providing timely assistance. This type of collaboration can not only help
save lives, but can also help many people who can't travel long distance to access health
care.
✔ Facilitates Long-distance Programs
Educational institutions, mainly long-distance education programs and instructional
courses, have reaped enormous benefits from video conferencing. Professionals and
students are able to access lectures, study material, group discussions, and even one-to-
one talk with the instructor. It has taken education to far-flung corners of the world.
 Disadvantages of Video Conferencing
✘ Technical Problems
The major disadvantages are the technical difficulties associated with smooth
transmissions that could result from software, hardware or network failure. Remote
connections are sometimes known to be hampered by environmental changes. On some
occasions, the absence of technical support personnel creates difficulty for participants
who are unfamiliar with the videoconferencing technological concepts.
✘ Lack of Personal Interaction
Another major drawback is the lack of personal interaction, that sets the tone for many
business meetings in highly cultural societies. A handshake and an eye contact are
essential aspects of many business meetings.
✘ High Cost of Setup
Setting up video conferencing in an office can be a bit expensive for small-sized
companies. Simple features can fit into the budget, but if advanced features are required,
then a substantial amount of expenditure must be done.
 E-Business
 Electronic business, also called as ‘eBusiness’ is an application of information and
communication technologies (ICT) in support of all the activities of business.
 E-business (electronic business) is the conducting of business on the Internet, not only
buying and selling but also servicing customers and collaborating with business partners,
conducting e-learning and conducting electronic transactions within an organization.
 It broadly refers to conducting business over the Internet (email and web) by
communicating and perhaps transacting (buying and selling) with customers, suppliers,
and business partners.
 E-commerce covers outward-facing processes that touch customers, suppliers and
external partners, including sales, marketing, order taking, delivery, customer service,
purchasing of raw materials and supplies for production.
 E-business includes e-commerce but also covers internal processes such as
production, inventory management, product development, risk management, finance,
knowledge management and human resources.
E-Business
 Types of E-Business
Various types of business are as follows:
 business-to-business (B2B)
● The business-to-business, or B2B, model involves companies using the Internet to
conduct transactions with one other.
 business-to-consumer (B2C)
● The business-to-consumer, or B2C, model of e-business sells products directly to retail
consumers online. Amazon.com is an example of a B2C model. 
 consumer-to-business (C2B)
● Consumer-to-business, or C2B, is a unique e-business model in which consumers create
value and demand for products. Reverse auctions are a common characteristic of C2B
models, in which consumers drive transactions and offer their own prices for products.
The airline ticket website Priceline.com is an example of a C2B e-business model. The
website allows customers to bid for tickets and offer their own prices. 
 Types of E-Business
 consumer-to-consumer (C2C)
● Consumer-to-consumer, or C2C, e-business models enable consumers to behave as
buyers and sellers in third-party-facilitated online market places. Examples of C2C
websites include eBay and PayPal.

 E-commerce involves the mandatory use of internet.

 E-business can involve the use of internet, intranet or extranet.

 Example of E-commerce- Buying of pen drive from Amazon.com is considered

Ecommerce.
 Example of E-business- Using of Internet by Dell, Amazon for maintaining business
processes like Online customer support, email marketing.
 Internet Service Providers
 An Internet Service Provider also known as Internet Access Provider, is a company
that offers its customers access to the internet.
 The ISP connects to its customers using a data transmission technology appropriate for
delivering Internet Protocol paradigm such as dial up, cable modem, wireless or
dedicated high speed interconnects.
 ISP’s may provide Internet e-mail accounts to users which allow them to communicate
with one another by sending and receiving electronic messages through their ISP’s
servers.
 Virtual ISPs
● A virtual ISP (VISP) is an operation that purchases services from another ISP,
sometimes called a wholesale ISP in this context.
 Free ISPs
● Free ISPs are Internet service providers that provide service free of charge. Many free
ISPs display advertisements while the user is connected; like commercial television, in a
sense they are selling the user's attention to the advertiser. 
 Internet address
 An internet address uniquely identifies a node on the internet.
 Internet address may also refer to the name of the IP of a Website(URL).
 The term internet address also represents someone’s e-mail address.
 A unique numeric identifier, divided into four octets, assigned to machines on the
internet or an intranet. This 32-bit numerical address is used so machines can identify
and locate each other for the purpose of sending and receiving data.
Example: [email protected]
 The common fictitious domain name, www.example.com, is comprised of three
essential parts:
● .com - This is the top-level domain.
● .example. - This is a sub-domain.
● www. - This is a sub-domain prefix for the World Wide Web. 
 Internet address
 An internet address or a domain name read from right to left helps to determine
information about the source of the address.
 An address like [email protected] doesn’t tell much about the person but it can be
concluded that the sender is affiliated with an educational institution because of suffix
‘edu’. The right-most segment adhere to naming conventions such as:
● EDU Educational Sites
● COM Commercial sites
● GOV Government sites
● NET Network administrative organizations
● MIL Military sites
● ORG Organizations (Non profit organizations)
 Domain Name Server
 The Domain Name System(DNS) servers distribute the job of mapping domain
names to IP addresses among servers allocated to each domain.
 Short for Domain Name System (or Service or Server), an Internet service that translates
domain names into IP addresses.
 Because domain names are alphabetic, they are easier to remember.
 The Internet however, is really based on IP addresses.
 Every time you use a domain name, therefore, a DNS service must translate the name
into the corresponding IP address.
 For example, the domain name www.example.com might translate to 192.28.211.32.
 The DNS system is, in fact, its own network. If primary DNS server doesn't know how
to translate a particular domain name, it asks another one, and so on, until the correct IP
address is returned.
Domain Name Server
 Domain Name Server
 Domain names are used to identify one or more IP addresses.
 For example, the domain name microsoft.com represents about a dozen IP addresses.
 Domain names are used in URLs to identify particular Web pages.
 For example, in the URL http://www.pcwebopedia.com/index.html, the domain name is
pcwebopedia.com.
 Every domain name has a suffix that indicates which top level domain (TLD) it belongs to.
There are only a limited number of such domains.
 For example:
gov - Government agencies com - commercial business
edu - Educational institutions ca - Canada
org - Organizations (nonprofit) th - Thailand
mil - Military in- India
net - Network organizations
 Because the Internet is based on IP addresses, not domain names, every Web server
requires a Domain Name System (DNS) server to translate domain names into IP addresses.
 World Wide Web (WWW) and its evolution
 Most widely used part of internet is the World Wide Web. Its outstanding feature is
hypertext, a method of cross-referencing.
 A highlighted word or phrase in one document acts as a pointer to another document that
amplifies or relates to the first document.
 WWW comprises of Web servers which stores web sites which are made up of web
pages.
 The primary function of a web server is to deliver web pages on the request to clients.
 Web pages are designed with the help of HTML (Hypertext Markup Language) which
comprises of images, video, text, sounds and other multimedia and navigate between
them via hyperlinks.
 Web sites can be accessed on the computer with the help of browsers.
 World Wide Web (WWW) Vs Internet
 Internet
● The Internet is a massive network of networks, a networking infrastructure. It connects
millions of computers together globally, forming a network in which any computer can
communicate with any other computer as long as they are both connected to the Internet.
Information that travels over the Internet does so via a variety of languages known
as protocols.
 World Wide Web
● The World Wide Web, or simply Web, is a way of accessing information over the
medium of the Internet. It is an information-sharing model that is built on top of the
Internet. The Web uses the HTTP protocol, only one of the languages spoken over the
Internet, to transmit data. Web services, which use HTTP to allow applications to
communicate in order to exchange business logic, use the Web to share information. The
Web also utilizes browsers, such as Internet Explorer or Firefox, to access Web
documents called Web pages that are linked to each other via hyperlinks. Web
documents also contain graphics, sounds, text and video.
 World Wide Web (WWW) Vs Internet

● The Web is just one of the ways that information can be disseminated over the Internet.
The Internet, not the Web, is also used for e-mail, which relies on SMTP, Usenet news
groups, instant messaging and FTP. So the Web is just a portion of the Internet, albeit a
large portion.
 Uniform resource locator (URL)
● Abbreviation of Uniform Resource Locator (URL) it is the global address of
documents and other resources on the World Wide Web.
● The first part of the URL is called a protocol identifier and it indicates what protocol
to use, and the second part is called a resource name and it specifies the IP address or
the domain name where the resource is located. The protocol identifier and the resource
name are separated by a colon and two forward slashes.
● For example, Web page that should be fetched using the HTTP protocol:
● http://182.74.94.10:8080
 Browsers
 A web browser or Internet browser is a software application for retrieving,
presenting 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 of content.
 A web browser can also be defined as an application software or program designed to
enable users to access, retrieve and view documents and other resources on the Internet.
 Hyperlinks present in resources enable users to easily navigate their browsers to related
resources.
 Although browsers are primarily intended to use the World Wide Web.
 They can also be used to access information provided by web servers in private
networks or files in file systems.
 The major web browsers are Chrome, Firefox, Internet Explorer, Opera, and Safari .
 Browsers (Contd)
 Internet explorer: Windows Internet Explorer (formerly called Microsoft Internet
Explorer, IE) is a series of graphical web browsers developed by Microsoft and included
as part of MS Windows line of operating systems starting in 1995. The latest stable
release is Internet Explorer 8, which is available as a free update for different versions of
Internet Explorer.
 Netscape navigator: It is a proprietary web browser that was popular in the 1990’s. It
was the flagship product of the Netscape Communications Corporation.
 Opera: It is the smallest and fastest browser in the world. It is offered free of charge for
personal computers and mobile phones. Its security features include built-in phishing
and malware protection, strong encryption when browsing secure websites.
 Firefox: It is a popular, free, open-source web browser from Mozilla. Firefox is small
and fast. It is based on Mozilla code, and is one of the most standard compliant browsers
available.
 Chrome: Google Chrome is a web browser developed by Google that uses the WebKit
Layout engine and application framework. It was first released as a beta version of
Microsoft Windows on 2nd September 2008 and public stable release was on 11 th
December 2008.
 Search Engine
 A program that searches documents for specified keywords and returns a list of
documents where the keywords were found.
 A search engine works by sending out a spider to fetch as many documents as possible.
 Another program, called as indexer, then reads these documents and creates an index
based on the words contained in each document.
 Each search engine uses a proprietary algorithm to create its indices such that, only
meaningful results are returned for each query.
 The World Wide Web is indexed through the use of search engines, which are also
referred to as ‘spiders’, ‘robots’, ‘crawlers’ or ‘worms’.
 Some engines scan for information in the title or header of the document, while others
look at the bold headings on the page for their information.
 Search Engine(Contd)
 WebCrawler: Maintained by America Online, WebCrawler indexes over 2,00,000
pages on approximately 75,000 web servers. URLs, titles, and document content are
indexed.
 Magellan: Magellan indexes over 80,000 websites. Search results are ranked and
annotated.
 Lycos: It indexes over (1.5 million +) web page titles, headings, subheadings, URLs,
and significant text.
 Yahoo: Yahoo has organized over 80,000 web sites into 14 broad categories. Yahoo also
maintains a comprehensive list of links to Yahoo – Computers and Internet: Internet;
World Wide Web: Searching the web other search engines, indexes and guides.
 Web server –IIS(Internet Information

Services)
IIS (which stands for Internet Information Services or Internet Information
Server) also known as Windows web server is available on most versions of Microsoft
Windows operating systems and takes second place in overall usage behind Apache
HTTP Server on the internet.

 It will host websites, web applications and services needed by users or developers.

 Internet Information Services (IIS) is a flexible, general-purpose web server from

Microsoft that runs on Windows systems to serve requested HTML pages or files.

 An IIS web server accepts requests from remote client computers and returns the
appropriate response. This basic functionality allows web servers to share and
deliver information across local area networks (LAN), such as corporate intranets,
and wide area networks (WAN), such as the internet.

 A web server can deliver information to users in several forms, such as static webpages
coded in HTML; through file exchanges as downloads and uploads; and text documents,
image files and more.
 Web server - proxy server
 Proxy Server
● In computer networks, a proxy server is a server (a computer system or an application)
that acts as an intermediary for requests from clients seeking resources from other
servers.
● It intercepts all requests to the real server to see if it can fulfill he requests itself. If not, it
forwards the request to the real server.
● A client connects to the proxy server, requesting some service, such as a file,
connection, web pages or other resource available from a different server and the
proxy server evaluates the request as a way to simplify and control their
complexity.
● It caches responses from the remote server, and returns subsequent requests for the same
content directly.
● Today most proxies are web proxies, facilitating access to content on the World Wide
Web.
Proxy server
 
HTTP Protocol
HTTP (Hypertext Transfer Protocol) is the set of rules/instructions for transferring
files (text, graphic images, sound, video, and other multimedia files) on the World
Wide Web.
 The Hypertext Transfer Protocol is an application-level protocol for distributed,
collaborative, hypermedia information systems. This is the foundation for data
communication for the World Wide Web (i.e. internet).
 HTTP is an application protocol that runs on top of the TCP/IP suite of protocols.
 The communication between the client(your browser) and the server(a software located
on a remote computer) involves requests sent by the client and responses from the server.
 Each client-server transaction, whether a request or a response, consists of three main
parts:
1. A response or request line
2. Header information
3. The body
 HTTP Protocol
 Hypertext is structured text that uses logical links (hyperlinks) between nodes containing
text. HTTP is the protocol to exchange or transfer hypertext.
 HTTP functions as a request-response protocol in the client-server computing model.
 HTTP is a stateless protocol. A stateless protocol does not require the HTTP server to
retain information or status about each user for the duration of multiple requests.
 HTTP defines how messages are formatted and transmitted, and what actions Web
servers and browsers should take in response to various commands.
 for example GET /images/logo.png HTTP/1.1
 The other main standard that controls how the World Wide Web works is HTML, which
covers how Web pages are formatted and displayed.
 HTTPS Short for Hypertext Transfer Protocol over Secure, HTTPS is a secure method
of accessing or sending information across a web page. All data sent over HTTPS is
encrypted before it is sent, this prevents anyone from understanding that information if
intercepted.
 Unit 1
Chapter 2
HTML5: Introduction, Why HTML5? Formatting text by using tags, using lists
and backgrounds, Creating hyperlinks and anchors. Style sheets, CSS
formatting text using style sheets, formatting paragraphs using style sheets.
 Introduction: What is HTML?
 HTML stands for Hypertext Markup Language, and it is the most widely used language to write
Web Pages.
 In simple terms, a Web page (or HTML document) is a plain text file that has been encoded using
Hypertext Markup Language (HTML) that tell a Web browser how to structure it to display.
 Here’s what HTML means, word-by-word:

Hypertext
Text that you click to jump from document to document. This is a
reference to the ability of Web pages to link to one another. Eg: XYZ
HTML

Markup
Tags that apply layout and formatting conventions to plain text. Literally, the plain
text is “marked up” with the tags. Eg: <b>Hi</b>
Hi

Language
A reference to the fact that HTML is considered a programming language.
 Why HTML5?
● It enables cleaner, easier-to-write code.
● HTML5 adds some important new tags to make audio, video, and application
integration smoother and more reliable by including <audio>, <video>, and
<canvas>.
● HTML5 removes support for some of the older tags. For example, an old way
(pre-HTML4) of specifying a font was the <font> tag. Today, most people use
cascading style sheets to define fonts, so the <font> tag has not been used by many
Web designers in a long time anyway. HTML5 formally removes it from the
language.
● One of the biggest things that HTML5 removes is the ability to create multi-
framed Web sites with the <frame> and <frameset> commands. You can still
create Web sites with multiple sections, but they’re handled much more capably
using tables or divisions.
Why HTML5?
 Why HTML5?

HTML5 CSS3 HTML4

JS
 HTML Tags
● As told earlier, 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.
 HTML Document Structure
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
 HTML Document Structure
<!DOCTYPE html>
Basic Html Document: Demo.html
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML Tags
 The <!DOCTYPE> Declaration
● The <!DOCTYPE> declaration tag is used by the web browser to
understand the version of the HTML used in the document.
● There is only one <!DOCTYPE> declaration.
● Current version of HTML is 5 and it makes use of the following declaration:

● <!DOCTYPE html>

<!DOCTYPE html>
 Formatting text by using tags
 Paragraph Tag
● The HTML <p> element defines a paragraph.
● The <p> tag offers a way to structure your text into different paragraphs.
● A paragraph always starts on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.
● Each paragraph of text should go in between an opening <p> and a closing </p> tag.
 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(older version of HTML).
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.<br /> This is a line break </p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
 Formatting text by using tags: Heading Tag
● HTML headings are titles or subtitles that you want to display on a webpage.
● Headings in Web pages function the same way as they do in printed documents—they
separate text into sections. The HTML standard defines six levels of headings, <h1>
through <h6>, each one progressively smaller in font size.
<html>
<head>
<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>
 Formatting text by using tags
Element name Description
<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5) [Monospaced font]
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.
 Formatting text by using tags: Example
<!DOCTYPE html>
<html>
<head>
<title> Text and Block Formatting </title>
</head>
<body>
<p> <strong>This is a paragraph<strong></p>
This is <b> Bold text</b><br/>
This is <i> Italic text</i><br/>
This is <u> Underlined text</u><br/>

This is <em> Emphasized text</em><br>

This is <big> Big text</big><br>
This is <small> Small text</small><br>

This is superscript x²+y²<br>

This is subscript H₂O<br>
 Formatting text by using tags: Example
This is <tt> typewriter text</tt><br>
This is <strike> striked text</strike><br>
This is <ins> inserted text</ins><br>
This is <del> deleted text</del><br>
This is <mark> marked text</mark><br>

<h1> This is heading 1 </h1><br>

<h2> This is heading 2 </h2><br>
<h3> This is heading 3 </h3><br>
<h4> This is heading 4 </h4><br>
<h5> This is heading 5 </h5><br>
<h6> This is heading 6 </h6><br>
</body>
</html>
Formatting text by using lists and backgrounds
 Lists
List are used to group related contents together in a structured manner making content easy
to read and understand.
HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements.
<ul> - An unordered list or bulleted list. This will list items using plain bullets.

<ol> - An ordered list or numbered list. This will use different schemes of numbers to list
your items.

<dl> - A definition list or description list. This arranges your items in the same way as they
are arranged in a dictionary.
 Lists
 Ordered Lists
An Ordered list has each item numbered, this is useful to provide sequential instructions.
Ordered list is used extensively in formal documents.
The Ordered element < ol > encapsulates the complete list, and list element < li >
encapsulates each of list items.
The numbering starts at one and is incremented by one for each successive ordered list
element tagged with <li>.
Example:
<ol>

<li> Macbook Air </li>

<li> iPhone </li>
<li> iPad </li>
<li> iMac </li>

</ol>
 Ordered Lists (Contd.) Lists
The type Attribute
Bulleted and numbered lists can be styled by using a list-style-type: type attribute.
You can use type attribute for <ol> tag to specify the type of numbering you like. By default,
it is a number. Following are the possible options −
<!DOCTYPE html>
<ol style="list-style-type: upper-roman"> <html>
<body>
<ol style="list-style-type: upper-roman">
<li>Macbook Air</li>
<li>iPhone</li>
<li>iPad</li>
<li>iMac</li>
</ol>
</body>
</html>
 Ordered Lists (Contd.) Lists
The start Attribute
The start attribute specifies the start value of the first list item in an ordered list.

This value is always an integer, even when the numbering type is letters or romans. E.g., to
start counting list items from the letter "c" or the roman number "iii", use start="3".
<ol start="3">
Example: <ol start="number">
<li>Macbook Air</li>
<li>iPhone</li>
<li>iPad</li>
<li>iMac</li>
</ol>
 Lists
 Unordered Lists
Unordered list is similar to ordered list but the numerals are replaced with bullet points.
Unordered list is created within unordered tag <ul> and similar to ordered list, list items are
placed within list tag <li> .
Unordered list attribute " list-style-type" property can be used to replace bullet points with
disc, circular and square bullets.
Example:
<ul>

<li> Macbook Air </li>

<li> iPhone </li>
<li> iPad </li>
<li> iMac </li>

</ul>
 Unordered Lists (Contd.)
Lists
The type Attribute
Bulleted and numbered lists can be styled by using a list-style-type: type attribute.
You can use type attribute for <ul> tag to specify the type of bullets you like. Following are
the possible options −
<ul style="list-style-type: square"> <!DOCTYPE html>
<html>
<body>
<ul style="list-style-type: circle">
<li>Macbook Air</li>
<li>iPhone</li>
<li>iPad</li>
<li>iMac</li>
</ul>
</body>
</html>
 Nested Lists
Lists
Nested list is created by inserting a list within a list.The Sole idea behind this is to create a
sublist for a main list item .
The Sublist list is put inside the <li> element of the main list.
Example:
<body>
<ul>
<li>Linux</li>
<li>Windows
<ol>
<li>Windows 95.</li>
<li>Windows 98.</li>
<li>Windows XP.</li>
<li>Windows 7.</li>
</ol>
</li>
<li> Mac OS X</li>
</ul>
</body>
 Lists
 Definition Lists
HTML and XHTML supports a list style which is called definition lists where entries
are listed like in a dictionary or encyclopedia. The definition list is the ideal way to
present a glossary, list of terms, or other name/value list.
The Structure of definiton list is a term followed by its description or definition.
Its created with a Definition list tag <dl> encapsulating the complete list.
Within each <dl> tag you have a pair of definition term <dt> and definition description
element <dd>.
<dt> contains definition term, while <dd> contains the definition or description.
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 Lists
 Definition Lists
<!DOCTYPE html>
<html>

<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
<dt><b>TCP</b></dt>
</dl>
</body>

</html>
 Using backgrounds: Specifying Colors
By default, your webpage background is white in color. HTML provides you following two
good ways to decorate your webpage background.
● HTML Background with Colors
● HTML Background with Images

 Background Color
 To specify a background color for an entire page, insert the
style=“background-color: color” attribute into the opening <body> tag. For example,
to make the background of an entire page yellow, use the following:
<body style="background-color: yellow">

You can use the color name, the RGB value, or the hexadecimal value. Therefore, the
following are equivalent to the code just shown:
<body style="background-color: #FFFF00">
<body style="background-color: rgb(255,255,0)">

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Take care...</p>
 Using backgrounds: Specifying Colors
 Foreground Color
The foreground color is the default text color for the page. You can set the foreground
color by using the style=“color: color” attribute. It can be combined with the attribute for
the background color in a single style= statement. For example, to set yellow text on a
navy blue background, use the following:

<body style="background-color: navy; color: yellow">

When you combine two attributes in a single style= statement, you separate them with a
semicolon, as shown in the preceding example.
<html>
<body style="background-color: navy; color: yellow">
Take care
</body>
</html>
 Using backgrounds: Specifying a Background
Image
● A background image appears behind the text onFile
a page. By default, the image is tiled to fill the
page and scrolls with the page.
● To use a background image file, use a style=”background-image: url(image)” attribute in the
opening <body> tag.
● For example, to use the background image file called granite.gif that is located in the same
folder as the HTML file, you would write:
<body style="background-image: url(granite.gif)">

Example:
<body style="background-image: url(nature.jpg)">
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
 Using backgrounds: Specifying a Background
● The background-repeat property sets if/how a background image will be repeated.
● Image
By default, a background-image is repeated Fileand horizontally.
both vertically
● You can force it not to repeat by adding the background-repeat= attribute to the <body> tag and
specifying
repeat-x (repeat horizontally only), repeat-y (repeat vertically only), or no-repeat.
● For example, to prevent any repeating, use the following:
<body style="background-image: url(nature.jpg); background-color: beige; background-
repeat: no-repeat"> //If image is in same folder as code
<body style="background-image:url('C:/Users/Desktop/WEB PROGRAMMING/WP
PRACTICAL/nature.jpg'); background-repeat:no-repeat"> //If image is in other folder as code

● The background-attachment property sets whether a background image scrolls with the rest of the page, or
is fixed. By default, the background image scrolls with the text when the user scrolls down the page. To
force the image to stay fixed, add the background-attachment=fixed attribute to the <body> tag, as
follows:
<body style="background-image: url(granite.gif); background-color: beige;
background-attachment=fixed">

Note To avoid having to specify a path to the image file, place the image file and the
HTML file in the same folder.
 Using backgrounds: Specifying a Background
● Example: Image File
repeat-x
(repeat horizontally only)

repeat-y
(repeat vertically only),

no-repeat.
 Creating hyperlinks and anchors
● A link, or an anchor, is a word, a group of words or an image you can click to jump to
another document or a specific part of the current document.

● The Web is based on hyperlinks. Each Web page contains active links to other pages,
which in turn link to even more pages, until presumably the entire Web (or at least a great
chunk of it) is bound together.

● You activate a hyperlink by clicking a designated bit of text or a graphic that,

depending on the link, takes you to a different location on the page, opens a different Web
page, starts an e-mail message, downloads a file, lets you view a movie or listen to a sound
clip, starts a Web-based program, and so on. You have probably clicked thousands of
hyperlinks, perhaps without thinking much about the coding behind them.
 Hyperlinking
HTML Links - Syntax
● The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.

<a href="https://www.google.co.in/">Visit Google.co.in!</a>

● By default, links will appear as follows in all browsers:

○ An unvisited link is underlined and blue
○ A visited link is underlined and purple
○ An active link is underlined and red
 Hyperlinking
HTML Links – Absolute and Relative URL

● Paths that contain a complete address that anyone can use to get to that page are
called absolute paths. Absolute paths are very reliable.
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/css/default.asp">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

● In a relative path, the destination file is relative to the current file’s location. Relative
paths make it easier to develop and test your Web site in a different file location than the
one where it will eventually be stored.
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
 Hyperlinking: Setting the Target Window
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.
The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

EXAMPLE:
<a href="https://www.XYZ.com/" target="_blank">Visit xyz!</a>
 Hyperlinking to an email address
HTML Links – Link to an Email Address
mailto: is used inside the href attribute to create a link that opens the user's email program (to
let them send a new email):
EXAMPLE:

● To add a default subject line to the e-mail, add a ?subject= attribute after the e-mail
address, like this:
<a href="mailto:[email protected]?subject=Comment">Contact Us</a>
● The person using the hyperlink to contact you can change the subject line in her e-mail
program before sending the message.
 Creating and Hyperlinking to Anchors
● An anchor is a marker within an HTML document, roughly analogous to a bookmark in
a Word document. You define a specific location in the document with an anchor name,
and then you can hyperlink directly to that anchor.

● Anchors are most valuable in long documents with multiple sections. They provide a
means for users to jump directly to whatever section they want rather than having to read or
scroll through the entire document.

● There are two parts to the process: you mark the anchor location, and then you create a
hyperlink that refers to it.

● To define an anchor, create an <a> tag around the destination text and include a name=
attribute. For example, suppose you have a heading that reads Conclusion, and you want
to create an anchor point with that same name:
<a name="conclusion">Conclusion</a>
 Creating and Hyperlinking to Anchors
● An anchor is a marker within an HTML document, roughly analogous to a bookmark in
a Word document. You define a specific location in the document with an anchor name,
and then you can hyperlink directly to that anchor.

● Anchors are most valuable in long documents with multiple sections. They provide a
means for users to jump directly to whatever section they want rather than having to read or
scroll through the entire document.

● There are two parts to the process: you mark the anchor location, and then you create a
hyperlink that refers to it.

● To define an anchor, create an <a> tag around the destination text and include a name=
attribute. For example, suppose you have a heading that reads Conclusion, and you want
to create an anchor point with that same name:
<a name="conclusion">Conclusion</a>
 Creating and Hyperlinking to Anchors
● To refer to the anchor point, include its name in the href= attribute. Precede the anchor
name with a pound sign (#). If the anchor point is in the same document as the hyperlink, you can
use a relative reference like this:
○ <a href="#conclusion">View the Conclusion</a>

● Otherwise, you must include the name of the file in which the anchor is located. For
example, if the anchor were in a file called report.htm, it would look like this:
○ <a href="report.html#conclusion">View the Conclusion</a>

● The same rules apply to the file name as they do with regular hyperlinks. If the document
is not in the same folder, you must refer to the folder either absolutely or relatively.
 Style sheets
● Cascading Style Sheets (CSS) describe how documents are presented on screens, in
print, or perhaps how they are pronounced. W3C has actively promoted the use of style
sheets on the Web since the Consortium was founded in 1994.

● Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML
elements. It sets the background-color, font-size, font-family, color, … etc. property of
elements on a web page.

● CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.

● It allows us to add effects or animations to the website. We use CSS to display

animations like buttons, effects, loaders or spinners, and also animated backgrounds.

● Each property has a name and a value, separated by a colon (:). Each property
declaration is separated by a semi-colon (;).
 Style sheets

CSS can be used in three ways in your HTML document:

External Style Sheet - Define style sheet rules in a separate .css file and then include that
file in your HTML document using HTML <link> tag.
Internal Style Sheet - Define style sheet rules in head section of the HTML document using
<style> tag.
Inline Style Sheet - Define style sheet rules directly along-with the HTML elements using
style attribute.
Type of CSS: 1. Inline Style sheets
● Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute.
● For Inline CSS every style content is in HTML elements. It is used for a limited section.
Whenever our requirements are very small we can use inline CSS. It will affect only single
element.
● Syntax:
<tagname style="cssproperty1:value; cssproperty2:value;"> </tagname>
● Example:
<h2 style="color:red; margin-left:40px;">Inline CSS is applied on this heading.</h2>
<p>This paragraph is not affected.</p>
<p style="background-color: yellow; color:red">Hello World!</p>
<p style="background-color: yellow;color:red">These paragraphs are styled with
CSS.</p>

Disadvantage:
1. Time Consuming
2. Extra efforts for each tag
Cascading Style sheets Syntax
 Cascading Style sheets Syntax
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.

Example:
<style>
p{
color: red;
text-align: center;
}
</style>
 Types of CSS: 2. Internal or Embedded Style
• The internal style sheet is used to add a unique style for a single document. It is defined in
<head> section of the HTML page inside sheets
the <style> tag.
• Internal CSS is used in the condition when we want a style to be used in the complete HTML
body.
Example: <!DOCTYPE html>
<html>
<head>
<style>
<style>
p{
p{
color: red;
color: red;
text-align: center;
text-align: center;
}
}
</style>
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
 Types of CSS: 3. External Style sheets
● The external style sheet is generally used when you want to make changes on multiple
pages. It is ideal for this condition because it facilitates you to change the look of the
entire web site by changing just one file.
● External CSS contains separate CSS file which contains only style property with
the help of tag attributes (For example class, id, heading, … etc).
● CSS property written in a separate file with .css extension and should be linked to the
HTML document using link tag. This means that for each element, style can be set
only once and that will be applied across web pages.
● It uses the <link> tag on every pages and the <link> tag should be put inside the
head section.
<head>  
<link rel="stylesheet" type="text/css" href="mystyle.css">  
</head> 

 The required rel attribute specifies the relationship between the current document and the
linked document/resource.
 Types of CSS: 3. External Style sheets
Style.css Cssdemo.html
p <html>
{ <head>
font-family:Times new roman; <title>CSS</title>
font-size:20px;
<link rel="stylesheet" type="text/css" href="style.css">
text-transform:uppercase;
color:white; </head>
background-color:green; <body >
} <p>Welcome FYIT......<br>A very Good Morning<br>
body This is Practical No:08 <br> We are going to study
{ CSS...<br>CSS<br>stands for<br>Cascading Style Sheet
background-color:red; <br>This is an interesting concept<br>Let's start coding</p>
background-image:url("Sunset.jpg");
<p>
}
You have to dream before your dreams can come true.
</p>
<h1>Have a good day</h1>
</body>
Types of CSS: 3. External Style sheets
CSS formatting text using style sheets
 CSS formatting text using style sheets
● CSS has a lot of properties for formatting text.
● The commonly used text properties are: text-align, text-decoration, text-transform, text-
indent, line-height, letter-spacing, word-spacing, and more. These properties give you
precise control over the visual appearance of the characters, words, spaces, and so on.

Property Description
color Text Color: The color of the text is defined by the CSS color property.
text-align Text Alignment: The text-align property is used to set the horizontal alignment of the text.
Text can be aligned in four ways: to the left, right, centre or justified (straight left and right
margins).
text-decoration Text Decoration: The text-decoration property is used to set or remove decorations from text.
This property typically accepts one of the following values: underline, overline, line-through,
and none. You should avoid underline text that is not a link, as it might confuse the visitor.
text-transform Text Transformation: The text-transform property is used to set the cases for a text.
Text are often written in mixed case. However, in certain situations you may want to display your
text in entirely different case. Using this property you can change an element's text content into
uppercase or lowercase letters, or capitalize the first letter of each word without modifying the
original text.
 CSS formatting text using style sheets: Fonts
Property Description
font-family The font-family property is used to specify the font to be used to render the text. This property can hold
several comma-separated font names as a fallback system, so that if the first font is not available on the
user's system, browser tries to use the second one, and so on.
List with a generic font family which are five — serif, sans-serif, monospace, cursive and fantasy.

font-style The font-style property is used to set the font face style for the text content of an element.
The font style can be normal, italic or oblique. The default value is normal.

font-size The font-size property is used to set the size of font for the text content of an element. There are several
ways to specify the font size values e.g. with keywords, percentage, pixels, etc.

font-weight The font-weight property specifies the weight or boldness of the font.
This property can take one of the following values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500,
600, 700, 800, 900 and inherit.

font-variant The font-variant property allows the text to be displayed in a special small-caps variation.
Small-caps or small capital letters are slightly different to normal capital letters, in which lowercase letters
appear as smaller versions of the corresponding uppercase letters.
 CSS formatting text using style sheets
<!DOCTYPE html>
<html>
<head>
<title>Setting font-style in CSS</title>
</head>
<body style="font-family: Sans-serif, Arial, Helvetica; ">
<p style="font-style: normal; font-size=30px;font-weight: bold; font-variant: small-caps;">
This is a normal paragraph.</p>
<h1 style="font-style: italic; font-size: xx-large;">This is a paragraph with italic font style.</h1>
<h2 style="font-style: oblique; font-size=60px;">This is a paragraph with oblique font
style</h2>
</body>
</html>
 Formatting paragraphs using style sheets
Property Description
border-style The border-style property sets the style of a box's border such as: solid, dotted, etc. It is a shorthand
property for setting the line style for all four sides of the elements border.
The border-style property can have the following values: none, hidden, solid, dashed, dotted,
double, inset, outset, groove, and ridge.
border-width Setting the Border Width: The border-width property specifies the width of the border area. It is a
shorthand property for setting the thickness of all the four sides of an element's border at the same time.
border-color Specifying the Border Color: The border-color property specifies the color of the border area. This is
also a shorthand property for setting the color of all the four sides of an element's border.
padding Setting Border Padding: The CSS padding properties allow you to set the spacing between the content
of an element and its border (or the edge of the element's box, if it has no defined border).

p { border-style: solid; }
OR
<p style=“border-style: solid; border-width:30px; border-color: black; padding: 30px;”>DONE</p>
Formatting paragraphs using style sheets
 CSS formatting text using style sheets: Fonts
Property Description
text-indent Text Indentation
The text-indent property is used to set the indentation of the first line of text within a block of text. It
is typically done by inserting the empty space before the first line of text.
The size of the indentation can be specified using percentage (%), length values in pixels, etc.
letter- Letter Spacing
spacing The letter-spacing property is used to set extra spacing between the characters of text.
This property can take a length value in pixels, ems, etc. It may also accept negative values. When
setting letter spacing, a length value indicates spacing in addition to the default inter-character space.
line-height Line Height (VERTICAL HEIGHT)
The line-height property is used to set the height of the text line.
It is also called leading and commonly used to set the distance between lines of text.
The value of this property can be a number, a percentage (%), or a length in pixels, etc.
border The Border Shorthand Property
The border CSS property is a shorthand property for setting one or more of the individual border
properties border-width, border-style and border-color in a single rule.
p{
border: 5px solid #00ff00;
}
 CSS formatting
<!DOCTYPE html>
text using style sheets
p
<html> {
<head> width: 300px;
<title>Setting Text Alignment using text-align: justify;
CSS</title> text-decoration:line-through;
text-transform: lowercase;
<style> text-indent:50px;
h1 line-height: 1.2;
{ word-spacing:140px;
color:lightgreen; }
text-align: center; </style>
text-decoration:overline; </head>
text-transform: uppercase; <body>
letter-spacing: 40px; <h1>This is a heading</h1>
<p> Where there is a will, there is a way. Try and
} try till you succeed. Good Luck!!! Shine and Smile,
fill the world with your positive radiations</p>
</body>
</html>
h1
CSS formatting text and paragraphs using
{ style sheets
color:lightgreen;
text-align: center;
text-decoration:overline;
text-transform: uppercase;
letter-spacing: 40px;
border: 5px solid #00ff00;
}
p
{
width: 300px;
text-align: justify;
text-decoration:line-through;
text-transform: lowercase;
text-indent:50px;
line-height: 1.2;
word-spacing:140px;