Safcode Institute by Sir Safder





  • List in HTML

    There are 3 different types of lists. 
    	* <ul> - unordered list; bullets
    	* <ol> - ordered list; numbers
    	* <dl> - definition list; dictionary
    
    A <ol> tag starts an ordered list, 
    <ul> for unordered lists, and <dl> for definition lists.
    
    1. HTML Ordered Lists
    Use the <ol> tag to begin an ordered list. 
    Place the <li> (list item) tag between your opening <ol> and 
    closing </ol> tags to create list items. 
    
    Ordered simply means numbered, as the list below demonstrates.
    
    HTML Code:
    <h3>Names</h3>
    <ol>
    <li>Aqsa</li>
    <li>Muskan</li>
    <li>Hassan</li>
    <li>Sameer</li>
    </ol>
    
    Output:
    Names
    	1. Aqsa
    	2. Muskan
    	3. Hassan
    	4. Sameer
    
    Start your ordered list on any number besides 1 using the start attribute.
    
    HTML Code:
    
    <h3>Names</h3>
    <ol start="4">
    <li>Aqsa</li>
    <li>Muskan</li>
    <li>Hassan</li>
    <li>Sameer</li>
    </ol>
    
    Output:
    Names
    	4. Aqsa
    	5. Muskan
    	6. Hassan
    	7. Sameer
    
    Nothing fancy here, 
    start simply defines which number to begin numbering with.
    
    In Ordered Lists, There are 4 other types of ordered lists. 
    Instead of generic numbers you can replace them with Roman 
    numberals or letters, both capital and lower-case. 
    
    Use the type attribute to change the numbering.
    
    HTML Code:
    <ol type="a">
    <ol type="A">
    <ol type="i">
    <ol type="I">
    
    Ordered List Types:
    
    Lower-Case Letters 
    	a. HTML
    	b. CSS
    	c. Java Script
    
    Upper-Case Letters
    	A. HTML
    	B. CSS
    	C. Java Script
    
    Roman Lower-Case Numerals
    	i. HTML
    	ii. CSS
    	iii. Java Script
    	
    
    Roman Upper-Case Numerals
    	I. HTML
    	II. CSS
    	III. Java Script
    
    2. Unorder List
    Create a bulleted list with the <ul> tag. 
    
    The bullet itself comes in three flavors: 
    squares, discs, and circles. 
    
    The default bullet displayed by most web browsers is the 
    traditional full disc.
    
    HTML Code:
    <h3>Names</h3>
    <ul>
    <li>Aqsa</li>
    <li>Muskan</li>
    <li>Hassan</li>
    <li>Sameer</li>
    </ul>
    
    Unordered Lists Output:
    Names
    	* Aqsa
    	* Muskan
    	* Hassan
    	* Sameer
    
    Here's a look at the other flavors of unordered lists may look like.
    
    Unordered List Types:
    type="square"	type="disc"	type="circle"
    
    HTML Code:
    
    <ul type="square">
    <ul type="disc">
    <ul type="circle">
    
    3. HTML Definition Term Lists
    
    Make definition lists as seen in dictionaries using the <dl> tag. 
    These lists displace the term word just above the definition itself 
    for a unique look. 
    
    It's wise to bold the terms to displace them further.
    * <dl> - defines the start of the list
    * <dt> - definition term
    * <dd> - defining definition
    
    HTML Code:
    <dl>
    <dt><b>HTML</b></dt>
    <dd>Hyper Text Markup Language.</dd>
    <dt><b>PHP</b></dt>
    <dd>French word for car.</dd>
    </dt>
    HTML Code:
    HTML
         Hyper Text Markup Language.
    PHP
         Hypertext Preprocessor.
    Formatting Tags
    



  • You Can Also Watch Our Tutorial