HTML Tutorial

Your first lesson in HTML in ten easy steps

I will show you how easy it is to write HTML code and after each step you will view the page in a web browser.

Looking at HTML code is rather daunting for the uninitiated. But this used to be the ONLY way a web page was constructed. Nowadays, and for quite a while in fact, we have HTML Editing programs which makes it a lot easier.

Understanding HTML is still beneficial. You can look at another persons source code and see how they got a particular effect or what they're doing and how they're doing it. Also you might need to manually insert a line of HTML code to use something like a hit counter. Or insert meta tags or do a quick change.

And a person who typically uses HTML ('coding in the raw') will usually create a site that will download a lot faster than someone who made it in an HTML Editor. That's because they have control over every single character saved in that page. Unfortunately a HTML Editor program will be a little messier. This mess results in a larger file size.

So in the interests of ancient history we are going to play around with a little bit of HTML.

Step 1

Open up NotePad (for PC) or SimpleText (for MAC) but don't use a word processor (they have an autoformating function that plays havoc with the code).

You don't need to open the text doc to full screen. It's best to adjust the size so you can have this hub open and you're able to read it, and you can type in the text doc at the same time. And I suggest you actually type it, don't copy and paste. You'll have a far bigger feeling of satisfaction and sense of accomplishment by getting your hands 'dirty'. Trust me on that.

Type the following (but no need to type the numbers on the left hand side):

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




</body>
</html>

Step 1 Notes

The html tags are informing the browser "this is a HTML page!".

The head tags... I'll discuss them further in future hub. For now we'll just leave them as is.

The body tags is where the 'stuff' is going to happen.

With me so far? See that technical term I used there? Stuff!

Step 2

Save the document to your desktop. Name it prac.html

Make sure it says prac.html not prac.html.txt

Step 3

Type in this bit of text then save.

<html>
<head>
</head>
<body>
this is a html document



</body>
</html>

Step 4

Double click the html file you've made. It should open in your default browser.

You will see the words this is a html document. But no tags. The browser reads the tags and displays the writing as per the tags instructions. So far we haven't actually added any tags that directly effect the text being displayed. But we will in a moment.

Step 5

Type in these tags then save...

Make sure you save!

<html>
<head>
</head>
<body>
this is a html document<br>
<font size="+2">change the font size</font><br>


</html>
</body>

The <br> creates a line break space. If you don't put that in it'll just stick the next line straight onto the end of the previous one.

<font> tags can do a variety of things, like change the color, style and in this case the size.

Step 6

Click on refresh/reload on your web browser to see the changes.

Step 7

Add some color.

This is where I've stumped Australians in the past. I'll write it on the board and within moments of them doing it they'll tell me the color hasn't changed. And that's because they've assumed I've spelled it incorrectly. So it's the Americanized 'color' and not 'colour'.

<html>
<head>
</head>
<body>
this is a html document<br>
<font size="+2">change the font size</font><br>
<font color="#3333FF">change the font colour</font><br>

</body>
</html>

Click on refresh/reload on your web browser to see the changes.

Step 8

We're going to add another line and change the font style.

<html>
<head>
</head>
<body>
this is a html document<br>
<font size="+2">change the font size</font><br>
<font color="#3333FF">change the font colour</font><br>
<i>change the font style</i><br>
</body>
</html>

Click on refresh/reload on your web browser to see the changes.

Step 9

Lets change things up!

Change <font size="+2"> to <font size="+4"> then hit refresh.

Change the i in <i> and </i> to a b then hit refresh. See what you've done there? You've made it bold.

Change the b in <b> and </b> to a u then hit refresh. See what you've done there? You've made underlined it.

If you were to have <u><b><i>change the font style</i></b></u> it would be unlined, bolded and italicized.

Change the 3333FF in <font color="#3333FF"> to FFFF99 then hit refresh. Then change it to CC0000 and hit refresh... C0C0C0... CC33CC... 00CC00...

Step 10

