Writing HTML Code!

A Beginners' Guide To Writing HTML Code

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!

 

Some tips for writing HTML code

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.


Lesson 1 : Basics of Writing HTML Code

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.

<body bgcolor="red">
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.

 

 

Lesson 2 : Text - Headers, Paragraphs & Links

It's time to dig between the <body> & </body> tags and show your browser who's the boss!

Header sizes 1-6

<H1>Header size 1</H1>

<H2>Header size 2</H2>

<H3>Header size 3</H3>

<H4>Header size 4</H4>

<H5>Header size 5</H5>
<H6>Header size 6</H6>

 

Paragraphs

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

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...

 

Text link to another site

<a href="http://www.greystormmedia.com/">Grey Storm Media</a>
Looks like this... Grey Storm Media

 

Image link to another site

<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>
Looks like this...

 

E-mail link

<a href="mailto:GetYours@GreyStormMedia.com">Send E-mail to Grey Storm Media</a>
Looks like this... Send E-mail to Grey Storm Media

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>
Then somewhere else on your page you'de have a target named goHere...
<a name="goHere">Did you click it?</a>
Works like this... If you click here...

 

Lesson 3 : Text 2 - Lists & BlockQuotes

Not much to this part. Just a quicky!

 

Lists - OL, UL & LI

OL = Ordered List

<ol>You can title your list here if you want.
<li>List item</li>
<li>List item</li>
</ol>

Looks like this...

    You can title your list here if you want.
  1. List item
  2. List item

 

UL = Un-ordered List

<ul>You can title your list here if you want.
<li>List item</li>
<li>List item</li>
</ul>

Looks like this...

Blockquotes

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>
This is where you write notes & memos, or tasteless but funny jokes about the president or your boss! (LMAO!)
</blockquote>

 

Lesson 4 : Text 3 - Defining text properties

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.

 

font face

<font face="Georgia"> changes the default Arial to Georgia.

 

font color

<font color="red"< changes the default black font color to red.

 

font size = 1-7

<font size="5"< changes the default font size of 3 to font size 5.
In case you're wondering,
This is font size 7!

bold

<b>Text to be bold goes here.</b>

 

big

<big>Text to be BIG goes here.</big>
<big><b>Text to be BIG and bold goes here!</b></big>

 

small

<small>Text to be small goes here.</small>

 

italic

<i>Text to be italic goes here.</i>

 

underline

<u>Text to be underlined goes here.</u>
Nope. Sorry. Not a link. But you can click it! And, hey, if ya' click fast enough, it will even change colors!

 

Lesson 5 : Tables - Positioning Page Elements Where You Want Them

The main and most important parts of a table are:

TABLE (table)
TR (table row)
TD (table data cell)

They are set up like this:

One Row / One Column
<table border="1">
<tr>
<td>
Data Here
</td>
</tr>
</table>

Looks Like This...
Data Here


One Row / Two Columns
<table border="1">
<tr>
<td>
Data 1 Here
</td>
<td>
Data 2 Here
</td>
</tr>
</table>

Looks Like This...
Data 1 Here Data 2 Here


Two Rows / One Column
<table border="1">
<tr>
<td>
Data 1 Here
</td>
</tr>
<tr>
<td>
Data 2 Here
</td>
</tr>
</table>

Looks Like This...
Data 1 Here
Data 2 Here


Two Rows / Two Columns
<table border="1">
<tr>
<td>
Data 1 Here
</td>
<td>
Data 1 Here
</td>
</tr>
<tr>
<td>
Data 2 Here
</td>
<td>
Data 1 Here
</td>
</tr>
</table>

Looks Like This...
Product 1 Here Product 2 Here
Description 1 Here Description 2 Here

 

Lesson 6 : Practice Makes Perfect
And yet nobody's perfect! Go figure.

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:
http://www.W3Schools.com/
http://HTMLHelp.com/
http://www.W3.org/html/
http://msdn2.Microsoft.com/en-us/library/aa155110.aspx

 

 

You'll end up way down here!
Click here to go back.