Chapter 2

1. Chapter 2 Creating and Editing a Web Page

2. Chapter Objectives • Identify elements of a Web page • Start Notepad and describe the Notepad window • Enable word wrap in Notepad • Enter the HTML tags • Enter a centered heading and a paragraph of text • Create an unordered, ordered, or definition list • Save an HTML file • Use a browser to view a Web page • Activate Notepad • Identify Web page image types and attributes Chapter 2: Creating and Editing a Web Page

3. Chapter Objectives • Add an image, change the background color of a Web page, and add a horizontal rule • View the HTML source code in a browser • Print a Web page and an HTML file • Quit Notepad and a browser Chapter 2: Creating and Editing a Web Page

4. Starting Notepad • Click the Start button on the taskbar to display the Start menu • Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list • Click Accessories in the All Programs list • Click Notepad in the Accessories list to display the Notepad window • If the Notepad window is not maximized, click the Maximize button on the Notepad title bar to maximize it Chapter 2: Creating and Editing a Web Page

5. Starting Notepad Chapter 2: Creating and Editing a Web Page

6. Enabling Word Wrap in Notepad • Click Format on the menu bar • If the Word Wrap command does not have a check mark next to it, click Word Wrap Chapter 2: Creating and Editing a Web Page

7. Enabling Word Wrap in Notepad Chapter 2: Creating and Editing a Web Page

8. Saving your work • If you don’t have a drive mapped to Public, let’s do that now. • Save all your work to My Documents. This folder will synchronize with the server when you log off… • Let’s test that theory to know that it will. • Create a notepad document with your name in it. • Save it to my documents • Log off….log on at another machine so you can check for its existence. Chapter 2: Creating and Editing a Web Page

9. Elements of a Web Page Title Body Image Text link Image Links Heading Paragraph Background Project 2: Creating and Editing a Web Page

10. HTML Tags and Their Functions Chapter 2: Creating and Editing a Web Page

11. Elements of a Web Page • Title - text that appears on the title bar • Body – everything that is displayed in the browser • Background – solid color or picture graphic against which everything appears • Headings – Used to set off paragraphs • Image – Inline Image is NOT part of the HTML file • Image map – image that has HOTSPOTS defined • Horizontal rules – lines displayed across the web page • Link – text, image, or other element that instructs the browser to go to a specific location for something Project 2: Creating and Editing a Web Page

12. Defining the Web Page Structure Using HTML Tags • Enter the HTML code shown in #1 & #2 on page HTML 38-39 Chapter 2: Creating and Editing a Web Page

13. Entering a Centered Heading • Enter the information on pg. HTML 41, #1 • Don’t forget to save your Work! • Name this file fooddrive.html and save it in My Documents Chapter 2: Creating and Editing a Web Page

14. Entering a Paragraph of Text • Enter the code on pg. 42, #1. Chapter 2: Creating and Editing a Web Page

15. Creating a List • Unordered List – bulleted list • <ul> and </ul> • Ordered List – numbered list using # or letters • <ol> and </ol> • Use the <li> and </li> between the previous tags to define a list item within the ordered or unordered list. • Notice the different types of list items on pg. 44. Project 2: Creating and Editing a Web Page

16. Creating an Unordered List • Enter the code on pg. 45, #1 for an unordered list. Chapter 2: Creating and Editing a Web Page

17. Other things with lists • Use the tags <ul type=“ “> where you can put what kinds of bullet you want to use. • Definition list – offsets information in a dictionary type style. • Used less often than ordered or unordered lists • <dl> and </dl> tags are used along with the <dt> and <dd> tags. Chapter 2: Creating and Editing a Web Page

18. Example of Definition List Chapter 2: Creating and Editing a Web Page

19. Starting a Browser Chapter 2: Creating and Editing a Web Page

20. Viewing a Web Page in a Browser • Find your fooddrive.html in My Documents. • Right click on it and chose Open with… • Choose Internet explorer. • You should see how your web page looks. • It should look like the following slide:…. Chapter 2: Creating and Editing a Web Page

21. Viewing a Web Page in a Browser Chapter 2: Creating and Editing a Web Page

22. Activating Notepad • Close or minimize the browser…find the fooddrive.html document. Right click and choose open with…Notepad… Chapter 2: Creating and Editing a Web Page

23. 3 Types of Images • GIF – Graphics Interchange Format (.gif) • Saved with a compression technique to make it smaller to download on the Web • JPEG – Joint Photographic Experts Group (.jpg, .jpe, or .jpeg) • Saved with a compression technique to make it smaller to download on the Web • Used for more complex images such as photos • Supports more colors and resolutions than other file types • PNG – Portable Network Graphics (.png or .ping) • Patent free alternative to .gif files Project 2: Creating and Editing a Web Page

24. Image Attributes – pg. 59 Chapter 2: Creating and Editing a Web Page

25. Adding a Background See Appendix B for more colors! Project 2: Creating and Editing a Web Page

26. Example of Horizontal Rules – pg. 61 Project 2: Creating and Editing a Web Page

27. Example of Horizontal Rules (pg. 57) Project 2: Creating and Editing a Web Page

28. Adding images/background • Do the exercises on pg. 59, pg. 62, & pg. 63. • Save your document • Open the notepad document with a browser • Click the Refresh button on the Standard toolbar to display the modified Web page • When you finish…your document will look like this….. Chapter 2: Creating and Editing a Web Page

29. Refreshing the View in a Browser Chapter 2: Creating and Editing a Web Page

30. Validating HTML Code • You can try to validate your HTML code with W3C by following the instructions on pg. 66-67. Chapter 2: Creating and Editing a Web Page

31. Validating HTML Code Chapter 2: Creating and Editing a Web Page

32. Viewing HTML Source Code for a Web Page • Click View on the menu bar • Click Source on the View menu • Click the Close button on the Notepad title bar Chapter 2: Creating and Editing a Web Page

33. Viewing HTML Source Code for a Web Page Chapter 2: Creating and Editing a Web Page

34. Printing a Web Page and anHTML File • Always print for me the HTML code from notepad • NEVER print out the web page unless I specifically ask you to. Chapter 2: Creating and Editing a Web Page

35. Printing a Web Page and anHTML File Chapter 2: Creating and Editing a Web Page

36. Assignments for Ch. 2 • Homework – • www.scsite.com/html5e/learn Do the Flash Cards exercise. • Choose 20 questions, do it until you get at least a 75%. • You will be given the score you bring me to class! • Due on Tue, Sept. 1, 2009, beginning of class. After that, it is late! • Labs – Due date: TBA • In The Lab: Lab 1 (pg. 75) • Use the example as a guide only. • Fill it in with information relevant to YOU! • Cases & Places #4 • pg. 79 • You will get points for creativity! • Save everything in My Documents! • ONLY print the HTML code, NOT the actual Web Page. Project 2: Creating and Editing a Web Page