Now let's have a look at the original code again.

<html>
<head>
</head>
<body>
this is a html document<br>
<font size="+2">change the font size</font><br>
<font color="#3333FF">change the font colour</font><br>
<i>change the font style</i><br>
</body>
</html>

Everything that is stuck between the arrowed brackets is the HTML code.

Everything in between is the writing shown in the web browser.

And that's how easy HTML is.

If you were to view the source of any HTML page and went through and deleted all the information (code) that was within and including the arrow brackets, you'd be left with the content you read on the page.

Congratulations on learning a new language!

You don't actually have to use this new found talent to create webpages from scratch. Dreamweaver is an excellent HTML Editor. NVU is a free one. Avoid Microsoft Frontpage. That thing creates code that I have no idea what the hell is going on (if you remove this so called 'code' the page will still function properly, and be as little as 1/10th the original file size).

The important thing is that you are able and you very well should open up the source code when you're creating a webpage in an HTML editor every chance you get. See what the WYSIWYG (What You See Is What You Get interface) is producing in the background. This gets particularly interesting when you start making tables.

For me the benefit of becoming conversant in HTML code is that there were often times it was quicker for me to go straight in the source code and add or remove things in Notepad than what it would have been to do in Dreamweaver. Or when looking at a students webpage, sometimes they may have added a few too many font tags over font tags and a span tag and the hyperlink isn't working properly resulting in no hover effect. No amount of WYSIWYG editing is going to fix that up. But as soon as you see it in the source code it's easy to clean up the mess.

The other thing is from what I've learned in HTML has enabled me to hack in small changes to templates in Wordpress, phpBB and other Content Management Systems.

By gradually exposing yourself to source code you'll slowly, and without much effort at all, learn a thing or two about HTML. And soon enough, without even realizing it, you'll be fluent in a second language (even if it is a geek one).

More by this Author


Comments 10 comments

rb11 profile image

rb11 7 years ago from Las Vegas

The message of your hub is quite good. Learning just a few tweaks here and there will allow you to jazz up existing templates and improve your visitors viewing quite a bit. I have used the following site for just this purpose

http://www.quackit.com/html/codes/html_link_code.c...

Good Hub....Regards


Gypsy Willow profile image

Gypsy Willow 7 years ago from Lake Tahoe Nevada USA , Wales UK and Taupo New Zealand

OOOOOOhhhhh I understood it! thanks for the lesson, Darkside! Can I call myself a Geek now? Thanks, that was interesting.


Kmadhav profile image

Kmadhav 7 years ago from New delhi

good html tutorial with screenshots ......nice hub darkside


Coach Tim profile image

Coach Tim 7 years ago from Los Angeles, CA

As always, you're really good at this stuff...thanks for sharing!


mayhmong profile image

mayhmong 7 years ago from North Carolina

That brings back good high school memories. I wish we could play with some html code on hubpage. I love making every pictures and words colorful and rotate it over and over and over and...you get my point?


prasetio30 profile image

prasetio30 7 years ago from malang-indonesia

thanks for tutorial. It wa great.


Tim The UWN 7 years ago

Thanks a million for this tutorial,im not saying this to get my comment count up ,but so i can give you feedback...

It would be betterif you used

font-size="2pt"

instead of

font-size=2pt

Thanks,http://www.ultimatewebnet.com


Aqeel Saeed 7 years ago

Yesterday i was with my friend and was trying to understand what is html but could not follow what he was telling but now i have learned. thnks.


darkside profile image

darkside 7 years ago from Australia Author

Thanks Tim.

Though while font size=+2 does work and font size="+2" is a little more correct, you'll find that font-size="+2" doesn't work because of the hyphen that you've got in there.


Victoria Stephens profile image

Victoria Stephens 4 years ago from London

Hi darkside,

Well done on the html tutorial. I have found html so useful since learning it. Everything from building my own site to tweaking other pages. It's a brilliant help to anyone that wants to have control over their own work.

Best wishes.x

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working