top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Short Notes on HTML Lists

+2 votes
1,065 views

Lists

A list is a collection of items, which might be organized in a sequential or unsequential manner. You can use a list to display related items that belong to a particular category. For example, to display the types of computers such as mainframe, microcomputer, and laptops, you would organize these items one below the other under the Types of Computer category. Similarly, HTML allows you to to display related items in a list on a web page.

A list in HTML can contain paragraphs, line breaks, images, links, and other lists. The items within a list are displayed on a web page one below the other using bullets. HTML supports three types of lists.

These are:

  • Ordered
  • Unordered
  • Definition

Ordered Lists

An ordered list is a list of items arranged in a particular order. Here, the order of the items is important as it indicates a sequential flow. For example, to display the days in a week or months in a year, you would use numbered bullets. Similarly, HTML allows you to implement numbered or alphabetic bullet.

HTML provides two elements for creating an ordered list. These are:

  • OL: creates an ordered list.
  • LI: Specifies an item and it is a sub-element of the OL element.

Example for Ordered List

<HTML>
<HEAD>
<TITLE>Days in a Week</TITLE>
</HEAD>
<BODY>
<H2>Days in a Week:</H2>
<OL>
<LI>Sunday</LI>
<LI>Monday</LI>
<LI>Tuesday</LI>
<LI>Wednesday</LI>
<LI>Thursday</LI>
<LI>Friday</LI>
<LI>Saturday</LI>
</OL>
</BODY>
</HTML>

 Output

“list-style-type” Property

The list-style-type property is used to specify a numbering style for the ordered list. It is the property of the style attribute, which is specified within the <OL> tag.

You can specify styles such as roman numeral or alphabets for bullets, which will be applied to an ordered list, see the below table.

Property’s Value

Example

Decimal

1,2,3, …

Lower-alpha

a,b,c, …

Upper-alpha

A,B,C, …

Lower-roman

I, ii, iii, …

Upper-roman

I,II,III, …

 

 

Unordered Lists

An unordered list is a list wherein the items are arranged in a random order. This means that you will create an unordered list when the order of related items is not important. For example, to list the features of a product, you would create an unordered list. Each item in an unordered list is displayed using symbolic bullet such as circles and squares. These bullets are similar to the bullets provided by Microsoft Office Word.

HTML provides the UL element to create an unordered list.

Example for Unordered Lists

<HTML>
<HEAD>
<TITLE>Features of EasyPad</TITLE>
</HEAD>
<BODY>
<H2>Features of EasyPad</H2>
<UL>
<LI>Opens many files at a time</LI>
<LI>Unlimited undo and redo</LI>
<LI>Reads and writes both Windows and Unix files</LI>
</UL>
</BODY>
</HTML>


Output

“list-style-type” Property

The list-style-type property specifies the type of bullet to be applied to an unordered list. There are three types of bullets defined for the unordered lists in HTML. These bullet types are namely, disc, square, and circle; which the values that the list-style-type property can hold. The default value is disc, which is applied to unordered list even if the list-style-type property is not specified. These values are not case-sensitive.

 

Definition Lists

A definition list refers to a collection of terms with their corresponding description. For example, you  can display a glossary on a web page by creating a definition list appears with the term indented on the left followed by the description on the right or on the next line. By default, the description text appears on the next line and is aligned with respect to the term.

You can specify a single line or multiple lines of description for each term. HTML provides three elements to create a definition list. These elements are:

  • DL: Is a container element that consists of the DT and DD sub-elements. It specifies that a definition list will be created using these elements.
  • DT: Specifies the term to be defined or described.
  • DD: Specifies the term to be defined or described.4

Example for Definition Lists

<HTML>
<HEAD>
<TITLE>TYPES OF NOUNS</TITLE>
</HEAD>
<BODY>
<H2>Types of Nouns</H2>
<DL>
<DT><B>Common Noun:</B></DT>
<DD> It is a name of an object in general, such as
pencil, pen, paper, and so no.</DD>
<DT><B>Proper Noun:</B></DT>
<DD>It is the unique name of a person or a place.</DD>
</DL>
</BODY>
</HTML>

Output 

 

posted Jun 1, 2017 by Pooja Singh

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Short Notes On Queue

A Queue is a linear data structure. It is a list in which all insertions to the queue are performed at one end and all the deletions are performed at the other end. The element in the queue are processed in the same order in which they were received. Hence it is called a First In First Out(FIFO) list.

Applications of Queue

  1. Serving requests on a single shared resource, like a printer, CPU task scheduling etc.
  2. In real life, Call Center phone systems will use Queues, to hold people calling them in an order, until a service representative is free.
  3. Handling of interrupts in real-time systems.

Basic operation 

  • enqueue() − add (store) an item to the queue.

  • dequeue() − remove (access) an item from the queue.

Enqueue Operation

Queues maintain two data pointers, front and rear.

The steps should for enqueue (insert) data into a queue −

Step 1 − Check if the queue is full.

Step 2 − If the queue is full, produce overflow error and exit.

Step 3 − If the queue is not full, increment rear pointer to point the next empty space.

Step 4 − Add data element to the queue location, where the rear is pointing.

