Linking to a Document

Transcript Linking to a Document

XHTML
Louise Soe
([email protected])
updated September 2009
XHTML topics



Hyperlinks
Inserting graphics
Text and font formatting
Hyperlinks provide navigation



Structural navigation links –
Menus, navigation bars, home page buttons,
metaphor objects (icons), text bars
Associative links within page content that
link to other pages with more information
Also lists of additional references

Can make your site much more useful to viewer
and cause them to return
Creating a Hypertext
Document with hyperlinks


Hypertext documents contain hypertext links (text
or graphics), that link to other documents or
sections of documents-- the destination of the link.
Hyperlinks can point to:





another section (defined by a named anchor) in the same
document
the same document
to a different document
to a named anchor in a different document
to a variety of other Web objects (images, movies, etc.)
Creating Anchors





The <a> tag creates an anchor, text that is specially
marked so that you can link to it from other points in a
document.
Text that is anchored is the destination of a link; it is
not the text you click on.
Each anchor has its own anchor name, using the
"name" attribute i.e.
<a name="top">Top of page</a>.
An anchor doesn’t have to be text. You can mark an
inline image as an anchor.
Adding an anchor does not change your document’s
appearance in any way. It merely creates locations in
your Web page that become destinations of links.
Creating Links to Named
Anchors



To create a link to an anchor, use the same <a> tag
you used to create the anchor.
The <a> tags used to create links are sometimes
called link tags.
Use the href attribute, which is short for Hypertext
Reference, to indicate the location to jump to.



