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: How to create Lists in HTML and The types of lists in HTML
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 Ubuntu Linux 16.04 OS HTML5 gedit Text Editor and Firefox web browser 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 Group the related content together Create structured navigations like menu bars
Slide 7: Types of List	In HTML, there are three different types of Lists Unordered List Ordered List Definition or Description List All these types have a start and an end tag.
Slide 8: List Syntax <type of list> list item 1 list item 2 . . list item n </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 in the form of bulleted points without any obvious sequential order
Slide 10: Ordered List	Whereas Ordered List will list the contents in a numbered sequence can sequence the List in alphabets and roman numerals also
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.
<a href=""> Click Here </a> <a href="MyHomePage.html"> Local File Link </a> <a href="http://spoken-tutorial.org" target="_blank"> External Link </a>	Pause the tutorial and modify your code as shown.
Point and	Here I have started and ended with ul. This indicates that I am creating an Unordered list.
Point to and	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. We have to specify the style inside the start tag. This is the syntax
Slide 11: UL Style Types	The Unordered list styles are: Disc (default) Circle Square None 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: Numbers (1, 2, 3) Upper Case Letters (A, B, C) Lower Case Letters (a, b, c) Roman Numerals in Uppercase (I, II, III) Roman Numerals in Lowercase (i, ii, iii)
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 <dl> is not like the other two lists. It will display the list in the form of a name value pair. That means it will display the line item without prefixing it with a bullet or a number
Slide 13: Description List	Each list item will have a name and a value to it. Instead of li tag, we have to use dt and dd tags
Slide 13: Description List	dt refers to the Term or the name dd refers to the Term definition or the value Both dt and dd have a start and end tag
Slide 13: Description List	Must have at least one term and a value assigned to it. We can have multiple values for a single term.
Slide 14: Description List Name 1 value 1 Name 2 value 1 value 2	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 Dry fruits Cashew Fresh Fruits Orange Mango	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 Both the lists need not be the same For eg: Both need not be ordered or unordered or descriptive
Slide 15: Nested List Unit 1 Chapter 1 Chapter 2 Unit 2 Chapter 1 Chapter 2	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 Unit 1 Chapter 1 Chapter 2 Unit 2 Chapter 1 Chapter 2	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 Unordered List Ordered List Description List List styles & types and Nested List in HTML
Slide 17: Assignment Fruits Watermelon Papaya Vegetables Carrot Beetroot	As an assignment- Open the file MyHomePage.html which you have created earlier. Create a list as shown
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.

Contributors and Content Editors

Pravin1389