creating and editing a web page project 2. project objectives project 2: creating and editing a web...
TRANSCRIPT
Creating and Editing a Web Page
Project 2
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
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
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
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
Starting Notepad
Project 2: Creating and Editing a Web Page6
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
Enabling Word Wrap in Notepad
Project 2: Creating and Editing a Web Page8
HTML Tags and Their Functions
Project 2: Creating and Editing a Web Page9
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
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
Entering HTML Tags to Define the Web Page Structure
Project 2: Creating and Editing a Web Page12
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
Entering a Heading
Project 2: Creating and Editing a Web Page14
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
Entering a Paragraph of Text
Project 2: Creating and Editing a Web Page16
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
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
Creating an Unordered List
Project 2: Creating and Editing a Web Page19
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
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
Saving an HTML File
Project 2: Creating and Editing a Web Page22
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
Starting a Browser
Project 2: Creating and Editing a Web Page24
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
Viewing a Web Page in a Browser
Project 2: Creating and Editing a Web Page26
Activating Notepad
Project 2: Creating and Editing a Web Page27
Click the Notepad button on the taskbar
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
Adding an Image
Project 2: Creating and Editing a Web Page29
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
Adding a Background Color
Project 2: Creating and Editing a Web Page31
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
Centering a Heading
Project 2: Creating and Editing a Web Page33
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
Adding a Horizontal Rule
Project 2: Creating and Editing a Web Page35
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
Refreshing the View in a Browser
Project 2: Creating and Editing a Web Page37
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
Viewing HTML Source Code for a Web Page
Project 2: Creating and Editing a Web Page39
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
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
Printing a Web Page and an HTML File
Project 2: Creating and Editing a Web Page42
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
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
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
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
Creating and Editing a Web Page
Project 2 Complete