1. Creating and Editing a Web Page
Chapter 2
Creating and Editing a Web Page
Project 2: Creating and Editing a Web Page 1

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. 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
Project 2: Creating and Editing a Web Page
Chapter 2: Creating and Editing a Web Page 5

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
Project 2: Creating and Editing a Web Page
Chapter 2: Creating and Editing a Web Page 6

7. Introduction
HTML uses a set of special tags to define the structure, layout, and appearance of Web page
Topics covered
Notepad window
Headings
center
Bulleted list
Insert an image
Change background color
Add horizontal rule
Project 2: Creating and Editing a Web Page

8. Elements of a Web Page (Window Elements)
title – text appearing on the title bar of the browser
Name assigned to page if user adds page to browser’s list of favorites, or bookmarks
Identify subject or purpose
Concise, yet descriptive
body – contains main information displayed in the browser
includes text, graphics, and other elements
background – solid color or picture against which other elements on page appear
should not overpower
image is tiled, repeats across and down page
like Wallpaper on Windows desktop
More on Web
Project 2: Creating and Editing a Web Page

9. Elements of a Web Page (Text Elements)
Normal text – default text format used for the main content of a Web page
bold (<strong>)
italic (<em>)
underlined (<u>)
list – series of text items
Headings – used to set off different paragraphs of text or different sections of a page
larger font then normal text
often bold or italic or different color
HTML has six different sizes or levels
numbered 1-6, 1 being the largest
use consistently, do not skip levels
Project 2: Creating and Editing a Web Page

10. Elements of a Web Page (Image Elements)
inline image – graphic used in a Web page
graphic file not part of HTML file
browser merges the separate graphic file into Web page as it is displayed in browser window
contains <img> tags tell browser which graphic file, where to insert it, and how to display it
image map – special type of inline image divided into sections or hotspots
hotspots area of image that activates a function when selected
animated include motion, can change in appearance
Project 2: Creating and Editing a Web Page

11. Elements of a Web Page (Hyperlink Elements)
link – text, an image, or another Web page element that you click to instruct the browser to go to a location in a file or to request a file from the server.
More on Web
Project 2: Creating and Editing a Web Page

12. Elements of a Web Page Project 2: Creating and Editing a Web Page
title
image
Elements of a Web Page
text link
heading
image links
paragraph
background
heading
Project 2: Creating and Editing a Web Page

13. 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
See next slide
Chapter 2: Creating and Editing a Web Page
Project 2: Creating and Editing a Web Page 13 13

14. Starting Notepad Project 2: Creating and Editing a Web Page
Chapter 2: Creating and Editing a Web Page 14 14

15. 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
See next slide
Chapter 2: Creating and Editing a Web Page
Project 2: Creating and Editing a Web Page 15 15

16. Enabling Word Wrap in Notepad
Project 2: Creating and Editing a Web Page
Chapter 2: Creating and Editing a Web Page 16 16

17. The Notepad Window Title Bar – appears at top of Notepad window
Name of document opened in Notepad appears here (default name Untitled)
Menu Bar – appears just below title bar
each menu name represents a menu
menu provides a list of commands
Text Area – main part of Notepad window
Scroll Bar – appears on right side of window
vertical scroll bar - used to view different portions of text area
scroll box – indicates current location in file
Project 2: Creating and Editing a Web Page

18. HTML Tags and Their Functions
Project 2: Creating and Editing a Web Page
Chapter 2: Creating and Editing a Web Page 18 18

19. Entering HTML Tags and Text
begin by inserting a <!DOCTYPE> tag
four sets of tags
<html>, </html> - start and end of HTML file
<head>, </head> - contains Web page title and other document header information
<title>, </title> - indicates title of Web page
<body>, </body> - indicates boundaries of Web page
tags define the overall structure of a standard Web page and divide the HTML file into its basic sections.
always enter tags in lowercase except for <!DOCTYPE> tag
More on Web
Project 2: Creating and Editing a Web Page

20. Entering HTML Tags to Define the Web Page Structure
<!DOCTYPE> tag tells browser which HTML or XHTML version and type the document uses
W3C supports 3 document types
strict – prohibit use of deprecated tags
deprecated tags W3C earmarked for eventual removal from their specifications
replaced by newer more functional tags
transitional – allows for use of deprecated tags
frameset – supports frames on Web page, also allows for use of deprecated tags
includes URL referencing a Document Type Definition found on W3C Web site
Document Type Definition (DTD) file containing definitions of tags and how they should be used in a Web page
More on Web
Project 2: Creating and Editing a Web Page

