Download presentation
1
Creating and Editing a Web Page
Project 2 Creating and Editing a Web Page
2
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
3
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
4
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
5
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
6
Starting Notepad Project 2: Creating and Editing a Web Page
7
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
8
Enabling Word Wrap in Notepad
Project 2: Creating and Editing a Web Page
9
HTML Tags and Their Functions
Project 2: Creating and Editing a Web Page
10
Entering HTML Tags to Define the Web Page Structure
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 " 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 Project 2: Creating and Editing a Web Page
11
Entering HTML Tags to Define the Web Page Structure
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 Project 2: Creating and Editing a Web Page
12
Entering HTML Tags to Define the Web Page Structure
Project 2: Creating and Editing a Web Page
13
Entering a Heading 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 Project 2: Creating and Editing a Web Page
14
Entering a Heading Project 2: Creating and Editing a Web Page
15
Entering a Paragraph of Text
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 for an appointment, or visit us in the Anderson building, room 360.</p> Press the ENTER key twice Project 2: Creating and Editing a Web Page
16
Entering a Paragraph of Text
Project 2: Creating and Editing a Web Page
17
Creating an Unordered List
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 Project 2: Creating and Editing a Web Page
18
Creating an Unordered List
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 Project 2: Creating and Editing a Web Page
19
Creating an Unordered List
Project 2: Creating and Editing a Web Page
20
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
21
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
22
Saving an HTML File Project 2: Creating and Editing a Web Page
23
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
24
Starting a Browser Project 2: Creating and Editing a Web Page
25
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
26
Viewing a Web Page in a Browser
Project 2: Creating and Editing a Web Page
27
Activating Notepad Click the Notepad button on the taskbar
Project 2: Creating and Editing a Web Page
28
Adding an Image 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 Project 2: Creating and Editing a Web Page
29
Adding an Image Project 2: Creating and Editing a Web Page
30
Adding a Background Color
Click after the y in <body> on line 10 and then press the SPACEBAR Type bgcolor=“#fffbc6” as the color code Project 2: Creating and Editing a Web Page
31
Adding a Background Color
Project 2: Creating and Editing a Web Page
32
Centering a Heading Click line 12 just after the 1 in the <h1> tag and then press the SPACEBAR Type align=“center” as the attribute Project 2: Creating and Editing a Web Page
33
Centering a Heading Project 2: Creating and Editing a Web Page
34
Adding a Horizontal Rule
Click line 11 just after the > symbol in the <img> tag and then press the ENTER key Type <hr /> as the HTML tag Click File on the menu bar and then click Save Project 2: Creating and Editing a Web Page
35
Adding a Horizontal Rule
Project 2: Creating and Editing a Web Page
36
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
37
Refreshing the View in a Browser
Project 2: Creating and Editing a Web Page
38
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
39
Viewing HTML Source Code for a Web Page
Project 2: Creating and Editing a Web Page
40
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
41
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
42
Printing a Web Page and an HTML File
Project 2: Creating and Editing a Web Page
43
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
44
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
45
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
46
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
47
Creating and Editing a Web Page
Project 2 Complete Creating and Editing a Web Page
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.