HTML/C2/Lists-in-HTML/English-timed

From Script | Spoken-Tutorial
Jump to: navigation, search
Time Narration
00:01 Hello and welcome to the Spoken Tutorial on Lists in HTML.
00:06 In this tutorial we will learn:

How to create Lists in HTML and The types of lists in HTML

00:16 To practise this tutorial, you should know to use any WYSIWYG or text editor and a web browser.
00:24 If not, then go through gedit Text Editor and Firefox tutorials on this website
00:31 To record this tutorial, I’m using

Ubuntu Linux 16.04 Operating System

00:38 HTML 5
00:41 gedit Text Editor and Firefox web browser
00:45 However you may use any other editor or browser of your choice.
00:51 The files used in this tutorial are available in the Code Files link on this tutorial page.
00:58 Please download and extract them.
01:01 In HTML, Lists help us to

Group the related content together

01:07 Create structured navigations like menu bars
01:11 In HTML, there are three different types of Lists
01:15 Unordered List
01:17 Ordered List
01:19 Definition or Description List
01:22 All these types have a start and an end tag.
01:26 This is how the syntax of a List will look like.
01:30 Here li denotes list item.
01:34 Type of the list and the list item tags have a start and an end tag.
01:40 Unordered list will list the contents in the form of bulleted points

without any obvious sequential order

01:49 Whereas Ordered List will list the contents in a numbered sequence
01:55 Can sequence the List in alphabets and roman numerals also
02:00 Let us open our file MyFirstPage.html, which we created earlier.
02:06 The same is available in the Code Files link.
02:10 Here we have three different types of links.

Let us use these to create our Lists.

02:16 Pause the tutorial and modify your code as shown.
02:22 Here I have started and ended with ul.

This indicates that I am creating an Unordered list.

02:31 Each list item is written between a separate li start and end tag.
02:37 Save the file.
02:39 Switch to the folder where the file is saved.
02:43 Right-click on the filename and open in the web browser.
02:48 Here in the output, we can see that all the three links are now listed in bullet points.
02:55 I don’t want this to be in a rounded bullet point.
02:58 Instead I want it in some other shape, say square.
03:03 We can do this with the help of CSS.
03:06 We can use CSS and style to modify how the unordered list should be displayed.
03:13 We have to specify the style inside the start tag.
03:17 This is the syntax
03:20 The Unordered list styles are:

Disc , Circle, Square, None

03:28 Switch to the editor window and try this.
03:32 Inside the ul start tag, type as shown here
03:38 Save the file.
03:40 Switch to the browser and refresh the page.
03:44 Instead of the rounded bullet points, we see square bullet points.
03:49 Similarly, we can change the unordered list styles to show other shapes for the bullets.
03:55 Next we will learn how to create an ordered list.

Switch to the editor window.

04:02 Here, I will make a very small change.
04:05 Instead of ul, I will type ol in the start and end tags.
04:11 Also, I will remove the style attribute inside the start tag.
04:16 Save the file.
04:18 Switch to the browser and refresh the page.
04:21 Now the links are listed in a numbered sequence.
04:26 There are several types in which you may display the ordered list using the type attribute.
04:31 They are:

Numbers , Upper Case Letters , Lower Case Letters

04:39 Roman Numerals in Uppercase, Roman Numerals in Lowercase
04:45 Let us try these.

Switch back to the editor window.

04:50 Inside the ol start tag, let me add the following-

type equal to within double quotes a

04:59 Save the file.

Switch to the browser and refresh the page.

05:05 Note that, now the links are in lower case letter sequence.
05:10 Next, we will learn the Definition or Description List.
05:14 Description List is not like the other two lists.
05:17 It will display the list in the form of a name value pair.
05:23 That means it will display the line item without prefixing it with a bullet or a number
05:30 Each list item will have a name and a value to it.

Instead of li tag, we have to use dt and dd tags

05:40 dt refers to the Term or the name
05:44 dd refers to the Term definition or the value

Both dt and dd have a start and end tag

05:54 Must have at least one term and a value assigned to it.
05:59 We can have multiple values for a single term.
06:03 The way to write Description List is shown here.
06:07 Let us try this.

Switch to the editor window.

06:11 After the ordered list type the following piece of code as shown here.
06:17 Save the file.
06:19 Switch to the browser and refresh the page.
06:22 Observe the change.
06:26 We can also have a list inside a list. This is called a Nested List
06:32 Both the lists need not be the same
06:35 For eg: Both need not be ordered or unordered or descriptive
06:42 Here is an example of a Nested List.

Observe the format in which the list is arranged.

06:49 Let us look at the code for this example
06:53 Pause the video and try this on your own.
06:57 This brings us to the end of the tutorial.

Let us summarize.

07:02 In this tutorial, we have learnt about

Unordered List, ‘Ordered List, Description List , |List styles & types and Nesed List

in HTML

07:13 As an assignment-

Open the file MyHomePage.html which you have created earlier.

07:21 Create a list as shown
07:25 The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it.

07:33 The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

07:43 Please post your timed queries in this forum.
07:47 Spoken Tutorial Project is funded by MHRD, Government of India.
07:53 This is Praveen from IIT Bombay signing off.

Thanks for watching.

Contributors and Content Editors

PoojaMoolya