CIS101 Introduction to Computing

1
CIS101Introduction to Computing

• Week 06

2
Agenda

• Your questions
• Resume project
• HTML Project Two
• This week online
• Next class

3
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

4
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

5
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

6
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

7
Project Two cont.

• Create links within a Web page
• Set link targets
• Describe types of image files
• Control image sizing
• Locate images

8
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

9
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
• ltBODY LINKcolor VLINKcolor ALINKcolorgt

10
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

11
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)

12
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

13
Begin project two

• Start 1st page 2000, select a blank document
• Begin entering HTML code on p. 2.13

14
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

15
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 filegreyback.jpgbluebar.jpgovallaeb.gifs
  ample1.htm

16
Adding a link to 2nd Web page

• The ltAgt and lt/Agt 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

17
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

18
Editing the Second Web page

• Use 1st Page 2000 to open the second Web page
  sample1.htm
• Follow instructions beginning p. 2.34

19
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)

20
Image with wrapped text

• Add the following code (see p. 2.42)ltIMG
  SRCovallaeb.gif BORDER0 HEIGHT119 WIDTH182
  ALIGNRIGHT ALTPurdue Fountaingt
• You can find ovallaeb.gif with HTML files

21
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

22
Creating targets

• Use ltagt tag with name attribute to create
  targets, i.e.lta nameeducationgtlt/agt
• Link to that target looks like thislta
  hrefeducationgtEducationlt/agt
• The symbol means the link is on this page

23
Final links

• Add link back to top
• Add link to first Web page webreshome.htm

24
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

25
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

26
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

27
What you should know

• You should be able to perform tasks described in
  table 2-7

28
This week online

• Readings
• Concepts chapter 2
• HTML Project Two
• This weeks Quiz
• Concepts chapter 2

29
This weeks 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

30
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