1. HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit C Formatting Page Elements with HTML

2. HTML, Third Edition--Illustrated Brief 2 U n i t O b j e c t i v e s Understand HTML formatting methods Align text Format characters Define an address block Understand HTML formatting methods Align text Format characters Define an address block

3. HTML, Third Edition--Illustrated Brief 3 U n i t O b j e c t i v e s Control font selection Customize fonts Create ordered lists Create unordered lists Control font selection Customize fonts Create ordered lists Create unordered lists

4. HTML, Third Edition--Illustrated Brief 4 Understanding HTML Formatting Methods HTML pages can be formatted using the following methods:  Alignment  Character Formatting  Font Formatting  Block-Level Formatting  Lists

5. HTML, Third Edition--Illustrated Brief 5 Understanding HTML Formatting Methods

6. HTML, Third Edition--Illustrated Brief 6 Understanding HTML Formatting Methods

7. HTML, Third Edition--Illustrated Brief 7 Aligning Text

8. HTML, Third Edition--Illustrated Brief 8 Aligning Text Open the htm_C-1.txt file in your text editor from the location where you store your data files, then save it as rates.htm in your paradise site folder Locate the opening paragraph tag of your site navigation bar at the top of the page, then click between p and > Press [Spacebar], then type style=”text-align: center;” Locate the paragraph that begins with “Call the resort office,” click just before > in the opening paragraph tag, press [Spacebar], then type style=”text-align: justify;” Locate the next paragraph, which begins “For questions or comments,” click in the opening paragraph tag just before >, press [Spacebar], then type style=”text-align: center;”

9. HTML, Third Edition--Illustrated Brief 9 Aligning Text Locate the “Page modified by” paragraph, click in the opening paragraph tag just before >, press [Spacebar], then type style=”text-align: right;” View the rates.htm file in your browser Click the text editor program button on the taskbar, locate the “Call the resort office” paragraph, click and drag to select the style attribute and value in the opening paragraph tag, press [Delete], then press [Backspace], to remove the extra space In the opening paragraph tag of the “Page modified by” paragraph, drag to select “right” after “text- align:”, press [Delete], type center, then save the page and reload it in your browser

10. HTML, Third Edition--Illustrated Brief 10 Aligning Text

11. HTML, Third Edition--Illustrated Brief 11 Aligning Text

12. HTML, Third Edition--Illustrated Brief 12 Formatting Characters

13. HTML, Third Edition--Illustrated Brief 13 Formatting Characters In the rates.htm file, locate the text Watch this space! in the first paragraph under the page heading Click before the word Watch, then type Click before the word Watch, then type Click after space! then type Click after space! then type Save the rates.htm file Click the browser program button on the taskbar Click the Reload or Refresh button on the browser toolbar to update your rates.htm page

14. HTML, Third Edition--Illustrated Brief 14 Formatting Characters

15. HTML, Third Edition--Illustrated Brief 15 Defining an Address Block Click the text editor program button on the taskbar to display the rates.htm page code Locate the “For questions or comments” paragraph near the bottom of the page Click inside the opening paragraph tag directly after the p, press [Backspace], then type address Click directly after the p in the closing paragraph tag, press [Backspace], type address, then save your work

16. HTML, Third Edition--Illustrated Brief 16 Defining an Address Block Click the browser program button on the taskbar, then reload your page in the browser window Click the text editor button on the taskbar to display the rates.htm page code Locate the navigation bar code near the top of the body selection, drag to select from the opening paragraph tag through the closing paragraph tag, then copy the selected code to your clipboard Open the paradise/index.htm file, drag to select the navigation bar code, press [Delete], then paste the copied code and save your work

17. HTML, Third Edition--Illustrated Brief 17 Defining an Address Block

18. HTML, Third Edition--Illustrated Brief 18 Controlling Font Selection Open paradise/index.htm in your browser program and view the formatting Return to the paradise/index.htm page in your text editor Click between and the page heading text, type Click between and the page heading text, type Click after Resort and before, then type Click after Resort and before, then type Click before the closing head tag in the head section, type, then press [Enter] twice Save your file, click the browser program button on the taskbar, then reload your paradise/index.htm page in the browser window

19. HTML, Third Edition--Illustrated Brief 19 Controlling Font Selection

20. HTML, Third Edition--Illustrated Brief 20 Controlling Font Selection

21. HTML, Third Edition--Illustrated Brief 21 Clues to Use Selecting and specifying page fonts  Typeface selection rules apply to both print and screen media  Use one family for headings, and another family for body text  Do not mix fonts from the same family  Use fonts that are commonly available

