1 / 16

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

cate
Download Presentation

DePaul University

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

  3. 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.

  4. 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.

  5. 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)).

  6. 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>

  7. 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

  8. 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.

  9. 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

  10. 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.

  11. 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

  12. 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.

  13. 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

  14. 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.

  15. 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

  16. 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

More Related