XHTML

Louise Soe (llsoe@csupomona.edu)

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 Example: a news story

Hierarchical structure – top down 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. 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.

The file name follows the final folder slash. Example: 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 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 dog.htm is in the same folder as the current file

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:llsoe@csupomona.edu.edu>L Soe</a>

Inserting a Graphic

cis311.gif

<p><a name="top" id="top"></a><img src="../images/cis311.gif" width="648" height="56" /></p>

HTML tags to insert image into a page – don’t need width and height, but loadsfaster.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 ® &reg; or

&#174; copyright symbol © &copy; or &#169;

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 &amp; so they will validatehttp://www.google.com/search?q=ampersand&ie=utf-8

http://www.google.com/search?q=ampersand&amp;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 <font> Tag The <font> 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 <font> tag is:

<font size="size" color="color" face="face"> text </font>

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 SizesTypical font sizes displayed in browsers

Examples of Heading Tagsand Font Sizes [lowercase!]

Changing the Font Color The color attribute of the <font> tag allows you

to change the color of individual characters or words.

Specify the color in the <font> 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: <font color="#993366"> Arcadian</font>

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 sans-

serif, enter the following HTML tag: <font face="Arial, Helvetica, sans-serif"> Arcadian</font>

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

User id your CPP email address Password is email password Click Connect button

MkDir lets you create a new directory 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