2nd Project

1
2nd Project

• 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

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

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

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

6
Starting Notepad
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

8
Enabling Word Wrap in Notepad
9
HTML Tags and Their Functions
10
Entering HTML Tags to Define the Web Page
Structure

• Type lt!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-transition
  al.dtd"gt as the entry, and then press the ENTER
  key twice
• Type lthtmlgt and then press the ENTER key
• Type ltheadgt and then press the ENTER key

11
Entering HTML Tags to Define the Web Page
Structure

• Type lttitlegtCampus Tutoring Service Home
  Pagelt/titlegt and then press the ENTER key
• Type lt/headgt and then press the ENTER key
• Type ltbodygt and then press the ENTER key twice
• Type lt/bodygt and then press the ENTER key
• Type lt/htmlgt as the end tag

12
Entering HTML Tags to Define the Web Page
Structure
13
Entering a Heading

• Click the blank line below the ltbodygt tag, type
  lth1gtWe'll be open soon!lt/h1gt in the text area,
  and then press the ENTER key twice

14
Entering a Heading
15
Entering a Paragraph of Text

• With the insertion point on line 12, press the
  ENTER key and then type ltpgtThe 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.lt/pgt and then
  press the ENTER key

16
Entering a Paragraph of Text

• With the insertion point on line 19, type ltpgtCall
  1-219-555-2510 for an appointment, or visit us in
  the Anderson building, room 360.lt/pgt and then
  press the ENTER key twice

17
Entering a Paragraph of Text
18
Creating an Unordered List

• With the insertion point on line 20, press the
  ENTER key, type lth2gtOur services include tutors
  for the following courseslt/h2gt as the entry, and
  then press the ENTER key
• Type ltulgt as the start tag and then press the
  ENTER key
• Type ltligtMath 141lt/ligt and then press the ENTER
  key

19
Creating an Unordered List

• Type ltligtAccounting 200lt/ligt and then press the
  ENTER key
• Type ltligtEconomics 251lt/ligt and then press the
  ENTER key
• Type lt/ulgt as the end tag and then press the
  ENTER key

20
Creating an Unordered List
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

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

23
Saving an HTML File
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

25
Starting a Browser
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

27
Viewing a Web Page in a Browser
28
Activating Notepad

• Click the Notepad button on the taskbar

29
Adding an Image

• Click after the gt symbol on line 10 and then
  press the ENTER key
• Type ltimg src"cts_clip8.gif width"484
  height"62 alt"Student Services logo" /gt as the
  tag

30
Adding an Image
31
Adding a Background Color

• Click after the y in ltbodygt on line 10 and then
  press the SPACEBAR
• Type bgcolorfffbc6 as the color code

32
Adding a Background Color
33
Centering a Heading

• Click line 12 just after the 1 in the lth1gt tag
  and then press the SPACEBAR
• Type aligncenter as the attribute

34
Centering a Heading
35
Adding a Horizontal Rule

• Click line 11 just after the gt symbol in the
  ltimggt tag and then press the ENTER key
• Type lthr /gt as the HTML tag
• Click File on the menu bar and then click Save

36
Adding a Horizontal Rule
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

38
Refreshing the View in a Browser
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

40
Viewing HTML Source Code for a Web Page
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

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

43
Printing a Web Page and an HTML File
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