Essentials of E-commerce & HTML

UNIT-1
Introduction to Electronic Commerce

E-commerce :-
The word commerce is the basic concept for
electronic commerce pertaining to buying and selling of goods.
Electronic commerce deals with trading of goods electronically.

Features:-

1.Ubiquity:- Internet technology is available every where ,at

work ,at home,and else where through mobile devices any time.

2.Global reach:- the technology reaches across national

bounderies around the earth.

3.Richness:- video ,audio and text messages are possible.

4.Interactivity:-the technology works through interaction with
users.

5.The technology reduces information cost and raises quality.

6.The technology allows personalized messages to be delivered

to individuals as well as groups.

Types of E-Commerce:-
There are four basic types of e-commerce —
1.Business-to-Business (B2B)
2.Business-to-Consumer (B2C)
3.Consumer-to-Consumer (C2C)
4. Consumer-to-Business (C2B)

1.BUSINESS-TO-BUSINESS (B2B):-
B2B e-commerce refers to all electronic
transactions of goods and sales that are conducted between two
companies. This type of e-commerce typically explains the
relationship between the producers of a product and the
wholesalers who advertise the product for purchase to
consumers. Sometimes this allows wholesalers to stay ahead of
their competition.
2.BUSINESS-TO-CONSUMER (B2C):-
Perhaps the most common form of e-commerce,
B2C e-commerce deals with electronic business relationships
between businesses and consumers. Many people enjoy this
avenue of e-commerce because it allows them to shop around
for the best prices, read customer reviews and often find
different products that they wouldn’t otherwise be exposed to in
the retail world. This e-commerce category also enables
businesses to develop a more personalized relationship with
their customers.
3.CONSUMER-TO-CONSUMER (C2C):-
This level of e-commerce encompasses all
electronic transactions that take place between consumers.
Generally, these transactions are provided by online platforms
(such as PayPal), but often are conducted through the use of
social media networks (Facebook marketplace) and websites
(Craigslist).
4.CONSUMER-TO-BUSINESS (C2B):-
Not the most traditional form of e-commerce,
C2B e-commerce is when a consumer makes their services or
products available for companies to purchase. An example of
this would be a graphic designer customizing a company logo or
a photographer taking photos for an e-commerce website.
Electronic Data Interchange(EDI):-
Electronic data interchange is a technique
for computer to computer exchange of business documents in a
standard electronic format between business partner or
companies.
Companies use EDI system for exchanging
business information automatically by computer systems as
transactions without paper . EDI is generally used for B2B
transactions.

ADVANTAGES:-
1. As it is direct computer to computer transactions system,it
is high speed.
2. Due to reduced human intervention ,it is accurate.
3. Simple to use.
4. Highly secure.
5. Cost effective.
6. Reduction in paper work.
7. Enhanced quality of data.
 Financial Electronic Data Interchange
(FEDI):-
FEDI stands for financial EDI . It deals
specifically with financial transactions.FEDI is used by
wide vairaties of industries to ensure that payment reach
their destination surely and quikly.

FEDI for international trade transactions:-

1. Advane payment.
2. Letter of credit.
3. DA (document against agreement)
4. DP (document against payment)

Electronic Fund Transfer(EFT):-

EFT are Electronic transfer of money
from one bank account to another,either within a single financial
institution or multiple institution via computer based system
without the direct intervention of bank staff.

EFT includes direct debit transactions.direct

deposite ,ATM withdrawals and online bill pay services.
Transactions are processed through the automated clearing house
(ACH) networks,the secure transfer system of the federal reserve
that connects all us banks and other financial institution.
Automated Clearing House(ACH):-
ACH is an electronic network for
financial transactions. It is a computer based clearing house to
process the exchange of electronic transactions between financial
institutions.

ACH Transfer:-
An ACH transfer is the electronic movement of
money between banks through the automated clearing
house(ACH) networks,one of the biggest us payment system.
The types of transfers include external found
transfers,person to person payment,bill payment and direct
deposite,ACH is mostly useful for B2B transactions.

Electronic Payment System(E-payment system):-

AN E-payment system is a way of making
tramsactions or paying for goods and services through an
electronic medium without the use of cheque or cash.

Electronic Payment Method:-

1. Credit card:- When a customer purchases a product via
credit card,credit card issuer bank,pays on behalf of the
customer and customer has a certain time period after which
he/she can pay the credit card montly payment cycle.

2. Debit card:- Debit card is a card with a unique number

mapped with the bank account number.The major difference
between a debit card and a credit card is that in case of
payment through debit card the amount gets deducted from
the cards bank account immediately and there should be
sufficient balance in the bank account for the transactions to
get completed,whereas in case of credit card transactions
there is no such compulsion.

3. Smart card:- smart card is a card that has a small micro

processor chip embedded in it . It has the capacity to store a
customer’s work related or personal information. Smart card
can only be accessed using a pin that every customer is
assigned with.it provide faster processing.
Example:- Visa cash cards.

4. E-Money:- E-money transaction refer to situations where

payment is done over the networks and amount gets
transferred from one financial body to another financial body
without any environment of middile man.
Virtual Private Network(VPN):-

A virtual private network (VPN) extends a private

