CIS101 week 06 v 2 honors
Download
Report
Transcript CIS101 week 06 v 2 honors
CIS101
Introduction to Computing
Week 06
Agenda
Your questions
Resume project
HTML Project Two
This week online
Next class
HTML Software
WS-FTP, 1st Page 2000 Software,
download instructions can be found at:
http://csis.pace.edu/cis101/
Discussion Board
This week it’s Steve’s and Mike’s turn
Need at least three topics for discussion
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
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
Including Images in a Web page
Images are physically in a separate file
in some image format (jpeg or gif)
Your HTML code only has a reference to
the image (i.e. its file name)
For this project to display properly, all
image files must physically reside in
same folder as your HTML document
To include images in project two
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 (using drag and drop) 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