Project 2: Creating and Editing a Web Page 1 Chapter 2 Creating
and Editing a Web Page
Slide 3
Project 2: 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
Slide 4
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
Slide 5
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
Slide 6
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
Chapter 2: Creating and Editing a Web Page 5
Slide 7
Project 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 6
Slide 8
Project 2: Creating and Editing a Web Page 7 Introduction HTML
uses a set of special tags to define the structure, layout, and
appearance of Web pageHTML Topics covered Notepad window Headings
center Bulleted list Insert an image Change background color Add
horizontal rule
Slide 9
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 browsers 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
Slide 10
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 ( ) italic ( ) underlined ( ) 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
Slide 11
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 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
Slide 12
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
Slide 13
Project 2: Creating and Editing a Web Page 12 Elements of a Web
Page title image text link headingimage links paragraph background
heading
Slide 14
Project 2: Creating and Editing a Web Page 13 Chapter 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
Slide 15
Project 2: Creating and Editing a Web Page 14 Chapter 2:
Creating and Editing a Web Page 14 Starting Notepad
Slide 16
Project 2: Creating and Editing a Web Page 15 Chapter 2:
Creating and Editing a Web Page 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
Slide 17
Project 2: Creating and Editing a Web Page 16 Chapter 2:
Creating and Editing a Web Page 16 Enabling Word Wrap in
Notepad
Slide 18
Project 2: Creating and Editing a Web Page 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
Slide 19
Project 2: Creating and Editing a Web Page 18 Chapter 2:
Creating and Editing a Web Page 18 HTML Tags and Their
Functions
Slide 20
Project 2: Creating and Editing a Web Page 19 Entering HTML
Tags and Text begin by inserting a tag four sets of tags 1., -
start and end of HTML file 2., - contains Web page title and other
document header information 3., - indicates title of Web page 4., -
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 tag More on
Web
Slide 21
Project 2: Creating and Editing a Web Page 20 Entering HTML
Tags to Define the Web Page Structure tag tells browser which HTML
or XHTML version and type the document uses W3C supports 3 document
types 1.strict prohibit use of deprecated tags deprecated tags W3C
earmarked for eventual removal from their specifications replaced
by newer more functional tags 2.transitional allows for use of
deprecated tags 3.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
Slide 22
Project 2: Creating and Editing a Web Page 21 Chapter 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 hereHTML template
Slide 23
Project 2: Creating and Editing a Web Page 22 Creating a List
unordered (bulleted list) uses bullets , 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 , tags start and end ordered list can use numbers, letters,
or Roman numerals default Arabic numbers definition offsets
information in dictionary-like style , tags start and end
definition list , tags indicates a term , tags identifies
definition of term change default bullet or number type use type
attribute, define an item on a list
Slide 24
Project 2: Creating and Editing a Web Page 23 Creating an
Unordered List disc bullet list square bullet list circle bullet
list
Slide 25
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
Slide 26
Project 2: Creating and Editing a Web Page 25 Creating an
Definition List definitions definition terms definition list start
tag definition term start definition list end tag definitions More
on Web
Slide 27
Project 2: Creating and Editing a Web Page 26 Chapter 2:
Creating and Editing a Web Page 26 Saving an HTML File With a USB
flash drive connected to one of the computers 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
Slide 28
Project 2: Creating and Editing a Web Page 27 Chapter 2:
Creating and Editing a Web Page 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)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
Slide 29
Project 2: Creating and Editing a Web Page 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
Slide 30
Project 2: Creating and Editing a Web Page 29 3 Image Types
1.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) 2.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 3.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
Slide 31
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
Slide 32
Project 2: Creating and Editing a Web Page 31 Image
Attributes
Slide 33
Project 2: Creating and Editing a Web Page 32 Improving the
Appearance of Your Web Page image horizontal rule centered heading
background color
Slide 34
Project 2: Creating and Editing a Web Page 33 Adding Background
Color More on Web
Slide 35
Project 2: Creating and Editing a Web Page 34 Viewing a Web
Page in a Browser
Slide 36
Project 2: Creating and Editing a Web Page 35 Adding an Image
image HTML code
Slide 37
Project 2: Creating and Editing a Web Page 36 Adding a
Background Color background color HTML code
Slide 38
Project 2: Creating and Editing a Web Page 37 Centering a
Heading center heading HTML code
Slide 39
Project 2: Creating and Editing a Web Page 38 Adding a
Horizontal Rule Horizontal Rule HTML code
Slide 40
Project 2: Creating and Editing a Web Page 39 Refreshing the
View in a Browser
Slide 41
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 validator.w3.org If necessary, click OK if the
browser asks to open a new window Click the Validate by File Upload
tabValidate by File Upload Click the Browse button Chapter 2:
Creating and Editing a Web Page 40
Slide 42
Project 2: Creating and Editing a Web Page 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 Chapter 2: Creating and
Editing a Web Page 41
Slide 43
Project 2: Creating and Editing a Web Page 42 Validating HTML
Code Chapter 2: Creating and Editing a Web Page 42
Slide 44
Project 2: Creating and Editing a Web Page 43 Viewing HTML
Source Code for a Web Page
Slide 45
Project 2: Creating and Editing a Web Page 44 Printing a Web
Page and an HTML File
Slide 46
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
Slide 47
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
Slide 48
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
Slide 49
Project 2: Creating and Editing a Web Page 48 Exercise # 1 In
the Lab 3 page HTML 77HTML Composing a Personal Web Page See INF
186 Computer Assignment 3 Web page for details, hints, and
requirements for the assignmentINF 186 Computer Assignment 3 Web
page
Slide 50
Project 2: Creating and Editing a Web Page 49 Chapter 2
Complete Creating and Editing a Web Page