Tutorial:Basic HTML
Well, I'm back with another tutorial. This tutorial I think will be a bit more challenging to write than my previous two, because the concept is different and there's so much more information. This tutorial is designed to cover the basics of html and enable you to create a simple and efficient webpage.

First off, let me explain the difference between webpage and website. Many people use these two terms interchangeably. However, this is incorrect. A webpage is merely one page, a website is made up of a bunch of different webpages all linked together. Even if a webpage has links on it, unless the links lead to a part of their own site, it isn't a website.

Having said that, let me now move on to the html. HTML stands for hyper-text markup language. Of course, unless you turn into a computer freak like me, there's no real reason for you to remember this.
Let's now start with the very basics of the basics. This site and every site out on the internet is written with some form of html. And in every site, on every page, is this format:
<html>
<head>
<title> </title>
</head> <body>

</body>
</html>
Now let's break this down a bit into something you might have an understanding of. (If not, don't worry, just stick this on your webpage/website and stick your content between the appropriate contents and you'll be fine.) The first tag, <html>, lets the computer know that everything following the tag is written in html, and needs to be read as such and displayed properly. If you don't have this tag, it will not work, more often than not. Sometimes I've seen it work, but the page is badly flawed. Now, the <head> tag isn't much use for you except the title. It's also where you stick all your css tags and a few others, but they're since that's not basic html, it's not covered here and is of little consequence for a simple page. Between your two title tags, you stick the title of your website or whatever else you want to appear at the top bar of the page or internet explorer window. Then you end your head tag. In between your two body tags is where the entire content of your site or page is placed. For example, this tutorial you are viewing now, if you were to view the source, all of this information would be between the two body tags. Then, at the very end of everything you use &#/html> to let the computer know you are done running your html. Oh, and just as a side note, the / in tags always denotes an ending of a tag, rather than a starting of one.

So, now that you have your basic layout of the page, let's start discussing various tags and such that make up your body content.
Every page default is set to a white background, black times new roman, size 10 text. Very boring, and very unoriginal, huh? Enough so that everytime I see a page with defaults (which is a lot), it makes me want to puke. So how 'bout spicing it up a little, hmm?
Say you want to change the background colour. To do this, you would use this tag: <body bgcolor="your colour goes here"> Now, there are two different ways to specify your colour. You can use the actual colour names, such as red or blue or whatever, or you can use colour codes, found on a colour chart. At this time, I don't have a website that lists one, but I shall post a link if I find one.
However, what if you want an image for a background instead of a colour? Then your tag would look a little different: <body background="your image name.jpg">. The image would be uploaded to your own server or free host, and whatever you saved it as and uploaded it as, that's the image name you would use. I will not explain direct linking here, because that is illegal and not very considerate of others. Also, a nifty little thing. If you want your image to remain still, and only have your content scroll down (in other words, a stationary background), set your code like this: <body background="your image name.jpg" bgProperties="fixed">
That was a fairly simple tag, and pretty much takes care of your background. Now, onto your font style! To set the font colour, you use this tag: . The options for the colour are the same as the background colour. To set the font type, use this: Font type refers to the name, such as times new roman or verdana, or arial. You can use fancy fonts if you want, but not all computers support these fancy fonts, and it's best to provide the fancy font for download if you want to use it. This way people can view your page properly. Now, the size of your font is rather limited, as far as simple tags go. There are 7 font sizes, with 1 being the smallest and 7 the largest. You use this tag: <basefont size="a number between 1 and 7">. There are ways to set the exact font size, but these require css, which, again, is not covered in this tutorial. Usually 2 is an adequete font size. When you've got all your font stuff set, you type all your information after them, and then end it with the tag.

Other Tags

To bold text: To end it, 
To italicize text: To end it, 
To underline text: To end it, 
~~To srike through text~~ <strike> To end it, </strike>
For various headings, use <h1>-<h6> (h1 is largest, h6 smallest)
To start a new line without a space after the previous line:

