Site hosted by Angelfire.com: Build your free website today!

How do I make a web page?


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


  1. All .html documents should begin with <HTML> and end with </HTML>
  2. The first section should be the head which begins with <HEAD> and ends with </HEAD>
  3. Between the two head flags should be the title of the document placed between <TITLE> and </TITLE>
  4. After the </HEAD> and before the </HTML> should be the BODY enclosed between <BODY> and </BODY>
  5. Within the <BODY> flag (after the word BODY and before the >) should be placed the following:

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.

images/chart2.gif (61547 bytes)

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 other escape characters commonly used are:

&gt; >
&amp; &
&quot; "


THE BODY (found between <BODY> and </BODY>

  1. <CENTER> </CENTER> centers all text between the flags
  2. <BR> inserts a line break
  3. <HR> inserts a an actual bar
    options (placed after the HR and before the >):

    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

  4. <H1#> </H1#> sets the header size for all text between these flags where # is 1 - 16
  5. <A> </A> Link: must have either: href=" " filename in quotes name=" " for anchors within document

  1. <BLOCKQUOTE> </BLOCKQUOTE> indents all text between flags
  2. <PRE> </PRE> preformatted text, not pretty
  3. <B> </B> bold
  4. <I> </I> italic
  5. <TT> </TT> monospace typewriter font
  6. <U> </U> underlined, be careful, links are also underlined
  7. <SUB> </SUB> subscript
  8. <SUP> </SUP> superscript
  9. <Font size="#"> </FONT> where # = 1 to 7
  10. <P> </P> paragraph
  11. <OL> </OL> numbered list, list items begin with <LI>
    options (after OL and before >):

    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

  12. <UL> </UL> unordered list, uses bullets
    options (after UL and before >):

    Type=disk solid bullet, default
    Type=circle hollow bullet
    Type=square square bullet

  13. <DL> </DL> Definition list. Items in list consist of pairs of elements; a term and definition

    <DT> the term

    <DD> the definition

  14. <IMG>
    options (after IMG and before >):

    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

  15. TABLES <TABLE> </TABLE>
    options (after TABLE and before >):

    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 print

    or

    <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">
    &nbsp;<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">
    &nbsp;<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 )

     

Return to Main Page