Post on 29-Dec-2015
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 ® ® 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 validatehttp://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 <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