To start a new paragraph: (optional-to end paragraph: This is not necessary and I don't recommend it)

Links

Links are a very useful thing to have a webpage. Without them, the place is boring. There are three different link types we will be dealing with: inside links, outside links, and email links. Inside links are links that link to another page within your site. Outside links link to different webpages or websites that are not part of your site. For example, an inside link would be this link, which leads to my domain section. This link is within my own server, and part of my site. Therefore, an inside link. However, if I was to link to google.com, as such. Google is not a site of my own, and not part of my servers, therefore an outside link. Email links can link to anyone's email. Since that's such an easy tag, let's do that one first.
If you want to provide your email address so people can leave you comments and questions and such, you would use this tag: <a href="mailto:youremailaddress@wherever">.You put the text that you want to be linked here.</a> Then when people click on the email link, an email form will pop-up, and they can compose their email address and send it to you. I suppose you could also tell people your email, but's that often a hassle because they have to open their email program themselves, and then copy your email address down. It's more polite to provide a link. Here, let's try it. Email me! Now when you click on the link, your email program should pop-up and my email, satori_rahyne@livejournal.com, appears in the send to box. (please don't send me email, though, unless you actually have something important to say ^^)
You can also program the email link to set the subject and even the body of the email. This is usually useful for businesses and such, and it's not really important. However, if you're interested, to set the subject, you do the email tag like this: <a href="mailto:youremailaddress@wherever?subject=whatever">.You put the text that you want to be linked here.</a> So if I want you to email me, and have my subject to 'Hi, how are you?', it would be like such: Try it and see the set subject! Neat, huh? I don't remember the body tag, sorry ^^;;
Now, for inside links. Assume the page you are creating is named index.html. You've previously created another page on your site named main.html, and you want to link to it. You would do this: <a href="main.html">To main.html</a>. So, when I linked to my profile page earlier, which was named prof1.html, I set it up like this: <a href="prof1.html">To profile</a> If you want the page to open in a new window, set the link up like this: <a href="prof1.html" target="_blank">To profile *opens in new window*</a>. Usually though, the target=_blank is best for outside links.
For outside links, the code is the same as the inside links, except that instead of just putting the page name in the quotations, you have to put the whole address. Like, if you wanted to link to Anime Lyrics, you would put http://www.animelyrics.com/ between the quotations, rather than just something like their default index. If you put just www.animelyrics.com/, and left out the http://, it would end up trying to take you to http://your own website address/www.animelyrics.com/ Obviously, that page wouldn't exist. When linking to outside pages, you must include the http://
Now, to set the link colours. Remember way back up there in your <body> tag, where you set your background? Well, you also put your link colours there as well. To set the active link (which is the link before you've clicked it) you just put link="colour" alink="the same colour as link". Yes, you must use these both for your active link. Don't ask me why, I haven't figured it out yet. Now, for your visited link (what colour the link is after you've clicked it), you put vlink="colour" So, after you've done your html, head, title, /title, /head tags, and you've got your body tag, you set the whole body tag up like this: <body bgcolor="colour" (or body background="image.jpg" and possibly bgProperties="fixed">) link="colour" alink="same link colour" vlink="colour">

Images

To put an image on your page is very simple. First, find the image you want to put on your page. Save it to your hard drive as whatever you want. For this, let's say we saved it as image1.jpg. There are two common types of images that everyonce can easily view on the web. .jpg and .gif. Lately, a .png extension is becoming fairly popular, but you must have a paint program such as Jasc Paint Pro or Adobe Photoshop to be able to use these. I recommend saving your image as .jpg, that usually works best.
Once you have your image saved, upload it to your website. If you are using geocities, there will be a button in the upper right corner that says "upload files". Angelfire's is located below the webshell that lists all your site's files, and has a blank space to type in and a browse button to the right. Upload your image. Now, open the webpage you want the image to go on. Put this code wherever you want your image: <img src="your image name">. In this case, we called our image image1.jpg, so you would put image1.jpg where it says "your image name".
You can also link images. Just put your link code, and then instead of text, put the code for an image and then close the link. If you want to get rid of the border around the linked image, then put border="0" after img src="your image name". If you want a little banner with text to pop-up when you put your mouse over the image, put in alt="random words here".

I know that all of these may seem a bit overwhelming at first, but I promise you this is all very easy once you get the hang of it. Now that you've learned a bit of your html, let's create an example page.
Here is the code. I recommend you type it out instead of copying and pasting, that way you get a feel for the html.

<html>
<head>
<title>My First Webpage</title>
</head>

<body bgcolor="#922D35" link="#FF8080" alink="#FF8080" vlink="black">

 <basefont size="2">Well, this is the very first webpage that I have ever created! Isn't this amazing? Oh yeah, you can tell this text is just so original.

Hmm..This is a new paragraph. Very interesting. Mm-hmm. Here, let's have a link. <a href="http://interstellar-dreams.net" target="_blank">This leads to interstellar-dreams.net, and it opens in a new page.</a>
 Would you like to <a href="mailto:satori_rahyne@livejournal.com?subject=hi!">email the owner and say hi?</a>

</body>
 <html>

If you get confused along the way, go to the actual example page of this and study the source code. It opens in new window for your convenience.
Also, I apologize for the fact that it looks very boring, but you're supposed to spice it up yourself!

This tutorial and all contents found within are Š2003 to satori and are not to be reproduced in any way without permission.