html project two

Download Report

Transcript html project two 

CIS101
Introduction 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



Image types




Inline images – display on page directly
External images – only display when visitor clicks
a link to display them
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.jpg
bluebar.jpg
ovallaeb.gif
sample1.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