network across a public network, and enables users to send and
receive data across shared or public networks as if their
computing devices were directly connected to the private
network. Applications running on a computing device, e.g., a
laptop, desktop, smartphone, across a VPN may therefore
benefit from the functionality, security, and management of the
private network. Encryption is a common, though not an
inherent, part of a VPN connection.[1]
VPN technology was developed to allow remote users and
branch offices to access corporate applications and resources. To
ensure security, the private network connection is established
using an encrypted layered tunneling protocol, and VPN users
use authentication methods, including passwords or certificates,
to gain access to the VPN.

Tunneling protocol:-

In computer networks, a tunneling

protocol is a communications protocol that allows for the
movement of data from one network to another. It involves
allowing private network communications to be sent across a
public network (such as the Internet) through a process
called encapsulation.
Because tunneling involves repackaging the traffic data into a
different form, perhaps with encryption as standard, it can hide
the nature of the traffic that is run through a tunnel.
The tunneling protocol works by using the data portion of
a packet (the payload) to carry the packets that actually provide
the service. Tunneling uses a layered protocol model such as
those of the OSI or TCP/IP protocol suite, but usually violates
the layering when using the payload to carry a service not
normally provided by the network. Typically, the delivery
protocol operates at an equal or higher level in the layered
model than the payload protocol.

Internet:-

The Internet  is the global system of

interconnected computer networks that uses the Internet protocol
suite (TCP/IP) to link devices worldwide. It is a network of
networks that consists of private, public, academic, business, and
government networks of local to global scope, linked by a broad
array of electronic, wireless, and optical networking
technologies. The Internet carries a vast range of information
resources and services, such as the inter-
linked hypertext documents and applications of the World Wide
Web (WWW), electronic mail, telephony, and file sharing.
The origins of the Internet date back to the development
of packet switching and research commissioned by the United
States Department of Defense in the 1960s to enable time-
sharing of mainframe computers.[1] The primary precursor
network, the ARPANET, initially served as a backbone for
interconnection of regional academic and military networks in
the 1970s. The funding of the National Science Foundation
Network as a new backbone in the 1980s, as well as private
funding for other commercial extensions, led to worldwide
participation in the development of new networking
technologies, and the merger of many networks.[2] The linking of
commercial networks and enterprises by the early 1990s marked
the beginning of the transition to the modern Internet,[3] and
generated a sustained exponential growth as generations of
institutional, personal, and mobile computers were connected to
the network. Although the Internet was widely used
by academia in the 1980s, commercialization incorporated its
services and technologies into virtually every aspect of modern
life.

Internet banking:-
Internet banking is the system that provides the facility to
the customer to conduct the financial and non-financial
transactions from his net banking

account. The user can transfer funds from his account to other

accounts of the same
bank/different bank using a website or an online application.
The

customer uses a resource and a medium to conduct financial

transactions. The resource that a customer uses might be an
electronic device like a computer, a laptop, or a mobile phone.
The internet is the medium that makes the technology possible.
The facility of internet banking is provided through banks and
the customer must be an account holder with any bank to get the
facility available for him/her.

Features of Internet Banking

The customer using this facility can conduct transactional and
non-transactional tasks including:

 The customer can view account statements.

 The customer can check the history of the transactions for a
given period by the concerned bank.
 Bank, statements, various types of forms, applications can
be downloaded.
 The customer can transfer funds, pay any kind of bill,
recharge mobiles, DTH connections, etc.
 The customer can buy and sell on e-commerce platforms.
 The customer can invest and conduct trade.
 The customer can book transport, travel packages, and
medical packages.

Advantages of Internet Banking

 The customers get permanent access to his/her bank
anytime and anywhere.
 Transactions are safe and highly secure.
 Immediate funds transfer helps the user in time of urgent
need.
 It saves valuable time of the users.
 UNIT-2
Internet Security and E-Commerce

E-marketing :-
E-marketing is a process of planning and executing the
conception, distribution, promotion, and pricing of products and
services in a computerized, networked environment, such as
the Internet and the World Wide Web, to facilitate exchanges
and satisfy customer demands. It has two distinct advantages
over traditional marketing. E-marketing provides customers with
more convenience and more competitive prices, and it enables
businesses to reduce operational costs.
As businesses offer e-marketing and online shopping, customers
can get market information from their computers or cell phones
and buy goods or find services without leaving home twenty-
four hours a day and seven days a week (24/7). They can read
ads on the Web or from e-mail, get e-coupons, view pictures of
goods, compare prices, and make purchases with a few clicks of
their mouse, saving the time and money it would take to shop in
person at a brick-and-mortar store. At the same time, 
ebusinesses can reduce costs in distribution channels and
physical store space and thus pass the savings on to customers.
To make e-marketing effective and efficient, managers of e-
businesses need to know online customer behavior, e-marketing
techniques, costs and benefits of emarketing over traditional
marketing, and pitfalls and legal issues of e-marketing. A
discussion of each of these aspects follows.

Encryption:-

 encryption is the process of encoding a message or

information in such a way that only authorized parties can
access it and those who are not authorized cannot. Encryption
does not itself prevent interference but denies the intelligible
content to a would-be interceptor. In an encryption scheme, the
intended information or message, referred to as plaintext, is
encrypted using an encryption algorithm–a cipher–
generating ciphertext that can be read only if decrypted. 