Step 5 − return success.

Dequeue Operation

Accessing data from the queue is a process of two tasks − access the data where front is pointing and remove the data after access.

Step 1 − Check if the queue is empty.

Step 2 − If the queue is empty, produce underflow error and exit.

Step 3 − If the queue is not empty, access the data where front is pointing.

Step 4 − Increment front pointer to point to the next available data element.

Step 5 − Return success.

 

Array Implementation Of Queue

#include <stdio.h>

#define MAX 50

int queue_array[MAX];

int rear = - 1;

int front = - 1;

main()

{

    int choice;

    while (1)

    {

        printf("1.Insert element to queue \n");

        printf("2.Delete element from queue \n");

        printf("3.Display all elements of queue \n");

        printf("4.Quit \n");

        printf("Enter your choice : ");

        scanf("%d", &choice);

        switch (choice)

        {

            case 1: insert();

            break;

            case 2: delete();

            break;

            case 3: display();

            break;

            case 4: exit(1);

            default: printf("Wrong choice \n");

        }   /*End of switch*/

    }   /*End of while*/

}   /*End of main()*/

insert()

{

    int add_item;

    if (rear == MAX - 1)

       {         

    printf("Queue Overflow \n");        

       }

    else

    {

        if (front == - 1)           

           {

        /*If queue is initially empty */

        front = 0;

        printf("Inset the element in queue : ");

        scanf("%d", &add_item);

        rear = rear + 1;

        queue_array[rear] = add_item;

           }

    }

} /*End of insert()*/

 

delete()

{

    if (front == - 1 || front > rear)

    {

        printf("Queue Underflow \n");

        return ;

    }

    else

    {

  printf("Element deleted from queue is : %d\n", queue_array[front]);

  front = front + 1;

    }

} /*End of delete() */

display()

{

    int i;

    if (front == - 1)        

       {

        printf("Queue is empty \n");

       }

    else

    {

        printf("Queue is : \n");

        for (i = front; i <= rear; i++)

            {

            printf("%d ", queue_array[i]);             

            printf("\n");

            }

    }

}

  Analysis of Queue

  • Enqueue : O(1)
  • Dequeue : O(1)
  • Size       : O(1)

Please go through video:

https://www.youtube.com/watch?v=okr-XE8yTO8

 

 READ MORE
Short notes on Quick Sort

Quick Sort

Quick sort is a very popular sorting method. This sort name comes from the fact that quick sort can sort a list of data elements significantly faster than any of the common sorting algorithms. This sorting uses a strategy called divide and conquer. It is based on the principle that is faster and easier to sort two small arrays than one larger one. 

The sequence of steps required to perform a quick sort operation on a set of elements of  the array are as follows.

  1. A pivot item near the middle of the array is chosen. Let it be x.
  2. Now scan the array from left to right until some element e.g., ai>x is encountered.
  3. Now scan the array from right to left until some element e.g.,aj<x is encountered.
  4. Now exchange the items ai and aj.
  5. Again repeat steps 2 to 4 until the scan operation meets somewhere in the middle of the array.

Quick sort is also called partition exchange sort and it was invented by C.A.R. Hoare. The average execution time of quick sort is O(n(log2n)2) and this sort is good for large sorting jobs.

Pictorial Representation

 

 

Quick Sort Algorithm

1. If n < = 1, then return.

2. Pick any element V in a[]. This is called the pivot.

3. Rearrange elements of the array by moving all elements xi > V right of V and all elements x­i < = V left of V. If the place of the V after re-arrangement is j, all elements with value less than V, appear in a[0], a[1] . . . . a[j – 1] and all those with value greater than V appear in a[j + 1] . . . . a[n – 1].

4. Apply quick sort recursively to a[0] . . . . a[j – 1] and to a[j + 1] . . . . a[n – 1].

Program for Quick Sort 

#include <stdio.h>

void quick_sort(int[], int, int);
int partition(int[], int, int);

int main() 
{
    int a[50], n, i;

    printf("How many elements?");
    scanf("%d", & n);
    printf("\nEnter array elements:");

    for  (i = 0; i < n; i++)
    {
        scanf("%d", & a[i]);
    }

    quick_sort(a, 0, n - 1);

    printf("\nArray after sorting:");

    for (i = 0; i < n; i++)
    {  
        printf("%d ", a[i]);
    }


    return 0;
}

 

void quick_sort(int a[], int l, int u) 
{
    int j;

    if  (l < u) 
    {
        j = partition(a, l, u);
        quick_sort(a, l, j - 1);
        quick_sort(a, j + 1, u);
    }
}

 

int partition(int a[], int l, int u) 
{
    int v, i, j, temp;
    v = a[l];
    i = l;
    j = u + 1;

    do 
    {
        do
        {
            i++;
        }

        while (a[i] < v && i <= u);

        do
        {
            j--;
        }

        while (v < a[j]);

        if  (i < j)
        {
            temp = a[i];
            a[i] = a[j];
            a[j] = temp;
        }
    } 

    while (i < j);

    a[l] = a[j];
    a[j] = v;

    return (j);

}

The complexity of the quick sort algorithm is given in the following table.

