HTML/C2/Lists-in-HTML/English
Title of the script: Lists in HTML
Author: Praveen S
Domain Reviewer: M.Deivamani
Novice Reviewer: Madhulika G
Keywords: HTML, Lists, Lists in HTML, Ordered lists, Unordered lists, Description lists, Definition List, List attributes,Nested List, Spoken Tutorial, Video Tutorial.
Visual Cue | Narration |
Slide 1: Introduction | Hello and welcome to the Spoken Tutorial on Lists in HTML. |
Slide 2: Learning Objectives | In this tutorial we will learn:
|
Slide 3: Prerequisite | To practise this tutorial, you should know to use any WYSIWYG or text editor and a web browser.
If not, then go through gedit Text Editor and Firefox tutorials on this website. |
Slide 4: System Requirements | To record this tutorial, I’m using
However you may use any other editor or browser of your choice. |
Slide 5: Code Files | The files used in this tutorial are available in the Code Files link on this tutorial page.
Please download and extract them. |
Slide 6: List | In HTML, Lists help us to
|
Slide 7: Types of List | In HTML, there are three different types of Lists
All these types have a start and an end tag. |
Slide 8: List Syntax
<type of list> . . </type of list> |
This is how the syntax of a List will look like.
Here li denotes list item. Type of the list and the list item tags have a start and an end tag. |
Slide 9: Unordered List | Unordered list will list the contents
|
Slide 10: Ordered List | Whereas Ordered List
|
Open MyFirstPage.html in gedit | Let us open our file MyFirstPage.html, which we created earlier.
The same is available in the Code Files link. |
Highlight the anchor tags | Here we have three different types of links.
Let us use these to create our Lists. |
|
Pause the tutorial and modify your code as shown. |
Point
|
Here I have started and ended with ul.
This indicates that I am creating an Unordered list. |
Point to |
Each list item is written between a separate li start and end tag. |
Press Ctrl + S keys | Save the file. |
Open MyFirstPage.html in Firefox | Switch to the folder where the file is saved.
Right-click on the filename and open in the web browser. |
Point to the links in bullet points | Here in the output, we can see that all the three links are now listed in bullet points.
I don’t want this to be in a rounded bullet point. Instead I want it in some other shape, say square. We can do this with the help of CSS. |
Slide 11: UL Style Types | *We can use CSS and style to modify how the unordered list should be displayed.
|
Slide 11: UL Style Types | The Unordered list styles are:
Switch to the editor window and try this. |
In Gedit
|
Inside the ul start tag, type as shown here |
Press Ctrl + S keys | Save the file. |
Switch to the browser >>refresh the page | Switch to the browser and refresh the page. |
Point to Squares | Instead of the rounded bullet points, we see square bullet points.
Similarly, we can change the unordered list styles to show other shapes for the bullets. |
Go to gedit window | Next we will learn how to create an ordered list.
Switch to the editor window. |
Point to List
Replace ul with ol Remove ul style attribute |
Here, I will make a very small change.
Instead of ul, I will type ol in the start and end tags. Also, I will remove the style attribute inside the start tag. |
Press Ctrl + S keys | Save the file. |
Switch to the browser >>refresh the page | Switch to the browser and refresh the page. |
Point to the links | Now the links are listed in a numbered sequence. |
Slide 12: OL types | There are several types in which you may display the ordered list using the type attribute.
They are:
|
Go to gedit window | Let us try these.
Switch back to the editor window. |
Inside ol start tag type
type = “a” |
Inside the ol start tag, let me add the following-
type equal to within double quotes a |
Press Ctrl + S keys | Save the file. |
Switch to the browser >>refresh the page | Switch to the browser and refresh the page. |
Point to the links | Note that, now the links are in lower case letter sequence. |
Next, we will learn the Definition or Description List. | |
Slide 13: Description List | *Description List
|
Slide 13: Description List | Each list item will have a name and a value to it.
|
Slide 13: Description List | *dt refers to the Term or the name
|
Slide 13: Description List | *Must have at least one term and a value assigned to it.
|
Slide 14: Description List
|
The way to write Description List is shown here. |
Go to gedit window | Let us try this.
Switch to the editor window. |
Type in Gedit
|
After the ordered list type the following piece of code as shown here. |
Press Ctrl + S keys | Save the file. |
Switch to the browser >>refresh the page | Switch to the browser and refresh the page. |
Point to Descriptive list. | Observe the change. |
Slide 15: Nested List | *We can also have a list inside a list. This is called a Nested List
|
Slide 15: Nested List
|
Here is an example of a Nested List.
Observe the format in which the list is arranged. Let us look at the code for this example |
Slide 15: Nested List
|
Pause the video and try this on your own. |
This brings us to the end of the tutorial.
Let us summarize. | |
Slide 16: Summary | In this tutorial, we have learnt about
in HTML |
Slide 17: Assignment
Fruits
Vegetables
|
As an assignment-
|
Slide 18:
About Spoken Tutorial project |
The video at the following link summarizes the Spoken Tutorial project.
Please download and watch it. |
Slide 19: About Workshop | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
Slide 20: Forum questions | Please post your timed queries in this forum. |
Slide 21: Acknowledgement | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
More information on this mission is available at this link. |
Slide 22: Thanks | This is Praveen from IIT Bombay signing off.
Thanks for watching. |