Microsoft Corporation
May 28, 1996
Note The specifications and features described in this article were current at the time of writing. Hypertext Markup Language (HTML) specifications are continually changing. For information on the latest in HTML features and specifications, see the Microsoft® Site Builders Workshop at http://www.microsoft.com/sitebuilder/.
Summary of New Authoring Features
HTML Style Sheets and Advanced Layout Control
Microsoft Internet Explorer version 3.0 provides a number of powerful new authoring features, including:
Frames allow you to divide a Web page into separate regions that can display content independently. Internet Explorer 3.0 allows frames to be borderless for a more seamless look.
A side benefit of frames is that clicking a link can now launch a new window. Pages with frames can easily be authored with alternate content for browsers that do not support frames.
Follow these steps to use frames in your Web pages.
This Step by Step consists of two parts. In the first part we explain how to create a "simple" frameset page—one that is divided up into either rows or columns, but not both. A good example of this would be a home page that has a toolbar that takes you to different portions of a Web site.
Once you've learned how to create simple frameset pages, it's actually quite straightforward to create a "complex" frameset page—one that can have both columns and rows. The second part explains how to create a complex frameset page.
Remember, frames are a way of dividing Internet Explorer's screen into different independent portions. In the "simple" case, you will be dividing the screen into columns or rows. For this example, we'll create a page with two rows.
The most important thing to remember about frames is that a frameset consists of more than one HTML page. If you have a page with two frames in it, three HTML files are needed: one for each of the frames, and one that describes how the frameset will be laid out.
In this case, we'll say that you've created two HTML pages, row1.htm and row2.htm. The former will be shown in the top frame, and the latter will be shown in the bottom frame.
The next step is to create the frameset page that describes how the page is laid out. Here's the HTML for our frameset page:
<HTML>
<FRAMESET ROWS="20%, *">
<FRAME SRC="row1.htm">
<FRAME SRC="row2.htm">
</FRAMESET>
</HTML>
When viewed in Microsoft Internet Explorer 3.0, this page will be divided into two rows, showing the two files that you created: row1.htm and row2.htm.
To create a page with two columns instead of two rows, simply use COLS instead of ROWS in the FRAMESET tag:
<FRAMESET COLS="20%, *">
Observant readers will notice the following line in the above example:
<FRAMESET ROWS="20%, *">
This line determines the relative sizes of the two rows. In this case, the top row is 20% of the height of the window, and the bottom row takes up the remaining 80%. There are four ways to tell Internet Explorer how tall to make a row:
ROWS="200, *".*, where n is a number. This means "n parts of what's left over." Thus ROWS="*, 2*" makes two rows where the first one is 1/3 the height of the screen and the second is 2/3 the height of the screen. And ROWS="100, 2*, *" creates three rows: one 100 pixels tall, one that takes up 2/3 of the remaining space, and one that takes up the last 1/3.Because each frame is a separate browser, clicking a link in one of the frames will go to a new page in that frame. In some cases that may not be what you want.
It's possible to create a link that, when clicked, makes a new page show up in another frame. To do this, you need to name the frames:
<HTML>
<FRAMESET ROWS="20%, *">
<FRAME NAME="firstrow" SRC="row1.htm">
<FRAME NAME="secondrow" SRC="row2.htm">
</FRAMESET>
</HTML>
Let's say you want to be able to click a link in the top frame and have a new page come up in the bottom frame. To do this, place the following in row1.htm:
<A HREF="newpage.htm" TARGET="secondrow">Click here to see "newpage.htm" in the bottom frame</A>
The TARGET attribute causes the link to be opened in the bottom frame.
If you want to be able to click a link and have a new page fill the window (replacing the frameset), use TARGET="_top" as follows:
<A HREF="newpage.htm" TARGET="_top">Click here to see "newpage.htm" take up the whole window</A>
And if you want the page to come up in an entirely new Internet Explorer window, use TARGET="_BLANK" as follows:
<A HREF="newpage.htm" TARGET="_BLANK">Click here to see "newpage.htm" come up in a new window</A>
Note This works even on pages that do not have frames. To avoid cluttering the user's desktop with windows, this feature should be used sparingly.
If you do not want users to be able to resize a frame, add a NORESIZE attribute to the FRAME tag:
<FRAME SRC="row1.htm" NORESIZE>
If you do not want a frame to have scrollbars, add a SCROLLING attribute to the FRAME tag and set it to NO to disable the scrollbar:
<FRAME SRC="row1.htm" SCROLLING=NO>
Both of these settings are useful when creating toolbars.
By default, frameset pages have 3-D borders between the frames. For a completely seamless look, change the FRAMESET tag to the following:
<FRAMESET ROWS="20%, *" FRAMEBORDER=0 FRAMESPACING=0>
This instructs Internet Explorer to turn off all 3-D borders between frames and to place the frames right up against each other. This feature, which is unique to Internet Explorer, is called borderless frames.
To learn how to place a colored or textured border between your borderless frames, see Advanced Topics below.
When using borderless frames, it's often helpful to be able to position a frame's contents directly at the top left corner of the frame, instead of a few pixels down and to the right, as is the default.
To do this, change the individual frame page (in this case, row1.htm or row2.htm) so its BODY tag includes the following:
<BODY TOPMARGIN=0 LEFTMARGIN=0>
That's all it takes to create a simple frameset page of your own. The next section explains how to make complex framesets, which can be divided into both columns and rows.
Now that you know how to create simple frameset layouts, it's very straightforward to make complex ones. A complex frameset is just a simple frameset, some or all of whose frames are also framesets.
Let's say we want to create a page that has an index on the left and three frames of content on the right:
To do this, we create a frameset with two columns. The first column will contain frame 1, and the second will contain frames 2 through 4. Here's the HTML:
<HTML>
<FRAMESET COLS="20%, *">
The first column is just a single frame:
<FRAME SRC="frame1.htm">
But for the second column, instead of using another FRAME tag, we insert a FRAMESET tag with three rows.
<FRAMESET ROWS="20%, *, 20%">
<FRAME SRC="frame2.htm">
<FRAME SRC="frame3.htm">
<FRAME SRC="frame4.htm">
</FRAMESET>
Then we close the FRAMESET and HTML tags, and we're done.
</FRAMESET>
</HTML>
Thus, by "nesting" one frameset inside another, complex frame layouts can easily be built from simple ones.
We could have created the same layout by using two FRAME tags and pointing the second FRAME tag to a separate file that was itself a frameset. The above syntax, in which we can insert a FRAMESET block instead of a FRAME tag, is actually a shorthand that reduces the number of files needed by one.
There's one case in which you don't want to use the shorthand: when you want to click a link in frame 1 and have a page come up that replaces frames 2, 3, and 4. In that case, you would do it the longer way, giving the second frame a name and using the following to replace the contents of that frame:
<A HREF="address" TARGET="name of right-hand frame">
Since frameset pages usually contain no content, just a set of FRAMESET and FRAME tags, they tend not to show up at all in browsers that don't support frames. Fortunately, the frames standard provides an easy way to provide content for nonframe browsers.
<HTML>
<FRAMESET ROWS="20%, *">
<FRAME SRC="row1.htm">
<FRAME SRC="row2.htm">
</FRAMESET>
<NOFRAMES>
Welcome to my home page! Click below to see my vacation photos...
etc.
</NOFRAMES>
</HTML>
Internet Explorer and other browsers that support frames will ignore everything between <NOFRAMES> and </NOFRAMES>. Browsers that do not support frames will ignore the frames and display everything between the NOFRAMES tags.
With Internet Explorer 3.0 you can not only turn off the 3-D borders between frames, you can also specify that the borderless frames should be a particular distance apart. Because this allows the background of the frameset page to show through, if your frameset page has a background color or image, the effect is that of a colored or textured border between the frames.
<HTML>
<BODY BACKGROUND="woodgrain.gif">
<FRAMESET ROWS="20%, *" FRAMEBORDER=0 FRAMESPACING=20>
<FRAME SRC="row1.htm">
<FRAME SRC="row2.htm">
</FRAMESET>
</BODY>
</HTML>
The code above places a 20-pixel border between the two rows of the frameset. Because the author has specified a background graphic (woodgrain.gif), there will now appear to be a 20-pixel-wide textured border between the frames. (To use a background color instead of a background image, use BODY BGCOLOR=color name or value.)
Floating frames are a revolutionary new feature in Internet Explorer 3.0. Wherever you can put an image in a conventional browser, you can put an arbitrary box of HTML (with or without a scrollbar and a 3-D border) in Internet Explorer 3.0.
Follow these steps to place a floating frame in your Web page.
Think of a floating frame as a window that floats in your page. Through the window, you can see another Web page. Therefore, your first step is to create the page that will be seen through the window.
Let's use a page that already exists: Microsoft's home page. The address of that page is http://www.microsoft.com/.
You may want the contents of your floating frame to be aligned with the top and left sides of the floating frame. To do this, place TOPMARGIN and LEFTMARGIN attributes in the BODY tag of the page that will be displayed in the floating frame:
<BODY TOPMARGIN=0 LEFTMARGIN=0>
To offset the frame's contents by 10 pixels down and to the right, use:
<BODY TOPMARGIN=10 LEFTMARGIN=10>
To create the floating frame, insert the following in the body of your Web page (after the BODY tag and before the /BODY tag):
<IFRAME WIDTH=200 HEIGHT=200 SRC="http://www.microsoft.com/">
<FRAME WIDTH=200 HEIGHT=200 SRC="http://www.microsoft.com/">
</IFRAME>
Note Internet Explorer 3.0 does not require the additional FRAME tag and settings within the IFRAME and /IFRAME tags. To display a floating frame with nonIFRAME-compatible browsers, use a FRAME tag within IFRAME duplicating settings for the floating frame, as shown in the examples in this article.
The IFRAME tag creates a 200-pixel by 200-pixel window on your page through which you can see Microsoft's home page. (The floating frame is actually a separate browser, so you can click links to other pages right in the frame.)
To make the frame a different size, change the WIDTH and HEIGHT. You can also use percentage values. The following will insert a floating frame that is half the height and width of Internet Explorer's content area:
<IFRAME WIDTH=50% HEIGHT=50% SRC="http://www.microsoft.com">
<FRAME WIDTH=50% HEIGHT=50% SRC="http://www.microsoft.com">
</IFRAME>
By default, floating frames have a 3-D recessed appearance. If you want a more seamless look, add a FRAMEBORDER attribute to your FRAMESET tag:
<IFRAME WIDTH=200 HEIGHT=200 FRAMEBORDER=0 SRC="http://www.microsoft.com/">
<FRAME WIDTH=200 HEIGHT=200 FRAMEBORDER=0 SRC="http://www.microsoft.com/">
</IFRAME>
If you do not want the floating frame to have a scrollbar, add a SCROLLING attribute, as follows:
<IFRAME WIDTH=200 HEIGHT=200 SCROLLING=NO SRC="http://www.microsoft.com/">
<FRAME WIDTH=200 HEIGHT=200 SCROLLING=NO SRC="http://www.microsoft.com/">
</IFRAME>
This is especially useful in combination with FRAMEBORDER=0. Note that the contents of the frame will not be scrollable, not even by using the arrow keys.
You can specify margins for a floating frame exactly as you can for images. The following example places a 10-pixel border on all four sides of the floating frame.
<IFRAME WIDTH=200 HEIGHT=200 HSPACE=10 VSPACE=10 SRC="http://www.microsoft.com/">
<FRAME WIDTH=200 HEIGHT=200 HSPACE=10 VSPACE=10 SRC="http://www.microsoft.com/">
</IFRAME>
Naturally, you can use HSPACE without VSPACE, and vice versa.
You can also align a floating frame to the left or right margin, exactly as you can align an image. The following example creates a frame aligned with the right margin:
<IFRAME WIDTH=200 HEIGHT=200 ALIGN=RIGHT SRC="http://www.microsoft.com">
<FRAME WIDTH=200 HEIGHT=200 ALIGN=RIGHT SRC="http://www.microsoft.com">
</IFRAME>
As with right-aligned images, subsequent text and other contents will be drawn to the right of the frame. To skip past the bottom of the frame, insert the following into your page:
<BR CLEAR=RIGHT> or <BR CLEAR=ALL>
That's all it takes to place a floating frame in a Web page. See the following for tips on getting the most out of floating frames!
You can name your floating frames so that when a user clicks a link in your page, new content will show up in a floating frame on that page. Here's an example:
<IFRAME WIDTH=100 HEIGHT=100 SRC="page1.htm" NAME="MyFrame">
<FRAME WIDTH=100 HEIGHT=100 SRC="page1.htm" NAME="MyFrame">
</IFRAME>
...
<A HREF="page2.htm" TARGET="MyFrame"> Click here to see Page 2 in the floating frame. </A>
When the user clicks the link, the page2.htm file will show up in the floating frame.
Using floating frames in combination with client pull gives you a window on your Web page that updates regularly without refreshing the entire page.
For example, let's say you have a video camera pointed at your fishtank. It sends new images of your fish to your Web server once every 30 seconds, where they can be viewed at the hypothetical page http://www.mycompany.com/latestfish.gif.
To put a regularly updating view of your fish on your Web page, first create another page to contain the fish image. We'll say the address of this page is http://www.mycompany.com/fishpage.htm.
<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="30; URL=http://www.mycompany.com/fishpage.htm">
<TITLE>My Fish</TITLE>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0>
<IMG WIDTH=100 HEIGHT=100 SRC="http://www.mycompany.com/latestfish.gif">
</BODY>
</HTML>
(Those familiar with the client pull technique will recognize the third line as the one that makes the page refresh every 30 seconds.) Now, simply place a floating frame, pointing to the new page, into your Web page:
<IFRAME WIDTH=110 HEIGHT=110 FRAMEBORDER=0 SRC="http://www.mycompany.com/fishpage.htm">
<FRAME WIDTH=110 HEIGHT=110 FRAMEBORDER=0 SRC="http://www.mycompany.com/fishpage.htm">
</IFRAME>
From now on, visitors to your Web site will know more about your fish than you do.
Because a floating frame can contain any HTML document, this technique is useful not just for fishtanks and weather maps, but also for such things as stock quotes, online chats, and so on.
Style sheets are an extraordinarily powerful way to add layout and formatting information to Web pages. Through style sheets, many features long taken for granted by designers—specifying fonts in point sizes, margins, and intraline spacing—have finally come to the Web. Style sheet pages are downward compatible: A browser that cannot display the style sheet formatting will still show all of the content.
Follow these steps to use HTML style sheets in your Web pages.
Style sheets are a powerful way of adding formatting to HTML pages. Using style sheets, you will be able to specify font sizes in points, set margins, change link colors, and do many other formatting tasks that were not possible before.
Style information can be added to a document in several ways. Which ones are right for you? That depends on the kind of site you're putting together.
Once you've decided which category you fit into, you'll know which of the next three Steps to read.
Note Normally you can use these three methods all at the same time. If similar style information is specified both in the page and outside the page, the in-page style is used.
There are two ways to place style information inline. The first is to assign a style to a particular tag right when you use it. For example, let's say we want to have a paragraph where the font size is 20 points. Here's how we do it:
<P STYLE="font-size: 20pt"> This paragraph is in 20-point text. As Hemingway once said, it is a great thing to be able to specify point sizes, especially large ones.</P>
The resulting text will appear as 20-point text in the browser.
The second way to place style information inline is to use a new tag called SPAN. SPAN by itself doesn't mean anything; you use it to surround text to which you want to add style information using the STYLE attribute. Here's how the SPAN tag might be used:
<SPAN STYLE="margin-left: 1.0in"> This paragraph is 1.0 inches from the left margin. That's one small step for a paragraph, one giant leap for browserkind.</SPAN>
As you can see, adding style information in-line is easy. But it's much harder to go through a document and change a great number of STYLE attributes than it is to change a handful of them at the top of the document. That's why it's generally better to place style information in a centralized location, such as at the top of a page.
This is done by inserting a <STYLE> block at the top of your document. The block should come after the <HTML> tag and before the <BODY> tag. Here's an example:
<HTML>
<STYLE>
BODY {background: white; color: black}
H1 {font: 14pt Arial bold}
P {font: 10pt Arial; text-indent: 0.5in}
A {text-decoration: none; color: blue}
</STYLE>
<BODY>
<H1>This is a headline! In 14-point Arial bold!</H1>
<P>Yes, folks, here it is in black and white — this page is actually using style sheets. Oh, by the way, <A HREF="http://www.microsoft.com">this is a link,</A> but it's not underlined, because we set text-decoration for links to "none."</P>
</BODY>
</HTML>
Note that to assign more than one kind of style information at once, you simply separate the styles with semicolons. For example, to set the font of an entire HTML page to 10-point Times font, the colors to black on white, and both left and right margins to one inch, place the following before the <BODY> tag:
<STYLE>
BODY {font: 10pt Times; color: black; background: white; margin-left: 1in; margin-right: 1in}
</STYLE>
To link to an external style sheet, simply create a file that contains what you would normally place in a <STYLE> block at the top of a page (see Step 3 above). Suppose you've created a file with the following contents:
BODY {background: white; color: black}
H1 {font: 14pt Arial bold}
P {font: 10pt Arial; text-indent: 0.5in}
A {text-decoration: none}
Let's say you have placed this on your server at http://www.mycompany.com/mystyles.css. To link a page to this style sheet, simply place the following in the HEAD portion of the page:
<LINK REL=STYLESHEET HREF="http://www.mycompany.com/mystyles.css" TYPE="text/css">
Note You will need to make sure that the MIME type reported for mystyles.css is text/css.
Now that you've figured out where to put the style information, here are the text formatting features currently supported by Internet Explorer 3.0.
font: [bold] [italic] [font size]/[font leading] [list of font names]
Sets many font properties at once. You can specify a list of font names separated by commas; if the first is not available, the next will be tried, and so on. For example: font: bold 12pt/14pt "Arial,Helv"
font-family: [list of font names]
Chooses which font to use to display text. As above, you can specify a list of font names separated by commas. For example: font-family: Courier New
font-size: size
Sets font size. You can set font size not only in points but in inches (in), centimeters (cm), or pixels (px). For example: font-size: 10pt
font-weight: bold or normal
Sets the font weight. Currently only normal and bold are supported. For example: font-weight: bold
font-style: italic
Used to set various text styles. Currently only italic is supported.
text-decoration: none , underline, italic, or line-through
Sets text decoration. This is useful for turning link underlining off: simply set text-decoration to "none". For example: text-decoration: line-through
line-height: [measurement]
Otherwise known as leading, this sets the height of each line of text. (Note: currently the extra spacing is added before lines, not after. This may be changed later to match the standards set by desktop publishing applications.) For example: line-height: 20pt.
background: #rrggbb, color name, or URL([address of image])
Places a color or image behind text. This can be used to "highlight" portions of text. For example: background: #ffffff, or background: white
background: URL(http://www.mycompany.com/images/white.gif)
Once you've formatted your text, choose from the following features to control the layout of your pages. As above, all measurements can be set in inches, centimeters, or pixels.
margin-left: [measurement] and margin-right: [measurement]
Sets the left and right margins. For example: margin-left: 0.5in; or margin-right: 0.5in
text-indent: [measurement]
Sets the indentation for each paragraph. For example: text-indent: 0.25in
text-align: left, right, or center
Sets text alignment. For example: text-align: right
That's all it takes to add style to your pages!
Internet Explorer 3.0 supports several enhanced table features from the RFC1942 proposal, including selectable rules and borders, row and column grouping, and aligning text in adjacent cells by baseline. It also supports the exclusive ability to place background images (even transparent ones) in individual table cells.
Follow the instructions below for an introduction to how you can enhance your HTML tables for use with Internet Explorer 3.0!
Internet Explorer 3.0 can place a background graphic behind any table cell, or even behind an entire table. This is a great boon for designers who want to overlay text on graphics. The HTML is simple: just add BACKGROUND="address of picture" to any <TABLE>, <TD;>, or <TR> element in your table.
Here's a table that uses background images to place a patterned border around a central cell:
And here's the HTML code. Note that we have used not only background images but also background colors; this gives the viewer something to look at while the images are being loaded.
<TABLE BORDER=0 CELLPADDING=10 CELLSPACING=0 BACKGROUND="beans.gif" BGCOLOR=#572B00>
<TR> <TD COLSPAN=3 HEIGHT=10 BACKGROUND="canvas.gif" BGCOLOR=#E8CCA0></TD> </TR>
<TR>
<TD WIDTH=10 BACKGROUND="canvas.gif" BGCOLOR=#E8CCA0></TD>
<TD>
<FONT COLOR=#ffffcc>
What gives Volcano Coffee<BR> its rich, deep aroma and<BR> tastebud-tingling bouquet?<BR> <B>It's the beans, stupid!</B>
</FONT>
</TD>
<TD WIDTH=10 BACKGROUND="canvas.gif" BGCOLOR=#E8CCA0></TD>
</TR>
<TR> <TD COLSPAN=3 HEIGHT=10 BACKGROUND="canvas.gif" BGCOLOR=#E8CCA0></TD> </TR>
</TABLE>
Background images in table cells can be transparent.
If you want to specify that your table should only have rules (borders) between the rows, use the following:
<TABLE RULES=ROWS>
If you want to only have rules between the columns, use RULES=COLS instead. For a table with an outside border but no rules, use RULES=NONE.
If you want to specify that your table should only have rules (borders) between the rows, use the following:
<TABLE RULES=ROWS>
If you want to only have rules between the columns, use RULES=COLS instead. For a table with an outside border but no rules, use RULES=NONE.
Here's what happens in an ordinary Web browser when you try to use text of very different sizes in adjacent cells:
The results look a little odd because the baselines of the text are not aligned. Internet Explorer 3.0 corrects this problem by allowing you to add VALIGN=BASELINE to any TD tag. Here's the same table with the text aligned by baseline:
You've just learned three simple ways to enhance your tables for use with Internet Explorer 3.0!
Internet Explorer 3.0 can display animated .GIF images, which are rapidly becoming the standard way to add animation to Web pages. Also supported is .BMP, the standard Windows graphic format, so authors can now create Web graphics with Microsoft Paint.
Follow these steps to use .BMP and animated .GIF images in your Web pages.
You can create a .BMP using Microsoft Paint and embed it in your Web page just as you would any other image:
<IMG SRC="http://www.mycompany.com/images/mybitmap.bmp">
This is especially useful if you do not have software to edit .GIF and .JPEG images.
.BMP images give you a quick way to post software screen shots on your Web pages. Simply capture the screen shot by activating the window and pressing ALT+PRINTSCREEN, paste the picture into Microsoft Paint, save it to your Web server, and use the syntax above to place the image in your page.
Animated .GIF files effectively consist of several stationary .GIF images combined into one file. To make an animated .GIF, you start by making a collection of separate .GIF images, one for each frame of your animation. These images should be the same size and ideally should share the same palette to prevent palette flicker.
Note The following URLs were accurate and functioning at the time this article was published. However, given the transitory nature of the World Wide Web, MSDN cannot guarantee that these URLs will still exist at any point in the future.
Once you have collected the images, the easiest way to combine them is to use:
The following resources may also be helpful in your quest to create animated .GIFs:
That's all it takes to add .BMP and animated .GIF images to your pages!