Make your own free website on Tripod.com

Before we start, go to "View" (in internet explorer) and make sure that "Status Bar" has a check mark next to it. You will see a small strip appear at the bottom of your browser. This is a way to see where word links will take you before you click on them (by holding your mouse over the word link without clicking). Hold your mouse over this link. You should see the address http://noonatics.tripod.com appear on the bottom of your browser.

"Font" means the text, or style of text.

"Tag" is the html codes you see in brackets.

HTML is just a simple code, or command, used to tell the computer what you want to do with a webpage. You are basically "hacking" into the code that makes up the web page and altering its contents. Practice while you learn! Try out the HTML at our HTML Test Area!

If you're searching for something in particular, look at the list of underlined words on the left.

Below, you will see a box with the HTML in it. This is so you can simply copy&paste it into your forum message, erase the "your words here", "your address here" or "image address here" part of it, and replace it with your own words. We leave the picture-sample above the boxes in case you've accidentally erased a bit of the html in the box.

Learn: Word manipulation

bold words

sample: bold

how to remember this code: B is for Bold

italic (slanted) words

sample: italics

how to remember this code: i is for Italic

underline words

sample: underline

how to remember this code: U is for Underline

change font color

sample: my words are green!

how to remember this code: "font color" is easy to remember, and the end code of /font is just a copy of the first word in the "font color" area of this code.

NOTE: for more colors, click here

change font size

sample: Pick a number and put it where the 4 is in the code.

how to remember this code: like with the "font color" code, "font size" carries the same idea. the end code of /font is just a copy of the first word in the "font size" area of this code.

Font Sizes: 1 2 3 4 5 6 7

change color and font size (together)

sample: This is how you combine two tags for font size and color.

how to remember this code: here you are combining two codes into one. In this code, I told the computer the "color" first and the "size" second, but your could also tell it the "size" first and the "color" second if you wish to.

change font

sample: arial - comic sans ms - courier - fixed sys - verdana - wingdings(wingdings)

how to remember this code: In the code above, switch the word "courier" with the font style you want. The "face" in "font face" is another word for "appearance" or "style". You are able to put the face="courier" in with the other font codes too, so that it makes one long chain, like...

font face="courier" size="4" color="green"

that command would make your font look like this

word link

sample: This makes a word link

how to remember this code: To put it simply, "a href" means "a html reference", which means that it's going to dig up a reference from html (a website address) if you click on the highlighted words. And just like the Font tags ending in /font, this one also ends with the same word it starts with, /a.

email link

sample: your@emailhere.com

how to remember this code: You've already learned the "a href" bit of it, the only difference between a normal html link and a link to an email, is the command "mailto:". This command makes it so that if you click on it, your Outlook Express program pops up (or if you don't have an email program, the website where you find your inbox pops up instead).

Note: in the picture, the red parts are the tag, the black part is where your email address goes. You could also make this a word link by taking out the SECOND email address which is between the two tags, and type in email me! instead.

Sample: email me!

marquee words

sample: My words are moving across the screen!

how to remember this code: It makes the text move from one side of the screen to the other as if they were on a marquee in Vegas. It's good for grabbing attention or for telling people the latest updates on your website.

blinking words

sample: I'm blinkin'!

how to remember this code: It blinks and has "blink" in the tag. Simple, really. This code was brought to you by Dawn :)

center your words in the message

sample: this is centered

how to remember this code: you want your words in the center of the webpage instead of off to the left like usual, so you use this tag!


Learn: Photo manipulation

put up a picture/photo

how to remember this code: "img src" is shorthand for "image source". That command tells your computer that it's a picture or photo its posting up. Notice that there isn't an end-tag like "/a" or "/font" to this one.

NOTE: Images must be located at a hosted website in order to work correctly. This means it must already be online and the picture has to have be at a site with a www.addresshere.com or .net or .org or .gov, etc. Places like www.hermanshermits.com, www.noonatics.com, and www.peternoone.com you will be able to copy the address of the image and paste it where it says "image address here".

make a picture "clickable"- lead you to a website

how to remember this code: combining two different tags! As if the picture was text, the HTML-link tag surrounds the Image tag just like it would if you were making a word link.

small picture that will enlarge the picture when clicked

how to remember this code: Wow, this is a fun one. Don't get overwhelmed! All you have to do is break it up and you'll understand. This code shows the HTML-link tag and the Image tag (like the "clickable picture" code), but what makes this one different is that this code is being more specific. The Image tag is giving the command to change the height and width of the picture to make it smaller.

NOTE: Replace the numbers of the height and width with the size (in pixels) that you want the picture shrunk to. 66x70 is the exact size that you see the Peter picture above shrunk to.

make a border around your picture

1 2 5

how to remember this code: Once again, we are getting more specific with what we want the picture to have. This one creates a thin black line around the border of the picture. The border number is shown above beside the pictures so you can see the change. As you can see, the higher the numbers go, the fatter the line gets, doubling in size every time the number goes higher. You can use the border command with the height and width command if you wish.

NOTE: The sizes go from 1 to infinity, but I suggest you dont give any pictures a border size of 2,010. The border color changes for link pictures, to the color that you see for word links on that page. Put the size number where the "1" is.

Learn: The use of HTML Code

In the boxes are an example of html code being used. What you see in blue right now is what was translated into html code.

If choosing to do the "unorganized" version, you just type the HTML as your typing your paragraphs.

The "organised" version (shown below) is when you type it out so it looks like a list. This separates the codes from the paragraphs so that it looks more like a normal paragraph with the tags separating the paragraphs. If all three paragraphs will have the same font face, you simply put the font face="verdana" at the beginning, write all your paragraphs, and then stick the /font when you're finished. Use the little scroll bars to scroll down and across to view all of the text.

Either way works, so do what is best for you.

Have I missed something you want to learn? Send it to tigby_noone@yahoo.com