Building Static Website(part6) HTML Lists

 Building Static Website

(part6)

HTML Lists

Today, let us add some lists to our detailed view section by using html lists.

Lists:

List is a way to group related pieces of information, so that they are easy to read and understand.

For example:

Shopping list, To-do list…etc.

There are two types of lists:

1. Unordered list
2. ordered list

Unordered 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> list item1 </li>
  <li> list item2 </li>
</ul>

So, now let us add some points to the Mysore Palace and you need to place that code in the Mysore Palace detailed view section.

<div id="sectionmysorepalacedetailedview">
    <div class="bg-container2">
      <h1 class="mainheading1">Detailed View</h1>
    <div class="d-flex flex-row justify-content-center">
    <div class="container-card">
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="images/mysore1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="images/mysore2.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="images/mysore3.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <div class="text-container">
        <h1 class="heading2">Mysore Palace</h1>
        <p class="paragraph1">Mysore Palace, also known as Amba Vilas Palace, is a historical palace and a royal residence (house). It is located in Mysore, Karnataka, India.  It used to be the official residence of the Wadiyar dynasty and the seat of the Kingdom of Mysore. </p>
        <ul class="paragaraph1 unorderd-list">
          <li>Palace Entrance Timings: Everyday from 10.00 am to 5.30 pm.</li>
          <li>Tickets issued for Palace Entrance between 10.00AM – 5.30 PM.</li>
        </ul>
      </div>
      </div>
    </div>
    </div>

And this how the unorderd list items are added.

Now let us add the styling to list items using CSS.

list style types are like circle, square, dic and none means no symbol.

.unordered-list{
    list-style-type:square;
}

This is how the square list type are added and in the same way you can use different list style types.

Ordered 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:

The list style types are like: upper-alpha, lower-roman, lower-alpha.

<ol>
  <li> list item1 </li>
  <li> list item2 </li>
</ol>

<ol class="paragraph1 ordered-list">
          <li>Palace Entrance Timings: Everyday from 10.00 am to 5.30 pm.</li>
          <li>Tickets issued for Palace Entrance between 10.00AM to 5.30 PM.</li>
        </ol>

Now let us add the styling to list items using CSS.

.ordered-list{
    list-style-type:upper-alpha;
}

In the same way you can use different list style types.