![Page 1: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/1.jpg)
Creating and Editing a Web Page
Project 2
![Page 2: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/2.jpg)
Project Objectives
Project 2: Creating and Editing a Web Page2
Identify elements of a Web pageStart Notepad and describe the Notepad
windowEnable word wrap in NotepadEnter the HTML tagsEnter headings and a paragraph of text
![Page 3: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/3.jpg)
Project Objectives
Project 2: Creating and Editing a Web Page3
Create an unordered, ordered, or definition list
Save an HTML fileUse a browser to view a Web pageActivate NotepadIdentify Web page image types and
attributes
![Page 4: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/4.jpg)
Project Objectives
Project 2: Creating and Editing a Web Page4
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 browserPrint a Web page and an HTML fileQuit Notepad and a browser
![Page 5: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/5.jpg)
Starting Notepad
Project 2: Creating and Editing a Web Page5
Click the Start button on the Windows taskbar
Click All Programs on the Start menuPoint to Accessories on the All Programs
submenu and then point to Notepad on the Accessories submenu
Click NotepadIf the Notepad window is not maximized,
click the Maximize button on the Notepad title bar to maximize it
![Page 6: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/6.jpg)
Starting Notepad
Project 2: Creating and Editing a Web Page6
![Page 7: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/7.jpg)
Enabling Word Wrap in Notepad
Project 2: Creating and Editing a Web Page7
Click Format on the menu barIf the Word Wrap command does not have
a check mark next to it, click Word Wrap
![Page 8: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/8.jpg)
Enabling Word Wrap in Notepad
Project 2: Creating and Editing a Web Page8
![Page 9: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/9.jpg)
HTML Tags and Their Functions
Project 2: Creating and Editing a Web Page9
![Page 10: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/10.jpg)
Entering HTML Tags to Define the Web Page Structure
Project 2: Creating and Editing a Web Page10
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 <html> and then press the ENTER key Type <head> and then press the ENTER key
![Page 11: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/11.jpg)
Entering HTML Tags to Define the Web Page Structure
Project 2: Creating and Editing a Web Page11
Type <title>Campus Tutoring Service Home Page</title> and then press the ENTER key
Type </head> and then press the ENTER key Type <body> and then press the ENTER key twice Type </body> and then press the ENTER key Type </html> as the end tag
![Page 12: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/12.jpg)
Entering HTML Tags to Define the Web Page Structure
Project 2: Creating and Editing a Web Page12
![Page 13: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/13.jpg)
Entering a Heading
Project 2: Creating and Editing a Web Page13
Click the blank line below the <body> tag, type <h1>We'll be open soon!</h1> in the text area, and then press the ENTER key twice
![Page 14: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/14.jpg)
Entering a Heading
Project 2: Creating and Editing a Web Page14
![Page 15: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/15.jpg)
Entering a Paragraph of Text
Project 2: Creating and Editing a Web Page15
With the insertion point on line 13, press the ENTER key and then type <p>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.</p>
Press the ENTER key twice
![Page 16: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/16.jpg)
Entering a Paragraph of Text
Project 2: Creating and Editing a Web Page16
![Page 17: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/17.jpg)
Creating an Unordered List
Project 2: Creating and Editing a Web Page17
With the insertion point at the end of line 17, press the ENTER key twice, type <h2>Our services include tutors for the following courses:</h2> as the entry, and then press the ENTER key
Type <ul> as the start tag and then press the ENTER key
Type <li>Math 141</li> and then press the ENTER key
![Page 18: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/18.jpg)
Creating an Unordered List
Project 2: Creating and Editing a Web Page18
Type <li>Accounting 200</li> and then press the ENTER key
Type <li>Economics 251</li> and then press the ENTER key
Type </ul> as the end tag and then press the ENTER key
![Page 19: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/19.jpg)
Creating an Unordered List
Project 2: Creating and Editing a Web Page19
![Page 20: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/20.jpg)
Saving an HTML File
Project 2: Creating and Editing a Web Page20
With a USB drive plugged into your computer, click File on the menu bar
Click Save As on the File menuType project2.htm in the File name text
box
![Page 21: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/21.jpg)
Saving an HTML File
Project 2: Creating and Editing a Web Page21
Click the Save in box arrowClick 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
![Page 22: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/22.jpg)
Saving an HTML File
Project 2: Creating and Editing a Web Page22
![Page 23: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/23.jpg)
Starting a Browser
Project 2: Creating and Editing a Web Page23
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
![Page 24: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/24.jpg)
Starting a Browser
Project 2: Creating and Editing a Web Page24
![Page 25: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/25.jpg)
Viewing a Web Page in a Browser
Project 2: Creating and Editing a Web Page25
Type G:\Project02\ProjectFiles\project2.htm in the Address box
Press the ENTER key
![Page 26: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/26.jpg)
Viewing a Web Page in a Browser
Project 2: Creating and Editing a Web Page26
![Page 27: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/27.jpg)
Activating Notepad
Project 2: Creating and Editing a Web Page27
Click the Notepad button on the taskbar
![Page 28: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/28.jpg)
Adding an Image
Project 2: Creating and Editing a Web Page28
Click after the > symbol on line 10 and then press the ENTER key
Type <img src="cts_clip8.gif“ width="474“ height=“128“ alt="Student Services logo" /> as the tag
![Page 29: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/29.jpg)
Adding an Image
Project 2: Creating and Editing a Web Page29
![Page 30: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/30.jpg)
Adding a Background Color
Project 2: Creating and Editing a Web Page30
Click after the y in <body> on line 10 and then press the SPACEBAR
Type bgcolor=“#fffbc6” as the color code
![Page 31: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/31.jpg)
Adding a Background Color
Project 2: Creating and Editing a Web Page31
![Page 32: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/32.jpg)
Centering a Heading
Project 2: Creating and Editing a Web Page32
Click line 12 just after the 1 in the <h1> tag and then press the SPACEBAR
Type align=“center” as the attribute
![Page 33: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/33.jpg)
Centering a Heading
Project 2: Creating and Editing a Web Page33
![Page 34: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/34.jpg)
Adding a Horizontal Rule
Project 2: Creating and Editing a Web Page34
Click line 11 just after the > symbol in the <img> tag and then press the ENTER key
Type <hr /> as the HTML tagClick File on the menu bar and then click
Save
![Page 35: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/35.jpg)
Adding a Horizontal Rule
Project 2: Creating and Editing a Web Page35
![Page 36: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/36.jpg)
Refreshing the View in a Browser
Project 2: Creating and Editing a Web Page36
Click the Campus Tutoring Service Home Page button on the taskbar
Click the Refresh button on the Standard toolbar
![Page 37: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/37.jpg)
Refreshing the View in a Browser
Project 2: Creating and Editing a Web Page37
![Page 38: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/38.jpg)
Viewing HTML Source Code for a Web Page
Project 2: Creating and Editing a Web Page38
Click View on the menu barClick Source on the View menuClick the Close button on the Notepad title
bar
![Page 39: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/39.jpg)
Viewing HTML Source Code for a Web Page
Project 2: Creating and Editing a Web Page39
![Page 40: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/40.jpg)
Printing a Web Page and an HTML File
Project 2: Creating and Editing a Web Page40
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
![Page 41: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/41.jpg)
Printing a Web Page and an HTML File
Project 2: Creating and Editing a Web Page41
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
![Page 42: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/42.jpg)
Printing a Web Page and an HTML File
Project 2: Creating and Editing a Web Page42
![Page 43: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/43.jpg)
Quitting Notepad and a Browser
Project 2: Creating and Editing a Web Page43
Click the Close button on the Notepad title bar
Click the Close button on the Campus Tutoring Service Home Page title bar
![Page 44: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/44.jpg)
Project Summary
Project 2: Creating and Editing a Web Page44
Identify elements of a Web pageStart Notepad and describe the Notepad
windowEnable word wrap in NotepadEnter the HTML tagsEnter headings and a paragraph of text
![Page 45: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/45.jpg)
Project Summary
Project 2: Creating and Editing a Web Page45
Create an unordered, ordered, or definition list
Save an HTML fileUse a browser to view a Web pageActivate NotepadIdentify Web page image types and
attributes
![Page 46: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/46.jpg)
Project Summary
Project 2: Creating and Editing a Web Page46
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 browserPrint a Web page and an HTML fileQuit Notepad and a browser
![Page 47: 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](https://reader036.vdocuments.us/reader036/viewer/2022062518/56649e7d5503460f94b80923/html5/thumbnails/47.jpg)
Creating and Editing a Web Page
Project 2 Complete