|
Organizing the content of an XHTML page and/or an entire website is an important part of webpage design. Lists and tables are relatively simple means to organize content.
There are three basic types of lists in XHTML:
- Ordered lists (numbered) which contain items enumerated either with numbers (1, 2, 3, …) , letters (a, b, c, …) or Roman numerals (i, ii, iii, …)
- Unordered lists (bulleted) which contain items marked with one of three different types of bullets.
- Definition lists which are a convenient means of displaying a number of terms and their definitions (or explanations) indented below the term.
Lists also create a line break between the top and bottom of the list.
Unordered lists are created using the <ul>…</ul> tags. The list items are defined with the <li> tags and go in between the opening and closing tags for the unordered lists.
-
Add the following code to your first XHTML page created in the previous section:
<h2>My Fall Schedule</h2>
<ul>
<li>CS105 Webpage Design</li>
<li>MA 109 Calculus I</li>
<li>EN 102 Language and Rhetoric</li>
</ul>
-
Save your file and view it in a browser. Notice the bullets that appear before each item in the list. It should look like the list below.
- The type of bullet that appears in the list can be changed using CSS stylesheets.
-
You can also nest unordered lists. Nested lists that do not have their own CSS styling will use the default bullet type. Add the following to your XHTML file:
<h2>Courses I have taken at College</h2>
<ul>
<li>Fall 2001
<ul>
<li>PL 100 First Philosophy</li>
<li>MA 109 Calculus I
<ul>
<li>I barely survived this class.</li>
</ul>
</li>
<li>EN 102 Language and Rhetoric</li>
</ul>
</li>
<li>Spring 2002
<ul>
<li>CS110 Intro to C++
<ul>
<li>I loved this class.</li>
</ul>
</li>
<li>BL 101 Intro to Plant Life</li>
<li>HI 102 Early US History</li>
</ul>
</li>
<li>Fall 2002
<ul>
<li>CS105 Webpage Design
<ul>
<li>This class was wonderful.</li>
</ul>
</li>
<li>MA 110 Calculus II</li>
<li>EN 108 Short Stories</li>
</ul>
</li>
</ul>
-
Save the file and view it in a browser.
NOTE: Each nested sublist must be a complete list using beginning and ending <ul> tags. Additionally, the browser restarts the bullet style sequence, unless otherwise controlled via a CSS stylesheet. You are able to nest ordered lists inside unordered lists as well.
Unordered lists are created using the <ol>…</ol> tags. The list items are defined with <li> tags and go in between the beginning and closing tags for the ordered lists.
-
Add the following code to your first XHTML page created earlier:
<h2>My Fall Schedule </h2>
<ol>
<li>CS105 Webpage Design</li>
<li>MA 109 Calculus I</li>
<li>EN 102 Language and Rhetoric</li>
</ol>
- Save your file and view it in a browser. Note the numbers that appear before each item in the list.
- The
<ol> tag can also be styled using CSS stylesheets. Arabic numbers are the default numbering type.
-
You can also nest ordered lists. Nested lists that do not have their own CSS styling will use the default bullet type.
<h2>Courses I have taken at College </h2>
<ol>
<li>Fall 2001
<ol>
<li>PL 100 First Philosophy</li>
<li>MA 109 Calculus I
<ol>
<li> I barely survived this class.</li>
</ol>
</li>
<li>EN 102 Language and Rhetoric</li>
</ol>
</li>
<li>Spring 2002
<ol>
<li>CS110 Intro to C++
<ol>
<li> I loved this class.</li>
</ol>
</li>
<li>BL 101 Intro to Plant Life</li>
<li>HI 102 Early US History</li>
</ol>
</li>
<li>Fall 2002
<ol>
<li>CS105 Webpage Design
<ol>
<li> This class was wonderful.</li>
</ol>
</li>
<li>MA 110 Calculus II</li>
<li>EN 108 Short Stories</li>
</ol>
</li>
</ol>
NOTE: Each nested sublist must be a complete list using beginning and ending <ol> tags. Additionally, the browser restarts the bullet style sequence, unless otherwise controlled via a CSS stylesheet. You are able to nest unordered lists inside ordered lists as well.
It should appear as this:
Definition lists are the third type of XHTML list which displays a number of terms and an associated definition. The <dl>…</dl>
tags define a definition list. The <dt>…</dt> tags create a definition term in a definition list.
The <dd>…</dd> tags define the definition for the term, which will appear indented and below the term.
-
Try adding the following to your XHTML file:
<h2> CIS Course Descriptions </h2>
<dl>
<dt>CS 101 Survey of Computers and Computing </dt>
<dd>
This course presents an overview of current concepts and
terminology related to computers and information processing.
It is designed for students who have had no previous
college-level computing courses. It covers the use of
graphical user interfaces, applications software, and
telecommunications in a laboratory environment. Not open to
CIS majors without departmental approval. Three credits.
</dd>
<dt>CS 110 Introduction to Computing and Information Science I</dt>
<dd>
An introduction to problem solving and computer
programming using a high-level programming language.
Topics include algorithms, program structure, input/output,
modularity and parameters, control structures, data abstraction,
arrays, text files and structured techniques.
</dd>
</dl>
Save your file and view it in a browser.
It should appear as this:
- Bos, Bert, XML Introduction (accessed August, 2002) http://www.w3.org/XML/1999/XML-in-10-points
- Dietel, H. M., Dietel, P. J. & Neito, T. R. (2001) Internet & World Wide Web: How to Program. 2nd Edition. Prentice Hall, NJ.
- Flynn, P. XML FAQ (accessed August, 2002) http://www.ucc.ie/xml/#acro
- Richmond, A. The Web Developers Virtual Library Introduction to XHTML (accessed August, 2002) http://www.wdvl.com/Authoring/Languages/XML/XHTML/
- Veen, J. (2001) The Art and Science of Web Design. New Riders: Indianapolis, IN.
- HTML and XHTML Information www.w3c.org/markup
|