Linking



Linking

The overall Visual Theory of Linking – Storyboarding

• Storyboard is literally drawing where link on your webpage will link to

• uses blank HTML pages

• lines denote where the link will lead to

• no code, all visual

[pic]

• there will 2 types of links that we will cover

o anchors – link to an ON PAGE destination

o hyperlinks – link to ANOTHER page

Hyperlinks

• Three types of hyperlinks

o hyperlinks that “link” within the same page (a href and a name)

o hyperlinks that “link” within that Web site but on a different Web page

o hyperlinks that “link” completely outside of your Web site, on the internet

• also called hypertext link

o hyperlink, for short

The Theory behind referencing HTML pages: The URL

• Every document on the Web has a unique address.

• The document’s address is known as the uniform resource locator (URL).

• Several tags include

o a URL attribute value

o hyperlinks

o inline images

o forms.

• All of these use the same URL syntax to specify the location of a Web resource regardless of the type of content of that resource.

o That’s why its known as the uniform resource locator.

• Write URL’s using the displayable characters in the US-ASCII character set.

o

• Or you can also specify the address of a server using its IP address. The address is a sequence of four numbers, 0 – 255, separated by periods.

o Example: 137.237.1.87

• If you need to use a character in a URL that is not part of this character set, you must encode the character using a special notation.

o the encoding notation replaces the desired character with three characters:

o a percent sign and two hexadecimal digits whose value corresponds to the position

Different types of URL’s

• The http URL is by far the most common within the World Wide Web.

• JavaScript URL – actually is a pseudo-protocol, not usually included in discussion of URL’s. Yet, with advanced browsers like Netscape and IE, the JavaScript URL can be associated with a hyperlink and used to execute JavaScript commands when the user selects the link.

• FTP URL – is used to retrieve documents from an FTP (File Transfer Protocol) server. (transfer files between computers)

• File URL – specifies a file stored on a machine without indicating the protocol used to retrieve it.

• Mailto URL – the mailto URL causes an electronic mail message to be transmitted to a named recipient.

Example: Email Mr. Lupoli

• Browsers like Netscape honor multiple recipients in the mailto URL, separated by a comma.

• One can also enter a subject, cc, or bcc.

Example:

Send a nice compliment about Mr. Lupoli

Creating Hyperlinks

• Use the HTML/XHTML tag

o to create links to other documents

o to name anchors for fragment identifiers within documents.

• will use the tag most commonly with its href attribute to

o create a hyperlink

o or to link to another place in the same document or to another document.

o in these cases, the current document is the source of the link; the value of the href attribute, a URL, is the target

• The other way you can use the tag is with the name attribute to mark a hyperlink target, or fragment identifier in a document.

• Form

TITLE of Link

Linking to Documents

• To create a link for the user to click, you include the address of the document in the link tag and place it in quotation marks.

• Filenames are case sensitive

• HTML has two ways of specifying the address for a document to link to when you place the address in a link tag: using an absolute address or using a relative address.

o absolute path – always contain the full path to the document you are referencing (shows the entire path to a file)

o Since this is an absolute path it will always start with a slash (/) and contain the full path to the document you are referencing (shows the entire path to a file)

CMSC 201 - C++ Programming (Stage 1)

// use enterprise.aacc.edu/~svl as an example

[pic]

o relative path – specifies the address of a file in relationship to the current document and should be used to link to documents located on the same server.

DINNER MENU

// so dinner.html is on the SAME server and directory

o should be used to link to documents located on the same server.

Introduction LAB

Create a Word document named “chap2quiz.doc” Place your name on it, and save it to the desktop.

Open “Starting File” on my CSI 118 Homepage.

Save that file as STARTUP.html on your desktop

On STARTUP.html, change the name “John Doe”, to your name. And link the Word Document, to the LAST link (Quiz link)

[pic]

Creating Links and Anchors in the Same Document

• A link provides text or an object that the user can click, and the user’s display automatically “jumps” to the pre-programmed location.

|Example of an anchor |

|CSI 118 |

|// will show up as a link on your HTML page |

|// once clicked on by the user, will search through document to find “CSI 118” |

|// the # (octothorp), tells the browser that the reference is a target within a document rather than a target to another location |

|… |

|… |

|… |

| |

|CSI 118 Extra Credit |

|// is used to identify a location within an HTML document |

|// use www11.slupoli/EXTRA/main.html as an example |

Linking to External Images

• Sometimes you want to link to images contained in other files.

o you can include a small version of an image on a home page and then create a link to a larger version of the image stored in a different file.

• To link to an external image, include the name of the full-size image in the link and the name of the small version in the image definition.

• Notice that you will have to fool around with the size attributes for your liking

• ANY PICTURES (for easy coding) SHOULD BE IN THE SAME DIRECTORY AS THE HTML LINKING TO IT

// notice no title!!! The picture will act as the title

// use www11.slupoli/CSI_118/intro.html as an example

Creating Effective Links

|Linking Do’s |Linking Don'ts |

|Keep the link content as concise as possible |Never place two links immediately adjacent to one another |

|long links or huge inline graphic icons for links are visually disruptive and |most browsers make it difficult to tell where one link stops and the next link |

|potentially confusing |starts. Separate them with regular text or line breaks |

|Be consistent |Just go into coding without planning |

|if you are using inline references, make all of your links inline references. |Remember links will be of different sizes and appearance if you add text or a |

|Try reading your document with all the non-anchor text removed |picture to the link. So plan how the links will look, and how much room they might |

|if some links suddenly make no sense, rewrite them so that they stand on their own.|take |

|(Many people scan documents looking only for links; the surrounding text becomes | |

|little more than a gray background to the visually more compelling links) | |

Mouse-Sensitive Images

• The HTML and XHTML standards provide a feature that lets you embed many different links inside the same image.

o Clicking different areas of the image causes the browser to link to different target documents.

o Such mouse-sensitive images, known as image maps, open up a variety of creative linking styles.

• There are two ways to create image maps

o server-side image maps.

o client-side image maps.

|Example coding for each type of Links |

|Anchor |

|CSI 118 |

|… |

|… |

|… |

|CSI 118 Extra Credit |

|Hyperlink to a document within the same server |

|Introduction LAB |

|Hyperlink to a document NOT within the same server |

|Mr. L’s Main Page |

|Hyperlink to a HTML document on the ANOTHER server and directory |

| ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download