Transcript Project

IT 117 - Introduction to
Website Development
Welcome!
Welcome to Unit 7!
Navigation and Linking
This week’s reading:




Textbook Reading for this Unit:
Review Lesson 5 and Read Lesson 7. You do not need to
work the labs in Lesson 7 unless you want to.
Textbook Reading Summary:
This chapter will cover the various options included in linking.
Introduction

In this Unit you will practice creating links for navigation
systems, email addresses and external sites. A Web site’s
navigation system is crucial to making the site user-friendly.
Navigating through a site can be done via linked text and
images (hypertext and hypergraphics).

A well designed navigation system offers a good sense of
positional awareness and enables a Web visitor on your site to
easily find content.
To-Do-List




Review Key Terms
On the Reading page
Read Assigned Text
On the Reading page
Respond to the Discussion Board
30 Points
Web site Navigation
Complete the unit project and upload to assignment
dropbox for grading
50 Points
On the Assignment page
To-Do-List


Attend the Weekly Seminar or complete the FLA quiz
20 Points
Log in from Student's Home page
Review the online activity
“Get a Jumpstart on Project 9 NOW" and
work on your outline for your research paper
in unit 9
Readings Overview
Textbook Reading for this Unit:

Review Lesson 5 and Read Lesson 7. You do not need to
work the labs in Lesson 7 unless you want to.
Textbook Reading Summary:

This chapter will cover the various options included in linking.
Seminar Overview

This week’s Seminar session is about creating links for navigations
systems, email, and to external sites.

Remember, directions for accessing your Seminar can be found in
the Course FAQs tab under Course Home.
Lesson 5:
Hyperlinks
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Objectives





Reference full and partial URLs
Specify alternative protocols
Create hyperlinks for text and
images
Link to local files and remote sites
Create an internal anchor within a
file and link to it
The Anchor Tag



The <a> tag creates hyperlinks
A container tag that encompasses
the text or image (or both) to be used
as a link
The syntax for using the anchor tag
to create a link is as follows:
<a href="URL"> linked text or image
(or both) </a>
The
Anchor
Tag
(cont’d)
A fully qualified URL specifies an entire path


A partial URL assumes a path relative to the file’s current
location
Type of
Reference
Description
Examples
Fully qualified
URL (also
called
absolute URL)
A URL (i.e., URI) that
contains a full path to
a resource, including
the protocol
indicator. Also known
as a hard link.
http://www.someserver.com/somepage.html
or
http://someserver.com/pub/~james/somefile.ext
or
c:\intetpub\wwwroot\ccyp\syb\syb.html
Partial URL
(also called
relative URL)
A URL that assumes
the current
document’s path. All
references are made
from the document’s
current directory.
syb.html: Specifies a file in the current
directory
../css/stylesheet.css: Specifies a file one
directory up from the current page
pub/images/mybullet.gif: Specifies a file
in a subdirectory
The Anchor Tag (cont’d)

You can specify various protocols
Protocol
Hyperlink HTML Example
HTTP
Visit the <a href="http://www.ciwcertified.com">CIW<a/>
site.
HTTPS
(Secure
HTTP)
Visit our <a href="https://www.ciwcertified.com">secure
CIW<a/> site.
FTP
Download the file from our <a
href="ftp://ftp.server.com">FTP server.</a>
E-mail
You can send e-mail to us at <a
href="mailto:[email protected]">
[email protected]</a>.
Telnet
Please visit our <a href="telnet:melvyl.ucr.edu">Telnet
server.</a>
The Anchor Tag (cont’d)

Make sure that you:




Use a closing anchor tag </a>
Place quotation marks around the value
Include the closing bracket at the end of the
opening <a> tag
Various issues to troubleshoot with
hyperlinks




Text and images disappear
All successive Web page text is a hyperlink
Garbled code appears on screen
Code will not validate due to a problem <a>
tag
The Anchor Tag (cont’d)




Creating local hyperlinks
Creating external hyperlinks
Using images as hyperlinks
Creating internal links



On a long page, a link to another point
lower on the page
Internal links require internal bookmarks
Example:
<a name="targetArea1">
target anchor text or image (or both)
</a>
… other page content here …
<a href="#targetArea1"> text/images linking to targetArea1 </a>
Accessing an External File's
Internal Link


Link to a specific point in another
page without first accessing the top
of that page
To link to an internal anchor inside of
another file, use the following syntax:
<a href="URL/filename.ext#AnchorName">link
text/image</a>
Managing Hyperlinks




All hyperlinks need to be verified

Verify that the URL or other reference is valid

Verify that the target page or location is accessed
Hyperlinks also need to be managed

Over time, URLs (and content) change

“Dead” links frustrate users
Manually check links
Automatic link-checking software:

Linklint (www.linklint.org)

