HTML stands for HyperText Mark-up Language and it is the basic language used for building webpages. Writing HTML code is not only fun, but just wait until your friends are asking you build their Websites!
Writing HTML code is very simple, as you will soon see. Before you are done with this tutorial, you will have created at least one webpage of your very own!
The easiest way to learn HTML, or pretty much anything for that matter, is by example. Right-click anywhere on this page and pick "View Source" from the context menu. You will then see the code which I wrote to generate this page! Save it as writing-html-code.html. You'll find this file where you saved it, accompanied by your favorite internet browser's icon. Open it, right-click, view source, and experiment!
If you have problems understanding the code or lay-out of another Web-Designer's page while you are trying to learn HTML, do not be afraid to E-mail the WebMaster of the site and ask for help. Most Web Designers are eager to pass on their knowledge to you!
Write your HTML code with your own style. Be creative and have fun with it. Just remember to make it easy for others to read and understand so that they may learn from you, as others have allowed you to learn from them. Some people prefer Editors as apposed to manually typing out all of their script. CoffeeCup Software has an excellent HTML editor called CoffeeCup HTML Editor.
Again, the easiest way to learn is by example. So I've made this as painless as possible. Simply open up NotePad, Wordpad, or any other text editor (not word processor) and type what I type.
<html> <head> <title>My First Webpage!</title> </head> <body> </body> </html>
Now. Save this document as index.html in a file folder (preferably a new one created especially for this occasion) and remember where you saved it. Go to that location and open your new HTML document by double-clicking on it. Once it is opened and you are viewing the makings of your first Webpage in your browser window, right-click anywhere on your page and click on "View Source" from the context menu. You will be greeted by everything which you just typed!
Okay. Now we'll give your background a slight adjustment.
You must first Save your changes before you will see them. So when you make changes in your code, save them in your text editor, then go back to your browser and click Refresh.
In the above example, you could also type #FF0000 instead of red. This is called Hex, short for hexidecimal, and would give you the same effect.
It's time to dig between the <body> & </body> tags and show your browser who's the boss!
Paragraphs are just as easy as headers. Simply enclose them between <p> & </p> tags.
<p>To start a new paragraph, just repeat this! Or you can also use the <br> (break) tage twice. But that would not look so good if you are indenting your paragraphs with a Style Sheet, because the new 'paragraph' will not be indented.</p>
Links are a breeze, usually. But they can be tricky sometimes. It all depends on where they're going, really. Back-tracking within folders and subFolders is where the link-trickery begins. But I'm leaving all of that alone for now. Here are the basics...
<a href="http://www.greystormmedia.com/"><img src="GreyStorm_bnr-02a.jpg"></a>
Looks like this...
To get rid of that tacky border around your image links, type this...<a href="http://www.greystormmedia.com/"><img src="GreyStorm_bnr-02a.jpg" border="0"></a>
You can even control the subject and body of the E-mail! Check this out!<a href="mailto:GetYours@GreyStormMedia.com?Subject=Writing HTML Code&Body=Writing HTML code is easy!">Send E-mail to Grey Storm Media</a> Looks like this (move your cursor over the link and watch the status bar below)... Send E-mail to Grey Storm Media
And here's how to create those crazy little links that go only to another part of the same page!<a href="#goHere">Click Here!</a>
Not much to this part. Just a quicky!
Blockquotes indent entire sections of text. Like this...
This text is blockQuoted! No, really. It is. If it weren't, it would be much like a parasite on the left margin! Here, you try it!<blockquote>
Finaly. You probably thought I'de never get to this part, didn't you? Well, here we are! This is where I'll show you how to change all of the characteristics of your characters, from colors to underlines! Pay very close attention... Well. Nevermind. This isn't hard at all!
Choosing your font face will be easiest if you have a font-viewer like Anatoli Klassen's Font Viewer. I highly recommend this one. It's very good! Not only can you see every font that is installed on your computer, you can also see exactly what each font looks like by example. And, as if that's not enough, you also have the ability to type in a word or two, or a complete phrase, and see what certain text will look like in any given font face!
The <font> tags go between your <p> and <h> (h1-h6) tags. Also, before you can view a font on your computer, you must first install it on your computer. Otherwise, when typing in fonts that you do not have, all you will see is the default font, which is Arial. This is true for everyone. So, if I download and use a font on my website that you do not have installed on your computer, all you will see is Arial.
The main and most important parts of a table are:TABLE (table)
They are set up like this:One Row / One Column
|Data 1 Here||Data 2 Here|
|Data 1 Here|
|Data 2 Here|
|Product 1 Here||Product 2 Here|
|Description 1 Here||Description 2 Here|
As with anything that you set out to learn, the more you practice writing HTML code, the more accustomed you become to doing it. And the more you do it, the less effort you will find that it takes to remember how.
Here are a few great resources to help you in writing HTML code: