Lessons menu
HTML - basic - Lesson nr. 4
Lists

What this lesson is about?

In this lesson we will learn how to create lists on a webpage. We will get to know two types of lists: the numbered ones, called ordered lists and the ones with symbols, called unordered lists.


New tags of this lesson:

<ul> </ul> - it marks an unordered/unnumbered list. It is an abbreviation for the words unordered list.
<ol> </ol> - it marks the ordered/numbered lists. It is an abbreviation for the words ordered list.
<li> </li> - it marks a list item for both types of lists. It is an abbreviation for list item.

Selecting the symbols used in a list

A HTML tag may have attributes (properties). In the case of the lists we can use the type attribute to change the symbol used in marking a list item. This works for both types of lists. As the HTML language develops and changes, many of the attributes are transferred to the CSS languages sphere of action.

 

The possible values of the type attribute:

In the case of unordered lists:

  • <ul type = "square">
  • <ul type = "disc">
  • <ul type = "circle"> 

For ordered lists:
  • <ol type = "1"> - numbers
  • <ol type = "I">  - roman numbers using uppercase letters
  • <ol type = "i"> - roman numbers using lowercase letters
  • <ol type = "A"> - uppercase letters
  • <ol type = "a"> - lowercase letters
Exercises
1. Copy the following text to the end of the index.html file and format it to a combination of ordered and unordered lists. The text in the first row should be a second level header.

We set the following steps for making a website:

  1. Firstly, a simple visual presentation is needed, including:
  • an outline of page structure (that is called “wireframe”); 
  • shapes and colors;
  • illustrative pictures.
    2. Then you have to script it into an actual dynamic and interactive web page, that has:
  • buttons from navigation;
  • posts to upload;
  • cute pictures;
  • invisible data flowing behind (so called back-end, which rules the buttons, the posts and the cute pictures).

3.     You have to take care of a server, which is the place that hosts and serves pages to users.
View the result
2. Edit the toplangs.html file and put the title The most popular programming languages in 2018 into a h3 heading and the enumeration of programming languages into an unordered list with square symbols.
View the result
3. Edit tips.html and format the text according to the comments in it.
View the result
Questionnaire
1. If we want to create a numbered list, which pair of HTML tags do we need?
2. The following HTML sequence contains an error. In which row is it?
<ul>
<li>Java</li>
<li>C++</li>
<li>JavaScript<li>
<li>C#</li>
</ul>
3. In the following code, what do we need to insert after the word List so that the next word (Header) appears in a new, numbered row?
<ol>
<li>Paragraph</li>
<li>List Header</li>
</ol>
4. If we create an unordered list which symbol could mark our list items?
Supplementary information
You can try to create lists here: https://www.w3schools.com/html/html_lists.asp
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept