TUTORIALS
or "How do I design a web site myself?"

If you are on this page, then like me, you want to learn to do it yourself. How exciting! Hopefully you will find the answers here to get you started on your first web page. I have decided to write this the way I wish I could have found it written for me. I have included the information that I needed to know when I first started out. But I will go one step further. If you need help, please email me HELP. I don't know everything, and I will never know everything! But I do know where to find the answers.

If you are a beginner, you might want to read this page top to bottom. All of the topics are on this page and I'll walk you through the design.

 

THE BASICS (setting up your page with META tags)
 
TABLES & TAGS (what turns all your typing into a web page)
 
STANDARD FONTS
 
MAKING LISTS
 
LINKING
 
CONTENT AND TEXT ON A BORDERED BACKGROUND
 
CONTENT AND TEXT ON NESTED TABLES

 

--- THE BASICS ---


You want to make your own web page/web site. You signed up with a free web site server and you have used their generic template. Like me, you have found that this does not suit your artistic needs. Now you want to use the more advanced editor at your free server, or even your own text editor and upload to your paid server. The first page of your web site will be name/index.html. Copy and paste this into the top of your text editor. This is the behind the scenes instructions that tell computers how to read your web page and the spiders/search engines how to index your web page.

<html>
<head>
<title></title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="DESCRIPTION" CONTENT=" ">
<META NAME="KEYWORDS" CONTENT=" ">
<META NAME="OWNER" CONTENT=" ">
<META NAME="AUTHOR" CONTENT=" ">
<META NAME="RATING" CONTENT=" ">
<META NAME="ROBOTS" CONTENT=" ">
<META NAME="REVISIT-AFTER" CONTENT=" ">
</head>
<body bgcolor="#" text="#" link="#" vlink="#">


</body>
</html>

The rest of your web pages will be named appropriately for the page i.e. myphotos.html. Copy and paste this into your text editor for each page.

<html>
<head>
<title></title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="DESCRIPTION" CONTENT=" ">
<META NAME="KEYWORDS" CONTENT=" ">
<META NAME="OWNER" CONTENT=" ">
<META NAME="AUTHOR" CONTENT=" ">
</head>
<body bgcolor="#" text="#" link="#" vlink="#">


</body>
</html>


back to top

--- NOW WHAT? ---


The instructions for filling in the information for all the META tags is here:

<html>
<head>
<title>Write the title of your web page here. It should have as many of your keywords as possible.</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="DESCRIPTION" CONTENT="Write up to 25 words that describe your web page. Use keywords in this description.">
<META NAME="KEYWORDS" CONTENT="Keywords are the words or combination of words that someone will type into their search engine to find you. Think like that person and write up to 250 words that reflect your page. Try and combine words. Do not use the same word more than 3 times. Write each word or combination of words separated by a coma then space. Do not use words that have nothing to do with your web page but you think will get you more traffic.">
<META NAME="OWNER" CONTENT="Write your company name or your name---this is one META tag that you can delete if you want.">
<META NAME="AUTHOR" CONTENT="Your name goes here---this is one META tag that you can delete if you want.">
<META NAME="RATING" CONTENT="General">This tells the search engines and spiders who your site is rated for. General is the most used, but you can also use Mature or Restricted.
<META NAME="ROBOTS" CONTENT="index, follow"> This tells the search engines and spiders to look at all of your pages. Writing "index, no follow" tells them to look only at your index page. Writing "no index, no follow" tells them not to look at any of your pages for the search engines.
<META NAME="REVISIT-AFTER" CONTENT="60 days"> Put the number of days that you would like the search engines and spiders to visit your web site. If you have a site where the information will change weekly, then write 7 days.
</head>
<body bgcolor="#put a 6 digit color number here" text="#put a 6 digit color number here" link="#put a 6 digit color number here" vlink="#put a 6 digit color number here" body background="if you are using a web page background write the name of the image file here i.e. mybackground.jpg"> If you are not using an image file for your background, then delete body background and your > will go at the end of your vlink# color number.

THIS IS WHERE YOU WILL WRITE AND PLACE THE CONTENT FOR YOUR WEB PAGE

</body>
</html>


back to top

--- TABLES & TAGS ---


