Chapter 2

Creating and Editing a Web Page

PROJECT 2: CREATING AND EDITING A WEB PAGE 1

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 2

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 3

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 4

 Plan A head
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 2:Web

PROJECT Page
CREATING AND EDITING A WEB PAGE 5 5
 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 2:Web

PROJECT Page
CREATING AND EDITING A WEB PAGE 6 6
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 7

Elements of a Web Page
(Window Elements)
Title – text appearing on the title bar of the browser
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

PROJECT 2: CREATING AND EDITING A WEB PAGE 8

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

PROJECT 2: CREATING AND EDITING A WEB PAGE 9

Elements of a Web Page: (Image Elements)
inline image – graphic used in a Web page
◦ 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 10

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.

PROJECT 2: CREATING AND EDITING A WEB PAGE 11

 title

image

text link

heading
Elements of a Web Page image links
paragraph

background

heading

PROJECT 2: CREATING AND EDITING A WEB PAGE 12

 Starting sublime

Chapter 2: Creating and Editing a 2:Web

PROJECT Page
CREATING AND EDITING A WEB PAGE 13 13
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 14

HTML Tags and Their Functions

Chapter 2: Creating and Editing a 2:Web

PROJECT Page
CREATING AND EDITING A WEB PAGE 15 15
Entering HTML Tags and Text
begin by inserting a <!DOCTYPE> tag
four sets of tags
1. <html>, </html> - start and end of HTML file
2. <head>, </head> - contains Web page title and other document
header information
3. <title>, </title> - indicates title of Web page
4. <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

PROJECT 2: CREATING AND EDITING A WEB PAGE 16

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

PROJECT 2: CREATING AND EDITING A WEB PAGE 17

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 2:Web

PROJECT Page
CREATING AND EDITING A WEB PAGE 18 18
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 19

 Creating an Unordered List

disc
bullet list

square
bullet list

circle
bullet list

PROJECT 2: CREATING AND EDITING A WEB PAGE 20

 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 21

Creating an Definition List
definition terms

definitions

definitions

definition
list start tag

definition
term start

definition
list end tag

PROJECT 2: CREATING AND EDITING A WEB PAGE 22

 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 2:Web

PROJECT Page
CREATING AND EDITING A WEB PAGE 23 23
 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 2:Web

PROJECT Page
CREATING AND EDITING A WEB PAGE 24 24
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 25

 Three Image Types
1. Graphics Interchange Format (GIF) saved using patented LZW
compression
2. Joint Photographic Experts Group (JPEG) saved using compression
techniques
3. Portable Network Graphics (PNG) compressed file format supports
multiple colors and resolutions

PROJECT 2: CREATING AND EDITING A WEB PAGE 26

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

PROJECT 2: CREATING AND EDITING A WEB PAGE 27

Image Attributes

PROJECT 2: CREATING AND EDITING A WEB PAGE 28

Improving the Appearance of Your Web Page
image

centered
heading
horizontal
rule

background
color

PROJECT 2: CREATING AND EDITING A WEB PAGE 29

Viewing a Web Page in a Browser

PROJECT 2: CREATING AND EDITING A WEB PAGE 30

Adding an Image

image
HTML code

PROJECT 2: CREATING AND EDITING A WEB PAGE 31

Adding a Background Color
background
color HTML code

PROJECT 2: CREATING AND EDITING A WEB PAGE 32

Centering a Heading
center heading
HTML code

PROJECT 2: CREATING AND EDITING A WEB PAGE 33

Adding a Horizontal Rule

Horizontal Rule
HTML code

PROJECT 2: CREATING AND EDITING A WEB PAGE 34

Refreshing the View in a Browser

PROJECT 2: CREATING AND EDITING A WEB PAGE 35

 Validating HTML Code

Chapter 2: Creating and Editing a 2:Web

PROJECT Page
CREATING AND EDITING A WEB PAGE 36 36
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 37

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 38

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 39

Chapter 2 Complete

Creating and Editing a Web Page

PROJECT 2: CREATING AND EDITING A WEB PAGE 40