E Commerce File - Lavanyam Kuhar

NAME :
LAVANYAM KUHAR
ENROLMENT NO. :
02919301721
SUBJECT :
E-COMMERCE FILE
SUBJECT CODE:
112
1.
The HyperText Markup
Language or HTML is the
standard markup language for documents
designed to be displayed in a web
browser. It can be assisted by
technologies such as Cascading Style
Sheets (CSS) and scripting
languages such as JavaScript.
2.
1. Paired and Unpaired Tags
re the paired and unpaired taFollowing ags in
HTML explained in detail with the help of
examples.
Paired Tags
An HTML tag is known as a paired tag when
the tag consists of an opening tag and a
closing tag as its companion tag. An HTML
Paired tag starts with an opening tag: the tag
name enclosed inside the angle brackets; for
example, a paragraph opening tag is written as
‘<p>’. The content follows the opening tag,
which ends with an ending tag: the tag name
starting with a forward slash; for example, an
ending paragraph tag is written as ‘</p>’. The
first tag can be referred to as the ‘Opening
Tag’, and the second tag can be called Closing
Tag.
Example #1:
<p> This text is a paragraph . </p>
Output:
NOTE: Here, the opening tag is, and the

closing tag is </p>.
Example #2:
Another example of a paired tag is italic
and/or bold tags:
Popular Course in this category
HTML Training (12 Courses, 19+

Projects, 4 Quizzes) 12 Online Courses | 19
Hands-on Projects | 89+ Hours | Verifiable
Certificate of Completion | Lifetime Access | |
4 Quizzes with Solutions
4.5 (9,330 ratings)
Course Price
₹6999 ₹41999
View Course
Related Courses
Bootstrap Training (2 Courses, 6+ Projects)XML
Training (5 Courses, 6+ Projects)CSS Training (9
Courses, 9+ Projects)
<i> <b> This is a bold and italicized text </b>
</i>
Output:
Note: These paired tags are also

called Container Tags.
Unpaired Tags
An HTML tag is called an unpaired tag when
the tag only has an opening tag and does not
have a closing tag or a companion tag. The
Unpaired HTML tag does not require a closing
tag; an opening tag is sufficient in this type.
Unpaired tags are sometimes also named as
Standalone Tags or Singular Tags since they do
not require a companion tag.
Example:
<p> This is a paragraph </p>
<hr>
<i> <b> This is a bold and italicized text </b>
</i>
Output:
Note: Here, the <hr> is the unpaired tag used
to create a horizontal line. In older versions,
you might see hr tag written as <hr/> instead
of <hr>. These tags are also called Empty Tag.
2. Self-Closing Tags
Self-Closing Tags are those HTML tags that do
not have a partner tag, where the first tag is
the only necessary tag that is valid for the
formatting. The main and important
information is contained WITHIN the element
as its attribute. An image tag is a classic
example of a self-closing tag. Let’s see it in
action below:
Example:
<img src="a.jpg" alt="This is an alternate
text">
Note: In the older versions, the self-closing
tags use a ‘forward slash’ before the ending or
closing ‘greater than’ sign/symbol, as written
below:
<img src=”a.jpg” alt=”This is an alternate text”
/>
3. Utility-Based Tags
The HTML tags can be widely differentiated on
the basis of their utility,that is, on the basis of
the purpose they serve. We can divide them
basically into three categories as discussed
below:
Formatting Tags
The HTML tags that help us in the formatting
of the texts like the size of the text, font styles,
making a text bold, etc. This is done using tags
like <font>, <b>, <u>, etc. Tables, divisions,
and span tags are also those tags that help
format a web page or document and set the
layout of the page. Below is a small program
using divisions for formatting the page along
with some other formatting tags.
Example:
<body>
<div class="container">
<div class="row">
<div class="col-25">
<label for="email"><b>Name</b></label>
</div>
<input type="text" placeholder="First"
name="fname" required>
</div>
<input type="text" placeholder="Last"
name="lname" required>
</div>
</div>
</div>
</body>
Output:
Structure Tags
The HTML tags that help in structuring the
HTML document are called Structure Tags.
Description, head, html, title, body, etc., form
the group of the page structure tags. The
structure tags only assist in creating or forming
the basic html page from the root; that is, they
do not affect or has any hand in the formatting
of texts. So a basic HTML program is the basic
group of structural tags:
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Types of Tags Demo</title>
</head>
<body>
<p> This is a paragraph </p>
<i><b> This is a bold and italicized text
</b></i>
</body>
</html>
Output:
Control Tags
Another category of tags that can be created is
‘Control Tags’. The Script tags, radio buttons or
checkboxes, the Form tags, etc., forms the
control tags. These are the tags that are used
in managing content or managing scripts or
libraries that are external. All the form tags,
drop-down lists, input text boxes, etc., are
used in interacting with the visitor or the user.
The above distinction of the HTML tags is
based on the type of tags and their utility. The
HTML tags can also be simply divided based on
basic categories like Basic HTML Root Tags,
Formatting tags, Audio and Video Tags, Form
and Input Tags, Frame Tags, Link Tags, List
Tags, Table Tags, Style Tags, Meta Tags, etc.
3.
Basic structure of an HTML document
The basic structure of an HTML document consists of 5 elements:

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>
5. <body>
The DOCTYPE
A DOCTYPE declaration must be specified on the first line of each web document:
The DOCTYPE tells the web browser which version of HTML the page is written in. In this class, we
will be using ‘XHTML Transitional’, which allows us a little flexibility.
The <html> Element
Immediately following the DOCTYPE declaration is the <html> element:
The <html> element tells the browser that the page will be formatted in HTML and, optionally, which
world language the page content is in.
The <head> and <body> Elements
The <head> element surrounds all the special “behind the scenes” elements of a web document. Most of
these elements do not get displayed directly on the web page.
The <body> element surrounds all the actual content (text, images, videos, links, etc.) that will be
displayed on our web page.
The <meta> Element
Immediately after the <head> line, we place this <meta> element:
This line declares that the document is encoded in the UTF-8 (Unicode) character set.
There can be multiple <meta> lines in the same web page. The <meta> element is often used to provide
additional information such as page keywords, a page description, and the author(s) of a web document.
The <title> Element