Decryption:-
Decryption is the process of taking encoded or
encrypted text or other data and converting it back into text that
you or the computer can read and understand. This term could
be used to describe a method of unencrypting the data manually
or unencrypting the data using the proper codes or keys.
Authentication:-
Authentication is the act of proving an assertion, such
as the identity of a computer system user. In contrast
with identification, the act of indicating a person or thing's
identity, authentication is the process of verifying that
identity. It might involve validating personal identity
documents, verifying the authenticity of a website with
a digital certificate,[1] determining the age of an artifact
by carbon dating, or ensuring that a product or document is
not counterfeit.

Digital signature:-

A digital signature is a mathematical scheme for

verifying the authenticity of digital messages or documents. A
valid digital signature, where the prerequisites are satisfied,
gives a recipient very strong reason to believe that the message
was created by a known sender (authentication), and that the
message was not altered in transit (integrity).[1]
Digital signatures are a standard element of most cryptographic
protocol suites, and are commonly used for software
distribution, financial transactions, contract management
software, and in other cases where it is important to detect
forgery or tampering.
Digital signatures are often used to implement electronic
signatures, which includes any electronic data that carries the
intent of a signature,[2] but not all electronic signatures use
digital signatures.[3][4] In some countries, including South Africa,
[5]
 the United States, Algeria,[6] Turkey, India,
[7]
 Brazil, Indonesia, Mexico, Saudi Arabia,[8] Uruguay,
[9]
 Switzerland, Chile[10] and the countries of the European
Union,[11][12] electronic signatures have legal significance.
 HTML

UNIT -3

HTML Basics & Web Site Design Principles

What is HTML:-
HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language

 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to
render the content of the page

A Simple HTML Document:-

Example :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained:-
 The <!DOCTYPE html> declaration defines this document
to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the
document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

HTML Tags:-
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is
the end tag
 The end tag is written like the start tag, but with a forward
slash inserted before the tag name
Tip: The start tag is also called the opening tag, and the end tag
the closing tag.

HTML Page Structure:-

Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: Only the content inside the <body> section (the white
area above) is displayed in a browser.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type,
and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any
HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>

Write HTML Using Notepad or

TextEdit :-
Web pages can be created and modified by using professional
HTML editors.
However, for learning HTML we recommend a simple text
editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn
HTML.
Follow the steps below to create your first web page with
Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left
on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files
correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display
HTML files as HTML code instead of formatted text".
Then open a new document to place the code.
Step 2: Write Some HTML
Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the
Notepad menu.
Name the file "index.htm" and set the encoding to UTF-
8 (which is the preferred encoding for HTML files).

You can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and
choose "Open with").

The result will look much like this:

Example :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Documents:-
All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends
with </html>.
The visible part of the HTML document is
between <body> and </body>.
Example :
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

HTML Headings:-
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading: 
Example:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

CODING:-
<html>
<head>
<title> heading tag </title>
<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>
</head>
</html>

HTML Paragraphs:-
HTML paragraphs are defined with the <p> tag:
Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
CODING:-
<html>
<head>
<title> paragraph tag </title>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</head>
</html>

HTML Buttons:-
HTML buttons are defined with the <button> tag:

Example:

<button>Click me</button>

Coding:-
<html>
<head>
<title> button tag </title>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button> Click me</button>
</body>
</head>
</html>

HTML Lists:-
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list
items):
Example :
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Coding:-
<html>
<head>
<title> list tag </title>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</head>
</html>

HTML Horizontal Rules:-

The <hr> tag defines a thematic break in an HTML page, and is
most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a
change) in an HTML page:
Example :
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
Coding :-
<html>
<head>
<title> hr tag </title>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</head>
</html>

HTML Elements :-
An HTML element usually consists of a start tag and
an end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end

tag:
<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br>    

HTML elements with no content are called empty elements.

Empty elements do not have an end tag, such as the <br>
element (which indicates a line break).

Nested HTML Elements :-

HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:

Example :
 <!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Coding :-
<html>
<head>
<title> nested tags </title>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</head>
</html>

Example Explained
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
Inside the <html> element is the <body> element.
The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
Inside the <body> element is two other HTML
elements: <h1> and <p>.

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>

Empty HTML Elements :-

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag
defines a line break):
Example :
<p>This is a <br> paragraph with a line break.</p>
<!DOCTYPE html>
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>

Empty elements can be "closed" in the opening tag like this:

<br />.
HTML5 does not require empty elements to be closed. But if
you want stricter validation, or if you need to make your
document readable by XML parsers, you must close all HTML
elements properly.

HTML Attributes :-
Below is an alphabetical list of some attributes often used in
HTML, which you will learn more about in this tutorial:

Attribut Description
e

alt Specifies an alternative text for an image, when the image

cannot be displayed

disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

id Specifies a unique id for an element

 src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as

a tool tip)

The HTML <head> Element :-

The HTML <head> element is a container for metadata. HTML
metadata is data about the HTML document. Metadata is not
displayed.
The <head> element is placed between the <html> tag and
the <body> tag:

HTML Tag Reference :-

Tag Description

<html> Defines the root of an HTML document

 <body> Defines the document's body

<head> A container for all the head elements (title, scripts, styles,
meta information, and more)

<h1> to Defines HTML headings

<h6>

<hr> Defines a thematic change in the content

The HTML <pre> Element :-

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width
font (usually Courier), and it preserves both spaces and line
breaks:
Example :
<pre>
  My Bonnie lies over the ocean.
   My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.

</pre>

Coding :-

<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
The HTML Style Attribute :-
Setting the style of an HTML element, can be done with
the style attribute.
The HTML style attribute has the following 
syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

