UNORDERED LIST And Creating Sub list for same(# tutorial 10)

in blurtutorials •  4 years ago 

We saw unordered list yesterday and let us take the concept a little bit more ahead to see what more we can do with it and then I will leave the thing to you to search and do more stuff using the concept.

We will create a list and then a sub list for that list as well today so follow along the tutorial to see how to do that.

Final Result :

Screenshot from 2020-11-19 23-42-45.png

Steps

Step 1 : Create a proper html structure for your file.

Step 2 : write following code inside the body tag , here we have created the unordered list and then a sub list for our unordered list.

Screenshot from 2020-11-19 23-39-13.png

Step 3 : Run your file with any browser to know the output.

Screenshot from 2020-11-19 23-42-45.png

Full Code :

 <!DOCTYPE html>

<html>
<head>
   <meta charset="utf-8">
   <title>my first web page is here</title>
</head>

 <body>
 <h2>Here are the Name of Exchanges on Which Blurt has already been listed on and people who traded on them.</h2>
  <ul>    
 <h3><li>Ionomy</li>
 <ul>
 <li>@tomoyan</li>
 <li>@kahkashanrkploy</li></ul>
 
 <br> <li>Beldex</li> 
    <ul>
  <li>@jacobgadikian</li>
  <li>@kamranrkploy</li></ul>
 
<br>   <li>Stex</li>   
 <ul>
 <li>@megadrive</li>
 <li>@looking</li></ul>
 
<br>  <li>Hive Engine</li>   
 <ul>
 <li>@sunitahive</li>
 <li>@iammufasa</li></ul>
<br>  <li>Steem Engine</li> 
  <ul>
 <li>@upmewhale</li></ul>  
<br> <li>Leodex</li>
   <ul>
 <li>@double-u</li></ul>   
 </ul></h2>   
</body>

</html>


We have created a long unordered list this time of the names of exchanges on which blurt is listed on and also who traded on them.
It was just an example so i would request not to feel bad about it.
Here are names i have used.
Ionomy
@tomoyan
@kahkashanrkploy

Beldex
@jacobgadikian
@kamranrkploy

Stex
@megadrive
@looking

Hive Engine
@sunitahive
@iammufasa

Steem Engine
@upmewhale

Leodex
@double-u

Anyways , I think the concept will be clear now so just keep practising.

Thank You



THAT'S HOW YOU CREATE UNORDERED LIST.
THANK YOU.

Links for previous tutorials

  1. HTML BASICS AND CREATING PARAGRAPHS
  2. Headings in Html
  3. ANCHOR TAGS IN HTML
  4. Image tag in Html
  5. CREATE YOUR BASIC WEBSITE
  6. Inline Elements in Html
  7. BLOCK ELEMENTS IN HTML
  8. CONCEPT OF IFRAMES IN HTML , FULL TUTORIAL
  9. UNORDERED LIST IN HTML
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE BLURT!