Presentation is loading. Please wait.

Presentation is loading. Please wait.

Creating and Editing a Web Page Using Inline Styles HTML5 & CSS 7 th Edition.

Similar presentations


Presentation on theme: "Creating and Editing a Web Page Using Inline Styles HTML5 & CSS 7 th Edition."— Presentation transcript:

1 Creating and Editing a Web Page Using Inline Styles HTML5 & CSS 7 th Edition

2 Identify elements of a Web page Start Notepad++ and describe the Notepad++ window Enable word wrap in Notepad++ Enter HTML tags Enter a centered heading and a paragraph of text Chapter 2: Creating and Editing a Web Page Using Inline Styles2 Chapter Objectives

3 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 Using Inline Styles3 Chapter Objectives

4 Add an image, change the color of headings on a Web page, change bulleted list style, and add a horizontal rule using inline styles 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 Using Inline Styles4 Chapter Objectives

5 Complete Web page planning Analyze the need for the Web page Choose the content for the Web page Determine the file naming convention that you will use for this Web page Determine where to save the Web page Chapter 2: Creating and Editing a Web Page Using Inline Styles5 Plan Ahead

6 Determine what folder structure to use on your storage device Identify how to format various elements of the Web page Find appropriate graphical images Establish where to position and how to format the graphical images Test the Web page for W3C compliance Chapter 2: Creating and Editing a Web Page Using Inline Styles6 Plan Ahead

7 Click the Start button on the Windows 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 the Notepad++ folder in the All Programs list Click Notepad++ in the list to display a blank 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 Using Inline Styles7 Starting Notepad++

8 Chapter 2: Creating and Editing a Web Page Using Inline Styles8 Starting Notepad++

9 Click View on the menu bar If Word Wrap does not have a check mark next to it, click Word Wrap Chapter 2: Creating and Editing a Web Page Using Inline Styles9 Enabling Word Wrap in Notepad++

10 Chapter 2: Creating and Editing a Web Page Using Inline Styles10 Enabling Word Wrap in Notepad++

11 Chapter 2: Creating and Editing a Web Page Using Inline Styles11 Defining the Web Page Structure Using HTML Tags

12 Chapter 2: Creating and Editing a Web Page Using Inline Styles12 Formatting a Web Page

13 Chapter 2: Creating and Editing a Web Page Using Inline Styles13 Entering a Paragraph of Text

14 Chapter 2: Creating and Editing a Web Page Using Inline Styles14 Entering a Heading

15 Chapter 2: Creating and Editing a Web Page Using Inline Styles15 Using Lists to Present Content

16 A definition list offsets information in a dictionary- like style Chapter 2: Creating and Editing a Web Page Using Inline Styles16 More About List Formats

17 Content placed in a footer generally has to do with the company’s address, copyright, or contact information Chapter 2: Creating and Editing a Web Page Using Inline Styles17 Adding a Footer

18 With a USB flash drive connected to one of the computer’s USB ports, click File on the Notepad++ menu bar Click Save As on the File menu to display the Save As dialog box Type the desired Web page name in the File name text box to change the file name. Do not press ENTER after typing the file name Navigate to the desired location to save the file Click the Save button in the Save As dialog box to save the file in the desired location with the desired name Chapter 2: Creating and Editing a Web Page Using Inline Styles18 Saving an HTML File

19 Chapter 2: Creating and Editing a Web Page Using Inline Styles19 Saving an HTML File

20 Click the Internet Explorer icon on the taskbar If necessary, click the Maximize button to maximize the browser window Chapter 2: Creating and Editing a Web Page Using Inline Styles20 Starting a Browser

21 Click the Address bar to select the URL Type the path and file name of the Web page to display Press the ENTER key to display the Web page as if it were available on the Web Chapter 2: Creating and Editing a Web Page Using Inline Styles21 Viewing a Web Page in a Browser

22 Chapter 2: Creating and Editing a Web Page Using Inline Styles22 Viewing a Web Page in a Browser

23 Click the Notepad++ button on the taskbar to maximize Notepad++ and make it the active window Chapter 2: Creating and Editing a Web Page Using Inline Styles23 Activating Notepad++

24 Chapter 2: Creating and Editing a Web Page Using Inline Styles24 Types of Web Page Images

25 Chapter 2: Creating and Editing a Web Page Using Inline Styles25 Adding an Image

26 Chapter 2: Creating and Editing a Web Page Using Inline Styles26 Adding Color to a Web Page Heading

27 Chapter 2: Creating and Editing a Web Page Using Inline Styles27 Changing the Bulleted List Style

28 Chapter 2: Creating and Editing a Web Page Using Inline Styles28 Adding a Horizontal Rule

29 Chapter 2: Creating and Editing a Web Page Using Inline Styles29 Changing the Footer Style

30 Click the Internet Explorer button on the taskbar to display the Web page Click the Refresh button on the Address bar to display the modified Web page Chapter 2: Creating and Editing a Web Page Using Inline Styles30 Refreshing the View in a Browser

31 Chapter 2: Creating and Editing a Web Page Using Inline Styles31 Refreshing the View in a Browser

32 Click the Address bar on the browser to highlight the current URL Type validator.w3.org to replace the current entry, and then press the ENTER key If necessary, click OK if the browser asks to open a new window Click the Validate by File Upload tab Chapter 2: Creating and Editing a Web Page Using Inline Styles32 Validating HTML Code

33 Click the Browse button Navigate to the location containing the file to validate Click the Open button on the Choose File to Upload dialog box and the file path and name will be inserted into the File box Click the Check button. The resulting validation should be displayed Chapter 2: Creating and Editing a Web Page Using Inline Styles33 Validating HTML Code

34 Chapter 2: Creating and Editing a Web Page Using Inline Styles34 Validating HTML Code

35 Click Page on the Command bar Click View source to view the HTML code in the default text editor Click the Close button on the text editor title bar to close the active text editor window Chapter 2: Creating and Editing a Web Page Using Inline Styles35 Viewing HTML Source Code for a Web Page

36 Chapter 2: Creating and Editing a Web Page Using Inline Styles36 Viewing HTML Source Code for a Web Page

37 Ready the printer according to the printer instructions With the Web page to print open in the browser window, click the Print icon on the Command bar When the Print dialog box appears, click the Print button When the printer stops printing the Web page, retrieve the printout Click the Notepad++ button on the taskbar to activate the Notepad++ window Click File on the menu bar, click the Print command, and then click the Print button to print a hard copy of the HTML code Chapter 2: Creating and Editing a Web Page Using Inline Styles37 Printing a Web Page and an HTML File

38 Chapter 2: Creating and Editing a Web Page Using Inline Styles38 Printing a Web Page and an HTML File

39 In Notepad++, click the File menu, then Close All Click the Close button on the Notepad++ title bar Click the Close button on the Hunger Fight Internet Explorer title bar Chapter 2: Creating and Editing a Web Page Using Inline Styles39 Quitting Notepad++ and a Browser

40 Identify elements of a Web page Start Notepad++ and describe the Notepad++ window Enable word wrap in Notepad++ Enter HTML tags Enter a centered heading and a paragraph of text Chapter 2: Creating and Editing a Web Page Using Inline Styles40 Chapter Summary

41 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 Using Inline Styles41 Chapter Summary

42 Add an image, change the color of headings on a Web page, change bulleted list style, and add a horizontal rule using inline styles 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 Using Inline Styles42 Chapter Summary

43 Chapter 2 Complete HTML 7 th Edition


Download ppt "Creating and Editing a Web Page Using Inline Styles HTML5 & CSS 7 th Edition."

Similar presentations


Ads by Google