CIS101 week 06

advertisement
CIS101
Introduction to Computing
Week 06
Agenda





Your questions
Resume project
HTML Project Two
This week online
Next class
The resume project


Your first version of your online resume
should be posted to your Web space
Go to Course Material, click Student
Web Space Addresses to view your
classmates’ online resumes
Download HTML Data Disk



Create folder on desktop named
“Incoming”
Go to Blackboard, Course Material,
HTML Student Downloads Link
Right click HTML 2e data files.exe,
select Save Target As, and save to
incoming folder
Download Data Disk cont.




Double click file 6543-9d.exe
When winzip begins, select “Unzip”
Files are now extracted to c:\Course
Technology\6543-9
Images needed for project two are in
this folder
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
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
What you should know

You should be able to perform tasks
described in table 2-7
This week online

Readings



Concepts chapter 2
HTML Project Two
This week’s Quiz

Concepts chapter 2
This week’s resume update





Adding a background image
Adding an image of Pace
Other formatting changes
See Course Docs, week 06 for exact
specifications
Upload your updated file to Web space
by next class
Next class meeting



Bring your HTML book to class
Upload your resume homework, class
will use your URLs to look at your work
next week
Next week you will add your own
picture to resume, so bring in picture to
scan or use a digital camera to take
your picture
Download