The <title> element defines what text will show in the web browser’s title bar:
Every web document must include one and only one instance of DOCTYPE, <html>, <head>, <body>,
and <title>.
4.
To save an HTML document
1. Make sure the file you want to save is visible in the right pane.
2. Do one of the following:
• To save the file is saved in its current location with its current name, do one of the
following:
o On the main menu, click File > Save.
o On the HTML editor toolbar, click the Save icon .

o Press CTRL+S.
o Right-click within the HTML document, click File > Save.
If the file has never been saved before, CuteFTP opens the Save
As dialog box.
1.
• To save the file with a new name and/or location, do one of the following:
o On the main menu, click File > Save As.

o Right-click within the HTML document, click File > Save As.
o In the Save As dialog box, specify the file name and location, then
click Save.
• To save all open HTML documents at the same time:
. On the main menu, click File > Save All. All open documents are saved.
If you have not saved all of them previously, the Save As dialog box
appears for each new file.
a. Specify a name and location for each new file, then click Save.
5.
This includes information including title, meta tags, content type,
<head> </head>
links to external pages like CSS and JavaScript.
<body> </body> This contains the contents of the document
<title> </title> This is the text that goes in the title bar or the browser window.
<h1> </h1> This is the largest heading

Heading 1
<h2> </h2> This is second biggest heading
Heading 2
<h3> </h3> This is the next heading
Heading 3
<h4> </h4> This is another heading Heading 4
<h5> </h5> This is the second smallest heading Heading 5
<h6> </h6> This is the smallest heading

Heading 6
abc
<br /> n/a This tag allows you to insert line breaks
def
The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
The <p> tag defines a paragraph. Browsers automatically add a single blank line before and after each <p> element.
The <blockquote> tag specifies a section that is quoted from another source. Browsers usually
indent <blockquote> elements.
The <pre> tag defines preformatted text.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.
The <div> tag defines a division or a section in an HTML document.The <div> tag is used as a container for HTML
elements - which is then styled with CSS or manipulated with JavaScript.The <div> tag is easily styled by using the
class or id attribute.Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after the <div> element.
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
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.
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.
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.
The <area> tag defines an area inside an image map (an image map is an image with clickable areas).
<area> elements are always nested inside a <map> tag.
Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship
between the image and the map.
HTML <basefont> tag was used to specify the default value of font-size, color, and font-family for all content written within
an HTML document.
Note: The <basefont> was deprecated in HTML 4 and completely removed from HTML5 so do not use this tag, instead of it you can
use CSS to style the document.
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 H 2O.
Tip: Use the <sup> tag to define superscripted text.
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].
Tip: Use the <sub> tag to define subscript text.
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.
The <link> element is an empty element, it contains attributes only.
6.
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.
Tips and Notes

You can use the comment tag to "hide" scripts from browsers without support for scripts (so
they don't show them as plain text):
<script type="text/javascript">

</script>
Note: The two forward slashes at the end of comment line (//) is the JavaScript comment
symbol. This prevents JavaScript from executing the --> tag.
Standard Attributes
The comment tag does not support any standard attributes.
More information about Standard Attributes.
Event Attributes
The comment tag does not support any event attributes.
More information about Event Attributes.
7.
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
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>
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>
Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a
specified number, you can use the start attribute:
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Note: A list item (<li>) can contain a new list, and other HTML elements, like images and
links, etc.
Chapter Summary
• Use the HTML <ol> element to define an ordered list
• Use the HTML type attribute to define the numbering type
• Use the HTML <li> element to define a list item
• Lists can be nested
• List items can contain other HTML elements
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
8.
HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list
where we do not need to display items in any particular order. The HTML ul tag is used for the unordered
list. There can be 4 types of bulleted list:
o disc
o circle
o square
o none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
Type Description
Type "disc" This is the default style. In this style, the list items are marked with b
Type "circle" In this style, the list items are marked with circles.
Type "square" In this style, the list items are marked with squares.
Type "none" In this style, the list items are not marked .
HTML Unordered List Example

1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Output:
o HTML
o Java
o JavaScript
o SQL
AD
ul type="circle"
1. <ul type="circle">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="square"
1. <ul type="square">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Output:
o HTML
o Java
o JavaScript
o SQL
AD
ul type="none"
1. <ul type="none">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Output:
o HTML
o Java
o JavaScript
o SQL
Note: The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style-
type. Following is the example to show the CSS property for ul tag.
1. <ul style="list-style-type: square;">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2>The type attribute with CSS property</h2>
7. <ul style="list-style-type: square;">
8. <li>HTML</li>
9. <li>Java</li>
11. <li>SQL</li>
12. </ul>
13. </body>
14. </html>
Output:
Supporting Browsers
Element Chrome IE
<ul> Yes Yes Ye
9.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes
each term/name).
Global Attributes
The <dl> tag also supports the Global Attributes in HTML.
Event Attributes
The <dl> tag also supports the Event Attributes in HTML.
Related Pages
HTML tutorial: HTML Lists
HTML DOM reference: DList Object
Default CSS Settings
Most browsers will display the <dl> element with the following default values:
Example
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
10.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes
each term/name).
<dl> Yes Yes Yes Yes
Global Attributes
The <dl> tag also supports the Global Attributes in HTML.
Event Attributes
The <dl> tag also supports the Event Attributes in HTML.
Related Pages
HTML tutorial: HTML Lists
HTML DOM reference: DList Object
Default CSS Settings
Most browsers will display the <dl> element with the following default values:
Example
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
11.
The <dir> tag was used in HTML 4 to list directory titles.
What to Use Instead?
Example
Use <ul> to create a directory list:

<ul>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</ul>
Example
Reduce line-height in a list (with CSS):

