> Return to Forms, Examples page

Sample HTML file

View source, then save as or copy and paste

Here's some text in paragraph form. Here's more text in paragraph form. Here's even more text in paragraph form. Here's some text in paragraph form. Here's more text in paragraph form. Here's even more text in paragraph form.

(Note: The image to the right is a JPEG, aligned right and a link to the UCSC home page. On a PC, right click on it to have the option of saving to your own computer or select properties to learn the file size as well as height and width dimensions.)

Here's some text using a single break.
Here's more more text with a double break at the end.

Can you see the difference?

Lists

1. Ordered
1. Can designate alpha or num with "type" attribute, such as:
1. Arabic numerals
2. Roman numerals
3. lowercse letters
2. Can also designate where in order to begin with "start" attribute
3. This is an example of a nested list (list within a list)
2. Unordered
• These lists use bullets or other designators
• If nested, each level of unordered list will have different designator
• If desired, can use "type" attribute to specify designator, such as:
• disc
• square
• circle

Comments

Comments are a great way to imbed instructions or designators on the HTML level that the browser will not display.

(The image to the left is a transparent GIF, aligned left and a link to Yahoo! Notice the odd spacing relative to the text and line breaks and be aware of the challenges that a left-aligned image presents. This is especially true when the text continues past the bottom of the image and returns to the left margin. By adding one more sentence you can see the effect this has, which is why it is an easier option to align your images to the right in most cases.)

Comments can appear anywhere on the page and outside the basic HTML tags. There is a good example of a comment at the top of this page and another listed immediately below this line.

Links

This is an example of a link. It points to the index.html file in the same directory as this page.

You can link to a specific location within a page using the "name" attribute of the anchor tag:
A NAME="here" (don't forget to add the angle brackets)

You link to it like this (view source):

here links to the here anchor on the index.html page.

Relative vs. absolute links

Relative links point to their locations relative to the location of the current file, while absolute links point to files based on their absolute location on the file system

Examples of relative links:

• testfile.html
• directory/testfile.html
• ../testfile.html
• ../../directory/testfile.html

Example of an absolute link:

• /directory/testfile.html

Linking to other files on the Web:

UCSC home page

Text formatting:

Bold
Italics
Underline

Special characters:

©
&
–

Preformatted text:

Text here
			here
					here
	and here

Here's another example of when to use the PRE tag:

Diameter    Distance    Time
--------    --------    ----
12          32          2:13:01
16          52          4:21:11
24          64          4:20:23

Right align

Left align

Setting font face, size and color:

This is Arial, plus-1 size and blue text