HTML Beginner Tutorial Part 1

HTML is where the magic of web page design begins. It isn’t presentational — that’s what CSS is for — HyperText Markup Language is a simple, elegant way to structure content.

Getting Started

Most of the stuff on the web is no different than the stuff on your computer — it’s just a whole load of files sorted into a whole load of directories.

HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor.

Notepad is a common text editor on Windows-based computers (usually found under the Programs > Accessories menu) and Mac OSX computers come bundled with TextEdit but any program that lets you fiddle with text will do.

Type this in to your text editor:

This is my first web page

Now create a folder called “html” wherever you like to save files on your computer and save the file as “myfirstpage.html”.

Be careful. It is important that the extension “.html” is specified - some text editors, such as Notepad, will automatically save it as “.txt” otherwise.

You also need to ensure that your file is being saved as plain text. TextEdit, for example, will start new files as “Rich text”, containing lots of formatting extras, by default. In such cases, go into the preferences and make sure you check the “Plain text” format option before creating a new file.

To look at HTML files, they don’t even need to be on the web. Open a web browser such as Chrome, Firefox, Safari or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, “c:\html\myfirstpage.html”) and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.

Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.

We’ve said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Adobe Dreamweaver.

You should be very careful when using these programs, especially if you are a beginner, because they often throw in unnecessary or non-standard code to “help” you.

If you’re serious about learning HTML, you should read through a tutorial such as this first, so that you at least have a basic understanding of what is going on.

Software programs such as these will never give you the same control over a web page as coding by hand.

If you do decide to use specialized code-editing software, we recommend one in which you are still coding by hand. They can, in fact, be helpful, especially the more advanced you become, in terms of code syntax highlighting and file management.

Next Page: Tags, Attributes, and Elements