22. HTML, Third Edition--Illustrated Brief 22 Customizing Fonts Return to the paradise\index.htm page in your text editor, locate the opening font tag in the level-one page heading, click between the semicolon (;) and the closing quotation mark, press [Spacebar], type color: #336633; (including the semicolon), then save the page Locate the basefont tag in the head section, click between “;” and the closing quotation mark, press [Spacebar], then type color: #333366; (including the semicolon) Locate the navigation bar at the top of the page, click after the opening paragraph tag and just before the first pipe, then type Locate the navigation bar at the top of the page, click after the opening paragraph tag and just before the first pipe, then type In the site navigation bar, click between the final pipe and the, type, then save the page Click the browser program button on the taskbar, then reload your page

23. HTML, Third Edition--Illustrated Brief 23 Customizing Fonts

24. HTML, Third Edition--Illustrated Brief 24 Customizing Fonts

25. HTML, Third Edition--Illustrated Brief 25 Creating Ordered Lists In your text editor, open the file htm_C-2.txt from the location where you store your Data Files, click File on the menu bar, then click Save As Navigate to the location where you store your paradise site files, double-click activities, click the Save as type list arrow, click All Files, type the filename index.htm, click Save, then click Yes to replace the existing index file Click the browser program button on the taskbar, then open the activities/index.htm file from the location where you store your site files

26. HTML, Third Edition--Illustrated Brief 26 Creating Ordered Lists Click the text editor program button on the taskbar, drag to select below the level-three heading, press [Delete], type, then press [Enter] Locate the end of the rules list after “...the following day”, drag to select the, press [Delete], type, then press [Enter] twice Click before “Guests” in the line below the opening ordered list tag, then type Click before “Guests” in the line below the opening ordered list tag, then type

27. HTML, Third Edition--Illustrated Brief 27 Creating Ordered Lists Select the “ ” tag at the end of the line, press [Delete], then type Select the “ ” tag at the end of the line, press [Delete], then type Type tags before the remaining list items, as shown in the figure on the following slide Replace the remaining line break tags with closing list item tags, click just before the, type to mark the end of the last list item as shown in the figure on the following slide, save the file, then view it in your browser

28. HTML, Third Edition--Illustrated Brief 28 Creating Ordered Lists

29. HTML, Third Edition--Illustrated Brief 29 Creating Ordered Lists

30. HTML, Third Edition--Illustrated Brief 30 Clues to Use Nesting lists  It may be necessary to create subitems within a parent list This process is known as nesting a listThis process is known as nesting a list  You can nest lists of any type

31. HTML, Third Edition--Illustrated Brief 31 Creating Unordered Lists In your text editor, open the file htm_C-3.txt, drag to select all the text on the page, click Edit on the menu bar, click Copy, then close the file Open your activities/index.htm page in your text editor, locate the paragraph that ends with “… our center a family fun place,” click after, press [Enter] twice, click Edit on the menu bar, then click Paste Drag to select in the line that begins “Tell you what,” press [Delete], type, then press [Enter] Verify that the insertion point is before the word “Tell” in the first sentence of the list, then type Verify that the insertion point is before the word “Tell” in the first sentence of the list, then type

32. HTML, Third Edition--Illustrated Brief 32 Creating Unordered Lists Drag to select at the end of the line, press [Delete], then type Drag to select at the end of the line, press [Delete], then type Repeat the previous two steps to set an opening and closing list item tag before and after each line, replacing the tags with tags, then save the file Drag to select the after the list item that ends with “guided activities,” press [Delete], type, then compare your screen to the figure on the following slide Save your work, click the browser program button in the taskbar, reload the activities/index.htm page, then print the page Close all files, then transfer your updated files to your remote directory on the server

33. HTML, Third Edition--Illustrated Brief 33 Creating Unordered Lists

34. HTML, Third Edition--Illustrated Brief 34 Creating Unordered Lists

35. HTML, Third Edition--Illustrated Brief 35 Creating Unordered Lists

36. HTML, Third Edition--Illustrated Brief 36 Clues to Use Customizing lists  Ordered lists display items sequentially, beginning with 1  You can customize the tag to display ordered lists with letters or Roman numerals  Customize start value  Customize unordered lists to display circles, squares, or discs

37. HTML, Third Edition--Illustrated Brief 37 U n i t S u m m a r y Understand HTML formatting methods Align text Format characters Define an address block

38. HTML, Third Edition--Illustrated Brief 38 U n i t S u m m a r y Control font selection Customize fonts Create ordered lists Create unordered lists