1 / 36

Chapter 2

Chapter 2. Creating and Editing a Web Page. 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

Download Presentation

Chapter 2

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

More Related