Superb Internet
Want to set up your own web site? ATHROPOLIS uses and recommends SUPERB INTERNET.


HOME
HELP from Athropolis
 Help Menu 

Try our interactive form to build an experimental web page right on your browser!
Building a Web Page
Teach Yourself HTML*
(*Hypertext Markup Language)
Although there are many ways to build a web page, we are including here simple "copy and paste" instructions that will allow you to create a basic page, and then add or modify text, fonts, font sizes, colors, background colors, graphics, links, lists, etc.

PAGE DIRECTORY
Go to: TEXT | IMAGES | LINKS | COLOR | TABLES | E-MAIL | TIPS

  1. STEP 1: Starting your Web page
  2. Download a "starter" Web page
  3. Viewing your page in a browser
  4. Give your page a title

  5. TEXT: Changing the font
  6. TEXT: Changing font size
  7. TEXT: Changing the font color
  8. TEXT: Make text bold
  9. TEXT: Make text italic
  10. TEXT: Start a new paragraph
  11. TEXT: Start a new line
  12. TEXT: Centering text
  13. TEXT: Hiding text
  14. TEXT: Make ordered and unordered lists

  15. IMAGES: Inserting an image on your page
  16. IMAGES: Position your images
  17. IMAGES: Centering images
  18. IMAGES: Inserting a background image on your page
  19. IMAGES: Horizontal lines

  20. LINKS: Set link, active link and visited link colors
  21. LINKS: Creating a text link on your page
  22. LINKS: Making an image a link
  23. LINKS: Bookmark links
  24. LINKS: Link to an e-mail pop-up box

  25. COLOR: Changing the font color
  26. COLOR: Changing the background color of the page
  27. COLOR: Color Selector
  28. COLOR: Color Matcher
  29. COLOR: Color Charts

  30. TABLES: Table maker
  31. TABLES: Making tables for your web page
  32. TABLES: Table width
  33. TABLES: Table Borders
  34. TABLES: Spacing and padding cells
  35. TABLES: Changing colors
  36. TABLES: Aligning cell contents
  37. TABLES: Blank cells
  38. TABLES: Font size, style and color
  39. TABLES: Spanning rows and columns

  40. E-MAIL: Add an e-mail pop-up form
  41. E-MAIL: Protect your e-mail address

  42. TIPS: Naming files and folders
  43. TIPS: Quotation marks?
  44. TIPS: Macintosh vs Windows
  45. TIPS: Using Web page editors


Starting your Web page      ( Download a Starter Web Page )
  1. Create a new folder to save your new page file and all related graphic files.
  2. Open a text editor and choose File > New to create a new blank document.
    NOTE: Any word processor or text editor will work, but we suggest the following (included with basic system software):
    For Windows: Use Notepad with Fixedsys font.
    For Macintosh: Use SimpleText with Geneva font.
  3. Copy and paste the code in the box below onto that page.
  4. Choose File > Save As
  5. Name your file and give the document an .htm or .html extension (Example: mypage.htm). NOTE: We recommend using lower case only for file names. (See "Naming files and folders")
  6. Save the file in your new folder. (Make sure the file is saved as Text Only or ASCII if you are using a different text editor.)
You can now start to build your web page between the start <BODY> tag and end </BODY> tag.

NOTE: The tags <!--- and ---> around a section of text or code keep it from being read by the browser. More...

Click "Select All", then COPY and PASTE.

Back to Top

Download a "starter" web page

You can download / save a starter page for either Windows or Macintosh.

Download for Windows
Download for Macintosh
  1. Download the appropriate index.htm page and save it in your new web page folder.
    • Click on the appropriate link above
    • Click on the new window that opens
    • Select File > Save As
    • Save as index.htm
  2. Find and open the page you just saved in your browser (File>Open or File>Open Page). It will say REPLACE THIS TEXT WITH YOUR OWN.
    ( See: Viewing your page in a browser )
  3. With your browser window still open, open the same index.htm file in an appropriate text editor to see the code. (We recommend Notepad for Windows and SimpleText for Macintosh). View your code.
  4. Create your web page by inserting appropriate code in the section indicated (then "Save" your changes before you view them).
  5. Click "Reload" or "Refresh" on your browser to instantly see the results.
  6. ADDITIONAL PAGES: Save a copy of the index.htm file (call it: template.htm). When you want to create new pages, just open it in your text editor and "Save As" any file name you want.

Back to Top

