HTML Tutorial 1 - Basic Structure



Welcome to the first HTML tutorial and info sheet. This will be a series for new scripters and hopefully help you to create your own Fan Site

This series is in quite strict order and a very lenient learning curve so I'd recommend skipping a few if you have a bit of familiarity

The first thing that you'll learn is the basic structure.

These are tags: <I>, <B>, <A HREF=www.com>, <IMG SRC=image.jpg>

Each tag has a < and a > around them. For tags that have boundries: say if you were doing Italics, you would write <I>Italic text here. But how would you cancel the italics? If you couldn't do that the whole page would go onto Italics Although it'd be funny, it'd also be quite impractical. Instead, you do the cancelling tag, which is exactly the same but with </ instead of <.

One thing to point out is that HTML isn't case sensitive, although I like to use all upper case as it stands out more. <i> is perfectly acceptible as well.

Now, the first two tags that you will learn is

<HTML> NEW
</HTML> NEW

Now the meanings of these are pretty obvious. <HTML> is the start of where you can put HTML tags </HTML> as I said before, cancels that one out. You put these at the start and end of each and every HTML document, otherwise some browsers won't show it, although most modern ones do. Old versions of Netscape and Mozilla are the hardest hit in that point. Don't be intimidated by these - it'll become second nature to put them in as you become better with the syntax. Now we put in the head and body of this little page. Currently the page still shows up nothing, but we'll get to that soon enough

<HTML>
<HEAD> NEW

</HEAD> NEW
<BODY> NEW

</BODY> NEW
</HTML>

Now these new tags are the head and body of the page. The head is what the browser looks at first and is at the top of the page before the body. In the head goes things like the title (which shows up the top of this page) and who wrote it and what the description of the page is etc. All of the HTML which isn't actually shown and has little or no effects You don't actually need to put the head in if you don't want a title of the page - if you don't the top of the page on the task bar would look blank. The Body is where you put the HTML that is actually shown. Lets put some text in then!

<HTML>
<HEAD>

</HEAD>
<BODY>
This is new text that I just put in
</BODY>
</HTML>

Now put that in notepad and save it as a .html file and you'll just see a white page that says "This is new text that I just put in". Easy so far? Lets now put a title and make the text in italics.

<HTML>
<HEAD>
<TITLE>This is a really good page</TITLE>
</HEAD>
<BODY>
<I>This is new text that I just put in</I> NEW
</BODY>
</HTML>

Now load it up! See up the top how it says "This is a really good page"? That's a title - it's what shows up on the taskbar. You can also see that the text is in italics. It's just like a word processor. In a word processor, you click the Italics button when you want to start Italics, and you click it again when you want to finish. Here, instead of clicking a button, you just type in <I> and to end it you type in </I>. I don't think it gets much easier than that OK maybe pressing a button is a little easier, but that's not the point

Next we'll go in a tiny bit deeper. We'll learn about more basic formatting and then some more advanced stuff It doesn't get too much harder than this, I can assure you!

Tags you should now know:

<HTML></HTML>
<HEAD></HEAD>
<BODY></BODY>
<TITLE></TITLE>


© Copyright Matthew Strahan
BlueByte, Settlers, Ubisoft are registered trademarks of Ubisoft Entertainment
DO NOT DISTRIBUTE COMMERCIALLY