Your first web page, a simple HTML tutorial. Basics, page construction. Saving and viewing.

HTML Tutorial

Basics | Formatting | Tables | Images | Linking | Resources | About | Examples | Exit Tutorial

Go to next page

  Basics   Formatting   Tables   Images   Linking   Resources   About
  In the beginning...   Making your text look good   Positioning your text on the page   Adding images   to other pages and web sites   eBooks.
Free templates
  Info.
What next?
 



Problems arise from, perhaps, trying to be too clever, or thinking that you must have a graphically striking web site.
Many of the better web sites, like Yahoo, tend to be of simple, conventional, layout, with very small graphics.

Any experienced webmaster will tell you to learn HTML before wasting money on expensive web page software.
Having built a few web pages 'by hand' will help you when later considering which web page creation software to buy.
More importantly, knowledge of HTML will allow you to debug, or improve, coding you may produce later using that software.

You can, of course, use the many free templates available that you simply customise with your own details.

DO NOT worry about the fact that your pages may be of a simple nature to start with.
Very few people go to a web site just because it is graphically impressive or because it uses Flash.
A good site is one where surfers can quickly and easily find what they are looking for.

Browser Compatibility
Microsoft Internet Explorer and Netscape did tend to display the same web page differently.
This is no longer a issue but the notes on Browser Compatibility have been left in.

Basically, this simple tutorial will give you a chance to see if you want to go further

Your first web page.
How do you make a web page?
You must use the .htm or .html extension.
How?
You simply save a text file as 'something.htm', (replace 'something' with your page name).
Warning: Notepad tends to save as .txt, so you may get 'something.htm.txt', unless you use the 'All files' option, when saving in Notepad.
You can also change the extension in Explorer.

The .htm extension tells the Windows, or the file opening facility, that it is a web page and it must use a
a web browser, (i.e.: Internet Explorer or Netscape), to open that file.
To make the page work, however, it will need 'tags'. *

Notes:
DO NOT use Word for learning to write web pages: It produces heavy, poor quality, web pages.
CHECK html files to ensure that they have been saved with the correct extension.

* Virtually everything in a web page is done with tags.
Most tags must be opened and closed.
The clever bits are often done with Style Sheets and/or 'scripts'.

<HTML>
The first tag on a HTML page.
At the end of the page you will close the tag, with </HTML>
Everything else is contained within these tags, (except in the more advanced pages).

The second part of the page is the Head section, which normally contains scripts or small programs: <HEAD> ….. </HEAD>
It is not needed for this test page.

<BODY>
The main tag is the body tag; what viewers will see is contained within these tags.
It can also set page colour, background, font, etc.

So what you have now is:

<HTML>
<BODY>

This is where your content or text will go.
(Use several paragraphs of text with line breaks for this exercise).

</BODY>
</HTML>

I suggest that you make up a web page using only the above so that you can see the subsequent results of defining colours and font, etc.

TO VIEW your web page:
Ensure that you have saved you page as an HTML page, i.e: mypage.htm

In Windows, use 'RUN', and type in the path to the file and the file name,
i.e.: C:\webdev\mypage.htm

If in Windows Explorer, simply double click on the file, and it will open in your web browser.

If you leave your browser open in the background, simply use 'Refresh' or 'Reload' to view changes to the code.

You can also set up a shortcut to your web page on your desktop.


Everything displayed will be in a very basic, default mode.
You will have no paragraphs or line breaks.

Note: The text will be at the top, left of your screen.
Later, we will use tables to position the text better.

Now we will make it look good.

 
top of page Go to next page
Building Web Pages
   
Basics | Formatting | Tables | Images | Linking | Resources | About | Examples | Exit Tutorial
build a web site, html tutorial, free html tutorial, html table tutorial, web page tutorial, html code tutorial, basic html tutorial, online html tutorial, tutorial on creating a web page, free online html tutorial, beginner free html tutorial, HTML tutorial, simple html tutorial, first web page, free web templates, web templates