Learn Basic HTML and Web Page Construction

Issued as our first e-book, Learn Basic HTML and Web Page Construction was the first in the DianeV Web Design Help E-book Tutorials series. We're now publishing it here for free. I sincerely hope you find this information helpful, easy to use and beyond what you had expected.

Coming to grips with HTML can be difficult; I had the same problem when I started in 1997. Unfortunately, we've all got to do it; even if you use a WYSIWYG tool such as Dreamweaver to write your code for you, such programs can only do what they've been designed to do. And so, the day(s) will arrive when you can't fix some bit of code — and if you don't understand how it works, you won't be able to fix it easily.

In writing this Learn Basic HTML tutorial, we've had to decide what to include and what is better left out so as to give a workable grounding in HTML rather than a 100-page "book" and too much material. This tutorial should enable you to understand HTML enough to create your own websites from scratch.

Lastly, note that I wrote and published Learn Basic HTML and Web Page Construction in 2003 as an ebook covering website coding and table-based layouts. While many designers have gone to table-less layouts (as have I), most of the information is still pertinent today — and if you're designing or writing HTML email newsletters, tables are still very much the way to go. I believe this tutorial makes understanding how HTML works easy.



1What you'll need

This Tutorial will teach you to create web pages in HTML. While there is more to HTML, these basics will give you a good grounding — and you may find that you rarely need more. We'll also give you links to more information.

You'll need the following tools for the purposes of this Tutorial:

  1. A Text Editor. You can use any text editor to write HTML, but I would not suggest using a word processing program (such as Microsoft Word) as it can enter a lot of extraneous hidden coding that will wreak havoc on your web pages. The key here is control.

    NotePad, the bare-bones text editor which comes with Windows, will do. Our favorites are NoteTab Pro and Adobe HomeSite. HomeSite was bundled with Dreamweaver 4 way back when, but the newer Dreamweaver versions have incorporated some of HomeSite's functions. You can also use Dreamweaver's Code View.

  2. Web Browsers. To view your web pages as you go, you'll need a variety of browsers: Internet Explorer (which comes on all Windows computers), Chrome, Firefox and Opera, at a minimum. Testing in multiple browsers will allow you to ensure that your HTML is "cross-browser compatible" — that is, that it displays correctly in all modern browsers.

If you're going to create a website, you'll also need these:

  • Web Hosting Space. A place to put your finished website.
  • A Domain Name. Not necessary for personal websites, but vital for professional or commercial sites.
  • Images. If you're going to use images, you'll likely need both the images and an image manipulation program. Photoshop (at adobe.com) is the industry standard. Note that Adobe also offers the much less expensive Photoshop Elements.
  • A Program for Uploading Websites. These are called FTP programs (File Transfer Protocol — the file transfer language for transferring files on the Web) programs.

Our short list of website-building programs can be found in our Newsletter: Web Designer Tools.

And so, without further ado, let's get started. » What is HTML?

  1. The Learn Basic HTML Series:
    1. Learn Basic HTML and Web Page Construction
    2. What is HTML?
    3. HTML Page Structure
    4. Head Tag, MetaTags & Titles
    5. Adding Page Content
    6. Tables
    7. CSS and Fonts
    8. Putting It All Together
    9. Finale

DianeV Web Design Studio

© 1998- DianeV Web Design Studio. All Rights Reserved. :: Privacy/Legal/Return Policy. Any unauthorized reproduction
or distribution of the contents of this website is a violation of copyright law and may result in severe civil and criminal penalties.