Programming Notes | HTML Beginner

Lists

Module 3

  • 4.9
  • 2021 Scheme | Programming Department

HTML Beginner Module 3 Programming Notes




There are three types of list; unordered lists, ordered lists and definition lists. We will look at the first two here, and the description lists them in the HTML Intermediate Tutorial.


Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.

The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.

Change your code to the following:


<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>
    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
    <ul>
        <li>To learn HTML</li>
        <li>To show off</li>
        <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
    </ul>

</body>

</html>

If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.

Lists can also be included in lists to form a structured hierarchy of items.

Replace the above list code with the following:


<ul>
    <li>To learn HTML</li>
    <li>
        To show off
        <ol>
            <li>To my boss</li>
            <li>To my friends</li>
            <li>To my cat</li>
            <li>To the little talking duck in my brain</li>
        </ol>
    </li>
    <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

Et voilà. A list within a list. And you could put another list within that. And another within that. And so on and so forth.

Powered by Froala Editor

Course Faq

Announcement

AcquireHowTo

Admin 1 year ago

Upcomming Updates of the AcquireHowTo

  • -- CGPA/SGPA Calculator with University Filter.
  • -- Student Projects Guide and Download.
  • -- Article Publishing platform for different categories.
  • -- Courses for students on different topics.
  • -- Student Dashboard for AcquireHowTo Products.
  • -- Online Portal to buy Minor Projects and Major Projects.
  • -- Last year Exams Question paper .
  • These all updates are comming soon on our portal. Once the updates roll out you will be notified.

1st
Semester
154
Total Views

1st Sem Programming Department Programming Notes
Full lifetime access
10+ downloadable resources
Assignments
Question Papers
No downloadable resourse avilable for now!

© copyright 2021 AcquireHowTo