Background Color :-
The CSS background-color property defines the background
color for an HTML element.

Example :
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Coding :
<html>
<head>
<title> background tag </title>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</head>
</html>

Text Color :-
The color property defines the text color for an HTML element:
Example :
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Coding :-
<!DOCTYPE html>
<html>
<head>
<title> text color tag </title>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</head>
</html>

Fonts :-
The font-family property defines the font to be used for an
HTML element:
Example :
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Coding:-
<!DOCTYPE html>
<html>
<head>
<title> font tag </title>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</head>
</html>

Text Size :-
The font-size property defines the text size for an HTML
element:
Example :
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Coding:-
<!DOCTYPE html>
<html>
<head>
<title> textsize tag </title>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</head>
</html>

Text Alignment :-
The text-align property defines the horizontal text alignment for
an HTML element:
Example :
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Coding :-
<!DOCTYPE html>
<html>
<head>
<title> alignment tag </title>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</head>
</html>

HTML Text Formatting :-

Text Formatting
This text is bold
This text is italic
This is subscript and superscript

coding :-

<html>
<head>
<title> formatting tag </title>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is_subscript and
^superscript</p>
</body>
</head>
</html>

HTML Formatting Elements :-

In the previous chapter, you learned about the HTML style
attribute.
HTML also defines special elements for defining text with a
special meaning.
HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.
Formatting elements were designed to display special types of
text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
  <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements :-

The HTML <b> element defines bold text, without any extra
importance.
Example :
<b>This text is bold</b>

Coding :-
<html>
<head>
<title> bold tag </title>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</head>
</html>
The HTML <strong> element defines strong text, with added
semantic "strong" importance.
Example :
<strong>This text is strong</strong>

Coding:-
<html>
<head>
<title> strong tag </title>
<body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body>
</head>
</html>

HTML <i> and <em> Elements :-

The HTML <i> element defines italic text, without any extra
importance.
Example :
<i>This text is italic</i>
Coding :-
<html>
<head>
<title> italic tag </title>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</head>
</html>

The HTML <em> element defines emphasized text, with added

semantic importance.
Example :
<em>This text is emphasized</em>

Coding:-
<html>
<head>
<title> em tag </title>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</head>
</html>
Note: Browsers display <strong> as <b>, and <em> as <i>.
However, there is a difference in the meaning of these
tags: <b> and <i> defines bold and italic text,
but <strong> and <em> means that the text is "important".

HTML <small> Element :-

The HTML <small> element defines smaller text:

Example :
<h2>HTML <small>Small</small> Formatting</h2>

Coding :-
<html>
<head>
<title> small text tag </title>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</head>
</html>

HTML <sub> Element :-

The HTML <sub> element defines subscripted text.
Example :
<p>This is _subscripted text.</p>

Coding :-
<html>
<head>
<title> sub tag </title>
<body>
<p>This is _subscripted text.</p>
</body>
</head>
</html>
HTML <sup> Element :-
The HTML <sup> element defines superscripted text.

Example :
<p>This is ^{superscripted} text.</p>

Coding:-
<html>
<head>
<title> sup tag </title>
<body>
<p>This is ^{superscripted} text.</p>
</body>
</head>
</html>

HTML Text Formatting Elements :-

tag Description

<b> Defines bold text

<em> Defines emphasized text 

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

 <del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Comments :-
Comment tags are used to insert comments in the HTML source
code.

HTML Comment Tags :

You can add comments to your HTML source by using the

following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag,
but not in the closing tag.
Note: Comments are not displayed by the browser, but they can
help document your HTML source code.
With comments you can place notifications and reminders in
your HTML:
Example :
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->

Coding:-
<html>
<head>
<title> comment tag </title>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</head>
</html>
HTML Colors:-
HTML colors are specified using predefined color names, or
RGB, HEX, HSL, RGBA, HSLA values.

Color Names
In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray
SlateBlue

Violet

Coding :-
<!DOCTYPE html>
<html>
<head>
<title> tags </title>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</head>
</html>

HTML supports 140 standard color names.

Background Color :-
You can set the background color for HTML elements:
Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed

diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.

Example :
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Coding:-
<html>
<head>
<title> color tag </title>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</p>
</body>
</head>
</html>

Text Color :-
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.

Example :
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Coding :-
<html>
<head>
<title> tags </title>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>
</body>
</head>
</html>

Border Color :-
You can set the color of borders:

Hello World
Hello World
Hello World

Example :
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Coding :-
<html>
<head>
<title> tags </title>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</head>
</html>

HTML Style Tags:-

Tag Description

<style> Defines style information for an HTML document

<link> Defines a link between a document and an external resource

HTML Forms :-

HTML Form Example :

First name:
John

Last name:
Doe

Submit

Coding :-

<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent
to a page called "/action_page.php".</p>
</body>
</html>

The <form> Element :-

The HTML <form> element defines a form that is used to
collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like: text
fields, checkboxes, radio buttons, submit buttons, and more.
 The <input> Element :-
The <input> element is the most important form element.
The <input> element is displayed in several ways, depending on
the type attribute.
Here are some examples:

Type Description

<input type="text"> Defines a single-line text input field

<input type="radio"> Defines a radio button (for selecting one of

many choices)

<input Defines a submit button (for submitting the

type="submit"> form)

