Page 101 - TP_Plus_v4_Class7
P. 101

Take Off                                                         Century   #Critical Thinking
                                                                                                  21 st
                                                                                                  Skills  #Technology Literacy
                      Write the HTML code (start from <BODY> tag) to display the following output on a web page:

























                 Similar to MS Word, you can also create different types of lists and tables on the web pages in HTML5.
                 In the previous chapter, you have learned how to use the basic tags of HTML and their attributes. In this
                 chapter, you will learn how to create lists and tables in HTML5.


                      CREATING LISTS


                 A list is a collection of related items that can be used to represent information in pointed form. In our
                 daily routine, we have to write many things such as list of items required for a festival and list of steps
                 to make a dish. List feature of HTML5 allows us to display this type of information on the web page in an
                 organised manner. There are three types of lists named ordered list, unordered list and definition
                 list that can be created in HTML5 to display the items in the form of list.

                 CSS List Properties

                 CSS list properties are used to change the appearance of ordered and unordered lists in HTML5. These
                 properties with their values are given in the following table:

                 Property          Value                         Description                      Examples

                                   For ordered list: decimal,
                                   lower-alpha, upper-alpha,
                 list-style-type   lower-roman, upper-roman      Specifies the type of the list   list-style-type: circle;
                                                                 item marker.
                                   For unordered list: disc,
                                   circle, square
                                                                 Specifies an image to be used
                 list-style-image URL of the image               as the list item marker instead   list-style-image:
                                                                                                  url('fruits.jpeg');
                                                                 of the default marker.
                                                                 Specifies the color of the list
                 list-style-color  Colour name                                                    list-style-color: blue;
                                                                 item marker.



                                                                                          #Lists and Tables in HTML5  99
   96   97   98   99   100   101   102   103   104   105   106