This tutorial was written for PCs, not Macs, so Mac users, the section on creating an HTML document will be different. Just open your basic text editor, the equivalent of Notepad on PCs, and make sure you save the file with a .htm or .html extension. Now, onward to the rest of the tutorial...
HTML is the language that most Web sites today are built with. HTML isn't the most versatile of langauges, but it is by far the easiest (in my opinion). First off, I will use some terms in the following few pages that may be unfamiliar with. I will define them now, so I don't have to waste space later. Here they are:
Creating an HTML document
To create an HTML document, open a folder where you want to store it. Choose 'file' - 'new' - 'text document'. Name it what you want, usually without capital letters, adding a '.html' extension after the name. If that doesn't work, open it, and choose 'file' - 'save as'. Then name it what you want, adding the '.html' extension at the end. To open it, double-click it and let it load into the browser. To modify it, choose 'view' - 'source'. It should open up in a Notepad, or a similar word processing program, unless you have a special HTML editor, such as Dreamweaver® or Frontpage®. Then just type the HTML code that will create your Web site, and save it.
Required Tags
The first and foremost tag should usually be <HTML>. It tells the browser that the following will be HTML and that it should interpret it as so. It requires a closing tag, </HTML>. All the code for your Web site should be enclosed between these two tags.
Usually the second tag of most sites is <HEAD>. This is where much of the optional script is located. The <TITLE> tag is required to be within the <HEAD> and </HEAD> tags. <TITLE> is a tag that tells the browser what to display in the title bar (that blue bar at the top of your screen). Between the <HEAD> and </HEAD> tags is where you should put most of your JavaScript for your site.
Another required tag is <BODY>. <BODY> usually has many attributes. With this tag you can define a background color or image, the color of your text, the width and height of margins on your browser, the color of you links, and what happens when the page is loaded/un-loaded (the person left). As you can see, this is a very important tag to have in your document. It requires </BODY> as a closing tag, so don't leave it out of your document. Just add the rest of you HTML code that you want to be seen in the main part of the browser between those two tags.
That's about it for the required tags, so I'll give you an example as to what you could have added into your document:
<HTML>
<HEAD><TITLE>Hackers of Heaven: the most informative site on the Web</TITLE>
</HEAD>
<BODY>
Hackers of Heaven is the most informative site on the Web!
</BODY>
</HTML>
Analysis:
Click here to see what your browser would display. Not very exciting, huh? It is what we like to call static. Static means that it is doesn't invlove user interaction; it's just plain old HTML. As you can see, what was written betweed the <TITLE> and </TITLE> tags is displayed in the blue title bar. What was written betweend the <BODY> and </BODY> tags was written in the main part of the the window. As you can see, the default font and color is times new roman (helvetica in Mac's), black. It also aligns every thing left. Text wraps on it's own, and your browser will only put 1 space between all words and punctuation.
Text Control Tags
So you wanna change the color of text, the size of the text, the font style, or the font name? All you have to do is use the <FONT> tag. It has many attributes including face, size, and color. Color simply changes the color of your text between the <FONT color="red"> and the </FONT> tags. That would change the color to red. Replace red with any color, or you can use a the hexadecimal version of the color. Hexadecimal is a commonly used number system in computer languages (numbers 0-9, letters A-F, used in any order), along with binary (can't do colors in binary). Red, in this case, would be #FF0000. Since black is the absence of color, and white is filled with color, the order of the numbers and letters will be #000000 (black) to #FFFFFF (white). When you hex colors, you put can divide them into three parts: red, green, and blue. Each part consists of two characters, whether they be letters, numbers, or both. They go in the order red, green, blue. Hexidecimal is a
confusing system at first, so if you have trouble don't worry, your colors can be written as words and most browsers will interpret it just fine. Click here to see a hexidecimal color chart.
Top | Next >>
Basic Information
