HTML can be edited with any text browser, specifically saved in plain text mode and uploaded to your server. The following guide should be sufficient for your basic needs.
The document which you want to load up initially should be called index.html
BACKGROUND=" " where between the quotes is the name or url of an image you wish to use as a background
BGCOLOR=" " where between the quotes is a color name or its hexidecimal equivalent
both can be used in case you want to have a default color in case they don't have
images turned on
Other options include
TEXT=" " color of pages text in format as bgcolor
LINK=" " color of unfollowed links in the format as bgcolor
ALINK=" " color of activated link in format as bgcolor
VLINK=" " color of followed links in format as bgcolor
Colors include:
white black blue red purple green yellow etc. Here are a few codes for them.
This chart has all the colors that you want for your web pages. I was very happy to find it so I wouldn't have to type them all out and not let you see what the colors where. This way you should know what color it is for your text and/or background colors.
Escape codes are necessary for certain characters which are used in html if you wish them
to be shown. For example, if you wished to physically put a
> >
& &
" "
THE BODY (found between <BODY> and </BODY>
size=" " thickness of the bar in pixels
width=" " width of the bar in pixels, default is the entire width of page
align=" " left right or center, center is default
noshade=" " causes the line to be drawn in solid black or hexidecimal or named color if specified within the quotes
Type=1 the default, list with numbers
Type=A list with capital letters
Type=a list with lower case letters
Type=I list with Roman Numerals
Type=i list with lower case Roman
Type=disk solid bullet, default
Type=circle hollow bullet
Type=square square bullet
<DT> the term
<DD> the definition
ISMAP clickable imagemap
SRC=" " url + filename of image
ALT=" " text string shown on non graphic browsers
ALIGN=" " alignment of image
VSPACE=" " space between image and text below it
HSPACE=" " space between image and text to the left of it
BORDER=" " a border, in number of pixels, usually set to 0 for images
ALIGN=" " alignment of table
BORDER=" " thickness of border in pixels
CELLSPACING=" " space between edge of cell and contents
WIDTH=" " width of the table on the page in pixels or percentage
<TR> </TR> defines the table row
options (after TR and before >):ALIGN=" " alignment of row
VALIGN=" " vertical alignment of row
<TH> </TH> table data using bold printor
<TD> </TD> table data using regular print
options (after TH or TD and before >ALIGN=" " alignment of data
VALIGN" " vertical alignment of data
ROWSPAN=" " # of rows this cell will span
COLSPAN=" " # of columns this cell will span
NOWRAP do not auto wrap text
HEIGHT=" " height of cell in pixels
WIDTH=" " width of cell in pixels
<h1> Heading size 1 </h1>
Heading size 1
<h2> Heading size 2 </h2>
Heading size 2
<h3> Heading size 3 </h3>
Heading size 3
Building Sidebars
Following is an abridged artible by James Miller on Building Sidebars in HTML:
Adding sidebars to your webpages can make them stand out from the crowd. With the following two approaches, you can have sidebars for your Navigator and Internet Explorer viewers in minutes.
An increasingly popular trend in web page design is to create a sidebar to the side of the main content of a page for navigation controls, callouts to the content, or simply for visual design. The challenge in creating these sidebars was to find a way (without using frames) to differ the sidebar's background color from the main content and to have as minimal an impact on the HTML code of the main content as possible. I'll show you two different approaches to solving this problem: the technique you use will depend on the target browser for your project.
APPROACH ONE: TILED BACKGROUND IMAGES AND TABLES
The most common solution to this problem has been to use a background image to create the differing background colors and tables to offset the content. Take a look at Starwave's NBA.com (http://www.nba.com) or Software.com's home page (http://www.software.com) for good examples of page design using this approach to sidebars.
To use this approach, start by deciding how wide (in pixels) the sidebar element should be and what colors you want for the background of the sidebar and the main content. With this in mind, fire up your favorite graphics editor, and create a new image that is between 1500 pixels wide and 10 pixels tall.
The image needs to be that wide, because an image used in the background of an HTML page will tile both horizontally and vertically as needed. Here, you want the image you create to repeat vertically down the page, creating two columns of color, but you don't want the image to repeat horizontally, as that would put more than one sidebar background on the page. I chose 1500 pixels as a width because the browser window on a large monitor could potentially be stretched that wide.
Creating the background in PhotoShop
Make a selection in the image that starts at the far left of your background image and extend it to the right for the width of your sidebar, and fill it with the background color of the sidebar (for example, light blue). Next invert the selection and fill that portion of the image with the color of the main content's background (for example, white). Save the image as a non-interlaced, non-transparent .GIF file in your web tree (my sample image was only 252 bytes: very small).
In your HTML page, assign the background of the page to this image by adding a BACKGROUND attribute to the BODY tag: <BODY BACKGROUND="/art/sidebarbg.gif">. When displayed, the image will load very quickly and tile down the length of the page creating two columns of color. If the web browser window was stretched wider than 1500 pixels, you would see the image tile horizontally as well, but chances of that happing are very small.
The next step is to setup a template, using table tags, that offsets the main content from the sidebar background and makes adding content to the sidebar independent of the content in the main section.
Consider this HTML code snippet:
<body BACKGROUND="/art/sidebarbg.gif" LEFTMARGIN="0">
<table BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="4">
<td WIDTH="200" VALIGN="TOP">
<br>
<!-- Sidebar content goes here -->
</td>
<td VALIGN="TOP">
<!-- Main HTML content goes here -->
</td>
</table>
</body>
This code creates a table that covers the entire page. The LEFTMARGIN attribute in the BODY tag will prevent browsers that recognize the tag from putting any padding between the left edge of the browser window and the content. The WIDTH attribute in the TABLE tag instructs the browser to make sure the table spans the width of the browser window. The WIDTH tag applied to the first cell (the sidebar cell) of the table tells the browser to try and make the cell 200 pixels wide, the width of the sidebar background color in my example. Finally, because not all browsers will honor cell width values unless there is something actually in the cell, I added an invisible non-breaking space to the sidebar cell.
The nice thing about using tables like this is that now you can add or remove anything from the sidebar without affecting the layout of the main content, because the sidebar and the main content are in separate cells. Be sure, however, to include HEIGHT and WIDTH tags on any image you use, as many browsers won't display any part of a table at all until they know the size of everything that is going into the table. You may also find that you have to tweak the table cell WIDTH attribute, because each browser handles table generation a little bit differently, and some pay less attention to that tag than others. If the table widths end up giving you trouble, try placing a small, transparent GIF image in the sidebar, and stretching its width by artifically increasing the WIDTH attribute of the IMG tag.
The real limitation of this first approach is that you are forced to determine an exact width for your sidebar before creating the page, and that width must remain fixed for every page that uses the background. Also, if users have "Show Images" turned off in their web browsers, they won't see the background color at all.
APPROACH TWO: TABLE CELLS WITH BACKGROUND COLORS
When Microsoft released version 2.0 of Internet Explorer, they included an extension to the implementation of tables that allows background colors to be applied to tables and table cells. Microsoft uses this technique throughout their own web site; look at the Microsoft Internet Explorer home page (http://www.microsoft.com/ie/) for an example.
This second approach to sidebars provides an elegant alternative to the first, because no background image is needed:
<body LEFTMARGIN="0" TOPMARGIN="0">
<table BORDER="0" WIDTH="100%" HEIGHT="100%" CELLSPACING="0" CELLPADDING="4">
<td VALIGN="TOP" BGCOLOR="Teal">
<br>
<!-- Sidebar content goes here -->
</td>
<td VALIGN="TOP" BGCOLOR="White">
<!-- Main HTML content goes here -->
</td>
</table>
</body>
This approach is similar to the first, except now you can assign the color directly to the cell backgrounds. No separate graphic file needs to be maintained, the cell can resize to fit the content as needed, and the start and end of the sidebar can be controlled, or even moved to the right side of the main content.
Note the HEIGHT=100% attribute in the TABLE tag. This causes Internet Explorer (and Netscape Atlas) to draw the sidebar down the entire length of the window. Also notice that we are not forced to pre-define how wide the sidebar table cell will be; the browser will set the width based on the content within it. To illustrate this, look at the example page and increase your base font size (the large 'A' button on Internet Explorer's toolbar). The sidebar automatically resizes to fit the larger text.
The primary drawback to this approach is compatibility. Currently, Microsoft Internet Explorer 2.0 is the only shipping browser to support table cell background colors. However, Netscape's latest beta, called Atlas, also supports this feature. Other browsers that support tables will still separate the content, but will not change the background color.
Deciding which approach to take for sidebars will require first deciding what set of browser functionality you wish to optimize for ("Best Viewed with Internet Explorer", "Netscape NOW", "Lynx Enhanced") and how much flexibility you want from the sidebar design. Today most leading browsers support both tables and background images, making the first approach a good choice for reaching the widest audience, despite its limitations. But as Netscape and others add the tags needed to support the second approach, or if you know in advance that your audience will be viewing the site with a capable browser, then using the table cell background colors can provide a lot of flexibility in your design.
(James Miller is the Webmaster for MetaBridge, Inc., an Internet publishing solutions provider, and is responsible for much of the HTML design of Avatar Magazine. You can send him email at james@metabridge.com )
