HTML-Booklet

HTML offers web creators three different ways for determining arrangements of data. All rundowns must contain at least one rundown component. Records may contain : 

<ul> − An unordered rundown. This will list things utilizing plain shots. 

<ol> − An arranged rundown. This will utilize various plans of numbers to list your things. 

<dl> − A definition list. This orchestrates your things similarly as they are organized in a word reference. 

HTML Unordered Lists 

An unordered rundown is an assortment of related things that have no exceptional request or arrangement. This rundown is made by utilizing the HTML <ul> tag. Everything in the rundown is set apart with a slug. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>       
</ul>
</body>
</html>

Output:

  • Fox
  • Tiger
  • Bear
  • Elephant

 

 

The sort Attribute 

You can utilize the sort ascribe for <ul> tag to determine the kind of slug you like. As a matter of course, it is a circle. Following are the potential choices :

<ul type = “square”

<ul type = “disc”

<ul type = “circle”

Model

Following is a model where we utilized <ul type = “square”> 

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul  type = “square”>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>
</ul>
</body>
</html>

Output:

  • Fox
  • Tiger
  • Bear
  • Elephant

 

Model 

Following is a model where we utilized <ul type = “disc”>

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul  type = “disc”>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>         
<li>Elephant</li>
</ul>
</body>
</html>

Output:

  • Fox
  • Tiger
  • Bear
  • Elephant

 

Model 

Following is a model where we utilized <ul type = “circle”> 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = “circle”>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>       
</ul>
</body>
</html>

Output:

  • Fox
  • Tiger
  • Bear
  • Elephant

 

HTML Ordered Lists 

In the event that you are required to place your things in a numbered list rather than bulleted, at that point HTML requested rundown will be utilized. This rundown is made by utilizing the <ol> tag. The numbering begins at one and is increased by one for each progressive arranged rundown component labeled with <li>. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>       
</ol>
</body>
</html>

Output:

  1. Fox
  2. Tiger
  3. Bear
  4. Elephant

 

The sort Attribute 

You can utilize the sort credit for <ol> tag to determine the kind of numbering you like. As a matter of course, it is a number. Following are the potential alternatives. 

<ol type = “1”> – Default-Case Numerals. 

<ol type = “I”> – Upper-Case Numerals. 

<ol type = “i”> – Lower-Case Numerals. 

<ol type = “A”> – Upper-Case Letters. 

<ol type = “a”> – Lower-Case Letters. 

Model 

Following is a model where we utilized <ol type = “1”> 

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol type = “1”>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>       
</ol>
</body>
</html>

Output:

  1. Fox
  2. Tiger
  3. Bear
  4. Elephant

 

Model 

Following is a model where we utilized <ol type = “I”> 

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol type = “I”>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>       
</ol>
</body>
</html>

Output:

  1. Fox
  2. Tiger
  3. Bear
  4. Elephant

 

Model 

Following is a model where we utilized <ol type = “i”> 

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol type = “i”>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>       
</ol>
</body>
</html>

Output:

  1. Fox
  2. Tiger
  3. Bear
  4. Elephant

 

Model 

Following is a model where we utilized <ol type = “A” > 

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol type = “A”>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>      
<li>Elephant</li>       
</ol>
</body>
</html>

Output:

  1. Fox
  2. Tiger
  3. Bear
  4. Elephant

 

Model 

Following is a model where we utilized <ol type = “a”> 

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol type = “a”>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>     
</ol>
</body>
</html>

Output:

  1. Fox
  2. Tiger
  3. Bear
  4. Elephant

 

The beginning Attribute 

You can utilize the beginning ascribe for the <ol> tag to determine the beginning stage of numbering you need. Following are the potential choices :

<ol type = “1” start = “4”> – Numerals start with 4. 

<ol type = “I” start = “4”> – Numerals start with IV. 

<ol type = “I” start = “4”> – Numerals start with iv. 

<ol type = “a” start = “4”> – Letters start with d. 

<ol type = “A” start = “4”> – Letters start with D. 

Model 

Following is a model where we utilized <ol type = “a” start = “4” >

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol type = “a” start=”4″>
<li>Fox</li>
<li>Tiger</li>
<li>Bear</li>
<li>Elephant</li>  
</ol>
</body>
</html>

Output:

  1. Fox
  2. Tiger
  3. Bear
  4. Elephant

 

HTML Definition Lists 

HTML and XHTML underpins a rundown style which is called definition records where passages are recorded like in a word reference or reference book. The definition list is the perfect method to introduce a glossary, rundown of terms, or other name/esteem list. 

Definition List utilizes the accompanying three labels. 

<dl> − Defines the beginning of the rundown

<dt> − A term

<dd> − Term definition

</dl> − Defines the finish of the rundown 

Model

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>CSS</b></dt>
<dd>CSS stands for Cascading Style Sheet</dd>
<dt><b>PHP</b></dt>     
<dd>PHP stands for Hypertext Preprocessor</dd>
</dl>
</body>
</html>

Output:

CSS
CSS stands for Cascading Style Sheet
PHP
PHP stands for Hypertext Preprocessor

 

 

 

Share