A tag <  > is an instruction between 2 brackets that tells the computer how to read what you have intended the viewer to see. Most of the tags have an ending tag </  > that tells the computer to stop reading that instruction. There is no space between the tag and the intended ???. Here is an example:

I want to put an image in the middle of my web page with the title of my web page under it, and I want the title to be in brown. I would write:

<center><img src="name.jpg" width="140" height="180" border="0" alt="keyword"></center>
<center><h4><font color="brown">How To Write A Web Page</font></center>

This is what it would look like:

web page tutorials

How To Write A Web Page



This example uses five tags. The <center> tag tells the computer to put it in the center of the page. Without spacing I write <img src="the name of the image file". Now I have to tell the computer what size my image is    width="size" height="size" border=" 0". "0" is without a frame around it, or I could write "1" for a thin frame, "3" for a thick frame. The alt="web page tutorials" are words that will display when the mouse is over it. Put your mouse over the cow pic to see this work. The alt tag is also a great place to use your keyword phrases. The alt tag does not work in Netscape6 higher.> This is everything that I want centered in the middle of this line so I write, without a space</center>.

Under my image I want to center the title. I write <center><h4>
After the <h4> I want to give my text a different color so I write without a space<font color="brown">. To tell the computer to stop the brown text, to stop centering and to stop the <h> size I write</h></font></center>.

NOTE: Font (text) size for a web page is 1-7. One being the smallest and seven being the largest. The default setting for font size on a web page is "3". The <h> tag (heading tag) is different. You can use 1-7. Seven being the smallest and one being the largest. The <h> tag is also one of the tags that you do need an ending tag </h>.

(The cow pic I used for the example is one I painted on wood and is hanging in my kitchen.)

Before we go any further, let me explain what I think is the hardest part for beginners (tables).
A web page is measured in pixels px. Use 750 px for the width of your web page. The length will be determined by the amount of content you put on your web page. Your web page will be laid out in tables <table>. One table will start the page, and you can put as many tables on a page as you want. A table is a block of space. It is measured in px or % of width="   ". You do not need to write px. The computer reads all numbers as px unless you write the percentage sign. We are going to put the instruction to tell the computer whether or not to put a frame border="   " around your table. Inside our table tag we are going to put the instruction to control the space between our content and the edges of the table cellpadding="   " , and we are going to put the instruction that controls the space between each table and tr and td cellspacing="   " . Everything I want that table to do will be inside   <   >   . Hit your enter key. We are going to put tags that control the content vertically <tr> Hit your enter key, and horizontally <td> .

Here is an example of a table. I want it centered. I want it to be 80% of the width of the page. I do not want a frame around it. I want the text to go to the edges of the table so I write "0" for cellpadding. I am not going to put any other tables or trs and tds on this page so I write "0" for cellspacing. I hit my enter key and put the tr tag so my content will be there vertically. I put the td tag next to it because I am not giving my horizontal space any instructions:

<center><table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr><td>

I WRITE AND PLACE MY CONTENT HERE

</td></tr>
</table></center>

</body>
</html>

Notice that I have put the closing tags at the end of all my content and above the closing body and closing html tags. If you forget to put closing tags, you will not see your web page. Please notice too the order in which you write the tags. Very important.

This page is written on NESTED TABLES, but the inside table is written this way.

Here is another example of what you can do with a table. I want to divide my web page up into two columns for four pictures with my title at the top and my links at the bottom. I want the background color to be different for each picture square. I want a border around each picture. That means I will give my td tag an instruction. And I want a space between each square. I am putting one long row over and below two columns, so I will be using the colspan=" ". Here it is in a small version. You can change all the sizes to meet your needs.

<center><table width="110" cellpadding="0" cellspacing="5">
<tr>
<td width="110" colspan="2"><center><h6>MY PICTURES</center></td>
</tr>
<tr>
<td width="55" bgcolor="#  " valign="center">
<center><img src="name.gif" width="20" height="20" border="1" alt="keyword"></center></td>
<td width="55" bgcolor="#  " valign="center">
<center><img src="name.gif" width="20" height="20" border="1" alt="keyword"></center></td>
</tr>
<tr>
<td width="55" bgcolor="#  " valign="center">
<center><img src="name.gif" width="20" height="20" border="1" alt="keyword"></center></td>
<td width="55" bgcolor="#  " valign="center">
<center><img src="name.gif" width="20" height="20" border="1" alt="keyword"></center></td>
</tr>
<tr>
<td width="110" colspan="2"><center><font size="1">[link]&nbsp;[link]&nbsp;[link]</font></center></td>
</tr>
</table></center>