Viewing your page in a browser
  1. Open your browser (Communicator, Explorer, etc.).
  2. Choose File > Open (Explorer) or Open Page (Communicator).
  3. Choose the .htm or .html file that you created and click Open. The page will appear in your browser just as it will appear when published on the internet.
NOTE: You DO NOT have to load your page to the server or close the document in your text editor before you view it in the browser. You can have both windows open at once. Make your changes to your .htm document, be sure to save the changes, then click "Reload" or "Refresh" on your browser to view the changes.

Just play with it. When you are happy with the results, you can then load the page to the server.

Back to Top


Give your page a title

After you have completed "STEP 1: Starting your Web page", modify the HEAD section to give your page a title.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>

Replace the words Page Title (in red) with the title you want for your page. Your title should be short and descriptive.

NOTE: The title appears in the title bar of the browser window and on history lists and bookmarks. It is also used as key words by search engines.

Back to Top


Body background, link colors and text colors

Modify the <BODY> tag that you established in "STEP 1: Starting your Web page" (shown below).

<BODY BGCOLOR="#FFFFFF" LINK="#FF0000" ALINK="#FFFF00" VLINK="#FF0000" TEXT="#000000">

Set body background, link, active link, visited link and default text colors by replacing the color codes (in red). You can use our handy COLOR SELECTOR to help you make your choices.

  1. CHANGING THE BACKGROUND COLOR OF THE PAGE
    BGCOLOR="#FFFFFF"
    Change FFFFFF (the color code for white) to the code for the color you want. Don't pick a color that makes your text difficult to read.

  2. CHANGING THE TEXT LINK COLOR
    This is the color the text will be if you make it a LINK.

    LINK="#FF0000"
    Just change FF0000 (the code for red) to the color you want. NOTE: This will also be the color of borders on your images if you make them a link.

  3. CHANGING THE ACTIVE LINK COLOR
    This is the color a link will appear when you click on it.

    ALINK="#FFFF00"
    Change FFFF00 (the code for yellow) to the color you want.

  4. CHANGING THE VISITED LINK COLOR
    This is the color a link will appear AFTER you have clicked on it.

    VLINK="#FF0000"
    Change FF0000 (the code for red) to the color you want.
    NOTE: Unless visitors to a web page need to be able to sort through a list of links and see where they've been (like on search engines, for example), it is really not necessary to have a different "visited link" color. "Link" and "visited link" colors can be the same.

  5. CHANGING THE DEFAULT TEXT COLOR
    This is the color that text will appear if you do not set specific values in your FONT tags.
    TEXT="#000000"
    Just change 000000 (the code for black) to the code for the color you want.

  6. CHANGE BACKGROUND COLOR TO A BACKGROUND IMAGE
    BGCOLOR="#FFFFFF"
    Find the section in the BODY tag that designates the background color (as shown above). SELECT and DELETE it completely.
    Replace it with the following:

    BACKGROUND="image.gif"
    ("image.gif" represents the name of your .gif image.)
    The BACKGROUND tag takes an image and repeats it as many times as necessary to fill your browser window. Therefore, the image you use must be designed to have edges that fit together without leaving a "seam". (NOTE: Images used for the background do not need the WIDTH and HEIGHT tags.)

Back to Top


Changing the font style, size and color

Copy and paste the code below into your HTML document where you want to change the appearance of your text, and adjust the various sections as indicated below (in red).

NOTE: The <FONT></FONT> tags around a section of text is used to change just one or all of the characteristics of that text. You can combine everything within the same font tag. For example:
<FONT FACE="arial, helvetica" SIZE=4 COLOR="#FF0000">Text</FONT>

Click "Select All", then COPY and PASTE.
  1. CHANGING THE FONT STYLE
    You can choose the fonts that you prefer to use, but if a viewer does not have those fonts on their computer, they will not appear. Therefore, we suggest that you either use the default font of Times New Roman/Times (no tag is necessary) or a san serif font (it looks cleaner) by using the font FACE tag as follows:
    FACE="arial, helvetica"
    If you want to use the Times style font (default font), remove the FACE tag entirely.

  2. CHANGING THE FONT SIZE
    There are several ways to change the font size, but for this basic instruction, we suggest just using the size numbers 1 (smallest) to 7 (largest).
    SIZE="3"
    Just change the number 3 to any number between 1 and 7.

  3. CHANGING THE FONT COLOR
    You can use any one of hundreds of colors for your text. Just change the six digit code for the color accordingly.
    COLOR="#000000"
    Just change 000000 (the code for black) to whatever color you want.
    NOTE: You do not have to put in a color tag if you want to use the color you selected for the default text color in the <BODY> tag at the top of the BODY section (TEXT="#000000").

