1 Chapter 2 Creating and Editing a Web Page Project 2 Creating and Editing a Web Page 2 Project Objectives Identify elements of a Web page Start Notepad and describe the Notepad window ID: 749513
Download Presentation The PPT/PDF document "Project 2: Creating and Editing a Web Pa..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Project 2: Creating and Editing a Web Page
1
Chapter 2
Creating and Editing a Web PageSlide2
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 textSlide3
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
attributesSlide4
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 browserSlide5
Project 2: Creating and Editing a Web Page
5
Plan AheadComplete
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
5Slide6
Project 2: Creating and Editing a Web Page
6
Plan AheadIdentify
how to
format
various
elements
of the Web
page
Find
appropriate
graphical
images
Establish
where to
position
and how to
format
the
graphical
imagesTest the Web page for XHTML compliance
Chapter 2: Creating and Editing a Web Page
6Slide7
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 page
Topics covered
Notepad window
Headings
center
Bulleted list
Insert an image
Change background color
Add horizontal ruleSlide8
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 pagelike Wallpaper on Windows desktop
More on WebSlide9
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 levelsSlide10
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 appearanceSlide11
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 WebSlide12
Project 2: Creating and Editing a Web Page
12
Elements of a Web Page
title
image
text link
heading
image links
paragraph
background
headingSlide13
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 windowIf the Notepad window is not maximized
, click the Maximize
button on the Notepad title bar to maximize it
See next slideSlide14
Project 2: Creating and Editing a Web Page
14
Chapter 2: Creating and Editing a Web Page
14
Starting NotepadSlide15
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 slideSlide16
Project 2: Creating and Editing a Web Page
16
Chapter 2: Creating and Editing a Web Page
16
Enabling Word Wrap in NotepadSlide17
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 fileSlide18
Project 2: Creating and Editing a Web Page
18
Chapter 2: Creating and Editing a Web Page
18
HTML Tags and Their FunctionsSlide19
Project 2: Creating and Editing a Web Page
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 WebSlide20
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 siteDocument Type Definition (DTD) file containing
definitions
of
tags
and how they should be used in a Web page
More on WebSlide21
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 hereSlide22
Project 2: Creating and Editing a Web Page
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 listSlide23
Project 2: Creating and Editing a Web Page
23
Creating an Unordered List
disc
bullet list
square
bullet list
circle
bullet listSlide24
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 listSlide25
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 WebSlide26
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 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 boxIf a Folders list is displayed below the Folders button, click
the Folders button to remove the
Folders listType 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 displayedSlide27
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 locationIf 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.htmlSlide28
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 WebSlide29
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 resolutionsWC3 developed PNG format as a
graphics standard
and patent-free alternative to GIF
More on WebSlide30
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 imagevision-impaired usersSlide31
Project 2: Creating and Editing a Web Page
31
Image AttributesSlide32
Project 2: Creating and Editing a Web Page
32
Improving the Appearance of Your Web Page
image
horizontal
rule
centered
heading
background
colorSlide33
Project 2: Creating and Editing a Web Page
33
Adding Background Color
More on WebSlide34
Project 2: Creating and Editing a Web Page
34
Viewing a Web Page in a BrowserSlide35
Project 2: Creating and Editing a Web Page
35
Adding an Image
image
HTML codeSlide36
Project 2: Creating and Editing a Web Page
36
Adding a Background Color
background
color HTML codeSlide37
Project 2: Creating and Editing a Web Page
37
Centering a Heading
center heading
HTML codeSlide38
Project 2: Creating and Editing a Web Page
38
Adding a Horizontal Rule
Horizontal Rule
HTML codeSlide39
Project 2: Creating and Editing a Web Page
39
Refreshing the View in a BrowserSlide40
Project 2: Creating and Editing a Web Page
40
Validating HTML CodeClick
the
Address bar
on the
browser
to
highlight
the
current
URL
Type
validator.w3.org
to
replace
the
current
entry then press the ENTER keyIf necessary, click
OK
if the
browser
asks to
open
a new window
Click
the
Validate by File Upload
tab
Click
the
Browse
buttonChapter 2: Creating and Editing a Web Page
40Slide41
Project 2: Creating and Editing a Web Page
41
Validating HTML CodeLocate
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
41Slide42
Project 2: Creating and Editing a Web Page
42
Validating HTML Code
Chapter 2: Creating and Editing a Web Page
42Slide43
Project 2: Creating and Editing a Web Page
43
Viewing HTML Source Code for a Web PageSlide44
Project 2: Creating and Editing a Web Page
44
Printing a Web Page and an HTML FileSlide45
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 textSlide46
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 attributesSlide47
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 browserPrint a Web page and an HTML fileQuit Notepad and a browserSlide48
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
assignmentSlide49
Project 2: Creating and Editing a Web Page
49
Chapter 2 Complete
Creating and Editing a Web Page