Here is what it would look like:

MY PICTURES
pic
pic
pic
pic
[link] [link] [link]


One more example of what you can do with a table.
You want to write a story about your pictures on the left side of your web page and display the 4 pictures one on top of the other on the right side of the page. You still want your title across the top and the links across the bottom. You want the background for your pictures to be white with a space around it. Because we want to put one long column next to four rows, we will be using rowspan="  ". And we are putting one long row above and below two columns so we are using colspan="  " again. Here it is in a small version. You can change all the sizes to meet your needs.

<center><table width="110px" cellpadding="0" cellspacing="5">
<tr>
<td width="110px" colspan="2"><center> <h6>MY PICTURES</center></td>
</tr>
<tr>
<td width="40px" rowspan="4"><font size="1">This is the story about my pictures.
I have been taking pictures since...</font></td>
<td width="60px" bgcolor="#  " valign="center"><center><img src="name.gif" width="1" height="25" border="0" alt="keyword"></center></td>
</tr>
<td width="60px" bgcolor="#  " valign="center"><center><img src="name.gif" width="1" height="25" border="0" alt="keyword"></center></td>
</tr>
<td width="60px" bgcolor="#  " valign="center"><center><img src="name.gif" width="1" height="25" border="0" alt="keyword"></center></td>
</tr>
<td width="60px" bgcolor="#  " valign="center"><center><img src="name.gif" width="1" height="25" border="0" alt="keyword"></center></td>
</tr>
<tr>
<td width="110px" colspan="2"><center><font size="1">[link]&nbsp;[link]&nbsp;[link]</font></center></td>
</tr>
</table></center>

Here is what it would look like:

MY PICTURES
This is the story about my pictures.
I have been taking pictures since...
my pic
my pic
my pic
my pic
[link] [link] [link]


back to top

There are hundreds of tags. I have included several here to get you started.

<br> No closing tag needed. This tag drops you down one line. Like hitting the enter key on your keyboard. You can use this tag to control the vertical space between your lines of text and or images. I am going to use two right now.

<p> Needs a closing tag </p> This is your paragraph tag and will start a new paragraph for you. It will control the vertical space and is equal to two <br> tags. I will use one now.

<blockquote> Needs a closing tag </blockquote> This moves your block of text five spaces in from both sides. I have used it here. You can use this more than once to move your block of text in. Remember though, for every <blockquote> you use, you have to use that many </blockquote>

<div align="right"> Needs a closing tag </div> The div tag is used to define a block of content. You will align it "left" (default) "center" or "right". I have aligned this "right" and it doesn't look very good. The right side is straight while the left side is jagged. You can put any tags you want inside the div tag, including images.


&nbsp; This is the instruction for a non breaking space. What it does is give you one space. If you wrote this five times, with out a space in between, you would have a nice indent to a paragraph. Notice that this one does not have brackets <  > around it. It does not need a closing instruction either.

<b> Needs a closing tag </b> This makes your font bold.

<strong> Needs a closing tag </strong> This does the same thing.

<i> Needs a closing tag </i> This makes your font Italic

<u> Needs a closing tag </u> This is the underline tag. You can underline one word or all the words.

<tt> Needs a closing tag </tt> Use to change your text to typewriter font

<hr> No closing tag needed. This is the horizontal line tag. It will put a line across your page the width of your table and the color of your text. Like this:


You can also control the line width by writing:
<center><hr width="200"></center>


This works in all the browsers.

IE lets you also control the color.

<center><hr width="400" color="purple"></center>



You can also make a fancier line across your page like this:

<center><font color="skyblue">*************************</font></center>

*************************


<font> Needs a closing tag </font> You would use this tag if you want to change the style (face), the color, and or the size of your font different from what you set the page to be. Put all of your instructions together like this:

<font face="verdana" color="blue" size="4">I have changed the font</font>

I have changed the font

<blink> Needs a closing tag</blink> This makes your text blink. It only works in Netscape.