Text Fields :-
<input type="text"> defines a single-line input field for text
input.
Example :
A form with two text input fields:
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>
This is how it will look like in a browser:
First name:

Last name:

Note: The form itself is not visible. Also note that the default
width of an input field is 20 characters.

The <label> Element :-

Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because
the screen-reader will read out load the label when the user is
focused on the input element.
The <label> element also help users who have difficulty clicking
on very small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to
the id attribute of the <input> element to bind them together.

Radio Buttons :-
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of
choices.

Example :
A form with radio buttons:
<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="femal
e">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>
This is how the HTML code above will be displayed in a
browser:

 Male
 Female
 Other

The Submit Button :-

<input type="submit"> defines a button for submitting the form
data to a form-handler.
The form-handler is typically a page on the server with a script
for processing input data.
The form-handler is specified in the form's action attribute.

Example :
A form with a submit button:
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><
br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><
br><br>
  <input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a
browser:
First name:
John

Last name:
Doe

Submit

The Action Attribute :-

The action attribute defines the action to be performed when the
form is submitted.
Usually, the form data is sent to a page on the server when the
user clicks on the submit button.
In the example above, the form data is sent to a page on the
server called "/action_page.php". This page contains a server-
side script that handles the form data:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current
page.
HTML Form Elements :-

The <input> Element

One of the most used form element is the <input> element.
The <input> element can be displayed in several ways,
depending on the type attribute.
Example :

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

Coding :-
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
 <input type="submit" value="Submit">
</form>
</body>
</html>

The <select> Element :-

The <select> element defines a drop-down list:
Example :
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

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

By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the
option:
Example :
<option value="fiat" selected>Fiat</option>
The <textarea> Element :-
The <textarea> element defines a multi-line input field (a text
area):
Example :
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The rows attribute specifies the visible number of lines in a text

area.
The cols attribute specifies the visible width of a text area.

The <button> Element :-

The <button> element defines a clickable button:

Example :
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>
 This is how the HTML code above will be displayed in a
browser:
Click Me! 

Note: Always specify the type attribute for the button element.

Different browsers may use different default types for the button
element.

HTML Form Elements :-

Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Input Type Submit :-

<input type="submit"> defines a button for submitting form
data to a form-handler.
The form-handler is typically a server page with a script for
processing input data.
The form-handler is specified in the form's action attribute:
Example :
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John">
<br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
<br><br>
  <input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a

browser:
First name:
John

Last name:
Doe
 

Submit

If you omit the submit button's value attribute, the button will
get a default text:

Example :
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><
br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><
br><br>
  <input type="submit">
</form>

Input Type Reset :-

<input type="reset"> defines a reset button that will reset all
form values to their default values:
Example :
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John">
<br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
<br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
This is how the HTML code above will be displayed in a
browser:
First name:
John

Last name:
Doe
 

Submit Reset
 

If you change the input values and then click the "Reset" button,
the form-data will be reset to the default values.

Input Type Radio :-

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

Radio buttons let a user select ONLY ONE of a limited number
of choices:

Example :
<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="femal
e">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>
This is how the HTML code above will be displayed in a
browser:

 Male
 Female
 Other

Input Type Checkbox :-

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

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

Example :
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value
="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value
="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value
="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>
This is how the HTML code above will be displayed in a
browser:

 I have a bike
 I have a car
 I have a boat

Input Type Button :-

<input type="button"> defines a button:

Example :
<input type="button" onclick="alert('Hello
World!')" value="Click Me!">

Input Type Color :-

The <input type="color"> is used for input fields that should
contain a color.
Depending on browser support, a color picker can show up in
the input field.
Example :
<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Input Type Date :-

The <input type="date"> is used for input fields that should
contain a date.
Depending on browser support, a date picker can show up in the
input field.
Example :
<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions

to dates:
Example :
<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="197
 9-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-
01-02">
</form>

Input Restrictions :-
Here is a list of some common input restrictions:

Attribute Description

checked Specifies that an input field should be pre-selected when

the page loads (for type="checkbox" or type="radio")

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input

field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value
against

readonly Specifies that an input field is read only (cannot be

changed)

required Specifies that an input field is required (must be filled

out)

size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where
you can enter a value from 0 to 100, in steps of 10. The default
value is 30:

Example :
 <form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" 
max="100" step="10"value="30">
</form>

Input Type Range :-

The <input type="range"> defines a control for entering a
number whose exact value is not important (like a slider
control). Default range is 0 to 100. However, you can set
restrictions on what numbers are accepted with the min, max,
and step attributes:
Example :
<form>
  <label for="vol">Volume (between 0 and 50):</label>
 <input type="range" id="vol" name="vol" min="0" max="50">
</form>

HTML Form and Input Elements :-

Tag Description
<form> Defines an HTML form for user input

<input> Defines an input control

HTML Tables :-

Defining an HTML Table :-

An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is
defined with the <th> tag. By default, table headings are bold
and centered. A table data/cell is defined with the <td> tag.

Example :
<table style="width:100%">
 <tr>
 <th>Firstname</th>
 <th>Lastname</th> 
 <th>Age</th>
 </tr>
 <tr>
 <td>Jill</td>
 <td>Smith</td> 
<td>50</td>
</tr>
  <tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
  </tr>
</table>
Coding :-
<html>
<head>
<title> table tag </title>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<td>Firstname</td>
<td>Lastname</td>
<td>Age</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</head>
</html>