See our COLOR SELECTION CHARTS to help you make your selections.

Back to Top


Make text bold

Type <B>, then the text you want to make bold, and then </B> to end the bold text.

Back to Top


Make text italic

Type <I> ( the letter i, not the number 1 ), then the text you want to make italic, and then </I> to end the section.

Back to Top


Start a new paragraph

HTML doesn't recognize the returns that you enter in your text editor, so must indicate a new paragraph with the P tag. This creates a two line space.

To start a new paragraph, type <P> before the contents of your new paragraph. You can also type </P> after the paragraph, but it is not necessary.

NOTE: Some tags (like <CENTER> or horizontal rules <HR>) have automatic paragraph markers. You do not have to add another to start a new paragraph.

Back to Top


Start a new line

When you start a new paragraph with the <P> tag, the browser inserts a two line space. If you want just a one line space, or a line break, use the <BR> tag.

Type <BR> where you want the line break. There is no closing BR tag.

NOTE: An additional <BR> tag can also be used to add additional vertical space. (For Example: <BR><BR><BR><BR> would add four vertical lines of space after text or an image.)

Back to Top


Make ordered or unordered lists

An "ordered list" is a numbered list - the same as the instructions below are presented as.

  1. Type <OL> before the section of text you want to be presented as a list.
  2. Type <LI> before each line or section of text you want to appear on the list. Use <P> or <BR> for paragraph and line breaks within that section. No end tag, paragraph or line break is necessary between list sections.
  3. Type </OL> to end your list section.

An "unordered list" is a list without numbers - the same as the instructions below are presented as.

  • Type <UL> before the section of text you want to be presented as a list.
  • Type <LI> before each line or section of text you want to appear on the list. Use <P> or <BR> for paragraph and line breaks within that section. No end tag, paragraph or line break is necessary between list sections.
  • Type </UL> to end your list section.

Back to Top


Hiding text

If you would like to make notes to yourself or put headings in your HTML code to help you organize your code or remind you of what you have done, you can block such comments so that they are not read by the browser.

Type <!---
Then type your comments or notes, and end with --->

These notes will not effect your code and will be invisible on your web page.

Back to Top


Centering text, images and tables

The CENTER is a general centering tag and can be used with any type of element on your page (paragraphs, headings, images, forms, tables, etc.) even if there is another method for centering.

To center any element on your page, simply put the start <CENTER> tag at the beginning of the section you want to center, and the end </CENTER> tag at the end of it. Everything between these tags will be centered.

The CENTER tag automatically starts a new line underneath it. You do not have to use the <P> or <BR> tags to start a new line.

Back to Top


Inserting images

Copy and paste the code below into your HTML document where you want your image to appear, and adjust the various sections as indicated below (in red).
NOTE: Remember to keep all of your file names in lower case. Although your browser is not case-sensitive (your picture files may appear) - servers are case sensitive (your pictures may disappear).

Click "Select All", then COPY and PASTE.
  1. TO INSERT YOUR .GIF OR .JPG IMAGE
    IMG SRC="imagename.gif"
    Replace the red section with the file name of your image (either a .gif or .jpg image).

  2. DIMENSIONS
    WIDTH=00 HEIGHT=00
    Enter the width and height of your image in pixels. This helps the page to load faster.
    NOTE: If you do not know the width and height of the image, you must REMOVE the width and height tags completely.

  3. POSITION YOUR IMAGE
    Firstly, position the entire image tag where you want it to appear in your text, then adjust the tag
    ALIGN="right"
    If you want your image to appear on the right side of the page, leave the tag as it is.
    To have it appear on the left side of the page, change it to "left".
    To have it centered on the page, change it to "center".
    NOTE: To center an image, you can also use the <CENTER></CENTER> tags around your image tag (recommended) and remove the ALIGN tag completely. See: Centering Text and Images

  4. ADD OR REMOVE A BORDER
    BORDER=0
    This will create a border around your image. If you do not want a border, be sure to enter 0. NOTE: If your image is also a link, the color of the border will appear in the color you have selected for your links in the <BODY> tag at the beginning of the BODY section. See:

  5. ADD A CAPTION
    ALT="Your caption"
    This information (a description of the image) will appear as your image loads, appear as text on browsers that do not show frames, and as a tool tip that appears on most Windows browsers when you point to the image with the pointer.

  6. ADD SPACE AROUND YOUR IMAGE
    HSPACE=0 VSPACE=0
    Only use the HSPACE (horizontal space) and VSPACE (vertical space) tags if you want some blank space around your image. Just change the 0 to the width or height in pixels that you want.
    NOTE: If such space is not necessary, you can remove these tags completely.

