DePaul University

DePaul University SNL 262 Web Page Design Lists In HTML Instructor: David A. Lash

What We Will Cover • <DIV> ... </DIV> - a way to group text into logical groups • <OL> <LI> </OL> - A way to create ordered or numbered lists • <UL> <LI> </UL> - A way to create bullet lists • <DL> <LI> </DL> - A way to create lists without any header or order

Using <DIV> To Align Text • <DIV> ... </DIV> - Useful for dividing text. • Can create logical divisions of the text you are formatting and treat them as 1 group. • Often use align attribute to with <DIV> to adjust text to left, right or center. • For example, <DIV ALIGN=center> My Home Page </DIV> • <div align=center> This is a test of center adjusted text. </DIV> • <div align=right> Of Coarse, this is a Right sample </DIV> <BR> By the way I can use a <I>DIV align=left</I> but I don't need it because the default is to put the text to the extreme left anyway. • For example see the following link. • Text alignment can be done with other TAGS like the paragraph on <P>. (See page 69 in book.) or better yet see example at the following link. • - <P> ... </P> is used to set paragraphs. It too can be used to with the align option.

More Complete Example of DIV <HTML><HEAD> <TITLE> Here is an example </TITLE> </HEAD><BODY> <div align=center> This is a test of center adjusted text. </DIV> <div align=right> Of Coarse, this is a Right sample </DIV><BR> By the way I can use a <I>DIV align=left</I> but I don't need it because the default is to put the text to the extreme left anyway. </BODY></HTML> • For example see the following link.

Text Alignment With <P> • Can use the ALIGN= tag with the <P> tag. • For example, <P align=right> • (See Example 5.3 from book (next slide)).

Text Alignment With <P> <html><head><title>Bohemia</title></head> <body> <div align="center"> <h2>Bohemia</h2> <b>by Dorothy Parker</b> </div> <p align="left"> Authors and actors and artists and such<br /> Never know nothing, and never know much.<br /> Sculptors and singers and those of their kidney<br /> Tell their affairs from Seattle to Sydney.</p> <p align="center"> Playwrights and poets and such horses' necks<br /> Start off from anywhere, end up at sex.<br /> Diarists, critics, and similar roe<br /> Never say nothing, and never say no.</p> <p align="right"> People Who Do Things exceed my endurance;<br /> God, for a man that solicits insurance!</p> </body></html>

List Management • HTML supports 3 different types • Ordered lists E.g., numbered, 1. Baseball 2. Hotdgs 3. Apple Pie • Unordered lists E.g., bullet lists, • Baseball • Hotdogs • Apple Pie • Definition Lists (E.g., indented lists without any number or symbol Baseball A only played well in NY Hotdogs A substance resembling meat Apple Pie What Sara Lee now makes instead of Mom

Ordered Lists • This is an ordered list: 1. This is the first element 2. This is the second line 3. This is the third line • To format above use the <OL>, <LI> tags<OL> ... </OL> --- Marks the start and end of the ordered list section <LI> ... </LI> - Indicates start and end of each ordered list item.

Ordered Lists • For example: <OL> <LI> This is the first element </LI> <LI> This is the second line </LI><LI> This is the third line </LI></OL> • Would look like: 1. This is the first element 2. This is the second line 3. This is the third line

Attributes For Ordered Lists • Using Type =E.g., <OL TYPE=1> ......... For 1,2,3 Ordering <OL TYPE=A> .....… For A,B,C Ordering <OL TYPE=a> ......... For a,b,c ordering <OL TYPE=I> ........... For Roman Numeral (E.g, I, II, III, IV) <OL TYPE=i> ........... For small Roman Numerals (E.g., i, ii, iii, iv) • For Example, see this Roman Numeral Example, see also this ABC Example.

Using Start Attribute With OL • Both the UL and OL Tags support a START= attribute. • This attribute is used to set an initial value to the lists: • For example, <OL TYPE="A", START="3"> <LI> Started on G. </OL> . • See the following link

Unordered Lists • Unordered Lists - These would be bullet lists, For example • This is the first element • This is the second line • This is the third line • To format above use the following tags • <UL> ... </UL> Starts & ends the ordered list section • <LI> … </LI> - Starts & ends each individual item.

Unordered Lists • For example, <UL> <LI> This is the first element </LI> <LI>This is the second line </LI><LI> This is the third line </LI> </UL> • Would create the following • This is the first element • This is the second line • This is the third line

Unordered Lists Use An Attribute TYPE= • E.g., <UL TYPE=DISC> ......... Creates a small disc list <UL TYPE=CIRCLE> ........ Solid circles <UL TYPE=SQUARE> ......... Solid Squares • For Example, See this Unordered List Example.

Definition Lists • Indented lists without any numbers or symbol in front of each item Baseball A only played well in NY Hotdogs A substance resembling meat Apple Pie What Sara Lee now makes instead of Mom • <DL> ... </DL> A definition list • <DT> … </DT> A definition term as part of a definition list - Level 1 term • <DD> … <DD> - A Definition to definition term - level 2 term • see stuff.html & a similar example

Lists Within Lists • Lists Within Lists • You can put lists within lists if you wish creating an outline feel for your text. 1. Baseball • White Sox • Cubs 2. Football • Bears • Corresponding HTML Code: <OL><LI>Baseball></LI> <UL><LI>WhiteSox</LI><LI>Cubs</LI></UL> <LI> Football </LI><UL><LI>Bears</LI></UL> • For example, see the following link

DePaul University