This is a searchable index. Enter search keywords:"

Above tag, --<isindex>-- if present, provides the above text & text box.
Entered words [Apple browser] in text box provided (at very top of browser... between 2 automatically. <hr>s.)

Text entered in the "HEAD" part --such as all of this part-- shows up above the "Top of the Page", which is the top of the "BODY" part.

23 Tables, Sub & Sup (HTML+ Features) 22 Example of Highlighting Markup Elements 21 Example of Img Element 20 Example of Pre Elements 19 Still More Examples of Reglular List 18 Example of Reglular List 17 Example of Glossary List 16 More HTML Forms 15 HTML Forms 14 Ex. 3- Address & Heading 13 Ex. 2- Address & Blockquote 12 Simple HTML Doc: Enviromental Change Project 11 References --Links 10 Example of an HTML FORM 09 Simulated Vortex Dynamics in a Porous-Body Wake 08 Archives of this Documentation 07 HTML Documentation: Table of Contents 06 HR Element in HTML 05 Instructional and Research Comuting -Home Page Good Design 04 Instructional and Research Comuting -Home Page Bad Design 03 Examples of Bad Hypertext Links 02 Example 2A, Showing IMG & Hypertext Links 01 Part One: This is the Title of the Document [End of <head> part]
[Start of <body> part; next = hidden bookmark.]
( Back to Top of Page ) < 'Back to Top of Page' (Scroll Up ^)

Code Testing Area:

Copy & paste raw HTML code here & save file, then change the raw code to see what happens; if it messes up, re-copy & paste following code back into the raw code in code mode view.

01) <body bgcolor="#C0C0C0"> [this WAS the main <body> tag; other part not allowed ??] {MUST be like asis to work}
02)  [un-commented it, still work OK ?? NO, must be Commented-OUT; see comments in raw code at that area.]

HOME --Index to this folder --'test-book'

Code Examples from book THS THS html_css_info sample.html

