#3 Links, Images, and Formatted Texts - HTML FourthEdition...

HTML
Concepts and Techniques
Fourth Edition
Project 3
Creating Web Pages
with Links, Images,
and Formatted Text

Project 3: Creating Web Pages with Links, Images, and Formatted Text
2
Project Objectives
•
Describe linking terms and definitions
•
Create a home page and enhance a Web page
using images
•
Use absolute and relative paths
•
Align and add bold, italics, and color to text
•
Change the bullet type used in an unordered list

Project 3: Creating Web Pages with Links, Images, and Formatted Text
3
Project Objectives
•
Add a background image
•
Add a text link to a Web page in the same Web
site
•
Add an e-mail link
•
View the HTML file and test the links
•
Open an HTML file

Project 3: Creating Web Pages with Links, Images, and Formatted Text
4
Project Objectives
•
Add an image with wrapped text
•
Add a text link to a Web page on another Web
site
•
Add links to targets within a Web page
•
Copy and paste HTML code
•
Add an image link to a Web page in the same
Web site

Project 3: Creating Web Pages with Links, Images, and Formatted Text
5
Starting Notepad
•
Click the Start button on the taskbar and then point to All
Programs on the Start menu
•
Point to Accessories on the All Programs submenu, and
then click Notepad on the Accessories submenu
•
If the Notepad window is not maximized, click the
Maximize button on the Notepad title bar to maximize it
•
Click Format on the menu bar
•
If Word Wrap is not checked, click Word Wrap

Project 3: Creating Web Pages with Links, Images, and Formatted Text
6
Entering HTML Tags to Define
the Web Page Structure

Project 3: Creating Web Pages with Links, Images, and Formatted Text
7
Adding an Image
•
Type <img src="plantworldlg.jpg“
width="720“ height="84“ alt="Plant
World logo" /> and then press the ENTER
key

Project 3: Creating Web Pages with Links, Images, and Formatted Text
8
Adding an Image

Project 3: Creating Web Pages with Links, Images, and Formatted Text
9
Adding a Left-Aligned Heading
with a Font Color
•
With the insertion point on line 11, type
<h1><font color="#000066">Welcome to
Plant World!</font></h1> and then press
the ENTER key

Project 3: Creating Web Pages with Links, Images, and Formatted Text
10
Adding a Left-Aligned Heading
with a Font Color

Project 3: Creating Web Pages with Links, Images, and Formatted Text
11
Entering a Paragraph of Text
•
With the insertion point on line 12, type <p>For the
finest in indoor and outdoor plants, come
to Plant World! Plant World is the premier
nursery for all of your planting needs.
Our professional landscape design artists
can visit your home and make
recommendations for plants to use in your
home or your yard.</p> as the first paragraph in the
HTML file
•
Press the ENTER key twice

Project 3: Creating Web Pages with Links, Images, and Formatted Text
12
Entering a Paragraph of Text

Project 3: Creating Web Pages with Links, Images, and Formatted Text
13
Creating Unordered (Bulleted) Lists
•
If necessary, click line 16
•
Enter the HTML code shown in Table 3-3 on
page HTM 85
•
Press the ENTER key twice to insert a blank line
on line 29, after the second </ul> in the HTML
code

Project 3: Creating Web Pages with Links, Images, and Formatted Text
14
Creating Unordered (Bulleted) Lists