Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Introduction to XHTML

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Lists - XHTML

Up to this point, we have presented basic XHTML elements and attributes for linking to resources, creating headings, using special characters and incorporating images.

Lists

 

Up to this point, we have presented basic XHTML elements and attributes for linking to resources, creating headings, using special characters and incorporating images. In this sec-tion, we discuss how to organize information on a web page using lists. In the next section, we introduce another feature for organizing information, called a table. Figure 4.8 displays text in an unordered list (i.e., a list that does not order its items by letter or number). The unordered list element ul creates a list in which each item begins with a bullet symbol (called a disc). Each entry in an unordered list (element ul in line 17) is an li (list item) element (lines 19–22). Most web browsers render each li element on a new line with a bullet symbol indented from the beginning of the line.


 


        <?xml version = "1.0" encoding = "utf-8"?>

 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

        <!-- Fig. 4.8: links2.html -->

 

        <!-- Unordered list containing hyperlinks. -->

 

        <html xmlns = "http://www.w3.org/1999/xhtml">

 

              <head>

 

                     <title>Links</title>

 

                </head>

                <body>

 

                       <h1>Here are my favorite sites</h1>

 

                       <p><strong>Click on a name to go to that page.</strong></p>

 

                       <!-- create an unordered list -->

                       <ul>

 

                             <!-- add four list items -->

 

                             <li><a href = "http://www.deitel.com">Deitel</a></li>

 

                             <li><a href = "http://www.w3.org">W3C</a></li>

 

                             <li><a href = "http://www.yahoo.com">Yahoo!</a></li>

 

                             <li><a href = "http://www.cnn.com">CNN</a></li>

 

                         </ul>

 

                </body>

 

</html>


Nested Lists

Lists may be nested to represent hierarchical relationships, as in an outline format. Figure 4.9 demonstrates nested lists and ordered lists. The ordered list element ol creates a list in which each item begins with a number.

 

A web browser indents each nested list to indicate a hierarchical relationship. The first ordered list begins at line 30. Items in an ordered list are enumerated one, two, three and so on. Nested ordered lists are enumerated in the same manner. The items in the outer-most unordered list (line 16) are preceded by discs. List items nested inside the unordered list of line 16 are preceded by circular bullets. Although not demonstrated in this example, subsequent nested list items are preceded by square bullets.

        <?xml version = "1.0" encoding = "utf-8"?>

 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

        <!-- Fig. 4.9: list.html -->

 

        <!-- Nested and ordered lists. -->

 

        <html xmlns = "http://www.w3.org/1999/xhtml">

 

              <head>

 

                     <title>Lists</title>

 

                </head>

                <body>

 

                       <h1>The Best Features of the Internet</h1>

 

                       <!-- create an unordered list -->

                       <ul>

 

                             <li>You can meet new people from countries around

                                    the world.</li>

                                    <li>

You have access to new media as it becomes public:

                          

<!-- this starts a nested list, which uses a -->

<!-- modified bullet. The list ends when you -->

<!-- close the <ul> tag. -->

<ul>

       <li>New games</li>

       <li>New applications

                          

       <!-- nested ordered list -->

       <ol>

       <li>For business</li>

       <li>For pleasure</li>

       </ol>

       </li> <!-- ends line 27 new applications li -->

                          

       <li>Around the clock news</li>

       <li>Search engines</li>

       <li>Shopping</li>

       <li>Programming                

                          

       <!-- another nested ordered list -->    

       <ol>          

       <li>XML</li>               

       <li>Java</li>               

       <li>XHTML</li>          

       <li>Scripts</li>           

       <li>New languages</li>              

       </ol>         

       </li> <!-- ends programming li of line 39 -->

                                    </ul> <!-- ends the nested list of line 25 -->

 

</li>

                             <li>Links</li>

 

                             <li>Keeping in touch with old friends</li>

 

                             <li>It is the technology of the future!</li>

 

                       </ul> <!-- ends the unordered list of line 16 -->

 

                </body>

</html>


Fig. 4.9 | Nested and ordered lists


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.