Basics of HTML
Basic Organization: Internal Links, Page Dividers
Internal Links
Internal links allow readers to navigate within the page they are viewing and are very useful as pages get longer. If your page is really long, you might want to consider breaking it up into smaller chunks, but even medium-length pages can benefit from the sort of "table of contents" links that you can make with internal links.
Another convenience for readers of a long page are occasional "Back to top" links, which are internal links.
The syntax for internal links at the jumping-off end is just like that for links to other pages. The difference comes in the way the target or destination point is specified.
Typing this:
<a href="#next">Click here to see the next section of this page</a>
will display Click here to see the next section of this page as a link to another part of the page you're on. The # is what makes it an internal link. (Also notice that there is no filename extension given because—duh!—it isn't a filename!)
This is only half of the procedure, however. You also have to identify the point in the text that the browser will display when this link is clicked. You do that in this way:
<a name="next"> Next Section</a>
Use whatever text you put after the # at the link point as the target point's "name." It doesn't seem to matter how much text is designated as the internal target; you can enclose a whole word, or just a letter, or even just a space, between the <a name="xx"></a> tags.
This same process can be used to link readers to a particular section of another page, one which might be so long that you need to help them by targeting a specific point. Just add a #xxx right after the file's name, with the extension this time. This kind of link looks like this:
<a href="another.htm#middle">Go to the middle of "Another Page."</a>
Provided the page with the filename another.htm has an <a name="middle"> tag somewhere in it, that's where this link will take the reader.
Stylistic hint: put your <a name= > tag slightly above the point where you actually want your reader to look. Otherwise, the browser may put the target point smack dab at the top of the window, which I find disconcerting.
Organizing a Page with Dividers
Divider bars can be very useful in visually breaking up long sections of text. The simplest kind is called a horizontal rule and is inserted with an HTML tag: <hr />. This places a thin line in your display:
You can specify the width of the line via a style attribute. Although you can specify the width in pixels, I don't recommend this because of varying window sizes among your readers. Specifying a percentage is better:
<hr style="width:50%" />
This would make your line extend half-way across your page.
You can also make the line thicker with a height value in the style statement (this one is ok to put in pixels):
<hr style="height:7px; width:100%" /> would make a 7 pixel thick line across the whole page:
These size properties used to be specified by width and size attributes added to the <hr /> tag, and these terms are still accepted by most browsers. However, they're not compliant with current HTML standards.
You can also change the default outlined appearance (see the example above) to a solid one. In this one case, I'm going to recommend that you use a deprecated, "old" method. That's because different browsers demand different new ways of specifying this and I think that's just dumb. At any rate, just add anoshade attribute to the <hr /> tag and your line will be solid. This attribute is still supported by most browsers.
You can read about this example of children not playing together nicely here. If you want to change the color of your no-shaded bar, you will have to specify the color both ways, in order to assure its proper display in all browsers, as described in the link. (You can only change the color of an <hr /> that has a height specified; if you want a very thin colored line, just make the height equal to 1 pixel.)
More elaborate dividers can be used as well, limited only by your own good taste and/or artistic talent. Graphics files as dividers are inserted just as other images are, with <img src /> tags. It might be tempting to elongate divider bar images to 100% as you would do with an <hr /> but, as with other images, it's not a good idea to use HTML attributes for re-sizing. If you try to stretch out a graphic beyond its natural size it can end up looking pretty ugly.
(Aligning a graphic in the center of the page, like the train bar just above, is a more complicated task than you'd think. HTML editors can do it easily for you, but if you look at the source code they use it might be a deprecated (or "old") HTML attribute or a rather complicated style statement, not just a simple "center." Here is a clear, detailed, but complicated, explanation of this issue that is somewhat dated. W3Schools tells you how to do it relatively simply with margins here, but there are browser incompatibility issues. Shouldn't this be simpler? Perhaps it will be more satisfactorily resolved in future standards revisions. In the meantime, I would just click on your editor's text-center button and not worry about it beyond that.)
In various boxes throughout this guide you'll see some relatively plain bar graphics I got from Realm Graphics, a free graphics site. Here are some more, with more flair. Let your imagination—tempered by editorial judgement—run free!
Note on Frames
Frames are no longer supported by HTML 5, the current version of standards.Therefore, they should not be used. There are better and easier ways now to accomplish the organizational purposes for which you used to have to use frames.
Graphics Credits
The cute little train graphic line on this page, as well as the example lines in the box on the left, came from Realm Graphics, a nice free graphics site. The networked computers came from Classroom Clipart.