<ul style="line-height:80%">
<li>html</li>
<li>xhtml</li>
<li>css</li>
</ul>
12.
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.
Example
You can try the following code to insert an image in an HTML page −
<!DOCTYPE html>
<html>
<head>
<title>HTML img Tag</title>
</head>
<body>
<img src="https://www.tutorialspoint.com/html/images/test.png" alt="Simply Easy
Learning" width="200" height="80">
</body>
</html>
Output
13.
To use image as a link in HTML, use the <img> tag as well as the <a> tag with the href
attribute. The <img> tag is for using an image in a web page and the <a> tag is for adding
a link. Under the image tag src attribute, add the URL of the image. With that, also add the
height and width.
Example
You can try to run the following code to use an image as a link in HTML
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
The following image works as a link:<br>
<a href="https://www.qries.com/">
<img alt="Qries" src="https://www.qries.com/images/banner_logo.png"
width=150" height="70">
</a>
</body>
</html>
14.
To create table in HTML, use the <table> tag. A table consist of rows and columns, which can
be set using one or more <tr>, <th>, and <td> elements. A table row is defined by the <tr>
tag. To set table header, use the <th> tag. For a table cell, use the <td> tag.
Just keep in mind, table attributes such as align, bgcolor, border, cellpadding, cellspacing
deprecated and isn’t supported by HTML5. Do not use them.
Example
You can try the following code to create a table in HTML. We’re also using the <style> tag to
style the table border
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Programming Languages</h1>
<table>
<tr>
<th>Language</th>
<th>Release Year</th>
</tr>
<tr>
<td>Java</td>
<td>1995</td>
</tr>
<tr>
<td>Pascal</td>
<td>1970</td>
</tr>
</table>
</body>
</html>
Output
15.
HTML tables can have cells that spans over multiple rows and/or columns.
NAME
APRIL
2022
FIESTA
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Note: The value of the colspan attribute represents the number of columns to span.
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
Note: The value of the rowspan attribute represents the number of rows to span.
16.
HTML tables can adjust the padding inside the cells, and also the space between the cells.
With Padding
hello hello hello
hello hello hello
hello hello hello
With Spacing
hello hello hello
hello hello hello
hello hello hello
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
Example
th, td {
padding: 15px;
}
To add padding only above the content, use the padding-top property.
And the others sides with the padding-bottom, padding-left, and padding-right properties:
Example
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on
the table element:
Example
table {
border-spacing: 30px;
}
19.
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:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<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>
20.
HTML <frame> tag define the particular area within an HTML file where another HTML web
page can be displayed.
A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or
frames, and each frame can contain different web pages.
Note: Do not use HTML <frame> tag as it is not supported in HTML5, instead you can use
<iframe> or <div> with CSS to achieve similar effects in HTML.
21. & 22.

Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements,
how elements are positioned and laid out, what background images or background colors
are to be used, different displays for different devices and screen sizes, and much more!
Tip: The word cascading means that a style applied to a parent element will also apply to
all children elements within the parent. So, if you set the color of the body text to "blue", all
headings, paragraphs, and other text elements within the body will also get the same color
(unless you specify something else)!
Using CSS
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in
this tutorial we will use inline and internal styles, because this is easier to demonstrate, and
easier for you to try it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be displayed
with a "powderblue" background color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
Tip: With an external style sheet, you can change the look of an entire web site, by
changing one file!

E Commerce File - Lavanyam Kuhar

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E Commerce File - Lavanyam Kuhar

Uploaded by

Copyright:

Available Formats

NAME :

NOTE: Here, the opening tag is, and the

HTML Training (12 Courses, 19+

Note: These paired tags are also

The basic structure of an HTML document consists of 5 elements:

The <title> Element

o On the main menu, click File > Save.

o On the HTML editor toolbar, click the Save icon .

o On the main menu, click File > Save As.

<h1> </h1> This is the largest heading

<h4> </h4> This is another heading Heading 4

<h5> </h5> This is the second smallest heading Heading 5

<h6> </h6> This is the smallest heading

Tip: Use the <sup> tag to define superscripted text.

Tip: Use the <sub> tag to define subscript text.

The <link> element is an empty element, it contains attributes only.

Tips and Notes

More information about Standard Attributes.

More information about Event Attributes.

Ordered HTML List

The list items will be marked with numbers by default:

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

Uppercase Roman Numbers:

Lowercase Roman Numbers:

Control List Counting

HTML List Tags

<ul> Defines an unordered 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 Unordered List Example

The <dl> tag also supports the Global Attributes in HTML.

The <dl> tag also supports the Event Attributes in HTML.

HTML tutorial: HTML Lists

HTML DOM reference: DList Object

Default CSS Settings

<dl> Yes Yes Yes Yes

The <dl> tag also supports the Global Attributes in HTML.

The <dl> tag also supports the Event Attributes in HTML.

HTML tutorial: HTML Lists

HTML DOM reference: DList Object

Default CSS Settings

What to Use Instead?

Use <ul> to create a directory list:

Reduce line-height in a list (with CSS):

HTML Table - Colspan

HTML Table - Rowspan

hello hello hello

hello hello hello

hello hello hello

HTML Table - Cell Padding

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

HTML Table - Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

21. & 22.

CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements

An inline CSS is used to apply a unique style to a single HTML element.