<marquee> Needs a closing tag </marquee> Here is a fun one. If you want to make text scroll across your page without using a graphics program, do this:

<div align="center">
<font size="4"><marquee width="50%" behavior="scroll" direction="left" scrolldelay="200" loop="infinite" bgcolor="plum">For FREE Web Page Sets and Tutorials visit Cat On The Web Design</marquee></font>
</div>
This only works in IE5 higher, Netscape6 higher:

For FREE Web Page Sets and Tutorials visit Cat On The Web Design

 

You can align this "left", "center" or "right". You can change the font size="  " to any number "1"-"7". You can change the marquee width="  " to any "%" you want. You can change the direction="  " to go to the "right". You can change the scrolldelay="  ". "100" is faster and "300" is slower. You can change the loop="  " to a number. If you want it to scroll across 3 times, then you would write loop="3". You can change the bgcolor="  " to any color you want. Then write your own text.


back to top

--- STANDARD FONTS ---


When designing your web page, you can change the font. You want to be careful to change it to a font that is STANDARD for all Windows.

There are only six STANDARD fonts common for Windows 95, 98, ME, NT, XP and 2000. Remember, you can use the <b>bold tag</b> and <i>italic tag</i> to change the look:

Arial
Courier New
Modern
MS Sans Serif
Smallfonts
Time New Roman

back to top

--- MAKING LISTS ---


Making lists is a useful way of listing links, or making an outline.

Here is a list without bullets and no indent:

<dl>
<dt>THE BASICS
<dt>TABLES & TAGS
<dt>MAKING LISTS
</dl>

Here is how it looks:

THE BASICS
TABLES & TAGS
MAKING LISTS


Here is a list with bullets and no indent:

<dl>
<li>THE BASICS
<li>TABLES & TAGS
<li>MAKING LISTS
</dl>

