Scribd
Upload
24 views

Syntax:: HTML Lang Charset Name Content

Uploaded by

Parvathareddy NagaVarun kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views

Syntax:: HTML Lang Charset Name Content

Uploaded by

Parvathareddy NagaVarun kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Q: How to remove numbering of ordered list?

In order remove numbering of order list, we use css style called


“liststyle”. The value of liststyle is None.

Q: What is need of creating list without numbers?


In web development ordered list is also used for creating
navigation or navbar.

Syntax:
Ol
{
list-style:None;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
ol
{
list-style: None;
}
li {
margin-bottom: 20px;
}
</style>
</head>
<body>
<nav>
<ol>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contacts</li>
</ol>
</nav>
</body>
</html>

Q: How to create multi column ordered list?


Multi column ordered list is create by defining display property of
order list as grid.

Syntax:
Ol
{
Display:grid;
Grid-template-columns : 6fr 6fr;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
ol {
display:grid;
grid-template-columns: 6fr 6fr;
}
</style>
</head>
<body>
<h3>What is HTML?</h3>
<ol type="A">
<li>HTML is a Language</li>
<li>HTML is a script</li>
<li>HTML is Database</li>
<li>HTML Markup Language</li>
</ol>
<h3>What is CSS</h3>
<ol type="A">
<li>CSS......</li>
<li>CSS ....</li>
<li>CSS ....</li>
<li>CSS ....</li>
</ol>
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
ol {
display:grid;
grid-template-columns: 6fr 6fr;
}
</style>
</head>
<body>
<h3>What is HTML?</h3>
<ol type="A">
<div>
<li>HTML is a Language</li>
<li>HTML is a script</li>
</div>
<div>
<li>HTML is Database</li>
<li>HTML Markup Language</li>
</div>
</ol>
<h3>What is CSS</h3>
<ol type="A">
<li>CSS......</li>
<li>CSS ....</li>
<li>CSS ....</li>
<li>CSS ....</li>
</ol>
</body>
</html>
Unordered list

Unordered list items are display without numbering or order.

Q: What is difference between ordered list and unordered list?


An unordered list ( <ul> ) is used to create a list of items in no
particular order i.e. the order of items is not relevant. By default,
the items in this list will be marked with bullets. Whereas, an
ordered list ( <ol> ) is used to create a list of items in a specific
order.

Unordered list definition is given using <ul> tag.


Unordered list items are defined using <li> tag.

Syntax:
<ul>
<li>item-1</li>
<li>item-2 </li>
<li>item-3</li>
</ul>
Unordered list style can be changed using css or type attribute of
ul element.
Syntax-1 without using CSS:
<ul type=”circle/disc/square”>
<li></li>
<li></li>
</ul>

Syntax-2 with using CSS


Ul
{
List-style: circle/disc/square/none;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
li
{
font-size: 30px;
list-style: square;
}
</style>
</head>
<body>
<h3>Introduction to HTML</h3>
<ul >
<li>What is HTML?</li>
<li>History of HTML</li>
<li>HTML Applications</li>
</ul>
</body>
</html>

Nested unordered list


Defining unordered list inside unordered list is called nested
unordered list.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
li
{
font-size: 30px;
}
</style>
</head>
<body>
<h3>Introduction to HTML</h3>
<ul >
<li>What is HTML?</li>
<ul>
<li>HTML is markup language</li>
<ul>
<li> Used for webpage creation</li>
<ul>
<li> wepage is collection of tags</li>
</ul>
</ul>
</ul>
<li>History of HTML</li>
<li>HTML Applications</li>
</ul>
</body>
</html>

Nested list can be anything,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
li
{
font-size: 30px;
}
</style>
</head>
<body>
<h3>Introduction to HTML</h3>
<ol >
<li>What is HTML?</li>
<ul>
<li>HTML is markup language</li>
<ol>
<li> Used for webpage creation</li>
<ul>
<li> wepage is collection of tags</li>
</ul>
</ol>
</ul>
<li>History of HTML</li>
<li>HTML Applications</li>
</ul>
</body>
</html>

<pre>…</pre>

This element represent preformatted block of text. It is a block


level element

Syntax:
<pre>
content
</pre>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pre element test</title>

</head>
<body>
<pre>
Given an array of integers nums and an integer target, return indices
of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and
you may not use the same element twice.
You can return the answer in any order.

<b>Example 1:</b>

Input: nums = [2,7,11,15], target = 9


Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].
Example 2:

Input: nums = [3,2,4], target = 6


Output: [1,2]
Example 3:

Input: nums = [3,3], target = 6


Output: [0,1]
</pre>
</body>
</html>

You might also like