DePaul University

1
DePaul University

• SNL 262
• Web Page Design
• Lists In HTML
• Instructor David A. Lash

2
What We Will Cover

• ltDIVgt ... lt/DIVgt - a way to group text into
  logical groups
• ltOLgt ltLIgt lt/OLgt - A way to create ordered or
  numbered lists
• ltULgt ltLIgt lt/ULgt - A way to create bullet lists
• ltDLgt ltLIgt lt/DLgt - A way to create lists without
  any header or order

3
Using ltDIVgt To Align Text

• ltDIVgt ... lt/DIVgt - 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 ltDIVgt to adjust
  text to left, right or center.
• For example,
• ltDIV ALIGNcentergt
• My Home Page
• lt/DIVgt
• ltdiv aligncentergt This is a test of center
  adjusted text. lt/DIVgt
• ltdiv alignrightgt Of Coarse, this is a Right
  sample lt/DIVgt ltBRgt By the way I can use a
  ltIgtDIV alignleftlt/Igt 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 ltPgt. (See page 69 in book.) or
  better yet see example at the following link.
• - ltPgt ... lt/Pgt is used to set paragraphs. It too
  can be used to with the align option.

4
More Complete Example of DIV

• ltHTMLgtltHEADgt
• ltTITLEgt Here is an example lt/TITLEgt
• lt/HEADgtltBODYgt
• ltdiv aligncentergt
• This is a test of center adjusted text.
• lt/DIVgt
• ltdiv alignrightgt
• Of Coarse, this is a Right sample
• lt/DIVgtltBRgt
• By the way I can use a ltIgtDIV alignleftlt/Igt but
  I don't need it because the default is to put the
  text to
• the extreme left anyway.
• lt/BODYgtlt/HTMLgt
• For example see the following link.

5
Text Alignment With ltPgt

• Can use the ALIGN tag with the ltPgt tag.
• For example, ltP alignrightgt
• (See Example 5.3 from book (next slide)).

6
Text Alignment With ltPgt

• lthtmlgtltheadgtlttitlegtBohemialt/titlegtlt/headgt
• ltbodygt
• ltdiv align"center"gt
• lth2gtBohemialt/h2gt
• ltbgtby Dorothy Parkerlt/bgt
• lt/divgt
• ltp align"left"gt
• Authors and actors and artists and suchltbr /gt
• Never know nothing, and never know much.ltbr /gt
• Sculptors and singers and those of their
  kidneyltbr /gt
• Tell their affairs from Seattle to Sydney.lt/pgt
• ltp align"center"gt
• Playwrights and poets and such horses' necksltbr
  /gt
• Start off from anywhere, end up at sex.ltbr /gt
• Diarists, critics, and similar roeltbr /gt
• Never say nothing, and never say no.lt/pgt
• ltp align"right"gt
• People Who Do Things exceed my enduranceltbr /gt
• God, for a man that solicits insurance!lt/pgt

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 ltOLgt, ltLIgt tagsltOLgt ...
  lt/OLgt --- Marks the start and end of the
  ordered list section ltLIgt ... lt/LIgt - Indicates
  start and end of each ordered list item.

9
Ordered Lists

• For example
• ltOLgt ltLIgt This is the first element lt/LIgt
  ltLIgt This is the second line lt/LIgtltLIgt This is
  the third line lt/LIgtlt/OLgt
• 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.,
• ltOL TYPE1gt ......... For 1,2,3 Ordering
  ltOL TYPEAgt ..... For A,B,C Ordering ltOL
  TYPEagt ......... For a,b,c ordering ltOL
  TYPEIgt ........... For Roman Numeral (E.g,
  I, II, III, IV) ltOL TYPEigt ........... 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, ltOL TYPE"A", START"3"gt ltLIgt
  Started on G. lt/OLgt .
• 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
• ltULgt ... lt/ULgt Starts ends the ordered list
  section
• ltLIgt lt/LIgt - Starts ends each individual
  item.

13
Unordered Lists

• For example,
• ltULgt ltLIgt This is the first element lt/LIgt
  ltLIgtThis is the second line lt/LIgtltLIgt This is
  the third line lt/LIgt lt/ULgt
• 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., ltUL TYPEDISCgt ......... Creates a small
  disc list ltUL TYPECIRCLEgt ........ Solid
  circles ltUL TYPESQUAREgt ......... 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
• ltDLgt ... lt/DLgt A definition list
• ltDTgt lt/DTgt A definition term as part of a
  definition list - Level 1 term
• ltDDgt ltDDgt - 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
• ltOLgtltLIgtBaseballgtlt/LIgt
• ltULgtltLIgtWhiteSoxlt/LIgtltLIgtCubslt/LIgtlt/ULgt
• ltLIgt Football lt/LIgtltULgtltLIgtBearslt/LIgtlt/ULgt
• For example, see the following link