href can refer to an anchor that you place in the document
or to a different Web page or a resource anywhere on the
Internet
Note: the href attribute is case sensitive on many servers
Link to an anchor using the anchor name preceded
by a pound (#) symbol i.e.
<a href="#top">Top of page</a>.
Web Site Structures


Storyboarding Web pages helps
determine web site structure for easy
navigation.
Linear structure: each page links to next


Hierarchical structure – top down


Example: a news story
Example: Amazon.com
No Structure
Structure Example:
root
CIS311
tutorial01
tutorial02
tutorial03
Linking to a Document

Hyperlinks to documents use the same <a> tag
with the href attribute i.e.
<a href="contact.htm">Contact me</a>


This hyperlink points to a document in the same
folder.
Hyperlink to a named anchor in another
document
<a href="contact.htm#top">Contact me</a>
Linking to Documents
in Other Folders



Browsers assume that if no folder information
is given, the file is in the same folder.
When linking to a file located in a different
folder than the link tag, you must include the
location, or path, for the file.
HTML supports two kinds of paths: absolute
paths and relative paths.
Absolute Pathnames

An absolute pathname in HTML provides the precise
location for a file.




The file name follows the final folder slash. Example:


With HTML, absolute pathnames begin with a slash (/)
followed by a sequence of folders beginning with the highest
level folder and proceeding to the folder that contains the file.
Each folder is separated by a slash.
http://www.csupomona.edu/~rdwestfall/311common/index.html
Disadvantage of absolute pathnames:

If server name or parent folder name changes, have to change
all of the hyperlinks
Relative Pathnames

A relative path specifies the location for a file in
relation to the folder containing the current
document.



As with absolute pathnames, folder names are separated
by slashes.
Unlike absolute pathnames, a relative pathname does not
begin with a slash.
Advantage: Relative pathnames are portable from
one account to another, as long as directory
structure doesn’t change
Relative Pathnames
dad.htm is 1 folder level UP in the
(parent) folder tree from the current
file
../family/dad.htm dad.htm is in the folder family, which is
1 folder UP the folder tree from the
current file
dog.htm is in the same folder as the
dog.htm
current file
../dad.htm
family/son.htm
son.htm is in a folder 1 level down
(child) from the current file
Uniform Resource Locator


A URL (or URI [identifier]), specifies a
precise location on the Web for a file.
Link a URL
<a href "http://www.csupomona.edu/~pets/dog.htm#top"</a>




http = Hypertext transfer protocol
www.csupomona.edu = Internet host name
/~pets/dog.htm = directory and file name
#top = named anchor
Displaying Linked Documents
in a New Window


By default, each Web page is displayed in the
main browser window, replacing the current
one
Use the target attribute in the href tag to open
the hyperlinked page in a new window
<a href="www.amazon.com" target="blank">books</a>

To create a link to an e-mail address
<a href=mailto:[email protected]>L Soe</a>
Inserting a Graphic
cis311.gif
<a name="top" id="top"></a>
<img src="../images/cis311.gif" width="648" height="56" />
HTML tags to insert image into a page – don’t need width and height, but loads
faster.
If you use incorrect width and height measurements, the image display changes,
but the image size doesn’t change – enlarging dimensions may degrade image.
Relative addressing – where is cis311.gif in relation to document?
What does tag <a name="top" id="top"> mean?
Special Characters

Occasionally you will want to include
entities or special characters in your Web
page that do not appear on your
keyboard. For example:



registered trademark symbol ® ® or
®
copyright symbol © © or ©
HTML supports the use of character
symbols that are identified by a code
number or name.
Special Character Validation


W3C validation gives error messages if you use
an ampersand (&) in a file path
replace ampersands with & so they will
validate
http://www.google.com/search?q=ampersand&ie=utf-8
http://www.google.com/search?q=ampersand&ie=
utf-8
Obsolete Tags Won't Validate

The following pages about text formatting
(except for the page on heading tags) have
tags that won't validate because they should
be replaced by CSS (cascading style sheets)
Modifying Text



Specifying the text color in the <body> tag of a
Web page changes the color of all the text on the
Web page.
<body text="#FF0000">
now the text is red in the entire document
</body>
Occasionally, you may want to change the color of
individual words or characters.
Changing the color of text is an effective way to
make specific sections of text stand out.
Using the Tag


The tag allows you to specify the color,
the size, and the font to be used for text on a Web
page.
The syntax for the tag is:
 text 



size attribute allows you to specify the font size of the
text
color attribute allows you to change the color of
individual characters or words
face attribute specifies a particular font for a section of
text
Examples of Different Font
Sizes
Typical font sizes displayed in browsers
Examples of Heading Tags
and Font Sizes [lowercase!]
Changing the Font Color


The color attribute of the tag allows you
to change the color of individual characters or
words.
Specify the color in the tag by using
either a color name or color value.


for example, to change the color of the word
"Arcadian" to the hexadecimal color value 993366,
you would enter the following HTML tag: Arcadian
If there is no color specified in the <body> tag,
the default colors of the Web browser is used.
Fonts and Browsers

The face attribute allows you to specify a list of
potential font names.


the browser tries to use the first font in the list; if it
fails, it will try the second font, and so on.
A generic font name should be listed last for the
browser to fall back on.

for example to display the word "Arcadian" in a sansserif, enter the following HTML tag: 
Arcadian
Changing the Font Face



The face attribute is used to specify a particular font for
a section of text.
The face attribute overrides the browser’s font choice.
You must specify a font that is installed on the user’s
computer or use generic font names:





Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Inserting Horizontal Lines

A horizontal line can improve the
appearance of a Web page.


not used that much nowadays
The syntax for creating a horizontal line
is:
<hr align="align" size="size"
width="width" color="color" noshade>
Inserting Horizontal Lines

The HTML horizontal syntax includes the following:
 align specifies the horizontal alignment of the line
on the page (center, left, or right)
 size specifies the height of the line in pixels or
percentage of the screen width
 width indicates the width of the line in pixels or
percentage of the screen width
 color indicates the color of the line
 noshade specifies that the browser display a
solid line
FTP


Secure FTP Clients
Open FTP program




MkDir lets you create a new directory


User id your CPP email address
Password is email password
Click Connect button
Click MkDir to make new subdirectory with 10 random
characters where you can post your 311 assignments
Use Files>New>Directory in WinSCP

Be sure new directory is created on server rather than local
computer