Create a Free Website

HTML Code Tutorial


Introduction to HTML

HTML is the foundation of web page design. Not Java. Not Script. Not XHTML.

If you want to learn these other more advanced features of web page design, do yourself a favor and get grounded in the basics of HTML first.

Why Learn HTML

Creating websites with HTML code gives you complete control over the appearance and functionality of your web site.

If you don't want to be a web designer, you will still need at least a basic knowledge of coding.

Even if you decide to use a tool that doesn't require you to learn to code, a basic knowledge of HTML will help when problems arise.

If you want to build your website with a template that someone else has designed, you will also need some knowledge of HTML to turn it into a website.

Create a FREE Website


NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Create Free Websites


Start Your FREE Website Now!



Before You Begin

Skim this tutorial.

If your first impression is that it is too technical, you're probably not ready to build web pages.

Our tutorials are about as untechnical as you are going to find.

Things you should already know

Can you look at folders and files on your computer?

Learn to use the file management system on your computer before you start.

Do you know the difference between different file types?

file1.txt
file2.html
file3.jpg
file4.css
file5.swf
flie6.doc
file7.gif

If not, you're not ready!

Can you create a new folder on your computer?

If the answer is no, you're not ready!

Do you know how to locate and look at a web page stored on your computer in a browser?

If the answer is no, you're not ready!

Do you know what NotePad is and how to start it up?

If the answer is no, you're not ready!

Do you know what it means to copy, cut and paste? Can you do it?

If the answer is no, you're not ready!

If you anwered any of these questions with a NO, do yourself a favor. Visit Google and Wikipedia and learn a little about the basics of computers. Learn to use the Help system on your computer.

Proceeding would be like driving to Alaska before you learn to drive your car.

Some of these questions are answered in the first lesson of the Basics tutorial. When you can answer ALL questions with a YES, you'll be better equipped to complete our Learning the Basics tutorial.

Choose a Tool

To make the learning process a little easier, decide on the tool that you want to use and learn to use it before you start the actual construction of your site. I highly recommend the free html editor AlleyCode.

If you'd like a simple lesson in creating a basic web page with a text editor like NotePad or WordPad and then viewing it in a browser,Click Here

If you want to start out right, I recommend the HTML editor that I use to build and maintain a website that has over 1200 web pages. Download Free Trial of HTMLPad 2011.

Storage

Don't just dump your page files anywhere. Create a folder named htdocs and store each page that you create in that folder. Create another folder inside the htdocs folder and name it images. Store the pictures that you want to use on your web pages in the images folder.

Note: When using an images folder be sure to add the path information to your image code.
Example: <img src="images/imagename" border="0">

This Tutorial

This tutorial is in transition.

This tutorial and most like it that you'll find on the internet provides code examples that have been deprecated in the last version of HTML 4. Most examples of inline code have been deprecated in the latest release. Though this code will still work in most browsers, there will come a time when pages that use deprecated HTML code will not be properly rendered.

If you place inline code in your web pages, you should begin the process of using inline style tags, rather than the old deprecated inline attribute tags. Many of our lessons will provide both methods. Choose the CSS version that is provided.

Our tutorial uses a simplistic approach in its lessons. Very little technical jargon is used in the presentation.

In most cases a function of HTML will be executed on the page and the HTML code used to produce it will be displayed beneath.

The best way to learn HTML is simply by doing it. You can copy the code examples from these pages and paste them into the editor that you are using.

You can also Test some of the code examples in this HTML editor.
Copy this code: <p style="font-family: verdana; font-size:14pt">My first code example!!</p>

Follow the directions on the right side of the editor to enter the code and then preview it.

* For the ultra-beginner, to copy code press the left mouse button and drag it over the desired code. Release the button at the end of the highlited selection. Then click the right mouse button in the center of the highlited code and click copy, when the editing box appears. Then set cursor inside the editor window and right click and choose paste.

Test in Multiple Browsers

Test your code in at least two different browsers. Note the differences in appearance. Though HTML 4.0 was supposed to be an attempt to standardize HTML for various browser types , there are still differences in the way Mozilla FireFox, Chrome, Opera, Safari and Internet Explorer handle the code.

Test Web Pages at Different Monitor Resolutions

People are viewing web pages these days with all kinds of devices. Some of these devices use monitor resolutions as low as 800x600 and as high as 1920x1200. If you build static web pages (pages with fixed width settings) your website is going to look and perform quite differently at each monitor resolution.

Online Website Builders

In the past we discouraged the use of online website builders. We found them hard to learn and editing an existing site was even harder.

We still try to discourage their use, but have realized that some people simply can't grasp the art of coding.

As with many aspects of internet technology the advancement of Active X controls and javascript have improved online web development tools so drastically that almost anyone can build and maintain a website using one.

If want want to try an online web site builder, visit the SquareSpace builder advertised on the top of this page.

If you decide to go the online website builder route we suggest that before you start adding content to your pages you come back and visit our Website Design Tutorial and learn a little about researching and planning your website.

Before You Start

Most first time website builders make the mistake of starting to build their site before they have a plan. Whether building from scratch or using an online developer, an important part of that plan is researching keywords that will be used by search engines to find your site.

There's nothing more frustrating than finishing your site only to find you must rewrite the content to make it visible on the search engines. The solution - Optimize as you Build!

FREE OPTIMIZATION SOFTWARE

We recommend WEBCEO
Use this free software to Optimize pages as you build them

Research your keywords
Submit pages to SEs
Check SE rankings
Check your Link Popularity
and Much More.....   IT'S FREE & EASY TO USE!!!!!

Note: Google discourages the use of website optimization software.
Highly optimizing pages can result in lower rankings on Google.
Use this tool only as a guideline.

WEBCEO will tell you how many words you have on your page, the number of times that you use a keyword phrase and where they are located. It will then make recommendations to improve the page for better search engine rankings.

It even includes a built in WYSIWYG editor for making recommended changes to web pages.