Download - XHTML Louise Soe ([email protected])[email protected] updated September 2009.

Transcript
Page 1: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

XHTML

Louise Soe ([email protected])

updated September 2009

Page 2: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

XHTML topics

Hyperlinks Inserting graphics Text and font formatting

Page 3: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 4: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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.)

Page 5: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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.

Page 6: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 7: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 8: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

Structure Example:

root

CIS311

tutorial01 tutorial02 tutorial03

Page 9: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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>

Page 10: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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.

Page 11: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 12: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 13: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 14: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 15: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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>

Page 16: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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?

Page 17: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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.

Page 18: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 19: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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)

Page 20: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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.

Page 21: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 22: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

Examples of Different Font SizesTypical font sizes displayed in browsers

Page 23: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

Examples of Heading Tagsand Font Sizes [lowercase!]

Page 24: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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.

Page 25: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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>

Page 26: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 27: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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>

Page 28: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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

Page 29: XHTML Louise Soe (llsoe@csupomona.edu)llsoe@csupomona.edu updated September 2009.

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