Project 3 - Northern Kentucky University
Download
Report
Transcript Project 3 - Northern Kentucky University
Chapter 3
Creating Web Pages
with Links, Images,
and Formatted Text
Project 3: Creating Web Pages with Links, Images, and Formatted Text
1
Project Objectives
• Describe linking terms and definitions
• Create a home page and enhance a Web page
using images
• Align and add bold, italics, and color to text
• Change the bullet type used in an unordered list
• Add a text link to a Web page in the same Web
site
Project 3: Creating Web Pages with Links, Images, and Formatted Text
2
Project Objectives
•
•
•
•
•
Add an e-mail link
Use absolute and relative paths
Save and view an HTML file and test the links
Open an HTML file
Add an image with wrapped text
Project 3: Creating Web Pages with Links, Images, and Formatted Text
3
Project Objectives
• 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
4
Plan Ahead
•
•
•
•
•
•
•
Plan the Web site
Analyze the need
Choose the content for the Web page
Determine how the pages will link to one another
Establish what other links are necessary
Create the Web page and links
Test all Web pages within the Web site
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
5
Introduction
• Project uses the following types of links
– text and image links to another Web page in the same Web
site
– text links to another Web page in a different Web site
– text links within a Web page
– e-mail links
Project 3: Creating Web Pages with Links, Images, and Formatted Text
6
Entering HTML Tags to Define
the Web Page Structure
Use the HTML template
on the In-Chapter HTML
Chapter 2 Web page
to create the code
listed here
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
7
Using Links on a Web Page
• moving mouse pointer over a link causes mouse
pointer to change to a pointing hand
• displays URL of linked page on the status bar of
browser
• use descriptive text as the clickable word
– “Click here” – does not explain purpose of link
– “Save up to 60% on airfare” better choice
• default color of links set by browser unless coded
in <body> tag in HTML code
– same color defaults apply to border color around
an image link
Project 3: Creating Web Pages with Links, Images, and Formatted Text
8
Using Links on a Web Page
image link
text link
URL on
status bar
Project 3: Creating Web Pages with Links, Images, and Formatted Text
9
Using Links on a Web Page
normal link
visited link
active link
More on Web
Project 3: Creating Web Pages with Links, Images, and Formatted Text
10
Using Links on a Web Page
Project 3: Creating Web Pages with Links, Images, and Formatted Text
11
Using Links on a Web Page
image with
border and
normal link
image with
border and
visited link
image with
border and
no link
Project 3: Creating Web Pages with Links, Images, and Formatted Text
12
Linking within a Web Page
• allows user to move quickly from one
section of a long Web page to another
• move directly to a section of interest rather
than scrolling through a document
• use list of links like a menu or table of
contents at the top of the page
Project 3: Creating Web Pages with Links, Images, and Formatted Text
13
Linking to an E-Mail Address
• home page provides a way for visitors to contact
person at company responsible for maintaining
Web site or addressing customer questions or
comments
• when visitor clicks e-mail link, automatically
opens new message in default e-mail program
and inserts appropriate contact e-mail address in
the To field
• Note: if browser not configured to send mail,
e-mail link will not work
Project 3: Creating Web Pages with Links, Images, and Formatted Text
14
Using Absolute and Relative Paths
• All projects in book both HTML code and
graphical images saved in the same folder
– more appropriate to separate HTML code files and
graphical images files into different folders
– create folder structure in which each functional
area has its own folder
• path describes the location (folder or external
Web site) where the files can be found
Project 3: Creating Web Pages with Links, Images, and Formatted Text
15
Using Absolute and Relative Paths
2 Kinds of Paths
1. Absolute specifies exact address for the file
•
•
E:\HTML\ChapterFiles\Chapter03\pastadivine.html
cumbersome – if files are moved to different folder or Web
server all absolute paths would have to change
2. Relative specify location of a file, relative to location of
current file
•
utilizes double period (..) symbol to move up or down the
folder structure
•
•
..\images\pastadivine.html
relative path better choice offers more flexibility
•
if root folder must change would not have change the
addressing
Project 3: Creating Web Pages with Links, Images, and Formatted Text
16
Adding an Image
• Pasta Divine home page includes an image logo
to provide visual appeal, catch visitor’s interest
and promote company brand.
• logo image is same image found in print on
company stationary, cards, and other promotional
materials
– consistent visual and brand message
– including width and height of logo image will
improve load time
– alt attribute appears when page is loading and
when user moves mouse over image
Project 3: Creating Web Pages with Links, Images, and Formatted Text
17
Adding an Image
width attribute
and value
alt attribute
and value
end img
tag
img tag to
insert image
src attribute used
to specify the
name and
location of image
height attribute
and value
Project 3: Creating Web Pages with Links, Images, and Formatted Text
18
Font Attributes and Values
Project 3: Creating Web Pages with Links, Images, and Formatted Text
19
Adding a Left-Aligned Heading
with a Font Color
start h1
heading tag
start
font tag
font color
attribute and
color code
end font
tag
end h1
heading tag
Project 3: Creating Web Pages with Links, Images, and Formatted Text
20
Creating Unordered (Bulleted) Lists
start ul tag
with square
bullets
h2 heading
line items
end ul tag
Project 3: Creating Web Pages with Links, Images, and Formatted Text
21
Adding a Text Link
• <a> and </a> tags used to create links in a Web
page.
• <a> tag also is called the anchor tag because it is
used to create anchors for links to another page
in same Web site, to an external Web site, within
same Web page, or an e-mail link.
• basic format:
– <a href=“URL”>linktext</a>
• linktext is clickable word or phrase on Web page
• href (hypertext reference) name or URL of linked
page or file
Project 3: Creating Web Pages with Links, Images, and Formatted Text
22
Tag Attributes and Functions
Project 3: Creating Web Pages with Links, Images, and Formatted Text
23
Adding a Text Link to Another Web
Page within the Same Web Site
start
<a> tag
end
<a> tag
link to Web page
specials.html
monthly specials to
appear as text link
Project 3: Creating Web Pages with Links, Images, and Formatted Text
24
Adding an E-Mail Link
mailto:
identifies link
as e-mail link
[email protected]
to appear as
clickable text for
e-mail link
e-mail
address
end
link
Project 3: Creating Web Pages with Links, Images, and Formatted Text
25
Adding a Text Link to a Web Page in
Another Web Site
start
<a> tag
end
<a> tag
link to Web page
wikipedia.org
history of pasta to
appear as text link
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
26
Validating a Web Page
• Click the Start button on the Windows Vista taskbar
to display the Start menu
• Click the Internet icon in the pinned items list on the
Start menu to start Internet Explorer. If necessary,
click the Maximize button to maximize the browser
window
• Click the Address bar to select the URL in the
Address bar
• Type validator.w3.org to replace the current
entry then press the ENTER key.
• Click the Validate by File Upload tab
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
27
Validating a Web Page
• Click the Browse button
• Locate the pastadivine.html file on your storage
device and click the file name
• Click the Open button in 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 as shown on the following
slide
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
28
Validating a Web Page
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
29
Viewing a Web Page
h1 heading
h2 heading
bulleted list
with square
bullet type
Project 3: Creating Web Pages with Links, Images, and Formatted Text
30
Testing Links in a Web Page
Pasta divine
Web page prior
to editing
More on Web
Project 3: Creating Web Pages with Links, Images, and Formatted Text
31
Setting Link Targets
• target – named location, link within the same Web page or
file
• in project a bulleted list is added as links to the targets
– links are directed to the heading at the top of each major
section
• when clicked links will move Web page visitor to the targets
• users will not have to scroll to topics or sections
• four text links names “To Top” will return users to top of
document
More on Web
Project 3: Creating Web Pages with Links, Images, and Formatted Text
32
Setting Link Targets
targets
named locations
Project 3: Creating Web Pages with Links, Images, and Formatted Text
33
Adding Links to Link Targets
within a Web Page
Links to
link targets
named locations
Project 3: Creating Web Pages with Links, Images, and Formatted Text
34
Adding Links to a Target
at the Top of the Page
• HTML Code to setup target (top location) at
beginning of document
– <a name="top"></a> as the tag
• HTML Code to use the target link (top) to return
to the beginning of document
– <p><a href="#top"><font size=-1>To
top</font> </a></p> as the tag
Project 3: Creating Web Pages with Links, Images, and Formatted Text
35
Adding Links to a Target
at the Top of the Page
More on Web
Links to
top target
named location
Project 3: Creating Web Pages with Links, Images, and Formatted Text
36
More on Web
Formatting Text
• logical style tags allow browser to interpret tag
based on browser settings, relative to other text
in a Web page
– <h2> heading tag larger than regular text yet
smaller than <h1>
– <strong> text should have a strong emphasis
• most browsers interpret as bold
• physical style tags specify a particular font
change interpreted strictly by all browsers
– <b> bold tag
• in practice, <strong> and <b> tags have same
result when Web page displayed
Project 3: Creating Web Pages with Links, Images, and Formatted Text
37
Formatting Text
Project 3: Creating Web Pages with Links, Images, and Formatted Text
38
Adding an Image with Wrapped Text
• Alignment is a key consideration when inserting an image
– horizontal – values can be left or right
– vertical – values can be top, middle, or bottom of image
– alignment can give an image and the surrounding text
completely different looks
– <img src=“agave.jpg” align=“right”
alt=“Agave” width=“212” height=“203” />
– must enter a break <br /> tag to stop text wrapping
• <br clear=“right” />
• <br clear=“all” /> clears both left and right alignments
More on Web
Project 3: Creating Web Pages with Links, Images, and Formatted Text
39
Adding an Image with Wrapped
Text
Image with
Wrapped Text
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
40
Clearing the Text Wrapping
Clearing
Wrapped Text
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
41
Using Horizontal and Vertical
Spacing
• Using spacing between and around images can
make the Web page easier to read
– hspace attribute of <img> tag controls amount of
horizontal space around an image
•hspace=“20”
– vspace attribute of <img> tag controls amount of
vertical space around an image
•vspace=“20”
Project 3: Creating Web Pages with Links, Images, and Formatted Text
42
Using Thumbnail Images
• developers use thumbnail images to improve loading time
• thumbnail image is a smaller version of the image itself
– used as a link, when clicked loads full-sized image
– gives visitor opportunity to decide whether to view full-sized
image
– create thumbnail version of image, image is resized to
smaller size using a paint or image-editing application, then
saved to a different file name
• <a href=“largeimage.gif”><img
src=“thumbnail.gif” /></a>
– use Back button on browser to return to original Web page
displaying the thumbnail
Project 3: Creating Web Pages with Links, Images, and Formatted Text
43
Obtaining Images
• Web sites – downloaded free for noncommercial
purposes (copyright rules)
– use search engine
• key words “free GIFs” or “free Web images”
– right-click image, click Save Picture As, save
image to your computer
• clip art – found in applications
• scanner or digital camera
• create images – using paint or image-editing
program
Project 3: Creating Web Pages with Links, Images, and Formatted Text
44
Chapter Summary
• Describe linking terms and definitions
• Create a home page and enhance a Web page
using images
• Align and add bold, italics, and color to text
• Change the bullet type used in an unordered list
• Add a text link to a Web page in the same Web
site
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
45
Chapter Summary
•
•
•
•
•
Add an e-mail link
Use absolute and relative paths
Save and view an HTML file and test the links
Open an HTML file
Add an image with wrapped text
Project 3:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
46
Chapter Summary
• 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:
Chapter
3:Creating
CreatingWeb
WebPages
Pageswith
withLinks,
Links,Images,
Images,and
andFormatted
FormattedText
Text
47
Homework # 6
• In the Lab 3 page HTML 140-141
• Creating Two Linked Web Pages
• See INF 186 Computer Assignment 6 Web page
for details, hints, and requirements for the
assignment
Project 3: Creating Web Pages with Links, Images, and Formatted Text
48
HTML
Concepts and Techniques
Fourth Edition
Project 3 Complete
Creating Web Pages
with Links, Images,
and Formatted Text