Upload
kelley-robert-price
View
229
Download
0
Tags:
Embed Size (px)
Citation preview
Project 3: Creating Web Pages with Links, Images, and Formatted Text 1
Chapter 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• 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 3
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 4
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 5
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
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 5
Project 3: Creating Web Pages with Links, Images, and Formatted Text 6
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 7
Entering HTML Tags to Define the Web Page Structure
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 7
Use the HTML templateon the In-Chapter HTML
Chapter 2 Web pageto create the code
listed here
Project 3: Creating Web Pages with Links, Images, and Formatted Text 8
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 9
Using Links on a Web Page
image link
text link
URL onstatus bar
Project 3: Creating Web Pages with Links, Images, and Formatted Text 10
Using Links on a Web Page
More on Web
normal link
visited link
active link
Project 3: Creating Web Pages with Links, Images, and Formatted Text 11
Using Links on a Web Page
Project 3: Creating Web Pages with Links, Images, and Formatted Text 12
Using Links on a Web Page
image withborder and
no link
image withborder and normal link
image withborder and visited link
Project 3: Creating Web Pages with Links, Images, and Formatted Text 13
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 14
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 15
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 16
Using Absolute and Relative Paths
2 Kinds of Paths1. 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 17
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 18
Adding an Image
img tag toinsert image
src attribute usedto specify the
name andlocation of image
end imgtag
width attributeand value
height attributeand value
alt attributeand value
Project 3: Creating Web Pages with Links, Images, and Formatted Text 19
Font Attributes and Values
Project 3: Creating Web Pages with Links, Images, and Formatted Text 20
Adding a Left-Aligned Heading with a Font Color
start h1heading tag
start font tag
font colorattribute andcolor code
end fonttag
end h1heading tag
Project 3: Creating Web Pages with Links, Images, and Formatted Text 21
Creating Unordered (Bulleted) Lists
start ul tagwith square
bullets
h2 headingline items
end ul tag
Project 3: Creating Web Pages with Links, Images, and Formatted Text 22
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 23
Tag Attributes and Functions
Project 3: Creating Web Pages with Links, Images, and Formatted Text 24
Adding a Text Link to Another Web Page within the Same Web Site
start<a> tag
link to Web pagespecials.html
monthly specials toappear as text link
end<a> tag
Project 3: Creating Web Pages with Links, Images, and Formatted Text 25
Adding an E-Mail Link
mailto:identifies linkas e-mail link
[email protected] appear as
clickable text fore-mail link
e-mailaddress
endlink
Project 3: Creating Web Pages with Links, Images, and Formatted Text 26
Adding a Text Link to a Web Page in Another Web Site
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 26
start<a> tag
link to Web pagewikipedia.org
history of pasta toappear as text link
end<a> tag
Project 3: Creating Web Pages with Links, Images, and Formatted Text 27
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
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 27
Project 3: Creating Web Pages with Links, Images, and Formatted Text 28Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 28
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: Creating Web Pages with Links, Images, and Formatted Text 29
Validating a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 29
Project 3: Creating Web Pages with Links, Images, and Formatted Text 30
Viewing a Web Page
h2 heading
h1 heading
bulleted listwith squarebullet type
Project 3: Creating Web Pages with Links, Images, and Formatted Text 31
Testing Links in a Web Page
More on Web
Pasta divineWeb page prior
to editing
Project 3: Creating Web Pages with Links, Images, and Formatted Text 32
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 33
Setting Link Targets
targetsnamed locations
Project 3: Creating Web Pages with Links, Images, and Formatted Text 34
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 35
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 36
Adding Links to a Target at the Top of the Page
Links to top target
named location
More on Web
Project 3: Creating Web Pages with Links, Images, and Formatted Text 37
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
More on Web
Project 3: Creating Web Pages with Links, Images, and Formatted Text 38
Formatting Text
Project 3: Creating Web Pages with Links, Images, and Formatted Text 39
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 40Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 40
Adding an Image with Wrapped Text
Image with Wrapped Text
Project 3: Creating Web Pages with Links, Images, and Formatted Text 41Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 41
Clearing the Text Wrapping
ClearingWrapped Text
Project 3: Creating Web Pages with Links, Images, and Formatted Text 42
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 43
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 44
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 45Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 45
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: Creating Web Pages with Links, Images, and Formatted Text 46Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 46
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: Creating Web Pages with Links, Images, and Formatted Text 47Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 47
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: Creating Web Pages with Links, Images, and Formatted Text 48
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
HTMLConcepts and Techniques
Fourth Edition
Project 3 Complete
Creating Web Pages with Links, Images, and Formatted Text