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