- Preface
- Markup Languages – A Definition and Some History
- Beginning HTML
- HTML Lists
- HTML Tables
- HTML - Color, Fonts and Special Characters
- HTML Links
- HTML Images
- HTML Frames
- Cascading Style Sheets
- MicroSoft PhotoDraw
- JavaScript
- HTML Forms and Form Handling
- VBScript
- MicroSoft FrontPage
- Active Server Pages
- Java Applets
- XML Meaning and More
- Macromedia Flash 5.0
- References
|
Organizing the content of an HTML page and/or an entire website is an important part of webpage design. Lists and tables are relatively simple means to organize content.
4.1 Lists
There are three basic types of lists in HTML:
- Numbered or Ordered lists which contain items enumerated either with numbers (1, 2, 3, …) , letters (a, b, c, …) or Roman numerals (i, ii, iii, …)
- Bulleted or Unordered Lists 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.
4.2 Bulleted (Unordered) Lists
Unordered lists are created using the < UL> … </UL> tags. The list items are defined with <LI> tags and go in between the beginning and closing tags for the unordered lists. Note that the list item tags do not have closing tags.
- Add the following code to your first HTML page created in the previous section:
<H2>My Fall Schedule </H2>
<UL>
<LI>CS105 Webpage Design
<LI> MA 109 Calculus I
<LI> EN 102 Language and Rhetoric
</UL>
- Save your file and view it in a browser. Note 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 the TYPE attribute for lists and list items. The default bullet type is the solid black disc. (NOTE: Some browsers do not recognize the different types of bullets.) To explicitly specify this type of bullet, change the beginning tag for the unordered list to this:
<UL TYPE = “DISC”>
- The other types of bullet available are “CIRCLE” and “SQUARE” which result in unfilled circles and squares respectively.
- Change the beginning tag for the list to one of these.
- Save your file and view it in a browser (NOTE that Internet Explorer does not seem to recognize this attribute at all. At least version 6.0.26 doesn’t. Mozilla and Netscape do recognize the TYPE attribute for unordered lists.).
- You can also specify different types of bullets for each item in an unordered list by using the TYPE attribute in the list item <LI> tag instead of the beginning list tag. To try this, remove the TYPE attribute from the <UL> tag
and add a different TYPE (“DISC”, “CIRCLE”, “SQUARE”) to each item in the list above, such as this:
<LI TYPE = “CIRCLE”>
- Save the file and view it in a browser.
- You can also nest lists. When you nest lists, and do not specify a type, a different type of bullet will be used for
each level of list. Add the following to your HTML file:
<H2>Courses I have taken at College </H2>
<UL>
<LI>Fall 2001
<UL>
<LI>PL 100 First Philosophy
<LI> MA 109 Calculus I
<UL>
<LI>I barely survived this class.
</UL>
<LI> EN 102 Language and Rhetoric
</UL>
<LI>Spring 2002
<UL>
<LI>CS110 Intro to C++
<UL>
<LI>I loved this class.
</UL>
<LI> BL 101 Intro to Plant Life
<LI> HI 102 Early US History
</UL>
<LI>Fall 2002
<UL>
<LI>CS105 Webpage Design
<UL>
<LI>This class was wonderful.
</UL>
<LI> MA 110 Calculus II
<LI> EN 108 Short Stories
</UL>
</UL>
- Save the file and view it in a browser. Note that the indentation shown above is ignored by the browser.
It is formatted in this manner because it is easier for humans to interpret as a nested set of lists.
Note also that each sublist must be a complete list using beginning and ending <UL> tags and that the
browser assigns different bullet types to the levels of nesting.
4.3 Numbered (Ordered) Lists
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. Note that the list item tags do not have closing tags.
- Add the following code to your first HTML page created earlier:
<H2>My Fall Schedule </H2>
<OL>
<LI>CS105 Webpage Design
<LI>MA 109 Calculus I
<LI>EN 102 Language and Rhetoric
</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 have attributes for the type of numbering desired and a starting value.
Arabic numbers are the default numbering type. To specify a number type for an ordered list,
use the TYPE attribute in the beginning tag of the ordered list, <OL>. The values for the TYPE
attribute are “1” for numerals, “A” for capital letters, “a” for lowercase letters, “I” for uppercase
Roman numerals and “i” for lowercase Roman numerals. Try changing the <OL> tag in your file to:
<OL TYPE="a">
- Save your file and view it in a browser.
- In some cases, you might want to specify a starting value for the numbered list.
For example, you might want to continue the numbering from a list that appeared
earlier in the page. To do this, you can use the VALUE attribute in the first <LI> tag. Change the first <LI> tag to:
<LI VALUE="5">
- Save your file and view it in a browser.
- You can change the value of each item in the list by using the VALUE attribute in the list item tag, <LI>.
Note that if the ordered list will use letters instead of numbers, the VALUE attribute takes the number of the
desired letter in the alphabet. Try adding the following and then saving and viewing your file:
<H2> The KISS Principle </H2>
<OL TYPE = "A">
<LI VALUE = "11"> is for Keep.
<LI VALUE = "9"> is for It.
<LI VALUE = "19"> is for Simple.
<LI VALUE = "19">is for Stupid.
</OL>
It should appear as this:
- You can nest ordered lists. When you do this, each sublist can use a different type of numbering by using the TYPE tags. Add the following to your HTML file, save it and view it in a browser. Note that the numbering of the courses is continued using the START tag.
<H2>Courses I have taken at College </H2>
<OL TYPE = "I">
<LI>Fall 2001
<OL TYPE = "1">
<LI>PL 100 First Philosophy
<LI>MA 109 Calculus I
<OL TYPE = "a">
<LI> I barely survived this class.
</OL>
<LI>EN 102 Language and Rhetoric
</OL>
<LI>Spring 2002
<OL TYPE = "1" START = "4" >
<LI>CS110 Intro to C++
<OL TYPE = "a">
<LI> I loved this class.
</OL>
<LI>BL 101 Intro to Plant Life
<LI>HI 102 Early US History
</OL>
<LI>Fall 2002
<OL TYPE = "1" START = "7">
<LI>CS105 Webpage Design
<OL TYPE = "a">
<LI> This class was wonderful.
</OL>
<LI>MA 110 Calculus II
<LI>EN 108 Short Stories
</OL>
</OL>
It should appear as this:
4.4 Definition Lists
Definition lists are a third type of HTML list which displays a number of terms and 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 HTML 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:
References
- 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
|