Note: The <td> elements are the data containers of the table.

They can contain all sorts of HTML elements; text, images, lists,
other tables, etc.
HTML Table - Adding a Border :
If you do not specify a border for the table, it will be displayed
without borders.
A border is set using the CSS border property:
Example :
table, th, td {
  border: 1px solid black;
}

Coding :-
<html>
<head>
<title> tag </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered Table</h2>
<p>Use the border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<td>Firstname</td>
<td>Lastname</td>
<td>Age</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

HTML Table - Adding Cell Padding :

Cell padding specifies the space between the cell content and its
borders.
If you do not specify a padding, the table cells will be displayed
without padding.
To set the padding, use the CSS padding property:
Example :
th, td {
  padding: 15px;
}

HTML Table - Left-align Headings :

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example
th {
  text-align: left;
}

HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-
spacing property:
Example :
table {
  border-spacing: 5px;
}

HTML Table - Cells that Span Many

Columns :
To make a cell span more than one column, use
the colspan attribute:
Example :
<table style="width:100%">
 <tr>
 <th>Name</th>
 <th colspan="2">Telephone</th>
  </tr>
  <tr>
  <td>Bill Gates</td>
  <td>55577854</td>
  <td>55577855</td>
  </tr>
</table>

HTML Table - Cells that Span Many Rows :

To make a cell span more than one row, use
the rowspan attribute:
Example :
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

HTML Table Tags :-

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup Specifies a group of one or more columns in a table for

> formatting

<col> Specifies column properties for each column within a

<colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

HTML Lists :-

HTML List Example :

An Unordered List:

 Item
 Item
 Item
 Item
An Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List :-
An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
The list items will be marked with bullets (small black circles)
by default:
Example :
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Coding :
<html>
<head>
<title> unoderlist tag </title>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
 </ul>
</body>
</head>
</html>

Unordered HTML List - Choose List Item

Marker :-

The CSS list-style-type property is used to define the style of the

list item marker:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example - Circle
<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example - Square
<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example - None
<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered HTML List :-

An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
Example :
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Coding :-
<html>
<head>
 <title> orderlist tag </title>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</head>
</html>

Ordered HTML List - The Type Attribute :

The type attribute of the <ol> tag, defines the type of the list

item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A The list items will be numbered with uppercase letters
"

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman

numbers

type="i" The list items will be numbered with lowercase roman

numbers

Numbers:
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Letters:
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Roman Numbers:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Roman Numbers:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
HTML Description Lists :-
HTML also supports description lists.
A description list is a list of terms, with a description of each
term.
The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term:

Example :
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Coding :-
<html>
<head>
<title> description list </title>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</head>
</html>

Nested HTML Lists :-

List can be nested (lists inside lists):

Example :
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Coding :-
<html>
<head>
<title> nested list tag </title>
<body>
<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
 </ul>
</li>
<li>Milk</li>
</ul>
</body>
</head>
</html>

HTML List Tags :-

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

HTML and XHTML :-
HTML is HTML written as XML.

What Is XHTML:
 XHTML stands for
EXtensible HyperText Markup Language
 XHTML is almost identical to HTML
 XHTML is stricter than HTML
 XHTML is HTML defined as an XML application
  XHTML is supported by all major browsers

Why XHTML:
Many pages on the internet contain "bad" HTML.
This HTML code works fine in most browsers (even if it does
not follow the HTML rules):
<html>
<head>
 <title>This is bad HTML</title>
<body>
 <h1>Bad HTML
 <p>This is a paragraph
</body>

Today's market consists of different browser technologies. Some

browsers run on computers, and some browsers run on mobile
phones or other small devices. Smaller devices often lack the
resources or power to interpret "bad" markup.
XML is a markup language where documents must be marked
up correctly (be "well-formed").
XHTML was developed by combining the strengths of HTML
and XML.
XHTML is HTML redesigned as XML.
The Most Important Differences from HTML:
Document Structure

 XHTML DOCTYPE is mandatory

 The xmlns attribute in <html> is mandatory
 <html>, <head>, <title>, and <body> are mandatory
XHTML Elements

 XHTML elements must be properly nested

 XHTML elements must always be closed
 XHTML elements must be in lowercase
 XHTML documents must have one root element
XHTML Attributes

 Attribute names must be in lower case

 Attribute values must be quoted
 Attribute minimization is forbidden

How to Convert from HTML to XHTML

1. Add an XHTML <!DOCTYPE> to the first line of every
page
2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values
 UNIT -4

Image , Internal and External Linking between

Web pages

HTML Links – Hyperlinks :-

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will
turn into a little hand.
Note: A link does not have to be text. It can be an image or any
other HTML element.
HTML Links - Syntax
Hyperlinks are defined with the HTML <a> tag:
<a href="url">link text</a>

Example :
<a href="https://www.rungtacollege.com/html/"> HTML
tutorial</a>

Coding :-
<html>
<head>
<title> links tag </title>
<body>
<h2>HTML Links</h2>
<p><a href="https://www.rungtacollege.com/html/"> HTML
tutorial</a></p>
</body>
</head>
</html>
 The href attribute specifies the destination address
