Getting Started HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Beginners Section
GETTING STARTED

SYSTEM REQUIREMENTS

You will need:

Windows 98/ME/2000/XP/Vista

A browser (Internet Explorer, Mozilla Firefox, Opera, etc)

A text editor like Notepad

A new folder called "Myweb" or something similar

An ISP account (Internet Service Provider) if you want to post your pages to the Web

You might like to print this file so you can refer to it as we get going. A plain printable (black &white) version is available HERE.

You have three choices when using this tutorial:

You can work on-line (not recommended unless you have a lot of bandwidth);
You can download each page you want as you go along; or
You can download the entire tutorial so that you can work offline. (Sorry, this option not yet available for this version - coming soon.)

The typed input is all done in plain text and all you need is Notepad which comes with Windows®. You should practice using Notepad if you've never used it before - make sure you know how to Save, Minimise, Cut, Copy and Paste. Create a new folder on your hard drive and call it “Myweb“ or whatever you prefer. That is where all the work we will do will be saved. The first time you save it in NotePad, use “Save As“, from then on just click on “Save“.

Avoid using a word processor with page formatting, as it will at best be ignored, or at worst, confuse the browser. Having said that, certain word processors and DTPs can use a Wizard to convert their output to HTML equivalent. Depending on the programme used, you can usually alter the code to suit yourself. More on that further down the track. For now, please stick to Notepad.

You can use any text editor other than Notepad - there are a number available, some free. I recommend my favourite, the multi-award winning NoteTab®. It comes in three flavours, Light (free), Standard and Pro. Though I use Dreamweaver®, most of my web pages, both in this tutorial and in my professional capacity as a web site designer, are “hand made” or edited using NoteTab.

BROWSERS

For ease of use, I have found Netscape to be the best to work with when creating web pages. I have Netscape 7 installed as well as Mozilla Firefox and Internet Explorer. While writing and editing pages I often use Netscape then check them in both IE and Firefox. Added note Even though Netscape has now been discontinued I still use it as previously mentioned

Cross browser compatibility is something you should strive for. At the very least your pages should look the same in other browsers. If your code is correct there is no reason I know of why your pages will not work properly in other browsers. Using an HTML checker helps to ensure your code is correct. More on that later.

You DON'T have to be online to use your browser - you can use it offline. Most browsers allow you to choose whether you want to work offline or not. Choose offline or cancel your connection. If you are on cable or a similar connection, you may need to switch your modem off or you will be using precious bandwidth. For reasons given above I strongly recommend you install Netscape to create and view your initial pages, even if your default browser is something else. You should always check your pages in as many browsers as possible before posting them to the Internet.

STARTING A WEB PAGE

If you haven't already done so, create a new folder to hold your practice pages. Call it "Myweb" or whatever you prefer.

You will be saving and switching from Notepad, or your text editor, to this web page and back, using the "Minimise" button (the little minus sign - top right) to place them on the taskbar. This sounds more complicated than it is, and you'll soon get the hang of it. Practice a few times and it will become automatic.

Minimise (but do not close) the Get Started page, open Notepad (or your text editor). To find Notepad, click START--> PROGRAMS--> ACCESSORIES--> Notepad. Open Notepad by clicking on it. (If it is not there you will have to install it from your Windows™ CD. If you need help with this contact me or read the Windows™ Help file.)

If you are using another text editor, open it in the usual way. Make sure that "Word Wrap" is ON. From now on I will only refer to Notepad. Now you should see a blank page. All the strange text you see below is the code you will be using to create your first web page. You will need to copy it exactly. Don't worry about what it all means at this stage - we'll get to that shortly. This is just a little exercise to show you how easy it really is.

Throughout this tutorial I have done all the coding in UPPER CASE and usually in BLUE to make it easier to read and to distinguish between code & non-code.

Now you have two choices (please read both first):

(1) Either, type the following in Notepad (you may have to copy it out in writing first or print this page), but read the next part (Copy and Paste) first:

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
Here is my very first web page!
<P>
And I did it the easy way
<P>
with Oz Web Weaver.
<P>
It's only four lines so it's not much to look at yet, but it's a start.
</BODY>
</HTML>

Copy and Paste

(2) Or here's an alternative to all the typing. Position your cursor at the beginning of the blue text above, left click and HIGHLIGHT from <HTML> to the end of </HTML> using your mouse. (Yes, it works in web pages!) Select "Edit", then "Copy" (or CTRL+C). Switch from this page to your blank Notepad page, select "Edit", "Paste" (or CTRL+V), and voila, there it is! To see it in your browser, read on.

Be very careful with the opening < and closing > tags. Nothing will work properly if they are omitted. (Basic tags come in the next lesson, “Basic HTML Tags“.)

This Copy and Paste stuff will become your best friend and applies to any of the code in these lessons. It will be used extensively as you build your web page.

Now go to the "File" menu and click on "Save As". This will prompt you to create a name for your file. In the box, type in a file name - let's call it mypage1.html. At the bottom of the prompt you should see a space that says "Save file as Type" or "Save as Type". The default is .txt, so you will need to change the extension to .html. Click on the down arrow on the right side of the input box and highlight All Files(*.*) . Click on this to make the change, then choose the drive and folder (eg "c:\Myweb") to save to, and click on "Save".

You must use this routine each time you create a new HTML file or alter an existing one.

Now switch back to your web browser to view the file you just created. It should be in the task bar at the bottom of the screen, but if you have accidentally closed it, open it again. Alternatively Minimise Notepad by clicking the minus sign at the top right of the window.

If you see an error saying the browser could not connect to "http://www.somepage.html" or something similar, hit "OK" and you should get a blank page. In the location or address box (at the top), type in the path to your html file. If you have the file in a folder called "Myweb", you would type the following:

c:\Myweb\mypage1.html. Your browser will display the page when you hit Enter.

Another option is "Open Page". To use this, go to the "File" menu in your web browser. Look for "Open Page", "Open File", "Open Local File", or a similar phrase. Click this option and you will be able to browse for your file and open it from there.

(A big plus for using NoteTab is that you have heaps of other options. You can set up your Toolbar to display the Browser icon. Simply click on it to open your browser. You also get various libraries and clipbooks to make coding easier. If you would like tips or help just let me know.)

Once the page is displayed, you will see the following:

Here is my very first web page!

And I did it the easy way

with Oz Web Weaver.

It's only four lines so it's not much to look at yet, but it's a start.

Now that you have the idea let's take a closer look at what all this means.

Now you can go to the Main Index and read About ... the history behind OzWeb Weaver, OR click on Beginners Index and start the first lesson, Tags 1 - Basic HTML Tags.

Main Index | Beginners Index | Help

* Windows is a trademark of Microsoft Corporation registered in the U.S. and other countries. All other trademarks and service marks are the property of their respective owners.