Presentation is loading. Please wait.

Presentation is loading. Please wait.

Creating and Editing a Web Page Project 2. Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad.

Published byAnnabel Golden Modified over 8 years ago

Similar presentations

Presentation on theme: "Creating and Editing a Web Page Project 2. Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad."— Presentation transcript:

1 Creating and Editing a Web Page Project 2

2 Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Enter headings and a paragraph of text

3 Project Objectives Project 2: Creating and Editing a Web Page 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

4 Project Objectives Project 2: Creating and Editing a Web Page 4 Add an image, change the background color of a Web page, center a heading, 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

5 Starting Notepad Project 2: Creating and Editing a Web Page 5 Click the Start button on the Windows taskbar Click All Programs on the Start menu Point to Accessories on the All Programs submenu and then point to Notepad on the Accessories submenu Click Notepad If the Notepad window is not maximized, click the Maximize button on the Notepad title bar to maximize it

6 Starting Notepad Project 2: Creating and Editing a Web Page 6

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

8 Enabling Word Wrap in Notepad Project 2: Creating and Editing a Web Page 8

9 HTML Tags and Their Functions Project 2: Creating and Editing a Web Page 9

10 Entering HTML Tags to Define the Web Page Structure Project 2: Creating and Editing a Web Page 10 Type <!DOCTYPE html and then press the ENTER key Press the SPACEBAR three times, type PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" as the entry, and then press the ENTER key Press the SPACEBAR three times, type "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> as the entry, and then press the ENTER key twice Type and then press the ENTER key

11 Entering HTML Tags to Define the Web Page Structure Project 2: Creating and Editing a Web Page 11 Type Campus Tutoring Service Home Page and then press the ENTER key Type and then press the ENTER key Type and then press the ENTER key twice Type and then press the ENTER key Type as the end tag

12 Entering HTML Tags to Define the Web Page Structure Project 2: Creating and Editing a Web Page 12

13 Entering a Heading Project 2: Creating and Editing a Web Page 13 Click the blank line below the tag, type We'll be open soon! in the text area, and then press the ENTER key twice

14 Entering a Heading Project 2: Creating and Editing a Web Page 14

15 Entering a Paragraph of Text Project 2: Creating and Editing a Web Page 15 With the insertion point on line 13, press the ENTER key and then type The Campus Tutoring Service will be open for business soon! Dr. Isabel Myers, Dean of Student Services, announced Monday that the university has several new services to help students succeed. Part of that effort includes the new Campus Tutoring Service. The university wants to make sure that all students can be successful. We have student tutors available for several classes. Call 1-219-555-2510 for an appointment, or visit us in the Anderson building, room 360. Press the ENTER key twice

16 Entering a Paragraph of Text Project 2: Creating and Editing a Web Page 16

17 Creating an Unordered List Project 2: Creating and Editing a Web Page 17 With the insertion point at the end of line 17, press the ENTER key twice, type Our services include tutors for the following courses: as the entry, and then press the ENTER key Type as the start tag and then press the ENTER key Type Math 141 and then press the ENTER key

18 Creating an Unordered List Project 2: Creating and Editing a Web Page 18 Type Accounting 200 and then press the ENTER key Type Economics 251 and then press the ENTER key Type as the end tag and then press the ENTER key

19 Creating an Unordered List Project 2: Creating and Editing a Web Page 19

20 Saving an HTML File Project 2: Creating and Editing a Web Page 20 With a USB drive plugged into your computer, click File on the menu bar Click Save As on the File menu Type project2.htm in the File name text box

21 Saving an HTML File Project 2: Creating and Editing a Web Page 21 Click the Save in box arrow Click UDISK 2.0 (G:) in the Save in list. (Your USB drive may have a different name and letter.) If necessary, open the Project02/ProjectFiles folder Click the Save button in the Save As dialog box

22 Saving an HTML File Project 2: Creating and Editing a Web Page 22

23 Starting a Browser Project 2: Creating and Editing a Web Page 23 Click the Start button on the Windows taskbar and then point to All Programs on the Start menu Click Internet Explorer (or another browser command) on the All Programs submenu. If necessary, click the Maximize button to maximize the browser window

24 Starting a Browser Project 2: Creating and Editing a Web Page 24

25 Viewing a Web Page in a Browser Project 2: Creating and Editing a Web Page 25 Type G:\Project02\ProjectFiles\ project2.htm in the Address box Press the ENTER key

26 Viewing a Web Page in a Browser Project 2: Creating and Editing a Web Page 26

27 Activating Notepad Project 2: Creating and Editing a Web Page 27 Click the Notepad button on the taskbar

28 Adding an Image Project 2: Creating and Editing a Web Page 28 Click after the > symbol on line 10 and then press the ENTER key Type as the tag

29 Adding an Image Project 2: Creating and Editing a Web Page 29

30 Adding a Background Color Project 2: Creating and Editing a Web Page 30 Click after the y in on line 10 and then press the SPACEBAR Type bgcolor=“#fffbc6” as the color code

