Here you will find the code that I used on these pages. It's simple, slim and not complicated. You don't need to learn a lot of fancy code to write a webpage.
You can also see what code people have used on their pages by going to the page and selecting "View" from your browser. Then select "Source".
The best page I have here to view the source code is the Insects page. (Remember: 1afm is a free site. On the Insects page, between the META tags and the first table is code that they put in for those pop-up ads.) When you're ready to make your own site check out our Free Graphics. You can also find some backgrounds here as well as graphics.
<HTML>
</HTML>
|
Opening and closing tags. This tells the browsers that it is reading html code.
Put this at the very top of your document and at the very bottom. |
<HEAD> </HEAD>
|
The HEAD code comes right after the HTML code. It tells the browser that the next code will be in the heading section of the document and not to display it on the page it's self. This is the information section for the browser to read. It will include the META tags and style sheet information. The closing tag </HEAD> goes at the end of your heading section and just before the "BODY" section you will read about later.
|
<TITLE></TITLE> |
This is the title tag. It will show up at the very top of your browser.
|
<META Name="Description" Content="add your description here ">
<META Name="Keywords" Content="add your keywords here"> |
These are META tags. They tell search engines what your page is about. Often what you write in the description will show up on the search engines. This will now show on the browser.
|
<LINK REL="style sheet" TYPE="text/css" HREF="graphstyl.css" TITLE="graphstyl">
<P class=main15>
|
This is a link to a cascading style sheet (css). First we tell it what the style sheets name is. The "Link REL" code is put right after the META tags. Later, inside the body of the code we can call different parts of the style sheet. We do it here with the "P class=" code.
This code isn't needed in your page. You can change text with just plain html. Cascading Style sheets are often used with very large sites so they can keep the look consistent. You will find a simple cascading style sheet at the bottom of this page.
|
<BODY BGCOLOR=#FF0000 BACKGROUND="redbg2.gif" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" TEXT="#000000" LINK=#000000 ALINK=#000000 VLINK=#000000>
Now, after you have all of this you will close this HEAD section
with the </HEAD> tag and move on to the rest of the code.
|
There's a lot here. First, this is your BODY tag. It tells the browser how to set up the code.
The first you see is the BGCOLOR tag. This is the color of your page as it loads. If you don't have a graphic background this will be the color of your page.
Next you see the "BACKGROUND" tag. If you use a background graphic this will be where you put the name. (see IMG tag). Be sure to include the entire location of the background. Here I have it in the same folder as the html page. This is always the easiest way to do it.
The MARGIN tags here just bring everything up tight to the upper left corner. You can always play around with tags to see what they do and for me, that's the easiest way to learn. If you change the 0 in MARGINHEIGHT to a higher number then look at your page you'll see it moves the page down.
The TEXT, LINK, ALINK and VLINK tags are color tags for the overall text (here it's black) LINK is the color of link text. ALINK is the color of active links and VLINK is the color of the ling after it's visited and the reader comes back to the page.
|
<HR ALIGN="LEFT" SIZE="10" WIDTH="100%" NOSHADE>
Example
<HR ALIGN="LEFT" SIZE="5" WIDTH="100%">
Example
|
This one is fun. It is the horizontal rule. ALIGN tells the browser where to put the bar (here it's on the left side). SIZE tells what size to make it. WIDTH can be a percentage or a number. The percent is best because the size of the bar will stay the same if you change the width of your page later.
|
<font color="#FF0000"> </FONT> Example: Red
<font color="#0000A0"> </FONT> Example: Blue
<font color="#FFFF00"> </FONT> Example: Yellow
<font color="#008000"> </FONT> Example: Green
White is FFFFFF and black is 000000
|
You can change the color of your font as well. You don't always have to stay with the color you selected in the BODY tag. You might do this to emphasize a word. Be sure to close it with the /font tag or you'll have color running all over your text.
|
<BR> and
<BR clear=all>
|
These are two I use often. They move your text down a line for each break. The Break Clear All will move very thing and break even images. If you use a break (BR) to move down a line and find yourself with a very wide page then use the CLEAR ALL. These don't need a closing tag.
|
<B> </B>
<I> </I>
<U> </U>
|
The BOLD
Italic tag and
the Underline tags.
|
<TABLE CELLPADDING=1 CELLSPACING=1 BORDER=0 width=130>
<TR>
<TD>
Put your text in here.
</TD>
</TR>
</TABLE>
|
This is a table. They're a bit more complicated because you can get lost in them if you "nest" them (put one inside another). I use them a lot to arrange the look of my page but you can get along very well without them. Becareful not to use to many or it will slow down the page.
You're looking at a table as you read this. This short instruction guide is inside a table. I left the BORDER tag to "1". You can change this size for different affects.
The CELLSPACING on this table is set at 10 so the words don't crowd the lines.
CELLPADING moves the squares further apart.
Inside the TR and TD pair is where you put your text.
As you can see, TABLE's need to have closing tags. If you don't have them, or your tables aren't completed you'll peek at your page and find nothing on it. So if you refresh and your page is blank, check your tables.
|
<IMG ALIGN=LEFT border=0 HEIGHT=5 WIDTH=20 SRC="space10.gif">
|
This is the image tag. ALIGN tells the browser where to put the image compared to other code you have in your page. Height and Width are the demensions of the image and inside the quotes is the location and name of the image. If you have the image in another folder than the one that the htm page is stored you need to put the location here. Like SRC="images/space10.gif"
By the way, the "space10.gif" listed here is my small invisable spacer. It is 1 pixal by 1 pixel and it's transparent. I use this to place items on my pages that need different widths or lengths than the BR or other code can give me. I just change the WIDTH and LENGTH numbers to change the size of the spacer.
|
<A HREF="other.htm">Other Page</A>
<A HREF="digifotos.1afm.com/other.htm">Other Page at another location</A>
|
This is your link to other pages. The "other.htm" is the location of the page your linking to. If you're liking to another page that isn't with your page you'll put the location as in the second example.
You need to be sure to close this tag or you'll turn your entire page into one huge link.
|
<!-- ***** MAIN SECTION ***** -->
|
The !-- and _> tags are COMMENT tags. The browser won't display what is inside the two tags but they're nice to use to put little notes to yourself inside the code. I tell myself where my different sections are in the code so I can go to them quickly.
|
<center> </center>
|
This tag will center whatever you have after it. To close the tag and stop centering use the close tag </center>
|
<font size=-2></font>
|
Besides changing the color of fonts you can also change the size. You can go larger or smaller. The color and size tags are the only two font tags I use outside of the cascading style sheet. You need to close (or stop the font size) at the end.
|
|
|
ORDERED LISTS and UNORDERED LISTS
You will see these on one or two pages at this site. The Unordered list will give you bullet's. The Ordered list will give you numbers. You
By the way, the example to the left is a nested frame. It's a frame inside a frame. These can be mean ;)
|
Now I promised you a Cascading Style Sheet:
<HTML>
<STYLE TYPE="text/css">
P.main1 {font-family : Bookman Old Style, Sans Serif;
font-size : 20pt;
font-style : normal}
P.main2 {font-family : Script MT normal;
font-size : 8pt;
font-style : Italic}
a {text-decoration: none; font-family: arial; font-size: 11px; line-height: 13px; font-weight: normal}
a:hover {color: #ff0000; text-decoration: underline;}
</STYLE>
</HTML>
|
Cascading Style Sheets are saved as a seperate document and has the extension css.
This is much more complicated that what you really need and I use them mainly because of the last line. This line sets the overall look of the text on all my pages.
No text decoration.
General font family is arial. I like that font for reading.
General font size is 11, not too big and not too small.
Height and weight are average or normal.
When a visitors mouse moves over a linked text it specifies a color and decoration (underline) otherwise nothing happens to the text.
|
And there you have it. All the code I use on these pages. If you see anything else in my source code then it's not my code.
