I've written this page as a general introduction to HTML and how it works. This isn't a definitive page by any means. Just as a background, I have no real training in HTML. What I've learned I got from tutorials such as this and just by experimentation. It took me about a week of messing around before I was able to really build a web site, but with some work I'm sure someone could learn how to build a web site in a day. I plan on throwing in some links to various other help sites as well, so if this tutorial, or the other ones I'm posting, don't cover what you're looking for, perhaps you'll have more luck with one of those. Now to the HTML.
HTML stand for HyperText Markup Language, which is a scripting language. Basically, your browser (be it Internet Explorer, Netscape, Firefox, or something more esoteric) takes the raw HTML, processes the commands (or tags) and then displays the web page for you to navigate. These 'tags' are what makes HTML work, and getting a good grasp of common tags and how they work is instrumental in learning HTML.
What sets tags apart from any other text in an HTML document are the greater than and less than symbols. ALL tags are started by putting the less than symbol "<", and then closed with greater than ">". For instance, for the body tag, it would be <BODY>. The same holds true for all tags, including really long ones such as <AREA SHAPE=poly COORDS="2,375,16,186,36,18,50,186,64,375" HREF="..artart.html" ALT="" onmouseover="document['IN3'].src='topmid.jpg', document['IN4'].src='midmid.jpg'" onmouseout="document['IN3'].src='topmidmain.jpg', document['IN4'].src='midmidmain.jpg'">. This last example was taken from this web site, for anyone who cares.
Now that we have some background, we'll start actually building a web page. Every web page begins with one tag; <HTML>. This lets the browser know the web page is an HTML document. Immediately following that we have the <HEAD> tag, which defines that this part of the document is the header. To illustrate, the first two lines of an HTML document look like this;
<HTML>
<HEAD>
Ignoring style sheets and javascript, immediately following the <HEAD> tag you would put things like the title and meta names, which are used for search engines. Here's another example.>
<HTML>
<HEAD>
<TITLE> This is a test </TITLE>
The title puts the title at the top of your browser...for example, if you look at the top of your browser, you'll see the words "Basic HTML", followed by your browser's name, for instance Microsoft Internet Explorer. That is what's controlled by the title tag. Also if you'll notice, immediately following the text "this is a test" there's another tag, </TITLE>. </TITLE> closes the title tag. Everything between <TITLE> and </TITLE> is put at the top of the browser, everything after </TITLE> is treated as something else. the </TITLE> is called a closing tag. It closes the title area, letting your browser know the title is over. Most tags have closing tags, with a few exceptions.
Now that we've gotten to the title, the next step is to let the browser know that the header is over with. We do this by inserting the </HEAD> tag, like this.
<HTML>
<HEAD>
<TITLE> This is a test </TITLE>
</HEAD>
Now we're ready to start the actual body of the page. If you hadn't guessed, we need to let the browser know that we're starting the body of the page by using the <BODY> tag. Unlike the other tags we've dealt with, <BODY> can actually hold a couple variables, namely the colors of the background, the font, links, and visited links, as well as any background images you may want to add. For instance:
<HTML>
<HEAD>
<TITLE> This is a test </TITLE>
</HEAD>
<BODY BGCOLOR="black" VLINK="BLUE" TEXT="gray" LINK="RED" BACKGROUND="mybackground.jpg">
We'll go over that peice by peice now. The < open the tag, of course. BODY defines the tag as being a body tag. BGCOLOR is background color. VLINK is visited link. TEXT is the color of the text. LINK is the color of (unvisited) links. BACKGROUND is any image you want to set as your background image. And that basically covers all the basic parts of the BODY tag. Assuming you're not totally lost at this point, you're doing great.
This is the point where you begin to write the actual meat of the page. The previous portion was pretty much set in stone, but at this point you can do what you want to do. As such, it's kind of hard to go into detail as to what to do next. I'll quickly review some tags and how to use them.
This whole tutorial assumes you're brand new to HTML, so just to make sure, at this point in time you can just type text and it shows up normally. Anything you type will show up as a continual line of text that word wraps. If you're looking to cause a line break in order to go to the next paragraph or what-not, the command is <BR>. This is one of those tags that doesn't have an accompanying closing tag, so all you need is <BR>. You can also put several in a row, in case you want to space down a couple. This is a great way to separate a banner from the text on a page, for example.
The next tag we'll go over is the <H> tag. What that does is just change the size of the font you're using. For example, <H1> is the largest font available, and <H6> is the smallest. You can use this command to make headings a different size from text, for example. This tag does have a closing, so if you open with <H2> you need to let the browser know you're done by using </H2> after whatever it is you're trying to make bigger. For example, <H2> Heading </H2>. In this case, "Heading" will be at a size of 2, everything after will be at whatever your default is. Additional tags for text are <B> for bold, <I> for itallics, and <U> for underline.
That covers basic text manipulation. Next we'll jump into something a little more interesting. Now I'll show you how to throw an image into an HTML document. Without images, the web wouldn't be the web. The tag for displaying images is <img src="whatever">.
If you have a jpeg file called MyPic.jpg, for instance, it would be <img src="MyPic.jpg">. In this exame, the jpeg is in the same directory as your html file. If you want to put it in a subdirectory called images, let's say, the tag would read <img src="images/MyPic.jpg">. That's basically how you add an image to an HTML document. Additionally, to help speed the load of the page, or to dynamically resize the picture, you can add height and width attributes. An example would be <img src="images/MyPic.jog" height="100" width="100">. This would make the picture fill a 100pixel by 100pixel space on your webpage. Even if the picture is not originally those dimensions, it will resize it to that, possible resulting in a pretty skewed looking image. Realize also that images retain their size regardless of what you resize them to. If you had a 300KB file, it would still take someone the same amount of time to download the image if you set it to 10x10 or 1000x1000. For those people in this world who still dialup to the internet, that's a considerable size, so when adding images and such, keep that in mind. All that is more a matter of HTML styling, and I'm more interested in the actual code, so if you have questions I recommend referring to another web site.
The final portion of this web site will refer to making links. What web site would be complete without links? The basic tag goes something like this; <A href="http:clankiller.com"> link </a>. In the preceding example, all you would see is the word "link", which is clickable and would take you to http:clankiller.com. Simple enough? The important thing to recognize here is the A, which MUST be closed with a </a>. If you forget to close that tag, the entire page will become a huge link. That's why closing tags is quite important.
Now that we've covered the basic HTML tag, you should know that anything you want could be in between the <A href="whatever"> and the </a>. That includes entire sentences, as well as images and anything else you could put in there. For instance, by putting in <A href="http:clankiller.com"> and then <img src="MyPic.jpg></a> you would make the picture MyPic.jpg clickable, as well as any text. And that's the fun of the href command. That pretty much wraps it up for this tutorial. Like I said, really basic stuff.
The only thing I'd like to mention is, at the bottom of your html document, don't forget to close the <HTML> and <BODY> tags. For more specific or advanced stuff, check out whatever other tutorials I may have posted.
Finally, below is an example of a complete HTML document.
<HTML>
<HEAD>
<TITLE> This is the end </TITLE>
</HEAD>
<BODY BGCOLOR="Black" TEXT="white" LINK="white" VLINK="white">
<BR><BR><BR>
Hi. My name is Satis. This is a web page. A really basic, beginner web page, but a web page none-theless.<BR>
<BR>
<I>This is italics</I><BR>
<b>This is bold</b><br>
<u>this is underlined</u><br>
<font color=red> and this is red </font><br>
<H1>this is HUGE</H1>
<H6>this is small</H6>
and I'm running out of stuff to give examples of. To see my page go <a href="http:clankiller.com">here</a>.
There's alot more that can be done in html, like imbedding images, of course.
<img src="../../visionary1.jpg"> Or even making them links<br>
<a href="http:clankiller.com"><img src="../../visionary1.jpg"></a>.<BR>
and I'm done.
</BODY>
</HTML>
That wraps it up for this tutorial. Go to my technical guides for some more stuff.
Basic HTML
6 Jun 2006 @ 01:11PM
Updated: 14 Jan 2010 @ 08:03AM
Comments (0)