31 Adding a Background Color Project 2: Creating and Editing a Web Page 31

32 Centering a Heading Project 2: Creating and Editing a Web Page 32 Click line 12 just after the 1 in the tag and then press the SPACEBAR Type align=“center” as the attribute

33 Centering a Heading Project 2: Creating and Editing a Web Page 33

34 Adding a Horizontal Rule Project 2: Creating and Editing a Web Page 34 Click line 11 just after the > symbol in the tag and then press the ENTER key Type as the HTML tag Click File on the menu bar and then click Save

35 Adding a Horizontal Rule Project 2: Creating and Editing a Web Page 35

36 Refreshing the View in a Browser Project 2: Creating and Editing a Web Page 36 Click the Campus Tutoring Service Home Page button on the taskbar Click the Refresh button on the Standard toolbar

37 Refreshing the View in a Browser Project 2: Creating and Editing a Web Page 37

38 Viewing HTML Source Code for a Web Page Project 2: Creating and Editing a Web Page 38 Click View on the menu bar Click Source on the View menu Click the Close button on the Notepad title bar

39 Viewing HTML Source Code for a Web Page Project 2: Creating and Editing a Web Page 39

40 Printing a Web Page and an HTML File Project 2: Creating and Editing a Web Page 40 Ready the printer according to the printer instructions With the project2.htm Web page open in the browser window, click File on the menu bar and then click Print on the File menu Click the OK button in the Print dialog box

41 Printing a Web Page and an HTML File Project 2: Creating and Editing a Web Page 41 With the printer stops printing the Web page, retrieve the printout. Notice that the background color does not print as part of the document Click the Notepad button on the taskbar to activate the Notepad window Click File on the menu bar and then click Print on the File menu

42 Printing a Web Page and an HTML File Project 2: Creating and Editing a Web Page 42

43 Quitting Notepad and a Browser Project 2: Creating and Editing a Web Page 43 Click the Close button on the Notepad title bar Click the Close button on the Campus Tutoring Service Home Page title bar

44 Project Summary Project 2: Creating and Editing a Web Page 44 Identify elements of a Web page Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Enter headings and a paragraph of text

45 Project Summary Project 2: Creating and Editing a Web Page 45 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

46 Project Summary Project 2: Creating and Editing a Web Page 46 Add an image, change the background color of a Web page, center a heading, 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

47 Creating and Editing a Web Page Project 2 Complete

Download ppt "Creating and Editing a Web Page Project 2. Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad."

Similar presentations

HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.

HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.
Creating and Editing a Web Page Using Inline Styles

Creating and Editing a Web Page Using Inline Styles
Using Advanced Cascading Style Sheets

Using Advanced Cascading Style Sheets
Chapter 5 Creating an Image Map

Chapter 5 Creating an Image Map
Office 2003 Introductory Concepts and Techniques M i c r o s o f t Excel Web Feature Creating Static and Dynamic Web Pages Using Excel.

Office 2003 Introductory Concepts and Techniques M i c r o s o f t Excel Web Feature Creating Static and Dynamic Web Pages Using Excel.
Microsoft Office 2007 Excel Web Feature Creating Web Pages Using Excel.

Microsoft Office 2007 Excel Web Feature Creating Web Pages Using Excel.
Microsoft Office 2007 Excel Web Feature Creating Web Pages Using Excel.

Microsoft Office 2007 Excel Web Feature Creating Web Pages Using Excel.
Creating and Editing a Web Page

Creating and Editing a Web Page
Creating a Form on a Web Page

Creating a Form on a Web Page
Creating a Form with Selection Menus The SELECT control creates a selection menu This control only allows the visitor to choose pre-defined choices There.

Creating a Form with Selection Menus The SELECT control creates a selection menu This control only allows the visitor to choose pre-defined choices There.
Microsoft Office 2007 Word Web Feature Creating Web Pages Using Word.

Microsoft Office 2007 Word Web Feature Creating Web Pages Using Word.
Microsoft Office 2007 PowerPoint Web Feature Creating Web Pages Using PowerPoint.

Microsoft Office 2007 PowerPoint Web Feature Creating Web Pages Using PowerPoint.
Office 2003 Introductory Concepts and Techniques M i c r o s o f t PowerPoint Web Feature Creating a Presentation on the Web Using PowerPoint.

Office 2003 Introductory Concepts and Techniques M i c r o s o f t PowerPoint Web Feature Creating a Presentation on the Web Using PowerPoint.
Web Page Development Identify elements of a Web Page Start Notepad

Web Page Development Identify elements of a Web Page Start Notepad
Creating and Editing a Web Page

Creating and Editing a Web Page
Office 2003 Introductory Concepts and Techniques M i c r o s o f t Word Web Feature Creating Web Pages Using Word.

Office 2003 Introductory Concepts and Techniques M i c r o s o f t Word Web Feature Creating Web Pages Using Word.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.

Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.

HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.

HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.

Similar presentations

Ads by Google