Here is how it looks:

  • THE BASICS
  • TABLES & TAGS
  • MAKING LISTS


    • Here is the list with a title, and bullets:

    <dl>
    WEB PAGE TUTORIALS
    <li>The Basics
    <li>Tables & Tags
    <li>Making Lists
    </dl>

    Here is how it looks:

    WEB PAGE TUTORIALS
  • The Basics
  • Tables & Tags
  • Making Lists


    • Here is a list with square bullets and an indent:

    <ul type="square">
    <li>THE BASICS
    <li>TABLES & TAGS
    <li>MAKING LISTS
    </ul>

    Here is how it looks:

    • THE BASICS
    • TABLES & TAGS
    • MAKING LISTS


    Here is a numbered list:

    <ol type="1">
    <li>THE BASICS
    <li>TABLES & TAGS
    <li>MAKING LISTS
    </ol>

    Here is how it looks:

    1. THE BASICS
    2. TABLES & TAGS
    3. MAKING LISTS


    Here is an alphabetized list:

    <ol type="A">
    <li>THE BASICS
    <li>TABLES & TAGS
    <li>MAKING LISTS
    </ol>

    Here is how it looks:

    1. THE BASICS
    2. TABLES & TAGS
    3. MAKING LISTS

    back to top

    --- LINKING ---


    You will want to link your web pages together. You will probably want to link to other web sites. You may want to link one part of a page to another part on the same page. You will want to have a link to your email address.

    Linking your web pages together:

    <a href="pagename.html">PAGE NAME</a>

    This tells the computer to look in your directory (folder) and not on the world wide web (www). Your pages will load much faster.

    Linking to other web sites:

    <a href="http://catonthewebdesign.com">Cat On The Web Design</a>

    This tells the computer to search the world wide web for this web site. You will write the URL of the site you want to link to.

    Linking one part of your page to another part on the same page. This is called a     target tag.

    At the top of this page I have six links. Each link is targeted to a place on this page. Using THE BASICS as my example:

    At the top in the link list I wrote:

    <a href="#basics">THE BASICS</a>

    To make it jump to the section called THE BASICS I wrote this next to THE BASICS (section):

    <a name="basics">THE BASICS</a>

    When writing target tags, make sure you use the same word/words inside the "  ". Each set of target tags will have it's own word/words. That way you can have multiple target tags on one page. This works with images too. Just remember that a href="#  " is the link that jumps to a name="  ".

    Linking to a email address:

    <a href="mailto:catwebdesign@ameritech.net">Email Cat</a>

    Replace my email address and Email Cat with your own.

    What you write between the     >  < and before the </a> is what will be underlined and linked.

    Linking to a email address with the SUBJECT filled in:

    <a href="mailto:your email address?subject=write anything you want">What you want the link to read</a>


    back to top

    --- CONTENT AND TEXT ON A BORDERED BACKGROUND ---


    To place content on a left bordered background you will need a blank gif. Right click in the box and save this to your hard drive:

    free turorials


    This is a transparent image and you can change the width and height to anything you need.

    At the top of your page, just under the:

    <BODY bgcolor="#  " text="#  " link="#  " vlink="#  "
    background="name.jpg">

    Write:

    <table><tr><td><img src="blank.gif" height="1" width="150" border="0" alt=" "keyword"</td>
    <td> (this will keep the left table open and the content off until the end of your web page)
    You can change the width to fit your page.

    Next write:

    <center><table width="80%" cellpadding="  " cellspacing="  " border="  >
    <tr>
    <td>

    WRITE/PLACE YOUR PAGE CONTENT HERE
    You can put anything you want here and as many tables as you want.

    To end your web page first you need to close the content table:

    </td>
    </tr>
    </table></center>

    Now you need to close the left border table:

    </td>
    </tr>
    </table>
    </body>
    </html>


    back to top

    --- CONTENT AND TEXT ON NESTED TABLES ---


    Designing a web page on nested tables is a good way of using a bright or busy background that you couldn't use as your background with text on it. You can layer as many backgrounds as you want. You can use color numbers and/or images for your backgrounds. Here is the code for three layers. Replace the #color and/or image.jpg with your own:

    Write at the top of your page just under:    </head>

    <body text="#000000" link="#000000" vlink="#000000"
    body background="images/image.jpg">
    <br>
    <table background="images/image.jpg" border="1" bordercolor="#000000" width="95%" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <br>
    <br>
    <br>
    <table background="images/image.jpg" border="1" bordercolor="#000000" width="85%" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td>

    Now you have three backgrounds. To write a web page on this and using 85% of the width of the top background you would write:

    <center><table width="85%" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td>

    You can put anything you want here and as many tables as you want.

    To end your web page first you need to close the content table, then the top background, then the middle background:

    <br>
    <br>
    </td>
    </tr>
    </table></center>
    </td>
    </tr>
    </table>
    <br>
    <br> The <br> tags control how wide the middle background is at the bottom. Change how many you use to match your side borders.
    <br>
    </td>
    </tr>
    </table>
    <br>
    </body>:This closes the back (body) background.
    </html>

    Click HERE to see how this looks. Use your back button to return to this page.


    back to top

    --- FINAL THOUGHTS ---


    I hope this was able to help you. The best way to learn how to do it yourself is to "view source" when you are on a web site that you like. There are several FREE HTML editors that you can download to help you write your pages. But, guess what. If you don't know what tables, tags, lists, etc. are, then you won't know how to use the HTML editors. I have one of the best editors there is and I still find myself writing my pages in long hand (so-to-speak).

    If I was able to help you with your web site, then please copy and paste this snippet of HTML somewhere on your site so I might be able to help someone else.

    <center><font size="2"><a href="http://catonthewebdesign.com">CAT ON THE WEB DESIGN</a><br>For FREE Web Page Sets & Tutorials</font></center>

    This is what it will look like:

    CAT ON THE WEB DESIGN
    For FREE Web Page Sets & Tutorials


    Please email me with your web site address (URL) so I can take a peak and see what a great job you did!

    cat@catonthewebdesign.com

     

    HOME    WEB SITE DESIGN    FREE WEB PAGE SETS    FREE STUFF    ABOUT ME

     

    Web site designed and maintained by Cat On The Web Design.
    For problems, comments or suggestions about this web site, please contact:
    webdesigner@catonthewebdesign.com

    All contents are the sole property of Cat On The Web Design
    and may be used as stated throughout the site.

    This page was written with the hopes of helping someone. Please do not reproduce all or part of this page as your own, as I hold "all rights" to the format.

    - All rights reserved 2003-2004 -