AlgorithmWorst caseAverage caseBest case
Quick sortO(n)2log2nlog2n
 READ MORE
Brief discussion on HTML table

Tables

Tables allow you to view your data in a structured and classified format. Tables can contain any type of data such as text, images, links, and other tables. You can create tables for displaying timetables , financial reports, and so on.

A table is made up of rows and columns. The intersection of each row and column is called as a cell. A row is made up of a set of cells that are placed horizontally. A column is made up of a set of cells that are placed vertically.

You can represent your data in a tabular format by using the TABLE element in HTML. The TR element divides the table into rows and the TD element specifies columns for each row. By default, a table does not have a border. The border attribute of the TABLE element specifies a border for making the table visible in a web page.

 

Note: The above code is use for to create a table. The border attribute of table element gives a border to the table, which is 1 pixel wide. The TR element within the TABLE element creates rows. The ID element creates two cells with the values English and German in the first row and French and Italian in the second row.

Table Headings

You can specify the heading for each column in HTML. TO specify the heading for columns in a table, you use the TH element. The text included within the TH element appears in bold.

The code displayed in the graphic creates a table with a heading. To create a table:

1. The TABLE element creates a table with a border of 1 pixel

2. The TH element provides three column headings namely Name, Age, and Place.

3. The second and the third rows list the details of the students in the three columns.

                         

“Colspan” Attribute

You might feel the need to span two or more cells while working with tables. Spanning refers to a process of extending a cell across multiple rows or columns. To span two or more columns, you use the colspan attribute of the TD and TH elements.

The colspan attribute allows you to span a cell along a horizontal row. The value of the colspan attribute specifies the number of cells across which a specific cell shall be expanded.

Note: The code creates a tale with a border of 1 pixel. The TH element specifies two column headings namely Information Technology and Accounts. Each of these header cells horizontally span across the two cells by setting the colspan attributes of the TH element to 2. Each of these headings has two sub-headings namely Name and Location, which specify the name and location of employees.

 

“rowspan” Attribute

The rowspan attribute spans a data cell across two or more rows. It allows you to span a data cell along a vertical column. Like the colspan attribute, the rowspan attribute can be used within the TD and TH elements.

 

 

Note:  The code creates a table with a border width of 1 pixel. The three TH elements within the TR element specify column headings namely Manufacturer, Model, and Price. The rowspan attribute of the TH element combines the three rows of the Manufacturer column into a common brand namely Audi. The three different models and the respective prices of the Audi brand are displayed in three different rows. Similarly, the rowspan attribute of the TH element combines the next two rows of the Manufacturer column into a common brand called BMW.

 

Horizontal Alignment

Alignment determines the representation of text along the left, right, or center positions. In HTML, by default, the data within the table is aligned on the left side of the cell. Sometimes, you might need to align the data to some other position for improving the readability or focusing on some data. To horizontally align the contents of the cell, you use the align attribute. The four possible value of the align attribute are:

  • Left: Aligns the data within the cell on the left side. This is the default value for table content.
  • Center: Aligns the data within the cell on the center. This is the default value for table headings.
  • Right: Aligns the data within the cell on the right side.
  • Justify:  Aligns the data within the cell by adjusting the text at the edges.

Note: The code uses the align attribute inside the TR element to align the data within the row. The table content is center aligned by setting the value of the align attribute to center.

 

Vertical Alignment

You can vertically align the position of data by using the valign attribute. The valign attribute can be used with TD, TR, and TH elements. The possible values of the valiign attribute are:

  • Top: Aligns the data within the cell at the top.
  • Middle:  Vertically aligns the data within the cell at the center.
  • Bottom: Aligns the data within the cell at the bottom.

Note: The code creates a table by specifying the width attribute as 300. The width attribute specifies the width of a table. The align attribute is set to the value cinter, which specifies that the data within the rows are centrally aligned. The valign attribute is set to the value top, which specifies that the data within the cell will be aligned at the top.

 

Margin Attributes

The data in a table might appear cluttered, which may affect the readability. This might make it difficult to comprehend data as the data. To overcome this issue, you use the cell margin attributes. The two cell margin attributes that can be used within the TABLE element are:

  • Celpadding: Defines the space between the contents of the cell and the edges of the cell. The default value is 1. 
  • Cellspacing: Defines the space between the table cells. The default value is 2.

Note: The code creates a table and the value of the cellspacing attribute within the TABLE element is set to 5. This indicates that the space between two table cells should be 5 pixels wide. The cellpadding attribute is set to 5, which indicates that the space between the contents of the cell should be 5 pixels wide.

 

“CAPTION” Element

You can add a heading to a table in HTML. To specify the main heading for your table, you use the CAPTION element. The CAPTION element defines a caption for your table. It is a sub-element of the TABLE element. Unlike the TH element that is used to specify a heading to an individual row or column, the CAPTION element allows you to specify a title for your entire table.

Note: The code creates a table of border width of 1 pixel. The CAPTION element that is used inside the TABLE element specifies a caption to the entire table as travel expense report.

For more go through this video:

https://www.youtube.com/watch?v=em5zhA4Of3w

 READ MORE
...