Computer Repair Forum | Fix Your PC Free With Be Your Own IT

kickassman · #1 (**permalink**) 06-11-2009, 04:13 AM

So I've been writing HTML for a few months now, and it's not as hard to learn as you might think. To start off, a little HTML history. HTML stands for Hyper Text Markup Language. It was created when the internet was first developed, and it's OS and browser independent. Any OS or internet browser can read html, but some might read it slightly differently.

Before you start writing your HTML, you will need Notepad or a similar text editor. Open it up, and now you're ready to start!

Tags are the most important part of HTML. They tell the browser what to do, how to do it, when, etc. The first HTML tag that all HTML pages need is the <html> </html> tags. They come at the beginning and the end of a document, respectively. They tell the browser that the document it's loading is an HTML page. So far your text editor should look like this:

<html>
</html>

Next you need to add head tags. Everything between these tags is part of the page header, and everything here won't show in the actual webpage. So far your text editor should look like this:

<html>
<head>
</head>
</html>

Before I go any farther, you need to remember that all tags have to be put inside each other correctly. The tags shouldn't overlap, they should be nested. They should be like this: <tag1><tag2></tag2><tag1>

This is WRONG: <tag1><tag2></tag1></tag2>
This is ALSO WRONG:<tag3><tag2><tag1></tag3></tag2></tag1>

Back to where we were. The next thing that you will need is a title for your webpage. This is much more important that most people think. You know when you search in Google, and the clickable links are about the website? This is what's inside the title tag. So far your text editor should look like this:

<html>
<head>
<title>Put your webpage's title here</title>
</head>
</html>

Then next thing that you will have to do is put in a body tag. (no dead body jokes, please

) Everything inside the <body> tag is what appears in the browser. Everything inside here is the meat and potatoes of your website. So far your text editor should look like this:

<html>
<head>
<title>Put your webpage's title here</title>
</head>
<body>
You can put whatever you want inside here. We'll learn many more tags that you can put in here to make your website awesome.
</body>
</html>

There are many types of things that can be put inside the <body> tag. The most imporatant one would be the background attribute. It can be used like this: <body background="picture.jpg">
Replace the picture.jpg with your picture file that you want as the background. Remember to type the file extension too! Some common ones are .jpg .gif .png .bmp and so on. Also, remember to keep the quotes inside the tag, or else it will throw off the entire HTML page and it won't work right. Also, the picture that you're using has to be inside the folder(directory) where you save your HTML document. Like certain websites that you may have seen, sometimes the background image doesn't move when you scrool down the page. You may be thinking, "That looks cool. How can I do that?" Well, you're in luck. to do this, in the <body> tag, just add style="background-attachment:fixed" after the background attribute. It would look like this: <body background="picture.jpg" style="background-attachment:fixed">
So far it should look like this:

<html>
<head>
<title>Put your webpage's title here</title>
</head>
<body background="picture.jpg">
You can put whatever you want inside here. We'll learn many more tags that you can put in here to make your website awesome.
</body>
</html>

The background is optional. You can also set the background as a solid color. To do this, just put <body bgcolor="#ffffff"> When you're changing the color, remember to leave the # there. Here's a link to a table with all of the colors:
IconBAZAAR - Color Tables - Standard 216 Netscape Colors
You can replace any of the f's with a number 1 thru 7. Try experimenting and see what you get.

Now for the <img> tag. It is used to put images inside of your webpage. Remember, the image that you use has to be in the same folder(also called directory) that you save your webpage in. So to use it start with this: <img src="picture.jpg"> Replace picture.jpg with the file name and file extension of your picture. So if my picture was called funnycat.bmp, then it would look like this: <img src="funnycat.bmp"> If you want to make your picture link to a different webpage or website, type this: <img src="picture.jpg" href="put your link here.com"> Obviously, replace put your link here.com with your actual link. Remember to keep the quotes in there though. So far it should look like this (or kind of similar if you experimented a little bit):

