Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages...
-
Upload
kelley-robert-price -
Category
Documents
-
view
231 -
download
0
Transcript of Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages...
![Page 1: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/1.jpg)
Project 3: Creating Web Pages with Links, Images, and Formatted Text 1
Chapter 3
Creating Web Pages with Links, Images, and Formatted Text
![Page 2: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/2.jpg)
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
![Page 3: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/3.jpg)
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
![Page 4: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/4.jpg)
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
![Page 5: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/5.jpg)
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
![Page 6: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/6.jpg)
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
![Page 7: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/7.jpg)
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
![Page 8: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/8.jpg)
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
![Page 9: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/9.jpg)
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
![Page 10: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/10.jpg)
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
![Page 11: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/11.jpg)
Project 3: Creating Web Pages with Links, Images, and Formatted Text 11
Using Links on a Web Page
![Page 12: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/12.jpg)
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
![Page 13: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/13.jpg)
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
![Page 14: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/14.jpg)
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
![Page 15: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/15.jpg)
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
![Page 16: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/16.jpg)
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
![Page 17: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/17.jpg)
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
![Page 18: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/18.jpg)
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
![Page 19: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/19.jpg)
Project 3: Creating Web Pages with Links, Images, and Formatted Text 19
Font Attributes and Values
![Page 20: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/20.jpg)
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
![Page 21: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/21.jpg)
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
![Page 22: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/22.jpg)
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
![Page 23: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/23.jpg)
Project 3: Creating Web Pages with Links, Images, and Formatted Text 23
Tag Attributes and Functions
![Page 24: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/24.jpg)
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
![Page 25: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/25.jpg)
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
![Page 26: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/26.jpg)
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
![Page 27: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/27.jpg)
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
![Page 28: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/28.jpg)
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
![Page 29: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/29.jpg)
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
![Page 30: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/30.jpg)
Project 3: Creating Web Pages with Links, Images, and Formatted Text 30
Viewing a Web Page
h2 heading
h1 heading
bulleted listwith squarebullet type
![Page 31: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/31.jpg)
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
![Page 32: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/32.jpg)
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
![Page 33: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/33.jpg)
Project 3: Creating Web Pages with Links, Images, and Formatted Text 33
Setting Link Targets
targetsnamed locations
![Page 34: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/34.jpg)
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
![Page 35: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/35.jpg)
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
![Page 36: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/36.jpg)
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
![Page 37: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/37.jpg)
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
![Page 38: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/38.jpg)
Project 3: Creating Web Pages with Links, Images, and Formatted Text 38
Formatting Text
![Page 39: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/39.jpg)
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
![Page 40: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/40.jpg)
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
![Page 41: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/41.jpg)
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
![Page 42: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/42.jpg)
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”
![Page 43: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/43.jpg)
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
![Page 44: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/44.jpg)
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
![Page 45: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/45.jpg)
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
![Page 46: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/46.jpg)
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
![Page 47: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/47.jpg)
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
![Page 48: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/48.jpg)
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
![Page 49: Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.](https://reader033.fdocuments.net/reader033/viewer/2022051316/56649e905503460f94b94926/html5/thumbnails/49.jpg)
HTMLConcepts and Techniques
Fourth Edition
Project 3 Complete
Creating Web Pages with Links, Images, and Formatted Text