Back to Top


Add a horizontal line

Horizontal lines are call horizontal rules. Copy and paste the tags below where you want the line to appear on your page and adjust accordingly.

Click "Select All", then COPY and PASTE.
  1. SET THE THICKNESS OF THE LINE
    SIZE="3"
    Replace 3 with the number to represent the thickness you want in pixels.

  2. SET THE WIDTH OF THE LINE
    WIDTH="400"
    Enter the width of the line in pixels. You can also show width as a percentage of the page width, such as: WIDTH="80%"

  3. A SHADED LINE OR A SOLID LINE
    NOSHADE
    The NOSHADE tag creates a solid bar with no shading. If you want a bar with shading (the default style), remove this tag.

  4. POSITION YOUR LINE
    ALIGN="center"
    You can use left, right or center to position your line. You can also center the line by removing the ALIGN tag and using the CENTER tags above and below the HR tag.
    See: Centering Text and Images

Back to Top


Creating text and image links
Click "Select All", then COPY and PASTE.
Copy and paste the link tags above around the section of text or the graphic tag that you want to make a link to another page. Be sure to end with </A> after the text or graphic tag.

  1. If your link is to another web site, insert the full URL of that page (from the "address" or "location" bar on your browser) including http://. For example, a text link to Athropolis would be
    <A HREF="http://www.athropolis.com" TARGET=_blank">Go to Athropolis</A>
  2. If you have a link to a page that is loaded on the same server, just enter the path to that page in the link tags. For example:
    <A HREF="folder/page.htm" TARGET=_blank">My other page</A>
  3. TARGET=_blank indicates that the page you have designated as a link will open in a new browser window. If you want your page to open in the same window, remove this tag.

Back to Top


Making bookmarks

Perhaps you'd like to create a link to a specific place on a page. An example is the Back to Top sections of this page (which take you to the top when you click on them), or the menu at the top of the page (which brought you down here when you clicked on "Bookmark links").

  1. THE SOURCE: THE WORDS YOU WANT TO MAKE A LINK
    <A HREF="#destination">words you want to make a link</A>
    Replace "destination" with the word you are going to use at the destination. Don't forget to put </A> after the words you're using for the link.

    If the destination is on another page, then include the path to the page before the destination name. For example: <A HREF="otherpage.htm#destination">

  2. THE DESTINATION
    <A NAME="destination"></A>
    Replace "destination" with the word you chose for the destination (above), then insert the line above at the point on your page where you want the destination to be. You need </A> included in the tag, although nothing goes between it and the first part of the tag. That's it.

Back to Top


Link to an e-mail pop-up form

You can add a link to your e-mail address. When a visitor clicks on it, an e-mail window will pop-up with your address in it - like this. All they have to do is fill in their message and send it to you.

Just copy and paste the following code around the text you want to be your e-mail link.

Click "Select All", then COPY and PASTE.

Protect your e-mail address

Here's a way to help prevent e-mail address collecting "robots" or "spiders" from grabbing your address for mailing lists. A weakness of collection programs is that they can't process scripts, so use this small bit of JavaScript to protect your address while still providing an e-mail pop-up form for your visitors - .

Use this instead of the regular "mailto" code. Replace "username" with the part of your address BEFORE the @, and replace "yoursite" with the part of your address AFTER the @. Replace "text" with what you want to appear on the site (your name or e-mail address).

Click "Select All", then COPY and PASTE.

Back to Top


Making a table for your web page

Tables are excellent for presenting information in a simple to read form. In addition, tables are a good way to divide your page into sections that are easy to manage and position.

You can make a basic table by using our Table Maker - copy and paste the code onto your web page and then adjust it according to the information below.

The code for this basic table is shown directly below.

CELL 1 (Title)
CELL 2 CELL 3 CELL 4
CELL 5 CELL 6 CELL 7