<html>
<head>
<title>Put your webpage's title here</title>
</head>
<body background="picture.jpg">
Put your website's main stuff here
<img src="picture.jpg">
You can put in as many pictures as you want, and wherever you want!
</body>
</html>

Here's a few interesting tags. You can make your text bold, italicized, or underlined. To do this, just use these simple tags:
<b>bold text goes here</b>
<i>italicized text goes here</i>
<u>underlined text goes here</u>
Obviously, you can replace the "whatever text goes here" part. How this works, is the <b> tag tells the browser to start making things bold, and the </b> tag tells the browser to stop making things bold.
Now for the <font> tag. This tag changes, you guessed it, the font. You can chage the color: <font color="#ffffff"> Remember that color thing from before? The same thing applies here. The link to all of the colors:
IconBAZAAR - Color Tables - Standard 216 Netscape Colors
You can also change the font. <font face="arial"> You can change it to whatever font that you want, but remember that the viewer of your webpage must have that font installed to view it with that particular font. Otherwise, it goes back to the browser's default font. You can also change the font size. <font size="5"> Most browsers default font size is 3, and if you don't specify a font size, this is the size that it will use. You can go as small as 1, and I'm not sure if there's a limit on how big it can be.

Next for section headers. Honestly, these seem kind of useless to me, but you might want to use them, so here they are. Just use these simple tags:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
You only need one of these at a time. All they really do is change the next size. h1 is the biggest, and they keep getting smaller as the number goes up. Like I said, it's easier to to this with the <font> tag. I think it's kind of redundant, but use it as you see fit. For header tags, you can also align the text with the left, middle, or right side of the page. Once again, this can be done with the <font> tag. All you have to put is align="center", align="left", or align="right". Example: <h2 align="middle"> This can also be done with the <font> tag. Example: <font align="left">

If you want to skip to the next line, you can't just hit enter in Notepad. If you did this in Notepad (i excluded the <html>, <head>, and <body> tags just so you could see it better):

Why
is
it
not
skipping
lines???

It would come out like this:
Why is it not skipping lines?
To fix this, just add the <br> tag whenever you want to skip to the next line. This tag doesn't need </br>, so don't even bother putting that into your webpage. Example:

Now<br>
it's<br>
skipping<br>
lines!

Would look like this:

Now
it's
skipping
lines!

Ok, I'm done for today, I'll post another HTML lesson soon.

kickassman · #2 (**permalink**) 06-11-2009, 04:55 AM

By the way, if anyone is curious to see what I can do with HTML, just go to my website
Matt and Vitos Webcast Home
If you want to know how I did anything in that website, just post your question here and I'll answer.

Nate · #3 (**permalink**) 06-11-2009, 05:38 PM

Very nice tutorial, stickied.

I have been making website for a couple of months, I'm currently working on a new site that I used a little php.

billjr · #4 (**permalink**) 06-14-2009, 03:09 PM

Ok;Just how do you get it to run from notepad?These newer computers take a little getting used to.The last time I programed was back in 1983.Computters were pretty dumb back then.These are much much diffrernt as I have come to realize.
thank you very kindly

kickassman · #5 (**permalink**) 06-14-2009, 11:37 PM

All that you have to do is open notepad, create your HTML file, then save your file as yourfile.html Change the filename to whatever you like. Also, right below that is a drop down box that says "Save as type". Change the option to all files.

Nate · #6 (**permalink**) 06-15-2009, 04:02 AM

I like DreamWeaver a lot, because it has the design view, and I use that almost all the time.

billjr · #7 (**permalink**) 06-19-2009, 12:42 PM

Where do I find Notepad++and is it free?

XaZor · #8 (**permalink**) 06-19-2009, 04:44 PM

Yes it is free, you can download it here.

.:: NOTEPAD++ ::.

billjr · #9 (**permalink**) 06-21-2009, 05:04 PM

Thanks that was a big help.

flipsadler · #10 (**permalink**) 04-13-2010, 03:11 PM

Website themes and templates that we've seen on the internet today comes with complete CSS/HTML page layouts, but it is always important to know at least the basics so that we are able to make changes or tweak our websites.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode