CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards

C I S 6 7Fo u n d ati o n s fo r C re a ti n g We b Pa g e s

Professor Al Fichera

ADDING HYPERTEXT LINKS

Rev. August 25, 2010—All HTML code brought to XHTML standards.

Adding Hypertext Links by Professor Al Fichera http://profal2.com

Before We Start

2

This lecture was originally written back in 1998 I believe, and has been updated quite a bit since then.

When we started building html code, the rules were, well, rather loose so to speak.

Upper-case, mixed-case letters never seemed to matter to the Browsers of the day because we were all so new at it.

This lecture was updated to remove the above weaknesses', and introduced some XHTML concepts with the use of all lower-case letters.

August 25, 2010


Creating The Proper Anchor Tag

3

Let’s start with the basic tag for hypertext.

The <a> tag creates an anchor. Hypertext anchors help you move about the

Web site as well as from one site to another.

August 25, 2010


Anchors Aweigh

4

It’s important now to close what you open, in a mirror fashion.

The <a> anchor tag must be closed with the </a> tag. Between the two tags you will insert the

hypertext reference, the clickable text and/or a clickable picture.

August 25, 2010


Starting Hypertext Links

5

You link to other documents using the anchor and it's link properties: <a href=" At this point you will add either an address to

another Web page you own or the Web address to another site.

August 25, 2010


Finishing Hypertext Links

6

After the ending >, place the “clickable link text"

for example: Prof. Al’s PlaceFinish with a closing tag </a>

(It must be noted that when linking text that you be sure to use the proper case (upper or lower), for your keyed-in letters, URL’s are case sensitive!)

August 25, 2010


Creating Links Between Pages

7

Linking to a document on your computer or Website. Be sure that it is in the same folder as the document

containing the links, or you will have to add the folder’s name to the link.

<a href="file_name.html">Clickable Text</a>

August 25, 2010


Web Page Structures

8

It's a good idea to map out how your Web pages are to relate to each other. Linear Structures

Each page is linked to the next and previous pages

Hierarchical Structures Starts with a general topic that includes

links to more specific topics Mixed Structures

Combines both of the above techniques

August 25, 2010


Linear Structures

9

Linear Web Page Structures

HomePage

Page1

Page2

Page3

Page4

Page5

August 25, 2010


Link Structure Coding

10

One possible link structure from the last slide could look something like this:

Home Page to Page One<a href="page1.html">Go to Page 1</a>

Page One return to Home Page<a href="home.html">Go to Home</a>

August 25, 2010


Hierarchical Structures

11

Hierarchical Web Page Structures

HomePage

Page1

Page2

Page3

Page4

Page5

August 25, 2010


Hierarchical Structure Coding

12

Using the Flow Chart link structure shown in the last slide, only two links would be on the Home page:

Home Page to Page One<a href="page1.html">Go to Page 1</a>

Home Page to Page Four<a href="page4.html">Go to Page 4</a>Only pages 1 and 4 can return directly to the Home

page.

August 25, 2010


Naming Anchors

13

To link to another part of a long Web document requires a different type of Anchor tag. The Name tag. This tag names a target area within

the document for the link, e.g.:<a name="target-name"> </a>e.g., top, middle, bottom Note: The text used for the target name should be

unique to that location, and the same as used in the Anchor tag.

Usually, there is no clickable text with this type of anchor tag.

August 25, 2010


Referencing Named Anchors

14

The portion of the hypertext tag that links you to the Named target looks like this:

<a href="#top"> Back to Top </a>

The text placed between the Anchor tags will become the Hypertext for the link.

Notice the use of the pound symbol ( # ) in this type of hypertext reference.

August 25, 2010


Linking to a Section of a Doc

15

Normally, linking to a document brings you to the top of it's page. Perhaps you'd like your visitor to jump to a certain part of the Web page instead. The following would link your visitor to the

bottom of the page.<a href="file_name.html#bottom"> Go to

Bottom </a>

August 25, 2010


Images as Hypertext Links

16

Clicking on an Image to Link you to another site is easier than you can imagine. Instead of using text to click on for the Hypertext Link why not use a small picture instead?

August 25, 2010


Using Images as Links

17

There will be many opportunities within a Website where a clickable button would be more suitable than text. In this case all you do is replace the clickable text

with the Image Source tag.

<img src="button.gif") width="n" height="n" alt="image-name" /> </a>

August 25, 2010


Images as Hypertext Links

18

Use the following example to accomplish this:<a href="fileaddress.html"><img src="button.gif" /></a> If you need better text-to-image spacing, add

this to the img src tag:<img src="button.gif" hspace="8" /></a>

August 25, 2010


Alternate Text with Images

19

To help viewers who have turned off pictures speed-up identity of pictures and/or icons on your page, use the following in your img src tag.<img src="imageaddress.gif"

alt="image name" /> Whereas "imagename" is your short description of the

image that will load on their screen.

August 25, 2010


Creating Email Links

20

Email links are hypertext too.The coding is a bit different than normal hyperlinks.

In the a href tag use this:<a href="mailto:[email protected]">

Email Me</a>

August 25, 2010


Creative Email Tricks

21

Email links can fill in the Subject Line before they are sent off to you.

Add the following to the end of your email address in the href, no spaces allowed:

<a href="mailto:[email protected]?subject=I love HTML and CS67">Email Me</a>

August 25, 2010

Note: Code above was word wrapped by PowerPoint.


More Creative Email Tricks

22

Email links can add content to the actual body of the email too!

Add the following to the end of your email address in the href, no spaces allowed:

<a href="mailto:[email protected]?subject=I love HTML and CS67&body=I get less sleep now, thanks Prof Al">Email Me</a>

August 25, 2010

Note: Code above was word wrapped by PowerPoint.


Using Folders for Your Files

23

This path shows exactly where the file is on the computer.

In HTML you start every pathname with a slash (/) Separate each folder name from the next with a

slash. (More on this later.)<a href="folder/file_name.html">

August 25, 2010


Folder Pathnames

24

When referencing files in different folders in the link tag, you must include each file's location, called its path.

HTML supports two kinds of paths, absolute and relative.

August 25, 2010


Absolute Pathnames

25

Absolute pathnames give a file's exact location in relation to the current Web document. These use the complete Internet Protocol, for

example:<a href="*http://www.site_address/**">

Absolute pathnames to Web page files you own can create problems when moving a whole Web site to an another host location.

* http = Hyper Text Mark-up Protocol ** The slash at the end of the URL address is short-hand for

index.html.

August 25, 2010


Relative Pathnames

26

Relative pathnames give a file's location in relation to the current Web document. These use (2) periods and a slash(../)

to reference a file in a folder above the current folder in the hierarchy, for example:

<a href="../file_name.html"> Relative pathnames are easy to move to different

servers, and you won't have to rename any possible folder name changes.

August 25, 2010


Using Relative Pathnames

27

If your HTML document is in a nested file folder, and you want to reference an image or file in the parent folder, you may use the ../ reference in your hypertext tag.

Image courtesy of Ron Pumphrey, Shadow-Design.com

August 25, 2010


Double-Nested Folders

28

Another version of nested folders and relative references.

Image courtesy of Ron Pumphrey, Shadow-Design.com

August 25, 2010


Why Use Relative Pathnames?

29

A couple of important reasons! Moving a Web site to another location. All files and folders can be moved and all

your links will work. If you used absolute pathnames, you will have to

go back and change everyone on them! The browser will load your page faster!

August 25, 2010


Using Target Windows

30

To allow users of your site to return more easily from one of your hypertext links, use the following tag in your a href code.

<a href="http://www.urlhere.com" target="new window"> The new window will be opened and available to the

user on the Taskbar below leaving your page still open to the viewer. Since writing this, most Browsers now have “Pop-Up” killers,

so you take your chances, I guess!

August 25, 2010


Historical 1998 Bibliography

31

Carey, Patrick, Creating Web Pages with HTML, Comprehensive, Course Technology, Cambridge, Mass., 1998 (9 tutorials).

Burns, Joe, HTML Goodies, QUE Macmillian Publishing, Inc., Indianapolis, IN, 1999 (527 pages).

Martin, Teresa and Glenn Davis, The Project Cool, Guide to Enhancing Your Website, John Wiley Sons, Inc., New York, NY, 1998 (416 pages).

Oliver, Dick and Molly Holzschlag, Teach yourself HTML4 in 24 hours, Sams.net Publishing, Indianapolis, IN, 1997 (405 pages).

Ibañez, Ardith, and Natalie Zee, HTML Web Magic, Hayden Books, Indianapolis, IN, 1997 (230 pages).

Vodnik, Sasha, Dynamic HTML, Course Technology, Cambridge, Mass., 1998 (7 tutorials).

Jasc Software, Paint Shop Pro 5, Jasc Software, Inc., Minnetonka, MN, 1998 (335 pages).

August 25, 2010

Documents

CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards