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 modify other line attributes, such as thickness and margins surrounding it, with a style statement. A sample is here at W3Schools.
The most useful attribute is thickness; sometimes you need more than a 1 pixel-thick line, which is the default. This is how you make your line thicker:
<hr style="border-width:7px; width:100%" /> would make a 7 pixel thick line across the whole page:
To make a colored line, add the attribute "border-color" with a color word or code as a value to the style statement.
For other variants, use different values for the border-style attribute. See the list here at W3Schools.
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." W3Schools tells you how to do it relatively simply with margins here, with Styles.
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 above, came from Realm Graphics, a nice free graphics site.
Last updated:
