Difference between revisions of "HTML/C2/Lists-in-HTML/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(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...")
 
 
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.
 
'''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
 
|| Slide 11: UL Style Types
−
|| *We can use '''CSS''' and '''style''' to modify how the '''unordered''' '''list''' should be displayed.
+
||  
 +
*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'''.
 
*We have to specify the '''style '''inside the start '''tag'''.
 
*This is the syntax
 
*This is the syntax
Line 268: Line 269:
 
|-  
 
|-  
 
|| Slide 13: 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'''.
+
* '''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'''.
 +
* That means it will display the line item without prefixing it with a bullet or a number
  
 
|-  
 
|-  
Line 280: Line 282:
 
|-  
 
|-  
 
|| Slide 13: Description List
 
|| 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'''
 +
* '''dd '''refers to the''' Term definition '''or the''' value'''
 +
* Both '''dt''' and '''dd''' have a start and end '''tag'''  
  
 
|-  
 
|-  
 
|| Slide 13: Description List
 
|| Slide 13: Description List
−
|| *Must have at least one '''term '''and a '''value '''assigned to it.
+
||  
 +
*Must have at least one '''term '''and a '''value '''assigned to it.
 
*We can have multiple '''values '''for a single '''term'''.
 
*We can have multiple '''values '''for a single '''term'''.
  
Line 344: Line 349:
 
|-  
 
|-  
 
|| Slide 15: Nested List
 
|| 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'''
 +
* Both the '''lists''' need not be the same
 +
* For eg: Both need not be '''ordered '''or '''unordered '''or '''descriptive'''
  
 
|-  
 
|-  

Latest revision as of 17:02, 12 June 2018

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
    1. Unit 1
      • Chapter 1
      • Chapter 2
    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
    1. Unit 1
      • Chapter 1
      • Chapter 2
    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

    1. Watermelon
    2. 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

    Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C2/Lists-in-HTML/English&oldid=43432"