XHTML Louise Soe 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 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. Top of page. 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 tag you used to create the anchor. The 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. Top of page.

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 tutorial01tutorial02tutorial03

Linking to a Document Hyperlinks to documents use the same tag with the href attribute i.e. Contact me This hyperlink points to a document in the same folder. Hyperlink to a named anchor in another document Contact me

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: 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.htmson.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.URI Link a URL http = Hypertext transfer protocol = 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 books To create a link to an address L Soe

Inserting a Graphic cis311.gif 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 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.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 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 tag of a Web page changes the color of all the text on the Web page. now the text is red in the entire document 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 , you would enter the following HTML tag: Arcadian If there is no color specified in the 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: 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:

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 address Password is 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