HTML05: List

To display a list of items on a web site a <li> tag is used. For example, to display a list of five fruits:

Code snippet
Output
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pear</li>    

·         Apple
·         Orange
·         Grapes
·         Banana
·         Pear

There are two types of list, an ordered list or unordered list. An ordered list displays the number in front the each items in a list. Unordered list only display bullet in front of each items. By default, a list is unordered and uses disc bullet as shown in example above.
Ordered list uses <ol> tag and unordered list start with <ul>

Below is an example for ordered list
Code snippet
Output
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pear</li>
</ol>
1.       Apple
2.       Orange
3.       Grapes
4.       Banana
5.       Pear
Below is an example for unordered list:
Code Snippet
Output
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pear</li>
</ul>
·         Apple
·         Orange
·         Grapes
·         Banana
·         Pear





A list can be written inside of another list. this is known as nested ist. Example below shows the example for nested list.
Code Snippet
Output
<ol>
  <li>Apple
     <ul>
       <li>Apple Pie</li>
       <li>Apple Juice</li>
     </ul>
  </li>
  <li>Grapes
     <ul>
       <li>Grape Jam</li>
       <li>Grape Juice</li>
       <li>Grape Salad</li>
     </ul>
  </li>
  <li>Banana</li>
  <li>Pear</li>
</ol>
1.     Apple
o    Apple Pie
o    Apple Juice
2.     Grapes
o    Grape Jam
o    Grape Juice
o    Grape Salad
3.     Banana
4.     Pear

Changing the bullet of unordered list can be achieved using the type attribute. Types of bullets available are disc, circle and square.
Code Snippet
Output
<ul type = "square">
      <li>Apple</li>
      <li>Grape</li>
      <li>Banana</li>
      <li>Pear</li>
</ul>
  • Apple
  • Grape
  • Banana
  • Pear
<ul type = "circle">
      <li>Apple</li>
      <li>Grape</li>
      <li>Banana</li>
      <li>Pear</li>
</ul>
  • Apple
  • Grape
  • Banana
  • Pear

Ordered list also has several types that display different numbering format. To change the type of an ordered list numbering

Code Snippet
Output
<ol type = "a">
      <li>Apple</li>
      <li>Grape</li>
      <li>Banana</li>
      <li>Pear</li>
</ol>
a.      Apple
b.     Grape
c.      Banana
d.     Pear
<ol type = "i">
      <li>Apple</li>
      <li>Grape</li>
      <li>Banana</li>
      <li>Pear</li>
</ol>
       i.            Apple
     ii.            Grape
  iii.            Banana
   iv.            Pear



Comments

Post a Comment

Popular posts from this blog

Drawing Simple Pie Chart

Image
To draw pie chart with 5 sectors. The program calculates the total of all the input given by user and find the angle in degrees to draw each sectors. When the program first loads, chart based on default values is painted by the program. User can edit the values in the text field and presses draw button to redraw the chart. Each time the draw button is pressed, new set of angle is calculated and repainted. I have attached the the sources for this program. It is simple and needs upgrades. Pie.java This class executed the program and initializes the components JTextField and JPanel to draw the chart. package coolApp.graphics; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Pie { JTextField a,b,c,d,e; JButton btnDraw; double total; JPanel contentPane; Pie(){ JFrame frame = new JFrame("Pie - CoolApps"); frame.setSize(500,500); contentPane = new JPanel(); contentPane.setLayout(new BorderLayout()); frame
Read more

VB.net connecting to SQL Server

Connecting to SQL server 2014 from VB.Net 2017, read values from the database and display the data in windows form. Before begin to write this program, first we need to import SqlClient class. Imports System.Data.SqlClient Step 1 Create a sql connection object. This is to make connection to object. Dim conn As New SqlConnection() Step 2 Set the connection string to the sqlconnection object: conn.ConnectionString = connStr Road block The variable connStr is a connection string. Connection object need connection string to make connection to database. It has information like who providing the database, the name of the database and some security information. Dim connStr As String = "Data Source = ServerInstanceName;Initial Catalog=testDB;Integrated Security=True" Let's break down the connection string into the three main components. Dim provider As String = "ServerInstanceName;" Dim database As String = "Initial Catalog=testDB;" Dim
Read more

VB.net

a quick and convenient way to build a window based application. basically there is two main components in VB, the design view where we place the controls on a window form. then we have the code view where we write implementation for each controls on the form. Typically the control implementation or procedures are executed when certain events happens to the controls. Events like mouse click, or value change on text box, form load, form close and so on. After working with programming language like C, C++ and Java, getting use to VB is a bit challenging. its because first of all, VB don't use curly bracket to specify code blocks, and the statements don't end with semicolon. variable declaration for example is written as dim age As Integer in C, C++ and Java it written int age; in VB, variable declaration start with dim keyword, it means dimension and the functions are written as Function addNumber(ByVal num1 As Integer, ByVal num2 As Integer) As Integer addNumber
Read more