21. Defining the Web Page Structure Using HTML Tags
Use the HTML template on the In-Chapter HTML Chapter 2 Web page to create the code listed here
Chapter 2: Creating and Editing a Web Page
Project 2: Creating and Editing a Web Page 21 21

22. Creating a List unordered (bulleted list) – uses bullets
<ul>, </ul> tags – start and end unordered list
3 different bullet options – disc, square or circle
default disc type bullet
ordered (numbered list) – uses numbers or letters
<ol>, </ol> tags – start and end ordered list
can use numbers, letters, or Roman numerals
default Arabic numbers
definition – offsets information in dictionary-like style
<dl>, </dl> tags – start and end definition list
<dt>, </dt> tags – indicates a term
<dd>, </dd> tags – identifies definition of term
change default bullet or number type use type attribute
<li>, </li> define an item on a list
Project 2: Creating and Editing a Web Page

23. Creating an Unordered List
disc bullet list
square bullet list
circle bullet list
Project 2: Creating and Editing a Web Page

24. Creating an Ordered List
type 1 list
type A list
type a list
type I list
type i list
Project 2: Creating and Editing a Web Page

25. Creating an Definition List
definition terms
definitions
definitions
definition list start tag
definition term start
definition list end tag
More on Web
Project 2: Creating and Editing a Web Page

26. 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
Project 2: Creating and Editing a Web Page 26 26

27. 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 HTML\ChapterFiles\Chapter02 folder (see In-Chapter HTML Chapter 2 Web Page)
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
Project 2: Creating and Editing a Web Page 27 27

28. Web Page Images
enhance the look of Web page making it more interesting and colorful
help organize a Web page
clarify a point being made in the text
serve as links to other Web pages
used to break up the Web page sections
directional elements used to navigate a Web site
More on Web
Project 2: Creating and Editing a Web Page

29. 3 Image Types
Graphics Interchange Format (GIF) saved using patented LZW compression
Standard (noninterlaced) displayed one line at a time when loading
Interlaced load all at once, becoming sharper as they load (good for large images)
Joint Photographic Experts Group (JPEG) saved using compression techniques
can specify image quality
balance between image quality and file size
used for complex images (photos)
supports more colors and resolutions
Portable Network Graphics (PNG) compressed file format supports multiple colors and resolutions
WC3 developed PNG format as a graphics standard and patent-free alternative to GIF
More on Web
Project 2: Creating and Editing a Web Page

30. Image Attributes
Attributes define additional characteristics for the HTML tag
enhance HTML tags by using attributes
example use width and height attributes for all img tags
browser knows size of image without having to calculate it
src attribute used to define the URL of the image to load
alt attribute is used to provide alternative text
brief statement of purpose of image (50 characters or less)
not a description of the image
vision-impaired users
Project 2: Creating and Editing a Web Page

31. Image Attributes
Project 2: Creating and Editing a Web Page

32. Improving the Appearance of Your Web Page
image
centered heading
horizontal rule
background color
Project 2: Creating and Editing a Web Page

33. Adding Background Color
More on Web
Project 2: Creating and Editing a Web Page

34. Viewing a Web Page in a Browser
Project 2: Creating and Editing a Web Page

35. Adding an Image Project 2: Creating and Editing a Web Page
image HTML code
Project 2: Creating and Editing a Web Page

36. Adding a Background Color
background color HTML code
Project 2: Creating and Editing a Web Page

37. center heading HTML code
Centering a Heading
center heading HTML code
Project 2: Creating and Editing a Web Page

38. Adding a Horizontal Rule
Horizontal Rule HTML code
Project 2: Creating and Editing a Web Page

39. Refreshing the View in a Browser
Project 2: Creating and Editing a Web Page

40. 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
Project 2: Creating and Editing a Web Page
Chapter 2: Creating and Editing a Web Page 40

41. 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. –see next slide
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
Project 2: Creating and Editing a Web Page
Chapter 2: Creating and Editing a Web Page 41

42. Validating HTML Code Project 2: Creating and Editing a Web Page
Chapter 2: Creating and Editing a Web Page 42

43. Viewing HTML Source Code for a Web Page
Project 2: Creating and Editing a Web Page

44. Printing a Web Page and an HTML File
Project 2: Creating and Editing a Web Page

45. 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

46. 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

47. 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

48. Exercise # 1 In the Lab 3 page HTML 77 Composing a Personal Web Page
See INF 186 Computer Assignment 3 Web page for details, hints, and requirements for the assignment
Project 2: Creating and Editing a Web Page

49. Creating and Editing a Web Page
Chapter 2 Complete
Creating and Editing a Web Page
Project 2: Creating and Editing a Web Page 49