Post on 11-Feb-2016
description
CIS101Introduction 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
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
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.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
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