(https://www.link.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.

HTML Link Tags :-

Tag Description

<a> Defines a hyperlink

HTML Links :
HTML links are defined with the <a> tag:
Example :
<a href="https://www.filename.com">This is a link</a>

The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about
HTML elements.
Coding :-
<html>
<head>
<title> link tag </title>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.filename.com">This is a link</a>
</body>
</head>
</html>

HTML Images :-
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are
provided as attributes:
Example :
<img src="filename.jpg" width="104" height="142">
Coding :-
<html>
<head>
<title> image tag </title>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="filename.jpg" width="104" height="142">
</body>
</head>
</html>

HTML frames :-
An frame is used to display a web page within a web page.

frame Syntax :
An HTML frame is defined with the <frame> tag:
<frame src="URL"></frame>
The src attribute specifies the URL (web address) of the inline
frame page.
frame - Set Height and Width :
Use the height and width attributes to specify the size of the
frame.
The height and width are specified in pixels by default:

Example :-
<frame src="demo_frame.htm" height="200" width="300"></fr
ame>

Coding :-
<html>
<head>
<title> frame set </title>
<body>
<h2>HTML frames</h2>
<p>You can use the height and width attributes to specify the
size of the frame:</p>
<frame src="demo_frame.htm" height="200"
width="300"></frame>
</body>
</head>
 </html>

HTML frame Tag :-

Tag Description

<iframe> Defines an inline frame

HTML JavaScript :-
JavaScript makes HTML pages more dynamic and interactive.

Example :
My First JavaScript
Click me to display Date and Time

The HTML <script> Tag :

The <script> tag is used to define a client-side script
(JavaScript).
The <script> element either contains script statements, or it
points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form
validation, and dynamic changes of content.
To select an HTML element, JavaScript most often uses
the document.getElementById()method.
This JavaScript example writes "Hello JavaScript!" into an
HTML element with id="demo":

Example :
<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>

The HTML <noscript> Tag :

The <noscript> tag is used to provide an alternate content for
users that have disabled scripts in their browser or have a
browser that doesn't support client-side scripts:
 Example :
<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!

</noscript>

HTML Script Tags :-

Tag Description

<script> Defines a client-side script

<noscript Defines an alternate content for users that do not support

> client-side script
HTML Head :-

The HTML <head> Element :

The <head> element is a container for metadata (data about
data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is
not displayed.
Metadata typically define the document title, character set,
styles, scripts, and other meta information.
The following tags describe
metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <title> Element :

The <title> element defines the title of the document, and is
required in all HTML documents.
The <title> element:

 defines a title in the browser tab

 provides a title for the page when it is added to favorites
 displays a title for the page in search engine results
A simple HTML document:

Example :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>

Coding :-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>The content of the body element is displayed in the browser
window.</p>
<p>The content of the title element is displayed in the browser
tab, in favorites and in search engine results.</p>
</body>
</html>

UNIT-5
Creating Business Websites with Dynamic Web Pages

Web Server :-

Definition: A web server is a computer that runs websites. It's a

computer program that distributes web pages as they are
requisitioned. The basic objective of the web server is to store,
process and deliver web pages to the users. This
intercommunication is done using Hypertext Transfer Protocol
(HTTP). These web pages are mostly static content that includes
HTML documents, images, style sheets, test etc. Apart from
HTTP, a web server also supports SMTP (Simple Mail transfer
Protocol) and FTP (File Transfer Protocol) protocol for emailing
and for file transfer and storage. 

Description: The main job of a web server is to display the

website content. If a web server is not exposed to the public and
is used internally, then it is called Intranet Server. When anyone
requests for a website by adding the URL or web address on a
web browser’s (like Chrome or Firefox) address bar (like
www.economictimes.com), the browser sends a request to the
Internet for viewing the corresponding web page for that
address. A Domain Name Server (DNS) converts this URL to an
IP Address (For example 192.168.216.345), which in turn points
to a Web Server. 

The Web Server is requested to present the content website to

the user’s browser. All websites on the Internet have a unique
identifier in terms of an IP address. This Internet Protocol
address is used to communicate between different servers across
the Internet. These days, Apache server is the most common
web server available in the market. Apache is an open source
software that handles almost 70 percent of all websites available
today. Most of the web-based applications use Apache as their
default Web Server environment. Another web server that is
generally available is Internet Information Service (IIS). IIS is
owned by Microsoft.
Web Publishing :-
Web publishing, or "online publishing," is the process of publishing content on the
Internet. It includes creating and uploading websites, updating webpages, and
posting blogs online. The published content may include text, images, videos, and
other types of media.
In order to publish content on the web, you need three things: 1) web
development software, 2) an Internet connection, and 3) a web server. The software may
be a professional web design program like Dreamweaver or a simple web-based
interface like WordPress. The Internet connection serves as the medium
for uploading the content to the web server. Large sites may use a dedicated web host,
but many smaller sites often reside on shared servers, which host multiple websites.
Most blogs are published on public web servers through a free service like Blogger.
Since web publishing doesn't require physical materials such as paper and ink, it costs
almost nothing to publish content on the web. Therefore, anyone with the three
requirements above can be a web publisher. Additionally, the audience is limitless
since content posted on the web can be viewed by anyone in the world with an
Internet connection. These advantages of web publishing have led to a new era of
personal publishing that was not possible before.
NOTE: Posting updates on social networking websites like Facebook and Twitter is
generally not considered web publishing. Instead, web publishing generally refers to
uploading content to unique websites.

