View source for HTML/C2/Lists-in-HTML/English-timed

{| border=1

|-
|| 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.

|-
|}