1. Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Formatting Text and Lists Essentials for Design XHTML

2. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Text Settings  Typeface – font style (e.g. Arial, Times, Helvetica)  Text effects – bold, italic, underline  Color  Size

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Text Effects Tags in XHTML 1.1  applies boldface type  applies italic type  underlines the type

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Text Effects in XHTML 2.0  Elimination of the,, and tags  These are deprecated tags  tag replaces  tag replaces the  Style sheets control general text presentation

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Effects of Typeface Tags this This this

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 The tag and attributes  tag lets you specify various font settings for selected text  attributes include  Color  Size  Face  Colors can be named or hexadecimal values  text OR  text

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Color Names COLOR NAME: HEX NUMBER: BLACK #000000 SILVER #C0C0C0 GRAY #808080 WHITE#FFFFFF MAROON#800000 RED#FF0000 PURPLE #800080 FUCHSIA #FF00FF GREEN #008000 LIME #00FF00 OLIVE #808000 YELLOW #FFFF00 NAVY #000080 BLUE #0000FF TEAL #008080 AQUA#00FFFF There are 16 color names supported in XHTML Each color name has an associated Hexadecimal code

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Hexadecimal RGB Color Codes  RGB = Red, Green, Blue  Every color is a combination of red, green, and blue  Hexadecimal number is base-16 number (values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)  RGB value has 6 hexadecimal digits:  First two digits indicate red value  Next two digits indicate green value  Last two digits indicate blue value

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Some RGB Color Codes

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Effects of Applying Font Color Names Red Text. Green Text. Purple Text. Blue Text.

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Effects of Applying Font Hexadecimal Numbers Upcoming Books Dr. Know-It-All recommends books on a weekly basis, or whenever we get around to it.

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Using the Size Attribute  tag’s size attribute lets you specify text size  Sizes range from 1 to 7 (3 is default for most browsers)  Sizes can be absolute or relative  Absolute size:  Relative size:  This makes font one size larger than default

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Effects of Tags Increases font size from default size of 3

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Using the Face Attribute  tag’s face attribute lets you specify typeface  Different computers have different typefaces  All computers have: Courier, Times, and Helvetica  Specifying a typeface:  Specifying alternative typefaces:   Helvetica is first choice, if not available try Verdanda, then Arial

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Effects of face attribute Sets type face to Arial font

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Background and Foreground  Background – the canvas of the Web page  Foreground – the text appearing on the Web page  tags affecting color of background and foreground  bgcolor – background  text – foreground

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Global vs. Local Color Settings  Text attribute applied globally  Sets default color for text in the page  Font tag’s color attribute applies locally  Overrides default color for text in the page

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Effects of Formatting Attributes Body tag attribute settings: text="#006699" affects the color of text in the body (except if specified in font color attribute) bgcolor="#ffffcc" affects the color of background in the body

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Lists  Text items arranged in a collection  Ordered lists – each item is numbered  Unordered list – items are not numbered, but bulleted

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Tags for Unordered Lists  tag – specifies unordered list  's type attribute – enables specification of bullet type  Disc (default)  Square  Circle  tag – specifies list item  tags must be nested inside and

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Effects of Unordered Lists List Item 1 List Item 2 List Item 3 List Item 4 List Item 5 affects the type of bullet

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Tags for Ordered Lists  tag – specifies an ordered list  's type attribute – specifies the type of numbering for an ordered list  1 – Arabic Numerals (default)  A – Uppercase letters  a – Lowercase letters  I – Uppercase Roman numerals  i – Lowercase Roman numerals  tag – list item (same as with unordered list)

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Effects of Ordered Lists List Item 1 List Item 2 List Item 3 List Item 4 List Item 5 causes uppercase alphabetic listing

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Definition Lists  Definition list – lists that contain terms and definitions  Useful for FAQ or defining terms on a Web page  Tags for Definition Lists  tag – specified definition list  tag – specifies the term to be defined  tag – specifies the definition

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Effects of Definition Lists XHTML eXtensible Hypertext Markup Language. A scripting language used to create hypertext documents for the Web. URL Universal Resource Locator. A Web address, or file path to a file on the World Wide Web.

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 XHTML 2.0 Navigation Lists  Intended to define collections of selectable items for presentation  Tags for navigation lists  – specifies navigation list  – specifies the name of the list  -- allows list item to link to another location