[Note: Hypertext Links in Examples are Fictional -don't work of course.]
(Some might if online on Internet, but book is too old; links are outdated, no good any more.)
[Each section part is (should be) self-contained, that is, NOT dependent of raw code above or below that's section's raw code.]
[Right now, raw code is all messed up; NOT self-contained... fixing this as I have time, which is experimenting with the code.]

Part 01 This is a Heading (p6)

Part 02 Showing IMG & Hypertext Links (p15, 16)

Part 03 Examples of Good / Bad Hypertext Link Design (p28)

Part 04 Instructional & Research Computing -Home Page Bad Design (p34)

Part 05 Instructional & Research Computing -Home Page Good Design (p36)

Part 06 Collections of Hypertext Documents (p45, 46)

Part 07 Table of Contents (p49, 50)

Part 08 Document Archives (p54)

Part 09 Images, Movies, & Sound Files (p58)

Part 10 Fill-in Forms (p63, 64)

Part 11 References --Links (p68, 69, 159)

Part 12 Simple HTML Doc (p78)

Part 13 [1] Address & Blockquote (p96)

Part 14 [2] Address & Heading (p98)

Part 15 HTML Forms (p103, 104)

Part 16 More HTML Forms (p109, 110)

Part 17 Example of Glossary List (p115, 116)

Part 18 Example of Regular List (p119, 120)

Part 19 Still More Examples of Regular List (p122)

Part 20 Example of Pre Elements (p127, 128)

Part 21 Example of Img Element (p136)

Part 22 Example of Highlighting Markup Elements (p140)

Part 23 Tables, Sub & Sup (HTML+ Features) (p151, 152)

Back to Top of Page

Tables, Sub & Sup Part Twenty-three

Example 12: HTML+ Features

HTML+ proposed several new elements, among them are

superscript element: hello²
subscript element: sub_script.

Also defined are Table elements that allow you to construct formatted tables. Here is an example:

Table Caption
Item	Breakdown Costs
Item	Pre-	Post-
Carbuncles	0.00	$12,000
Klystrons (a)	$13,000	$8,000
Klystrons (b)	$13,000	$8,000
Sticks	23¢	13¢

END Back to Top of Page

Highlighting Markup Elements Part Twenty-two

Example 11: Highlighting Elements

Examples of Logical Highlighting

cite - this is citation text.
code - This is typed computer code text.
dfn - This is a defining instance text.
em - This is emphasized text.
kbd - This is keyboard input text.
samp - This is literal character text.
strike - This is ~~strike-out~~ text.
strong - This is strongly emphasized text.
var - This is a variable text.

Examples of Character Highlighting

b - This is boldfaced text.
i - This is italicized text.
tt - This is fixed-width typewriter font text.
u - This is underlined text.

END Back to Top of Page

Example of Img Elements Part Twenty-one

Example 10: Examples of Img Elements

Here is some text related to the test image. The text is aligned with the top of the image, Note that the text does not flow around the image.

Here is some text related to the test image. The text is aligned with the middle of the image. Note that the text does not flow around the image.

Here is some text related to the text image. The text is aligned with the bottom of the image, and is also part of the hypertext link.

END Back to Top of Page

Example of Pre Elements Part Twenty

Example 9: The Use of Pre

The pre element is often used to include block of plain text. For example you can use it to include examples of typed code:

/* main program for fitting program */

extern int *sharv;
static char boggle(100);

main (int argc, char *argv)
double x_transpose, y_transpose, f_ark=2.3;
{
    .

Pre is also used for tables: HTML2.0 does not have elements for defining tables:

        Item            Price     Tax      Total     Category
        
        fileserver      10000     300      10300        A
        disk drive        900      30        930        B
        transmission     4400     110       4510        C
        fertilizer       5500     100       5600        F

The markup codes take up no space: if you delete everything between the angle brackets (in the raw HTML code) all the columns align perfectly. [In the above example, I had to experimentally add or subtract spaces to make everything line up correctly.]

END Back to Top of Page

Still More Examples of Regular List Part Nineteen

Example 8: Still More Lists

Unordered Lists

This also contains an ordered sub-list.

A list item.
Another list item.
and still more items.

Directory Lists

Abraham - Carbon

Cardshark - Elegant

Elegiac - Food

Foot - Hogs

Menu Lists

First item

Second item

Third item

Fourth item

END Back to Top of Page

Example of Regular List Part Eighteen

Example 7 Examples of Regular Lists

Ordered Lists

This shows an ordered list, with another ordered list nested within it.

First item. Note that there can be lots of stuff in a list item, including images, paragraph breaks, blockquotes, and even other lists.
A second item in the list.
And a third item. This item breaks down into some subcategories:

The first sub-item
The second sub-item, and so on ...

Unordered Lists

This also contains an ordered sub-list.

A list item.
Another list item; again these can contain img elements, paragraphs, and so on.
And sub-lists like this:

An item in the list.
Something else that is important, and so on.

END Back to Top of Page

Example of Glossary List Part Seventeen

Example 6: Example of Glossary Lists

Bookmark: Headings

Bookmark: Headings 2

Here is an example of a glossary list. The third item in the list has a regular unordered list nested within it. Note that the first term (marked by the dt element) does not have a matching description (marked by the dd element). This is perfectly legal. The converse: a dd without a matching dt, is illegal.

Things to do:

Things to Avoid:

You should not use elements that define paragraph formatting within the pre element. This means you should not use <p>, <address> <hn> and so on. You should avoid the use of tab characters -- use single blank characters to space text apart.

Things That are OK:

You can use the anchor element a. A typed carriage return will cause a new line in the presented text. People you should never let format lists include:

Bozo the Clown
Uncle Fester
Knights who go nii

as they generally do a poor job.

END Back to Top of Page

More HTML Forms Part Sixteen

Example 5: More Forms Examples

This might send an abstract for registration to a section of databases.

Form by I.S.G

END Back to Top of Page

HTML Forms Part Fifteen

Example 4: Examples of Forms

Sends search information to a script.

Form by I.S.G

END Back to Top of Page

[2] Address & Heading_(p98) Part Fourteen

14 Ex. 3- Address & Heading

The Truth About Santa

Breaking the news to a small child that Santa Claus is merely a tool of the modern capitalist is one of the saddest moments in raising children. Nevertheless, such truths must be brought to life, for fear that your child become another Pangloss lost in the idealism so prevalent amongst our youth. Here are some different methods to introduce this topic.

Santa's Exploitation of the Working Class

Begin by talking about Santa's enslaved workforce. How can those poor gnomes make all those gifts? Clearly by driven overwork ...

Elves and the Union Movement

and so on ...

Elf Exploitation

And still more text.

Santa Clause
Christmas Holiday Specialist
North Pole, CANADA HOH OHO
Tel (555) 555 POLE

END Back to Top of Page

Ex. Address & Blockquote Part Thirteen

Ex. Address & Blockquote

Example 2: The Meaning of Life

How many times have you sat down and asked yourself What is the meaning of life?. I certainly have. I've even read many of the good books, from C.S. Lewis, to Kant, to Sartre to Zoltan the Magnificent. But I think the most profound statement about life was made by Jack Handley, who said:

I can still recall old Mister Barnslow getting out every morning and nailing a fresh load of tadpoles to that old board of his. Then he'd spin it around and around, like a wheel of fortune, and no matter where it stopped he'd yell out, "Tadpoles! Tadpoles is a winner!" We all thought he was crazy. But then, we had some growing up to do.

That pretty well sums it up.

C.S.O.

END Back to Top of Page

Simple HTML Doc Part Twelve

Environmental Change Project

Welcome to the home page of the Environmental Change Project. This project is different from other projects with similar names. In our case we actually wish to change the climate. For example, we would like hot beaches in Northern Quebec, and deserts near Chicago.

So how will we do this. Well we do the following

Burn more forests.
Destroy the Ozone layer.
Breed more cows (for extra greenhouse gas).

END Back to Top of Page

References --Links Part Eleven

References --Links

(Following links don't work, book too old.)

WWW USENET newsgroups: [How to access them ??]

comp.infosystems.www.providers
comp.infosystems.www.users
comp.infosystems.www.misc
bionet.software.www

http://sunsite.unc.edu/boutell/faq/www_faq.html

http://www.gatech.edu/pitkow/survey/survey-9-1994/Survey_Home.html

http://akebono.stanford.edu/yahoo/Computers/World_Wide_Web/HTML/
http://oneworld.wa.com/htmldev/devpage/dev-page.html
http://cbl.leeds.ac.uk/nikos/doc/repository.html
http://coney.gsfc.nasa.gov/www/sswg/candy_style.html
[from: THS p68, 69] +

check following websites:

SGML
http://etext.virginia.edu/bin/tei-tocs?div=DIVI&id=SG

HTML
http://www.hal.com/products/sw/olias/Build-html/CGQL0ZBEfmg24aK.html

http://www.hal.com/%7Econnolly/html-spec/html.dec1
http://www.hal.com/%7Econnolly/html-spec/html.dtd

http://akebono.stanford.edu/yahoo/Computers/World_Wide_Web/HTML/
http://akebono.stanford.edu/yahoo/Computers/World_Wide_Web/HTML_/

END Back to Top of Page

Fill-in Forms Part Ten

Example of an HTML FORM

END Back to Top of Page

Images, Movies, & Sound Files Part Nine

Simulated Vortex Dynamics in a Porous-Body Wake

This video presents the result of a numerical simulation on the wake generated by a porous body. The wake flow is simulated by inserting small-scale discrete vortices into a uniform stream, and the colors in the video represent the magnitude of vorticity. The initial flow field is subjected to a small perturbation based on experimental data. The evolution of the wake flow is manifested by the merging and interactions of the small -scale vortices.

The objective of this investigation is to study the merging and inter-action processes of vortices and the formation of large eddies in the flow. Such an investigation is of importance to many flow-related industrial and environmental problems, such as mixing, cooling, combustion and dispersion of air-borne or water-borne contaminants.

Initial flow and color legend for vorticity. (14.5 KB gif image)

Visualization of the evolution of the wake flow. (0.38 MB mpeg-1 movie)

END Back to Top of Page

Document Archives Part Eight

Document Archives

(Next part is NOT indenting properly; raw HTML code mode part is tabbed indented kinda properly)

Archives of the document collection are available in the following formats:

alldocs.zip (138 Kbytes) -- DOS PKZip
alldocs.sit (532 Kbytes) -- Macintosh Stuffit
alldocs.tar (527 Kbytes) -- UNIX tar
alldocs.tar.Z (133 Kbytes) -- UNIX tar (compressed)
alldocs.tar.z (104 Kbytes) -- UNIX tar (GNUzipped)
alldocs.html (523 Kbytes) -- Concatenated HTML documents

(This is a concatenation of the HTML document, suitable for printing from a browser. The Hypertext links have been removed).

END Back to Top of Page

Table of Contents Part Seven

HTML Documentation: Table of Contents

(Next part is NOT indenting properly; raw HTML code mode part is tabbed indented kinda properly)

Table of Contents (this page)
About the Author

3. 3. HEAD of an HTML Document

4. 4. BODY of an HTML Document

Examples of Image

5. 5. Hypertext Anchors

(A)

Link to an object (HREF)
Link from an object (NAME)
Relationship between objects (REL)
Relationships between objects (REV)
URN
TITLE
How to link (METHODS)

. . .

Stepping up to HTML+

Bibliography

This entire achieve of documents is also available as a concatenated HTML documents (198 Kbytes), suitable for printing . Note, however, that the hypertext links in this document has been removed.

This collection of documents can be accessed at: http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/htmlindex.html.These documents are not up to date. (THS p51)

END Back to Top of Page

Collections of Hypertext Documents Part Six

Collections of Hypertext Documents

[Index] [Up] [Back] [Next]

4.7 Horizontal Ruled Line

The HR element is used to draw a horizontal dividing line completely across the screen. This can be to logically separate blocks of text, or to separate icon lists from the body of the text.

The HR element is empty (you don't need a </HR>).

Example

The following shows an example of the use of <HR> and the resulting rendering (on your browser).

The following document is scanned from the back of
a cereal box. To see the scanned image, press the
icon at the bottom of the text ...

<HR>
<H1> MIGHTY CHOKEE-OS! </H1>
The cereal of chocolate deprived kiddies everywhere!
<p>Aren't you  lucky your parents love you enough
to buy you CHOCKEE-OS!
<p>Remember to ask Mom and Dad for NEW SUPER
CHOCKEE-OS, now with Nicotine!!

This is rendered as:

The following document is scanned from the back of a cereal box. To see the scanned image, press the icon at the bottom of the text ...

MIGHTY CHOKEE-OS!

The cereal of chocolate deprived kiddies everywhere!

Aren't you lucky your parents love you enough to buy you CHOCKEE-OS!

Remember to ask Mom and Dad for NEW SUPER CHOCKEE-OS, now with Nicotine!!

[Index] [Up] [Back] [Next]

http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/htmlindex.html

END Back to Top of Page

Home Page Good Design Part Five

[Home] [Up] [Help] [Info] [Mail] [Search]

Instructional & Research Computing -Home Page Good Design

This is the home page of the Instructional and Research Computing Group (IRC), one of seven departments of the Division of Computing and Communications. We provide:

support for multimedia & visualization techniques
access to & support for high performance computing
support for adaptive technology. (aids for the physically challenged).

Some other useful University resources are:
WWW Starting Points | WWW Search Tools | Libraries | Main University Home Page.

If you become lost in our documents, use the navigation icons. The home icon brings you back here, while the up icon takes you up one level in the document hierarchy. Info and help are also useful, while the letter icon let you send us a message, and the search icon allows you to do a textual search of our pages.

webmaster@site.address.edu

END Back to Top of Page

Home Page Bad Design Part Four

Instructional & Research Computing -Home Page Bad Design

This is the home page of the Instructional & Research Computing Group (IRC), one of seven departments of the Division of Computing and Communications. The IRC group provides support for multimedia and visualization techniques, access to and support for high performance computing, and support for adaptive technology. (aids for the physically challenged) We also have some interesting links to WWW Starting Points, a big list of WWW Search Tools, another lists of hypertext pointers to Libraries resources, and a link to the Main University Home Page.

If you become lost in our documents use the navigation icons. The home icon brings you back here, while the up icon takes up up one level in the document hierarchy. Info and help are also useful, while the letter icon let you send us a message, and the search icon allows you to do a textual search of our pages.

webmaster@site.address.edu

END Back to Top of Page

Good/Bad Link Design Part Three

Good/Bad Hypertext Link Design

1) Don't distort the Written Text

Good:
The issue of hormone-controlled ostrich-feather growth has recently been a topic of intense interest.

Not So Good:
For information about current hormone-controlled ostrich-feather growth press here.

2) Keep the linked text section short.

Good:
The life cycle of the Atlantic polar-bear ocelot is a complex and ...

Not So Good:
The life cycle of the Atlantic polar-bear ocelot is a complex and ...

3) Link Icon and Text Together

Good
The latest home security systems breakdown show ...

Not so Good:
The latest home security systems breakdown show ...

END Back to Top of Page

IMG & Hypertext Links Part Two

Showing IMG & Hypertext Links

Greetings from the exciting world of HTML Example documents. OK, so text is not so exciting. But how about some pictures!

There are many ways to fit in the image. For example, you could fit it in this way [top]: [Home Icon] , this way [middle] , or this way [bottom] .

Another important thing: you can make hypertext links to other files. You can even make hypertext links using images, for example

Lastly, here is a row of images: [asis does NOT show pictures, why? I copied & pasted them here by hand in FrontPage2003. But they still do not align correctly.] SEEMS TO BE OK NOW...

END Back to Top of Page

This is a Heading Part One

This is a Heading

Hello. This is not a very exciting document. I bet you were expecting poetry, or some kind of exciting
fact about the Internet and the World Wide Web.

Sorry. No such luck. This document does contain examples of HTML markup, for example, here is an "unordered list":

Some text outside of the 'li' tag... [does it show up?]

One item of the list,

[yes, it does show up...]

A second list item
A third list item that goes on and on and on to indicate that the lists can wrap right around the page and still be nicely formatted by the browsers.
The final item.

Lists are exciting. You can also have ordered lists (the items are numbered) and description lists.

[Text outside of proper tags DOES show up, but would not be affected by CSS formatting stuff, probably.]

And you can draw horizontal lines, which are useful for dividing sections.

END Back to Top of Page

...Read the Wusage home page, which is found at http://siva.cshl.org/wuage.html. It is a wonderful repository of useful information about the www.

THS

file:///D:/!_FTP_Home_TheRockMCC.org/test-book/index_food_books/THS_p6.htm

Back to Top of Page

Code Examples from book THS THS html_css_info sample.html

Part 01 This is a Heading (p6)

Part 02 Showing IMG & Hypertext Links (p15, 16)

Part 03 Examples of Good / Bad Hypertext Link Design (p28)

Part 04 Instructional & Research Computing -Home Page Bad Design (p34)

Part 05 Instructional & Research Computing -Home Page Good Design (p36)

Part 06 Collections of Hypertext Documents (p45, 46)

Part 07 Table of Contents (p49, 50)

Part 08 Document Archives (p54)

Part 09 Images, Movies, & Sound Files (p58)

Part 10 Fill-in Forms (p63, 64)

Part 11 References --Links (p68, 69, 159)

Part 12 Simple HTML Doc (p78)

Part 13 [1] Address & Blockquote (p96)

Part 14 [2] Address & Heading (p98)

Part 15 HTML Forms (p103, 104)

Part 16 More HTML Forms (p109, 110)

Part 17 Example of Glossary List (p115, 116)

Part 18 Example of Regular List (p119, 120)

Part 19 Still More Examples of Regular List (p122)

Part 20 Example of Pre Elements (p127, 128)

Part 21 Example of Img Element (p136)

Part 22 Example of Highlighting Markup Elements (p140)

Part 23 Tables, Sub & Sup (HTML+ Features) (p151, 152) Back to Top of Page

Example 12: HTML+ Features

Example 11: Highlighting Elements

Examples of Logical Highlighting

Examples of Character Highlighting

Example 10: Examples of Img Elements

Example 9: The Use of Pre

Example 8: Still More Lists

Unordered Lists

Directory Lists

Menu Lists

Example 7 Examples of Regular Lists

Ordered Lists

Unordered Lists

Example 6: Example of Glossary Lists

Bookmark: Headings

Bookmark: Headings 2

Example 5: More Forms Examples

Please give name and password:

Select Databases:

Enter Abstract:

Example 4: Examples of Forms

14 Ex. 3- Address & Heading

The Truth About Santa

Santa's Exploitation of the Working Class

Elves and the Union Movement

Elf Exploitation

Ex. Address & Blockquote

Example 2: The Meaning of Life

Environmental Change Project

References --Links

Example of an HTML FORM

Simulated Vortex Dynamics in a Porous-Body Wake

Document Archives

HTML Documentation: Table of Contents

Collections of Hypertext Documents

4.7 Horizontal Ruled Line

Example

MIGHTY CHOKEE-OS!

Instructional & Research Computing -Home Page Good Design

Instructional & Research Computing -Home Page Bad Design

Good/Bad Hypertext Link Design

Showing IMG & Hypertext Links

This is a Heading

Part 23 Tables, Sub & Sup (HTML+ Features) (p151, 152)

Back to Top of Page