Starting OutS2C Home « Starting Out

This part of the website aims to take you on a journey of discovery by introducing structure to our web pages through (X)HTML. We will start with the basics, introduce some more detailed concepts in the intermediate tutorials before going into some advanced techniques. Each part is cross referenced and complemented by the reference section for HTML 4.01.

In this lesson we gather the tools required to create our first HTML page and make a folder to store our HTML Basic practical files in. We do our first practical and view the results in a default web browser. You'll be amazed how easy it is to get going with HTML, try it and see.

The Basic Tools

All we need to get going is a basic text editor such as Notepad for windows. So for instance using Windows XP:

click Start>>All Programs>>Accessories>>Notepad

notepad1

Creating A Folder For Our HTML Basic Files

Let's create a folder for our HTML basic lessons

double click My Computer icon

double click C:\ drive (or whatever your local drive is)

right click the mouse in the window

from the drop down menu Select New

click the Folder option and call the folder _HTMLBasics and press enter.

Saving Our First File

Ok, with Notepad or a similar text editor open, type in :-

We just wrote a web page

Click file from the toolbar and then click the save option.

In the Save in: tab at the top make sure you are pointing to the _HTMLBasics folder we created above.

In the File name: text area type lesson_1_webpage.html and then click the Save button and close the Notepad.

save

The .html file extension lets the system know that this is a hypertext document, you must save the file with this extension to view the document in your default web browser. If you do not save the file with the .html file extension Notepad and other text editors save the file with the .txt file extension. This will stop you viewing the file in a web browser.

Viewing Our Saved File

From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

firefox1

Lesson 1 Complete

That's it! We have just created our first HTML, pretty simple eh?

Related Tutorials

HTML4 Intermediate Tutorials - Lesson 1 - What is XHTML?

HTML4 Advanced Tutorials - Lesson 1 - Importing CSS and JavaScript

What's Next?

In the next lesson we learn the syntax behind a HTML tag, by explaining start and end tags, tag attributes and some of the terminology commonly used. After this we take a quick tour on the basic structure of a HTML document. The lesson ends with a second practical where we add some HTML tags to the file we created in Lesson 1 and compare the results.

go to home page Homepage go to top of page Top