Alright, this page is devoted to HTML, or in techie terms, Hyper Text Markup Language. First thing you need to understand about HTML is that it isn't like a normal computer language. It doesn't use binary digits or anything like that. HTML is more of a text document with little codes all over the place. You don't need any fancy Web Page Editor that does all of the work for you. All you really need is Notepad. Yeah, that program most likely in your accessories file that you never use. The only thing I would reccomend for you to buy is a graphic formatter unless you have the option of exporting images to different file extensions because web pages accept mainly GIF and JPEG image files. Okay, I know you're thinking what's the point of doing all the work yourself? Well, it's a lot more satisfying knowing that it's your work and not somebody else's.
You can copy and paste the codes I provided, but just remember that you should at least attempt to learn HTML because it's no fun copy and pasting. At the bottom of this page, I provided a ready to use HTML code you can copy and paste that will set the page up for you. And do not copy the codes by right clicking on this page and going to View Source because I had to use special HTML code to display the < and >
Back To The Top
I organized all of this into categories so if there's something you don't find here, e-mail me what it is you need to know.
Document Structure
<HTML> </HTML> - Tells the browser when the HTML document begins and where it ends. Everything goes in between these two codes - everything!
<HEAD> </HEAD> - Displays a heading. The words will appear in a heading form and will be larger than the rest. Place the words that you want to appear in between the <HEAD and </HEAD> The title code goes in between the heading codes also. More on this in the tutorials.
<TITLE> </TITLE> - The title will appear at the top bar of the browser and not on the page itself. Place what you want the title to be in between the <TITLE> and </TITLE>
<BODY> </BODY> - The main part of the document - the content. Images, text, and lots more go here.
<ISINDEX> - Indicates the document supports CGI scripts for searches.
<META> - Defines information about the page hidden in the document, in other words the person viewing the page cannot see it. Spiders (search engines that use keywords to index a site) look for this tag. Go to the HTML document example on this page for more on this.
Back To The Top
Links
<A> </A> - This is an anchor tag which is used after the link code is done so that the browser doesn't combine two links together.
<APPLET> </APPLET> - Calls on a Java Applet
<PARAM> - Sets the parameters for a Java Applet.
<OBJECT> </OBJECT> - inserts a non hyper text transfer protocol object in HTML document.
<SCRIPT> </SCRIPT> - inserts a Java Script into a document.
Back To The Top
Page Appearance and Elements
<BR> - inserts a line break. In other words, if you put a line break in after text, it will start a new line. Below is an example.
Look below.
Notice how there are now two lines of text?
<HR> - inserts a horizontal rule. A horizontal rule is a line. You acn also adjust its size - below is an example.
<P> - Formats page for a new paragraph. Doesn't need an anchor tag, just use it to start new paragraphs. If I set the <p> tag up below, watch what it does.
The <p> was used to start this new paragraph.
<BASEFONT> - Sets the default font size. Although it's not often used, it comes in pretty handy.
<FONT> </FONT> - Defines the color of the text being displayed and the size. For example, if you wanted red text, here is the code below and an example.
I'm red text Not anymore.
Here's the code for making that red text.
<font color="FF0000">I'm red text</font> Not anymore.
<BLOCKQUOTE> - Sets off quotes that you insert.
<PRE> </PRE> - Monospaced font effect
<CENTER> </CENTER> - Centers text across page.
<DIV> - marks a division in a page to apply styles.
<BUTTON> </BUTTON> - includes a graphical button with HTML inside of it.
Back To The Top
Inline Image Codes
<img> - inserts a image, but must have a source of the image such as a URL, et cetera.
<MAP> - client side image map parameters.
<AREA> - helps define the clickable areas in a image map.
Back To The Top
Heading Levels
<H1> </H1> - First level Heading (largest)
<H2> </H2> - Second level Heading (second-largest)
<H3> </H3> - Third level Heading (third-largest)
<H4> </H4> - Fourth level Heading (fourth-largest)
<H5> </H5> - Fifth level Heading (fifth-largest)
<H6> <>H6> - Sixth level Heading (sixth largest)
Back To The Top
Methods/Levels
<DIR> </DIR> - Defines an unbulleted list
<OL> </OL> - Ordered List
<UL> <>UL> - Unordered list
<LI> - list item
<MENU> </MENU> - Defines a pickable list of items/elements
<DL> </DL> - glossary list and defines the items in special format
<DT> <>DT> - definition term
<DD> - marks definition for one of the terms in the glossary
Back To The Top
Tables
<TABLE> </TABLE> - tells when a table begins and ends
<CAPTION> </CAPTION> - Used to make a table caption
<TH> </TH> - defines a column header
<COLGROUP> </COLGROUP> - defines a group of columns
<COL> - Column
<THEAD> - Tables Head
<TBODY> - Table Body
<TFOOT> - Table Footer
<TR> - Table Row
<TD> - Table Data
Back To The Top
Form Tags
<FORM> </FORM> - Marks beginning and end of form
<INPUT> - Input Tag
<TEXTAREA> </TEXTAREA> - Text area
<SELECT> </SELECT> - Creates a scrolling/menu list
<OPTION> - Selectable item
<LABEL> </LABEL> - Associates a label with a control item
<FIELDSET> </FIELDSET> - Field Set
Back To The Top
Text Attributes
<B> </B> - Bold Type
<BIG> </BIG> - Big Text
<CITE> </CITE> - Citation
<CODE> </CODE> - Code font
<DFN> </DFN> - Defines Text
<EM> </EM> - Emphasises Text
<I> </I> - Italics
<KBD> </KBD> - Keyboard Text
<S> </S> - Strike Through
<SAMP> </SAMP> - Sample Text
<SMALL> <SMALL> - Small Text
<STRONG> </STRONG> - Emphasis on Text
<SUB> </SUB> - Subscript - renders text
<SUP> </SUP> - Superscript
<TT> </TT> - Typewriter Text
<U> </U> - Underlines Text
<VAR> </VAR> - Variable
Back To The Top
Yikes, okay, I know some of the stuff above looks really confusing. And you're probably considering giveing up this whole web page idea. Or you might be considering going out and buying a web page editor. It's not like I'm against HTML editors, it's just that I've downloaded them and I've seen how they can mess up a web page or how they're never up to date. I like doing web pages code by code. Try a basic web page by yourself, and if you just can't understand it, then go out and buy a HTML editor or get a shareware copy.
HTML Document Example
All web pages start out like this (note that sometimes web pages begin with a doctype and then the specification of the html version the page was made with, but don't worry about that because it's ancient internet history). So back to what I was saying, all html documents begin like this:
<html>
and end like this
</html>
You see that little slash in front of the second html thingy? Well that helps to anchor the document so the browser knows when to stop reading the file. Everything goes in between those two codes so be sure never to forget them.
Then you have the heading with this code:
<head>
Now, that just began the heading code. You have to put a heading in there by just giving it a name such as Crazy G's Links Page.
So here is what your page code looks like so far:
<html>
<head>
Crazy G's Link Page </head>
</html>
Alright, now for the title (the title doesn't show up on the page itself, it shows up on the top taskbar of the browser). The title should be inserted before </head> Okay, so here's how your page code looks like so far with the title code inserted in it.
<html>
<head>
<title>Crazy G's Link Page </title>
Crazy G's Link Page </head>
</html>
Note that whether the HTML coding is in caps or lower case, it has no relevance. Before jumping into the body tags and font faces, sizes, et cetera, you need to know what a meta tag is. A meta tag is where you insert keywords and a summary about your page. The meta tag is read by spiders and robots (these are two types of search engines that send a "spider" through the contents of your page and pull out keywords). If you want a better chance of being placed in the better percentage class or results, then you should use meta tags. And don't worry, the client (person that's viewing your page) cannot see the meta tags. It's like a comment tag (more on comment tags later, don't worry about them right now). Here's what a meta tag looks like:
<META NAME="description" CONTENT="short summary of your page goes here.">
<META NAME="keywords" CONTENT="keywords related to your page here">
The meta tag should go in between <head> and </head>
In the html document you should have a
<body> tag.
In the body tag you inset codes to play videos (avi format usually), music, pictures, links, and more! But don't forget that you have to anchor the body tag by doing this:
</body>
Okay, so you're ready to insert the links. Here's how you would do that:
<a href="address link">title of place you're linking to</a>
Ready for something a little harder. Let's turn that boring text link into a graphic link, in other words, when someone clicks on the graphic, it will take them to the link address (oftern referred to as URL) specified. Here's the code for a linking graphic:
<a href="address link">
<img src="the name of the file you want to be a
link which would be the location of the image"></a>
Did you notice how there was a </a> at the end of the image link code? Well that is another anchor tags. This tells the browser when to stop reading the image code.
So let's review how your html document is going to look like so far:
<html>
<head>
<title>Crazy G's Link Page </title>
<META NAME="description" CONTENT="short summary of your page goes here.">
<META NAME="keywords" CONTENT="keywords related to your page here">
</head>
<body>
<a href="address link">
<a href="address link">
<a href="address link">
<a href="address link">
<img src="the name of the file you want to be a
link"></a>
</html>
Back To The Top
Okay, so by now you should understand how to set up your HTML document. Well, now are you ready for some harder things? Here goes.
Codes for Text or Background Colors
If you use this Value you Get this Color
#000000 Black
#FFFFFF White
#FF0000 Red
#00FF00 Green
#0000FF Blue
#FF00FF Magenta
#00FFFF Cyan
#FFFF00 Yellow
Back To The Top
Those above codes can chance the text color, link color, background color, et cetera. Take a look at my HTML source. You can do this by right clicking with your mouse and then dragging your cursor to View Source. That way you should get a good idea of how I set this document up.
Extra Codes
How to make a marquee? Note that marquees are only available in MSIE and not Netscape.
<marquee>text you want would go here</marquee>
How to add a line for organizing the appearance of your page
<hr>
How to make a basic table?
<table border>
<tr>
<td colspan=1>your text</td>
</tr>
</table>
How to add a line with color? Note that this is an MSIE deal only.
<hr color="your color">
How about making images next to each other?
<img src="your image"><img src="your image">
How to make an e-mail link so people can contact you
<a href="mailto:your email address">your text</a>
How to make an email link into a picture?
< a href="mailto:your email address"><img src="your image"></a>
How to make music play on your page? Note that this is the Microsoft code.
<bgsound="your midi" loop=infinite
>
If you want to change the width of a line use the following code.
<hr size=your size width="your width">
Want to make a input box with the text in a different color? (requires a more advanced browser)
<input type="text" style="color:red" value="Hello">
World Population code and Money in US.
<img align=middle
SRC=http://sunsite.unc.edu/lunarbin/pop.gif>
<img src="http://www.brillig.com/debt_clock/debtc.gif"Width=150
Height=16>
Add a download.
<a href="the file name.zip">DOWNLOAD IT
</a>
Code For Clipart Icon
<center><A
HREF="http://www.ist.net/clipart/">
<IMG
SRC="http://www.ist.net/clipart/cac01.gif"></A></CENTER>
Code for a clock
<center><img
src="http://tycho.usno.navy.mil/cgi-bin/xbmclock.xbm?zone=EST"></center>
Code for missing Kids
<A
HREF="http://www.missingkids.org/hysm/hysm.map">
<img src="http://www.missingkids.org/hysm/hysm.gif"
ISMAP></a>
To get a alert box to pop up when someone enters your page (note that this is more of a javascript)
<SCRIPT>alert("your text goes
here.")</SCRIPT>
A link to get to the top of your page. Make sure you name the top of your page first with the code <a name="#TOP">
<a href="#TOP">TOP of my page</a>
HML clock code
<img
src="http://tycho.usno.navy.mil/cgi-bin/xbmclock.xbm?zone=EST"
height=35 width=85>
How to go to a different part of the same page
<center>
<A HREF="#codname">What you want the link to
say</A></center>
<A NAME="codename">(put this were you want the
link to go)
Fill in codename with right, middle, left, whatever you want.
Need to display an HTML tag on your page using the < and > tags? You're probably tired of using that & and gt and It and ; . So even better, try out this new tag I discovered. The <plaintext> tag which makes everything in between that tag and the </plaintext> appear just as you type it.
Back To The Top
There's a lot more to html - a lot! And since this page is not completely finished, I provided the HTML GOODIES link. Just click on it and it will take you to tutorials, free images, and more! You can even learn javascripts, etc. And if you think there's a HTML tag that I missed, E-Mail me and tell me and I'll be sure to post it right away.