<CENTER>
<TABLE WIDTH=400 BORDER=2 CELLPADDING=2 CELLSPACING=4>
<TR>
<TD COLSPAN=3 ALIGN="center">CELL 1 (Title)</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC00">CELL 2</TD>
<TD>CELL 3</TD>
<TD>CELL 4</TD>
</TR>
<TR>
<TD>CELL 5</TD>
<TD>CELL 6</TD>
<TD>CELL 7</TD>
</TR>
</TABLE>
</CENTER>

Notice how each row of cells starts with <TR> (Table Row) and ends with </TR>.
Each cell starts with <TD> (Table Data) and ends with </TD>. Add or remove these tags according to the requirements of your table.

  1. SET THE WIDTH OF THE TABLE
    WIDTH=400
    Within the TABLE tag, this indicates a table width of 400 pixels. Adjust the width accordingly. Width can also be shown as a percentage of the browser window, such as WIDTH=80%

  2. ADJUST THE BORDERS
    BORDER=2
    Change the number 2 to increase or decrease the width of the border. If you want a table without any borders showing, use BORDER=0

  3. SPACING AND PADDING CELLS
    CELLPADDING=2 CELLSPACING=4
    CELLPADDING adds space around the contents of a cell.
    CELLSPACING add space between the cells. Adjust the values in the TABLE tag accordingly.

  4. CHANGING THE COLOR OF A CELL (See: CELL 2)
    BGCOLOR="#FFCC00"
    Insert BGCOLOR into the TD tag and change the color code to the code for the color you want. See the COLOR CHART.

  5. ALIGNING THE CONTENTS OF CELLS (See CELL 1)
    ALIGN="center"
    You can use left, right or center to align the contents within your cell. You can also use the CENTER tags to anything within a cell.
    See: Centering Text and Images

  6. LEAVE A CELL BLANK
    This is easy. Instead of typing anything into the cell, just insert the <BR> (line break) tag instead.

  7. CHANGING THE FONT SIZE, STYLE AND COLOR
    Treat the text as you would any text. Insert the FONT tags before and after the text within a TD cell. See: (Changing the FONT STYLE, SIZE and COLOR).

  8. SPANNING ROWS OR COLUMNS
    COLSPAN=3
    ROWSPAN=3
    Use COLSPAN (See CELL 1) to make a cell span 2 more more columns and enter the number for the number of columns you want to span.
    Use ROWSPAN to have a cell span through 2 or more rows.

Back to Top

Naming files and folders

Use lowercase only for all file and folder names.

Browsers are not case sensitive, so if your file names are not exact (as to lower case and upper case letters), you may still see them as you preview and test your page when you're viewing the files on your computer (a link specifying "index.htm" will recognize "index.htm", "INDEX.HTM" or even "Index.htm"). However, internet servers ARE case sensitive, so when you load your files to the server - it won't recognize them unless they are EXACTLY the same (your link specifying "index.htm" will reject "INDEX.HTM" or "Index.htm" - resulting in an error message).

To avoid problems, it is best to keep all file and folder names consistent with lower case.

Back to Top

Using quotation marks

Values (For example: COLOR="#FFCC00" ) should generally be enclosed in straight quotation marks (""). However, these can be omitted if the value only contains letters (A-Z, a-z), numbers (0-9), a hyphen (-) or a period (.).

It is a good idea to put quotations around all values (just to be sure) and around URLs to make sure that they are not misinterpreted by the server.

Back to Top

Macintosh vs Windows

Pages designed on a Macintosh computer/browser can look very different when viewed with a Windows browser. This is because the Mac uses different standard fonts (Helvetica instead of Arial, Times instead of Times New Roman).

Fonts on a Macintosh are somewhat smaller than the Windows fonts (Size 3 on a Mac will take up less space than size 3 when viewed with Windows). This can cause some significant changes to the layout of your page, particularly when graphics are involved (the pixel size of images is the same). If possible, view your pages on both platforms.

Back to Top

Using Web page editors

We recommend that beginners learn basic HTML (as represented on this page), and then move on to Web page editors (like PageMill, Composer, FrontPage, etc.) if you find them more convenient. You'll have a better understanding of how a web page is structured and know what to look for in the code if you have problems. You can always adjust and refine the page designed with a page editor using these codes (just open the page in any text editor, and adjust where necessary).

Back to Top



Superb Internet
Want to set up your own web site? ATHROPOLIS uses and recommends SUPERB INTERNET.