Shivam HTML
Shivam HTML
NAME-SHIVAM KUMAR
Enrollment No.-01819301721
Course-BBA
Semester-2ND
E-COMMERCE
1: What is HTML?
To understand "HTML" from front to back, let's look at each word that makes up the
abbreviation:
Hypertext: text (often with embeds such as images, too) that is organized in order to
connect related items
Markup: a style guide for typesetting anything to be printed in hardcopy or soft copy
format
Language: a language that a computer system understands and uses to interpret
commands.
HTML determines the structure of web pages. This structure alone is not enough to make
a web page look good and interactive. So you'll use assisted technologies such as CSS
and JavaScript to make your HTML beautiful and add interactivity, respectively.
There are two types of tags in HTML that are used by the Website Designers:
It is necessary to close a paired tag; otherwise, it can result in the malfunctioning of the
website. When the content is written within paired tags, then it ensures that the effect of
those tags would be limited to only the content between them.
Look at the list of some paired tags in HTML below. Notice that each tag has a closing
tag with a slash(/) before the name of the tag.
2
E-COMMERCE
Look below the list of some Unpaired Tags in HTML. Notice the use of slash(/) in the tags,
to close them.
Open Tag
<br>
<hr>
<meta>
<input>
<html>
<head>
<title>
<body>
3
E-COMMERCE
SYNTAX
<html>
<head>
<title>basic structure</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of HTML document structure</p>
</body>
</html>
4
E-COMMERCE
You need to select the "Save" Option from there to save your HTML Code.
6
E-COMMERCE
The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
Metadata typically define the document title, character set, styles, scripts, and other meta
information.
7
E-COMMERCE
2 <body>
The <body> element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
3 <title>
The <title> tag defines the title of the document. The title must be text-only, and it is
shown in the browser's title bar or in the page's tab.
The contents of a page title is very important for search engine optimization (SEO)! The
page title is used by search engine algorithms to decide the order when listing pages in
search results.
<h1> defines the most important heading. <h6> defines the least important heading.
Note: Only use one <h1> per page - this should represent the main heading/subject for
the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and
so on.
8
E-COMMERCE
The <br> tag is an empty tag which means that it has no end tag.
6 Font
The <font> tag defines the font characteristics. Size, color and typeface are defined by
the size, color and face attributes.
7 Paragraph
Browsers automatically add a single blank line before and after each <p> element.
8 Blockquote
The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements (look at example below to see how to
remove the indentation).
9 Pre-Formatted Tags
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both
spaces and line breaks. The text will be displayed exactly as written in the HTML source
code.
9
E-COMMERCE
Tag Description
9 DIV Tag
The <div> tag is used as a container for HTML elements - which is then styled with CSS
or manipulated with JavaScript.
Note: By default, browsers always place a line break before and after the <div> element.
10 HR
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
10
E-COMMERCE
The <hr> element is most often displayed as a horizontal rule that is used to separate
content (or define a change) in an HTML page.
11 Address
The <address> tag defines the contact information for the author/owner of a document
or an article.
The contact information can be an email address, URL, physical address, phone number,
social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add
a line break before and after the <address> element.
12 Marquee
The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the
settings.
13 Area
The <area> tag defines an area inside an image map (an image map is an image with
clickable areas).
14 Basefont
The <basefont> tag was used in HTML 4 to specify a default text-color, font-size or
font-family for all the text in an HTML document.
11
E-COMMERCE
15 Sub
The <sub> tag defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2O.
16 Sup
The <sup> tag defines superscript text. Superscript text appears half a character above
the normal line, and is sometimes rendered in a smaller font. Superscript text can be
used for footnotes, like WWW[1].
17 Link
The <link> tag defines the relationship between the current document and an external
resource.
The <link> tag is most often used to link to external style sheets or to add a favicon to
your website.
<html>
<head>
<title>coding</title>
12
E-COMMERCE
</head>
</MARQUEE>
<body>
color: rgb(255,0,255);">hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<p>
<H1>Defining e-commerce</H1>
The term was coined and first employed by Dr. Robert Jacobson, Principal Consultant to
the California State Assembly's Utilities & Commerce Committee
13
E-COMMERCE
, in the title and text of California's Electronic Commerce Act, carried by the late
Committee Chairwoman Gwen Moore (D-L.A.) and enacted in 1984.<br>
E-commerce typically uses the web for at least a part of a transaction's life cycle although
it may also use other technologies such as e-mail. Typical e-commerce transactions
include
the purchase of products (such as books from Amazon) or services (such as music
downloads in the form of digital distribution such as iTunes Store).[1] There are three
areas
.[2] The existence value of e-commerce is to allow consumers to shop online and pay
online through the Internet,
saving the time and space of customers and enterprises, greatly improving transaction
efficiency, especially for busy office workers, but also saving a lot of valuable time.[3]
<hr><font style=arial>
<br>
Online shopping for retail sales direct to consumers via web sites and mobile apps, and
conversational commerce via live chat, chatbots, and voice assistants;[4]
Gathering and using demographic data through web contacts and social media;
14
E-COMMERCE
Marketing to prospective and established customers by e-mail or fax (for example, with
newsletters);
</p>
</body>
</html>
15
E-COMMERCE
6-Comments in HTML.
The comment tag is used to insert comments in the source code. Comments are not
displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the
source code at a later date. This is especially useful if you have a lot of code.
You can use the comment tag to "hide" scripts from browsers without support for
scripts (so they don't show them as plain text):
SYNTAX:
<script type="text/javascript">
<!--
function displayMsg() {
alert("Hello World!")
}
//-->
</script>
Note: The two forward slashes at the end of comment line (//) is the JavaScript
comment symbol. This prevents JavaScript from executing the --> tag.
16
E-COMMERCE
Type Description
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>
17
E-COMMERCE
The list items will be marked with bullets (small black circles) by default:
18
E-COMMERCE
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Value Description
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>
19
E-COMMERCE
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>
9 - Definition list
1. HTML definition list represents a term and a relevant description in the form of the
list.
2. HTML definition list starts and ends with dl element (i.e. <dl> and </dl>).
20
E-COMMERCE
5. Another usage of dl, dt and dd elements are to create a dialog. Where each dt specifies
the name of the speaker, and each dd containing his or her words.
Syntax
<dl>
<dt>
<dd>text</dd>
</dt>
.......................................
</dl>
Coding
<html>
<dl>
<dt>PHP</dt>
<dd>A server side scripting language.</dd>
<dt>JavaScript</dt>
<dd>A client side scripting language.</dd>
</dl>
</html>
21
E-COMMERCE
10 - Menu List
HTML <menu> tag specifies a list or menu of commands that a user can perform or
activate. It is used for creating context menu as well as lists menu.
A <menu> element can contain one or more <li> or <menuitem> elements within it.
Syntax
1. <menu>........</menu>
Display Inline
Syntax
<html>
<head>
<title>Menu Tag</title>
</head>
<body>
<h2>Example of Menu Tag</h2>
<menu>
<li>Home</li>
<li>Registration</li>
<li>Contact-us</li>
<li>About-us</li>
</menu>
</body>
</html>
22
E-COMMERCE
11 - Directory List
Use the dir tag in HTML to display directory list. This is very similar to <ul> tag but do
not use <dir> since it is deprecated now.
You can try to run the following code to show a directory list in HTML –
<html>
<head>
</head>
<body>
<dir>
<li>car</li>
<li>bike</li>
<li>ship</li>
</dir>
</body>
</html>
23
E-COMMERCE
Images can be easily inserted at any section in an HTML page. To insert image in an
HTML page, use the <img> tags. It is an empty tag, containing only attributes since the
closing tag is not required.
Just keep in mind that you should use the <img> tag inside <body>…</body> tag. The
src attribute is used to add the image source i.e. URL of the image. The alt attribute is for
adding alternate text, width for adding width, and height for adding the height of the
image.
Syntax:
<html> <head>
</head> <body>
</body>
</html>
24
E-COMMERCE
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. A link can be an image or any other HTML element!
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.
25
E-COMMERCE
Example
<html>
</html>
Output:
26
E-COMMERCE
HTML tables allow web developers to arrange data into rows and columns.
Everything between <td> and </td> are the content of the table cell.
Each table row starts with a <tr> and end with a </tr> tag.
Sometimes you want your cells to be headers, in those cases use the <th> tag instead
of the <td> tag:
By default, the text in <th> elements are bold and centered, but you can change that
with CSS.
Syntax:
<html>
<tr>
<th colspan="4">list</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
27
E-COMMERCE
<td>d</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</html>
Output:
28
E-COMMERCE
HTML tables allow web developers to arrange data into rows and columns.
Everything between <td> and </td> are the content of the table cell.
Each table row starts with a <tr> and end with a </tr> tag.
Sometimes you want your cells to be headers, in those cases use the <th> tag instead
of the <td> tag:
By default, the text in <th> elements are bold and centered, but you can change that
with CSS.
Syntax:
<html>
<tr>
<th colspan="4">list</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
29
E-COMMERCE
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</html>
30
E-COMMERCE
</html>
<tr>
<th colspan="7">CALENDAR</th>
</tr>
<tr>
</tr>
<tr>
<th>s</th>
<th>m</th>
<th>t</th>
<th>w</th>
<th>t</th>
<th>f</th>
<th>s</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
31
E-COMMERCE
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
32
E-COMMERCE
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</html>
</table>
33
E-COMMERCE
Output:
<html>
<title>Admission Form</title>
<head>
<body bg color="white">
<form>
<tr>
<td>STUDENT NAME:</td>
</tr>
<tr>
</tr>
<tr>
34
E-COMMERCE
</TEXTAREA></td>
</tR>
</td></tr>
<tr>
<td>
</td></tr>
<tr>
<td>
</td></tr>
<tr>
<td>
COURSE:</td><td><select>
35
E-COMMERCE
<option>BBA</option>
<option>BED</option>
<option>BCOM</option>
<option>BJMC</option>
</select>
</td></tR>
</table>
</form>
</body>
</head>
</html>
Output:
36
E-COMMERCE
19 - IMAGE MAP
The HTML <map> tag defines an image map. An image map is an image with clickable
areas. The areas are defined with one or more <area> tags.
Try to click on the computer, phone, or the cup of coffee in the image below:
EXAMPLE
Here is the HTML source code for the image map above:
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
The Areas
SHAPE
You must define the shape of the clickable area, and you can choose one of these
values:
You must also define some coordinates to be able to place the clickable area onto the
image.
SHAPE="RECT"
37
E-COMMERCE
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-
axis.
So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from
the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels
from the top:
<area shape="rect" coords="34, 44, 270, 350" href="computer.html">
SHAPE="CIRCLE"
To add a circle area, first locate the coordinates of the center of the circle:
337,300
The shape="poly" contains several coordinate points, which creates a shape formed
with straight lines (a polygon).
38
E-COMMERCE
39
E-COMMERCE
Style Sheets provide a way of customizing whole pages at once and in much
richer detail than the simple use of tags and attributes. For example, we can
use a style sheet to change the standard text color, the font and size of the
headers, the margins of a page, the background color, or a figure. Style
sheet represents W3Ceffort to improve on the tag and attribute-based style
of formatting.
CODING
H1
{
FONT-FAMILY: MONOTYPE CORSIVA;
COLOR: RGB(255,0,0);
}
H3
{
FONT-FAMILY: ARIAL BLACK;
COLOR: RGB(0,255,255);
}
H4
{
FONT-FAMILY: TIMES NEW ROMAN;
COLOR: RGB(255,0,255);
}
H5
{
FONT-FAMILY: ARIAL;
COLOR: RGB(0,255,0);
}
40
E-COMMERCE
CODING
<HTML>
<HEAD>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="PAGE1.CSS">
</HEAD>
<BODY>
<H1> SLIENCE IS THE BEST ANSWER TO SOMEONE WHO DOESN'T VALUE
YOUR WORDS.” </H1>
<H2>“SLIENCE IS THE BEST ANSWER TO SOMEONE WHO DOESN'T VALUE
YOUR WORDS.” </H2>
<H3> “SLIENCE IS THE BEST ANSWER TO SOMEONE WHO DOESN'T VALUE
YOUR WORDS.” </H3>
<H4> “SLIENCE IS THE BEST ANSWER TO SOMEONE WHO DOESN'T VALUE
YOUR WORDS.” </H4>
<H5>“SLIENCE IS THE BEST ANSWER TO SOMEONE WHO DOESN'T VALUE
YOUR WORDS.” </H5>
<H6> “SLIENCE IS THE BEST ANSWER TO SOMEONE WHO DOESN'T VALUE
YOUR WORDS.” </H6>
</BODY>
</HTML>
41
E-COMMERCE
OUTPUT
EXAMPLE:-2
CODING
<HTML>
<HEAD>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="PAGE1.CSS">
<STYLE>
H1 {
FONT-FAMILY: MONOTYPE CORSIVA; COLOR: RGB(255,0,0);
</STYLE>
</HEAD>
<BODY>
<H1 STYLE=" FONT-FAMILY: MONOTYPE CORSIVA; COLOR: RGB(0,255,0);">
Shivam Kumar </H1>
<H1> Shivam Kumar </H1>
<H1 STYLE=" FONT-FAMILY: MONOTYPE CORSIVA; COLOR: RGB(0,255,255);">
THANK YOU</H1>
</BODY>
</HTML>
42
E-COMMERCE
Output
23 - NESTED LIST
<HTML>
<BODY>
<OL>
<LI> BATCH - 2021-24 </LI>
<UL>
<LI>BBA </LI>
<UL>
<LI> 1st SHIFT</LI>
<LI> 2nd SHIFT </LI>
</UL>
<LI> B.COM </LI>
<UL>
<LI> 1st SHIFT</LI>
<LI> 2nd SHIFT </LI>
</UL>
</UL>
43
E-COMMERCE
<HR>
<LI> BATCH 2021-23 </LI>
<UL>
<LI>B.ED</LI>
<UL>
<LI> 1st SHIFT</LI>
<UL>
</UL>
</OL>
</BODY>
</HTML>
OUTPUT
44
E-COMMERCE
3. WEB BROWSER:- A web browser is application software for accessing the World
Wide Web or a local website. When a user requests a web page from a particular
website, the web browser retrieves the necessary content from a web server and
then displays the page on the user's device.
5. WEBPAGE:- A web page is a hypertext document on the World Wide Web. Web
pages are delivered by a web server to the user and displayed in a web browser. A
website consists of many web pages linked together under a common domain
name. The name "web page" is a metaphor of paper pages bound together into a
book.
45
E-COMMERCE
6. STATIC AND DYNAMIC WEBSITE:- A static website is one with stable content,
where every user sees the exact same thing on each individual page. On the other
hand, a dynamic website is one where content is pulled on-the-fly, allowing its
content to change with the user.
46
E-COMMERCE
47