Download presentation
Presentation is loading. Please wait.
1
Creating and Editing a Web Page
Chapter 2 Creating and Editing a Web Page
2
Chapter Objectives Identify elements of a Web page
Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Enter a centered heading and a paragraph of text Chapter 2: Creating and Editing a Web Page
3
Chapter 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 Chapter 2: Creating and Editing a Web Page
4
Chapter Objectives Add an image, change the background color of a Web page, 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 Chapter 2: Creating and Editing a Web Page
5
Plan Ahead Complete Web page planning
Analyze the need for the Web page Choose the content for the Web page Determine where to save the Web page Chapter 2: Creating and Editing a Web Page
6
Plan Ahead Identify how to format various elements of the Web page
Find appropriate graphical images Establish where to position and how to format the graphical images Test the Web page for XHTML compliance Chapter 2: Creating and Editing a Web Page
7
Starting Notepad Click the Start button on the Windows Vista taskbar to display the Start menu Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list Click Accessories in the All Programs list Click Notepad in the Accessories list to display the Notepad window If the Notepad window is not maximized, click the Maximize button on the Notepad title bar to maximize it Chapter 2: Creating and Editing a Web Page
8
Starting Notepad Chapter 2: Creating and Editing a Web Page
9
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 Chapter 2: Creating and Editing a Web Page
10
Enabling Word Wrap in Notepad
Chapter 2: Creating and Editing a Web Page
11
HTML Tags and Their Functions
Chapter 2: Creating and Editing a Web Page
12
Defining the Web Page Structure Using HTML Tags
Enter the HTML code shown in Table 2–2 on page HTML 38. Press ENTER at the end of each line. If you make an error as you are typing, use the BACKSPACE key to delete all the characters back to and including the incorrect characters, and then continue typing Press the ENTER key once more, leaving one blank line after the </head> tag Type <body> and then press the ENTER key twice Type </body> and then press the ENTER key Type </html> as the end tag Chapter 2: Creating and Editing a Web Page
13
Defining the Web Page Structure Using HTML Tags
Chapter 2: Creating and Editing a Web Page
14
Entering a Centered Heading
Click the blank line below the <body> tag and type <h1 align=”center”>Please Help!</h1> in the text area, and then press the ENTER key twice Chapter 2: Creating and Editing a Web Page
15
Entering a Centered Heading
Chapter 2: Creating and Editing a Web Page
16
Entering a Paragraph of Text
With the insertion point on line 14, enter the HTML code as shown in Table 2–3 on page HTML 42. Press ENTER at the end of each line in Table 2-3 and use only one space after periods Press the ENTER key once more Chapter 2: Creating and Editing a Web Page
17
Entering a Paragraph of Text
Chapter 2: Creating and Editing a Web Page
18
Creating an Unordered List
With the insertion point on line 22, enter the HTML code as shown in Table 2–4 on page HTML 45. Press ENTER at the end of each line and use only one space after periods Press the ENTER key after typing line 28 Chapter 2: Creating and Editing a Web Page
19
Creating an Unordered List
Chapter 2: Creating and Editing a Web Page
20
Saving an HTML File With a USB flash drive connected to one of the computer’s USB ports, click File on the Notepad menu bar Click Save As on the File menu to display the Save As dialog box If the Navigation pane is not displayed in the Save As dialog box, click the Browse Folders button to expand the dialog box If a Folders list is displayed below the Folders button, click the Folders button to remove the Folders list Type fooddrive.html in the File name text box to change the file name. Do not press ENTER after typing the file name If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Save As dialog box until Computer is displayed Chapter 2: Creating and Editing a Web Page
21
Saving an HTML File Click Computer in the Favorite Links section to display a list of available drives If necessary, scroll until UDISK 2.0 (G:) appears in the list of available drives Double-click UDISK 2.0 (G:) in the Computer list to select the USB flash drive, drive G in this case, as the new save location If necessary, open the Chapter02\ChapterFiles folder Click the Save button in the Save As dialog box to save the file on the USB flash drive with the name fooddrive.html Chapter 2: Creating and Editing a Web Page
22
Saving an HTML File Chapter 2: Creating and Editing a Web Page
23
Starting a Browser Click the Start button on the Windows Vista taskbar to display the Start menu Click the Internet icon in the pinned items list on the Start menu to start Internet Explorer If necessary, click the Maximize button to maximize the browser window Chapter 2: Creating and Editing a Web Page
24
Starting a Browser Chapter 2: Creating and Editing a Web Page
25
Viewing a Web Page in a Browser
Click the Address bar to select the URL on the Address bar Type g:\Chapter02\ChapterFiles\fooddrive.html to display the new URL on the Address bar. The Web page does not display until you press the ENTER key as shown in the next step Press the ENTER key to display the fooddrive.html page as if it were available on the Web Chapter 2: Creating and Editing a Web Page
26
Viewing a Web Page in a Browser
Chapter 2: Creating and Editing a Web Page
27
Activating Notepad Click the fooddrive.html - Notepad button on the taskbar to maximize Notepad and make it the active window Chapter 2: Creating and Editing a Web Page
28
Adding an Image Click after the > symbol in <body> on line 11 and then press the ENTER key Type <img src=”fooddrivelogo.gif” width=”601” height=”170” alt=”Food Drive logo” /> and press ENTER to insert the image tag for the logo Chapter 2: Creating and Editing a Web Page
29
Adding an Image Chapter 2: Creating and Editing a Web Page
30
Adding a Background Color
Click after the “y” but before the closing bracket in <body> on line 11 and then press the SPACEBAR Type bgcolor=”#ffff99” as the background color code Chapter 2: Creating and Editing a Web Page
31
Adding a Background Color
Chapter 2: Creating and Editing a Web Page
32
Adding a Horizontal Rule
Click the blank line 23 and then press the ENTER key Type <hr /> as the HTML tag and then press the ENTER key Click File on the menu bar and then click Save Chapter 2: Creating and Editing a Web Page
33
Adding a Horizontal Rule
Chapter 2: Creating and Editing a Web Page
34
Refreshing the View in a Browser
Close the Notepad window If necessary, click the Community Food Drive Home Page button on the taskbar to display the home page Click the Refresh button on the Standard toolbar to display the modified Web page Chapter 2: Creating and Editing a Web Page
35
Refreshing the View in a Browser
Chapter 2: Creating and Editing a Web Page
36
Validating HTML Code Click the Address bar on the browser to highlight the current URL Type validator.w3.org to replace the current entry then press the ENTER key If necessary, click OK if the browser asks to open a new window Click the Validate by File Upload tab Click the Browse button Chapter 2: Creating and Editing a Web Page
37
Validating HTML Code Locate the fooddrive.html file on your storage device and then click the file name Click the Open button on the Choose file dialog box and the file name will be inserted into the File box Click the Check button. The resulting validation should be displayed. Return to the Community Food Drive Web page, either by clicking the Back button on your browser or by clicking the Community Food Drive button in the task bar Chapter 2: Creating and Editing a Web Page
38
Validating HTML Code Chapter 2: Creating and Editing a Web Page
39
Viewing HTML Source Code for a Web Page
Click Page on the Command bar Click View Source to view the HTML code in the default text editor Click the Close button on the Notepad title bar to close the active Notepad window Chapter 2: Creating and Editing a Web Page
40
Viewing HTML Source Code for a Web Page
Chapter 2: Creating and Editing a Web Page
41
Printing a Web Page and an HTML File
Ready the printer according to the printer instructions With the Community Food Drive Web page open in the browser window, click the Print icon on the Command bar When 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 the Print command, and then click the Print button to print a hard copy of the HTML code Chapter 2: Creating and Editing a Web Page
42
Printing a Web Page and an HTML File
Chapter 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 Community Food Drive Home Page title bar Chapter 2: Creating and Editing a Web Page
44
Chapter Summary Identify elements of a Web page
Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Enter a centered heading and a paragraph of text Chapter 2: Creating and Editing a Web Page
45
Chapter 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 Chapter 2: Creating and Editing a Web Page
46
Chapter Summary Add an image, change the background color of a Web page, 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 Chapter 2: Creating and Editing a Web Page
47
Creating and Editing a Web Page
Chapter 2 Complete Creating and Editing a Web Page
Similar presentations