Link Controller (http://freshmeat.net/projects/linkcont)

Checkbot (http://degraaff.org/checkbot)

Link should still be reviewed manually to verify relevance of
linked content
Project 7
Outcomes addressed in this activity:
Unit Outcomes:

Apply XHTML coding for an external link on a web page

Apply XHTML coding for an email link on a web page

Create an image hyperlink

Construct internal links on a web page
Course Outcome:

IT117-3: Develop navigation systems for web sites.
Project
Remember: All of your Web pages should include the DOCTYPE
statement above the opening html tag, like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
All your Web pages are also required to contain the <title> tag
pair within the head section, like this:
<html>
<head>
<title>Your Name, Career Information</title>

Project
There are four parts to your project for this unit:





You will create a new page named links.htm containing
external links
You will create a new page named contact.htm
You will add local hyperlinks to each of the Web pages in your
Website
You will add an e-mail link to contact.htm
You must hand code all work for this and all units. Notepad is
the preferred application to use for typing your code.
Project
Part 1: Create a new page named links.htm
1. Create a Web page in Notepad and save it as links.htm.
2. Add the code to apply the CSS from the file
externalstylesheet.css
3. Add at least five fully qualified URLs (absolute URLs) to
external web pages such as these types: (See lesson 5, table
5-1)

Web design and development Web sites

Free Web design and development tutorials

Web sites for career research and job hunting.

Web sites about your interests and hobbies.
Project
4. Use the target attribute (_blank) to open each link in
a new window so that when visitors close that
window they will be back on your Website. The
_blank attribute was not clearly demonstrated in
your lesson, therefore a sample of the expected
code is provided for you below. This is what a fully
qualified URL including the _blank attribute would
look like:
<a href="http://www.someserver.com/somepage.htm"
target="_blank">Web Magic </a>
Project
5. Categorize your links by topic.
 Use the largest or second to largest <hn> tag for
the name at the top of the Web page. (e. g. “Links”)
 Use the next smaller <Hn> tag for link subheadings.
 Use the following tags where appropriate:
 <p> paragraph
 <br /> line break
 <hr /> horizontal rule
Project
Part 2: Create Contact.htm


Create and save a new HTML file named
contact.htm. For now, just add the four basic
HTML tag pairs to the page; <html>, <body>,
<head>, and <title>.
Add the code to apply the CSS from the file
externalstylesheet.css
Project
Part 3: Local Hyperlinks

For this part of your project you will be creating local
links (also called relative links) to all five pages in your
Website. You will place these links at the bottom of
each page on your site. The reason you are being
instructed to place these at the bottom of the page is
because you are going to create a navigation bar using
CSS in the next unit that will be placed at the top of each
page. We want you to experience both methods of
creating navigation; HTML coding alone as you will do in
this project and CSS as you will do in the next project.
Project

Below is a model for what your navigational links
will look like when done:
Home | Biography | Career | Links | Contact Us


The line between the link names is called a pipe character. To
type it, hold down the shift key and press the key above the
enter key that contains “\”. This action will create this: “|”.
Code your first set of local links in any one of your five HTML
files by opening the file in Notepad. (See lesson 5, table 5-2,
lab 5-1) if your pages are in the root of your web server –
meaning they are not in a folder within the root, then you do
not need to type / in front of your file name. For example, the
path to index.html would just be index.html. A local link to
your home page would be coded like this: <a
href="index.html">Home</a>
Project

Below is a model for what your navigational links
will look like when done:
Home | Biography | Career | Links | Contact Us


The line between the link names is called a pipe character. To
type it, hold down the shift key and press the key above the
enter key that contains “\”. This action will create this: “|”.
Code your first set of local links in any one of your five HTML
files by opening the file in Notepad. (See lesson 5, table 5-2,
lab 5-1)
Project
if your pages are in the root of your web server – meaning they
are not in a folder within the root, then you do not need to type
/ in front of your file name. For example, the path to
index.html would just be index.html. A local link to your home
page would be coded like this: <a
href="index.html">Home</a>
2. Save your work and view the page in a browser to make sure
your links look the way you want them to.
3. Test each link to make sure each works properly.
Project
4. Next, copy and paste the local hyperlinks code from the file you
just saved into the bottom of each of your other Web pages.
Be sure to test these links on every page and to adjust the file
paths as needed.
5. Replace each of the Web pages on your Web server with the
edited copies that you have on your computer by uploading
them. Remember that when you upload a file with the same
name as one that already exists on your Web server, the new
file replaces the old one.
6. View your Web site online in your browser. Test each link on all
pages.
Project
4. Next, copy and paste the local hyperlinks code from the file you
just saved into the bottom of each of your other Web pages.
Be sure to test these links on every page and to adjust the file
paths as needed.
5. Replace each of the Web pages on your Web server with the
edited copies that you have on your computer by uploading
them. Remember that when you upload a file with the same
name as one that already exists on your Web server, the new
file replaces the old one.
6. View your Web site online in your browser. Test each link on all
pages.
Project
Part 4: Add e-mail links
1. Add you email address via an e-mail link to contact.htm (see
lesson 5, table 5-3)
2. Save your changes and upload your revised file to your Web
server.
Project 7 - Grading Rubrics





1. 1. Created a new page named links.htm containing at least
five fully qualified URLs to external Web pages and correctly
applied the _blank target attribute to each link. Uploaded
links.htm to the Web.: 0-10
2. Created a new page named contact.htm. Uploaded
contact.htm to the web. : 0-10
3. Both links.htm and contact.htm contain the proper coding
to apply CSS from externalstylesheet.css : 0-10
4. Correctly coded an e-mail link in the file contact.htm : 0-10
5. Correctly added local hyperlinks to each of the Web pages
in your Website. These links are included on each of the five
pages of the Website. : 0-10
Thank you!

Feel free to contact me with any questions!
[email protected]

Use the Virtual Office to post questions throughout the week,
as well as to upload your zipped folder if you need me to look
at the code!