Intermediate HTML
Intermediate HTML
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 I use on this page. Another convenience for readers of a long page are occasional "Back to top" 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.
<a href="#tables">Click here to see the "Tables" section of this page</a>.
That is how I would construct a link to take you to the Tables section of this page. 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="tables">Tables </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.
This same process can be used to link readers to a particular section of another page, one which maybe is so long that you need to help them by targeting a specific point . This kind of link would look something 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 can be disconcerting.
There are three kinds of lists you can make in HTML:
unordered, ordered and definition. An
unordered list displays bullets to mark
each list item:
An ordered list numbers the items for
you:
A definition list allows you to organize information in a "term/definition"-type format, but it can be used to organize any listing of information where each unit comes in two parts:
The coding for lists requires a paired set of tags at the beginning and end of the list which identify its type:
<ul></ul> for an unordered list
<ol></ol> for an ordered list
<dl></dl> for a definition list
Then, within the lists, each list item in an unordered and ordered list gets a list item tag: <li>. In traditional HTML this tag does not take a closing pair, and current browsers still support this usage. New standards, however, that will be required by future browsers, do require that all tags be closed. You close the <li> tag like any other, placing a after each item on the list. This is a lot more typing if you are hand-coding, but the latest versions of editors will probably do this closing for you.
For a definition list, the "term" part of the item has the tag <dt> and the "definition" part has <dd>.
All types of lists do their own automatic indenting.
So the coding for my unordered list above is:
<ul>
<li> Item
1</li>
<li> Item
2</li>
<li> Item
3</li>
</ul>
For the ordered list:
<ol>
<li> Item
1</li>
<li> Item
2</li>
<li> Item
3</li>
</ol>
And for the definition list:
<dl>
<dt>Encyclopedia
Britannica</dt>
<dd>This is the most famous
encyclopedia.</dd>
<dt>Grove's Dictionary of
Music</dt>
<dd>This is an encyclopedia of
music.</dd>
</dl>
It isn't "proper" HTML, but you can use<dd> tags outside of definition lists to indent. Just be aware that everything will indent after the <dd> tag until you insert a <p>, <br>, start a new list or use a heading or other sort of formatting. The proper way to do this, however, is by using a Style Sheet property. For more information, see my Good and Cited Sites.
You can make the numbers in ordered lists and the bullets in unordered lists conform to different styles if you want. Just add an attribute to the <ol> or <ul> tag.<ol type="A"> would make the list numbering go A-B-C, while substituting a lower case a would make it a-b-c, an I would give you I-II-III and i would display i-ii-iii. You can even make the first number something other than 1, A or I, by adding the attribute start= and giving it another value.
For example, <ol type="I" start="III"> would start a list with outline-type numbering with number III.
<UL TYPE="disc"> would make the bullets in an unordered list a disc, while using "circle" for the value would make them open circles and "square" would make them squares. (You can do even more elaborate things with bullets if you use styles. See my new section—Styles: Basic Concepts—for more information.)
A final point about lists that is often useful: they can be nested. (Even
different types can be nested within each other.) For example, to create
an outline like this one:
you would type the following:
<ol type="I">
<li>Organization</li>
<ol type="A">
<li>Lists</li>
<li>Tables</li>
<li>Frames</li>
</ol>
<li>Decoration
<ol type="A">
<li>Colors</li>
<li>Size</li>
<li>Backgrounds</li>
</ol>
</ol>
The brown-colored text above is the coding used to display the first level of the outline and the red nests cosily inside it to display the second level. You might find it useful in coding lists, especially nested ones, to use progressive indenting for your different list's tags. This will make it easier to keep track of which list is which.
If you don't want the list items to be vertically displayed on the page, you can make them display horizontally, like my "tabs" lists at the top of these pages. The key is to set the display attribute to inline. The best way to do this is with Styles.
Tables are HTML's way of displaying columns. But, with some imagination and creativity, they can be used for much more than just spreadsheet-like displays of data. A table with one row and two long columns can mimic newspaper columns, for example.
The coding for tables uses the now-familiar sets of paired tags, but the nesting can get complicated quickly if your table has many rows or columns. The beginning and ending tags, though, are simple:<table></table>. These go before and after all of your table formatting and content.
Your table's rows are surrounded by <tr></tr> tags and the contents of each cell are bounded by <td></td> tags. So a very simple table that looks like this:
This |
is a |
very simple |
table. |
would have coding that looks like this:
<table align="center" border="2" >
<tr><td><h3>This</h3></td>
<td><h3>is
a</h3></td></tr>
<tr><td><h3>very
simple</h3></td>
<td><h3>table.</h3></td></tr>
</table>
I made this a little more complicated than it needed to be by adding an align= attribute to center the table on the screen, and by including the <h3> tags, but I hope you can still see the basic structure:<tr></tr> tags around rows (there are two rows in the table, therefore two sets of these tags). And <td></td> tags around each cell, cosily nested into the row tags. All of which, of course is cosily nested into the <table></table> tags. The border tag is necessary for modern browsers to display the lines around the cells. In older browsers the default setting was to display the lines, but now the default is for no border to display, an acknowledgement that most tables in web pages nowadays are used for design layout, not display of data.
You will notice that the size of each cell is determined by the longest chunk of content in a cell in that column. This is a fact of HTML tables that cannot easily be avoided (you can specify the sizes of your columns, but this runs the danger of a table displaying oddly if your viewer's screen or window isn't sized the same as yours). You can vary font size from cell to cell, use <br> tags to divide up your text, or, of course, re-write your cell content to condense or expand the cells. As you learn to use tables to set up the design of your pages, you will find that this feature is sometimes a bother, but sometimes comes in handy when you are trying to position objects.
That is all there is to simple tables. They can get much more complex, but these simple rules still apply. If you are interested in seeing how to manage some of these complexities—variable column and row spacing, headings, use of color in tables, nesting of tables—see "More Tables Techniques." If you want to make a borderless table and be sure it displays that way in all browsers, insert the border attribute into your <table> tag, like this:
<table border ="0">
Voila! The border disappears:
This |
is a |
very simple |
table. |
Conversely, you can have thicker borders by increasing the border= number. The default is usually 1, so to make a thicker border than what you saw in my first example, just use a larger number in this attribute statement. Other attributes can vary the amount of space between the content and the sides of a cell and the spacing between cells. See "More Table Techniques" for these and more tables tricks.
Tables can be used in all sorts of ways. Some samples: This is a table I made to secure the spacing of a large graphic and a page title; this attractive page designed by Margaret Sylvia shows how tables can be used to provide a "menu bar" without frames; Diane Duesterhoeft, another librarian/web author, often uses tables to make large amounts of directory-type information clear and readable, as in this example.
Mentioning frames is a good way to start a lot of web-surfers ranting. I agree that they can be a pain (although not as much so in newer browsers) and that they are 'way over-used. But there are some situations where they can be useful.
If you need to display two sets (or more) of material at the same time, as in this example from my earlier HTML workshop, frames can help you out. Also, they can be useful in providing something like a menu or navigation bar that stays in place while the main content the reader accesses varies. There are almost always alternative ways of making the same kind of displays that simple framesets create, but a discussion of Web page organization techniques would be incomplete without at least this brief introduction. And a basic understanding of how they work can make them easier to live with when you encounter them on the web. If you want to skip the how-to section and go right to the "tips for living with frames," you can.
The basic idea of frames is quite simple.You set up the "framework" for your page in a separate document containing a pair of <frameset></frameset> tags. This is an example of such a file, which I have named framtest.htm:
<html><head>
<title>Sample Frames
Page</title>
</head>
<frameset cols="50%,50%">
<frame src="frame1.htm">
<frame src="frame2.htm">
</frameset>
</html>
The first thing you will notice is that there is no <body> tag. That is because this frameset document doesn't contain any real content itself. It is, in fact, simply a frame into which your content is displayed. In this example, the file framtest.htm would display like this. The attribute cols tells the browser to divide the screen into columns, and the value of "50%,50%" tells it to make two of them, equal in size. If you wanted rows instead of columns (a horizontal divison of the page) just substitute a rows attribute for the cols one above. If you want more than two rows or columns, just include more numbers in the attribute's value. (Be careful, though, as screen space runs out quickly.) If you really only care about the size of one of your columns or rows, you can just specify that one and let the browser do the math:
<frameset cols="25%,*,*>
This expression would cause a three-part frame to appear, with the left-hand column taking up a quarter of the screen and the other two dividing the remainder equally. If you wanted the middle column to be twice as wide as the right-hand one, you'd type this:
<frameset cols="25%,2*,*>
You can also specify a number of pixels for one or more columns or rows:
<frameset cols="75, *">
Be careful with this approach, however, since you don't know how big your readers' windows are. Percentages are best for setting frame layout.
The filenames specified after <frame src= > are the files that will display in each frame. This is where the actual content is, and these files look just like regular HTML documents, complete with <body> tags.
That is all there is to basic frame construction. The complications set in when you put links in one frame and start changing what's in each frame. The frames can be named, so that when a link is chosen, the target file can be made to appear in a particular window. To name a frame (mainly on the plain?) just add an attribute:
<frame src="frame1.htm" name="first">
Then, when you make a link to a page that you want to appear in that frame, the coding looks like this:
<a href="newpage.htm" target="first">Jump to a new page</a>
If one of your links is to an external site, it's both ethical and less confusing to add a target attribute to the link with the value "_top". This wipes out the frameset and loads the new page into the whole window. Without this added code, it might look like the external page is one of yours, too. (This confusion of appearance and attribution has been the subject of some copyright lawsuits.) Here is an example:
<a href="http://www.astros.com" target="_top">Astros home page</a>
Some frames guides will tell you to add a message for non-frames browsers within <noframes></noframes>tags in your frameset document. This will work fine for readers with Netscape 4 or higher. Older browsers won't display it, though. I have come across two other suggestions.
One is to go ahead and put some text between <body></body> tags in your frameset document. Frames-capable browsers will ignore it, while others will display it instead of a blank screen, which is what is displayed when a non-frames capable browser (or one with frames turned off) tries to work with a frameset file. Another idea is simply to put your text after the</frameset> tag. It should display in non-frames browsers but not in others.
However you do it, a link to a non-frames version is essential (unless you just don't care whether everyone can see your content). One thing you don't want to have as non-frames text is: why don't you get a frames browser?! or something equally hostile. I'm sure you've seen examples of this kind of rudeness and wouldn't dream of being so discourteous.
There is a lot more that can be varied in frame construction to suit different purposes, but hopefully this is enough to get you started. I, quite frankly, haven't been using frames long enough to feel qualified to go any further myself. But there are a lot of resources you can consult, both to find out more about making frames, and also about why you might not want to. Some of these are:
In addition to learning more about making frames from these (and other) sites, you can find tips for living with frames such as these:
IMPORTANT NOTE: All of the instructions in this and my other tutorials apply to authoring for the Web at present (mid-2007) and will continue to be useful into the future. But to be sure you are using the latest standards, especially as we get further from 2007, you can always check with the good folks at W3Schools.