Embed Size (px)
Citation preview
CIS101Introduction to Computing
HTML Project Two
Project Two
Add links to another Web page Create a home page Use images Use text formats (bold, italic) Insert a background image Add an e-mail link Add an image link
Project Two cont.
Create links within a Web page Set link targets Describe types of image files Control image sizing Locate images
HTML Files Zipped file containing images and
HTML files need for CIS101 HTML projects is available at http://csis.pace.edu/~dwyer
Also can access a zipped file for all the projects on Blackboard, Course Material, HTML Student Downloads Link
HTML 2e data files.exe
Introduction to Links Hyperlinks (or links) are used to connect
a Web page to another Web page Links can also be used to create an e-
mail link Either text or an image can be used as a
hotspot for a link The mouse pointer usually changes when
positioned over a hotspot URL appears on status bar when the mouse
pointer is over a hotspot
Creating text links The most common form of link Words are the hotspot With text links, always use descriptive
text as the clickable word(s) Unless otherwise stated, the color of
text links is dependent upon browser-defined defaults (see table 2.1) Format to change link colors: <BODY LINK=“color” VLINK=“color”
ALINK=“color”>
Linking Within a Web Page
Allows visitors to move quickly from one section of the Web page to another
Important for large Web pages (p. 2.08) Move to next section Table of contents
Other common links
Link to another page in the same Web site (sometimes called internal links)
Link to a page in another location (external links)
Link to e-mail (opens up e-mail message addressed to e-mail location)
Creating a Home Page
A home page is the main page of a Web site
Visitors usually view the home page first
Identify the purpose of your Web site
Links should be apparent Include an e-mail link
Begin project two
Start 1st page 2000, select a blank document
Begin entering HTML code on p. 2.13
Web page images (p. 2.17) Classes of Images
Inline images – display on page directly External images – only display when visitor
clicks a link to display them Image types
JPEG GIF Interlaced GIF
Image attributes table 2-4
Files from Data Disk Save your HTML code in a folder on the
desktop Find the directory for the HTML data
disk (c:\Course Technology\6543-9) Copy these files into the same folder as
your HTML file:greyback.jpgbluebar.jpgovallaeb.gifsample1.htm
Adding a link to 2nd Web page The <A> and </A> tags are used to
create links Referred to as anchor tags Use the Hyperlink REFerence (HREF)
attribute to link to another Web page Two items required Text or image to act as hotspot Name of the file to which you want to link
Add link
Follow instructions on p. 2.23 You will add a link to HTML
document provided on data disk, sample1.htm
Save file, open browser and test your page and its links
Editing the Second Web page
Use 1st Page 2000 to open the second Web page sample1.htm
Follow instructions beginning p. 2.34
Image borders
A border on an image makes the image display as if it has a frame around it
If the image is a link, the default (or selected) link color will be the color of the border (see p. 2.39)
Image with wrapped text
Add the following code (see p. 2.42)<IMG SRC=“ovallaeb.gif” BORDER=0 HEIGHT=119 WIDTH=182 ALIGN=RIGHT ALT=“[Purdue Fountain]”>
You can find ovallaeb.gif with HTML files
Creating links within a page
Useful to allow visitor navigation up and down your page
Use links and targets to do this Targets are spots in your page that
you can link to
Creating targets Use <a> tag with name attribute to
create targets, i.e.
<a name=“education”></a> Link to that target looks like this:
<a href=“#education”>Education</a>
The # symbol means the link is on this page
Final links
Add link back to top Add link to first Web page
webreshome.htm
Summary of Project Two
Describe linking terms and definitions Add a link to another Web page Create a home page Enhance a Web page using images Add bold, italics, and color to text Change bullet type Insert a background image
Summary cont.
Insert a horizontal rule image Add an e-mail link View the HTML file and test the links Edit the second Web page Insert an image and wrap text
around an image Add a text link to another Web site
Summary cont.
Add an image link to another Web site Create links within a Web page Set link targets Add links to set targets Describe types of image files Control image sizing Locate images
