Save this page to your DEL.ICIO.US account and TAG it there
Return here via: http://www.tinyurl.com/32byv
Next: Setting up (Housekeeping awareness) | Browse Index | On to Step 1

Vance's e-Zguide
to creating simple HTML files

This tutorial has the following components:

Step

Concept

<Tags>
1 The basic structure tags <HTML> <HEAD> <BODY>
2 Putting your document title in the blue bar of the browser <TITLE>
3 Formatting text: getting the browser to display text in paragraph form <P>
4 Formatting text: breaking the text into lines with line breaks <BR>
5 Formatting text: bold and italics <B> <I>
6 Inserting images | Working with pictures on the Internet <IMG SRC="...">
7 Linking to other html files in a web project <A HREF="...">
8 Linking to other URLs on the Internet <A HREF="http://...">
9 Text formatting: changing font size <FONT SIZE="+1">
10 Centering text and images
and drawing lines across the page		 <CENTER> <HR>
and < ... align="center">
11 Changing background color | Worksheet on backgrounds from Richard Pheasant | Find Color Codes through links here <BODY BGCOLOR="#..." TEXT="#...">
12 Control placement of text, images, and other elements on a page by setting up Tables. | A Simple Sample | Better page format: putting tables inside tables <TABLE BORDER="" CELLSPACING=""><TR><TD>
13 How to make simple unordered (bulleted) lists | How to make simple ordered (numbered) lists <UL> and <OL>
    <LI></LI>
    <LI></LI>
</UL> and </OL>
14 Nesting lists within lists: http://www.extropia.com/tutorials/web_design/ul.html | See an example nested list . <UL>
   <LI>
        <UL>
           <LI></LI>
        </UL>
  </LI>
</UL>

Review

Extended practice

Some other good sites for understanding HTML basics

I add to these as I encounter them in developing this page. If you find good sites, let me know about them:

How to use this tutorial

This tutorial aims to teach the 'very basics' of creating HTML web pages. This tutorial was created most directly in response to a colleague* who challenged me one night at dinner to write a set of instructions that would explain how to make web pages. These pages were first presented as part of a workshop I gave in Cyprus in 2001 on Internet applications in foreign language learning.

The easiest way to create web pages is to use a WYSIWYG (what you see is what you get) HTML editor, and therefore the most difficult part of the challenge is the impossibility of anticipating what editor would be chosen. I have met the challenge by explaining how easy it is to code simple web pages without such an editor. This meets the challenge as it enables anyone to create web pages with the most common and useful features of web design.

To write your own web pages using this tutorial, simply create a NEW document in any pure text editor, such as Notepad on almost any PC, and copy the commands that follow into your Notepad file. Of course, you change the parts of the commands that say what YOU want to say and link to where YOU want to link.

If you want to get fancy, you can increase your skills in HTML by visiting a site such as http://www.webmonkey.com or http://www.htmlgoodies.com/, or enhancing your work with a more powerful HTML editor.

Once you've learned the essentials of HTML, you may find that you never really need to make a web page in this way. But when you use an easy HTML editor to create your pages, by having a grasp of these concepts you'll be able to understand what you're doing and avoid frustration by being able to fix things in the source code when the editor misbehaves (as they do, believe me).

What people have said about this tutorial ...

Colleagues who have been kind enough to have a look at this work have offered the following comments:

Notes

*The colleague who inspired this mni-project was Helen Anderson, an acquaintance from Abu Dhabi who since passed away, but will always be remembered in this small tribute.

For comments, suggestions, or further information on this page,
contact Vance Stevens, page author and webmaster.

Last updated: January 22, 2008 - 07:00 UTC (GMT)

Copyright 2008 by Vance Stevens
under Creative Commons License: http://creativecommons.org/licenses/by-nc-sa/2.5/