Tips & Tricks
Web Page Design

The Basics
Don't Panic! It's Not As Hard As You Think:
Now that you have an idea of how you want your site to look and you've established your web environment to work in, you're ready to start creating your web site.
 
Today, there are a variety of web page editors on the market. Some free and some are rather expensive. If you belong to a service such as AOL or GeoCities, you are given the option to download a simple HTML editing package for free. But if you're going to be serious about creating a web site, you might take the time to invest less than $100 in a good and easy to use package. The one we recommend for beginners and experts alike is PageMill by Adobe.
 
Unfortunately Adobe has discontinued the product. But if you can find it, it's easy to use and allows you to test and track your pages within the tool. Try searching through one of the many online auction sites for bargain prices, such as ebay.com or egghead.com. I've been able to get PageMill version 3.0 for $20-$40.
 
With these kinds of editing tools you DO NOT need to know HTML. The language behind a web page. But it is very helpful if you do understand how HTML works and what you can do with it. The following is a basic tour of HTML for the beginning developer. The next pages give you some detailed specifics for some of the more common HTML tags and what you can do with them.
 
It's really not as hard as you think..give the tour a spin The tour will give more detailed information, examples and steps for using the basic code described on this page.
  1. Header
  2. Body
  3. Footer
The Structure Of A Page:
A page typically consists of 3 parts.
  1. The Header defines the window title and the characteristics of the page overall.
  2. The Body defines the content of the page, including any navigation buttons needed.
  3. The Footer defines links back to the home page, a contact person, and a revision date and so on.

Creating A Web Page
with HTML

<HTML> <b><center>
Page Title
Info to Share </center>
</b> </HTML>
Knowing HTML Makes It Easier:
You don't HAVE to know HTML, but it really can help you create the pages you want in the long run.
 
A web page can be created with simple HTML, DHTML, a Java Script, VRML or a more complex CGI, C++ or Perl program. Many business sites today use JAVA applications to provide varying database services. In this demo, we're going to focus on HTML.
 
HTML code is really just a series of TAGs that tell a browser how to display the text you want the user to see. With only a few exceptions, all the tags are made up of 2 statements, one to START the tag command and one to END the tag command.
 
Looking at an HTML page is a lot like looking at a Word document with the "reveal codes" option turned on. You'll see the commands that create a paragraph, an end of a line, bold or italic text and so on.
<HTML>
<title>
The Smith's Home Page
</title>
<body>
<center>
Welcome <br>
To Our Home
Info to Share
</center>
</body>
</HTML>
Breaking Down The Tags:
A tag is represented by a reserved word which is contained inside 2 brackets <HTML>. A web page must start with the <HTML> tag and end with the </HTML> tag.
 
The TITLE section defines the heading on the browser window. For instance, if you look at the top of your screen, you'll see the heading for this window, which says : SpringWolf Designs - Tips & Tricks. That information is specified by the title tag.
 
The BODY of your web page can contain images, text and links to other pages or sites.
 <BLOCKQUOTE>
Creating an indent
</BLOCKQUOTE>
Creating Indented Blocks:
Blocking text is used when you want to indent a paragraph to set it apart from the rest of your text. The code to the left will product text that looks like the following:
Creating an indent
  1. Formatting with
    Numbered Lines
  • And Bullets
Using Numbers and Bullets:
Even with the limitations of current HTML code, you can still do a lot to design your web page in an easy to read format. You can structure your text with numbered lines, bullets or blocking.
Unordered List:
<UL>
<LI>Item 1
<LI>Item 2
</UL>
 
Nested Unordered List:
<UL>
<LI>Item 1
<UL>
<LI>Item 1
<LI>Item 2
</UL>
<LI>Item 2
</UL>
Unordered / Bullet Lists:
There are two tags used to create lists. The un-ordered list creates a bullet list. The code to the left will produce a bullet list like this:
  • Item 1
  • Item 2
 
You can include a sub-bullet simply by adding another tree of the UL tags. Such as this:
  • Item 1
    • Item 1
    • Item 2
  • Item 2
Ordered Lists:
<OL>
<LI>Item 1
<LI>Item 2
</OL>
 
