HTML Comprehensive Concepts and Techniques Third Edition 2 nd Project Creating and Editing a Web Page
HTML Project 1: Introduction to HTML 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
HTML Project 1: Introduction to HTML 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
HTML Project 1: Introduction to HTML 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
HTML Project 1: Introduction to HTML 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
HTML Project 1: Introduction to HTML 6 Starting Notepad
HTML Project 1: Introduction to HTML 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
HTML Project 1: Introduction to HTML 8 Enabling Word Wrap in Notepad
HTML Project 1: Introduction to HTML 9 HTML Tags and Their Functions
HTML Project 1: Introduction to HTML 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 " transitional.dtd"> as the entry, and then press the ENTER key twice Type and then press the ENTER key
HTML Project 1: Introduction to HTML 11 Entering HTML Tags to Define the Web Page Structure 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
HTML Project 1: Introduction to HTML 12 Entering HTML Tags to Define the Web Page Structure
HTML Project 1: Introduction to HTML 13 Entering a Heading Click the blank line below the tag, type We'll be open soon! in the text area, and then press the ENTER key twice
HTML Project 1: Introduction to HTML 14 Entering a Heading
HTML Project 1: Introduction to HTML 15 Entering a Paragraph of Text With the insertion point on line 12, 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 newest addition to Student Services, the Campus Tutoring Service. The university wants to make sure that all students can be successful, especially in their first year on campus. We have student tutors available for several freshman-level classes. and then press the ENTER key
HTML Project 1: Introduction to HTML 16 Entering a Paragraph of Text With the insertion point on line 19, type Call for an appointment, or visit us in the Anderson building, room 360. and then press the ENTER key twice
HTML Project 1: Introduction to HTML 17 Entering a Paragraph of Text
HTML Project 1: Introduction to HTML 18 Creating an Unordered List With the insertion point on line 20, press the ENTER key, 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
HTML Project 1: Introduction to HTML 19 Creating an Unordered List 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
HTML Project 1: Introduction to HTML 20 Creating an Unordered List
HTML Project 1: Introduction to HTML 21 Saving an HTML File With a floppy disk in drive A, click File on the menu bar Click Save As on the File menu Type project2.htm in the File name text box Click the Save in box arrow
HTML Project 1: Introduction to HTML 22 Saving an HTML File Click 3½ Floppy (A:) in the Save in list Click the Project02 folder and then double- click the ProjectFiles folder in the list of available folders Click the Save button in the Save As dialog box
HTML Project 1: Introduction to HTML 23 Saving an HTML File
HTML Project 1: Introduction to HTML 24 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
HTML Project 1: Introduction to HTML 25 Starting a Browser
HTML Project 1: Introduction to HTML 26 Viewing a Web Page in a Browser When the browser window appears, click the Address bar Type a:\Project02\ProjectFiles\ project2.htm in the Address box Press the ENTER key
HTML Project 1: Introduction to HTML 27 Viewing a Web Page in a Browser
HTML Project 1: Introduction to HTML 28 Activating Notepad Click the Notepad button on the taskbar
HTML Project 1: Introduction to HTML 29 Adding an Image Click after the > symbol on line 10 and then press the ENTER key Type as the tag
HTML Project 1: Introduction to HTML 30 Adding an Image
HTML Project 1: Introduction to HTML 31 Adding a Background Color Click after the y in on line 10 and then press the SPACEBAR Type bgcolor=“#fffbc6” as the color code
HTML Project 1: Introduction to HTML 32 Adding a Background Color
HTML Project 1: Introduction to HTML 33 Centering a Heading Click line 12 just after the 1 in the tag and then press the SPACEBAR Type align=“center” as the attribute
HTML Project 1: Introduction to HTML 34 Centering a Heading
HTML Project 1: Introduction to HTML 35 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
HTML Project 1: Introduction to HTML 36 Adding a Horizontal Rule
HTML Project 1: Introduction to HTML 37 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
HTML Project 1: Introduction to HTML 38 Refreshing the View in a Browser
HTML Project 1: Introduction to HTML 39 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
HTML Project 1: Introduction to HTML 40 Viewing HTML Source Code for a Web Page
HTML Project 1: Introduction to HTML 41 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
HTML Project 1: Introduction to HTML 42 Printing a Web Page and an HTML File With the printer stops printing the Web page, retrieve the printout 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
HTML Project 1: Introduction to HTML 43 Printing a Web Page and an HTML File
HTML Project 1: Introduction to HTML 44 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