Pravin1389 at 11:32, 12 June 2018

2018-06-12T11:32:58Z

Pravin1389: Created page with "'''Title of the script:''' Lists in HTML '''Author:''' Praveen S '''Domain Reviewer:''' M.Deivamani '''Novice Reviewer:''' Madhulika G '''Keywords:''' HTML, Lists, Lists i..."

2018-06-12T11:03:46Z

Created page with "'''Title of the script:''' Lists in HTML '''Author:''' Praveen S '''Domain Reviewer:''' M.Deivamani '''Novice Reviewer:''' Madhulika G '''Keywords:''' HTML, Lists, Lists i..."

New page

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

<li> list item 1 </li>

<li> list item 2 </li>

.

.

<li> list item n </li>

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

|-
|| <ul>

<li> <a href=""> Click Here </a> </li>

<li> <a href="MyHomePage.html"> Local File Link </a> </li>

<li> <a href="http://spoken-tutorial.org" target="_blank"> External Link </a> </li>

</ul>
|| Pause the tutorial and modify your code as shown.

|-
|| Point <ul> and </ul>
|| Here I have started and ended with '''ul'''.

This indicates that I am creating an '''Unordered''' '''list.'''

|-
|| Point to <li> and </li>
|| 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

<ul style="list-style-type:style">

|-
|| 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
<ul style="list-style-type:square" >
|| 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

'''<dl>'''

'''<dt> Name 1</dt>'''

'''<dd> value 1 </dd>'''

'''<dt> Name 2 </dt>'''

'''<dd> value 1 </dd>'''

'''<dd> value 2 </dd>'''

'''</dl>'''
|| 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
<dl>

<dt> Dry fruits </dt>

<dd> Cashew </dd>

<dt> Fresh Fruits </dt>

<dd> Orange </dd>

<dd> Mango </dd>

</dl>
|| 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

<ol>

<li> Unit 1 </li>

<ul>

<li> Chapter 1 </li>

<li> Chapter 2 </li>

</ul>

<li> Unit 2 </li>

<ul>

<li> Chapter 1 </li>

<li> Chapter 2 </li>

</ul>

</ol>

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

|-
|}

@@ Line 9: / Line 9: @@
 '''Keywords:''' HTML, Lists, Lists in HTML, Ordered lists, Unordered lists, Description lists, Definition List, List attributes,Nested List, Spoken Tutorial, Video Tutorial.
-{|
+{| border=1
 |-
@@ Line 158: / Line 158: @@
 |-
 || 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
@@ Line 268: / Line 269: @@
 |-
 || 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'''.
+* '''Description List <nowiki> <dl> </nowiki> ''' is not like the other two '''lists'''.
-*That means it will display the line item without prefixing it with a bullet or a number
+* It will display the '''list '''in the form of a '''name value pair'''.
 |-
@@ Line 280: / Line 282: @@
 |-
 || 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'''
+* '''dt '''refers to''' '''the '''Term '''or the''' name'''
 |-
 || 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'''.
@@ Line 344: / Line 349: @@
 |-
 || 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'''
+* We can also have a '''list''' inside a '''list'''. This is called a '''Nested List'''
 |-

HTML/C2/Lists-in-HTML/English - Revision history

Pravin1389 at 11:32, 12 June 2018

Pravin1389: Created page with "'''Title of the script:''' Lists in HTML '''Author:''' Praveen S '''Domain Reviewer:''' M.Deivamani '''Novice Reviewer:''' Madhulika G '''Keywords:''' HTML, Lists, Lists i..."