Web hosting :-
A web hosting service is a type of Internet hosting service that
allows individuals and organizations to make
their website accessible via the World Wide Web. Web hosts are
companies that provide space on a serverowned or leased for use
by clients, as well as providing Internet connectivity, typically in
a data center. Web hosts can also provide data center space and
connectivity to the Internet for other servers located in their data
center, called colocation, also known as Housing in Latin
America or France.

Search Engine :-
A web search engine or Internet search engine is a software
system that is designed to carry out web search (Internet
search), which means to search the World Wide Web in a
systematic way for particular information specified in a
textual web search query. The search results are generally
presented in a line of results, often referred to as search engine
results pages(SERPs). The information may be a mix of links
to web pages, images, videos, infographics, articles, research
papers, and other types of files. Some search engines also mine
data available in databases or open directories. Unlike web
directories, which are maintained only by human editors, search
engines also maintain real-time information by running
an algorithm on a web crawler. Internet content that is not
capable of being searched by a web search engine is generally
described as the deep web.

Static web page :-

A static web page (sometimes called a flat page or a stationary
page) is a web page that is delivered to the user's
web browser exactly as stored,[1]in contrast to dynamic web
pages which are generated by a web application.[2]
Consequently, a static web page displays the same information
for all users, from all contexts, subject to modern capabilities of
a web server to negotiate content-type or language of the
document where such versions are available and the server is
configured to do so.[3]
Static web pages are often HTML documents[4] stored as files in
the file system and made available by the web server
over HTTP (nevertheless URLsending with ".html" are not
always static). However, loose interpretations of the term could
include web pages stored in a database, and could even include
pages formatted using a template and served through an
application server, as long as the page served is unchanging and
presented essentially as stored.
Static web pages are suitable for the contents that never or rarely
need to be updated, though modern web template systems are
changing this. Maintaining large numbers of static pages as files
can be impractical without automated tools, such as static site
generators. Another way to manage static pages is Online
compiled source code playgrounds,
e.g. GatsbyJS and GitHub may be utilized for migrating
a WordPress site into statics web pages.Any personalization or
interactivity has to run client-side, which is restricting.

Advantages of a static website

 Provide improved security over dynamic websites
(dynamic websites are at risk to web shell attacks if
a vulnerability is present)[7]
 Improved performance for end users compared to dynamic
websites[8]
 Fewer or no dependencies on systems such as databases or
other application servers [9]
 Cost savings from utilizing cloud storage, as opposed to a
hosted environment[10]

Disadvantages of a static website

 Dynamic functionality must be performed on the client
side.

Dynamic web page :-

 

server-side dynamic web page is a web page whose

construction is controlled by an application server processing
server-side scripts. In server-side scripting, parametersdetermine
how the assembly of every new web page proceeds, including
the setting up of more client-side processing.
A client-side dynamic web page processes the web page
using HTML scripting running in the browser as it loads.
JavaScript and other scripting languages determine the way the
HTML in the received page is parsed into the Document Object
Model, or DOM, that represents the loaded web page. The same
client-side techniques can then dynamically update or change
the DOM in the same way. Even though a web page can be
dynamic on the client-side, it can still be hosted on a static
hosting service such as GitHub Pages or Amazon S3 as long as
there isn't any server-side code included.
A dynamic web page is then reloaded by the user or by
a computer program to change some variable content. The
updating information could come from the server, or from
changes made to that page's DOM. This may or may not
truncate the browsing history or create a saved version to go
back to, but a dynamic web page update using Ajax technologies
will neither create a page to go back to, nor truncate the web
browsing history forward of the displayed page. Using Ajax
technologies the end user gets one dynamic page managed as a
single page in the web browser while the actual web
content rendered on that page can vary. The Ajax engine sits
only on the browser requesting parts of its DOM, the DOM, for
its client, from an application server.
Common gateway interface :-
In computing, Common Gateway Interface (CGI) is an
interface specification for web servers to execute programs
like console applications (also called command-line interface
programs) running on a server that generates web pages
dynamically. Such programs are known as CGI scripts or simply
as CGIs. The specifics of how the script is executed by the
server are determined by the server. In the common case, a CGI
script executes at the time a request is made and generates
HTML.[1]
In brief, an HTTP GET or POST request from the client may
send HTML form data to the CGI program via standard input.
Other data, such as URL paths, and HTTP header data, are
presented as process environment variables.
FTP Software :-
FTP (File Transfer Protocol) is a standard internet protocol used,
as the name suggests, to transfer files between computers. FTP
software uses a client server model so it requires two parts, an
FTP client and an FTP server. Popular applications for FTP are
to upload or download files for archival or the sharing of files
too large for email. In most instances, today, FTP's function is
actually served by SFTP servers and SSH clients. SFTP is
similar to FTP with the exception that all traffic, including
passwords, commands and data, are encrypted to prevent
eavesdropping during transmission.

Cute FTP :-
CuteFTP is a series of FTP (file transfer protocol) client
applications distributed and supported since 1996
by GlobalSCAPE, who later bought the rights to the software.
Both a Windows-based or Mac-based interface were made for
both home and professional use.
CuteFTP is used to transfer files between computers and File
Transfer Protocol (FTP) servers to publish web pages, download
digital images, music, multi-media files and software, and
transfer files of any size or type between home and office.[2]
[3]
 Since 1999, CuteFTP Pro and CuteFTP Mac Pro have also
been available alongside CuteFTP Home with free trial periods.
It was originally developed by Alex Kunadze, a Russian
programmer.