Transcript Project 1
HTML Concepts and Techniques Fourth Edition
Project 2
Creating and Editing a Web Page
Project Objectives
• • • • • 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
Project 2: Creating and Editing a Web Page 2
Project Objectives
• • • • • 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
Project 2: Creating and Editing a Web Page 3
Project Objectives
• • • • 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
Project 2: Creating and Editing a Web Page 4
Starting Notepad
• • • • • 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
Project 2: Creating and Editing a Web Page 5
Starting Notepad
Project 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
Project 2: Creating and Editing a Web Page 7
Enabling Word Wrap in Notepad
Project 2: Creating and Editing a Web Page 8
HTML Tags and Their Functions
Project 2: Creating and Editing a Web Page 9
Entering HTML Tags to Define the Web Page Structure
• • • • • Type as the entry, and then press the ENTER key twice Type and then press the ENTER key Type
and then press the ENTER keyProject 2: Creating and Editing a Web Page 10
Entering HTML Tags to Define the Web Page Structure
• • • • • Type
Project 2: Creating and Editing a Web Page 11
Entering HTML Tags to Define the Web Page Structure Project 2: Creating and Editing a Web Page 12
Entering a Heading
• Click the blank line below the
tag, typeWe'll be open soon!
in the text area, and then press the ENTER key twiceProject 2: Creating and Editing a Web Page 13
Entering a Heading
Project 2: Creating and Editing a Web Page 14
Entering a Paragraph of Text
• • 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 twiceProject 2: Creating and Editing a Web Page 15
Entering a Paragraph of Text
Project 2: Creating and Editing a Web Page 16
Creating an Unordered List
• • • With the insertion point at the end of line 17, press the ENTER key twice, type following courses:
Our services include tutors for the as the entry, and then press the ENTER key Type as the end tag and then press the ENTER key
Project 2: Creating and Editing a Web Page 18
Creating an Unordered List
Project 2: Creating and Editing a Web Page 19
Saving an HTML File
• • • 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
Project 2: Creating and Editing a Web Page 20
Saving an HTML File
• • • • 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
Project 2: Creating and Editing a Web Page 21
Saving an HTML File
Project 2: Creating and Editing a Web Page 22
Starting a Browser
• • 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
Project 2: Creating and Editing a Web Page 23
Starting a Browser
Project 2: Creating and Editing a Web Page 24
Viewing a Web Page in a Browser
• • Type G:\Project02\ProjectFiles\ project2.htm
in the Address box Press the ENTER key
Project 2: Creating and Editing a Web Page 25
Viewing a Web Page in a Browser Project 2: Creating and Editing a Web Page 26
Activating Notepad
• Click the Notepad button on the taskbar
Project 2: Creating and Editing a Web Page 27
Adding an Image
• • Click after the > symbol on line 10 and then press the ENTER key Type 
as the tag
Project 2: Creating and Editing a Web Page 28
Adding an Image
Project 2: Creating and Editing a Web Page 29
Adding a Background Color
• • Click after the y in
on line 10 and then press the SPACEBAR Type bgcolor=“#fffbc6” as the color codeProject 2: Creating and Editing a Web Page 30
Adding a Background Color
Project 2: Creating and Editing a Web Page 31
Centering a Heading
• • Click line 12 just after the 1 in the
tag and then press the SPACEBAR Type align=“center” as the attribute
Project 2: Creating and Editing a Web Page 32
Centering a Heading
Project 2: Creating and Editing a Web Page 33
Adding a Horizontal Rule
• • • 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
Project 2: Creating and Editing a Web Page 34
Adding a Horizontal Rule
Project 2: Creating and Editing a Web Page 35
Refreshing the View in a Browser
• • Click the Campus Tutoring Service Home Page button on the taskbar Click the Refresh button on the Standard toolbar
Project 2: Creating and Editing a Web Page 36
Refreshing the View in a Browser Project 2: Creating and Editing a Web Page 37
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
Project 2: Creating and Editing a Web Page 38
Viewing HTML Source Code for a Web Page Project 2: Creating and Editing a Web Page 39
Printing a Web Page and an HTML File
• • • 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
Project 2: Creating and Editing a Web Page 40
Printing a Web Page and an HTML File
• • • 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
Project 2: Creating and Editing a Web Page 41
Printing a Web Page and an HTML File Project 2: Creating and Editing a Web Page 42
Quitting Notepad and a Browser
• • Click the Close button on the Notepad title bar Click the Close button on the Campus Tutoring Service Home Page title bar
Project 2: Creating and Editing a Web Page 43
Project Summary
• • • • • 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
Project 2: Creating and Editing a Web Page 44
Project Summary
• • • • • 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
Project 2: Creating and Editing a Web Page 45
Project Summary
• • • • 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
Project 2: Creating and Editing a Web Page 46
HTML Concepts and Techniques Fourth Edition
Project 2 Complete
Creating and Editing a Web Page