Nested Ordered List:
<OL>
<LI>Item 1
<OL>
<LI>Item 1
<LI>Item 2
</OL>
<LI>Item 2
</OL>
Ordered / Numbered Lists:
There are two tags used to create lists. The ordered list creates a numbered list.The code to the left will produce a bullet list like this:
  1. Item 1
  2. Item 2
 
You can include a sub-bullet simply by adding another tree of the OL tags. Such as this:
  1. Item 1
    1. Item 1
    2. Item 2
  2. Item 2
<UL TYPE=A>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</UL>
Additional List Parameters:
Both the Unordered List and Ordered List can be used with additional parameters to change the type of bullet used in the list.
 
With the <UL> tag you can use the TYPE parameter with the following values:
CIRCLE
SQUARE
DISC
 
With the <OL> tag you can use the TYPE parameter with the following values:
A
a
I
i
1 (When used with the VALUE attribute)
Bullet / Number Examples:
Be careful using these attributes with HTML editors, such as PageMill. If they do not provide an option through their front end interface, you'll have to code these values by hand through the HTML view. But when you switch back to the 'page view' they may replace the code you entered from 'A' to an 'a'. It can be frustrating and annoying. You can safe the options you set IF you make your final updates through the 'code view' and save your page without switching back to the 'page view'. Then you'll have to remember this page has to be modified through the 'code view' instead of the 'page view'.
<UL TYPE=CIRCLE>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</UL>
 
Creating:
  • Item 1
  • Item 2
  • Item 3
<UL TYPE=SQUARE>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</UL>
 
Creating:
  • Item 1
  • Item 2
  • Item 3
<UL TYPE=DISC>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</UL>
 
Creating:
  • Item 1
  • Item 2
  • Item 3
<OL>
<LI VALUE=1>Item 1
<LI VALUE=12>Item 2
<LI VALUE=20>Item 3
</OL>
 
Creating:
  1. Item 1
  2. Item 2
  3. Item 3
<OL TYPE=A>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</OL>
 
Creating:
  1. Item 1
  2. Item 2
  3. Item 3
<OL TYPE=a>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</OL>
 
Creating:
  1. Item 1
  2. Item 2
  3. Item 3
<OL TYPE=I>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</OL>
 
Creating:
  1. Item 1
  2. Item 2
  3. Item 3
<OL TYPE=i>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</OL>
 
Creating:
  1. Item 1
  2. Item 2
  3. Item 3
<DL>
<DT>HEADING/TERM
<DD>DEFINITION
</DL>
 Formatting with Term List:
Using a Term and definition list can also help you format your text. Not just for creating glossaries, but also for creating titled sections within your web page. You may remember this format which we used on the previous page to explain the web environment.
Most of the text on this page is using the Term/Definition tags. The highlighted section of text is the <DT> tagged text. The indented standard text is is the <DD> tagged text.

Here we can use a
hard break <BR>

to force a new line. <P>

Then using the <P> tag to force a new paragraph.
Hard Breaks and Paragraph Breaks:
The other way to regain textual control is to use a 'hard' break character where you want a carriage return. This allows you to keep lines short - and to control the flow or presentation of your text, instead of allowing the text to continuously wrap around.
 
The paragraph does exactly what it sounds like. It creates a new paragraph of text on your web page.
Putting additional &nbsp; &nbsp; spaces between words.
Adding Extra Spaces:
At times you'll find a need to include extra spacing between words or images. HTML code does not recognize more than one blank space between two objects. To get around this you can use the 'non-breaking space' (&nbsp;) tag to force extra spacing.
Tables can help
Structure Text
As Well
Using Tables For Formatting:
Tables can give you a great deal of formatting assistance. You can place pictures in specific locations relative to a group of text. Or you can set up highlighted text next to a detailed description. The format of this page is actually a table. The 1st column is what you see to the left as the bold text and examples. The 2nd column contains the text you're reading right now.
 
Each of these descriptive paragraphs and examples is 1 row within the table. Each of these is separated by another row that contains the horizontal line that separates each section of this demo. We'll cover Tables more later.
Help Online
Finding Help:
These are just some of the bare basics of HTML. You can find many resources online to help you learn more, or to find out what a particular command can do. Check out our Helpful Links page to visit some of these sites, or go to our next page to learn more about HTML tags. And don't under estimate the help you can find from a good Google search. There are tons of sites out there that can help you code your pages.
 Next: Using Fonts