I want to thank you for taking the time to visit me.
In this website you will learn all the basics needed to
create your own webpage. These pages will continue to evolve so
keep checking back.
I hope you enjoy your visit here, and if you like my pages, bookmark
them for future visits. I also invite you to visit my other 4
websites while you're here. You will find everything you need in
the directory listed below.
Please choose from the table below to go wherever you would like.
What Is HTML?
HTML stands for "Hypertext Markup Language". It is made up of codes which are inserted in a document to control the way the document is displayed by a "web browser", (such as Netscape Navigator/Communicator or Microsoft Internet Explorer). If your browser has a "view source" feature, you can see what this web page looks like with the codes showing. In Netscape, select VIEW, then select SOURCE.
An HTML document must have the proper form from start to finish, so that it will be recognized and read properly by your browser's software. Here is an example of the basic form you should use:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
main_part_of_document_goes_here
</BODY>
</HTML>You'll notice two things here. Opening codes are enclosed in brackets < >, and closing codes include a slash </ >.
An HTML document is opened by <HTML> and closed by </HTML>. It's very important to close all of your tags. (Otherwise you will have one huge mess.) I feel it is also easier to read HTML code if you put your code in capital letters (such as you'll see in my HTML code).
I feel the best way to learn how to use HTML is to use it. I taught myself HTML by looking at the source codes for different websites I surfed. When I saw something I thought looked interesting I would copy the HTML from the source code, then insert it that code into my document. Once I had the code in my document I would alter the code until it served my purpose.
Add Color To Your Page
Colors, background images, are some of the items that are controlled by the <BODY> You can control the color of the background, text, and links in your home page by using the <BODY> tag. To control the various colors on your page, the <BODY> tag is written like this :
<BODY BGCOLOR="#xxxxxx" TEXT="#xxxxxx" LINK="#xxxxxx" VLINK="#xxxxxx" ALINK="#xxxxxx">
You can include any of the items (bgcolor, text, link, vlink or alink), or leave any one of them out. To set the color of the background (bgcolor), text, link, visited link (vlink), or active link (alink), substitute a color value for the xxxxxx in the sample above. Remember not make them all the same color, or you won't be able to see anything on your page.
Here are a few examples of color values that you can use:
White = FFFFFF Yellow = FFFF66 Red = FF0000 Grey = CC9999 Blue = 0000FF Green = 00FF00 Black = 000000 Purple = CC33FF Lt. Blue = 00CCFF These values represent the hexidecimal value of the red/green/blue combination that makes up the color. Ok, at this point you're asking what is a hexidecimal (hex) value? In short this means the six numbers and/or letters that make up a color code for HTML (example: "#345edc"). When you see a color you like on another home page (or in my free border collection), you can use the "view source" feature of your browser to see the code for that color.
If you have the red/blue/green values and would like to turn them into hex values, use the following method (a calculator, and a piece of paper WILL come in handy for this). Each hex value is made up of the numbers 1- 9 and the letters a - f, they are always made up of six numbers and/or letters. The following table gives you an example of the numbers and their equivalent values. (you might want to copy this table this on a note pad for future use)
1 2 3 4 5 6 7 8 9 10=A 11=B 12=C 13=D 14=E 15=E The formula for changing the r/b/g values into the hex value is this:
Say you have a red value of 123.
Divide 123 by 16. (123 / 16 = 7.6875) The first numbers you come up with will be 7.6875. The number before the decimal (7) will be the first part in your hex code.
Next subtract the number before the decimal (in this case 7) by 16. (7 - 16 = 0.6875)
Now multiply 0.6875 by 16.
(0.6875 x 16 = 11) We see in the table that 11 = B. Therefore B is the second part of your hex code.You now have the first part of the hex value. 7 being the first one and B being the second one. (7B) Contine the same formula for the blue value and the green value. If you started out with this number:
Red = 123 Blue = 235 Green = 63 the hexidecimal code for those values will be "#7beb3f"
Is your mind mush yet? No? Ok, how about some more then. Since we've covered how to make a hex value out of a r/b/g value, how about we cover making a r/b/g value out of a hex value. One way this comes in handy is when you see a color on a website shown in hex code and you would like to use that color in Paint Shop Pro, or another painting program.
We will be using the hex code "#7beb3f" as our example. Our first step will be to take it apart the way it was put together, in two's.
The first number in our code is 7, we will multiply this number by 16 (7 x 16 = 112). The next piece of the code is the letter B, since we can see on the chart that B = 11 we will be using 11 as our next number.
Add 11 to the 112 we found the first part of the red value to be (11 + 112 = 123) This will result in the answer 123. If you will remember, 123 was the red value we started out with. Continue this same process with the other remaining numbers and/or letters. When you have completed this formula you will end up with the r/b/g values we used to make into a hex value.
Go to index.
Add Background Images
To add background images instead of background colors, you need to use the attribute BACKGROUND in the BODY tag instead of BGCOLOR. For example, if you wanted to use an image named "Misty.gif" for your background, the tag would look something like this:
<BODY BACKGROUND="Misty.gif" TEXT="#000000" LINK="#0066CC VLINK="#336600"> REMEMBER: in the example above, the image must be located in your own directory. If it's located somewhere else, you'll need to give the entire path in order for it work successfully. Remember also that if you are linking that image to someone's page you run the risk of doing three things.
- When the owner of that page deletes that specific image, you end up with nothing.
- Taking images without written permission from the owner is a violation of that person's copyright and is punishable by law.
- Linking to images without the written permision of the owner is considered stealing bandwidth.
Create Horzontal Lines
You can insert a horizontal line (also known as a horizontal rule) in your document by inserting a <HR> tag. The line is full width, thin, and shaded, like this:
Changes to this tag allow you to control the appearance of the line. By adding SIZE=NUMBER, you can control the thickness. By adding ALIGN=LEFT or RIGHT or CENTER you can control the alignment. The width of the line can be adjusted by adding WIDTH=PERCENT. A black line can be created by adding NOSHADE.
Combining these changes,
<HR SIZE=10 ALIGN=LEFT NOSHADE WIDTH=50%> will produce a thick black line at the left margin, half page width.
Note: The "fancy" lines or bars used on many web pages are not produced by the <HR> tag. They are graphic images and are covered in the section Add Graphics. The bars on this page are an example of a graphic image.
Create Bullets
You can create bullet lists by using the <ul> (unordered list) tag. The format is:
<UL>
<LI>item one
<LI>item two
<LI>item three
</UL>The list will look like this:
- item one
- item two
- item three
Create Numbered Lists
You can create numbered lists by using the <OL> (ordered list) tag. The format is:
<OL>
<LI>item one
<LI>item two
<LI>item three
</OL>The list will look like this:
- item one
- item two
- item three
Centering Text
You can cause text to be centered by enclosing it in <CENTER> tags.
This line:
| <CENTER> This is a test </CENTER> |
will appear like this:This is a test
This is usefull for small bodies of text (no more than 5 - 7 words). But, if you want to center large bodies of text (more than one medium sized line) I recommend using <BLOCKQUOTE>. Just remember when using blockquote to finish it off with the closing tag </BLOCKQUOTE>: All the text on this page is an example of what blockquote will look like.
Bold & Italics
You can make text bold or italicised by enclosing it in tags for those attributes.
<B> Bold text </B> will appear as:
Bold text
<I> Italic text </I> will appear as:
Italic text
<B><I> Bold and italic text </I></B> will appear as:
Bold and italic text
Remember It is very important that you close the tags in the same order that you opened them. In other words, in the last example, it was important that I closed the "Italics" tag before I closed the "Bold" tag (put the </I> before the </B>).
Paragraph & Line Breaks
Web browsers do not respect the way you have formatted your text. They ignore carriage returns and line feeds. Unless given specific instruction, your text will be fitted to the line length of the browser.
Inserting a <BR> tag will cause the current line to end and a new one to start. Inserting a <P> tag will cause the current line to end, a blank line to be inserted, and a new line to start.
Well, there you have it, all the basics needed to create your own webpage. I hope this has been some help to you beginners, and possibly a refresher to old timers with short memories (like mine..lol) I will be adding some tutorials on making your own graphics in the very near future. I will attempt to teach you how to make your own bars, buttons, and backgrounds. If you have any suggestions as to other things you might like to see me attempt to teach, send me an e-mail with your suggestion.
© 1997, 1998 Misty's Magical Designs, All Rights Reserved,
written permission needed to use all or part of
anything on this page.