Thursday, June 30, 2011

STARTED

GETTING STARTING?

OK, lets get straight into it. Here, you will learn just how easy it is to create a web page. In fact, by the time you've finished with this web page, you will have created your own web page!

When you create a web page you will usually do something like this:

1. Create an HTML file
2. Type some HTML code
3. View the result in your browser
4. Repeat the last 2 steps (if necessary)

Creating a Webpage

OK, let's walk through the above steps in more detail.

1.Create an HTML file

An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).
A. Open up your computer's normal plain text editor (this will probably be Notepad if you're using Windows or TextEdit if you're using a Mac). You could use a specialized HTML editor such as CoffeeCup or Dreamweaver if you prefer (What is an HTML editor?).
B. Create a new file (if one wasn't already created)
C. Save the file as html_tutorial_example.html

2.Type some HTML code
Type the following code:

<*head>
<*title>HTML Tutorial Example<*/title>
<*/head>
<*body>
<*p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!<*/p>
<*/body>
<*/html>

NOTE: please firstly remove all Asterics.

3.View the result in your browser

Either...
A. Navigate to your file then double click on it

...OR...
A. Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).
B. Select File > Open, then click "Browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "Open".

4.Repeat the last 2 steps until you're satisfied with the result

It's unrealistic to expect that you will always get it right the first time around. Don't worry - that's OK! Just try again and again - until you get it right.

Explanation of code

OK, before we get too carried away, I'll explain what that code was all about.

We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an opening and closing tag.

All HTML documents should at least contain all of the tags we've just coded and in that order.

The next lesson goes into a bit more detail about HTML tags.

WHAT DO YOU NEED?

You don't need any tools to learn.

* You don't need an HTML editor
* You don't need a web server
* You don't need a web site

Editing HTML

HTML can be written and edited using many different editors like Dreamweaver and Visual Studio.

However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using a plain text editor is the best way to learn HTML.

CREATE YOUR OWN TEST WEB

If you just want to learn HTML, skip the rest of this chapter.

If you want to create a test page on your own computer, just copy the 3 files below to your desktop.

(Right click on each link, and select "save target as" or "save link as")

mainpage.htm

page1.htm

page2.htm

After you have copied the files, you can double-click on the file called "mainpage.htm" and see your first web site in action.

USE YOUR TEST WEB FOR LEARNING

We suggest you experiment with everything you learn by editing your web files with a text editor (like Notepad).

Note: If your test web contains HTML markup tags you have not learned, don't panic. You will learn all about it in the next chapters.

.HTM or .HTML FILE EXTENSION?

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.