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

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